Andrew Worthy

Andrew Worthy

PhD Researcher & Data Scientist Python · ML · Signal Processing

MonStim Analyzer App Simulator — Implementation Plan

MonStim Analyzer App Simulator — Implementation Plan

Goal

Create a web-based demo that looks and behaves exactly like the MonStim Analyzer desktop application, using pre-computed synthetic data. This is distinct from the /portfolio/monstim-demo/ H-reflex explainer — this simulator is meant to showcase the actual app UX for portfolio visitors.

Desktop App Architecture (from source code analysis)

Main Window Layout

  • Left Panel (~25% width): Control panel with dropdowns, buttons, reports
  • Right Panel (~75% width): Large plotting canvas (PyQtGraph)
  • Menu bar: File, Edit, Preferences, Help menus
  • Status bar: Shows messages and current state

Left Panel Structure (top to bottom)

  1. Analysis Profile Selector
    • Dropdown: “(default)” selected
    • Tooltip shows profile description
  2. Data Selection Widget
    • “Experiment:” dropdown (shows experiment name)
    • “Dataset:” dropdown (shows [YYMMDD] [AnimalID] [Condition])
    • “Session:” dropdown (shows session ID)
  3. Reports Widget
    • “Show M-max Report” button
    • “Show Session Report” button
    • “Show Dataset Report” button
  4. Plot Widget
    • Plot Scope radio buttons: Single Session / Entire Dataset / Experiment
    • Plot Type dropdown: varies by scope
      • Session scope: “EMG Overlay”, “Single EMG Recordings”, “Reflex Curves”, etc.
      • Dataset scope: “Average Reflex Curves”, “Max H-reflex”, “M-max”
      • Experiment scope: same as dataset
    • Plot Options (conditional on plot type):
      • Checkboxes for legends, error bars, relative to M-max
      • Dropdown for amplitude method (RMS, peak-to-trough, etc.)
    • “Plot” button (primary action)
    • “Plot & Extract Data” button (secondary action)

Right Panel (Plot Canvas)

  • Shows interactive PyQtGraph plots
  • Multiple plot types:
    • Single waveform with latency windows highlighted
    • Overlay of all sweeps with colormap
    • Recruitment curves (stimulus vs amplitude)
    • Bar charts for M-max, Max H-reflex

Web Demo Architecture

Data Requirements

We already have demo_data.json with:

  • 35 recordings (0.5–12 mA stimulus range)
  • Filtered EMG waveforms (1200 samples each)
  • M-wave and H-wave amplitudes (RMS & peak-to-trough)
  • Recruitment curve summary

What We Can Simulate

✅ Single Session scope — all our data is from one synthetic session ✅ Plot types:

  • ✅ “Single EMG Recordings” — show one sweep at a time with M/H windows
  • ✅ “Reflex Curves” — M-wave and H-wave vs stimulus (we have this)
  • ✅ “EMG Overlay” — all 35 sweeps overlaid with colormap
  • ⚠️ “M-max” bar chart — can fake with our max M-wave value
  • ⚠️ “Suspected H-reflexes” — just show recordings where H > threshold

❌ What we can’t simulate (no data):

  • Dataset-level plots (need multiple sessions)
  • Experiment-level plots (need multiple datasets)
  • Report dialogs (would need full analysis details)
  • Latency window editing
  • Channel name editing

Simplified Demo Scope

For the initial demo, implement:

  1. Left panel UI — static, looks like the real app
  2. Plot Scope: Lock to “Single Session” (gray out other options)
  3. Plot Type dropdown: 3 options
    • “Single EMG Recordings”
    • “Reflex Curves” (default)
    • “EMG Overlay”
  4. Plot button — switches between plot types
  5. Right panel — Plotly charts that match PyQtGraph style

Visual Design Specification

Color Palette (Qt Fusion Dark Theme)

