# feat: Redesign all workspace UIs with consistent design system + bug fixes#557
Conversation
Introduces a shared CSS token system (--ws-* variables, .ws-* utility classes) in App.tsx and applies it across every workspace tab to produce a cohesive dark-themed Knowledge Explorer UI. Changes per workspace: - App.tsx: added full design-system block (:root tokens, .ws-btn, .ws-input, .ws-card, .ws-stat-grid, .ws-pill, .ws-sidebar, .ws-empty, animations); renamed "Network Explorer" -> "Semantica Explorer" app-wide; redesigned WelcomeScreen as a tech landing page (hero, metrics strip, workspace grid, capability band) - ReasoningWorkspace: two-column layout, quick templates, monospace textareas, graph-write toggle, spinner run button - SparqlWorkspace: template toolbar, copy button, styled Monaco editor, URI-coloured results table with CSV export - DecisionWorkspace: ws-sidebar filter + list, ChainNode/RelEdge chain renderer, detail pane with outcome badge - ImportExportWorkspace: drag-drop import zone, JSON/CSV export toggle, toast notifications with slide-up animation - DiffMergeWorkspace: side-by-side diff table, amber diff pills, merge action with loading state - KGOverviewTab: ws-stat-grid cards, TypeBar distribution charts, top-connected-nodes grid - LineageDiagram: glassmorphism toolbar, ws-btn export actions, themed react-flow controls - OntologyWorkspace/index: cleaned unused ComingSoonStub + dead style constants that caused babel-plugin-react-compiler compilation errors - OntologyManager: graceful empty state instead of error banner when backend is unreachable - HealthTab, ShaclStudio, AlignmentsTab: silence read-operation errors; keep errors only for user-triggered write actions
Qodo reviews are paused for this user.Troubleshooting steps vary by plan Learn more → On a Teams plan? Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center? |
Decision workspace: - Add AbortController per loadChain() call; abort previous request when a new decision is selected, preventing stale out-of-order chain responses - Guard all setState calls with signal.aborted so unmounted component state updates are skipped; cancel in-flight request on unmount via a dedicated cleanup effect SPARQL workspace: - Guard results table on both result.rows && result.columns to prevent runtime crash when backend omits columns field - Use (result.columns ?? []) inside rows.map() to satisfy TypeScript narrowing inside the closure - Add .catch() to clipboard.writeText() — silently swallows permission errors (query remains visible in the editor as fallback) - Fix CSV export anchor: append to body before click, remove after, to ensure cross-browser compatibility Import/Export workspace: - Fix download anchor: append to document.body before a.click() and remove afterwards, matching the standard compatible pattern Lineage workspace: - Replace 🔗 emoji empty-state icon with lucide-react Link2 for consistent theming and sizing Diff & Merge workspace: - Add "Sample preview" banner above the mock diff table so users know the displayed fields are illustrative until the backend is connected OntologyManager: - Restore non-blocking warning (flash message) when HTTP response is non-OK and not a 404; network errors (backend down) stay silent AlignmentsTab: - When both registry and alignments promises reject, surface a soft error banner so users know data is missing rather than just empty
- OntologyManager: remove red error banner on HTTP 500; always fall back to empty state silently (error banners reserved for user actions only) - AlignmentsTab: remove offline-backend warning when both registry and alignments requests fail; show empty form silently - ShaclStudio: fix Monarch tokenizer crash — [@] character class prevents Monaco from misinterpreting @prefix/@base as language-property refs; wrap beforeMount in try/catch so any Monaco setup failure cannot crash the React tree
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0efb018df0
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| const fetchRegistry = useCallback(async () => { | ||
| setLoading(true); | ||
| setError(""); | ||
| setActionMsg(null); |
There was a problem hiding this comment.
Removing actionMsg at the start of fetchRegistry causes user-triggered write feedback to disappear immediately whenever a write handler refreshes the list (for example handleRefresh calls flashMsg("ok", ...) and then fetchRegistry()). As a result, success/error notifications intended to persist for a few seconds are cleared almost instantly, so users often won’t see whether their action succeeded.
Useful? React with 👍 / 👎.
KaifAhmad1
changed the title
|
@ZohaibHassan16 please review this PR. |
ZohaibHassan16
left a comment
ZohaibHassan16
left a comment
There was a problem hiding this comment.
Reviewed and pushed a small merge reaediness fix commit.
Fixed the strict TS build blocker, aligned Ontology Hub loaders with the shared .ws-spin design-system class, guarded the Decisions list fetch against aborted request state updates, and updated stale graph-workspace test expectations for the current threeHopPlus bucket contract.
Verification passed:
npm run build
npm run test:graph-workspace
python -m pytest tests/test_issue_554_fixes.py tests/deduplication/test_deduplication.py tests/ingest/test_optional_imports.py tests/ingest/test_parquet_ingestor.py
Looks merge ready from my pass.
2 participants
Overview
A comprehensive redesign of the Semantica Knowledge Explorer frontend. Replaces the previous mix of ad-hoc inline styles with a single shared design token system and a cohesive dark-theme UI across every workspace. This PR also resolves a series of runtime crashes, error-state regressions, and race conditions found during full Playwright screenshot testing of all 15 screens.
Design System (
App.tsx)A global CSS token layer (
--ws-*custom properties) is now shared by all workspaces:--ws-bg,--ws-surface,--ws-card), accent colors (--ws-accent,--ws-purple,--ws-amber), text hierarchy (--ws-text,--ws-text-dim,--ws-text-muted), borders.ws-title,.ws-body,.ws-eyebrow,.ws-label,.ws-pill,.ws-pill--amber,.ws-pill--green.ws-btn,.ws-btn--primary,.ws-btn--ghost,.ws-input,.ws-card,.ws-page,.ws-empty,.ws-spin.ws-padded,.ws-scroll,.workspace-tab,.workspace-tab--activeAll 13 changed files consume these tokens instead of hardcoding inline colors.
Workspace Redesigns
Link2lucide icon replaces raw emojiBug Fixes
Code Review Pass
Six bugs and four quality issues found via
/review-committedwere resolved in a follow-up commit:DecisionWorkspace— fetch race condition — AddedAbortControllerviauseRef; rapid list selections now cancel the in-flight request.useEffectcleanup aborts on unmount, preventingsetStateafter unmountSparqlWorkspace— columns crash —result.columnswas guarded in JSX but TypeScript's closure narrowing still flagged it as possibly-undefined inside.map(). Fixed with(result.columns ?? []).map(...); also added bothresult?.rowsandresult?.columnsto the outer table guardSparqlWorkspace— clipboard silent failure —.writeText()promise was unhandled; added.catch(() => {})to suppress unhandled rejection noiseSparqlWorkspace— CSV export anchor not appended — Download anchor was created but never added to the DOM, causing silent failure in strict browsers. Fixed toappendChild→click→removeChild→revokeObjectURLImportExportWorkspace— export anchor not appended — Same anchor-not-appended bug as above; same fix appliedLineageDiagram— emoji icon — Replaced the raw🔗emoji with<Link2>from lucide-react for consistency with the rest of the design systemTesting Pass — Ontology Hub
Three additional bugs found during Playwright screenshot validation of all 15 screens:
OntologyManager— red error banner on offline backend —fetchRegistrywas callingflashMsg("err", ...)for any HTTP 500 response, showing a blocking red banner even when the backend simply wasn't running. Fixed: any non-OK response now silently falls back to empty state. Error flash messages are now reserved solely for user-triggered write operations (toggle, refresh, remove)AlignmentsTab— "Backend unavailable" warning on load — When bothloadOntologyRegistry()andloadAlignments()rejected (backend offline), an error string was set and displayed as a banner above the form. Fixed: removed this auto-load error entirely. The tab shows its empty form silently; users are not surfaced an error they cannot act on from the UIShaclStudio— entire app goes black (React tree crash) — Root cause: Monaco's Monarch tokenizer treats@identifierin regex patterns as language-property references. The pattern/\b(?:@prefix|@base|a)\b/caused Monaco to look upprefixandbaseon the language definition object (neither defined), throwing an uncaught exception insidebeforeMount. With no React Error Boundary in place, this silently unmounted the entire application. Fix applied in two parts:@prefix/@basein the pattern with[@](?:prefix|base)\b— a character class breaks Monarch's reference-expansion without changing what text gets matchedbeforeMountcallback intry/catchso any future Monaco setup failure is contained and cannot crash the React treeFiles Changed
explorer/src/App.tsx— design system tokens and nav shellexplorer/src/workspaces/ReasoningWorkspace.tsx— full redesignexplorer/src/workspaces/SparqlWorkspace/SparqlWorkspace.tsx— full redesign + 3 bug fixesexplorer/src/workspaces/DecisionWorkspace/DecisionWorkspace.tsx— redesign + AbortController race fixexplorer/src/workspaces/ImportExportWorkspace/ImportExportWorkspace.tsx— redesign + anchor fixexplorer/src/workspaces/DiffMergeWorkspace/DiffMergeWorkspace.tsx— redesign + sample preview bannerexplorer/src/workspaces/LineageWorkspace/LineageDiagram.tsx— redesign + lucide icon fixexplorer/src/workspaces/ManageWorkspace/KGOverviewTab.tsx— redesignexplorer/src/workspaces/OntologyWorkspace/index.tsx— dead code removal (was causing Vite/Babel crash)explorer/src/workspaces/OntologyWorkspace/OntologyManager.tsx— silent empty state for offline backendexplorer/src/workspaces/OntologyWorkspace/AlignmentsTab.tsx— remove offline error bannerexplorer/src/workspaces/OntologyWorkspace/HealthTab.tsx— silent empty state for offline backendexplorer/src/workspaces/OntologyWorkspace/ShaclStudio.tsx— Monarch tokenizer crash fix + try/catch guardTesting
All 15 screens verified via automated Playwright screenshots (headless Edge) with the backend offline:
Final result: 0 runtime errors · 0 unexpected console errors · 12 expected API 500/404 (backend offline)