Remove unused code

Remove unused imports, variables, and functions.
`QuizManager.initialize` was a bit of a special case; it wasn't being
used, but it was a useful function. Its functionality was being
duplicated in `main.js`, but it seemed cleaner to have it handled by the
function. So I rewrote it so that the functionality was implemented only in
the function.

Author: leandrumartin

templates/js/annotationOverlay.js

@@ -1,5 +1,3 @@
-const PPT_EMU = { W: 9_144_000, H: 6_858_000 }; // PowerPoint slide size in EMUs
-
 function ensureStage(container) {
   let stage = container.querySelector(".annotation-stage");
   if (!stage) {
@@ -162,7 +160,4 @@ function attachAutoscale(container) {
   });
   ro.observe(container);
   stage.__resizeObs = ro;
-}
-
-// Optional global for non-module usage
-window.AnnotationOverlay = { clearAnnotations, drawAnnotations, loadAndDrawAnnotations };
+}

templates/js/api.js

@@ -22,20 +22,6 @@ export async function fetchCombinedData() {
     }
 }
 
-export async function fetchMockBoneData() {
-    try {
-        const response = await fetch(API_CONFIG.ENDPOINTS.MOCK_BONE_DATA);
-        if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        const data = await response.json();
-        return data;
-    } catch (error) {
-        console.error("Error fetching mock bone data:", error);
-        return null;
-    }
-}
-
 /**
  * Fetch full bone data (description + images) for a single bone from the backend API.
  * The backend pulls these files from the data GitHub branch.

templates/js/coloredRegionsOverlay.js

@@ -420,13 +420,6 @@ export async function displayColoredRegions(imageElement, boneId, imageIndex = 0
             console.warn(`[ColoredRegions] Invalid imageIndex ${imageIndex}, expected 0-${regionData.images.length - 1}`);
             return;
         }
-    } else if (regionData.colored_regions) {
-        console.log("[ColoredRegions] Using old single-image structure");
-        regionsToDisplay = regionData.colored_regions;
-        imageData = {
-            width: regionData.image_dimensions?.width,
-            height: regionData.image_dimensions?.height
-        };
     }
 
     if (!regionsToDisplay || regionsToDisplay.length === 0) {

templates/js/dropdowns.js

@@ -1,31 +1,16 @@
 import { loadDescription } from "./description.js";
-import { displayBoneImages, clearImages, showPlaceholder } from "./imageDisplay.js";
-import { loadAndDrawAnnotations, clearAnnotations } from "./annotationOverlay.js";
+import {displayBoneImages, showPlaceholder} from "./imageDisplay.js";
+import {clearAnnotations} from "./annotationOverlay.js";
 import {fetchBoneData} from "./api.js";
 
 document.addEventListener("DOMContentLoaded", () => {
   showPlaceholder();
 });
 
-let _boneById = {}; // filled in setupDropdownListeners
-
 function getImageStage() {
   return (document.getElementById("bone-image-container"));
 }
 
-// Function maybeLoadAnnotations: Logic removed. Annotation URL construction is now in the listeners.
-async function maybeLoadAnnotations(boneId) {
-  const stage = getImageStage();
-  if (!stage) return;
-
-  // remove any previous overlay
-  clearAnnotations(stage);
-  stage.classList.remove("with-annotations");
-  
-  // Note: The logic for loading the annotation file used to be here, but has been 
-  // refactored into the dropdown listeners (using the 'opts' object) to use the API endpoint.
-}
-
 // Backend API base (runs on 8000)
 const API_BASE = "http://127.0.0.1:8000";
 
@@ -82,8 +67,6 @@ export function setupDropdownListeners(combinedData) {
 
   if (!combinedData) return;
 
-  _boneById = Object.fromEntries((combinedData.bones || []).map(b => [b.id, b]));
-
 // Boneset change
 bonesetSelect.addEventListener("change", (e) => {
   const selectedBonesetId = e.target.value;

templates/js/imageDisplay.js

@@ -178,21 +178,6 @@ function displaySingleImage(image, container, options = {}) {
   }
 }
 
-/* Two images (with rotation template) */
-const TWO_IMAGE_ROTATION = {
-  left: { rot_deg: -16.999, flipH: false },
-  right: { rot_deg: 0, flipH: false },
-};
-
-function applyRotation(imgEl, { rot_deg = 0, flipH = false } = {}) {
-  const parts = [];
-  if (flipH) parts.push("scaleX(-1)");
-  if (rot_deg && Math.abs(rot_deg) > 0.001) parts.push(`rotate(${rot_deg}deg)`);
-  imgEl.style.transform = parts.join(" ") || "none";
-  imgEl.style.transformOrigin = "50% 50%";
-  imgEl.style.willChange = "transform";
-}
-
 function displayTwoImages(images, container, options = {}) {
   const captions = getCaptionsForBone(currentBoneId);
 

templates/js/main.js

@@ -1,6 +1,6 @@
 import { fetchCombinedData, fetchBoneData } from "./api.js";
 import { populateBonesetDropdown, setupDropdownListeners } from "./dropdowns.js";
-import { initializeSidebar } from "./sidebar.js";
+import {initializeSidebar} from "./sidebar.js";
 import { setupNavigation, setBoneAndSubbones, disableButtons } from "./navigation.js";
 import { loadDescription } from "./description.js";
 import { displayBoneData, clearViewer } from "./viewer.js";
@@ -24,15 +24,7 @@ document.addEventListener("DOMContentLoaded", async () => {
     setupDropdownListeners(combinedData);
 
     try {
-        quizManager.allBones = combinedData.bones || [];
-        quizManager.allSubbones = combinedData.subbones || [];
-        quizManager.createMasterQuestionPool();
-        if (quizManager.masterQuestionPool.length >= 4) {
-            quizManager.setupEventListeners();
-            console.log("Quiz system initialized successfully with", quizManager.masterQuestionPool.length, "items");
-        } else {
-            console.warn("Not enough items for quiz:", quizManager.masterQuestionPool.length);
-        }
+        await quizManager.initialize(combinedData);
     } catch (error) {
         console.error("Error initializing quiz:", error);
     }

templates/js/quiz.js

@@ -1,12 +1,11 @@
-import {fetchBoneData, fetchCombinedData} from "./api.js";
+import {fetchBoneData} from "./api.js";
 import {displayColoredRegions} from "./coloredRegionsOverlay.js";
 
 class QuizManager {
     constructor() {
         this.questions = [];
         this.currentQuestionIndex = 0;
         this.score = 0;
-        this.isQuizActive = false;
         this.totalQuestions = 10;
         this.allBones = [];
         this.allSubbones = [];
@@ -17,25 +16,18 @@ class QuizManager {
     /**
      * Initialize the quiz system
      */
-    async initialize() {
-        try {
-            const data = await fetchCombinedData();
-            this.allBones = data.bones || [];
-            this.allSubbones = data.subbones || [];
-
-            this.createMasterQuestionPool();
+    async initialize(data) {
+        this.allBones = data.bones || [];
+        this.allSubbones = data.subbones || [];
 
-            if (this.masterQuestionPool.length < 4) {
-                console.error("Not enough items to create a quiz. Need at least 4 items.");
-                return false;
-            }
+        this.createMasterQuestionPool();
 
-            this.setupEventListeners();
-            return true;
-        } catch (error) {
-            console.error("Error initializing quiz:", error);
-            return false;
+        if (this.masterQuestionPool.length < 4) {
+            throw new Error(`Not enough items to create a quiz. Need at least 4 items. (Quiz pool length: ${this.masterQuestionPool.length})`);
         }
+
+        this.setupEventListeners();
+        return true;
     }
 
     /**
@@ -238,7 +230,6 @@ startQuiz() {
     // Reset quiz state
     this.currentQuestionIndex = 0;
     this.score = 0;
-    this.isQuizActive = true;
     this.answered = false;
 
     // Show quiz container, hide main content
@@ -354,7 +345,7 @@ startQuiz() {
 
         choicesContainer.innerHTML = "";
 
-        question.allAnswers.forEach((answer, index) => {
+        question.allAnswers.forEach(answer => {
             const button = document.createElement("button");
             button.className = "quiz-choice-btn";
             button.textContent = answer;

templates/js/sidebar.js

@@ -29,47 +29,4 @@ export async function initializeSidebar() {
             }
         });
     }
-}
-
-export async function loadHelpButton() {
-    const helpButtonContainer = document.getElementById("help-button-container");
-    if (helpButtonContainer) {
-        try {
-            const response = await fetch("helpButton.html");
-            const helpButtonHTML = await response.text();
-            helpButtonContainer.innerHTML = helpButtonHTML;
-
-            const helpButton = document.getElementById("text-button-Help");
-            const helpModal = document.getElementById("help-modal");
-            const closeHelpModal = document.getElementById("close-help-modal");
-
-            if (helpButton && helpModal && closeHelpModal) {
-                // Handle click events
-                helpButton.addEventListener("click", () => {
-                    helpModal.classList.add("is-visible");
-                });
-
-                closeHelpModal.addEventListener("click", () => {
-                    helpModal.classList.remove("is-visible");
-                });
-
-                // Handle keyboard events
-                helpButton.addEventListener("keydown", (event) => {
-                    if (event.key === "Enter" || event.key === " ") {
-                        event.preventDefault();
-                        helpModal.classList.add("is-visible");
-                    }
-                });
-
-                // Close on escape key
-                document.addEventListener("keydown", (event) => {
-                    if (event.key === "Escape" && helpModal.classList.contains("is-visible")) {
-                        helpModal.classList.remove("is-visible");
-                    }
-                });
-            }
-        } catch (error) {
-            console.error("Error loading help button:", error);
-        }
-    }
-}
+}

templates/js/viewer.js

@@ -1,39 +1,3 @@
-/**
- * Displays bone image with error handling for broken URLs
- * @param {Object} boneData - The bone object from mock data
- */
-export function displayBoneImage(boneData) {
-    const boneImage = document.getElementById("bone-image");
-    if (!boneImage) {
-        console.error("Bone image element not found");
-        return;
-    }
-
-    if (boneData.image_url) {
-        boneImage.src = boneData.image_url;
-        boneImage.alt = `${boneData.name} bone image`;
-        boneImage.style.display = "block";
-        
-        // Handle image load errors gracefully
-        boneImage.onerror = () => {
-            console.warn(`Failed to load image for ${boneData.name}: ${boneData.image_url}`);
-            boneImage.src = "https://via.placeholder.com/600x400/CCCCCC/666666?text=Image+Load+Failed";
-            boneImage.alt = `${boneData.name} - Image failed to load`;
-        };
-        
-        // Clear any previous error handlers when image loads successfully
-        boneImage.onload = () => {
-            boneImage.onerror = null;
-        };
-    } else {
-        // Handle missing image_url
-        boneImage.src = "https://via.placeholder.com/600x400/CCCCCC/666666?text=No+Image+Available";
-        boneImage.alt = `${boneData.name} - No image available`;
-        boneImage.style.display = "block";
-        console.warn(`No image URL provided for bone: ${boneData.name}`);
-    }
-}
-
 /**
  * Displays annotations list for the selected bone
  * @param {Array} annotations - Array of annotation objects