Skip to content

Add browser storage persistence for GramFrame annotations #164

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
IanMayo merged 6 commits into from
Mar 27, 2026
Merged

Add browser storage persistence for GramFrame annotations #164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
23a9b2e
Implement browser storage for user annotations (#159)
claude Mar 27, 2026
b392541
Merge remote-tracking branch 'origin/main' into claude/implement-brow…
claude Mar 27, 2026
4fa6ed0
Add trainer demo page for browser storage verification
claude Mar 27, 2026
969c9cf
Add landing page for GH Pages preview
claude Mar 27, 2026
eca72ab
Add student/trainer demo pages to PR preview
claude Mar 27, 2026
cc31846
Add standalone demo pages to main GH Pages deploy
claude Mar 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 94 additions & 1 deletion .github/workflows/pr-preview.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,18 @@ jobs:
- name: Checkout code
uses: actions/checkout@v4

- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '18'
cache: 'yarn'

- name: Install dependencies
run: yarn install --frozen-lockfile

- name: Build standalone bundle
run: yarn build:standalone

- name: Prepare main site
run: |
mkdir -p _site
Expand All @@ -28,6 +40,49 @@ jobs:
cp debug.html _site/
cp debug-multiple.html _site/
cp test-release.html _site/
# Standalone demo pages
mkdir -p _site/demo
cp dist/gramframe.bundle.js _site/demo/
cp sample/mock-gram.png _site/demo/
cp preview-student.html _site/demo/student.html
cp preview-trainer.html _site/demo/trainer.html
# Landing page for /demo/
cat > _site/demo/index.html << 'LANDING'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GramFrame Demo</title>
<style>
body { font-family: Arial, sans-serif; padding: 40px; margin: 0; background: #f5f5f5; }
h1 { color: #333; }
.cards { display: flex; gap: 20px; margin-top: 30px; flex-wrap: wrap; }
.card { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 25px; width: 300px; text-decoration: none; color: inherit; transition: box-shadow 0.2s; }
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.card h2 { margin-top: 0; }
.card p { color: #666; line-height: 1.5; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: bold; color: #fff; }
.badge-student { background: #0d47a1; }
.badge-trainer { background: #1b5e20; }
</style>
</head>
<body>
<h1>GramFrame Demo</h1>
<p>Interactive spectrogram analysis with browser storage persistence.</p>
<div class="cards">
<a class="card" href="student.html">
<h2>Student Page <span class="badge badge-student">sessionStorage</span></h2>
<p>Annotations persist within the browser session but clear when the browser closes.</p>
</a>
<a class="card" href="trainer.html">
<h2>Trainer Page <span class="badge badge-trainer">localStorage</span></h2>
<p>Annotations persist permanently. Includes "Clear gram" button to reset.</p>
</a>
</div>
</body>
</html>
LANDING

- name: Deploy main site to gh-pages
uses: peaceiris/actions-gh-pages@v4
Expand Down Expand Up @@ -65,8 +120,46 @@ jobs:
run: |
mkdir -p preview
cp dist/gramframe.bundle.js preview/
cp test-release.html preview/index.html
cp sample/mock-gram.png preview/
cp preview-student.html preview/student.html
cp preview-trainer.html preview/trainer.html
# Create landing page that links to both demos
cat > preview/index.html << 'LANDING'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GramFrame PR Preview</title>
<style>
body { font-family: Arial, sans-serif; padding: 40px; margin: 0; background: #f5f5f5; }
h1 { color: #333; }
.cards { display: flex; gap: 20px; margin-top: 30px; flex-wrap: wrap; }
.card { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 25px; width: 300px; text-decoration: none; color: inherit; transition: box-shadow 0.2s; }
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.card h2 { margin-top: 0; }
.card p { color: #666; line-height: 1.5; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: bold; color: #fff; }
.badge-student { background: #0d47a1; }
.badge-trainer { background: #1b5e20; }
</style>
</head>
<body>
<h1>GramFrame PR Preview</h1>
<p>Interactive spectrogram analysis with browser storage persistence.</p>
<div class="cards">
<a class="card" href="student.html">
<h2>Student Page <span class="badge badge-student">sessionStorage</span></h2>
<p>Annotations persist within the browser session but clear when the browser closes.</p>
</a>
<a class="card" href="trainer.html">
<h2>Trainer Page <span class="badge badge-trainer">localStorage</span></h2>
<p>Annotations persist permanently. Includes "Clear gram" button to reset.</p>
</a>
</div>
</body>
</html>
LANDING

- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v4
Expand Down
110 changes: 110 additions & 0 deletions debug-trainer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GramFrame Trainer Page</title>
<link rel="stylesheet" href="./src/gramframe.css" />
<script type="module" src="./src/main.js"></script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
padding: 20px;
margin: 0;
}

h1 {
color: #333;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}

.page-nav {
margin-bottom: 15px;
font-size: 14px;
}

.page-nav a {
color: #1a73e8;
}

.context-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 4px;
font-size: 13px;
font-weight: bold;
background-color: #1b5e20;
color: #fff;
margin-left: 10px;
vertical-align: middle;
}

.component-container {
padding: 15px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #f9f9f9;
min-width: 1020px;
}

.component-container img,
.gram-frame-container {
width: 100%;
height: auto;
}

table.gram-config {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}

table.gram-config th,
table.gram-config td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<h1>GramFrame Trainer Page <span class="context-badge">TRAINER — localStorage</span></h1>
<div class="page-nav">
<a href="debug.html">&larr; Student page (sessionStorage)</a>
&nbsp;|&nbsp;
<a href="debug-multiple.html">Multi-gram page</a>
&nbsp;|&nbsp;
<!-- This ANALYSIS link triggers trainer context detection in storage.js -->
<a href="#">ANALYSIS</a>
</div>

<div class="component-container">
<h2>Component Instance</h2>

<table class="gram-config">
<tr>
<td colspan="2">
<img src="./sample/mock-gram.png" alt="Sample Spectrogram">
</td>
</tr>
<tr>
<td>time-start</td>
<td>0</td>
</tr>
<tr>
<td>time-end</td>
<td>60</td>
</tr>
<tr>
<td>freq-start</td>
<td>0</td>
</tr>
<tr>
<td>freq-end</td>
<td>100</td>
</tr>
</table>
</div>
</body>
</html>
4 changes: 2 additions & 2 deletions debug.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,8 +157,8 @@
</style>
</head>
<body>
<h1>GramFrame Debug Page</h1>
<h3>Find multi-gram page <a href="debug-multiple.html">here</a></h3>
<h1>GramFrame Debug Page <span style="display:inline-block;padding:3px 10px;border-radius:4px;font-size:13px;font-weight:bold;background:#0d47a1;color:#fff;margin-left:10px;vertical-align:middle">STUDENT — sessionStorage</span></h1>
<h3><a href="debug-trainer.html">Trainer page (localStorage)</a> | <a href="debug-multiple.html">Multi-gram page</a></h3>

<div class="debug-container">
<div class="component-container">
Expand Down
57 changes: 54 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,61 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Gram Frame Test</title>
<script type="module" src="/src/main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GramFrame Demo</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
padding: 40px;
margin: 0;
background: #f5f5f5;
}
h1 { color: #333; }
.cards {
display: flex;
gap: 20px;
margin-top: 30px;
flex-wrap: wrap;
}
.card {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 25px;
width: 300px;
text-decoration: none;
color: inherit;
transition: box-shadow 0.2s;
}
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.card h2 { margin-top: 0; }
.card p { color: #666; line-height: 1.5; }
.badge {
display: inline-block;
padding: 3px 10px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
color: #fff;
}
.badge-student { background: #0d47a1; }
.badge-trainer { background: #1b5e20; }
</style>
</head>
<body>
<h1>Testing Gram Frame</h1>
<h1>GramFrame Demo Pages</h1>
<p>Interactive spectrogram analysis component with browser storage persistence.</p>

<div class="cards">
<a class="card" href="debug.html">
<h2>Student Page <span class="badge badge-student">sessionStorage</span></h2>
<p>Annotations persist within the browser session but are cleared when the browser closes. Simulates a shared-PC training environment.</p>
</a>

<a class="card" href="debug-trainer.html">
<h2>Trainer Page <span class="badge badge-trainer">localStorage</span></h2>
<p>Annotations persist permanently across browser restarts. Includes a "Clear gram" button to reset. Simulates a trainer workstation.</p>
</a>
</div>
</body>
</html>
51 changes: 51 additions & 0 deletions preview-student.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GramFrame Student Demo</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.test-container { margin: 20px 0; }
.note { background: #e8f4fd; padding: 15px; border-left: 4px solid #0d47a1; margin: 10px 0; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 13px; font-weight: bold; color: #fff; background: #0d47a1; vertical-align: middle; margin-left: 10px; }
.nav { margin-bottom: 15px; font-size: 14px; }
.nav a { color: #1a73e8; }
</style>
</head>
<body>
<h1>GramFrame Student Demo <span class="badge">sessionStorage</span></h1>

<div class="nav">
<a href="index.html">&larr; Back to demo index</a> | <a href="trainer.html">Trainer page (localStorage)</a>
</div>

<div class="note">
<strong>Student context:</strong> No "ANALYSIS" link on this page, so annotations use <code>sessionStorage</code>.
They persist across page reloads within the same browser session, but are cleared when the browser closes.
</div>

<div class="test-container">
<table class="gram-config">
<tr>
<td colspan="2"><img src="./mock-gram.png" alt="Mock Spectrogram" style="width: 800px; height: 400px;"></td>
</tr>
<tr><td>time-start</td><td>0</td></tr>
<tr><td>time-end</td><td>10</td></tr>
<tr><td>freq-start</td><td>0</td></tr>
<tr><td>freq-end</td><td>50</td></tr>
</table>
</div>

<div class="note">
<strong>Test steps:</strong>
<ol>
<li>Add some markers in Cross Cursor mode</li>
<li>Reload the page &mdash; markers should still be there</li>
<li>No "Clear gram" button should be visible</li>
</ol>
</div>

<script src="./gramframe.bundle.js"></script>
</body>
</html>
Loading
Loading