Merge pull request #372 from oss-slu/cleanup

Cleanup

Author: leandrumartin

boneset-api/server.js

@@ -496,10 +496,8 @@ app.get("/api/search", searchLimiter, (req, res) => {
     }
 });
 
-//  CORRECTED SERVER STARTUP LOGIC 
-// 1. Initialize cache first. 2. Start server only if run directly (for testability).
 async function startServer() {
-    await initializeSearchCache(); // Wait for the cache to be built
+    await initializeSearchCache();
 
     // Start the server only if this file is run directly (not imported)
     if (require.main == module) {
@@ -509,7 +507,7 @@ async function startServer() {
     }
 }
 
-startServer(); // Call the async function to begin startup
+startServer();
 
 // Export for tests or other modules if needed
 module.exports = {

editor/push.html

@@ -35,6 +35,6 @@
     "jest-environment-jsdom": "^30.2.0"
   },
   "directories": {
-    "test": "tests"
+    "test": "templates/tests"
   }
 }

package.json

@@ -1,8 +1,3 @@
-// templates/js/annotationOverlay.js
-// Small, self-contained overlay module.
-
-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) {
@@ -31,14 +26,14 @@ export function clearAnnotations(container) {
  * @param {Object} norm - The normalized geometry {normX, normY, normW, normH}.
  * @returns {Object} Pixel coordinates {left, top, width, height}.
  */
-function normalizedRectToPx(rect, box, norm) { // <--- RENAMED to reflect change
-  // 🛑 FIX: Input coordinates (rect.x, rect.y, etc.) are now normalized decimals (0.0 to 1.0).
+function normalizedRectToPx(rect, box, norm) {
+  // Input coordinates (rect.x, rect.y, etc.) are now normalized decimals (0.0 to 1.0).
 
   // Normalized Offset (normX, normY are also 0.0 to 1.0)
   const normalizedOffsetX = norm.normX;
   const normalizedOffsetY = norm.normY;
 
-  // We now calculate pixel coordinates by: (Normalized Coord - Normalized Offset) * Effective Pixel Size (box.w/h)
+  // We calculate pixel coordinates by: (Normalized Coord - Normalized Offset) * Effective Pixel Size (box.w/h)
   return {
     left: (rect.x - normalizedOffsetX) * box.w,
     top: (rect.y - normalizedOffsetY) * box.h,
@@ -55,8 +50,7 @@ function normalizedRectToPx(rect, box, norm) { // <--- RENAMED to reflect change
  * @returns {Object} Pixel coordinates {x, y}.
  */
 function normalizedPointToPx(pt, box, norm) { // <--- RENAMED to reflect change
-  // 🛑 FIX: Input coordinates (pt.x, pt.y) are now normalized decimals (0.0 to 1.0).
-
+  // Input coordinates (pt.x, pt.y) are normalized decimals (0.0 to 1.0).
   const normalizedOffsetX = norm.normX;
   const normalizedOffsetY = norm.normY;
 
@@ -81,21 +75,21 @@ export function drawAnnotations(container, annotationsJson) {
   svg.innerHTML = "";
   labels.innerHTML = "";
 
-  // 1. Get current pixel dimensions of the image container.
+  // Get current pixel dimensions of the image container.
   const rect = container.getBoundingClientRect();
 
-  // 2. Extract the normalization factors from the JSON (provided by backend).
+  // Extract the normalization factors from the JSON (provided by backend).
   const norm = annotationsJson.normalized_geometry || { normX: 0, normY: 0, normW: 1, normH: 1 };
 
-  // 3. Define the *effective* coordinate box for scaling.
+  // Define the *effective* coordinate box for scaling.
   // We scale the container size (rect.width/height) by the crop ratios (normW/normH).
   // This calculates the effective pixel dimensions relative to the full PPT slide size.
   const box = {
     w: rect.width / norm.normW,
     h: rect.height / norm.normH
   };
 
-  // 4. Get the list of annotations.
+  // Get the list of annotations.
   const list = annotationsJson.annotations || annotationsJson.text_annotations || [];
 
   list.forEach((a) => {
@@ -118,8 +112,8 @@ export function drawAnnotations(container, annotationsJson) {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      whiteSpace: "pre-line",   // 👈 KEY: show newlines
-      textAlign: "center",      // optional: center both lines
+      whiteSpace: "pre-line",   // show newlines
+      textAlign: "center",      // center both lines
     });
 
     labels.appendChild(el);
@@ -150,7 +144,7 @@ export async function loadAndDrawAnnotations(container, jsonUrl) {
   if (!res.ok) return;
   const data = await res.json();
 
-  // The backend now provides data in the structure expected by drawAnnotations
+  // The backend provides data in the structure expected by drawAnnotations
   drawAnnotations(container, data);
   attachAutoscale(container); // keep aligned on resize
 }
@@ -166,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/annotationOverlay.js

@@ -1,6 +1,3 @@
-// api.js - Centralized API configuration and data fetching
-
-// Centralized API configuration
 const API_CONFIG = {
     BASE_URL: "http://127.0.0.1:8000",
     ENDPOINTS: {
@@ -25,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/api.js

@@ -81,7 +81,7 @@ const OVERLAY_ADJUSTMENTS = {
  */
 async function fetchColoredRegionData(boneId, isBonesetSelection = false) {
     if (!boneId) {
-        console.debug("[ColoredRegions] No boneId provided for colored regions");
+        console.error("[ColoredRegions] No boneId provided for colored regions");
         return null;
     }
 
@@ -90,7 +90,7 @@ async function fetchColoredRegionData(boneId, isBonesetSelection = false) {
     // Map ilium to bony_pelvis for boneset selections
     let mappedBoneId = boneId;
     if (boneId === "ilium" && isBonesetSelection) {
-        console.log("[ColoredRegions] Mapping \"ilium\" to \"bony_pelvis\" for boneset selection");
+        console.debug("[ColoredRegions] Mapping \"ilium\" to \"bony_pelvis\" for boneset selection");
         mappedBoneId = "bony_pelvis";
     }
 
@@ -146,9 +146,9 @@ function convertCommandToPixels(command, dimensions, debugInfo = {}) {
     if (command.x !== undefined) {
         converted.x = emuToPixels(command.x, slideWidth, imageWidth);
         if (debugInfo.isFirstCommand) {
-            console.log(`[ColoredRegions] First coord conversion: EMU(${command.x}, ${command.y}) -> Pixel(${converted.x.toFixed(2)}, ${emuToPixels(command.y, slideHeight, imageHeight).toFixed(2)})`);
-            console.log(`[ColoredRegions]   EMU dimensions: ${slideWidth} x ${slideHeight}`);
-            console.log(`[ColoredRegions]   Pixel dimensions: ${imageWidth} x ${imageHeight}`);
+            console.debug(`[ColoredRegions] First coord conversion: EMU(${command.x}, ${command.y}) -> Pixel(${converted.x.toFixed(2)}, ${emuToPixels(command.y, slideHeight, imageHeight).toFixed(2)})`);
+            console.debug(`[ColoredRegions]   EMU dimensions: ${slideWidth} x ${slideHeight}`);
+            console.debug(`[ColoredRegions]   Pixel dimensions: ${imageWidth} x ${imageHeight}`);
         }
     }
     if (command.y !== undefined) {
@@ -235,14 +235,14 @@ function createColoredRegionsSVG(coloredRegions, imageWidth, imageHeight, imageD
     svg.style.width = "100%";
     svg.style.height = "100%";
     svg.style.pointerEvents = "none"; // Allow clicks to pass through to image
-    
-    console.log(`[ColoredRegions DEBUG] Creating SVG for bone: ${boneId}, imageIndex: ${imageIndex}`);
-    console.log("[ColoredRegions DEBUG] OVERLAY_ADJUSTMENTS lookup:", OVERLAY_ADJUSTMENTS[boneId]);
+
+    console.debug(`[ColoredRegions DEBUG] Creating SVG for bone: ${boneId}, imageIndex: ${imageIndex}`);
+    console.debug("[ColoredRegions DEBUG] OVERLAY_ADJUSTMENTS lookup:", OVERLAY_ADJUSTMENTS[boneId]);
 
     // Apply positioning adjustments if defined for this bone and image
     if (OVERLAY_ADJUSTMENTS[boneId] && OVERLAY_ADJUSTMENTS[boneId][imageIndex]) {
         const adjustments = OVERLAY_ADJUSTMENTS[boneId][imageIndex];
-        console.log("[ColoredRegions DEBUG] Found adjustments:", adjustments);
+        console.debug("[ColoredRegions DEBUG] Found adjustments:", adjustments);
         const transforms = [];
 
         if (adjustments.x !== 0 || adjustments.y !== 0) {
@@ -260,7 +260,7 @@ function createColoredRegionsSVG(coloredRegions, imageWidth, imageHeight, imageD
         if (transforms.length > 0) {
             svg.style.transform = transforms.join(" ");
             svg.style.transformOrigin = "center";
-            console.log(`[ColoredRegions] Applied positioning adjustments for ${boneId} image ${imageIndex}: ${svg.style.transform}`);
+            console.debug(`[ColoredRegions] Applied positioning adjustments for ${boneId} image ${imageIndex}: ${svg.style.transform}`);
         }
     }
 
@@ -273,8 +273,8 @@ function createColoredRegionsSVG(coloredRegions, imageWidth, imageHeight, imageD
         imageWidth: imageWidth,
         imageHeight: imageHeight
     };
-    
-    console.log("[ColoredRegions] Coordinate conversion:", {
+
+    console.debug("[ColoredRegions] Coordinate conversion:", {
         sourceWidth: dimensions.slideWidth,
         sourceHeight: dimensions.slideHeight,
         targetWidth: dimensions.imageWidth,
@@ -357,7 +357,6 @@ function createColoredRegionsSVG(coloredRegions, imageWidth, imageHeight, imageD
                         path.setAttribute("data-region-type", "fill");
                     }
 
-                    // Add to SVG
                     svg.appendChild(path);
 
                     console.debug(`Created colored region path ${pathIndex + 1}/${pathDataArray.length}: ${region.anatomical_name} (${region.color_name})`);
@@ -382,9 +381,8 @@ function createColoredRegionsSVG(coloredRegions, imageWidth, imageHeight, imageD
  * @returns {Promise<void>}
  */
 export async function displayColoredRegions(imageElement, boneId, imageIndex = 0, isBonesetSelection = false) {
-    console.log("[ColoredRegions] ============ START displayColoredRegions ============");
-    console.log(`[ColoredRegions] boneId: ${boneId}, imageIndex: ${imageIndex}, isBonesetSelection: ${isBonesetSelection}`);
-    console.log("[ColoredRegions] imageElement:", imageElement);
+    console.debug(`[ColoredRegions] boneId: ${boneId}, imageIndex: ${imageIndex}, isBonesetSelection: ${isBonesetSelection}`);
+    console.debug("[ColoredRegions] imageElement:", imageElement);
 
     if (!imageElement || !boneId) {
         console.debug("[ColoredRegions] Missing image element or boneId for colored regions");
@@ -395,7 +393,7 @@ export async function displayColoredRegions(imageElement, boneId, imageIndex = 0
     let mappedBoneId = boneId;
     if (boneId === "ilium" && isBonesetSelection) {
         mappedBoneId = "bony_pelvis";
-        console.log("[ColoredRegions] Using mapped bone ID \"bony_pelvis\" for positioning adjustments");
+        console.debug("[ColoredRegions] Using mapped bone ID \"bony_pelvis\" for positioning adjustments");
     }
 
     // Fetch colored region data
@@ -404,7 +402,7 @@ export async function displayColoredRegions(imageElement, boneId, imageIndex = 0
 
     // Return early if no colored region data exists
     if (!regionData) {
-        console.debug(`[ColoredRegions] No colored regions to display for ${boneId}`);
+        console.log(`[ColoredRegions] No colored regions to display for ${boneId}`);
         return;
     }
 
@@ -413,8 +411,8 @@ export async function displayColoredRegions(imageElement, boneId, imageIndex = 0
     let regionsToDisplay = [];
 
     if (regionData.images && Array.isArray(regionData.images)) {
-        // New structure: data organized by image
-        console.log(`[ColoredRegions] Using new multi-image structure with ${regionData.images.length} images`);
+        // One possible structure: data organized by image
+        console.debug(`[ColoredRegions] Using organized-by-image structure with ${regionData.images.length} images`);
 
         if (imageIndex >= 0 && imageIndex < regionData.images.length) {
             imageData = regionData.images[imageIndex];
@@ -424,8 +422,8 @@ export async function displayColoredRegions(imageElement, boneId, imageIndex = 0
             return;
         }
     } else if (regionData.colored_regions) {
-        // Old structure: single set of regions for all images
-        console.log("[ColoredRegions] Using old single-image structure");
+        // Alternate structure: single set of regions for all images
+        console.debug("[ColoredRegions] Using alternate structure");
         regionsToDisplay = regionData.colored_regions;
         imageData = {
             width: regionData.image_dimensions?.width,
@@ -442,7 +440,7 @@ export async function displayColoredRegions(imageElement, boneId, imageIndex = 0
 
     // Wait for image to load to get correct dimensions
     if (!imageElement.complete) {
-        console.log("[ColoredRegions] Waiting for image to complete loading...");
+        console.debug("[ColoredRegions] Waiting for image to complete loading...");
         await new Promise(resolve => {
             imageElement.addEventListener("load", resolve, { once: true });
         });
@@ -454,8 +452,8 @@ export async function displayColoredRegions(imageElement, boneId, imageIndex = 0
     const imageWidth = imageElement.naturalWidth;
     const imageHeight = imageElement.naturalHeight;
 
-    console.log(`[ColoredRegions] Image natural dimensions: ${imageWidth}x${imageHeight}`);
-    console.log(`[ColoredRegions] Image displayed dimensions: ${imageElement.offsetWidth}x${imageElement.offsetHeight}`);
+    console.debug(`[ColoredRegions] Image natural dimensions: ${imageWidth}x${imageHeight}`);
+    console.debug(`[ColoredRegions] Image displayed dimensions: ${imageElement.offsetWidth}x${imageElement.offsetHeight}`);
 
     if (imageWidth === 0 || imageHeight === 0) {
         console.warn("[ColoredRegions] Image has zero dimensions, cannot display colored regions");
@@ -492,13 +490,13 @@ export async function displayColoredRegions(imageElement, boneId, imageIndex = 0
 
     // Add the SVG overlay
     parent.appendChild(svg);
-    
-    console.log("[ColoredRegions] SVG appended to parent container");
-    console.log("[ColoredRegions] Parent element:", parent);
-    console.log("[ColoredRegions] Parent classes:", parent.className);
-    console.log("[ColoredRegions] SVG data-bone attribute:", svg.getAttribute("data-bone"));
-    console.log("[ColoredRegions] SVG element:", svg);
-    console.log(`[ColoredRegions] SVG has ${svg.children.length} path elements`);
+
+    console.debug("[ColoredRegions] SVG appended to parent container");
+    console.debug("[ColoredRegions] Parent element:", parent);
+    console.debug("[ColoredRegions] Parent classes:", parent.className);
+    console.debug("[ColoredRegions] SVG data-bone attribute:", svg.getAttribute("data-bone"));
+    console.debug("[ColoredRegions] SVG element:", svg);
+    console.debug(`[ColoredRegions] SVG has ${svg.children.length} path elements`);
 
     console.log(`[ColoredRegions] Successfully displayed ${regionsToDisplay.length} colored regions for image ${imageIndex}`);
 }

templates/js/coloredRegionsOverlay.js

@@ -1,4 +1,3 @@
-// js/description.js
 const GITHUB_RAW_URL = "https://raw.githubusercontent.com/oss-slu/DigitalBonesBox/data/data/descriptions/";
 
 export async function loadDescription(id) {