From adb7ad2a3c30b7ee0c8bf834ea2b4a5a67f1be0e Mon Sep 17 00:00:00 2001 From: Aaron Pham Date: Thu, 23 Jan 2025 22:33:46 -0500 Subject: [PATCH 1/4] feat(graph): enable radial mode Signed-off-by: Aaron Pham --- quartz.layout.ts | 2 +- quartz/components/Graph.tsx | 5 ++++- quartz/components/scripts/graph.inline.ts | 11 +++++++++-- 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/quartz.layout.ts b/quartz.layout.ts index 4a78256aabda3..c44da7dbde511 100644 --- a/quartz.layout.ts +++ b/quartz.layout.ts @@ -30,7 +30,7 @@ export const defaultContentPageLayout: PageLayout = { Component.DesktopOnly(Component.Explorer()), ], right: [ - Component.Graph(), + Component.Graph({ globalGraph: { enableRadial: true } }), Component.DesktopOnly(Component.TableOfContents()), Component.Backlinks(), ], diff --git a/quartz/components/Graph.tsx b/quartz/components/Graph.tsx index ec3475d1efce5..b49298ca7e36b 100644 --- a/quartz/components/Graph.tsx +++ b/quartz/components/Graph.tsx @@ -18,6 +18,7 @@ export interface D3Config { removeTags: string[] showTags: boolean focusOnHover?: boolean + enableRadial?: boolean } interface GraphOptions { @@ -39,6 +40,7 @@ const defaultOptions: GraphOptions = { showTags: true, removeTags: [], focusOnHover: false, + enableRadial: false, }, globalGraph: { drag: true, @@ -53,10 +55,11 @@ const defaultOptions: GraphOptions = { showTags: true, removeTags: [], focusOnHover: true, + enableRadial: false, }, } -export default ((opts?: GraphOptions) => { +export default ((opts?: Partial) => { const Graph: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => { const localGraph = { ...defaultOptions.localGraph, ...opts?.localGraph } const globalGraph = { ...defaultOptions.globalGraph, ...opts?.globalGraph } diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts index dbddae91f5021..16ee33f64637f 100644 --- a/quartz/components/scripts/graph.inline.ts +++ b/quartz/components/scripts/graph.inline.ts @@ -8,6 +8,7 @@ import { forceCenter, forceLink, forceCollide, + forceRadial, zoomIdentity, select, drag, @@ -87,6 +88,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) { removeTags, showTags, focusOnHover, + enableRadial, } = JSON.parse(graph.dataset["cfg"]!) as D3Config const data: Map = new Map( @@ -161,15 +163,20 @@ async function renderGraph(container: string, fullSlug: FullSlug) { })), } + const width = graph.offsetWidth + const height = Math.max(graph.offsetHeight, 250) + // we virtualize the simulation and use pixi to actually render it + // Calculate the radius of the container circle + const radius = Math.min(width, height) / 2 - 40 // 40px padding const simulation: Simulation = forceSimulation(graphData.nodes) .force("charge", forceManyBody().strength(-100 * repelForce)) .force("center", forceCenter().strength(centerForce)) .force("link", forceLink(graphData.links).distance(linkDistance)) .force("collide", forceCollide((n) => nodeRadius(n)).iterations(3)) - const width = graph.offsetWidth - const height = Math.max(graph.offsetHeight, 250) + if (enableRadial) + simulation.force("radial", forceRadial(radius * 0.8, width / 2, height / 2).strength(0.3)) // precompute style prop strings as pixi doesn't support css variables const cssVars = [ From 3eb8727c911b182d3c34af48fe851ad98ae9e49c Mon Sep 17 00:00:00 2001 From: Aaron Pham Date: Fri, 24 Jan 2025 19:39:29 -0500 Subject: [PATCH 2/4] chore: update docs Signed-off-by: Aaron Pham --- docs/features/graph view.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/features/graph view.md b/docs/features/graph view.md index 4f905c78d5de0..7b2f67857d76f 100644 --- a/docs/features/graph view.md +++ b/docs/features/graph view.md @@ -49,6 +49,7 @@ Component.Graph({ opacityScale: 1, removeTags: [], // what tags to remove from the graph showTags: true, // whether to show tags in the graph + enableRadial: true, // Whether to constrain the graph, similar to Obsidian }, }) ``` From fd8d80f1ddca20e897b630fd125e1f1cc66e297f Mon Sep 17 00:00:00 2001 From: Aaron Pham Date: Fri, 24 Jan 2025 19:41:13 -0500 Subject: [PATCH 3/4] chore: ignore enableRadial on main docs Signed-off-by: Aaron Pham --- quartz.layout.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/quartz.layout.ts b/quartz.layout.ts index c44da7dbde511..4a78256aabda3 100644 --- a/quartz.layout.ts +++ b/quartz.layout.ts @@ -30,7 +30,7 @@ export const defaultContentPageLayout: PageLayout = { Component.DesktopOnly(Component.Explorer()), ], right: [ - Component.Graph({ globalGraph: { enableRadial: true } }), + Component.Graph(), Component.DesktopOnly(Component.TableOfContents()), Component.Backlinks(), ], From 022aae595b1aa5393ec44f9524a721ab482f2fa9 Mon Sep 17 00:00:00 2001 From: Aaron Pham Date: Sat, 1 Feb 2025 16:16:48 -0500 Subject: [PATCH 4/4] chore: address emile's comments Signed-off-by: Aaron Pham --- docs/features/graph view.md | 3 ++- quartz/components/Graph.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/features/graph view.md b/docs/features/graph view.md index 7b2f67857d76f..19f0862866bd9 100644 --- a/docs/features/graph view.md +++ b/docs/features/graph view.md @@ -36,6 +36,7 @@ Component.Graph({ opacityScale: 1, // how quickly do we fade out the labels when zooming out? removeTags: [], // what tags to remove from the graph showTags: true, // whether to show tags in the graph + enableRadial: false, // whether to constrain the graph, similar to Obsidian }, globalGraph: { drag: true, @@ -49,7 +50,7 @@ Component.Graph({ opacityScale: 1, removeTags: [], // what tags to remove from the graph showTags: true, // whether to show tags in the graph - enableRadial: true, // Whether to constrain the graph, similar to Obsidian + enableRadial: true, // whether to constrain the graph, similar to Obsidian }, }) ``` diff --git a/quartz/components/Graph.tsx b/quartz/components/Graph.tsx index b49298ca7e36b..e8b462da05eea 100644 --- a/quartz/components/Graph.tsx +++ b/quartz/components/Graph.tsx @@ -55,7 +55,7 @@ const defaultOptions: GraphOptions = { showTags: true, removeTags: [], focusOnHover: true, - enableRadial: false, + enableRadial: true, }, }