Fix visibility toggle for paths

vgteam · May 7, 2024 · 0070fd8 · 0070fd8
1 parent e27bf8e
commit 0070fd8
Showing 1 changed file with 7 additions and 6 deletions.
diff --git a/src/util/tubemap.js b/src/util/tubemap.js
@@ -318,7 +318,7 @@ export function changeAllTracksVisibility(value) {
   let i = 0;
   while (i < inputTracks.length) {
     inputTracks[i].hidden = !value;
-    var checkbox = document.getElementById(`showTrack${i}`);
+    var checkbox = document.getElementById(`showTrack${inputTracks[i].id}`);
     checkbox.checked = value;
     i += 1;
   }
@@ -4070,6 +4070,7 @@ function drawLegend() {
   content +=
     '<table class="table-sm table-condensed table-nonfluid"><thead><tr><th>Color</th><th>Trackname</th><th>Show Track</th></tr></thead>';
   const listeners = [];
+  // This is in terms of tracks, but when we change visibility we need to touch inputTracks, so we need to set up listeners by track ID.
   for (let i = 0; i < tracks.length; i += 1) {
     if (tracks[i].type === "haplo") {
       content += `<tr><td style="text-align:right"><div class="color-box" style="background-color: ${generateTrackColor(
@@ -4081,17 +4082,17 @@ function drawLegend() {
       } else {
         content += `<td>${tracks[i].id}</td>`;
       }
-      content += `<td><input type="checkbox" checked=true id="showTrack${i}"></td>`;
-      listeners.push(i);
+      content += `<td><input type="checkbox" checked=true id="showTrack${tracks[i].id}"></td>`;
+      listeners.push(tracks[i].id);
     }
   }
   content += "</table";
   // $('#legendDiv').html(content);
   document.getElementById("legendDiv").innerHTML = content;
-  listeners.forEach((i) => {
+  listeners.forEach((id) => {
     document
-      .getElementById(`showTrack${i}`)
-      .addEventListener("click", () => changeTrackVisibility(i), false);
+      .getElementById(`showTrack${id}`)
+      .addEventListener("click", () => changeTrackVisibility(id), false);
   });
   document
     .getElementById("selectall")