Immersive graph background

architecture:

• file_paths:
  • target: quartz/components/Graph.tsx
  • target: quartz/components/scripts/graph.inline.ts
  • target: quartz/styles/base.scss
  • target: quartz.layout.ts
• rendering_engine:
  • dependency: D3.js
  • constraint: abandon Pixi.js
  • configuration: update D3.js scale parameters in graph.inline.ts to span the entire screen responsively

styling:

• graph_container:
  • targets: .global-graph-outer
  • properties: position: fixed; inset: 0; height: 100vh; width: 100vw;
  • layout: z-index: -1;
• document_layers:
  • targets: .page, .center, article
  • properties: background-color: transparent;

state_management:

• ui_toggle:
  • injection: quartz.layout.ts header config
  • properties: discrete React toggle component
  • behavior: swap opacity and z-index between content article and the graph background
• visibility_swap:
  • graph_view:
    • article_state: pointer-events: none; visibility: hidden; aria-hidden="true"; opacity: 0;
    • graph_state: pointer-events: auto; z-index: 10; opacity: 1;
  • article_view:
    • article_state: pointer-events: auto; visibility: visible; aria-hidden="false"; opacity: 1;
    • graph_state: pointer-events: none; z-index: -1; opacity: 0.5;

lifecycle_hooks:

• physics_engine:
  • sleep: simulation.stop() on graph hide
  • wake: simulation.alpha(1).restart() on graph reveal
  • scale_bounds: recalculate boundaries for D3.js to fit 100vw by 100vh on window resize
• spa_navigation:
  • listener: nav document event
  • action: update active node highlight bypassing full re-initialization