[O2B-1602] Add widget for runs-overview to filter by pdpBeamType

lib/public/components/Filters/LhcFillsFilter/BeamTypeFilterModel.js

@@ -11,26 +11,18 @@
  * or submit itself to any jurisdiction.
  */
 
-import { beamTypesProvider } from '../../../services/beamTypes/beamTypesProvider.js';
-import { SelectionModel } from '../../common/selection/SelectionModel.js';
+import { ObservableBasedSelectionDropdownModel } from '../../detector/ObservableBasedSelectionDropdownModel.js';
 
 /**
  * Beam type filter model
  */
-export class BeamTypeFilterModel extends SelectionModel {
+export class BeamTypeFilterModel extends ObservableBasedSelectionDropdownModel {
     /**
      * Constructor
+     *
+     * @param {ObservableData<RemoteData<{name: string}, ApiError>>} beamTypes$ observable remote data of objects representing beam types
      */
-    constructor() {
-        super({});
-
-        beamTypesProvider.items$.observe(() => {
-            beamTypesProvider.items$.getCurrent().apply({
-                Success: (types) => {
-                    const beamTypes = types.map((type) => ({ value: type.beam_type }));
-                    this.setAvailableOptions(beamTypes);
-                },
-            });
-        });
+    constructor(beamTypes$) {
+        super(beamTypes$, ({ name, beam_type }) => ({ value: name ?? beam_type }));
     }
 }

lib/public/components/Filters/LhcFillsFilter/beamTypeFilter.js → lib/public/services/beamTypes/pdpBeamTypesProvider.js

@@ -11,12 +11,20 @@
  * or submit itself to any jurisdiction.
  */
 
-import { checkboxes } from '../common/filters/checkboxFilter.js';
+import { getRemoteData } from '../../utilities/fetch/getRemoteData.js';
+import { RemoteDataProvider } from '../RemoteDataProvider.js';
 
 /**
- * Renders a list of checkboxes that lets the user look for beam types
- *
- * @param {BeamTypeFilterModel} beamTypeFilterModel beamTypeFilterModel
- * @return {Component} the filter
+ * Service class to fetch beams types from the backend
  */
-export const beamTypeFilter = (beamTypeFilterModel) => checkboxes(beamTypeFilterModel, { selector: 'beam-types' });
+export class PdpBeamTypesProvider extends RemoteDataProvider {
+    /**
+     * @inheritDoc
+     */
+    async getRemoteData() {
+        const { data } = await getRemoteData('/api/runs/pdpBeamTypes');
+        return data;
+    }
+}
+
+export const pdpBeamTypesProvider = new PdpBeamTypesProvider();

lib/public/views/LhcFills/ActiveColumns/lhcFillsActiveColumns.js

@@ -21,11 +21,11 @@ import { formatRunsList } from '../../Runs/format/formatRunsList.js';
 import { formatLhcFillsTimeLoss } from '../format/formatLhcFillsTimeLoss.js';
 import { buttonLinkWithDropdown } from '../../../components/common/selection/infoLoggerButtonGroup/buttonLinkWithDropdown.js';
 import { infologgerLinksComponents } from '../../../components/common/externalLinks/infologgerLinksComponents.js';
+import { selectionDropdown } from '../../../components/common/selection/dropdown/selectionDropdown.js';
 import { formatBeamType } from '../../../utilities/formatting/formatBeamType.js';
 import { frontLink } from '../../../components/common/navigation/frontLink.js';
 import { toggleFilter } from '../../../components/Filters/common/filters/toggleFilter.js';
 import { durationFilter } from '../../../components/Filters/LhcFillsFilter/durationFilter.js';
-import { beamTypeFilter } from '../../../components/Filters/LhcFillsFilter/beamTypeFilter.js';
 import { timeRangeFilter } from '../../../components/Filters/common/filters/timeRangeFilter.js';
 import { textInputFilter } from '../../../components/Filters/common/filters/textInputFilter.js';
 
@@ -187,7 +187,10 @@ export const lhcFillsActiveColumns = {
         visible: true,
         size: 'w-8',
         format: (value) => formatBeamType(value),
-        filter: (lhcFillModel) => beamTypeFilter(lhcFillModel.filteringModel.get('beamTypes')),
+        filter: (lhcFillModel) => selectionDropdown(
+            lhcFillModel.filteringModel.get('beamTypes'),
+            { selectorPrefix: 'beam-types' },
+        ),
     },
     collidingBunches: {
         name: 'Colliding bunches',

lib/public/views/LhcFills/Overview/LhcFillsOverviewModel.js

@@ -18,6 +18,7 @@ import { TextComparisonFilterModel } from '../../../components/Filters/common/fi
 import { TimeRangeFilterModel } from '../../../components/Filters/RunsFilter/TimeRangeFilter.js';
 import { ToggleFilterModel } from '../../../components/Filters/common/filters/ToggleFilterModel.js';
 import { FilterableOverviewPageModel } from '../../../models/FilterableOverviewPageModel.js';
+import { beamTypesProvider } from '../../../services/beamTypes/beamTypesProvider.js';
 
 /**
  * Model for the LHC fills overview page
@@ -43,7 +44,7 @@ export class LhcFillsOverviewModel extends FilterableOverviewPageModel {
                 hasStableBeams: new ToggleFilterModel(stableBeamsOnly, true),
                 stableBeamsStart: new TimeRangeFilterModel(),
                 stableBeamsEnd: new TimeRangeFilterModel(),
-                beamTypes: new BeamTypeFilterModel(),
+                beamTypes: new BeamTypeFilterModel(beamTypesProvider.items$),
                 schemeName: new RawTextFilterModel(),
             },
         );

lib/public/views/Runs/ActiveColumns/runsActiveColumns.js

@@ -44,7 +44,6 @@ import { numericalComparisonFilter } from '../../../components/Filters/common/fi
 import { checkboxes } from '../../../components/Filters/common/filters/checkboxFilter.js';
 import radioButtonFilter from '../../../components/Filters/common/filters/radioButtonFilter.js';
 import { textInputFilter } from '../../../components/Filters/common/filters/textInputFilter.js';
-import { beamTypeFilter } from '../../../components/Filters/LhcFillsFilter/beamTypeFilter.js';
 
 /**
  * List of active columns for a generic runs table
@@ -588,11 +587,18 @@ export const runsActiveColumns = {
     pdpBeamType: {
         name: 'PDP Beam Type',
         visible: false,
+        filter: (runsOverviewModel) => selectionDropdown(
+            runsOverviewModel.filteringModel.get('pdpBeamTypes'),
+            { selectorPrefix: 'pdp-beam-types' },
+        ),
     },
     beamType: {
         name: 'Beam Type',
         visible: false,
-        filter: (runsOverviewModel) => beamTypeFilter(runsOverviewModel.filteringModel.get('beamTypes')),
+        filter: (runsOverviewModel) => selectionDropdown(
+            runsOverviewModel.filteringModel.get('beamTypes'),
+            { selectorPrefix: 'beam-types' },
+        ),
     },
     readoutCfgUri: {
         name: 'Readout Config URI',

lib/public/views/Runs/Overview/RunsOverviewModel.js

@@ -32,6 +32,8 @@ import { DataExportModel } from '../../../models/DataExportModel.js';
 import { runsActiveColumns as dataExportConfiguration } from '../ActiveColumns/runsActiveColumns.js';
 import { BeamModeFilterModel } from '../../../components/Filters/RunsFilter/BeamModeFilterModel.js';
 import { beamModesProvider } from '../../../services/beamModes/beamModesProvider.js';
+import { pdpBeamTypesProvider } from '../../../services/beamTypes/pdpBeamTypesProvider.js';
+import { beamTypesProvider } from '../../../services/beamTypes/beamTypesProvider.js';
 import { RadioButtonFilterModel } from '../../../components/Filters/common/RadioButtonFilterModel.js';
 import { SelectionModel } from '../../../components/common/selection/SelectionModel.js';
 import { TRIGGER_VALUES } from '../../../domain/enums/TriggerValue.js';
@@ -96,7 +98,8 @@ export class RunsOverviewModel extends FilterableOverviewPageModel {
                 dcs: new RadioButtonFilterModel([{ label: 'ANY' }, { label: 'ON', value: true }, { label: 'OFF', value: false }]),
                 epn: new RadioButtonFilterModel([{ label: 'ANY' }, { label: 'ON', value: true }, { label: 'OFF', value: false }]),
                 triggerValues: new SelectionModel({ availableOptions: TRIGGER_VALUES.map((value) => ({ label: value, value })) }),
-                beamTypes: new BeamTypeFilterModel(),
+                beamTypes: new BeamTypeFilterModel(beamTypesProvider.items$),
+                pdpBeamTypes: new BeamTypeFilterModel(pdpBeamTypesProvider.items$),
             },
         );
 

test/public/lhcFills/overview.test.js

@@ -349,13 +349,14 @@ module.exports = () => {
     });
 
     it('should successfully apply beam types filter', async () => {
-        const filterBeamTypeP_Pb = '#beam-types-checkbox-p-Pb';
-        const filterBeamTypePb_Pb = '#beam-types-checkbox-Pb-Pb';
+        const filterBeamTypeP_Pb = '#beam-types-dropdown-option-p-Pb';
+        const filterBeamTypePb_Pb = '#beam-types-dropdown-option-Pb-Pb';
 
         await goToPage(page, 'lhc-fill-overview');
         await waitForTableLength(page, 5);
 
         await openFilteringPanel(page);
+        await pressElement(page, '.beamType-filter .dropdown-trigger', true);
         await pressElement(page, filterBeamTypeP_Pb);
         await waitForTableLength(page, 1);