[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);
@@ -82,7 +41,7 @@ export class TextTokensFilterModel extends FilterModel {
      * @inheritDoc
      */
     set normalized(value) {
-        this._raw = value.join(TOKENS_DELIMITER);
+        this._value = value.join(TOKENS_DELIMITER);
     }
 
     /**

lib/public/views/DataPasses/ActiveColumns/dataPassesActiveColumns.js

@@ -20,7 +20,7 @@ import { h } from '/js/src/index.js';
 import { formatDataPassName } from '../format/formatDataPassName.js';
 import { formatDataPassStatusHistory } from '../format/formatStatusHistory.js';
 import { checkboxes } from '../../../components/Filters/common/filters/checkboxFilter.js';
-import { textFilter } from '../../../components/Filters/common/filters/textFilter.js';
+import { textInputFilter } from '../../../components/Filters/common/filters/textInputFilter.js';
 
 /**
  * List of active columns for a generic data passes table
@@ -35,7 +35,7 @@ export const dataPassesActiveColumns = {
         visible: true,
         sortable: true,
         format: (_, dataPass) => formatDataPassName(dataPass),
-        filter: (filteringModel) => textFilter(filteringModel.get('names'), { class: 'w-75 mt1', placeholder: 'e.g. LHC22a, lhc23b, ...' }),
+        filter: (filteringModel) => textInputFilter(filteringModel, 'names', 'e.g. LHC22a, lhc23b, ...'),
         balloon: true,
         classes: 'w-20',
     },

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

@@ -13,9 +13,9 @@
 
 import { h } from '/js/src/index.js';
 import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
-import { textFilter } from '../../../components/Filters/common/filters/textFilter.js';
 import { qcFlagTypeColoredBadge } from '../../../components/qcFlags/qcFlagTypeColoredBadge.js';
 import radioButtonFilter from '../../../components/Filters/common/filters/radioButtonFilter.js';
+import { textInputFilter } from '../../../components/Filters/common/filters/textInputFilter.js';
 
 /**
  * List of active columns for a QC Flag Types table
@@ -30,7 +30,7 @@ export const qcFlagTypesActiveColumns = {
     name: {
         name: 'Name',
         visible: true,
-        filter: ({ filteringModel }) => textFilter(filteringModel.get('names'), { class: 'w-75 mt1', placeholder: 'e.g. BadPID, ...' }),
+        filter: ({ filteringModel }) => textInputFilter(filteringModel, 'names', 'e.g. BadPID, ...'),
         classes: 'f6',
         sortable: true,
         format: (_, qcFlagType) => qcFlagTypeColoredBadge(qcFlagType),
@@ -40,7 +40,7 @@ export const qcFlagTypesActiveColumns = {
         name: 'Method',
         visible: true,
         sortable: true,
-        filter: ({ filteringModel }) => textFilter(filteringModel.get('methods'), { class: 'w-75 mt1', placeholder: 'e.g. Bad PID, ...' }),
+        filter: ({ filteringModel }) => textInputFilter(filteringModel, 'methods', '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 { textInputFilter } from '../../../components/Filters/common/filters/textInputFilter.js';
 
 /**
  * List of active columns for a generic simulation passes table
@@ -31,10 +31,7 @@ export const simulationPassesActiveColumns = {
         name: 'Name',
         visible: true,
         sortable: true,
-        filter: ({ filteringModel }) => textFilter(
-            filteringModel.get('names'),
-            { class: 'w-75 mt1', placeholder: 'e.g. LHC23k5, ...' },
-        ),
+        filter: ({ filteringModel }) => textInputFilter(filteringModel, 'names', 'e.g. LHC23k5, ...'),
         classes: 'w-10 f6',
     },
 

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

@@ -14,9 +14,9 @@
 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 { frontLink } from '../../../components/common/navigation/frontLink.js';
 import { badge } from '../../../components/common/badge.js';
+import { textInputFilter } from '../../../components/Filters/common/filters/textInputFilter.js';
 
 /**
  * List of active columns for a generic periods table
@@ -30,10 +30,7 @@ export const lhcPeriodsActiveColumns = {
         name: 'Name',
         visible: true,
         sortable: true,
-        filter: ({ filteringModel }) => textFilter(
-            filteringModel.get('names'),
-            { class: 'w-75 mt1', placeholder: 'e.g. LHC22a, lhc23b, ...' },
-        ),
+        filter: ({ filteringModel }) => textInputFilter(filteringModel, 'names', 'e.g. LHC22a, lhc23b, ...'),
         classes: 'w-15',
     },
 
@@ -92,10 +89,7 @@ export const lhcPeriodsActiveColumns = {
         visible: true,
         sortable: true,
         format: (_, lhcPeriod) => formatLhcPeriodYear(lhcPeriod.name),
-        filter: ({ filteringModel }) => textFilter(
-            filteringModel.get('years'),
-            { class: 'w-75 mt1', placeholder: 'e.g. 2022, 2023, ...' },
-        ),
+        filter: ({ filteringModel }) => textInputFilter(filteringModel, 'years', 'e.g. 2022, 2023, ...'),
         classes: 'w-7',
     },
 
@@ -104,10 +98,7 @@ export const lhcPeriodsActiveColumns = {
         visible: true,
         sortable: true,
         format: (pdpBeamTypes) => pdpBeamTypes.length > 0 ? pdpBeamTypes.join(',') : '-',
-        filter: ({ filteringModel }) => textFilter(
-            filteringModel.get('pdpBeamTypes'),
-            { class: 'w-75 mt1', placeholder: 'e.g. pp, PbPb' },
-        ),
+        filter: ({ filteringModel }) => textInputFilter(filteringModel, 'pdpBeamTypes', 'e.g. pp, PbPb'),
         classes: 'w-7',
     },
 

test/public/Filters/FilteringModel.test.js

@@ -143,9 +143,9 @@ module.exports = () => {
         await waitForTableTotalRowsCountToEqual(page, 3);
 
         // Name
-        await fillInput(page, '.name-filter input', 'LHC23f');
+        await fillInput(page, '.names-textFilter', 'LHC23f', ['change']);
         await waitForTableTotalRowsCountToEqual(page, 1);
-        await fillInput(page, '.name-filter input', 'bogus');
+        await fillInput(page, '.names-textFilter', 'bogus', ['change']);
         await waitForTableTotalRowsCountToEqual(page, 0);
         await page.goBack();
         await waitForTableTotalRowsCountToEqual(page, 1);

test/public/Filters/filtersToUrl.test.js

@@ -256,9 +256,9 @@ module.exports = () => {
     it('should set filters from lhcPriodOverview to the URL', async () => {
         await goToPage(page, 'lhc-period-overview');
 
-        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(2) input[type=text]', '2022');
-        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(1) input[type=text]', 'LHC22a', ['change']);
+        await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(2) input[type=text]', '2022', ['change']);
+        await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(3) input[type=text]', 'PbPb', ['change']);
         const queryParameters = getQueryParameters(page);
         expect(queryParameters).to.deep.equal({
             "page": "lhc-period-overview",
@@ -271,8 +271,8 @@ module.exports = () => {
     it('should set filters from qcFlagTypesOverview to the URL', async () => {
         await goToPage(page, 'qc-flag-types-overview');
 
-        await fillInput(page, '.name-filter input[type=text]', 'bad');
-        await fillInput(page, '.method-filter input[type=text]', 'bad');
+        await fillInput(page, '.name-filter input[type=text]', 'bad', ['change']);
+        await fillInput(page, '.method-filter input[type=text]', 'bad', ['change']);
         await pressElement(page, '#badFilterRadioBad', true);
 
         const queryParameters = getQueryParameters(page);
@@ -343,7 +343,7 @@ module.exports = () => {
     it('should set filters from DataPassesPerLhcPeriodOverview to the URL', async () => {
         await goToPage(page, 'data-passes-per-lhc-period-overview', { queryParameters: { lhcPeriodId: 2 }});
 
-        await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC22b_apass1', ['input']);
+        await fillInput(page, '.names-textFilter', 'LHC22b_apass1', ['change']);
         await pressElement(page, '#checkboxes-checkbox-test', true);
 
 
@@ -359,7 +359,7 @@ module.exports = () => {
     it('should set filters from DataPassesPerSimulationPassOverview to the URL', async () => {
         await goToPage(page, 'data-passes-per-simulation-pass-overview', { queryParameters: { simulationPassId: 1 }});
 
-        await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC22b_apass1', ['input']);
+        await fillInput(page, '.names-textFilter', 'LHC22b_apass1', ['change']);
         await pressElement(page, '#checkboxes-checkbox-test', true);
 
         const queryParameters = getQueryParameters(page);
@@ -374,7 +374,7 @@ module.exports = () => {
     it('should set filters from AnchoredSimulationPassesOverview to the URL', async () => {
         await goToPage(page, 'anchored-simulation-passes-overview', { queryParameters: { dataPassId: 1 }});
 
-        await fillInput(page, '.name-filter input', 'LHC23k6c', ['input']);
+        await fillInput(page, '.names-textFilter', 'LHC23k6c', ['change']);
 
         const queryParameters = getQueryParameters(page);
         expect(queryParameters).to.deep.equal({

test/public/dataPasses/overviewPerLhcPeriod.test.js

@@ -164,7 +164,7 @@ module.exports = () => {
 
     it('should successfully apply data pass name filter', async () => {
         await pressElement(page, '#openFilterToggle');
-        await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC22b_apass1');
+        await fillInput(page, '.names-textFilter', 'LHC22b_apass1', ['change']);
 
         await expectColumnValues(page, 'name', ['deleted\nLHC22b_apass1\nSkimmable']);
 

test/public/dataPasses/overviewPerSimulationPass.test.js

@@ -113,7 +113,7 @@ module.exports = () => {
     it('should successfully apply data pass name filter', async () => {
         await pressElement(page, '#openFilterToggle');
 
-        await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC22b_apass1');
+        await fillInput(page, '.names-textFilter', 'LHC22b_apass1', ['change']);
         await expectColumnValues(page, 'name', ['deleted\nLHC22b_apass1\nSkimmable']);
 
         await pressElement(page, '#reset-filters', true);

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']);
     });
 };