Skip to content

ANG-004: Structural note graph with Cytoscape.js + fCoSE webview rendering#6

Open
yugalkaushik wants to merge 3 commits into
devfrom
ANG-004
Open

ANG-004: Structural note graph with Cytoscape.js + fCoSE webview rendering#6
yugalkaushik wants to merge 3 commits into
devfrom
ANG-004

Conversation

@yugalkaushik

@yugalkaushik yugalkaushik commented Jun 18, 2026

Copy link
Copy Markdown
Collaborator

Renders an interactive graph inside a Joplin panel showing explicit note-to-note links as solid arrowed edges and shared tag relationships as dotted edges.

  • Bundled Cytoscape.js and fCoSE layout for the browser webview via a separate webpack config targeting web
  • Built graph builder that assembles nodes and edges into Cytoscape-compatible format, computes degree for each node
  • Added click-to-navigate: tapping a node opens the corresponding note in Joplin
  • Styled connected nodes as blue circles with borders, link edges as solid with arrowheads, tag edges as dotted gray
  • Added ResizeObserver so the graph fills the panel and adapts to resize
  • Wrote unit tests for edge factory (9 tests) and graph builder (6 tests)

Preview

image image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant