Interface Overview

Tour of the IMPACT-VIS user interface and controls

Authors

Affiliation

Nicholas Boehler

University of Toronto Mississauga

Hai-Ying Mary Cheng

University of Toronto Mississauga

Published

December 18, 2025

1 Main Interface Layout

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃  LEFT SIDEBAR   ┃                                 ┃
┃  ├─ Sample      ┃      MAIN PLOT AREA             ┃
┃  ├─ Settings    ┃      (Interactive Plot)         ┃
┃  ├─ Filters     ┃                                 ┃
┃  ├─ Tooltip     ┃                                 ┃
┃  └─ Export      ┃                                 ┃
┗━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

2 Left Sidebar Panels

2.1 Panel 1: Sample Input

Purpose: Select which sample to analyze

┌─────────────────────────────────┐
│ Current Sample                  │
├─────────────────────────────────┤
│ ▼ [test_sample          ]       │
│                                 │
│ (Auto-populated from            │
│  app/data directory)            │
└─────────────────────────────────┘

How it works:

Sample list is automatically populated from properly-named files in the app/data/ directory
Expected file naming pattern per sample:
- {SAMPLE_ID}_SNV_IMPACT.gds
- {SAMPLE_ID}_SNV_IMPACT.gds_variant_states.rds
- {SAMPLE_ID}_SV_IMPACT.tsv
- {SAMPLE_ID}_CNV_IMPACT.txt
- Default sample: Set via config.yml (default_sample_id); test_sample shown in example
- Refresh samples: Browser page refresh (F5) will reload the sample list from disk
- No manual data upload button; samples must be pre-loaded in app/data/

2.2 Panel 2: Plot Display

Purpose: Customize which variants and chromosomes are shown, and control visualization spacing

┌─────────────────────────────────┐
│ Plot Display (expandable)       │
├─────────────────────────────────┤
│ Select Chromosome:              │
│ ▼ [All                 ]        │
│   Options: All, 1-22            │
│                                 │
│ Top IMPACT Score SNV/Indels:    │
│ [====|────────] 1000            │
│ (Range: 0–2000)                 │
│                                 │
│ ☐ Override maximum             │
│    number plotted               │
│                                 │
│ ☑ Dynamic Y-axis scaling       │
│                                 │
│ Jitter Height:                  │
│ [──|────────────] 0.5           │
│ (Range: 0–5)                    │
└─────────────────────────────────┘

Control Descriptions:

Select Chromosome

Dropdown to filter variants to a specific chromosome or all chromosomes
Options: “All”, “1”, “2”, …, “22”
Default: “All” (displays whole-genome view)

Top IMPACT Score SNV/Indels

Slider limiting the maximum number of SNV/Indel variants displayed (GDS subplot)
Default: 1000 variants (reasonable balance between detail and performance)
Range: 0–2000
Note: Values > 2000 may cause the application to hang due to rendering overhead

Override maximum number plotted

Checkbox enabling manual increase beyond the slider maximum
Use with caution: larger datasets increase rendering time significantly
When enabled, slider max updates to reflect total variants in the current sample’s GDS file

Dynamic Y-axis scaling ✓ (enabled by default)

When ON: Y-axis automatically scales to fit displayed data
When OFF: Y-axis uses fixed scale (useful for comparing across sessions)

Jitter Height

Controls vertical jitter (random vertical offset) applied to variant points
Purpose: Allows users to resolve overlapping variants with similar IMPACT scores
Default: 0.5 (small jitter; variants appear separated for visual clarity)
Range: 0–5 (0 = no jitter, 5 = maximum spread)

2.3 Panel 3: Variant Filtering

Purpose: Filter variants by clinical significance, population frequency, and IMPACT severity

┌─────────────────────────────────────────┐
│ Variant Filtering (expandable)          │
├─────────────────────────────────────────┤
│ ▶ Quick Filters  │ Advanced Filters     │
├─────────────────────────────────────────┤
│ [Remove All Filters]                    │
│ [IMPACT Step 1]                         │
│ [IMPACT Step 2]                         │
│ [IMPACT Step 3]                         │
│ [IMPACT Step 4]                         │
│                                         │
│ Bravo Allele Frequency:                 │
│ [====|──────────────────] 0.05          │
│ (Range: 0.001–1.0)                      │
└─────────────────────────────────────────┘

2.3.1 Quick Filters Tab (Default)

Preset Filter Buttons:

Remove All Filters: Clears all active filters; displays all variants
IMPACT Step 1: Pre-configured ClinVar and ACMG-based filtering
- ClinVar terms: Pathogenic, Likely pathogenic
- ACMG Class: 4–5 (predicted pathogenic)
- Bravo AF: ≤ 1.0 (all frequencies)
IMPACT Step 2, 3, 4: Additional pre-configured filter sets per IMPACT methodology

Bravo Allele Frequency Slider:

Adjusts maximum population frequency threshold
Default: 0.05 (5%)
Range: 0.001–1.0
Filters in real-time as slider moves

2.3.2 Advanced Filters Tab

┌─────────────────────────────────────────┐
│ ▶ Quick Filters  │ Advanced Filters    │
├─────────────────────────────────────────┤
│ Select Filter Category:                 │
│ ▼ [ClinVar              ]               │
│                                         │
│ [Dynamic filter options appear below]   │
│                                         │
│ [Clear Filters]                         │
│                                         │
│ Active Filters:                         │
│ (Display of currently applied filters)  │
│                                         │
│ ☐ Show variants failing QC              │
│ ☐ Show user-selected variants           │
└─────────────────────────────────────────┘

