diff --git a/.superpowers/brainstorm/65824-1776701804/content/01-workflow-approach.html b/.superpowers/brainstorm/65824-1776701804/content/01-workflow-approach.html new file mode 100644 index 00000000..989e4b29 --- /dev/null +++ b/.superpowers/brainstorm/65824-1776701804/content/01-workflow-approach.html @@ -0,0 +1,71 @@ +

Publication Export: Overall Workflow

+

Before we dive into individual features, let's align on how these tools should fit together

+ +

You described 5 capabilities: preview, indicate, insets/lens, legend tuning, and column presets. The key question is: where does the user do all this?

+ +
+
+
A
+
+

Export Studio (Modal Panel)

+

Click "Export" → opens a dedicated full-screen modal with a live preview canvas on the left and controls on the right. You add indicators, position insets, adjust legend, pick layout preset — all in one place. The preview updates in real-time. When happy, hit "Download PNG/PDF".

+
+

Pros

    +
  • Clear separation: explore mode vs. publication mode
    • +
  • Preview matches final output exactly (WYSIWYG)
    • +
  • No clutter in the main exploration UI
    • +
  • Can show the figure at actual print dimensions
    • +
+

Cons

    +
  • Context switch — you leave the exploration view
    • +
  • If you want to change the data view, you have to go back
    • +
  • More code to build and maintain
    • +
+
+
+
+ +
+
B
+
+

Inline Tools + Side Preview

+

Tools (indicate, lens/inset) are available directly on the canvas during exploration. A collapsible side panel shows a live publication preview at chosen dimensions. You annotate on the canvas, and the preview reflects it. Toggle between explore and "pub mode" without leaving the page.

+
+

Pros

    +
  • Fluid — no context switch
    • +
  • Can explore data + build figure simultaneously
    • +
  • Annotations (arrows, insets) live on the canvas
    • +
+

Cons

    +
  • UI gets complex — more toolbar buttons, modes
    • +
  • Preview panel fights for screen space with legend/structure viewer
    • +
  • Harder to show true print dimensions inline
    • +
+
+
+
+ +
+
C
+
+

Hybrid: Inline Annotate → Export Studio Finalize

+

Add indicators and define inset regions directly on the canvas while exploring. When ready to export, click "Export" to open a focused Export Studio that shows the composed figure with legend, insets, and annotations already placed — you fine-tune positioning, pick layout/column preset, and download.

+
+

Pros

    +
  • Best of both: annotate in context, finalize in dedicated UI
    • +
  • Annotations feel natural (part of exploration)
    • +
  • Export Studio is simpler (just layout + polish)
    • +
  • Preview shows true output dimensions
    • +
+

Cons

    +
  • State must bridge between explore and studio
    • +
  • Two places where annotation state lives
    • +
+
+
+
+
+ +

+ My recommendation: Option C (Hybrid). Annotating while you can see your data in context is more natural. The export studio then becomes a focused "compose & export" step — not a full editing suite. It's also the most incremental to build: inline tools first, studio later. +

diff --git a/.superpowers/brainstorm/65824-1776701804/content/02-export-studio-mockup.html b/.superpowers/brainstorm/65824-1776701804/content/02-export-studio-mockup.html new file mode 100644 index 00000000..373a4357 --- /dev/null +++ b/.superpowers/brainstorm/65824-1776701804/content/02-export-studio-mockup.html @@ -0,0 +1,342 @@ + + + + + +Export Studio Mockup + + + + +
+

Export Studio

+ Preview + Mockup — not functional +
+ +
+ +
+
+
Double Column — 183 × 120 mm @ 300 DPI
+ +
+ +
+ + + +
+
P0DM09
+
+
+
+ + +
+ +
2× Kunitz cluster
+
+ + + + + + + +
+ + +
+

Venom Family

+
3FTx
+
PLA2
+
Kunitz
+
SVMP
+
SVSP
+
CRiSP
+
LAAO
+
Other (4)
+
+ +
183 × 120 mm
+
+
+ + +
+ +
+

Layout Preset

+
+
+
Single Col
+
89 mm
+
+
+
Double Col
+
183 mm
+
+
+
Full Page
+
183 × 247 mm
+
+
+
Native
+
screen px
+
+
+
Freeform
+
custom W × H
+
+
+
+ + +
+

Legend

+
+
+ Show legend +
+
+ + Right +
+
+ + 22% +
+ +
+ + 1.0× +
+ +
+ + 1 +
+
+ + +
+

Indicators

+
+ ↗ +
P0DM09 — Kunitz-2
+
+

Right-click a point on canvas to add

+
+ + +
+

Insets

+
+
+
+
Kunitz cluster
2× zoom · 120×90 px
+
+
+

+ + Add inset: frame → snap → position +

