Merge branch 'main' into text_annotations_pt2

Author: UcheWendy

.DS_Store

@@ -30,10 +30,10 @@
     "eslint": "^9.24.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "live-server": "^1.2.2",
+    "live-server": "^1.2.0",
     "supertest": "^7.1.4"
   },
   "directories": {
     "test": "tests"
   }
-}
+}

package-lock.json

@@ -247,6 +247,7 @@ <h2 style="color: #003366; text-align: center; margin-bottom: 25px; border-botto
     <script type="module" src="js/main.js"></script>
     <script type="module" src="js/imageDisplay.js"></script>
     <script type="module" src="js/annotationOverlay.js"></script>
+    <script type="module" src="js/imageCaptions.js"></script>
 
     <!-- Simple Escape Key Handler -->
     <script>
@@ -268,4 +269,4 @@ <h2 style="color: #003366; text-align: center; margin-bottom: 25px; border-botto
     </script>
 </body>
 
-</html>
+</html>

package.json

@@ -246,10 +246,10 @@ <h2>Step 3: Diagnostic Output</h2>
                         addLog('info', `Path ${index + 1}: ${name}`, { fill, opacity });
                     });
                 } else {
-                    addLog('error', '❌ No SVG overlay was created');
+                    addLog('error', ' No SVG overlay was created');
                     resultsDiv.innerHTML = `
                         <div class="status error">
-                            <strong>❌ No SVG Created</strong><br>
+                            <strong> No SVG Created</strong><br>
                             The displayColoredRegions function did not create an SVG overlay.<br>
                             Check the console logs above for details.
                         </div>

templates/boneset.html

@@ -0,0 +1,76 @@
+// js/imageCaptions.js
+// Image captions for bone images, extracted from PowerPoint slides
+
+export const imageCaptions = {
+  // Bony Pelvis (main boneset)
+  "bony_pelvis": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+
+  // Ilium and its subbones
+  "ilium": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+  "iliac_crest": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+  "anterior_iliac_spines": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+  "posterior_iliac_spines": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+  "auricular_surface": {
+    image1: "Right Pelvis(medial aspect)",
+    image2: null
+  },
+
+  // Ischium and its subbones
+  "ischium": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+  "ramus": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+  "ischial_tuberosity": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+  "ischial_spine": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+  "sciatic_notches": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+
+  // Pubis and its subbones
+  "pubis": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+  "pubic_rami": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+  "pectineal_line": {
+    image1: "Right Pelvis(medial aspect)",
+    image2: null
+  },
+  "symphyseal_surface": {
+    image1: "Right Pelvis(medial aspect)",
+    image2: null
+  },
+  "pubic_tubercle": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: null
+  }
+};

templates/diagnostic-colored-regions.html

@@ -2,7 +2,8 @@
 // Rendering helpers for the image area (no dropdown wiring).
 
 import { clearAnnotations, loadAndDrawAnnotations } from "./annotationOverlay.js";
-import { displayColoredRegions, clearAllColoredRegions } from './coloredRegionsOverlay.js';
+import { displayColoredRegions, clearAllColoredRegions } from "./coloredRegionsOverlay.js";
+import { imageCaptions } from "./imageCaptions.js";
 
 // Track the current boneId for colored regions
 let currentBoneId = null;
@@ -14,6 +15,14 @@ function getImageContainer() {
   );
 }
 
+/** Helper function to get captions for a boneId */
+function getCaptionsForBone(boneId) {
+  if (!boneId || !imageCaptions[boneId]) {
+    return { image1: null, image2: null };
+  }
+  return imageCaptions[boneId];
+}
+
 /** ---- Empty-state / clearing ------------------------------------------- */
 export function showPlaceholder() {
   const c = getImageContainer();
@@ -28,6 +37,12 @@ export function showPlaceholder() {
   clearAllColoredRegions();
   currentBoneId = null;
 
+  // Remove caption container if it exists
+  const captionContainer = document.getElementById("caption-container");
+  if (captionContainer) {
+    captionContainer.remove();
+  }
+
   // Remove black background class when showing placeholder
   const imagesContent = document.querySelector(".images-content");
   if (imagesContent) imagesContent.classList.remove("has-images");
@@ -40,6 +55,13 @@ export function clearImages() {
     clearAnnotations(c);
     clearAllColoredRegions();
   }
+  
+  // Remove caption container if it exists
+  const captionContainer = document.getElementById("caption-container");
+  if (captionContainer) {
+    captionContainer.remove();
+  }
+  
   currentBoneId = null;
   currentIsBonesetSelection = false; // Reset the flag
 
@@ -49,7 +71,7 @@ export function clearImages() {
 }
 
 /** ---- Public entry: render images array --------------------------------
- * Optionally pass { annotationsUrl: 'templates/data/annotations/xyz.json', boneId: 'bone_name' }
+ * Optionally pass { annotationsUrl: "templates/data/annotations/xyz.json", boneId: "bone_name" }
  */
 export function displayBoneImages(images, options = {}) {
   const container = getImageContainer();
@@ -92,24 +114,39 @@ export function displayBoneImages(images, options = {}) {
 
 //** ---- Single image ------------------------------------------------------ */
 function displaySingleImage(image, container, options = {}) {
-  // 1. CRITICAL FIX: Add the 'single-image' class to the main container.
+  // 1. CRITICAL FIX: Add the "single-image" class to the main container.
   // This CSS class is required for the styles to correctly size the single image layout.
   container.className = "single-image"; 
 
-  // 2. Simplification: Use innerHTML to directly create the necessary structure 
-  // (.single-image-wrapper > img), which better aligns with your CSS.
   container.innerHTML = `
     <div class="single-image-wrapper">
-      <img
-        class="bone-image"
-        src="${image.url || image.src || ""}"
-        alt="${image.alt || image.filename || "Bone image"}"
-      >
+      <div class="image-wrapper">
+        <img
+          class="bone-image"
+          src="${image.url || image.src || ""}"
+          alt="${image.alt || image.filename || "Bone image"}"
+        >
+      </div>
     </div>
   `;
 
+  // Create caption container OUTSIDE the image container if caption exists
+  if (imageCaptions.image1) {
+    const captionContainer = document.createElement("div");
+    captionContainer.id = "caption-container";
+    captionContainer.className = "single-image";
+
+    const caption = document.createElement("div");
+    caption.className = "caption-box image-caption";
+    caption.textContent = imageCaptions.image1;
+    captionContainer.appendChild(caption);
+
+    // Insert caption container after the image container
+    container.parentElement.insertBefore(captionContainer, container.nextSibling);
+  }
+
   // 3. Get reference to the image element for colored regions and event handlers
-  const img = container.querySelector('img');
+  const img = container.querySelector("img");
   if (img) {
     const loadColoredRegions = () => {
       img.classList.add("loaded");
@@ -137,7 +174,7 @@ function displaySingleImage(image, container, options = {}) {
     // Check if already loaded (cached) - use setTimeout to let browser process
     setTimeout(() => {
       if (img.complete && img.naturalHeight !== 0) {
-        console.log(`[ImageDisplay] Single image was cached, calling loadColoredRegions immediately`);
+        console.log("[ImageDisplay] Single image was cached, calling loadColoredRegions immediately");
         loadColoredRegions();
       }
     }, 0);
@@ -160,13 +197,20 @@ function applyRotation(imgEl, { rot_deg = 0, flipH = false } = {}) {
 }
 
 function displayTwoImages(images, container, options = {}) {
+  // Get captions for this bone
+  const captions = getCaptionsForBone(currentBoneId);
+  
   // Add the two-images class to the container for CSS styling
   container.className = "two-images";
 
+  // Create images first
   images.slice(0, 2).forEach((image, index) => {
     const imgItem = document.createElement("div");
     imgItem.className = "image-item";
 
+    const imgWrapper = document.createElement("div");
+    imgWrapper.className = "image-wrapper";
+
     const img = document.createElement("img");
     img.alt = image.alt || image.filename || "Bone image";
 
@@ -191,21 +235,44 @@ function displayTwoImages(images, container, options = {}) {
       imgItem.textContent = "Failed to load image.";
     });
 
-    imgItem.appendChild(img);
+    imgWrapper.appendChild(img);
+    imgItem.appendChild(imgWrapper);
     container.appendChild(imgItem);
 
     // Set src LAST - this triggers the load
     img.src = image.url || image.src || "";
 
     // Check if image is already loaded from cache after setting src
-    // Use setTimeout to allow the browser to process the src assignment first
     setTimeout(() => {
       if (img.complete && img.naturalWidth > 0) {
         console.log(`[ImageDisplay] Image ${index} was already cached, manually triggering load handler`);
         loadColoredRegions();
       }
     }, 10);
   });
+
+  // Create caption container AFTER images, OUTSIDE the grid
+  if (captions.image1 || captions.image2) {
+    const captionContainer = document.createElement("div");
+    captionContainer.id = "caption-container";
+    
+    if (captions.image1) {
+      const caption1 = document.createElement("div");
+      caption1.className = "caption-box image-caption";
+      caption1.textContent = captions.image1;
+      captionContainer.appendChild(caption1);
+    }
+    
+    if (captions.image2) {
+      const caption2 = document.createElement("div");
+      caption2.className = "caption-box image-caption";
+      caption2.textContent = captions.image2;
+      captionContainer.appendChild(caption2);
+    }
+    
+    // Insert caption container after the image container
+    container.parentElement.insertBefore(captionContainer, container.nextSibling);
+  }
 }
 
 /** ---- 3+ images grid ---------------------------------------------------- */
@@ -230,4 +297,4 @@ function displayMultipleImages(images, container) {
   });
 
   container.appendChild(wrapper);
-}
+}

templates/js/coloredRegionsOverlay.js

@@ -3,6 +3,7 @@ let currentSubboneIndex = -1;
 let subbones = [];
 
 export function setupNavigation(prevButton, nextButton, subboneDropdown, updateDescription) {
+  // Setup Previous/Next button navigation
   prevButton.addEventListener("click", () => {
     prevSubbone();
     updateUI(subboneDropdown, updateDescription);
@@ -14,6 +15,60 @@ export function setupNavigation(prevButton, nextButton, subboneDropdown, updateD
   });
 
   disableButtons(prevButton, nextButton);
+
+  // Setup Home button functionality
+  setupHomeButton();
+}
+
+/**
+ * Sets up the Home button to reset the application to initial state
+ */
+function setupHomeButton() {
+  const homeButton = document.getElementById("text-button-Home");
+  
+  if (!homeButton) {
+    console.warn("Home button not found in DOM");
+    return;
+  }
+
+  // Add click event listener
+  homeButton.addEventListener("click", resetToInitialState);
+
+  // Add keyboard support (Enter and Space keys)
+  homeButton.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      resetToInitialState();
+    }
+  });
+
+  // Add visual feedback on hover
+  homeButton.style.cursor = "pointer";
+}
+
+/**
+ * Resets the entire application to its initial load state
+ */
+function resetToInitialState() {
+  // Provide immediate visual feedback
+  const homeButton = document.getElementById("text-button-Home");
+  if (homeButton) {
+    homeButton.style.opacity = "0.6";
+    setTimeout(() => {
+      homeButton.style.opacity = "1";
+    }, 150);
+  }
+
+  // The simplest and most reliable way to reset everything
+  // This ensures ALL state returns to initial load state:
+  // - All dropdowns reset
+  // - Search bar clears
+  // - Images clear
+  // - Description clears
+  // - Sidebar closes
+  // - Page scrolls to top
+  // - All navigation state resets
+  window.location.reload();
 }
 
 export function setBoneAndSubbones(bone, boneSubbones) {

templates/js/imageCaptions.js

@@ -161,7 +161,7 @@ class QuizManager {
     }
 
     /**
-     * Get image URL for an item
+     * Get image URL for an item....
      */
     getImageUrl(itemId) {
         // Use the API endpoint that serves bone images