[ORCT-46] Multiselect improvement

app/public/components/buttons/dataActionButtons.js

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { h, iconDataTransferDownload, iconReload } from '/js/src/index.js';
+import downloadCSV from '../../utils/csvExport.js';
+import copyLinkButton from './copyLinkButton.js';
+
+export const dataActions = {
+    hide: 'Hide',
+    reload: 'Reload',
+    downloadCSV: 'Download CSV',
+    copyLink: 'Copy link',
+    showFilteringPanel: 'Filter',
+};
+
+export default function dataActionButtons(model, applicableDataActions) {
+    return h('.btn-group',
+        applicableDataActions[dataActions.reload]
+            ? h('button.btn.btn-secondary.icon-only-button', {
+                onclick: () => {
+                    model.fetchedData.reqForData(true);
+                    model.notify();
+                },
+            }, iconReload())
+            : '',
+
+        applicableDataActions[dataActions.downloadCSV]
+            ? h('button.btn.btn-secondary.icon-only-button', {
+                onclick: () => {
+                    downloadCSV(model);
+                },
+            }, iconDataTransferDownload())
+            : '',
+
+        applicableDataActions[dataActions.copyLink]
+            ? copyLinkButton(model.router.getUrl().toString())
+            : '',
+
+        applicableDataActions[dataActions.hide]
+            ? h('button.btn.icon-only-button', {
+                className: model.hideCurrentPageMarkedRows ? 'btn-primary' : 'btn-secondary',
+                onclick: () => model.changeMarkedRowsVisibility(),
+            }, model.hideCurrentPageMarkedRows ? h('.hide-20-off-white.abs-center') : h('.hide-20-primary.abs-center'))
+            : '',
+
+        applicableDataActions[dataActions.showFilteringPanel]
+            ? h('button.btn.icon-only-button', {
+                className: model.showFilteringPanel ? 'btn-primary' : 'btn-secondary',
+                onclick: () => model.changeSearchFieldsVisibility(),
+            }, model.showFilteringPanel ? h('.slider-20-off-white.abs-center') : h('.slider-20-primary.abs-center'))
+            : '');
+}

app/public/model/DataAccessModel.js

