Add subtle contextual video guides for the integrated viewer

.github/workflows/demos.yml

@@ -0,0 +1,30 @@
+name: Generate interaction demos
+
+on:
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+jobs:
+  record:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    steps:
+      - uses: actions/checkout@v7
+      - uses: actions/setup-node@v7
+        with:
+          node-version: '24'
+          cache: 'npm'
+      - run: npm ci
+      - run: npx playwright install --with-deps chromium
+      - name: Install VP9 encoder
+        run: sudo apt-get update && sudo apt-get install -y ffmpeg
+      - name: Record and verify demos
+        run: npm run demos
+      - uses: actions/upload-artifact@v7
+        if: always()
+        with:
+          name: varri-interaction-demos
+          path: output/playwright/
+          retention-days: 14

.github/workflows/test.yml

@@ -30,6 +30,7 @@ jobs:
         run: |
           npm run test:architecture
           npm run test:ci
+          npm run demos:check-published
 
       - name: Verify installed package contents
         run: npm run test:package
@@ -45,6 +46,9 @@ jobs:
           npm run test:pages
           npm run test:visual
 
+      - name: Record and verify interaction demos
+        run: npm run demos
+
       - name: Upload browser diagnostics
         if: failure()
         uses: actions/upload-artifact@v7

README.html

@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>vaRRI README</title>
   <link rel="icon" type="image/png" href="logo/vaRRI.logo.40x40.png">
+  <link rel="stylesheet" href="src/ui/styles/help-videos.css">
 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.5.1/github-markdown.min.css">
 

README.md

@@ -232,6 +232,16 @@ the classic bundle includes D3, and neither entry requires Vue or Fornac scripts
 
 The `src` directory provides a [detailed vaRRI Library API documentation](src/README.md)
 
