Skip to content

3 User Interface Layer

Jump to bottom
coding man edited this page Nov 4, 2026 · 1 revision

User Interface Layer

Relevant source files

The following files were used as context for generating this wiki page:

The User Interface Layer provides the visual and interactive front-end for VariantScope, translating processed genetic and structural data into accessible visual representations. It is anchored by a static HTML shell (src/index.html:1-277), orchestrated by application bootstrap logic (src/main.js:1-619), and implemented via modular component scripts located in src/ui.

As a parent page, this section offers a high-level summary of the architectural layout, state flows, and component responsibilities. For deeper technical specifications, refer to the child pages:

graph TD
    subgraph "HTML Shell"
        Index["src/index.html"]
    end
    subgraph "Orchestration"
        Main["src/main.js"]
    end
    subgraph "UI Components"
        Viewer["src/ui/viewer3d.js"]
        Lollipop["src/ui/lollipop.js"]
        Table["src/ui/table.js"]
        Home["src/ui/home.js"]
        Cards["src/ui/cards.js"]
        Theme["src/ui/theme.js"]
    end
    Index --> Main
    Main --> Viewer
    Main --> Lollipop
    Main --> Table
    Main --> Home
    Main --> Cards
    Main --> Theme
Loading

Sources: src/index.html:1-277, src/main.js:1-619

3.1 Application Bootstrap and Orchestration

The application entry point src/main.js:1-619 initializes global styles, sets up event listeners, and manages the primary reactive loops of the application. It coordinates asynchronous gene searches via src/core/pipeline.js:1-19, handles panel loading, error, and partial states using src/ui/panels.js:1-1(), and synchronizes selection state across the 3D structure viewer, lollipop plot, and variant table.

For details, see Application Bootstrap and Orchestration.

Sources: src/main.js:1-619, src/core/pipeline.js:1-19

3.2 Visualization Components

VariantScope features multi-modal data visualizations that link protein structure, statistical distributions, and tabular variant records. The 3D structure viewer (src/ui/viewer3d.js:1-1()) wraps 3Dmol.js to render AlphaFold protein models colored by pLDDT confidence or variant density. The lollipop chart (src/ui/lollipop.js:1-1()) built on Chart.js plots variant positions along the protein sequence, while src/ui/table.js:1-73 provides a filterable, exportable data grid.

graph TD
    Selection["src/ui/selection.js"] -->|Syncs ID| Viewer["src/ui/viewer3d.js"]
    Selection -->|Syncs ID| Lollipop["src/ui/lollipop.js"]
    Selection -->|Syncs ID| Table["src/ui/table.js"]
    Viewer -->|Colors via| Palette["src/ui/palette.js"]
    Lollipop -->|Renders into| PlotElem["#plot DOM Node"]
    Table -->|Exports CSV| CSV["src/core/csv.js"]
Loading

Sources: src/main.js:69-73, src/ui/viewer3d.js:1-1, src/ui/lollipop.js:1-1, src/ui/table.js:1-73

For details, see Visualization Components.

Sources: src/main.js:45-52, src/ui/viewer3d.js:1-1, src/ui/lollipop.js:1-45, src/ui/table.js:1-73

3.3 Home Page, Library UI and Dialogs

When no gene is actively loaded, the home interface (src/ui/home.js:1-516) displays saved gene library cards, storage statistics, and hierarchical folder structures (available in desktop deployment targets). It implements drag-and-drop mechanics for gene organization, two-click confirmation patterns for data deletion (src/ui/home.js:23-45), and modal dialog utilities (src/ui/dialog.js:1-1()) supported by DOM manipulation helpers (src/ui/dom.js:1-1()).

For details, see Home Page, Library UI and Dialogs.

Sources: src/ui/home.js:1-516, src/ui/dom.js:1-1

3.4 Styling and Theming

The user interface design system is defined via CSS custom properties in src/styles/tokens.css:1-1(), layout rules in src/styles/base.css:1-1(), and component styles in src/styles/components.css:1-1(). Dark mode is managed dynamically through src/ui/theme.js:1-1(), which toggles theme attributes on the document root while adhering to accessibility contrast benchmarks.

For details, see Styling and Theming.

Sources: src/main.js:3-5, src/ui/theme.js:1-1

Content imported from DeepWiki.

VariantScope Wiki

Clone this wiki locally