Prettify detector columns and icons (#79)

* Add center_of_mass_energy filtering type

* Style the center of mass energy column

* Style detector fields

* Prettify detector icons

* Apply the eslint formatting convention

* Cleanup 🧹

* Pointer when hovering the Quality Control

Author: Ehevi

app/config/public.js

@@ -31,6 +31,7 @@ const runsViewsFilteringTypes = {
     fill_number: fromToType,
     run_type: matchExcludeType,
     mu: matchExcludeType,
+    center_of_mass_energy: fromToType,
 };
 
 const dataPassesViews = {

app/public/components/userView/data/table/header.js

@@ -22,7 +22,7 @@ export default function tableHeader(visibleFields, data, model) {
 }
 
 const columnsHeadersArray = (visibleFields, data, model) =>
-    visibleFields.map((f) => h(`th.${model.getCurrentDataPointer().page}-${f.name}-header`, {
+    visibleFields.map((f) => h(`th.${model.getCurrentDataPointer().page}-${f.name.includes('detector') ? 'detector' : f.name}-header`, {
         scope: 'col',
     }, h('.relative', [
         headerSpecPresent(model, f) !== nonDisplayable ? [

app/public/components/userView/data/table/row.js

@@ -17,18 +17,21 @@ import { reduceSerialIf } from '../../../../utils/utils.js';
 
 // eslint-disable-next-line no-unused-vars
 const detectorIcon = (model, item, n) =>
-    h('.tooltip',
+    h('.tooltip.noBorderBottom.pointer',
         h('svg', { width: '50px', height: '50px' },
             h('circle',
                 {
                     cx: '50%',
                     cy: '50%',
                     r: '15px',
-                    stroke: 'black',
-                    'stroke-width': '3',
-                    fill: 'green',
+
+                    /*
+                     *Stroke: '#F7B538', strokes for the limited acceptance flags only
+                     *'stroke-width': '3',
+                     */
+                    fill: '#8CB369',
                 })),
-        h('span.tooltiptext', `run_det_id: ${item[n]}`));
+        h('span.detector-tooltip-field', `run_det_id: ${item[n]}`));
 
 export default function row(
     model, visibleFields, data, item, cellsSpecials,
@@ -39,7 +42,7 @@ export default function row(
     );
 
     const dataCells = visibleFields.map((field) =>
-        h(`td.${model.getCurrentDataPointer().page}-${field.name}-cell`,
+        h(`td.${model.getCurrentDataPointer().page}-${field.name.includes('detector') ? 'detector' : field.name}-cell`,
             item[field.name]
                 ? cellsSpecials[field.name]
                     ? cellsSpecials[field.name](model, item)

app/public/styles/custom.css

@@ -48,48 +48,6 @@
     background-color: var(--active-color) !important;
 }
 
-.tooltip:hover .tooltiptext {
-    right: 5% !important;
-    bottom: -50% !important;
-}
-
-.tooltip .tooltiptext2 {
-    visibility: hidden;
-    right: auto;
-}
-
-.tooltip:hover .tooltiptext2 {
-    visibility: visible;
-    right: auto;
-}
-
-.tooltip .tooltiptext2 {
-    visibility: hidden;
-    right: auto;
-}
-
-.tooltip:hover .tooltiptext2 {
-    visibility: visible;
-    right: auto;
-}
-
-.my-tooltip:hover .tooltiptext {
-    visibility: visible;
-}
-
-.my-tooltip .tooltiptext {
-    visibility: hidden;
-    width: 118px;
-    background-color: #555;
-    color: #fff;
-    text-align: center;
-    padding: 3px;
-    border-radius: 6px;
-    position: absolute;
-    z-index: 1 !important;
-    bottom: -100%;
-}
-
 .vertical-center {
     margin: 0;
     position: absolute;

app/public/styles/custom/tables/runs.css

@@ -60,9 +60,9 @@
     text-align: right;
 }
 
-/* Energy per beam */
-.runs-table .runsPerPeriod-energy_per_beam-cell, .runs-table .runsPerPeriod-energy_per_beam-header,
-.runs-table .runsPerDataPass-energy_per_beam-cell, .runs-table .runsPerDataPass-energy_per_beam-header {
+/* Center of mass energy */
+.runs-table .runsPerPeriod-center_of_mass_energy-cell, .runs-table .runsPerPeriod-center_of_mass_energy-header,
+.runs-table .runsPerDataPass-center_of_mass_energy-cell, .runs-table .runsPerDataPass-center_of_mass_energy-header {
     min-width: 100px;
     text-align: right;
 }
@@ -88,11 +88,13 @@
     text-align: right;
 }
 
-/* Tof detector
-.runsPerPeriod-tof_detector-header {
-    min-width: 100px;
+/* Detectors */
+.runs-table .runsPerPeriod-detector-header, .runs-table .runsPerPeriod-detector-cell,
+.runs-table .runsPerDataPass-detector-header, .runs-table .runsPerDataPass-detector-cell {
+    min-width: 50px;
+    text-align: center;
+    border: none !important;
 }
-*/
 
 .runs-table td:last-child, .runs-table th:last-child {
     padding-right: 2em;

app/public/styles/custom/tooltip.css

@@ -17,6 +17,11 @@
 	--y: 0.5;
 }
 
+.tooltip:hover .tooltiptext {
+    right: 5% !important;
+    bottom: -10% !important;
+}
+
 .my-tooltip-bg .tooltiptext2 {
     visibility: hidden;
 }
@@ -31,6 +36,22 @@
     flex-direction: column;
     align-items: center;
 }
+/* Detector tooltip field */
+.tooltip .detector-tooltip-field {
+    visibility: hidden;
+    padding: 3px;
+    border-radius: 6px;
+    position: absolute;
+    z-index: 1;
+}
+.tooltip:hover .detector-tooltip-field {
+    visibility: visible;
+    background-color: white !important;
+    width: 100px;
+    top: 100%;
+    left: -50%;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
 
 .tracker {
     position: absolute;