Skip to content

HACKATHON_CHANGES.md

Latest commit

 

History

History
226 lines (174 loc) · 8.34 KB

HACKATHON_CHANGES.md

File metadata and controls

226 lines (174 loc) · 8.34 KB

Hackathon Changes Documentation

Overview

Three clinical modules were added to the OHIF Viewer as standalone extensions, plus a runtime bug fix for the i18n library. Subsequently, several enhancements were made to all three modules based on user feedback.

1. Bug Fix — i18n Runtime Crash

File: platform/i18n/src/index.js

Problem: App crashed on load with:

TypeError: _this.services.languageUtils.isWhitelisted is not a function

Root Cause: Version mismatch — i18next (newer) removed isWhitelisted(), but i18next-browser-languagedetector (older) still calls it during language detection.

Fix: Monkey-patched LanguageDetector.prototype.detect at module-load time so the missing method is injected right before it is called.

2. New Extensions

2.1 ECG Tools — extensions/ecg-tools/

extensions/ecg-tools/
├── package.json                          ← @custom/extension-ecg-tools
└── src/
    ├── index.tsx                         ← OHIF extension entry point
    ├── utils/
    │   └── ecgCalculations.ts            ← Clinical math
    └── panels/
        └── PanelEcgViewer.tsx            ← Main UI

Clinical Calculations (ecgCalculations.ts):

Function Formula Description
bazettQTc(qtMs, rrMs) QTc = QT / √RR (seconds) QT interval corrected for heart rate
heartRate(rrMs) HR = 60000 / RR Beats per minute from RR interval
qrsAxis(leadI, aVF) atan2(aVF, leadI) × 180/π Electrical axis in degrees
rrVariance(intervals[]) std deviation formula RR interval variability
standardCalibration(px/mm) 25 mm/s, 10 mm/mV Convert pixels to clinical units

QRS Axis Interpretation:

  • -30° to +90° → Normal
  • -30° to -90° → Left Axis Deviation (LAD)
  • +90° to +180° → Right Axis Deviation (RAD)
  • > ±180° → Extreme Axis Deviation

Tools available in the UI:

  • CURSOR — Pan/inspect
  • CALIBRATE_H / CALIBRATE_V — Set pixel-to-mm scale
  • TIME — Measure time intervals (ms)
  • AMPLITUDE — Measure voltage (mV)
  • RR_INTERVAL — Measure R-to-R distance → HR
  • QT_INTERVAL — Measure QT → compute QTc
  • QRS_AXIS — Enter Lead I & aVF amplitudes
  • COMPARE — Side-by-side study comparison

ECG Improvements (post-initial):

  • Measurement annotation font size reduced to ~12px for cleaner readout
  • Image rendering quality improved (imageSmoothingQuality = 'high') for sharper ECG waveforms
  • Canvas max size raised (1800×1200) to support higher-resolution ECG images

2.2 Smart Paint — extensions/smart-paint/

extensions/smart-paint/
├── package.json                          ← @custom/extension-smart-paint
└── src/
    ├── index.tsx                         ← OHIF extension entry point
    ├── tools/
    │   └── SmartPaintTool.ts             ← Paint engine
    └── panels/
        └── PanelSmartPaint.tsx           ← Interactive UI

Paint Engine (SmartPaintTool.ts):

Function Description
paintBrush(state, cx, cy, radius, sensitivity, pixelData, erase) Paint or erase pixels in a circle; optional intensity-based region grow
commitHistory(state) Save current mask to undo stack (max 50 steps)
undo(state) Restore previous mask
redo(state) Re-apply undone mask
clearMask(key) Reset all painted pixels
maskToContour(state) Marching-squares algorithm → array of [x,y] boundary points
renderMaskOverlay(ctx, state, color) Draw mask as semi-transparent color on canvas
countPaintedPixels(state) Count total painted pixels → used for area display

UI Features:

  • Upload any image file
  • Brush tool with adjustable radius and sensitivity
  • Custom SVG cursor that scales with brush size
  • Erase mode toggle
  • 2D / 3D mode toggle
  • Undo / Redo buttons
  • "Extract Contour" button → traces mask boundary
  • Painted area display — shown as px² below the canvas and in status bar (live, updates on every stroke)
  • Panel icon changed to segmentation icon (tab-segmentation)

