feat: Implement modern navbar and add new theme styles - #18
Open
cauliyang wants to merge 48 commits into
Open
Conversation
cauliyang
commented
Oct 6, 2025
cauliyang
commented
Owner
- Revamped the navbar with a modern design, including gradient branding and icon integration.
- Updated mobile toggle functionality to use Bootstrap's data attributes.
- Introduced a new CSS file for the modern theme, featuring a glassmorphism effect and a comprehensive color palette inspired by the Aurora Borealis.
- Enhanced navbar links with icons for improved user experience.
- Added responsive design elements and hover effects for interactive components.
- Revamped the navbar with a modern design, including gradient branding and icon integration. - Updated mobile toggle functionality to use Bootstrap's data attributes. - Introduced a new CSS file for the modern theme, featuring a glassmorphism effect and a comprehensive color palette inspired by the Aurora Borealis. - Enhanced navbar links with icons for improved user experience. - Added responsive design elements and hover effects for interactive components.
- Introduced a GitHub Actions workflow for automatic preview deployments of pull requests. - Added a section in the README to inform users about the new PR preview feature. - Created a detailed setup guide for configuring automated previews using GitHub Pages, Vercel, and Netlify. - Included instructions for testing and troubleshooting the preview setup.
🚀 Preview deployed!✨ Your changes are live at: https://yangyangli.top/aurora/pr-18/
The preview will be updated automatically when you push new commits to this PR. |
- Modified the build command to ensure the public URL matches the main site structure. - Updated the preview URL format to include the 'aurora' path for better organization. - Replaced the previous cleanup action with a custom script to remove PR preview directories on closure, enhancing control over the cleanup process.
There was a problem hiding this comment.
Pull Request Overview
This PR implements a modern design overhaul for the Aurora application, featuring a glassmorphism-inspired theme and enhanced user interface components.
- Introduces a comprehensive modern theme with Aurora Borealis-inspired color palette and glassmorphism effects
- Revamps the navbar with gradient branding, icon integration, and improved mobile responsiveness
- Sets up automated PR preview deployment system with GitHub Actions
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/modern-theme.css | New comprehensive CSS theme file with Aurora color palette, glassmorphism effects, and modern component styling |
| src/app.html | Updated navbar structure with modern design, Bootstrap data attributes, and icon integration |
| docs/PR_PREVIEW_SETUP.md | New documentation guide for setting up automated PR preview deployments |
| README.md | Added section about automatic PR preview functionality |
| .github/workflows/preview.yml | New GitHub Actions workflow for automated PR preview deployments |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| .hr { | ||
| border: none; | ||
| height: 1px; | ||
| background: linear-gradient( 90deg, transparent, var(--aurora-primary), transparent); |
There was a problem hiding this comment.
Remove extra space before '90deg' in the linear-gradient function.
| if: github.event.action != 'closed' | ||
| run: | | ||
| # Build with PR-specific public URL - MUST match your main site structure | ||
| npm run build -- --public-url /aurora/pr-${{ github.event.pull_request.number }}/ |
There was a problem hiding this comment.
The hardcoded '/aurora/' path may not work for all repository names. Consider using the repository name dynamically with '${{ github.event.repository.name }}' or make this configurable.
| with: | ||
| script: | | ||
| const prNumber = context.payload.pull_request.number; | ||
| const previewUrl = `https://yangyangli.top/aurora/pr-${prNumber}/`; |
There was a problem hiding this comment.
The hardcoded domain 'yangyangli.top' and path '/aurora/' should be configurable or derived from repository settings to make this workflow reusable across different repositories.
- Implemented keyboard navigation support for the help guide, allowing users to navigate through steps using arrow keys and escape to close. - Updated tooltip content to include a progress bar and keyboard shortcuts for improved user experience. - Moved help guide styles to a dedicated CSS file for better organization and applied a modern glassmorphism design. - Removed inline styles from JavaScript and consolidated them into the new help-guide.css file for maintainability.
- Added a new CSS file for graph canvas styles, implementing a modern, dynamic design with an aurora theme. - Updated app.html to include the new graph-canvas.css stylesheet. - Moved existing graph container styles from modern-theme.css and app.css to the new file for better organization and maintainability. - Enhanced the canvas with multi-layer gradients, animations, and responsive design elements.
- Deleted igv.html and related igv.js files as the IGV browser feature is no longer needed. - Updated app.html to remove references to the IGV button and adjusted the button group label for clarity. - Cleaned up package.json by removing the igv.html entry from the source array. - Enhanced event handler scripts for better readability and consistency in style. - Updated help guide to remove IGV-related instructions.
- Introduced a new CSS file for footer styles, enhancing the visual design with glassmorphism and an aurora theme. - Updated app.html to include the new footer.css stylesheet and simplified the footer structure for better maintainability. - Implemented responsive design elements and accessibility features for improved user experience.
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 15 out of 15 changed files in this pull request and generated 8 comments.
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| .hr { | ||
| border: none; | ||
| height: 1px; | ||
| background: linear-gradient( 90deg, transparent, var(--aurora-primary), transparent); |
There was a problem hiding this comment.
[nitpick] Remove extra space after the opening parenthesis in the linear-gradient function for consistency with other gradient declarations in the file.
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.3), transparent); |
There was a problem hiding this comment.
[nitpick] Remove extra space after the opening parenthesis in the linear-gradient function for consistency with other gradient declarations.
| left: -50%; | ||
| width: 200%; | ||
| height: 200%; | ||
| background: radial-gradient( circle at 50% 50%, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.05) 30%, transparent 60%); |
There was a problem hiding this comment.
[nitpick] Remove extra space after the opening parenthesis in the radial-gradient function for consistency.
| } | ||
|
|
||
| [data-theme="dark"] #cy::before { | ||
| background: radial-gradient( circle at 50% 50%, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 30%, transparent 60%); |
There was a problem hiding this comment.
[nitpick] Remove extra space after the opening parenthesis in the radial-gradient function for consistency.
| left: -10%; | ||
| width: 120%; | ||
| height: 200%; | ||
| background: radial-gradient( ellipse at center, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 30%, transparent 70%); |
There was a problem hiding this comment.
[nitpick] Remove extra space after the opening parenthesis in the radial-gradient function for consistency.
| transform: translateX(-50%); | ||
| width: 200px; | ||
| height: 1px; | ||
| background: linear-gradient( 90deg, transparent, rgba(99, 102, 241, 0.5), transparent); |
There was a problem hiding this comment.
[nitpick] Remove extra space after the opening parenthesis in the linear-gradient function for consistency.
| left: 0; | ||
| width: 100px; | ||
| height: 100px; | ||
| background: radial-gradient( circle at bottom left, rgba(99, 102, 241, 0.15), transparent 70%); |
There was a problem hiding this comment.
[nitpick] Remove extra space after the opening parenthesis in the radial-gradient function for consistency.
| right: 0; | ||
| width: 150px; | ||
| height: 150px; | ||
| background: radial-gradient( circle at top right, rgba(139, 92, 246, 0.12), transparent 70%); |
There was a problem hiding this comment.
[nitpick] Remove extra space after the opening parenthesis in the radial-gradient function for consistency.
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 15 out of 15 changed files in this pull request and generated 6 comments.
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| left: -50%; | ||
| width: 200%; | ||
| height: 200%; | ||
| background: radial-gradient( circle at 50% 50%, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.05) 30%, transparent 60%); |
There was a problem hiding this comment.
Extra space after opening parenthesis in radial-gradient function.
Suggested change
| background: radial-gradient( circle at 50% 50%, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.05) 30%, transparent 60%); | |
| background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.05) 30%, transparent 60%); |
| } | ||
|
|
||
| [data-theme="dark"] #cy::before { | ||
| background: radial-gradient( circle at 50% 50%, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 30%, transparent 60%); |
There was a problem hiding this comment.
Extra space after opening parenthesis in radial-gradient function.
Suggested change
| background: radial-gradient( circle at 50% 50%, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 30%, transparent 60%); | |
| background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 30%, transparent 60%); |
| left: -10%; | ||
| width: 120%; | ||
| height: 200%; | ||
| background: radial-gradient( ellipse at center, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 30%, transparent 70%); |
There was a problem hiding this comment.
Extra space after opening parenthesis in radial-gradient function.
Suggested change
| background: radial-gradient( ellipse at center, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 30%, transparent 70%); | |
| background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 30%, transparent 70%); |
| transform: translateX(-50%); | ||
| width: 200px; | ||
| height: 1px; | ||
| background: linear-gradient( 90deg, transparent, rgba(99, 102, 241, 0.5), transparent); |
There was a problem hiding this comment.
Extra space after opening parenthesis in linear-gradient function.
Suggested change
| background: linear-gradient( 90deg, transparent, rgba(99, 102, 241, 0.5), transparent); | |
| background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.5), transparent); |
| left: 0; | ||
| width: 100px; | ||
| height: 100px; | ||
| background: radial-gradient( circle at bottom left, rgba(99, 102, 241, 0.15), transparent 70%); |
There was a problem hiding this comment.
Extra space after opening parenthesis in radial-gradient function.
Suggested change
| background: radial-gradient( circle at bottom left, rgba(99, 102, 241, 0.15), transparent 70%); | |
| background: radial-gradient(circle at bottom left, rgba(99, 102, 241, 0.15), transparent 70%); |
| right: 0; | ||
| width: 150px; | ||
| height: 150px; | ||
| background: radial-gradient( circle at top right, rgba(139, 92, 246, 0.12), transparent 70%); |
There was a problem hiding this comment.
Extra space after opening parenthesis in radial-gradient function.
Suggested change
| background: radial-gradient( circle at top right, rgba(139, 92, 246, 0.12), transparent 70%); | |
| background: radial-gradient(circle at top right, rgba(139, 92, 246, 0.12), transparent 70%); |
- Remove ~190 lines of dead/conflicting CSS from app.css: - body font-family Roboto (conflicts with modern-theme Inter) - .btn hover/transition (conflicts with modern-theme variants) - .btn-upload (unused, upload is icon-based) - header background (old landing page, unused) - @Keyframes pulse (name collision with modern-theme) - .igv-container (IGV feature removed) - .navbar height:25px (clips modern glassmorphism navbar) - .toolbar-responsive block (duplicated in modern-theme) - #helpGuideButton tooltip (replaced by component CSS) - #info/#walks/#walks-header (fully covered by modern-theme) - Restore essential html/body { height:100%; margin:0 } for layout - Fix #cy.empty display:flex → position:relative (Cytoscape needs block display) - Add toolbar structural CSS classes (toolbar-select, toolbar-number-input, etc.)
- Reorganize toolbar into 5 semantic groups (File, View, Layout, Filter, Tools) - Remove 9 inline style attributes, replace with CSS classes - Remove 4 redundant stylesheet imports from app.html head: - style.css (1208-line Uisual template, unused in app) - Bootstrap CSS CDN (duplicate of SCSS-compiled Bootstrap) - Bootstrap Icons CDN v1.10.5 (duplicate of v1.11.3 in styles.scss) - style.css preload - Fix 'Radom Layout' → 'Random Layout' typo - Add graph canvas empty state on page load (No Graph Loaded message) - Add loading class toggling in loadGraphDataFromServer() - Replace graphSelectorContainer inline display with Bootstrap d-none class
- Replace Uisual template with Aurora-themed design using modern-theme.css - Add hero section with animated aurora gradient background - Add glassmorphism feature cards (Graph Viz, JSON Editor, Panels, Gene Annotation) - Add testimonial section with glass card - Add CTA section with glow button - Reuse app footer design for consistency - Create landing.css (4KB) replacing style.css (25KB Uisual template) - Fix typos: 'Visulize' → 'Visualize', 'platfor.' → 'platform' - Remove Lorem ipsum placeholder text - Update copyright 2023 → 2025 - Replace all placeholder '#' links with real anchors - Add responsive breakpoints and prefers-reduced-motion support
…variables - Rewrite displayElementInfo() with compact flat layout, delete addInfoPanelStyles() (~430 lines removed) - Create info-panel.css with Aurora CSS variables for all info panel states - Compact navbar padding, brand font-size, button/toolbar spacing in modern-theme.css - Replace heavy 3-column footer with minimal single-line .footer-minimal in app.html - Add .footer-minimal class to footer.css - Migrate jsoneditor-custom.css from hardcoded colors to Aurora CSS variables - Populate gene-annotations.css with Aurora-themed styles for annotation cards/tables - Add info panel empty state placeholder in app.html
- Narrow toolbar filter inputs: reduce number input width to 56px, compact label font-size (0.75rem) and padding for MinEdge/MinDepth/MaxDepth - Give info panel more breathing room: increase section padding, font sizes, label sizes (0.625rem->0.7rem), row padding (3px->5px), card body/header padding, metric chip and position grid spacing - Fix app footer visibility: scope landing-page footer styles to footer:not(.footer-minimal) so pseudo-elements and dark gradient don't bleed into .footer-minimal; restyle .footer-minimal with dark aurora gradient matching the landing page theme - Update copyright year to 2026 in app.html and index.html
- Make default card-header neutral (bg-secondary + text-primary) so gene annotation headers are readable; add .card-header-accent for the exon card's purple gradient header - Change section dividers from --border-color-light (#f1f5f9, nearly invisible) to --border-color (#e2e8f0) for clear visual separation - Remove redundant .bg-light override from gene-annotations.css
- Change .footer-minimal from position: relative to position: fixed with bottom: 0, left: 0, right: 0 so it always stays at the viewport bottom - Add padding-bottom: 36px to body so content is not hidden behind the fixed footer
- Replace <form> with <div> for the upload button container — the form element's action='/upload' endpoint is unused (file handling is client-side), and .btn overflow:hidden on the form could interfere with the label-to-file-input click mechanism - Reset file input value after each upload (event.target.value = '') so the change event fires even when re-uploading the same file
- Fix 27 instances of spaced optional chaining (? . → ?.) across eventHandlers.js (26) and jseditor.js (1) — invalid JS syntax that only worked because Parcel auto-corrected it during bundling - Replace native alert() with window.showAlert?.() in graph.js for min/max depth validation — avoids blocking the UI thread - Fix JPG export transparent bg bug where ternary always evaluated to #ffffff regardless of checkbox state
- Disconnect ResizeObserver on exon modal close, store ref on container
element to avoid accumulating observers across modal re-opens
- Use { once: true } on shown.bs.modal and hidden.bs.modal listeners
to prevent stacking event handlers
- Clone export SVG button before adding listener to remove old handlers
- Clone graph selector before adding change listener to deduplicate
handlers when loading multiple TSG files
Replace ~40 hardcoded hex colors across JS and CSS files with Aurora design system CSS variables for consistent theming: - exonVisualization.js: #f9f9f9, #333, #555, #28a745, #dc3545, #6366f1, #4f46e5 → var(--bg-secondary), var(--text-primary), var(--success), var(--error), var(--aurora-primary) etc. - graph.js addWalksStyles(): all 20+ walk highlight colors - tooltip.js, helpGuide.js, eventHandlers.js, loadingIndicator.js: #007bff, #28a745, #6c757d → Aurora semantic variables - graph-canvas.css: #f8fafc, #e2e8f0, #f0f4f8 → var(--bg-*) - help-guide.css: kbd element grays → var(--bg-tertiary) etc. - app.css: #333, #e4e4e4, #555, #ff7f0e → Aurora variables SVG attribute colors in D3 (.attr calls) left as hex since CSS variables don't resolve in SVG attributes.
- Delete style.css (1,208 lines of orphaned CSS never imported by HTML) - Remove dead HTML: Dashboard/Project nav links, #liveAlertPlaceholder, #annotateNowBtn button - Remove dead CSS selectors: .glass-panel, .walk-item, .hr, .graph-stats, .graph-stats-item, pre.expanded, .file-upload-container, #selectedFileName, .clickable, duplicate #jsoneditor height rule, duplicate footer::after pseudo-element - Fix @Keyframes conflicts: rename help-guide.css fadeIn → fadeInSimple and shimmer → shimmerSlide to avoid overriding modern-theme.css animations (body.fade-in translateY was broken) - Remove dead JS: toHashIdentifier() (never called), window.displayWalks assignment (displayWalks not in scope), handleAuroraIdsFileUpload guard (always false) in both graphSetup.js and eventHandlers.js - Remove ~50 console.log statements across all JS files; keep console.error and console.warn for legitimate error reporting
- Add <main> wrapper in app.html for semantic structure - Add aria-labelledby to JSON editor modal - Add tabindex="0" to upload button div for keyboard access - Add aria-label to layout select and graph select dropdowns - Add ARIA attributes to landing page navbar toggler - Update <title> to 'Aurora — Graph Visualization' - Add font-weight 600 to Google Fonts import for Inter - Unify brand icon to bi-lightning-charge-fill on both pages - Replace fab fa-github with bi bi-github (3 instances in HTML) - Replace fas fa-spinner with Bootstrap 5 native spinner in geneAnnotation.js for consistent icon usage
- Scope h3 styling (font-size: 14px, border-bottom, color) from
global to #info and #walks containers only, preventing leaks
into landing page, modals, and other components
- Remove .container { padding: 20px } override that conflicted
with Bootstrap's responsive container padding (HTML already
uses container-fluid with p-3)
Replace the label-for-input pattern with a proper <button> that programmatically triggers the hidden file input via JS click(). The previous approach relied on <label for='uploadInput'> inside a <div class='btn'>, but .btn's overflow:hidden + position:relative + ::before pseudo-element (ripple effect in modern-theme.css) intercepted clicks before they reached the label→input delegation. - app.html: replace div+label wrapper with a plain <button#uploadBtn> - eventHandlers.js: add click handler on #uploadBtn → #uploadInput.click() - helpGuide.js: fix stale #uploadForm target → #uploadBtn
Add align-items-center to navbar-nav so the plain text nav links (Features, GitHub) and the button-styled Launch App link sit at the same vertical center despite having different padding from the .btn-sm class.
Update all user-facing text to use the correct terminology 'Transcript Segment Graph' (TSG): - index.html: meta description, hero heading, subtitle, CTA, footer - graph.js: empty state placeholder text Also add ms-2 margin before the Launch App button in the landing page navbar to separate it from the GitHub link.
Landing footer: - Replace verbose 3-column layout (About, Quick Links, Connect) with a compact centered block: tagline + social icons + copyright - Reduces footer HTML from ~50 lines to ~15 lines Release notes: - Update from v1.1.0 (2025-04-08) to v1.2.0 (2026-03-12) - List current features: Aurora theme, redesigned UI, accessibility, unified icons, help guide, CSS variable system - List current fixes: upload button, optional chaining, memory leaks, CSS leaks, animation conflicts, dead code removal - Use Aurora gradient on release notes modal header
- Rewrite all 18 help step descriptions to be concise (1-2 sentences) and user-friendly with clear action-oriented language - Consolidate 3 separate filter steps (MinEdge, MinDepth, MaxDepth) into 1 step targeting .toolbar-filter-group (20 → 18 steps) - Auto-skip hidden elements: when graphSelectorContainer has d-none, the guide skips forward (or backward) instead of highlighting an invisible element. Uses direction-aware skipping for both next and previous navigation - Update welcome toast: friendlier copy, show keyboard shortcuts (arrow keys, Esc), use rocket icon for Start Tour button - Migrate welcome toast hardcoded colors (#f8f9fa, #dee2e6) to Aurora CSS variables with fallbacks - Use correct terminology: Transcript Segment Graph
- Update project description: Transcript Segment Graph (not Splice) - List all current features: layouts, gene annotation, walk discovery, Aurora ID search, JSON editor, node ranking, help guide, modern UI - Fix dev server URL from localhost:3000 to localhost:1234 (Parcel) - Replace dead tech references (React, Material UI, Refine) with actual tech stack table (Cytoscape.js, Parcel, Bootstrap 5, D3.js, WASM tsg_core, SCSS) - Add prerequisites, sample data section, and usage workflow - Add centered logo and navigation links (docs, changelog, issues) - Keep contributing section with PR preview info - Fix license reference to GPLv3 (matches LICENSE file)
Replace peaceiris/actions-gh-pages with a script-based deploy in deploy.yml that surgically cleans root-level build artifacts while preserving pr-* preview directories on gh-pages. Add a shared concurrency group to both workflows to prevent race conditions between main deploys and preview deploys. Upgrade actions/checkout and actions/setup-node from v3 to v4.
Updates user-facing brand references in README, HTML titles, navbar, page descriptions, release notes modal, help guide welcome toast, and Python script docstring. Renames npm package name to gtaviz. Internal feature naming (Aurora ID), CSS variables (--aurora-*), JS identifiers, /aurora/ build path, and GitHub repo URLs are left unchanged to avoid breaking functionality.
Add a publication-quality Circos-style modal that visualizes every filtered TSG edge as a directional chord ribbon between its two genomic breakpoints, anchored to the full hg38 karyotype. Key features: - Hybrid breakpoint parsing: prefer edge.breakpoints field, fallback to source.ref_end -> target.ref_start with INTRA/INTER inference - Directional dedup by (chr1,pos1,chr2,pos2,svType) with per-SVTYPE perpendicular offset so co-located different-SVTYPE edges fan apart - Distinct color per SV type (INV/DEL/DUP/TRA/ITTL/ITPL/ICTL/ICRL) - Cubic Bezier ribbons with per-chord directional gradient strokes, drop shadows, staggered entry animation - Legend chips filter ribbons + count badges by SV type - Group/Expand toggle: dedup grouping (default) or fan-out per edge - 'x N' count badges with radial-gradient fill for merged groups - Click ribbon to focus + select the edge on the cytoscape graph - SVG export - Edge info panel: new Breakpoints section with chr/pos/SVTYPE + 'View on Circle Plot' shortcut Uses D3 v7 primitives only (no circos library — avoids version conflicts with the D3 already loaded by exonVisualization.js). Statically imported to avoid stale dynamic-chunk failures after Parcel dev-server restarts.
Update all user-visible references to "Aurora ID" / "Aurora IDs" so
they align with the GTAViz brand name. Internal identifiers (JS
variables, function names, CSS classes, DOM element IDs,
data-aurora-id attributes, and the aurora_release_notes_seen
localStorage key) are kept as-is to avoid breakage and to preserve
existing release-notes seen-state for users.
Touched strings:
- app.html: walks panel placeholder + aria-label
- scripts/graph.js: walks panel placeholder/aria-label, batch search
alerts ("Searching for N ... IDs", "Processing ... IDs file",
"No ... IDs found", "Found N ... IDs"), error log message,
walk card button title ("Copy GTAViz ID") and label
("GTAViz ID:"), inline comments, JSDoc for getWalkAuroraId
- scripts/helpGuide.js: 3 tour step descriptions
- scripts/eventHandlers.js: comment for upload handler
- package.json: 1.1.1 -> 1.2.0 - releaseNotes.js: update date to 2026-06-18 and prepend new entries highlighting the breakpoint circle plot, the GTAViz ID rename, the edge info panel breakpoints section, distinct SV-type colors, legend-badge sync fix, and static-import stale-chunk fix
Run `git cliff --tag v1.2.0 --output CHANGELOG.md` to roll up every conventional commit since v1.1.1 into a [1.2.0] - 2026-06-18 section. Highlights: - feat: breakpoint circle plot visualization for TSG edges - feat(ui): rename 'Aurora ID' -> 'GTAViz ID' - feat: modern export dialog with SVG support - feat: exon-level gene annotation with chromosome-indexed lookup - feat: NCBI RefSeq GTF support in extract_gene_exons.py - feat: PR preview deployment workflow - fix: gene-annotation header readability + section dividers - fix: memory leaks in exon modal and graph selector listeners - chore: rename project brand from Aurora to GTAViz
When multiple distinct (chr1,pos1,chr2,pos2) groups land on the same visible pixel on a chromosome arc — common for long chromosomes where genomic positions within a few kb map to <0.001 degree — they previously stacked into a single visible line, so a 5-group plot looked like 3. Add a pixel-binning pre-pass that detects endpoints landing on the same 4x4 px grid cell and assigns each colliding group a deterministic perpendicular offset. The result is combined with the existing SVTYPE-collision offset so both kinds of overlap fan visibly while preserving direction. Example: graphData.json's 7 chr8 edges dedup to 5 directional chords, 4 of which share pos1=62302403 and pos2 values within ~900 bp. Previously visible as ~3 ribbons; now renders as 5 fanned ribbons, the merged group still showing its x3 count badge.
Add an in-app "Global Analysis" tab that aggregates all graphs in a TSG/GTA file, bidirectionally linked to the single-graph view. - Per-graph summary table (row click loads + centers the graph) - Edge SV-type frequency and weight-distribution charts - All-edges circle plot across all graphs with grouped/expanded toggle and SV-type legend (reuses the breakpoint circos renderer) - Gene annotation across all graphs: gene frequency chart and cross-graph gene sharing summary - Circle-plot tooltips show source/target node genes (NEO when absent) and are now selectable for copying - Graph selector shows graph IDs parsed from TSG G-lines Also fixes circle-plot SVG def ID collisions (invisible chords) and unreadable modal title, and trims the release notes content.
- Trigger global analysis for single-graph JSON uploads (populate STATE.graph_jsons) - Re-render the dashboard and reset gene panels after a new file upload; strengthen the aggregation cache key to avoid stale results - Hide the graph-view tooltip when switching to the Global Analysis tab - Enlarge the gene frequency chart fonts and figure - Publication-grade bar colors (gradients, gridlines) for the SV-type and edge-weight charts
- Add MinJSR edge filter (junction support reads) to the toolbar and DFS,
reading edge.data('jsr') with fallback to 'sr'/'weight' until the WASM
emits a dedicated field (see docs/JSR_WASM_INTEGRATION.md)
- Fix slow/stuck loading on large (7000+ graph) files: async chunked
aggregation with progress, virtualized summary table, sampled scatter,
and deferred circle plot; finally-based loading hide + .gta parity
- Add global analysis parameters panel to filter which graphs are included
(min nodes/edges/weight/JSR, SV type, chromosome)
- Add per-graph max path length column (P-line primary, DFS fallback),
sortable numeric columns, and taller summary table
- Add CSV export in the summary panel and per-chart PNG export
- Fix chart card layout so x-axes are never clipped and the summary table
no longer overlaps the charts below (fixed-height cards, align-items:start)
Typing in the graph search box now narrows the native #graphSelect option list to only graphs whose ID fuzzy-matches the query (empty query restores all; no match shows a disabled placeholder). Also polishes the graph-search results dropdown positioning.
- "npm run dev": Parcel dev server on :3000 with live reload (development) - "npm run preview": serve the production dist/ build locally via a small Node static server (scripts/preview.js) so the build renders with correct asset paths instead of showing unstyled text
- Add a KPI overview strip (graphs, nodes, edges, paths, medians, SV types, chromosomes) at the top of the dashboard - Add Path Length Distribution chart (node count across all paths in all graphs) and Paths per Graph chart, both respecting the global filters - Parse per-graph path stats from raw P lines (all lengths + count), with a bounded source->sink enumeration fallback for graphs without P lines - Add path_count to the summary CSV export; register new charts with the resize observer and PNG export
Adds a circos-style density track just inside the chromosome ring showing how many breakpoint endpoints fall in each genomic bin (both ends of every breakpoint counted). Bins are ~200 genome-wide, length-proportional, colored per chromosome, with inward bars, a baseline ring, and per-bin tooltips. Ribbons are shifted inward so they don't collide with the track. Implemented in the shared renderCirclePlot, so both the Global Analysis dashboard and the single-graph Graph View modal get it; toggle via opts.showHitTrack (default on).
- Always defer the Global Analysis circle plot behind a "Render circle plot" button so the dashboard is instant regardless of file size (previously it drew eagerly below a breakpoint threshold, stalling mid-size files) - Gate the circle-plot renderer by ribbon count: skip the per-ribbon entry animation (getTotalLength reflow) above 150 ribbons and per-ribbon gradients above 400, so dense plots draw quickly while small plots keep the polish - Skip a redundant full dashboard re-render when the Global Analysis tab is re-shown with unchanged data + filters + sort, making repeated Graph View <-> Global Analysis switches instant; Refresh forces a redraw
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.