[O2B-1291] Freeze Run Number column (#1932)

* a

* add CSS

* abstraction

* change alpha

Author: xsalonx

lib/public/app.css

@@ -158,7 +158,8 @@ html, body {
 
 .table-hover tbody tr:hover {
     color: #212529;
-    background-color: rgba(0, 0, 0, 0.075);
+    --hover-background: rgb(235, 235, 235);
+    background-color: var(--hover-background);
 }
 
 th.text-center, td.text-center {
@@ -169,6 +170,43 @@ th.text-center, td.text-center {
     max-height: 3rem;
 }
 
+
+/* sticky first column when horizontal scrolling */
+.freeze-first-column th:first-child {
+    background: var(--color-gray-light); 
+    position: sticky;
+    left: 0;
+    z-index: 2;
+}
+
+.freeze-first-column td:first-child {
+    background: inherit;
+    position: sticky;
+    left: 0;
+    z-index: 2; 
+}
+
+.freeze-first-column td:first-child::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 1px;
+    height: 100%;
+    background-color: var(--color-gray-light);
+}
+
+.freeze-first-column th:first-child::after  {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 1px;
+    height: 100%;
+    background-color: var(--color-gray);
+}
+
+
 /* alerts */
 
 .alert {

lib/public/components/common/table/table.js

@@ -126,7 +126,7 @@ export const table = (
     }
 
     // Extract the profile of the table
-    const { profile: currentProfile = profiles.none, horizontalScrollEnabled = false } = tableConfiguration || {};
+    const { profile: currentProfile = profiles.none, horizontalScrollEnabled = false, freezeFirstColumn = false } = tableConfiguration || {};
     const { idKey, displayedColumns } = parseColumnsConfiguration(columns, currentProfile);
 
     let remoteData;
@@ -139,7 +139,7 @@ export const table = (
     }
 
     return h(`${horizontalScrollEnabled ? '.scroll-auto.shadow-level1' : ''}`, h(
-        'table.table.table-hover.shadow-level1.no-z-index',
+        `table.table.table-hover.shadow-level1.no-z-index${freezeFirstColumn ? '.freeze-first-column' : ''}`,
         {
             style: `table-layout: ${horizontalScrollEnabled ? 'auto' : 'fixed'}`,
         },

lib/public/models/OverviewModel.js

@@ -64,6 +64,7 @@ export class OverviewPageModel extends Observable {
          */
         this._displayOptions = new ObservableData({
             horizontalScrollEnabled: false,
+            freezeFirstColumn: false,
         });
     }
 

lib/public/views/Runs/Overview/FixedPdpBeamTypeRunsOverviewModel.js

@@ -11,15 +11,15 @@
  * or submit itself to any jurisdiction.
  */
 
-import { RunsOverviewModel } from './RunsOverviewModel.js';
+import { RunsWithQcModel } from './RunsWithQcModel.js';
 
 /**
  * FixedPdpBeamTypeRunsOverviewModel
  *
  * Runs overview model which stores information about pdp_beam_type,
  * which is supposed to be the same for all runs stored in this model
  */
-export class FixedPdpBeamTypeRunsOverviewModel extends RunsOverviewModel {
+export class FixedPdpBeamTypeRunsOverviewModel extends RunsWithQcModel {
     /**
      * Constructor
      * @param {Model} model global model

lib/public/views/Runs/Overview/RunsWithQcModel.js

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE O2. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ * 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 { RunsOverviewModel } from './RunsOverviewModel.js';
+
+/**
+ * RunsWithQcModel
+ *
+ * Runs overview model which stores common information for all RCT runs overviews pages
+ */
+export class RunsWithQcModel extends RunsOverviewModel {
+    /**
+     * Constructor
+     * @param {Model} model global model
+     */
+    constructor(model) {
+        super(model);
+
+        this.patchDisplayOptions({ horizontalScrollEnabled: true, freezeFirstColumn: true });
+    }
+}

lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewModel.js

@@ -65,8 +65,6 @@ export class RunsPerDataPassOverviewModel extends FixedPdpBeamTypeRunsOverviewMo
 
         this._discardAllQcFlagsActionState$ = new ObservableData(RemoteData.notAsked());
         this._discardAllQcFlagsActionState$.bubbleTo(this);
-
-        this.patchDisplayOptions({ horizontalScrollEnabled: true });
     }
 
     /**

lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewModel.js

@@ -13,7 +13,7 @@
 import { buildUrl, RemoteData } from '/js/src/index.js';
 import { TabbedPanelModel } from '../../../components/TabbedPanel/TabbedPanelModel.js';
 import { detectorsProvider } from '../../../services/detectors/detectorsProvider.js';
-import { RunsOverviewModel } from '../Overview/RunsOverviewModel.js';
+import { RunsWithQcModel } from '../Overview/RunsWithQcModel.js';
 import { jsonFetch } from '../../../utilities/fetch/jsonFetch.js';
 
 export const RUNS_PER_LHC_PERIOD_PANELS_KEYS = {
@@ -24,7 +24,7 @@ export const RUNS_PER_LHC_PERIOD_PANELS_KEYS = {
 /**
  * Runs Per LHC Period overview model
  */
-export class RunsPerLhcPeriodOverviewModel extends RunsOverviewModel {
+export class RunsPerLhcPeriodOverviewModel extends RunsWithQcModel {
     /**
      * Constructor
      *
@@ -35,8 +35,6 @@ export class RunsPerLhcPeriodOverviewModel extends RunsOverviewModel {
         this._detectors$ = detectorsProvider.physical$;
         this._detectors$.bubbleTo(this);
 
-        this.patchDisplayOptions({ horizontalScrollEnabled: true });
-
         this._tabbedPanelModel = new RunsPerLhcPeriodTabbedPanelModel();
         this._tabbedPanelModel.bubbleTo(this);
     }

lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewModel.js

@@ -11,7 +11,7 @@
  * or submit itself to any jurisdiction.
  */
 import { buildUrl, RemoteData } from '/js/src/index.js';
-import { RunsOverviewModel } from '../Overview/RunsOverviewModel.js';
+import { RunsWithQcModel } from '../Overview/RunsWithQcModel.js';
 import { ObservableData } from '../../../utilities/ObservableData.js';
 import { getRemoteData } from '../../../utilities/fetch/getRemoteData.js';
 import { detectorsProvider } from '../../../services/detectors/detectorsProvider.js';
@@ -20,7 +20,7 @@ import { RunDetectorsSelectionModel } from '../RunDetectorsSelectionModel.js';
 /**
  * Runs Per Simulation Pass overview model
  */
-export class RunsPerSimulationPassOverviewModel extends RunsOverviewModel {
+export class RunsPerSimulationPassOverviewModel extends RunsWithQcModel {
     /**
      * Constructor
      * @param {Model} model global model
@@ -36,8 +36,6 @@ export class RunsPerSimulationPassOverviewModel extends RunsOverviewModel {
 
         this._runDetectorsSelectionModel = new RunDetectorsSelectionModel();
         this._runDetectorsSelectionModel.bubbleTo(this);
-
-        this.patchDisplayOptions({ horizontalScrollEnabled: true });
     }
 
     /**