2.3 Flatfoot Measurement — extensions/flatfoot/

extensions/flatfoot/
├── package.json                          ← @custom/extension-flatfoot
└── src/
    ├── index.tsx                         ← OHIF extension entry point
    ├── utils/
    │   └── flatfootCalculations.ts       ← Clinical foot math
    └── panels/
        └── PanelFlatfoot.tsx             ← Measurement UI

Measurement Tools:

  • DISTANCE — Ruler between two points
  • CALCANEAL_PITCH — 2-point angle from horizontal
  • CLARKE_ANGLE — 3-point angle at arch apex
  • ARCH_INDEX — 2-point span (total foot length + mid-foot)
  • MEARYS_ANGLE — 4 points defining talus and first metatarsal axes
  • TRIANGLE — 3 corner points → all 3 angles + side midpoints + area
  • TRIANGLE_SPLIT — Baseline (2 pts) + apex → perpendicular creates 2 sub-triangles with all 6 angles

Flatfoot Improvements (post-initial):

  • All measurement points are now draggable — click and drag any placed dot to reposition it; values recalculate live
  • Triangle tool added — 3-corner measurement with law-of-cosines angles, midpoints, area
  • Split Triangle tool added — Arch-Index-style baseline + apex, perpendicular drop creates 2 triangles; D point (foot of perpendicular) is also independently draggable

3. New Routes (Standalone Pages)

URL Component Description
/ecg-viewer EcgViewer Full ECG analysis page
/smart-paint SmartPaint Smart Paint ROI page
/flatfoot Flatfoot Flatfoot measurement page

Files changed:

  • platform/app/src/routes/index.tsx — Added 3 route entries
  • platform/app/src/routes/EcgViewer/EcgViewer.tsx — Lazy-loads extension panel
  • platform/app/src/routes/SmartPaint/SmartPaintRoute.tsx — New file
  • platform/app/src/routes/Flatfoot/FlatfootRoute.tsx — New file

4. WorkList Navigation Buttons

File: platform/app/src/routes/WorkList/WorkList.tsx

Three buttons added to the toolbar area above the study list:

Button Color Navigates To
ECG Viewer Green /ecg-viewer
Smart Paint ROI Cyan /smart-paint
Flatfoot Analysis Amber /flatfoot

5. OHIF Plugin Registration

File: platform/app/src/pluginImports.js

Added dynamic imports for all new extensions and mode:

extensions.push("@custom/extension-ecg-tools");
extensions.push("@custom/extension-smart-paint");
extensions.push("@custom/extension-flatfoot");
modes.push("@custom/mode-ecg");

6. ECG Mode

Files: modes/ecg/src/index.tsx, modes/ecg/src/id.ts

  • Mode ID: @custom/mode-ecg
  • Route: viewer/ecg
  • Panels: ECG Tools, Smart Paint, Flatfoot in right-side panel layout

7. Quick Start Checklist

□ cd /home/artem/Desktop/project/frontend/Viewers
□ yarn install           (install any new deps)
□ yarn dev               (start dev server)
□ Open http://localhost:3000
□ Check browser console — no red errors
□ See 3 buttons on WorkList page
□ Test each clinical tool with a sample image

8. File Change Summary

File Type What Changed
platform/i18n/src/index.js Fix Monkey-patch for isWhitelisted crash
platform/app/src/pluginImports.js Feature Register 3 extensions + 1 mode
platform/app/src/routes/index.tsx Feature Add 3 new routes
platform/app/src/routes/WorkList/WorkList.tsx Feature Add 3 toolbar nav buttons
extensions/ecg-tools/src/panels/PanelEcgViewer.tsx Update Smaller font, better image quality, larger canvas
extensions/smart-paint/src/index.tsx Update Icon changed to tab-segmentation
extensions/smart-paint/src/tools/SmartPaintTool.ts Update Added countPaintedPixels()
extensions/smart-paint/src/panels/PanelSmartPaint.tsx Update Painted area display below canvas
extensions/flatfoot/src/panels/PanelFlatfoot.tsx Update Triangle tool, Split Triangle tool, drag for all points
extensions/ecg-tools/** New Full ECG Tools extension
extensions/smart-paint/** New Full Smart Paint extension
extensions/flatfoot/** New Full Flatfoot extension
modes/ecg/** New OHIF ECG mode