Repository navigation
feat(frontend): upload, depth, thresholds and slices in Svelte - #11
Merged
Merged
Conversation
First usable Svelte workflow at /next/, matching the Dash layout: - App shell (header, theme toggle, viewer/main tabs, log pane, footer). - Upload starts a depth job; Mode tab with depth map, model selection, regenerate and progress; Segmentation tab with threshold sliders (baseRevision, one stale-revision retry), Generate and the slice strip; Configuration tab with slice count and legacy Load State. - Busy-aware controls; API errors surface in the log pane. - SvelteDriver + `svelte` Playwright project (supports upload-depth-slices); `pretest:e2e` builds the frontend first. - Dash reference screenshots for layout parity. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
The current dark-mode implementation toggles dark on #app-container while theme tokens switch on :root.dark, so the theme toggle will not activate the dark theme as intended.
Get a fresh assessment by requesting another Copilot review.
Review effort: Lite
Findings: 3
Open (3)
What changed in this PR
This PR advances the Dash → Svelte 5 migration by implementing the first end-to-end usable Svelte workflow (upload → depth → thresholds → slice generation) and wiring it into the existing shared E2E harness via a new Svelte UiDriver.
Changes:
- Add a Svelte workflow orchestrator (
workflow.ts) plus client-side stores for UI state, job/busy tracking, and log merging. - Implement Svelte UI tabs/components for upload, depth controls/progress, thresholds + slice strip, and basic configuration/restore.
- Extend Playwright E2E to run the shared scenarios against Svelte by adding a
svelteproject and aSvelteDriver, plus new vitest coverage.
| File | Description |
|---|---|
| package.json | Runs build:frontend automatically before test:e2e so Playwright serves current Svelte build. |
| frontend/src/lib/workflow.ts | Central orchestration layer for API calls + stores (busy, logs, revision-guarded project view). |
| frontend/src/lib/workflow.test.ts | Unit tests for workflow orchestration (upload→depth, slices polling, error logging). |
| frontend/src/lib/state/ui.svelte.ts | Client-only UI state store (tabs, theme, depth model, pending slice count). |
| frontend/src/lib/state/logs.svelte.ts | Log store merging server logs with client-side error entries. |
| frontend/src/lib/state/jobs.svelte.ts | Local in-flight job tracker for immediate disabling/progress. |
| frontend/src/lib/state/busy.svelte.ts | Combines local job activity + server ProjectView.busy to gate mutations. |
| frontend/src/lib/components/upload/ViewerTabs.svelte | 2D/3D viewer tab strip and 2D upload panel mounting. |
| frontend/src/lib/components/upload/InputImagePanel.svelte | Upload/drag-drop panel and file input wiring to workflow upload. |
| frontend/src/lib/components/shell/MainTabs.svelte | Workflow tab strip; keeps all tabs mounted to match Dash/E2E expectations. |
| frontend/src/lib/components/shell/LogPanel.svelte | Renders last 3 log entries with error styling. |
| frontend/src/lib/components/shell/Header.svelte | App header with theme toggle control. |
| frontend/src/lib/components/shell/Footer.svelte | Footer parity with Dash reference. |
| frontend/src/lib/components/shared/TabPlaceholder.svelte | Placeholder for not-yet-implemented tabs. |
| frontend/src/lib/components/segmentation/SegmentationTab.test.ts | Component tests for thumbnails, busy disabling, stale-revision retry behavior. |
| frontend/src/lib/components/segmentation/SegmentationTab.svelte | Threshold sliders, action buttons (Generate wired), and slice strip UI. |
| frontend/src/lib/components/depth/ModeTab.svelte | Depth view, model selector, regenerate button, and progress bar. |
| frontend/src/lib/components/config/ConfigurationTab.svelte | Slice-count control + legacy restore input. |
| frontend/src/App.test.ts | App-level tests for shell rendering and upload→depth rendering. |
| frontend/src/App.svelte | Composes the new shell (header/main/log/footer) for /next/ app. |
| frontend/src/app.css | Adds shared “Dash look-alike” classes and depth-number theme token. |
| e2e/playwright.config.ts | Adds a svelte Playwright project to run shared scenarios against Svelte UI. |
| e2e/fixtures.ts | Wires uiTarget: 'svelte' to instantiate the new SvelteDriver. |
| e2e/drivers/svelte.ts | Implements the Svelte-specific UiDriver adapter for the supported workflow. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+114
to
+119
| const previousTab = await this.activeMainTab(); | ||
| await this.openTab('Segmentation'); | ||
| await expect(slices).toHaveCount(3); | ||
| if (previousTab && previousTab !== 'Segmentation') { | ||
| await this.openTab(previousTab); | ||
| } |
| {/if} | ||
| </p> | ||
| </header> | ||
| <div id="app-container" class="app-root" class:dark={uiStore.theme === 'dark'}> |
Comment on lines
+51
to
+56
| <div | ||
| class="drop-zone panel" | ||
| class:dragging | ||
| role="button" | ||
| tabindex="0" | ||
| data-testid="input-image-panel" |
… drop-zone label Address review: theme tokens switch on :root.dark, so toggle the class on document.documentElement (with a component test); SvelteDriver's restore returns to the Mode tab too (MainTab now includes 'Mode'); the upload drop zone has an accessible name. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
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.
PR 2 of the Dash → Svelte 5 migration: the first usable Svelte workflow, served at
/next/next to the unchanged Dash UI.What works in Svelte
docs/svelte-migration/reference/): header, theme toggle, 2D/3D and main tabs, log pane (last 3 lines) and footer.baseRevisionand retry once onstale_revision. Generate runs the slices job; the slice strip shows the depth overlay andimage_slice_Nlabels.Tests
SvelteDriverplus asveltePlaywright project. The shared scenario 1 (upload → deterministic depth → three slices with exact pixel signatures) now passes on both UIs; scenarios the Svelte UI doesn't support yet are skipped viarequireWorkflow.pretest:e2ebuilds the frontend so Playwright always serves the current code.Known differences (tracked for later PRs)
dark_modeyet; that's project-lifecycle work).Verification (local, after rebasing onto #10)
svelte-check0/0; vitest 28 passed;npm run check:e2ecleanpytest -o addopts='' -q: 296 passednpm run test:e2e: 12 passed (Dash 11 + Svelte 1), 10 skipped (Svelte, not yet supported)🤖 Generated with Claude Code