+
+ + ■ Rectangle +
+
+ + +
+

Output

+
+ + + White + +
+
+ + 300 +
+
+ + PNG +
+
+ + +
+ + +
+
+
+ + + + + diff --git a/.superpowers/brainstorm/65824-1776701804/content/03-inline-canvas-mockup.html b/.superpowers/brainstorm/65824-1776701804/content/03-inline-canvas-mockup.html new file mode 100644 index 00000000..84b94040 --- /dev/null +++ b/.superpowers/brainstorm/65824-1776701804/content/03-inline-canvas-mockup.html @@ -0,0 +1,323 @@ + + + + + +Inline Canvas Annotation Mockup + + + + +
+
1. Right-Click Menu
+
2. Indicator Added
+
3. Inset: Frame
+
4. Inset: Snap
+
5. Inset: Position
+
+ + +
+
Explore view — user right-clicks a point
+
+ + + +
+ + +
+
P0DM09
+
Kunitz-type protease inhibitor 2
+
Kunitz
+
+ + +
+
+ ↗ + Indicate +
+
+ ◻ + Select +
+
+
+ 🔍 + Add inset here + I +
+
+
+ 📋 + Copy ID + ⌘C +
+
+ 🔗 + View in UniProt +
+
+
+
+ + +
+
After clicking "Indicate" — arrow placed at point
+
+ + + +
+
P0DM09
+
+
+
+ +
+ Arrow stays fixed size at any zoom · Drag to reposition · Del to remove +
+
+
+ + +
+
Inset tool — Step 1: Navigate & frame the region
+
FRAMING
+
+ + + +
+
Inset region — scroll to zoom, drag to pan
+
+ +
+ Zoom into the cluster you want · Adjust the frame · Press Enter or click Snap to lock +
+
+
+ + +
+
Inset tool — Step 2: Content locked
+
SNAPPED ✓
+
+ + + + + + + +
Content locked — now drag to position the inset
+ + +
+ +
+
Kunitz cluster · 2.4×
+
+ +
+ Drag the inset to position it · Corner handle to resize · Esc to cancel · Enter to confirm +
+
+
+ + +
+
Inset tool — Step 3: Positioned & confirmed
+
+ + + + + + + + + + +
+ +
Kunitz cluster · 2.4×
+
+ + +
+
P0DM09
+
+
+
+ +
+ Annotations saved · Open Export Studio to compose the final figure +
+
+
+ + + + + diff --git a/.superpowers/brainstorm/65824-1776701804/state/server-stopped b/.superpowers/brainstorm/65824-1776701804/state/server-stopped new file mode 100644 index 00000000..5e2be0e6 --- /dev/null +++ b/.superpowers/brainstorm/65824-1776701804/state/server-stopped @@ -0,0 +1 @@ +{"reason":"idle timeout","timestamp":1776704684121} diff --git a/.superpowers/brainstorm/65824-1776701804/state/server.log b/.superpowers/brainstorm/65824-1776701804/state/server.log new file mode 100644 index 00000000..c6769cca --- /dev/null +++ b/.superpowers/brainstorm/65824-1776701804/state/server.log @@ -0,0 +1,5 @@ +{"type":"server-started","port":54259,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:54259","screen_dir":"/Users/jcoludar/CascadeProjects/SpeciesEmbedding/externals/protspace_web/.superpowers/brainstorm/65824-1776701804/content","state_dir":"/Users/jcoludar/CascadeProjects/SpeciesEmbedding/externals/protspace_web/.superpowers/brainstorm/65824-1776701804/state"} +{"type":"screen-added","file":"/Users/jcoludar/CascadeProjects/SpeciesEmbedding/externals/protspace_web/.superpowers/brainstorm/65824-1776701804/content/01-workflow-approach.html"} +{"type":"screen-added","file":"/Users/jcoludar/CascadeProjects/SpeciesEmbedding/externals/protspace_web/.superpowers/brainstorm/65824-1776701804/content/02-export-studio-mockup.html"} +{"type":"screen-added","file":"/Users/jcoludar/CascadeProjects/SpeciesEmbedding/externals/protspace_web/.superpowers/brainstorm/65824-1776701804/content/03-inline-canvas-mockup.html"} +{"type":"server-stopped","reason":"idle timeout"} diff --git a/.superpowers/brainstorm/65824-1776701804/state/server.pid b/.superpowers/brainstorm/65824-1776701804/state/server.pid new file mode 100644 index 00000000..5feb5425 --- /dev/null +++ b/.superpowers/brainstorm/65824-1776701804/state/server.pid @@ -0,0 +1 @@ +65855 diff --git a/app/index.html b/app/index.html index 85c30ed5..5d8ec3d7 100644 --- a/app/index.html +++ b/app/index.html @@ -31,6 +31,13 @@ + + + +