[O2B-1559] Warn the user of mutated filters when loading the url

lib/public/Model.js

@@ -101,21 +101,24 @@ export default class Model extends Observable {
         this.router.bubbleTo(this);
         registerFrontLinkListener((e) => this.router.handleLinkEvent(e));
 
+        // Setup warnings
+        this._warnings = new Map();
+
         // Models
 
         this.home = new HomePageModel(this);
         this.home.bubbleTo(this);
 
-        this.lhcPeriods = new LhcPeriodsModel(this.router);
+        this.lhcPeriods = new LhcPeriodsModel(this.router, this.warnings);
         this.lhcPeriods.bubbleTo(this);
 
-        this.dataPasses = new DataPassesModel(this.router);
+        this.dataPasses = new DataPassesModel(this.router, this.warnings);
         this.dataPasses.bubbleTo(this);
 
         this.qcFlags = new QcFlagsModel(this);
         this.qcFlags.bubbleTo(this);
 
-        this.simulationPasses = new SimulationPassesModel(this.router);
+        this.simulationPasses = new SimulationPassesModel(this.router, this.warnings);
         this.simulationPasses.bubbleTo(this);
 
         this.qcFlagTypes = new QcFlagTypesModel(this);
@@ -192,6 +195,14 @@ export default class Model extends Observable {
         this.dropdownMenu = false;
     }
 
+    /**
+     * Returns warnings map
+     * @returns {Map<string, string>} warnings map
+     */
+    get warnings() {
+        return this._warnings;
+    }
+
     /**
      * Delegates sub-model actions depending on new location of the page
      * @returns {vnode} The page to be loaded

lib/public/app.css

@@ -266,6 +266,12 @@ th.text-center, td.text-center {
     border-color: #f5c6cb;
 }
 
+.alert-warning {
+    color: var(--color-warning);
+    background-color: #ffe8c8;
+    border-color: #fdd69f;
+}
+
 .alert-danger hr {
     border-top-color: #f1b0b7;
 }

lib/public/components/Filters/common/FilteringModel.js

@@ -25,11 +25,13 @@ export class FilteringModel extends Observable {
      *
      * @param {QueryRouter} router router that controls the application's page navigation
      * @param {Object<string, FilterModel>} filters the filters with their label and model
+     * @param {object} warnings object reference used to define warnings.
      */
-    constructor(router, filters) {
+    constructor(router, filters, warnings) {
         super();
         this._visualChange$ = new Observable();
         this._pageIdentifier = null;
+        this._warnings = warnings;
 
         this._router = router;
         this._filters = {};
@@ -142,22 +144,44 @@ export class FilteringModel extends Observable {
      * @returns {undefined}
      */
     setFilterFromURL(notify = false) {
-        const { params: { page = '', filter } } = this._router;
+        const { params: { page = '', filter = {} } } = this._router;
 
         if (this._pageIdentifier === page) {
-            if (filter) {
-                for (const [key, value] of Object.entries(filter)) {
-                    if (key in this._filters) {
+            const unknownFilters = [];
+            const setFilterErrors = [];
+
+            for (const [key, value] of Object.entries(filter)) {
+                if (key in this._filters) {
+                    try {
                         this._filters[key].normalized = value;
+                    } catch {
+                        setFilterErrors.push(`${buildUrl('', { [key]: value }).slice(1)}`);
                     }
+                } else {
+                    unknownFilters.push(`'${key}'`);
                 }
+            }
+
+            if (setFilterErrors.length > 0) {
+                this._warnings.set(
+                    'Unparsable Filters',
+                    `The following filter-value pairs could not be parsed: [${setFilterErrors.join(', ')}]`,
+                );
             } else {
-                this.reset();
+                this._warnings.delete('Unparsable Filters');
             }
-        }
 
-        if (notify) {
-            this.notify();
+            if (unknownFilters.length > 0) {
+                this._warnings.set(
+                    'Unknown Filters',
+                    `The filters: [${unknownFilters.join(', ')}]; are not reccognised. Check if they are spelled correctly.`,
+                );
+            } else {
+                this._warnings.delete('Unknown Filters');
+            }
+            if (notify) {
+                this.notify();
+            }
         }
     }
 

lib/public/components/common/messages/warningComponent.js

@@ -0,0 +1,35 @@
+import { h } from '/js/src/index.js';
+import { iconX } from '/js/src/icons.js';
+
+/**
+ * Component to display whenever a page has warnings.
+ *
+ * @param {OverviewPageModel} overviewModel model that controlls an overview page
+ * @returns {Component} the warning componen
+ */
+export const warningComponent = (overviewModel) => {
+    const { warnings } = overviewModel;
+
+    if (!warnings.size) {
+        return null;
+    }
+
+    return h('details.alert.alert-warning', { open: true }, [
+        h('summary', 'Warnings'),
+        h('ul', warnings.entries().toArray().map(([key, message]) =>
+            h('li.flex-row.items-center', [
+                h(
+                    '.btn.btn-pill.alert-warning.mh1',
+                    {
+                        onclick: () => {
+                            warnings.delete(key);
+                            overviewModel.notify();
+                        },
+                    },
+                    iconX(),
+                ),
+                h('strong.mh1', `${key}:`),
+                h('span', message),
+            ]))),
+    ]);
+};

lib/public/models/OverviewModel.js

@@ -35,10 +35,11 @@ import { SortModel } from '../components/common/table/SortModel.js';
 export class OverviewPageModel extends Observable {
     /**
      * Constructor
+     * @param {Map<string, string>} warnings a map storing warnings to show to the user
      */
-    constructor() {
+    constructor(warnings) {
         super();
-
+        this._warnings = warnings;
         this._sortModel = new SortModel();
         this._sortModel.observe(() => {
             this._pagination.silentlySetCurrentPage(1);
@@ -97,6 +98,7 @@ export class OverviewPageModel extends Observable {
     reset() {
         this._item$.setCurrent(RemoteData.notAsked());
         this._pagination.reset();
+        this._warnings.clear();
     }
 
     /**
@@ -249,4 +251,13 @@ export class OverviewPageModel extends Observable {
     hasAnyData() {
         return this._item$.getCurrent().match({ Success: ({ length = 0 } = {}) => length > 0, Other: () => false });
     }
+
+    /**
+     * Returns the warnings object
+     *
+     * @return {object} the warning model
+     */
+    get warnings() {
+        return this._warnings;
+    }
 }

lib/public/views/DataPasses/DataPassesModel.js

@@ -22,14 +22,16 @@ export class DataPassesModel extends Observable {
     /**
      * The constructor of the model
      * @param {QueryRouter} router router that controls the application's page navigation
+     * @param {Map<string, string>} warnings a map storing warnings to show to the user
      */
-    constructor(router) {
+    constructor(router, warnings) {
         super();
 
-        this._perLhcPeriodOverviewModel = new DataPassesPerLhcPeriodOverviewModel(router, 'data-passes-per-lhc-period-overview');
+        this._perLhcPeriodOverviewModel = new DataPassesPerLhcPeriodOverviewModel(router, 'data-passes-per-lhc-period-overview', warnings);
         this._perLhcPeriodOverviewModel.bubbleTo(this);
 
-        this._perSimulationPassOverviewModel = new DataPassesPerSimulationPassOverviewModel(router, 'data-passes-per-simulation-pass-overview');
+        this._perSimulationPassOverviewModel =
+            new DataPassesPerSimulationPassOverviewModel(router, 'data-passes-per-simulation-pass-overview', warnings);
         this._perSimulationPassOverviewModel.bubbleTo(this);
     }
 

lib/public/views/DataPasses/DataPassesOverviewModel.js

@@ -25,8 +25,8 @@ export class DataPassesOverviewModel extends OverviewPageModel {
      * @param {QueryRouter} router router that controls the application's page navigation
      * @param {string} pageIdentifier string that indicates what page this model represents
      */
-    constructor(router, pageIdentifier) {
-        super();
+    constructor(router, pageIdentifier, warnings) {
+        super(warnings);
         this._filteringModel = new FilteringModel(
             router,
             {
@@ -35,6 +35,7 @@ export class DataPassesOverviewModel extends OverviewPageModel {
                     availableOptions: NON_PHYSICS_PRODUCTIONS_NAMES_WORDS.map((word) => ({ label: word.toUpperCase(), value: word })),
                 }),
             },
+            this._warnings,
         );
 
         this._filteringModel.pageIdentifier = pageIdentifier;

lib/public/views/DataPasses/PerLhcPeriodOverview/DataPassesPerLhcPeriodOverviewModel.js

@@ -21,9 +21,10 @@ export class DataPassesPerLhcPeriodOverviewModel extends DataPassesOverviewModel
      * Constructor
      * @param {QueryRouter} router router that controls the application's page navigation
      * @param {string} pageIdentifier string that indicates what page this model represents
+     * @param {Map<string, string>} warnings a map storing warnings to show to the user
      */
-    constructor(router, pageIdentifier) {
-        super(router, pageIdentifier);
+    constructor(router, pageIdentifier, warnings) {
+        super(router, pageIdentifier, warnings);
         this._lhcPeriodId = null;
     }
 

lib/public/views/DataPasses/PerLhcPeriodOverview/DataPassesPerLhcPeriodOverviewPage.js

@@ -19,6 +19,7 @@ import { filtersPanelPopover } from '../../../components/Filters/common/filtersP
 import { estimateDisplayableRowsCount } from '../../../utilities/estimateDisplayableRowsCount.js';
 import { dataPassesActiveColumns } from '../ActiveColumns/dataPassesActiveColumns.js';
 import { DataPassVersionStatus } from '../../../domain/enums/DataPassVersionStatus.js';
+import { warningComponent } from '../../../components/common/messages/warningComponent.js';
 
 const TABLEROW_HEIGHT = 42;
 // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes;
@@ -42,24 +43,18 @@ const getRowClasses = ({ versions }) => {
  * @returns {Component} The overview screen
  */
 export const DataPassesPerLhcPeriodOverviewPage = ({ dataPasses: { perLhcPeriodOverviewModel: dataPassesPerLhcPeriodOverviewModel } }) => {
-    dataPassesPerLhcPeriodOverviewModel.pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(
-        TABLEROW_HEIGHT,
-        PAGE_USED_HEIGHT,
-    ));
+    const { filteringModel, sortModel, pagination, items } = dataPassesPerLhcPeriodOverviewModel;
+
+    pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT));
 
     return h('', {
         onremove: () => dataPassesPerLhcPeriodOverviewModel.reset(),
     }, [
-        h('.flex-row.header-container.pv2', filtersPanelPopover(dataPassesPerLhcPeriodOverviewModel.filteringModel, dataPassesActiveColumns)),
+        h('.flex-row.header-container.pv2', filtersPanelPopover(filteringModel, dataPassesActiveColumns)),
+        warningComponent(dataPassesPerLhcPeriodOverviewModel),
         h('.w-100.flex-column', [
-            table(
-                dataPassesPerLhcPeriodOverviewModel.items,
-                dataPassesActiveColumns,
-                { classes: getRowClasses },
-                null,
-                { sort: dataPassesPerLhcPeriodOverviewModel.sortModel },
-            ),
-            paginationComponent(dataPassesPerLhcPeriodOverviewModel.pagination),
+            table(items, dataPassesActiveColumns, { classes: getRowClasses }, null, { sort: sortModel }),
+            paginationComponent(pagination),
         ]),
     ]);
 };

lib/public/views/DataPasses/PerSimulationPassOverview/DataPassesPerSimulationPassOverviewModel.js

@@ -23,9 +23,10 @@ export class DataPassesPerSimulationPassOverviewModel extends DataPassesOverview
      * Constructor
      * @param {QueryRouter} router router that controls the application's page navigation
      * @param {string} pageIdentifier string that indicates what page this model represents
+     * @param {Map<string, string>} warnings a map storing warnings to show to the user
      */
-    constructor(router, pageIdentifier) {
-        super(router, pageIdentifier);
+    constructor(router, pageIdentifier, warnings) {
+        super(router, pageIdentifier, warnings);
         this._simulationPass = new ObservableData(RemoteData.notAsked());
         this._simulationPass.bubbleTo(this);
     }

lib/public/views/DataPasses/PerSimulationPassOverview/DataPassesPerSimulationPassOverviewPage.js

@@ -22,6 +22,7 @@ import { breadcrumbs } from '../../../components/common/navigation/breadcrumbs.j
 import spinner from '../../../components/common/spinner.js';
 import { tooltip } from '../../../components/common/popover/tooltip.js';
 import { DataPassVersionStatus } from '../../../domain/enums/DataPassVersionStatus.js';
+import { warningComponent } from '../../../components/common/messages/warningComponent.js';
 
 const TABLEROW_HEIGHT = 42;
 // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes;
@@ -46,20 +47,17 @@ const getRowClasses = ({ versions }) => {
  */
 export const DataPassesPerSimulationPassOverviewPage = ({ dataPasses: {
     perSimulationPassOverviewModel: dataPassesPerSimulationPassOverviewModel } }) => {
-    dataPassesPerSimulationPassOverviewModel.pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(
-        TABLEROW_HEIGHT,
-        PAGE_USED_HEIGHT,
-    ));
+    const { items, simulationPass, pagination, filteringModel, sortModel } = dataPassesPerSimulationPassOverviewModel;
 
-    const { items, simulationPass, pagination } = dataPassesPerSimulationPassOverviewModel;
+    pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT));
 
     const commonTitle = h('h2#breadcrumb-header', 'Data Passes per MC');
 
     return h('', {
         onremove: () => dataPassesPerSimulationPassOverviewModel.reset(),
     }, [
         h('.flex-row.items-center.g2', [
-            filtersPanelPopover(dataPassesPerSimulationPassOverviewModel.filteringModel, dataPassesActiveColumns),
+            filtersPanelPopover(filteringModel, dataPassesActiveColumns),
             h(
                 '.flex-row.g1.items-center',
                 simulationPass.match({
@@ -70,14 +68,9 @@ export const DataPassesPerSimulationPassOverviewPage = ({ dataPasses: {
                 }),
             ),
         ]),
+        warningComponent(dataPassesPerSimulationPassOverviewModel),
         h('.w-100.flex-column', [
-            table(
-                items,
-                dataPassesActiveColumns,
-                { classes: getRowClasses },
-                null,
-                { sort: dataPassesPerSimulationPassOverviewModel.sortModel },
-            ),
+            table(items, dataPassesActiveColumns, { classes: getRowClasses }, null, { sort: sortModel }),
             paginationComponent(pagination),
         ]),
     ]);

lib/public/views/Environments/EnvironmentModel.js

@@ -29,7 +29,7 @@ export class EnvironmentModel extends Observable {
         super();
 
         // Sub-models
-        this._overviewModel = new EnvironmentOverviewModel(model, 'env-overview');
+        this._overviewModel = new EnvironmentOverviewModel(model, 'env-overview', model.warnings);
         this._overviewModel.bubbleTo(this);
 
         this._detailsModel = new EnvironmentDetailsModel();

lib/public/views/Environments/Overview/EnvironmentOverviewModel.js

@@ -29,9 +29,10 @@ export class EnvironmentOverviewModel extends OverviewPageModel {
      * Constructor
      * @param {Model} model global model
      * @param {string} pageIdentifier string that indicates what page this model represents
+     * @param {Map<string, string>} warnings a map storing warnings to show to the user
      */
-    constructor(model, pageIdentifier) {
-        super();
+    constructor(model, pageIdentifier, warnings) {
+        super(warnings);
 
         this._filteringModel = new FilteringModel(
             model.router,
@@ -48,6 +49,7 @@ export class EnvironmentOverviewModel extends OverviewPageModel {
                 }),
                 ids: new RawTextFilterModel(),
             },
+            this._warnings,
         );
 
         this._filteringModel.pageIdentifier = pageIdentifier;