From 0070fd8684253bebcc5e8157198ec6bbd7578ea3 Mon Sep 17 00:00:00 2001
From: Adam Novak <anovak@soe.ucsc.edu>
Date: Tue, 7 May 2024 10:59:57 -0400
Subject: [PATCH] Fix visibility toggle for paths

---
 src/util/tubemap.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/util/tubemap.js b/src/util/tubemap.js
index 87befc88..92e8bbec 100644
--- 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")