Make graph SPA layout configurable

quartz/components/GameCultGraphSpaShell.tsx

@@ -7,6 +7,10 @@ export type GameCultGraphSpaShellOptions = {
   config?: {
     title?: string
     architectureDescription?: string
+    layoutMode?: "layered" | "stress" | "force" | "combined-force" | {
+      architecture?: "layered" | "stress" | "force" | "combined-force"
+      dataflow?: "layered" | "stress" | "force" | "combined-force"
+    }
     allowedSlugPrefixes?: string[]
     blockedSlugPrefixes?: string[]
     blockedPathSegments?: string[]
@@ -24,14 +28,10 @@ export default ((options?: Partial<GameCultGraphSpaShellOptions>) => {
   const GameCultGraphSpaShell: QuartzComponent = () => (
     <>
       <link rel="stylesheet" href={shellOptions.stylesheetHref} />
-      <div class={shellOptions.rootClassName}></div>
-      {shellOptions.config ? (
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `window.gameCultGraphSpaConfig = ${JSON.stringify(shellOptions.config)};`,
-          }}
-        />
-      ) : null}
+      <div
+        class={shellOptions.rootClassName}
+        data-graph-config={shellOptions.config ? JSON.stringify(shellOptions.config) : undefined}
+      ></div>
       <script type="module" src={shellOptions.moduleSrc}></script>
     </>
   )

quartz/graph-spa/src/main.tsx

@@ -5,6 +5,7 @@ import { EpiphanyGraphViewer } from "../../../../EpiphanyGraph/web/epiphany-grap
 import type {
   EpiphanyGraphEdge,
   EpiphanyGraphNode,
+  EpiphanyGraphLayoutModeConfig,
   EpiphanyGraphsState,
   GraphKey,
   PositionedNode,
@@ -26,6 +27,7 @@ type QuartzContentIndex = Record<string, QuartzContentEntry>
 type GraphSpaConfig = {
   title?: string
   architectureDescription?: string
+  layoutMode?: EpiphanyGraphLayoutModeConfig
   allowedSlugPrefixes?: string[]
   blockedSlugPrefixes?: string[]
   blockedPathSegments?: string[]
@@ -124,6 +126,18 @@ function normalizeSlug(slug: string) {
 }
 
 function graphSpaConfig() {
+  const mountedConfig = document.querySelector<HTMLElement>(
+    ".gamecult-epiphany-graph-root[data-graph-config]",
+  )?.dataset.graphConfig
+
+  if (mountedConfig) {
+    try {
+      return JSON.parse(mountedConfig) as GraphSpaConfig
+    } catch (error) {
+      console.warn("Could not parse graph SPA config.", error)
+    }
+  }
+
   return window.gameCultGraphSpaConfig ?? {}
 }
 
@@ -668,10 +682,7 @@ function App() {
             dataflow:
               "Sections are folder-level clusters. Their edges summarize how links and backlinks move between regions of the vault.",
           }}
-          layoutMode={{
-            architecture: "combined-force",
-            dataflow: "combined-force",
-          }}
+          layoutMode={graphSpaConfig().layoutMode ?? "layered"}
         />
       </GraphErrorBoundary>
     </main>