fix(graph): change svg as button

render global graph on toggle

Signed-off-by: Aaron Pham <contact@aarnphm.xyz>

quartz/components/Graph.tsx

@@ -65,9 +65,9 @@ export default ((opts?: GraphOptions) => {
         <h3>{i18n(cfg.locale).components.graph.title}</h3>
         <div class="graph-outer">
           <div id="graph-container" data-cfg={JSON.stringify(localGraph)}></div>
+          <button id="global-graph-icon" aria-label="Global Graph">
             <svg
               version="1.1"
-            id="global-graph-icon"
               xmlns="http://www.w3.org/2000/svg"
               xmlnsXlink="http://www.w3.org/1999/xlink"
               x="0px"
@@ -90,9 +90,10 @@ export default ((opts?: GraphOptions) => {
                 s-2-0.897-2-2s0.897-2,2-2S47,39.897,47,41z M49,10c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S51.206,10,49,10z"
               />
             </svg>
+          </button>
         </div>
         <div id="global-graph-outer">
-          <canvas id="global-graph-container" data-cfg={JSON.stringify(globalGraph)}></canvas>
+          <div id="global-graph-container" data-cfg={JSON.stringify(globalGraph)}></div>
         </div>
       </div>
     )

quartz/components/scripts/graph.inline.ts

@@ -58,16 +58,12 @@ function animate(time: number) {
 }
 requestAnimationFrame(animate)
 
-async function renderGraph(container: string, fullSlug: FullSlug, global?: boolean) {
+async function renderGraph(container: string, fullSlug: FullSlug) {
   const slug = simplifySlug(fullSlug)
   const visited = getVisited()
   const graph = document.getElementById(container)
   if (!graph) return
-
-  global = global ?? false
-  if (!global) {
   removeAllChildren(graph)
-  }
 
   let {
     drag: enableDrag,
@@ -306,7 +302,6 @@ async function renderGraph(container: string, fullSlug: FullSlug, global?: boole
   await app.init({
     width,
     height,
-    canvas: global ? (graph as HTMLCanvasElement) : undefined,
     antialias: true,
     autoStart: false,
     autoDensity: true,
@@ -315,10 +310,7 @@ async function renderGraph(container: string, fullSlug: FullSlug, global?: boole
     resolution: window.devicePixelRatio,
     eventMode: "static",
   })
-
-  if (!global) {
   graph.appendChild(app.canvas)
-  }
 
   const stage = app.stage
   stage.interactive = false
@@ -535,7 +527,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
       sidebar.style.zIndex = "1"
     }
 
-    renderGraph("global-graph-container", slug, true)
+    renderGraph("global-graph-container", slug)
 
     registerEscapeHandler(container, hideGlobalGraph)
   }

quartz/components/styles/graph.scss

@@ -16,10 +16,13 @@
     overflow: hidden;
 
     & > #global-graph-icon {
+      cursor: pointer;
+      background: none;
+      border: none;
       color: var(--dark);
       opacity: 0.5;
-      width: 18px;
-      height: 18px;
+      width: 24px;
+      height: 24px;
       position: absolute;
       padding: 0.2rem;
       margin: 0.3rem;