Filter Categories (Dropdown):

ClinVar
Bravo AF
Genotype
Tier
VarInfo
Genes
ACMG Class
Gene-Disease Association

Dynamic Filter UI:

Changes based on selected category
Example: ClinVar category shows checkboxes for pathogenicity classifications

Active Filters Display:

Shows currently applied filters in a readable format
Allows quick review without switching tabs

Additional Options:

Show variants failing QC: Include variants that failed quality control checks
Show user-selected variants: Include variants manually flagged by the user in previous sessions

Clear Filters Button:

Resets all advanced filters to defaults

2.4 Panel 4: Tooltip Variables

Purpose: Control which variant details appear in interactive hover tooltips

┌──────────────────────────────────────┐
│ Tooltip Variables (collapsed)         │
├──────────────────────────────────────┤
│ ☑ VarInfo                            │
│ ☑ Genes                              │
│ ☑ Chromosome                         │
│ ☑ Position                           │
│ ☑ IMPACT Score                       │
│ ☐ IMPACT Calculation                 │
│ ☑ ClinVar                            │
│ ☑ ClinVar Disease                    │
│ ☑ REF                                │
│ ☑ ALT                                │
│ ☑ Bravo AF                           │
│ ☐ ALoFT Prediction                   │
│ ☐ ALoFT Score                        │
└──────────────────────────────────────┘

Available Tooltip Fields (Checkboxes):

VarInfo ✓ (default ON): Variant information/ID
Genes ✓ (default ON): Gene name(s) affected
Chromosome ✓ (default ON): Chromosome location
Position ✓ (default ON): Genomic position
IMPACT Score ✓ (default ON): IMPACT severity score
IMPACT Calculation (default OFF): Details of IMPACT scoring methodology
ClinVar ✓ (default ON): ClinVar classification
ClinVar Disease ✓ (default ON): Associated disease from ClinVar
REF ✓ (default ON): Reference allele
ALT ✓ (default ON): Alternate allele
Bravo AF ✓ (default ON): Bravo population allele frequency
ALoFT Prediction (default OFF): ALoFT loss-of-function prediction
ALoFT Score (default OFF): ALoFT prediction score

Behavior: - Section is initially collapsed - Click to expand and modify selections - Selections persist across page refreshes (stored in session state) - Hover over plot points to see active tooltip fields

2.5 Panel 5: Export Results

Purpose: Download annotations and sample-specific variant states

┌──────────────────────────────────────┐
│ [Download Annotations]               │
│                                      │
│ (Under development)                  │
└──────────────────────────────────────┘

Current Functionality:

Download Annotations Button: Downloads user-saved annotations (variant notes, classifications, flags)
- Saves per-sample variant states stored in .gds_variant_states.rds files
- Exports as CSV for spreadsheet review
- Uses hidden download handler for browser download

Future Enhancements (Planned): - Plot export (PNG, SVG, PDF formats) - Filtered variant table export - Customizable resolution for raster formats

3 Interactive Plot Features

Hover: Move mouse over plot points

Point Details (Tooltip):
├─ VarInfo: 1-1234567-A-T
├─ Position: chr1:1,234,567
├─ Ref/Alt: A/T
├─ Gene: EXAMPLE
├─ IMPACT Score: 92.12
├─ ClinVar: Pathogenic
└─ AF: 0.001

Click: Open detailed variant modal

┌──────────────────────────────────────────────────────────────────┐
│ Variant: 1-1234567-0-2                                        X  │
├──────────────────────────────────────────────────────────────────┤
│ VarInfo:              1-1234567-A-T                              │
│ Genes:                EXAMPLE                                    │
│ Chromosome:           1                                          │
│ Position:             1234567                                    │
│ IMPACT Score:         92.12                                      │
│ IMPACT Calc:          Tier 1, 80 + 20 * 0.606                    │
│ ClinVar:              Pathogenic                                 │
│ ClinVar Disease:      Examplitus                                 │
│ REF:                  0                                          │
│ ALT:                  2                                          │
│ Bravo AF:             0.001                                      │
│ ALoFT Prediction:     (missing)                                  │
│ ALoFT Score:          NA                                         │
│                                                                  │
│ User variant interpretation                                      │
│ ┌────────────────────────────────────────────────────────────┐   │
│ │ Potential Candidate                                     ▼  │   │
│ └────────────────────────────────────────────────────────────┘   │
│                                                                  │
│ ┌────────────────────────────────────────────────────────────┐   │
│ │ Notes                                                      │   │
│ │                                                            │   │
│ │                                                            │   │
│ │                                                            │   │
│ │                                                            │   │
│ └────────────────────────────────────────────────────────────┘   │
│                                                                  │
│                                      [Save]           [Cancel]   │
└──────────────────────────────────────────────────────────────────┘

Zoom: Click + drag to select region

Pan: Shift + drag to move around

Reset: Double-click to return to full view

Note

Dark theme and customizable color schemes are not currently implemented. Custom styling can be applied via app/styles/main.scss (SCSS/CSS modifications).

4 Status Indicators

4.1 Plot Status

🟢 Green: Plot loaded successfully
🟡 Yellow: Plot updating or loading
🔴 Red: Error loading plot

4.2 Data Status

✓ Loaded: Data ready for display
⏳ Loading: Data being processed
✗ Error: Failed to load data

4.3 External Resources

Documentation: https://boehlernick.github.io/IMPACT-VIS
GitHub Issues: Report bugs
Email: nick.boehler@mail.utoronto.ca

Document Version: 1.0.0
Last Updated: 2025-12-10