feat: switch economy graph from layered to force-directed layout (#2108)

The layered algorithm compressed all nodes into a narrow horizontal band,
requiring zoom to read. The force-directed (Fruchterman-Reingold) algorithm
naturally fills available space - highly connected nodes like GBP gravitate
to center with related nodes radiating outward.

ELK's radial algorithm was tested but requires tree topology and collapsed
non-tree nodes to identical positions. Force handles arbitrary graph
topologies and produces organic, space-filling layouts.

Co-authored-by: Ben Coombs <bjcoombs@users.noreply.github.com>

Author: bjcoombs

frontend/src/features/manifests/components/manifest-graph.tsx

@@ -42,7 +42,7 @@ import {
   type ManifestNodeType,
   type ManifestGraph as ManifestGraphModel,
 } from '../lib/manifest-graph-model'
-import { NODE_TYPE_REGISTRY, getNodeThemes, getLayerPriority } from '../lib/node-type-registry'
+import { NODE_TYPE_REGISTRY, getNodeThemes } from '../lib/node-type-registry'
 import type { Manifest } from '@/api/gen/meridian/control_plane/v1/manifest_pb'
 import { useEventChain } from '../hooks/use-event-chain'
 import { EventChainPanel } from './event-chain-panel'
@@ -64,7 +64,7 @@ const EDGE_LEGEND: { label: string; color: string; dashed?: boolean }[] = [
   { label: 'Converts to', color: 'var(--graph-valuation-rule)' },
 ]
 
-const LAYER_PRIORITY = getLayerPriority()
+
 
 // Trigger type display
 function getTriggerBadge(trigger: string): { label: string; variant: string } {
@@ -592,9 +592,6 @@ async function layoutManifestGraph(
     id: n.id,
     width: NODE_WIDTH,
     height: NODE_BASE_HEIGHT + NODE_PADDING,
-    layoutOptions: {
-      'elk.layered.layering.layerChoiceConstraint': LAYER_PRIORITY[n.type],
-    },
   }))
 
   const rfEdges = buildReactFlowEdges(filteredEdges)
@@ -619,9 +616,12 @@ async function layoutManifestGraph(
       }
     },
     {
-      direction: 'DOWN',
-      nodeNodeSpacing: '50',
-      layerSpacing: '80',
+      algorithm: 'force',
+      nodeNodeSpacing: '80',
+      extra: {
+        'elk.force.iterations': '300',
+        'elk.force.repulsion': '5.0',
+      },
     },
   )
 

frontend/src/lib/visualization/graph-layout.ts

@@ -21,6 +21,8 @@ export interface ELKLayoutOptions {
   direction?: string
   nodeNodeSpacing?: string
   layerSpacing?: string
+  /** Additional ELK layout options passed through verbatim. */
+  extra?: Record<string, string>
 }
 
 export interface LayoutNode {
@@ -53,14 +55,24 @@ export async function layoutWithELK<T extends Record<string, unknown>>(
     targets: [e.target],
   }))
 
+  const algorithm = options?.algorithm ?? 'layered'
+  const layoutOptions: Record<string, string> = {
+    'elk.algorithm': algorithm,
+    'elk.spacing.nodeNode': options?.nodeNodeSpacing ?? '60',
+  }
+
+  if (algorithm === 'layered') {
+    layoutOptions['elk.direction'] = options?.direction ?? 'DOWN'
+    layoutOptions['elk.layered.spacing.nodeNodeBetweenLayers'] = options?.layerSpacing ?? '100'
+  }
+
+  if (options?.extra) {
+    Object.assign(layoutOptions, options.extra)
+  }
+
   const layout = await elk.layout({
     id: 'root',
-    layoutOptions: {
-      'elk.algorithm': options?.algorithm ?? 'layered',
-      'elk.direction': options?.direction ?? 'DOWN',
-      'elk.spacing.nodeNode': options?.nodeNodeSpacing ?? '60',
-      'elk.layered.spacing.nodeNodeBetweenLayers': options?.layerSpacing ?? '100',
-    },
+    layoutOptions,
     children: elkNodes,
     edges: elkEdges,
   })