make selected cell in grid legend more distinct

Fixes #833

Author: starpit

app/plugins/modules/activation-visualizations/lib/legend.js

@@ -170,7 +170,7 @@ exports.drawLegend = (viewName, rightHeader, {statData, errorRate, nFailures}, g
     entry('these cells represent activation failures',
         nFailures,
         true, -1, // true means render as failure
-          { zoom: -1, labelAsTooltip: true, useThisLabelInstead: 'fail', balloonPos: 'left', balloonLength: 'medium',
+          { zoom: -1, useThisLabelInstead: 'fail', balloonPos: 'left', balloonLength: 'medium',
             //onclick: drilldownWith(viewName, () => repl.pexec(`grid ${optionsToString(options)} --failure`))
             onclick: toggleFilter(-1)
           })

app/plugins/modules/activation-visualizations/web/css/table.css

@@ -343,14 +343,24 @@
     height: 0;
     border: none;*/
 }
+.activation-viz-plugin.grid-header-key .cell-container.has-latency-filter[color-by="duration"][data-latency-filter="-1"] .grid-cell-occupied.latency--1,
+.activation-viz-plugin.grid-header-key .cell-container.has-latency-filter[color-by="duration"][data-latency-filter="0"] .grid-cell-occupied.latency-0,
+.activation-viz-plugin.grid-header-key .cell-container.has-latency-filter[color-by="duration"][data-latency-filter="1"] .grid-cell-occupied.latency-1,
+.activation-viz-plugin.grid-header-key .cell-container.has-latency-filter[color-by="duration"][data-latency-filter="2"] .grid-cell-occupied.latency-2,
+.activation-viz-plugin.grid-header-key .cell-container.has-latency-filter[color-by="duration"][data-latency-filter="3"] .grid-cell-occupied.latency-3,
+.activation-viz-plugin.grid-header-key .cell-container.has-latency-filter[color-by="duration"][data-latency-filter="4"] .grid-cell-occupied.latency-4,
+.activation-viz-plugin.grid-header-key .cell-container.has-latency-filter[color-by="duration"][data-latency-filter="5"] .grid-cell-occupied.latency-5 {
+    filter: saturate(2.25) brightness(1.25) !important;
+}
+
 .activation-viz-plugin.grid-header-key .cell-container.has-latency-filter[color-by="duration"]:not([data-latency-filter="-1"]) .grid-cell-occupied.latency--1,
 .activation-viz-plugin.grid-header-key .cell-container.has-latency-filter[color-by="duration"]:not([data-latency-filter="0"]) .grid-cell-occupied.latency-0,
 .activation-viz-plugin.grid-header-key .cell-container.has-latency-filter[color-by="duration"]:not([data-latency-filter="1"]) .grid-cell-occupied.latency-1,
 .activation-viz-plugin.grid-header-key .cell-container.has-latency-filter[color-by="duration"]:not([data-latency-filter="2"]) .grid-cell-occupied.latency-2,
 .activation-viz-plugin.grid-header-key .cell-container.has-latency-filter[color-by="duration"]:not([data-latency-filter="3"]) .grid-cell-occupied.latency-3,
 .activation-viz-plugin.grid-header-key .cell-container.has-latency-filter[color-by="duration"]:not([data-latency-filter="4"]) .grid-cell-occupied.latency-4,
 .activation-viz-plugin.grid-header-key .cell-container.has-latency-filter[color-by="duration"]:not([data-latency-filter="5"]) .grid-cell-occupied.latency-5 {
-    filter: grayscale(0.6) opacity(0.6);
+    filter: grayscale(0.6) opacity(0.3);
 }
 
 /* grid cell colors */