[O2B-1562] Replace all instances of text filter with raw text filter

lib/public/components/Filters/common/filters/TextTokensFilterModel.js

@@ -10,69 +10,28 @@
  * granted to it by virtue of its status as an Intergovernmental Organization
  * or submit itself to any jurisdiction.
  */
-import { Observable } from '/js/src/index.js';
-import { FilterModel } from '../FilterModel.js';
+import { RawTextFilterModel } from './RawTextFilterModel.js';
 
 const TOKENS_DELIMITER = ',';
 
 /**
  * Model which accept string input and treats it as sequence of tokens, which processed in regard to given configuration. @see
  * TextTokensFilterModel#constructor
  */
-export class TextTokensFilterModel extends FilterModel {
+export class TextTokensFilterModel extends RawTextFilterModel {
     /**
      * Constructor
      */
     constructor() {
         super();
-        this._raw = '';
-        this._visualChange$ = new Observable();
-    }
-
-    /**
-     * Update value kept by a filter model and inform observers that some change occurred
-     * @param {string} value value to be stored
-     * @return {void}
-     */
-    update(value) {
-        const { _raw: previousRaw } = this;
-        this._raw = value;
-        if (previousRaw === value) {
-            this._visualChange$.notify();
-        } else {
-            this.notify();
-        }
-    }
-
-    /**
-     * Returns the raw value of the filter
-     */
-    get raw() {
-        return this._raw;
-    }
-
-    /**
-     * Reset the filter to its initial state
-     * @return {void}
-     */
-    reset() {
-        this._raw = '';
-    }
-
-    /**
-     * States if the filter has been filled
-     * @return {boolean} true if the filter is empty
-     */
-    get isEmpty() {
-        return this._raw.length === 0;
     }
 
     /**
      * Returns the normalized value of the filter, that can be used as URL parameter
      * @return {string[]} the normalized value
      */
     get normalized() {
-        return this._raw
+        return this._value
             .split(TOKENS_DELIMITER)
             .map((token) => token.trim())
             .filter((token) => token.length > 0);

lib/public/views/Logs/ActiveColumns/logsActiveColumns.js

@@ -80,7 +80,7 @@ export const logsActiveColumns = {
             filteringModel.get('title'),
             {
                 id: 'titleFilterText',
-                class: 'w-75 mt1',
+                classes: ['w-75 mt1'],
             },
         ),
         balloon: true,

lib/public/views/QcFlagTypes/ActiveColumns/qcFlagTypesActiveColumns.js

@@ -13,7 +13,7 @@
 
 import { h } from '/js/src/index.js';
 import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
-import { textFilter } from '../../../components/Filters/common/filters/textFilter.js';
+import { rawTextFilter } from '../../../components/Filters/common/filters/rawTextFilter.js';
 import { checkboxes } from '../../../components/Filters/common/filters/checkboxFilter.js';
 import { qcFlagTypeColoredBadge } from '../../../components/qcFlags/qcFlagTypeColoredBadge.js';
 
@@ -30,9 +30,9 @@ export const qcFlagTypesActiveColumns = {
     name: {
         name: 'Name',
         visible: true,
-        filter: ({ namesFilterModel }) => textFilter(
+        filter: ({ namesFilterModel }) => rawTextFilter(
             namesFilterModel,
-            { class: 'w-75 mt1', placeholder: 'e.g. BadPID, ...' },
+            { classes: ['w-75 mt1'], placeholder: 'e.g. BadPID, ...' },
         ),
         classes: 'f6',
         sortable: true,
@@ -43,9 +43,9 @@ export const qcFlagTypesActiveColumns = {
         name: 'Method',
         visible: true,
         sortable: true,
-        filter: ({ methodsFilterModel }) => textFilter(
+        filter: ({ methodsFilterModel }) => rawTextFilter(
             methodsFilterModel,
-            { class: 'w-75 mt1', placeholder: 'e.g. Bad PID, ...' },
+            { classes: ['w-75 mt1'], placeholder: 'e.g. Bad PID, ...' },
         ),
         classes: 'f6',
     },

lib/public/views/SimulationPasses/ActiveColumns/simulationPassesActiveColumns.js

@@ -11,13 +11,13 @@
  * or submit itself to any jurisdiction.
  */
 
-import { textFilter } from '../../../components/Filters/common/filters/textFilter.js';
 import { absoluteFrontLink } from '../../../components/common/navigation/absoluteFrontLink.js';
 import { frontLink } from '../../../components/common/navigation/frontLink.js';
 import { externalLinks } from '../../../components/common/navigation/externalLinks.js';
 import { formatItemsCount } from '../../../utilities/formatting/formatItemsCount.js';
 import { formatSizeInBytes } from '../../../utilities/formatting/formatSizeInBytes.js';
 import { badge } from '../../../components/common/badge.js';
+import { rawTextFilter } from '../../../components/Filters/common/filters/rawTextFilter.js';
 
 /**
  * List of active columns for a generic simulation passes table
@@ -31,9 +31,9 @@ export const simulationPassesActiveColumns = {
         name: 'Name',
         visible: true,
         sortable: true,
-        filter: ({ namesFilterModel }) => textFilter(
+        filter: ({ namesFilterModel }) => rawTextFilter(
             namesFilterModel,
-            { class: 'w-75 mt1', placeholder: 'e.g. LHC23k5, ...' },
+            { classes: ['w-75 mt1'], placeholder: 'e.g. LHC23k5, ...' },
         ),
         classes: 'w-10 f6',
     },

lib/public/views/lhcPeriods/ActiveColumns/lhcPeriodsActiveColumns.js

@@ -14,10 +14,12 @@
 import { h } from '/js/src/index.js';
 import { formatDistinctLhcBeamEnergies } from '../format/formatDistinctLhcBeamEnergies.js';
 import { formatLhcPeriodYear } from '../format/formatYear.js';
-import { textFilter } from '../../../components/Filters/common/filters/textFilter.js';
+import { rawTextFilter } from '../../../components/Filters/common/filters/rawTextFilter.js';
 import { frontLink } from '../../../components/common/navigation/frontLink.js';
 import { badge } from '../../../components/common/badge.js';
 
+const INPUT_CLASSES = ['w-75', 'mt1'];
+
 /**
  * List of active columns for a generic periods table
  */
@@ -30,9 +32,9 @@ export const lhcPeriodsActiveColumns = {
         name: 'Name',
         visible: true,
         sortable: true,
-        filter: ({ namesFilterModel }) => textFilter(
+        filter: ({ namesFilterModel }) => rawTextFilter(
             namesFilterModel,
-            { class: 'w-75 mt1', placeholder: 'e.g. LHC22a, lhc23b, ...' },
+            { classes: INPUT_CLASSES, placeholder: 'e.g. LHC22a, lhc23b, ...' },
         ),
         classes: 'w-15',
     },
@@ -92,9 +94,9 @@ export const lhcPeriodsActiveColumns = {
         visible: true,
         sortable: true,
         format: (_, lhcPeriod) => formatLhcPeriodYear(lhcPeriod.name),
-        filter: ({ yearsFilterModel }) => textFilter(
+        filter: ({ yearsFilterModel }) => rawTextFilter(
             yearsFilterModel,
-            { class: 'w-75 mt1', placeholder: 'e.g. 2022, 2023, ...' },
+            { classes: INPUT_CLASSES, placeholder: 'e.g. 2022, 2023, ...' },
         ),
         classes: 'w-7',
     },
@@ -104,9 +106,9 @@ export const lhcPeriodsActiveColumns = {
         visible: true,
         sortable: true,
         format: (pdpBeamTypes) => pdpBeamTypes.length > 0 ? pdpBeamTypes.join(',') : '-',
-        filter: ({ pdpBeamTypesFilterModel }) => textFilter(
+        filter: ({ pdpBeamTypesFilterModel }) => rawTextFilter(
             pdpBeamTypesFilterModel,
-            { class: 'w-75 mt1', placeholder: 'e.g. pp, PbPb' },
+            { classes: INPUT_CLASSES, placeholder: 'e.g. pp, PbPb' },
         ),
         classes: 'w-7',
     },

test/public/lhcPeriods/overview.test.js

@@ -128,7 +128,7 @@ module.exports = () => {
         await goToPage(page, 'lhc-period-overview');
         await pressElement(page, '#openFilterToggle');
         await page.waitForSelector('#reset-filters:disabled');
-        await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC22a');
+        await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC22a', ['change']);
         await expectColumnValues(page, 'name', ['LHC22a']);
         await pressElement(page, '#reset-filters', true);
         await expectColumnValues(page, 'name', ['LHC23f', 'LHC22b', 'LHC22a']);
@@ -139,7 +139,7 @@ module.exports = () => {
         await goToPage(page, 'lhc-period-overview');
         await pressElement(page, '#openFilterToggle');
         await page.waitForSelector('#reset-filters:disabled');
-        await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(2) input[type=text]', '2022');
+        await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(2) input[type=text]', '2022', ['change']);
         await page.waitForSelector('#reset-filters:disabled', { hidden: true, timeout: 250 });
         await expectColumnValues(page, 'year', ['2022', '2022']);
     });
@@ -148,7 +148,7 @@ module.exports = () => {
         await goToPage(page, 'lhc-period-overview');
         await pressElement(page, '#openFilterToggle');
         await page.waitForSelector('#reset-filters:disabled');
-        await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(3) input[type=text]', 'PbPb');
+        await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(3) input[type=text]', 'PbPb', ['change']);
         await page.waitForSelector('#reset-filters:disabled', { hidden: true, timeout: 250 });
         await expectColumnValues(page, 'pdpBeamTypes', ['PbPb']);
     });

test/public/qcFlagTypes/overview.test.js

@@ -94,7 +94,7 @@ module.exports = () => {
         await waitForTableLength(page, 7);
 
         await pressElement(page, '#openFilterToggle');
-        await fillInput(page, '.name-filter input[type=text]', 'bad');
+        await fillInput(page, '.name-filter input[type=text]', 'bad', ['change']);
         await checkColumnValuesWithRegex(page, 'name', '[Bb][Aa][Dd]');
 
         await pressElement(page, '#reset-filters', true);
@@ -103,7 +103,7 @@ module.exports = () => {
     it('should successfully apply QC flag type method filter', async () => {
         await waitForTableLength(page, 7);
 
-        await fillInput(page, '.method-filter input[type=text]', 'bad');
+        await fillInput(page, '.method-filter input[type=text]', 'bad', ['change']);
         await checkColumnValuesWithRegex(page, 'method', '[Bb][Aa][Dd]');
 
         await pressElement(page, '#reset-filters', true);

test/public/simulationPasses/overviewAnchoredSimulationPasses.test.js

@@ -117,10 +117,10 @@ module.exports = () => {
         await goToPage(page, 'anchored-simulation-passes-overview', { queryParameters: { dataPassId: 3 } });
         await pressElement(page, '#openFilterToggle');
 
-        await fillInput(page, '.name-filter input[type=text]', 'LHC23k6a');
+        await fillInput(page, '.name-filter input[type=text]', 'LHC23k6a', ['change']);
         await expectColumnValues(page, 'name', ['LHC23k6a']);
 
-        await fillInput(page, '.name-filter input[type=text]', 'LHC23k6a, LHC23k6b');
+        await fillInput(page, '.name-filter input[type=text]', 'LHC23k6a, LHC23k6b', ['change']);
         await expectColumnValues(page, 'name', ['LHC23k6b', 'LHC23k6a']);
     });
 };

test/public/simulationPasses/overviewPerLhcPeriod.test.js

@@ -131,10 +131,10 @@ module.exports = () => {
         await goToPage(page, 'simulation-passes-per-lhc-period-overview', { queryParameters: { lhcPeriodId: 1 } });
         await pressElement(page, '#openFilterToggle');
 
-        await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC23k6a');
+        await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC23k6a', ['change']);
         await expectColumnValues(page, 'name', ['LHC23k6a']);
 
-        await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC23k6a, LHC23k6b');
+        await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC23k6a, LHC23k6b', ['change']);
         await expectColumnValues(page, 'name', ['LHC23k6b', 'LHC23k6a']);
     });
 };