From ba1202224446436a7a5393d7ee8188c36d1464c2 Mon Sep 17 00:00:00 2001
From: Nhan Huynh <nchuynh@mit.edu>
Date: Sun, 3 Dec 2023 19:05:51 -0500
Subject: [PATCH] Fixed bug with channel traces and window resize

---
 minerva_analysis/client/src/js/views/channelList.js | 13 ++++++-------
 .../client/src/js/views/csvGatingList.js            |  3 ++-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/minerva_analysis/client/src/js/views/channelList.js b/minerva_analysis/client/src/js/views/channelList.js
index ebe9f75d9..cf4c66b1f 100644
--- a/minerva_analysis/client/src/js/views/channelList.js
+++ b/minerva_analysis/client/src/js/views/channelList.js
@@ -18,6 +18,7 @@ class ChannelList {
         this.eventHandler = eventHandler;
         this.dataLayer = dataLayer;
         this.selections = [];
+        this.hasChannelGMM = {};
         this.ranges = {};
         this.sliders = new Map();
         this.image_channels = {};
@@ -25,7 +26,6 @@ class ChannelList {
         this.currentChannels = {};
         this.rangeConnector = {};
         this.colorConnector = {};
-        this.hasChannelGMM = [];
         this.channelIDs = {};
         this.createColorPicker();
         this.container = d3.select("#channel_list");
@@ -70,8 +70,6 @@ class ChannelList {
      * @param name - the channel to set and display as selected
      */
     selectChannel(name) {
-        this.getAndDrawChannelGMM(name)
-
         let fullName = this.dataLayer.getFullChannelName(name);
         let channelIdx = imageChannels[fullName];
         let channelID = this.channelIDs[name];
@@ -692,10 +690,11 @@ class ChannelList {
  * on window resize we re-initialize (this should be better handled with an update pattern)
  */
 window.addEventListener("resize", function () {
-  const { channelList } = __minervaAnalysis;
+    const { channelList } = __minervaAnalysis;
     if (typeof channelList != "undefined" && channelList) {
-      channelList.sliders.forEach((slider, name) => {
-            d3.select('div#channel-slider_' + name).select('svg').remove();
+        channelList.sliders.forEach((slider, name) => {
+            let channelID = channelList.channelIDs[name]
+            d3.select('div#channel-slider_' + channelID).select('svg').remove();
             const channelListEl = document.getElementById("channel_list");
             if (channelListEl) {
                 const swidth = channelListEl.getBoundingClientRect().width;
@@ -704,7 +703,7 @@ window.addEventListener("resize", function () {
                     channelList.drawChannelGMM(name);
                 }
             }
-        });
+      });
     }
 });
 
diff --git a/minerva_analysis/client/src/js/views/csvGatingList.js b/minerva_analysis/client/src/js/views/csvGatingList.js
index 934b76c82..c3d3b211b 100644
--- a/minerva_analysis/client/src/js/views/csvGatingList.js
+++ b/minerva_analysis/client/src/js/views/csvGatingList.js
@@ -857,7 +857,8 @@ window.addEventListener("resize", () => {
     const { csv_gatingList } = __minervaAnalysis;
     if (typeof csv_gatingList != "undefined" && csv_gatingList) {
         csv_gatingList.sliders.forEach((slider, name) => {
-            d3.select('div#csv_gating-slider_' + name).select('svg').remove();
+            let gatingID = csv_gatingList.gatingIDs[name]
+            d3.select('div#csv_gating-slider_' + gatingID).select('svg').remove();
             let fullName = csv_gatingList.dataLayer.getFullChannelName(name);
             let sliderRange = [csv_gatingList.databaseDescription[fullName].min, csv_gatingList.databaseDescription[fullName].max];
             const gatingListEl = document.getElementById("csv_gating_list");