@@ -33,8 +33,9 @@ export default class DataAccessModel extends Observable {
         this.serviceUnavailable = new ServiceUnavailable(parent);
         this.fetchedData = new FetchedDataManager(this.router, this);
 
-        this.searchFieldsVisible = false;
+        this.showFilteringPanel = false;
         this.sortingRowVisible = false;
+        this.hideCurrentPageMarkedRows = false;
 
         this.loader = new Loader();
 
@@ -60,7 +61,7 @@ export default class DataAccessModel extends Observable {
     }
 
     changeSearchFieldsVisibility() {
-        this.searchFieldsVisible = !this.searchFieldsVisible;
+        this.showFilteringPanel = !this.showFilteringPanel;
         this.notify();
     }
 
@@ -69,6 +70,11 @@ export default class DataAccessModel extends Observable {
         this.notify();
     }
 
+    changeMarkedRowsVisibility() {
+        this.hideCurrentPageMarkedRows = !this.hideCurrentPageMarkedRows;
+        this.fetchedData.changeRecordsVisibility(this.getCurrentData());
+    }
+
     async logout() {
         const logoutEndpoint = '/api/logout/';
         const { result, status, ok } = this.loader.post(logoutEndpoint);

app/public/model/data/FetchedDataManager.js

@@ -30,6 +30,8 @@ export default class FetchedDataManager {
         this.router = router;
         this.loader = new Loader();
 
+        this.hideMarkedRecords = false;
+
         for (const n in pageNames) {
             if (Object.prototype.hasOwnProperty.call(pageNames, n)) {
                 this[n] = {};

app/public/styles/images/icons/index.less

@@ -156,6 +156,16 @@
     background-image: url('/styles/images/icons/20/primary/forward.svg');
 }
 
+.hide-20-off-white {
+    .icon-20;
+    background-image: url('/styles/images/icons/20/off-white/hide.svg');
+}
+
+.hide-20-primary {
+    .icon-20;
+    background-image: url('/styles/images/icons/20/primary/hide.svg');
+}
+
 .icon-placeholder-20-primary {
     .icon-20;
     background-image: url('/styles/images/icons/20/primary/icon-placeholder.svg');

app/public/views/flags/overview/flagsContent.js

@@ -12,15 +12,22 @@
  * or submit itself to any jurisdiction.
  */
 
-import { h, iconDataTransferDownload, iconReload } from '/js/src/index.js';
+import { h } from '/js/src/index.js';
 import filter from '../../userView/data/table/filtering/filter.js';
-import downloadCSV from '../../../../utils/csvExport.js';
 import flagsVisualization from '../../../components/flags/flagsVisualization.js';
 import flagsTable from './flagsTable.js';
 import flagBreadCrumbs from '../../../../components/flags/flagBreadcrumbs.js';
 import { noRunNumbers } from '../../../../utils/defaults.js';
 import noSubPageSelected from '../../userView/data/table/noSubPageSelected.js';
-import copyLinkButton from '../../../components/buttons/copyLinkButton.js';
+import dataActionButtons, { dataActions } from '../../../components/buttons/dataActionButtons.js';
+
+const applicableDataActions = {
+    [dataActions.hide]: false,
+    [dataActions.reload]: true,
+    [dataActions.downloadCSV]: true,
+    [dataActions.copyLink]: true,
+    [dataActions.showFilteringPanel]: false,
+};
 
 export default function flagsContent(model, runs, detectors, flags) {
     const urlParams = model.router.getUrl().searchParams;
@@ -33,35 +40,14 @@ export default function flagsContent(model, runs, detectors, flags) {
     const flagsData = flags.getFlags(runNumber, detectorName);
     const runData = runs.getRun(dataPassName, runNumber);
 
-    const functionalities = (model) => h('.btn-group',
-        h('button.btn.btn-secondary.icon-only-button', {
-            onclick: () => {
-                model.fetchedData.reqForData(true);
-                model.notify();
-            },
-        }, iconReload()),
-
-        h('button.btn.btn-secondary.icon-only-button', {
-            onclick: () => {
-                downloadCSV(model);
-            },
-        }, iconDataTransferDownload()),
-
-        copyLinkButton(model.router.getUrl().toString()),
-
-        h('button.btn.icon-only-button', {
-            className: model.searchFieldsVisible ? 'btn-primary' : 'btn-secondary',
-            onclick: () => model.changeSearchFieldsVisibility(),
-        }, model.searchFieldsVisible ? h('.slider-20-off-white.abs-center') : h('.slider-20-primary.abs-center')));
-
     return runNumber > noRunNumbers && runData
         ? h('.p-1em', [
             h('.flex-wrap.justify-between.items-center',
                 h('.flex-wrap.justify-between.items-center',
                     flagBreadCrumbs(model, dataPassName, runNumber, detectorName)),
 
-                functionalities(model)),
-            model.searchFieldsVisible ? filter(model) : '',
+                dataActionButtons(model, applicableDataActions)),
+            model.showFilteringPanel ? filter(model) : '',
 
             flagsVisualization(runData, flagsData),
             flagsTable(model, flagsData),

app/public/views/runs/runsPerDataPass/overview/content.js

@@ -12,6 +12,7 @@
  * or submit itself to any jurisdiction.
  */
 
+import { h } from '/js/src/index.js';
 import indexChip from '../../../../components/chips/indexChip.js';
 import pager from '../../../../components/table/pager.js';
 import { defaultIndexString } from '../../../../utils/defaults.js';
@@ -20,18 +21,25 @@ import pagesCellsSpecials from '../../../userView/data/pagesCellsSpecials.js';
 import title from '../../../../components/table/title.js';
 import header from '../table/header.js';
 import row from '../table/row.js';
-import { h, iconDataTransferDownload, iconReload } from '/js/src/index.js';
 
-import { RCT } from '../../../../config.js';
-import downloadCSV from '../../../../utils/csvExport.js';
 import filter from '../../../userView/data/table/filtering/filter.js';
 import activeFilters from '../../../userView/data/table/filtering/activeFilters.js';
 import sortingRow from '../../../userView/data/table/sortingRow.js';
 import { noMatchingData, noDataFound } from '../../../../components/messagePanel/messages.js';
 import noSubPageSelected from '../../../userView/data/table/noSubPageSelected.js';
-import copyLinkButton from '../../../../components/buttons/copyLinkButton.js';
+import dataActionButtons, { dataActions } from '../../../../components/buttons/dataActionButtons.js';
+import { RCT } from '../../../../config.js';
+
 const { pageNames } = RCT;
 
+const applicableDataActions = {
+    [dataActions.hide]: true,
+    [dataActions.reload]: true,
+    [dataActions.downloadCSV]: true,
+    [dataActions.copyLink]: true,
+    [dataActions.showFilteringPanel]: true,
+};
+
 export default function content(model, runs, detectors) {
     const dataPointer = model.getCurrentDataPointer();
     const data = model.fetchedData[dataPointer.page][dataPointer.index].payload;
@@ -47,27 +55,6 @@ export default function content(model, runs, detectors) {
     const { fields } = data;
     const visibleFields = fields.filter((f) => f.marked);
 
-    const functionalities = (model) => h('.btn-group',
-        h('button.btn.btn-secondary.icon-only-button', {
-            onclick: () => {
-                model.fetchedData.reqForData(true);
-                model.notify();
-            },
-        }, iconReload()),
-
-        h('button.btn.btn-secondary.icon-only-button', {
-            onclick: () => {
-                downloadCSV(model);
-            },
-        }, iconDataTransferDownload()),
-
-        copyLinkButton(model.router.getUrl().toString()),
-
-        h('button.btn.icon-only-button', {
-            className: model.searchFieldsVisible ? 'btn-primary' : 'btn-secondary',
-            onclick: () => model.changeSearchFieldsVisibility(),
-        }, model.searchFieldsVisible ? h('.slider-20-off-white.abs-center') : h('.slider-20-primary.abs-center')));
-
     return dataPointer.index === defaultIndexString
         ? noSubPageSelected(model)
         : h('.p-1em', [
@@ -76,20 +63,17 @@ export default function content(model, runs, detectors) {
                     title(pageNames.runsPerDataPass),
                     chips),
 
-                functionalities(model)),
-            model.searchFieldsVisible ? filter(model) : '',
+                dataActionButtons(model, applicableDataActions)),
+            model.showFilteringPanel ? filter(model) : '',
             anyFiltersActive(url) ? activeFilters(model, url) : '',
 
             data.rows?.length > 0
                 ? visibleFields.length > 0
                     ? h('.p-top-05em',
                         h('.x-scrollable-table.border-sh',
                             pager(model, data, false),
-                            h('table', {
+                            h('table.runs-table', {
                                 id: `data-table-${data.url}`,
-                                className: `${[pageNames.runsPerDataPass, pageNames.runsPerPeriod].includes(dataPointer.page)
-                                    ? 'runs-table'
-                                    : `${dataPointer.page}-table`}`,
                             }, [
                                 header(visibleFields, data, model),
                                 model.sortingRowVisible ? sortingRow(visibleFields, data, model) : '',