Cleanup 🧹

app/public/components/about/about.js

@@ -17,10 +17,10 @@ import { h } from '/js/src/index.js';
 export default function about() {
     const title = h('h3.text-primary', 'About');
 
-    return h('.p-1em', [
-        h('.flex.p-bottom-1em.justify-center.items-center',
+    return h('.p-1rem', [
+        h('.flex.p-bottom-1rem.justify-center.items-center',
             h('.settings-40-primary'),
-            h('.p-left-1em',
+            h('.p-left-1rem',
                 title)),
 
         h('.flex-wrap.justify-between.items-center',

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/components/detectors/detectorIcon.js

@@ -30,7 +30,7 @@ export default function detectorIcon(navigation, item, index, detectorName, time
                     document.getElementById(runBasedQcModalId).style.display = 'none';
                 }, item, index, detectorName, runDetectorId, timeBased)))
             : '',
-        h('button.btn.no-border-bottom.pointer.run-quality.good', {
+        h('button.btn.pointer.run-quality.good', {
             id: runDetectorId,
             onclick: () => {
                 if (qualityChangePossible) {

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/custom.less

@@ -19,10 +19,6 @@
     align-items: center;
 }
 
-.no-border-bottom {
-    border-bottom: 0px !important;
-}
-
 .no-text-decoration {
     text-decoration: none !important;
 }
@@ -48,8 +44,20 @@
     visibility: hidden !important;
 }
 
-.clear-both {
-    clear: both !important;
+.transparent {
+    background-color: transparent !important;
+    color: inherit;
+    border: none !important;
+}
+
+.scale-2-5 {
+    scale: 1.875;
+}
+
+/* Display */
+
+.flex {
+    display: flex !important;
 }
 
 .transparent {
@@ -82,20 +90,20 @@
 
 /* Paddings */
 
-.p-1em {
-    padding: 1em !important;
+.p-1rem {
+    padding: 1rem !important;
 }
 
-.p-left-1em {
-    padding-left: 1em !important;
+.p-left-1rem {
+    padding-left: 1rem !important;
 }
 
 .p-right-15 {
     padding-right: 15px !important;
 }
 
-.p-bottom-1em {
-    padding-bottom: 1em !important;
+.p-bottom-1rem {
+    padding-bottom: 1rem !important;
 }
 
 .p-bottom-0 {

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('.p-1rem', [
             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/flags/overview/flagsTable.js

@@ -28,13 +28,12 @@ export default function flagsTable(model, flagsData) {
                 h('table', {
                     id: 'flags-data-table',
                     className: 'flags-table',
-                }, [
-                    flagsTableHeader(model),
+                },
+                flagsTableHeader(model),
 
-                    h('tbody', { id: 'table-body-flagsData' },
-                        flagsData.map((item) => flagsTableRow(
-                            PN.flags, item, cellsSpecials,
-                        ))),
-                ])))
+                h('tbody', { id: 'table-body-flagsData' },
+                    flagsData.map((item) => flagsTableRow(
+                        PN.flags, item, cellsSpecials,
+                    ))))))
         : '';
 }