Based on typical Qt Fusion styling:

  • Background panels: #353535 (dark gray)
  • Widget backgrounds: #2b2b2b (darker gray)
  • Text: #e0e0e0 (light gray)
  • Borders: #1e1e1e (very dark gray)
  • Buttons (normal): #505050
  • Buttons (hover): #5a5a5a
  • Buttons (pressed): #3a3a3a
  • Primary button (Plot): #0d6efd (blue)
  • Disabled text: #707070
  • Selection/highlight: #4a90d9 (Qt blue)

Layout Dimensions

  • Window: 1200px × 700px (responsive down to 900px)
  • Left panel: 300px fixed width (collapses at <900px)
  • Right panel: flexible, fills remaining space
  • Padding: 8px standard, 12px section spacing
  • Font: system UI font, 13px body, 12px labels, 11px small

Widget Styling

  • Dropdowns: Qt combo box style, dropdown arrow on right
  • Buttons: Slightly rounded (2px), subtle shadow on hover
  • Radio buttons: Qt-style circles with center dot when selected
  • Section headers: Slightly bolder, 1px bottom border, 6px bottom margin
  • Plot canvas: 1px solid border, slight inset shadow

Implementation Steps

Step 1: Create HTML Structure

File: _pages/monstim-app-demo.html

  • Main container: .app-window
  • Left panel: .control-panel
  • Right panel: .plot-canvas
  • Mock menu bar and status bar (static)

Step 2: Style the UI (CSS)

Match Qt widget appearance:

  • Use CSS Grid for left panel sections
  • Flexbox for button rows
  • Custom dropdown styling (careful with cross-browser compat)
  • Plotly chart with Qt-like theme

Step 3: Implement Plot Switching (JavaScript)

  • Load demo_data.json on page load
  • Default: show “Reflex Curves”
  • Plot type dropdown onChange → redraw chart
  • Recording selector (for “Single EMG Recordings” mode)

Step 4: Create 3 Plot Types

  1. Reflex Curves (M & H vs stimulus)
    • Line+markers, two traces
    • X-axis: Stimulus (mA), Y-axis: RMS Amplitude (mV)
    • Legend in top-left
  2. Single EMG Recordings
    • Waveform trace (time vs mV)
    • Shaded M-wave window (green)
    • Shaded H-wave window (blue)
    • Stimulus onset vertical line (red dashed)
    • Recording selector: dropdown or prev/next buttons
  3. EMG Overlay
    • All 35 sweeps overlaid
    • Colormap from blue (low stim) → red (high stim)
    • Optional: legend showing stim range color bar

Step 5: Polish & Details

  • Smooth transitions between plots
  • Loading state while switching
  • Hover tooltips on controls (match Qt tooltips)
  • Keyboard shortcuts (optional: ← → for recording navigation)

Update _portfolio/monstim-analyzer.md:

  • Change “Interactive Demo” link to point to /portfolio/monstim-app-demo/
  • Keep the H-reflex explainer at /portfolio/monstim-demo/ (rename link to “H-Reflex Explainer”)

File Structure

_pages/
  monstim-app-demo.html       ← New: App simulator
  monstim-demo.html            ← Existing: H-reflex explainer (keep)

assets/data/
  demo_data.json               ← Already created (1.5 MB)

_portfolio/
  monstim-analyzer.md          ← Update links section

Acceptance Criteria

  • Left panel looks like the actual Qt app (visual similarity >90%)
  • Can switch between 3 plot types smoothly
  • Reflex curves match the explainer demo (data consistency check)
  • Single recording view has prev/next navigation
  • EMG overlay shows colormap gradient
  • Responsive down to tablet size (900px)
  • Loads in <2 seconds on typical connection
  • Works in Chrome, Firefox, Safari, Edge

Future Enhancements (Out of Scope for v1)

  • Multi-session dataset simulation (need more data)
  • Modal dialogs for reports
  • Settings panel (analysis parameters)
  • Undo/redo history
  • Export to CSV simulation
  • Light theme toggle