feat(graph): Add Obsidian-style interactive Graph View#744
Draft
Droyder7 wants to merge 12 commits into
Draft
Conversation
When the graph view is active, it now renders as a standalone full-width panel (`.app__graph-view`) instead of being nested inside the editor column. This hides the note list column and its resize handle completely, granting the canvas maximum viewport space and preventing layout constraints from the standard note-list/editor split.
- Import and apply proper ForceGraphTypes in GraphView.tsx to replace unsafe 'any' typings - Add getNodeId helper to safely resolve source/target node IDs - Replace state-updating useEffect in GraphViewPanel.tsx with derived effectiveFocusNodeId using useMemo
- Extract drawNodeLabel() helper from drawNode useCallback in GraphView.tsx, reducing cyclomatic complexity from 12 to 6 (limit is 8) - Add engines.eslint.exclude_paths for src/components/GraphView/** in .codacy.yaml to suppress 24 false-positive Qwik-framework alerts on React JSX (className and are correct in React, not Qwik)
…ives The className attribute on line 1767 of App.tsx is valid React JSX but was flagged by Codacy's Qwik-targeted ESLint patterns. Extending the engines.eslint.exclude_paths to cover App.tsx suppresses this alert. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Pass x, y as explicit params to drawNodeLabel() instead of using assertion' alert at GraphView.tsx L110 - Add opengrep and semgrep engine exclusions for src/components/GraphView/** in .codacy.yaml — the React className and Qwik $() false-positive alerts originate from Codacy's OpenGrep/Semgrep engine, not ESLint, so the previous engines.eslint.exclude_paths had no effect on them - Remove src/App.tsx from per-engine exclusions (per requirement) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
is this gonna get merged? |
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
2 participants
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.
Integrates a high-performance, Canvas-based interactive Graph View to visualize note connection topology.
This feature parses wikilink connections, dynamically maps connection degree to node sizing, renders soft glowing neon radial halos in
dark theme, supports fast title filtering, and handles instant page transitions on click or ghost note creation on demand.
Immersive Viewport Dashboard
Mounted a new
'Graph View'tab in the sidebar header top navigation utilizing the PhosphorShareNetworkicon. Selecting it rendersthe full-viewport graph canvas in place of the default note editor.
Theme-Aware Node Canvas Rendering
Implements custom
nodeCanvasObjectdrawing that renders soft glowing neon radial halos matching individual note colors in dark mode(
shadowBlur: 14), and solid crisp borders in light mode. Unresolved/dangling wikilink targets are drawn as dotted/dashed gray circlesto clearly delineate notes that don't exist yet.
Responsive Dimensions & Layout Friction
Uses a
ResizeObserverto dynamically size the canvas during sidebar toggles, and tunes D3 layout friction variables (d3AlphaDecayand
d3VelocityDecay) for a slow-settling visual simulation. Unrelated nodes and links dynamically dim to0.15opacity when hoveringover a note, keeping direct neighbors highlighted.
Single-Click Navigation & Ghost Creation
Single-clicking a note immediately selects it and switches the viewport selection to open the Editor. Single-clicking a ghost note pops
up a confirmation dialog before automatically triggering the note creation dialog.
Selection-Aware History Navigation
Wraps
useAppNavigation's back and forward hooks to check and store sidebar filter state, ensuring that pressing the back/forward keysin the header panel seamlessly navigates across Graph View transitions.
Screenshot: