Quartz Sandbox

Graph and Explorer

Properties2
descriptionA tuned local graph and file-tree explorer, both hydrated from the same generated content index and mounted in the navigation layout.
tagssandbox, experiment, navigation

2 min read

Graph and explorer

What this demonstrates

The graph and explorer are complementary views over one content model. Graph renders relationships between this vault’s notes; explorer renders the folder tree. Both are emitted as lightweight containers and hydrated after page load from the generated content index, so newly decrypted shadow entries can be added to them during a browser session.

This page tunes the local graph to show two hops, tags, and a slightly more forceful layout; the global graph stays broad but removes the noisy fixture tag. Explorer starts folders collapsed and treats a folder click as a link.

Configuration used

  - source: "@quartz-community/graph"
    enabled: true
    options:
      localGraph:
        drag: true
        zoom: true
        depth: 2
        scale: 1.15
        repelForce: 0.6
        centerForce: 0.3
        linkDistance: 36
        fontSize: 0.6
        opacityScale: 1
        showTags: true
        removeTags: []
        focusOnHover: true
        enableRadial: true
      globalGraph:
        drag: true
        zoom: true
        depth: -1
        scale: 0.9
        repelForce: 0.5
        centerForce: 0.2
        linkDistance: 30
        fontSize: 0.6
        opacityScale: 1
        showTags: true
        removeTags:
          - fixture
        focusOnHover: true
        enableRadial: true
    order: 50
    layout:
      position: right
      priority: 10
 
  - source: "@quartz-community/explorer"
    enabled: true
    options:
      title: Sandbox files
      folderDefaultState: collapsed
      folderClickBehavior: link
      useSavedState: true
    order: 50
    layout:
      position: left
      priority: 50

The graph options are nested objects because the plugin sends them directly to its local and global graph constructors. depth: 2, showTags: true, enableRadial: true, and the removeTags list are the sandbox-specific tuning knobs.

Content used

- [ [experiments/mermaid-diagrams|Mermaid] ] links to [ [config/index|configuration] ].
- [ [experiments/latex-katex|KaTeX] ] links to [ [experiments/callouts-and-nesting|callouts] ].
- [ [experiments/wikilinks-and-transclusion|Transclusion] ] links to its fixture.
- [ [plugins/index|Plugin roster] ] links back to every active surface.

What the rendered output proves

The static DOM contains .graph, .graph-container with a data-cfg JSON payload, and a .global-graph-container with its own payload. It also contains the explorer’s .explorer.nav-files-container, data-behavior="link", data-collapsed="collapsed", and data-savestate="true" attributes. The graph’s SVG nodes and the explorer’s populated tree are hydrated by their client scripts from contentIndex.json; the containers and exact configuration are already in the document before hydration.

safe_for_shared_engine

true — both components are opt-in layout additions and read existing content-index data; no Markdown or route semantics change, and a wiki can remove them with one config entry.

Graph View

Backlinks