Fixing issue with timeseries selected waveforms occluding unselected …

…waveforms. Closes #1132

package.json

@@ -46,6 +46,7 @@
     "layout-jquery3": "1.8.5",
     "lodash": "4.17.21",
     "papaparse": "^5",
+    "parse-css-color": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
     "react-redux": "^8",

web-server/plugins/slycat-timeseries-model/js/timeseries-waveformplot.js

@@ -4,6 +4,7 @@
 // HTML5 DOM waveform visualization, for use with the timeseries model.
 
 import d3 from "d3";
+import parseCSSColor from "parse-css-color";
 import knob from "jquery-knob";
 import slycat_color_maps from "js/slycat-color-maps";
 
@@ -299,12 +300,13 @@ $.widget("timeseries.waveformplot", {
     this.canvas_picker.width = this.diagram_width;
     this.canvas_picker.height = this.diagram_height;
 
-    var fillStyle = slycat_color_maps.get_background(self.options.get_state().controls.colormap);
-    var opacity = slycat_color_maps.get_opacity(self.options.get_state().controls.colormap);
-    this.canvas_hover_ctx.fillStyle =
-      "rgba(" + fillStyle.r + ", " + fillStyle.g + ", " + fillStyle.b + ", " + opacity + ")";
-    this.canvas_selection_ctx.fillStyle =
-      "rgba(" + fillStyle.r + ", " + fillStyle.g + ", " + fillStyle.b + ", " + opacity + ")";
+    const [r, g, b] = parseCSSColor(
+      slycat_color_maps.get_background(self.options.get_state().controls.colormap)
+    ).values;
+    const opacity = slycat_color_maps.get_opacity(self.options.get_state().controls.colormap);
+    const rgba = `rgba(${r}, ${g}, ${b}, ${opacity})`;
+    this.canvas_hover_ctx.fillStyle = rgba;
+    this.canvas_selection_ctx.fillStyle = rgba;
 
     var waveform_subset = [];
     if (visible !== undefined) {
@@ -426,7 +428,6 @@ $.widget("timeseries.waveformplot", {
   /* Hover effect for waveforms */
   _hover: function (waveforms) {
     var self = this;
-    var fillStyle;
 
     // Only hover a waveform if it's part of the current selection
     var selection = self.options.selection;

web-server/plugins/slycat-timeseries-model/js/timeseries.js

@@ -492,7 +492,7 @@ export default function initialize_timeseries_model(
           .toString(),
       });
       $("#waveform-viewer rect.selectionMask").css({
-        fill: slycat_color_maps.get_background(get_state().controls.colormap).toString(),
+        "fill": slycat_color_maps.get_background(get_state().controls.colormap),
         "fill-opacity": slycat_color_maps.get_opacity(get_state().controls.colormap),
       });
 
@@ -706,7 +706,7 @@ export default function initialize_timeseries_model(
         .toString(),
     });
     $("#waveform-viewer rect.selectionMask").css({
-      fill: slycat_color_maps.get_background(get_state().controls.colormap).toString(),
+      "fill": slycat_color_maps.get_background(get_state().controls.colormap),
       "fill-opacity": slycat_color_maps.get_opacity(get_state().controls.colormap),
     });
 

web-server/plugins/slycat-video-swarm/js/vs-ui.js

@@ -294,7 +294,7 @@ function model_loaded() {
           .toString(),
       });
       $("#waveform-viewer rect.selectionMask").css({
-        fill: $("#color-switcher").colorswitcher("get_background", colormap).toString(),
+        "fill": $("#color-switcher").colorswitcher("get_background", colormap).toString(),
         "fill-opacity": $("#color-switcher").colorswitcher("get_opacity", colormap),
       });
       $("#mp-movies").css({
@@ -754,7 +754,7 @@ function update_waveform_color() {
     "background-color": $("#color-switcher").colorswitcher("get_background", undefined).toString(),
   });
   $("#waveform-viewer rect.selectionMask").css({
-    fill: $("#color-switcher").colorswitcher("get_background", undefined).toString(),
+    "fill": $("#color-switcher").colorswitcher("get_background", undefined).toString(),
     "fill-opacity": $("#color-switcher").colorswitcher("get_opacity", undefined),
   });