From b1fb7102291acd73bec7abd311f75921d4f4cbdb Mon Sep 17 00:00:00 2001
From: josh-sanders <sandersjoshua@gmail.com>
Date: Thu, 13 Mar 2025 23:34:16 +1000
Subject: [PATCH] Add `hideOnRoot` option to `Component.Graph`

---
 docs/configuration.md       |  1 +
 docs/features/graph view.md | 17 ++++++++++-------
 quartz/components/Graph.tsx |  9 ++++++++-
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index 38c72195a..0c86236d5 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -142,5 +142,6 @@ Customization of the home page can be achieved by conditionally hiding or unhidi
 - [[Breadcrumbs]] are hidden by default, to unhide them the configuration looks like: `Component.Breadcrumbs({ hideOnRoot: false }){:ts}`
 - Date and reading time are shown by default, to hide them the configuration looks like: `Component.ContentMeta({ hideOnRoot: true }){:ts}`
 - [[Explorer]] is shown by default, to hide it the configuration looks like: `Component.Explorer({ hideOnRoot: true }){:ts}`
+- [[Graph view]] is shown by default, to hide it the configuration looks like: `Component.Graph({ hideOnRoot: true }){:ts}`
 
 A differnet method is used to configure the comment box on the home page, see [[Comments#Conditionally display comments|conditionally display comments]].
diff --git a/docs/features/graph view.md b/docs/features/graph view.md
index 19f086286..15476d347 100644
--- a/docs/features/graph view.md	
+++ b/docs/features/graph view.md	
@@ -23,7 +23,7 @@ Most configuration can be done by passing in options to `Component.Graph()`.
 For example, here's what the default configuration looks like:
 
 ```typescript title="quartz.layout.ts"
-Component.Graph({
+const defaultOptions: GraphOptions = {
   localGraph: {
     drag: true, // whether to allow panning the view around
     zoom: true, // whether to allow zooming in and out
@@ -34,8 +34,9 @@ Component.Graph({
     linkDistance: 30, // how long should the links be by default?
     fontSize: 0.6, // what size should the node labels be?
     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
+    removeTags: [], // what tags to remove from the graph
+    focusOnHover: false,
     enableRadial: false, // whether to constrain the graph, similar to Obsidian
   },
   globalGraph: {
@@ -44,15 +45,17 @@ Component.Graph({
     depth: -1,
     scale: 0.9,
     repelForce: 0.5,
-    centerForce: 0.3,
+    centerForce: 0.2,
     linkDistance: 30,
     fontSize: 0.6,
     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
+    showTags: true,
+    removeTags: [],
+    focusOnHover: true,
+    enableRadial: true,
   },
-})
+  hideOnRoot: false
+}
 ```
 
 When passing in your own options, you can omit any or all of these fields if you'd like to keep the default value for that field.
diff --git a/quartz/components/Graph.tsx b/quartz/components/Graph.tsx
index 907372e93..f660b18e6 100644
--- a/quartz/components/Graph.tsx
+++ b/quartz/components/Graph.tsx
@@ -24,6 +24,7 @@ export interface D3Config {
 interface GraphOptions {
   localGraph: Partial<D3Config> | undefined
   globalGraph: Partial<D3Config> | undefined
+  hideOnRoot: boolean
 }
 
 const defaultOptions: GraphOptions = {
@@ -57,10 +58,16 @@ const defaultOptions: GraphOptions = {
     focusOnHover: true,
     enableRadial: true,
   },
+  hideOnRoot: false
 }
 
 export default ((opts?: Partial<GraphOptions>) => {
-  const Graph: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
+  const Graph: QuartzComponent = ({ displayClass, fileData, cfg }: QuartzComponentProps) => {
+    // Hide graph on root if enabled
+    if (opts?.hideOnRoot && fileData.slug === "index") {
+      return null
+    }
+
     const localGraph = { ...defaultOptions.localGraph, ...opts?.localGraph }
     const globalGraph = { ...defaultOptions.globalGraph, ...opts?.globalGraph }
     return (