+## Recording short interface demos
+
+In a source checkout, run `npm run demos` to create the 12 short WebM demonstrations
+used by the viewer guide and canvas interaction help. They cover input, selection,
+movement, rotation, annotations, position controls, sessions, and PNG export. Each clip
+has a poster, captions, a written transcript, and a preview-gallery entry. The
+[demo pipeline guide](https://github.com/BackofenLab/vaRRI/blob/main/recording/README.md)
+explains recording, review-gated publishing, size controls, adding scenes, and the
+manual GitHub Actions workflow.
+
 
 ---
 

doc/demos/add-point-mutation.vtt

@@ -0,0 +1,25 @@
+WEBVTT
+
+1
+00:00:00.000 --> 00:00:05.467
+Click Add in Point Mutations to annotate the supplied structure
+
+2
+00:00:05.467 --> 00:00:10.200
+Choose Seq. 2 for the second RNA strand
+
+3
+00:00:10.200 --> 00:00:14.933
+Enter biological position 102
+
+4
+00:00:14.933 --> 00:00:20.200
+Enter A in To for the replacement annotation
+
+5
+00:00:20.200 --> 00:00:26.267
+Click OK to add the G102A annotation
+
+6
+00:00:26.267 --> 00:00:35.800
+G102A adds a green outline and A label; inputs stay unchanged and no fold is predicted

doc/demos/add-region-highlight.vtt

@@ -0,0 +1,25 @@
+WEBVTT
+
+1
+00:00:00.000 --> 00:00:04.267
+Click Add in Region Highlights
+
+2
+00:00:04.267 --> 00:00:09.267
+Enter 1-2 for the first RNA strand
+
+3
+00:00:09.267 --> 00:00:14.867
+Enter 3-4 for its partner on the second RNA
+
+4
+00:00:14.867 --> 00:00:19.600
+Set opacity to 0.5 for a translucent highlight
+
+5
+00:00:19.600 --> 00:00:26.267
+Click OK to add the highlight to the drawing
+
+6
+00:00:26.267 --> 00:00:32.933
+The paired region is highlighted and listed on the left

doc/demos/add-subsequence-highlight.vtt

@@ -0,0 +1,25 @@
+WEBVTT
+
+1
+00:00:00.000 --> 00:00:04.267
+Click Add in Subsequence Highlights
+
+2
+00:00:04.267 --> 00:00:09.000
+Choose Seq. 2 for the second RNA strand
+
+3
+00:00:09.000 --> 00:00:13.733
+Enter biological range 102-103
+
+4
+00:00:13.733 --> 00:00:17.933
+Set opacity to 0.5
+
+5
+00:00:17.933 --> 00:00:23.733
+Click OK to add the highlight
+
+6
+00:00:23.733 --> 00:00:30.467
+The purple range is highlighted and listed

doc/demos/apply-probability-profile.vtt

@@ -0,0 +1,21 @@
+WEBVTT
+
+1
+00:00:00.000 --> 00:00:06.067
+Enter each nucleotide index and its probability for RNA 1.
+
+2
+00:00:06.067 --> 00:00:11.733
+Choose Start 1: indices are -2, -1, 1, 2, skipping zero.
+
+3
+00:00:11.733 --> 00:00:17.467
+Uncheck =1 so purple represents zero; higher values fade the overlay.
+
+4
+00:00:17.467 --> 00:00:24.667
+Click Apply to color RNA 1 using the probability profile.
+
+5
+00:00:24.667 --> 00:00:30.600
+Lower probabilities have stronger purple shading on RNA 1.

doc/demos/choose-example.vtt

@@ -0,0 +1,13 @@
+WEBVTT
+
+1
+00:00:00.000 --> 00:00:04.533
+Open Example to browse the built-in examples
+
+2
+00:00:04.533 --> 00:00:10.867
+Choose Mutations & highlighting
+
+3
+00:00:10.867 --> 00:00:18.800
+The inputs and figure include four mutations and a green highlight

doc/demos/export-png.vtt

@@ -0,0 +1,21 @@
+WEBVTT
+
+1
+00:00:00.000 --> 00:00:05.133
+Click PNG to choose image size and print density
+
+2
+00:00:05.133 --> 00:00:11.867
+Set width to 1200 pixels; height follows the aspect ratio
+
+3
+00:00:11.867 --> 00:00:18.600
+Set DPI to 300; the pixel dimensions stay the same
+
+4
+00:00:18.600 --> 00:00:23.667
+Click Export PNG to download the image
+
+5
+00:00:23.667 --> 00:00:29.533
+PNG downloaded: 1200 × 1008 pixels at 300 DPI

doc/demos/highlight-rri-background.vtt

@@ -0,0 +1,25 @@
+WEBVTT
+
+1
+00:00:00.000 --> 00:00:07.667
+Choose region: this dropdown controls automatic RRI backgrounds
+
+2
+00:00:07.667 --> 00:00:11.867
+Region adds one generated highlight: 1-5&1-5
+
+3
+00:00:11.867 --> 00:00:19.000
+Choose basepairs to separate the two paired stacks
+
+4
+00:00:19.000 --> 00:00:24.067
+Two generated highlights leave the unpaired A bases clear
+
+5
+00:00:24.067 --> 00:00:32.000
+Choose nothing to remove the automatic highlights
+
+6
+00:00:32.000 --> 00:00:39.467
+The generated entries and backgrounds are gone; the input is unchanged

doc/demos/highlight-rri-nucleotides.vtt

@@ -0,0 +1,17 @@
+WEBVTT
+
+1
+00:00:00.000 --> 00:00:06.867
+Choose region for RRI nucleotide highlighting
+
+2
+00:00:06.867 --> 00:00:13.733
+Region outlines all 10 nucleotides, including both unpaired A bases
+
+3
+00:00:13.733 --> 00:00:21.400
+Choose basepairs to outline only paired nucleotides
+
+4
+00:00:21.400 --> 00:00:30.667
+Basepairs outlines 8 nucleotides; both unpaired A bases lose the red outline

doc/demos/import-fasta.vtt

@@ -0,0 +1,17 @@
+WEBVTT
+
+1
+00:00:00.000 --> 00:00:04.533
+Open FASTA Data to import RNA records
+
+2
+00:00:04.533 --> 00:00:09.933
+Paste two FASTA records with sequences and structures
+
+3
+00:00:09.933 --> 00:00:15.600
+Check the parsed sequences, structures, and names
+
+4
+00:00:15.600 --> 00:00:24.000
+Click OK to render the imported RNA

doc/demos/linearize-rri-layout.vtt

@@ -0,0 +1,9 @@
+WEBVTT
+
+1
+00:00:00.000 --> 00:00:08.667
+With Force layout off, enable Linear horizontal RRI layout
+
+2
+00:00:08.667 --> 00:00:17.333
+Paired bases now form horizontal rails; Force layout stays off

doc/demos/move-selection.vtt

@@ -0,0 +1,13 @@
+WEBVTT
+
+1
+00:00:00.000 --> 00:00:06.400
+Ctrl / ⌘ + click to select nodes
+
+2
+00:00:06.400 --> 00:00:12.867
+Release Ctrl / ⌘, then drag either selected node
+
+3
+00:00:12.867 --> 00:00:19.600
+Both nodes keep their new positions; other nodes stay put

doc/demos/name-and-number-strand.vtt

@@ -0,0 +1,13 @@
+WEBVTT
+
+1
+00:00:00.000 --> 00:00:08.200
+Name the first strand Leader RNA, then press Enter
+
+2
+00:00:08.200 --> 00:00:16.067
+Set Start 1 to -2, then press Enter
+
+3
+00:00:16.067 --> 00:00:22.800
+Numbering skips zero between -1 and 1

doc/demos/place-text-annotation.vtt

@@ -0,0 +1,25 @@
+WEBVTT
+
+1
+00:00:00.000 --> 00:00:04.267
+Open the text annotation dialog
+
+2
+00:00:04.267 --> 00:00:09.267
+Enter Binding site as the annotation text
+
+3
+00:00:09.267 --> 00:00:13.800
+Turn on Bold to emphasize the label
+
+4
+00:00:13.800 --> 00:00:18.933
+Click OK to add the label to the list
+
+5
+00:00:18.933 --> 00:00:25.733
+The ? means unpositioned. Drag the label onto the drawing
+
+6
+00:00:25.733 --> 00:00:31.800
+The target icon confirms the label is positioned

doc/demos/rectangle-selection.vtt

@@ -0,0 +1,13 @@
+WEBVTT
+
+1
+00:00:00.000 --> 00:00:05.733
+Ctrl / ⌘ + click a node to start a selection
+
+2
+00:00:05.733 --> 00:00:13.333
+Ctrl / ⌘ + drag the background around two other nodes
+
+3
+00:00:13.333 --> 00:00:19.467
+The rectangle replaces the selection with these two nodes

doc/demos/release-positions.vtt

@@ -0,0 +1,21 @@
+WEBVTT
+
+1
+00:00:00.000 --> 00:00:07.067
+With Force layout enabled, drag a node to fix its position
+
+2
+00:00:07.067 --> 00:00:11.333
+Open View controls on the right
+
+3
+00:00:11.333 --> 00:00:15.867
+Click Moved to select the fixed node
+
+4
+00:00:15.867 --> 00:00:20.667
+Click Release to remove the node’s manual fixation
+
+5
+00:00:20.667 --> 00:00:26.533
+Manual fixation is removed; Moved returns to 0

doc/demos/reset-positions.vtt

@@ -0,0 +1,21 @@
+WEBVTT
+
+1
+00:00:00.000 --> 00:00:05.867
+Drag a node to a new position
+
+2
+00:00:05.867 --> 00:00:11.000
+Open View controls to find Moved, Reset, and Undo
+
+3
+00:00:11.000 --> 00:00:15.800
+Click Moved to select the node you dragged
+
+4
+00:00:15.800 --> 00:00:21.133
+Click Reset to restore its original position
+
+5
+00:00:21.133 --> 00:00:28.467
+Click Undo to return to the dragged position