galaxyproject / galaxyproject/loom

Orbit: side-by-side / compare view in the File tab (multiple panes for image+ comparison)

Open
#92 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
14
Forks
12
Avg merge
6d 5h
Merged PRs (30d)
17

Description

## Why

Real bioinformatics analysis routinely involves visual comparison: before/after QC plots, alignment views from two samples, multiple chromosome coverage tracks, the same metric from two pipeline variants. Today the File tab in the artifacts pane is single-slot — opening a second file replaces the first. Comparing means alt-tabbing between two viewer windows, screenshot-and-diff, or splitting the cwd across two Orbit instances.

A native side-by-side mode lets the user pin 2 (or up to 4) files into the artifact pane at once, with the same lifecycle the existing File tab already has (re-renders on \`files:changed\`, supports image / PDF / markdown / text).

## Sketch

\`\`\`
┌── Notebook | Activity | File [+] ─────────────────────────┐
│ ┌────────────────┐ ┌────────────────┐ │
│ │ before.png ✕ │ │ after.png ✕ │ │
│ │ ┌────────────┐ │ │ ┌────────────┐ │ │
│ │ │ ▓▓▓▓▓▓ │ │ │ │ ▓▓▓▓▓▓▓▓ │ │ │
│ │ │ ▓▓▓▓▓▓ │ │ │ │ ▓▓▓▓▓▓▓▓ │ │ │
│ │ └────────────┘ │ │ └────────────┘ │ │
│ └────────────────┘ └────────────────┘ │
└──────────────────────────────────────────────────────────┘
\`\`\`

Each pane is the existing File tab, just smaller. Per-pane: filename header, ✕ to remove, the existing read-only / editable / preview affordances unchanged.

## How a user would use it

- Open the first file via the file tree as today (lands in a single-pane view).
- A small **+** affordance on the File tab header (or right-click \"Open alongside\") puts the file tree click in *append* mode for the next selection.
- Or: keyboard — modifier-click a file in the tree (Cmd/Ctrl+click) to open alongside instead of replace.

Layout:
- 1 file → full pane (current behavior)
- 2 files → split horizontally (better for landscape plots, alignment tracks)
- 3-4 files → 2×2 grid (cap at 4; more than that defeats the point)
- Vertical-split toggle for tall content (sequence views, long markdown) — small icon in the File tab header

## Scope decisions to make

1. **Cap**: 2 or 4? Recommend 4 max with the 2×2 fallback layout, but ship 2 first if it's much simpler.
2. **Mixed types**: should image+image be allowed but image+PDF blocked? I'd allow any combination — the user knows what they're comparing. PDFs and notebooks side-by-side are also useful (e.g. compare two run reports).
3. **Open-alongside trigger**: right-click menu, header **+** button, or modifier-click? Right-click is most discoverable; modifier-click is quickest. Recommend both.
4. **Persistence**: do pinned files survive a renderer reload? I'd say yes, via \`localStorage\` keyed on cwd — but only the relPaths, not the bytes (they get re-read on reload).
5. **Editable panes**: text files in compare mode — read-only, or keep the editor? I'd keep editor active in the pane that was opened first; others read-only. Avoids two-way edit races. Not a hill to die on.

## Files

- \`app/src/renderer/files/file-viewer.ts\` — currently a single-instance class; refactor to render N panes inside the same container, each backed by a separate \`FileViewer\` (or extracted \`FileViewerPane\` sub-class).
- \`app/src/renderer/artifacts/artifact-panel.ts\` — File tab header gets the **+** button + the icon for vertical/horizontal toggle.
- \`app/src/renderer/files/files-panel.ts\` — modifier-click handler (Cmd/Ctrl+click) routes to a new \`onFileOpenAlongside\` callback in addition to the existing \`onFileOpen\`.
- \`app/src/renderer/styles.css\` — flex/grid layout for 1/2/3/4 pane modes.

## Out of scope

- **Diff view** for text files (paired highlighting). Genuinely useful but a separate feature; this issue is just \"both files visible at once\".
- **Synchronized scroll** between panes (e.g. for two BED files). Same — defer.
- **Compare-and-overlay** for images (e.g. blend modes for QC plot diffs). Same — defer.
- **Drag panes to reorder.** Probably nice; out of scope for v1.

## Verification

End-to-end smoke:

1. Open a fastp HTML report → renders alone in the File tab as today.
2. Cmd/Ctrl+click another fastp HTML report in the file tree → both render side-by-side, horizontally split.
3. ✕ on one pane → the other returns to full-width.
4. Open four PNG QC plots → 2×2 grid renders.
5. Edit a markdown file in pane 1, image in pane 2 → editor still works on pane 1, image refreshes when changed on disk.

## Related

- #58 (large-file head preview) — same area, same \`FileViewer\` class.
- #34 phase 4 (responsive layout) — pane breakpoints likely apply at the per-pane level once split.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.