Skip to content

Commit d7cd556

Browse files
NarrowsProjectsNarrowsProjects
authored
[O2B-1562] Replace all instances of text filter with raw text filter (#2111)
Notable changes for users: - When typing in the input filters for Logs, LHC periods and Anchored passes the filters will be applied after leaving the input rather than after every key press Notable changes for developers: - the textFiltercomponent doesn't exist anymore - The textTokensFilterModel now uses the name 'value' over 'raw' for it's primary instance variable
1 parent e357482 commit d7cd556

14 files changed

Lines changed: 36 additions & 117 deletions

File tree

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

Lines changed: 4 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -10,69 +10,28 @@
1010
* granted to it by virtue of its status as an Intergovernmental Organization
1111
* or submit itself to any jurisdiction.
1212
*/
13-
import { Observable } from '/js/src/index.js';
14-
import { FilterModel } from '../FilterModel.js';
13+
import { RawTextFilterModel } from './RawTextFilterModel.js';
1514

1615
const TOKENS_DELIMITER = ',';
1716

1817
/**
1918
* Model which accept string input and treats it as sequence of tokens, which processed in regard to given configuration. @see
2019
* TextTokensFilterModel#constructor
2120
*/
22-
export class TextTokensFilterModel extends FilterModel {
21+
export class TextTokensFilterModel extends RawTextFilterModel {
2322
/**
2423
* Constructor
2524
*/
2625
constructor() {
2726
super();
28-
this._raw = '';
29-
this._visualChange$ = new Observable();
30-
}
31-
32-
/**
33-
* Update value kept by a filter model and inform observers that some change occurred
34-
* @param {string} value value to be stored
35-
* @return {void}
36-
*/
37-
update(value) {
38-
const { _raw: previousRaw } = this;
39-
this._raw = value;
40-
if (previousRaw === value) {
41-
this._visualChange$.notify();
42-
} else {
43-
this.notify();
44-
}
45-
}
46-
47-
/**
48-
* Returns the raw value of the filter
49-
*/
50-
get raw() {
51-
return this._raw;
52-
}
53-
54-
/**
55-
* Reset the filter to its initial state
56-
* @return {void}
57-
*/
58-
reset() {
59-
this._raw = '';
60-
}
61-
62-
/**
63-
* States if the filter has been filled
64-
* @return {boolean} true if the filter is empty
65-
*/
66-
get isEmpty() {
67-
return this._raw.length === 0;
6827
}
6928

7029
/**
7130
* Returns the normalized value of the filter, that can be used as URL parameter
7231
* @return {string[]} the normalized value
7332
*/
7433
get normalized() {
75-
return this._raw
34+
return this._value
7635
.split(TOKENS_DELIMITER)
7736
.map((token) => token.trim())
7837
.filter((token) => token.length > 0);
@@ -82,7 +41,7 @@ export class TextTokensFilterModel extends FilterModel {
8241
* @inheritDoc
8342
*/
8443
set normalized(value) {
85-
this._raw = value.join(TOKENS_DELIMITER);
44+
this._value = value.join(TOKENS_DELIMITER);
8645
}
8746

8847
/**

‎lib/public/components/Filters/common/filters/textFilter.js‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { h } from '/js/src/index.js';
2020
import { formatDataPassName } from '../format/formatDataPassName.js';
2121
import { formatDataPassStatusHistory } from '../format/formatStatusHistory.js';
2222
import { checkboxes } from '../../../components/Filters/common/filters/checkboxFilter.js';
23-
import { textFilter } from '../../../components/Filters/common/filters/textFilter.js';
23+
import { textInputFilter } from '../../../components/Filters/common/filters/textInputFilter.js';
2424

2525
/**
2626
* List of active columns for a generic data passes table
@@ -35,7 +35,7 @@ export const dataPassesActiveColumns = {
3535
visible: true,
3636
sortable: true,
3737
format: (_, dataPass) => formatDataPassName(dataPass),
38-
filter: (filteringModel) => textFilter(filteringModel.get('names'), { class: 'w-75 mt1', placeholder: 'e.g. LHC22a, lhc23b, ...' }),
38+
filter: (filteringModel) => textInputFilter(filteringModel, 'names', 'e.g. LHC22a, lhc23b, ...'),
3939
balloon: true,
4040
classes: 'w-20',
4141
},

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@
1313

1414
import { h } from '/js/src/index.js';
1515
import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
16-
import { textFilter } from '../../../components/Filters/common/filters/textFilter.js';
1716
import { qcFlagTypeColoredBadge } from '../../../components/qcFlags/qcFlagTypeColoredBadge.js';
1817
import radioButtonFilter from '../../../components/Filters/common/filters/radioButtonFilter.js';
18+
import { textInputFilter } from '../../../components/Filters/common/filters/textInputFilter.js';
1919

2020
/**
2121
* List of active columns for a QC Flag Types table
@@ -30,7 +30,7 @@ export const qcFlagTypesActiveColumns = {
3030
name: {
3131
name: 'Name',
3232
visible: true,
33-
filter: ({ filteringModel }) => textFilter(filteringModel.get('names'), { class: 'w-75 mt1', placeholder: 'e.g. BadPID, ...' }),
33+
filter: ({ filteringModel }) => textInputFilter(filteringModel, 'names', 'e.g. BadPID, ...'),
3434
classes: 'f6',
3535
sortable: true,
3636
format: (_, qcFlagType) => qcFlagTypeColoredBadge(qcFlagType),
@@ -40,7 +40,7 @@ export const qcFlagTypesActiveColumns = {
4040
name: 'Method',
4141
visible: true,
4242
sortable: true,
43-
filter: ({ filteringModel }) => textFilter(filteringModel.get('methods'), { class: 'w-75 mt1', placeholder: 'e.g. Bad PID, ...' }),
43+
filter: ({ filteringModel }) => textInputFilter(filteringModel, 'methods', 'e.g. Bad PID, ...'),
4444
classes: 'f6',
4545
},
4646

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@
1111
* or submit itself to any jurisdiction.
1212
*/
1313

14-
import { textFilter } from '../../../components/Filters/common/filters/textFilter.js';
1514
import { absoluteFrontLink } from '../../../components/common/navigation/absoluteFrontLink.js';
1615
import { frontLink } from '../../../components/common/navigation/frontLink.js';
1716
import { externalLinks } from '../../../components/common/navigation/externalLinks.js';
1817
import { formatItemsCount } from '../../../utilities/formatting/formatItemsCount.js';
1918
import { formatSizeInBytes } from '../../../utilities/formatting/formatSizeInBytes.js';
2019
import { badge } from '../../../components/common/badge.js';
20+
import { textInputFilter } from '../../../components/Filters/common/filters/textInputFilter.js';
2121

2222
/**
2323
* List of active columns for a generic simulation passes table
@@ -31,10 +31,7 @@ export const simulationPassesActiveColumns = {
3131
name: 'Name',
3232
visible: true,
3333
sortable: true,
34-
filter: ({ filteringModel }) => textFilter(
35-
filteringModel.get('names'),
36-
{ class: 'w-75 mt1', placeholder: 'e.g. LHC23k5, ...' },
37-
),
34+
filter: ({ filteringModel }) => textInputFilter(filteringModel, 'names', 'e.g. LHC23k5, ...'),
3835
classes: 'w-10 f6',
3936
},
4037

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

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@
1414
import { h } from '/js/src/index.js';
1515
import { formatDistinctLhcBeamEnergies } from '../format/formatDistinctLhcBeamEnergies.js';
1616
import { formatLhcPeriodYear } from '../format/formatYear.js';
17-
import { textFilter } from '../../../components/Filters/common/filters/textFilter.js';
1817
import { frontLink } from '../../../components/common/navigation/frontLink.js';
1918
import { badge } from '../../../components/common/badge.js';
19+
import { textInputFilter } from '../../../components/Filters/common/filters/textInputFilter.js';
2020

2121
/**
2222
* List of active columns for a generic periods table
@@ -30,10 +30,7 @@ export const lhcPeriodsActiveColumns = {
3030
name: 'Name',
3131
visible: true,
3232
sortable: true,
33-
filter: ({ filteringModel }) => textFilter(
34-
filteringModel.get('names'),
35-
{ class: 'w-75 mt1', placeholder: 'e.g. LHC22a, lhc23b, ...' },
36-
),
33+
filter: ({ filteringModel }) => textInputFilter(filteringModel, 'names', 'e.g. LHC22a, lhc23b, ...'),
3734
classes: 'w-15',
3835
},
3936

@@ -92,10 +89,7 @@ export const lhcPeriodsActiveColumns = {
9289
visible: true,
9390
sortable: true,
9491
format: (_, lhcPeriod) => formatLhcPeriodYear(lhcPeriod.name),
95-
filter: ({ filteringModel }) => textFilter(
96-
filteringModel.get('years'),
97-
{ class: 'w-75 mt1', placeholder: 'e.g. 2022, 2023, ...' },
98-
),
92+
filter: ({ filteringModel }) => textInputFilter(filteringModel, 'years', 'e.g. 2022, 2023, ...'),
9993
classes: 'w-7',
10094
},
10195

@@ -104,10 +98,7 @@ export const lhcPeriodsActiveColumns = {
10498
visible: true,
10599
sortable: true,
106100
format: (pdpBeamTypes) => pdpBeamTypes.length > 0 ? pdpBeamTypes.join(',') : '-',
107-
filter: ({ filteringModel }) => textFilter(
108-
filteringModel.get('pdpBeamTypes'),
109-
{ class: 'w-75 mt1', placeholder: 'e.g. pp, PbPb' },
110-
),
101+
filter: ({ filteringModel }) => textInputFilter(filteringModel, 'pdpBeamTypes', 'e.g. pp, PbPb'),
111102
classes: 'w-7',
112103
},
113104

‎test/public/Filters/FilteringModel.test.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,9 +143,9 @@ module.exports = () => {
143143
await waitForTableTotalRowsCountToEqual(page, 3);
144144

145145
// Name
146-
await fillInput(page, '.name-filter input', 'LHC23f');
146+
await fillInput(page, '.names-textFilter', 'LHC23f', ['change']);
147147
await waitForTableTotalRowsCountToEqual(page, 1);
148-
await fillInput(page, '.name-filter input', 'bogus');
148+
await fillInput(page, '.names-textFilter', 'bogus', ['change']);
149149
await waitForTableTotalRowsCountToEqual(page, 0);
150150
await page.goBack();
151151
await waitForTableTotalRowsCountToEqual(page, 1);

‎test/public/Filters/filtersToUrl.test.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -256,9 +256,9 @@ module.exports = () => {
256256
it('should set filters from lhcPriodOverview to the URL', async () => {
257257
await goToPage(page, 'lhc-period-overview');
258258

259-
await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC22a');
260-
await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(2) input[type=text]', '2022');
261-
await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(3) input[type=text]', 'PbPb');
259+
await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC22a', ['change']);
260+
await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(2) input[type=text]', '2022', ['change']);
261+
await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(3) input[type=text]', 'PbPb', ['change']);
262262
const queryParameters = getQueryParameters(page);
263263
expect(queryParameters).to.deep.equal({
264264
"page": "lhc-period-overview",
@@ -271,8 +271,8 @@ module.exports = () => {
271271
it('should set filters from qcFlagTypesOverview to the URL', async () => {
272272
await goToPage(page, 'qc-flag-types-overview');
273273

274-
await fillInput(page, '.name-filter input[type=text]', 'bad');
275-
await fillInput(page, '.method-filter input[type=text]', 'bad');
274+
await fillInput(page, '.name-filter input[type=text]', 'bad', ['change']);
275+
await fillInput(page, '.method-filter input[type=text]', 'bad', ['change']);
276276
await pressElement(page, '#badFilterRadioBad', true);
277277

278278
const queryParameters = getQueryParameters(page);
@@ -343,7 +343,7 @@ module.exports = () => {
343343
it('should set filters from DataPassesPerLhcPeriodOverview to the URL', async () => {
344344
await goToPage(page, 'data-passes-per-lhc-period-overview', { queryParameters: { lhcPeriodId: 2 }});
345345

346-
await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC22b_apass1', ['input']);
346+
await fillInput(page, '.names-textFilter', 'LHC22b_apass1', ['change']);
347347
await pressElement(page, '#checkboxes-checkbox-test', true);
348348

349349

@@ -359,7 +359,7 @@ module.exports = () => {
359359
it('should set filters from DataPassesPerSimulationPassOverview to the URL', async () => {
360360
await goToPage(page, 'data-passes-per-simulation-pass-overview', { queryParameters: { simulationPassId: 1 }});
361361

362-
await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC22b_apass1', ['input']);
362+
await fillInput(page, '.names-textFilter', 'LHC22b_apass1', ['change']);
363363
await pressElement(page, '#checkboxes-checkbox-test', true);
364364

365365
const queryParameters = getQueryParameters(page);
@@ -374,7 +374,7 @@ module.exports = () => {
374374
it('should set filters from AnchoredSimulationPassesOverview to the URL', async () => {
375375
await goToPage(page, 'anchored-simulation-passes-overview', { queryParameters: { dataPassId: 1 }});
376376

377-
await fillInput(page, '.name-filter input', 'LHC23k6c', ['input']);
377+
await fillInput(page, '.names-textFilter', 'LHC23k6c', ['change']);
378378

379379
const queryParameters = getQueryParameters(page);
380380
expect(queryParameters).to.deep.equal({

‎test/public/dataPasses/overviewPerLhcPeriod.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ module.exports = () => {
164164

165165
it('should successfully apply data pass name filter', async () => {
166166
await pressElement(page, '#openFilterToggle');
167-
await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC22b_apass1');
167+
await fillInput(page, '.names-textFilter', 'LHC22b_apass1', ['change']);
168168

169169
await expectColumnValues(page, 'name', ['deleted\nLHC22b_apass1\nSkimmable']);
170170

‎test/public/dataPasses/overviewPerSimulationPass.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ module.exports = () => {
113113
it('should successfully apply data pass name filter', async () => {
114114
await pressElement(page, '#openFilterToggle');
115115

116-
await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC22b_apass1');
116+
await fillInput(page, '.names-textFilter', 'LHC22b_apass1', ['change']);
117117
await expectColumnValues(page, 'name', ['deleted\nLHC22b_apass1\nSkimmable']);
118118

119119
await pressElement(page, '#reset-filters', true);

0 commit comments

Comments
 (0)