feat(graph-viewer): add dag layout configuration controls (visgl#359)

Author: ibgreen

examples/graph-layers/graph-viewer/app.tsx

@@ -34,7 +34,8 @@ import {
   D3DagLayout
 } from '@deck.gl-community/graph-layers';
 
-import {ControlPanel, ExampleDefinition, LayoutType} from './control-panel';
+import {ControlPanel} from './control-panel';
+import type {LayoutType, ExampleDefinition} from './layout-options';
 import {CollapseControls} from './collapse-controls';
 import {StylesheetEditor} from './stylesheet-editor';
 import {DEFAULT_EXAMPLE, EXAMPLES} from './examples';
@@ -110,18 +111,30 @@ export function App(props) {
   const [selectedExample, setSelectedExample] = useState<ExampleDefinition | undefined>(DEFAULT_EXAMPLE);
   const [selectedLayout, setSelectedLayout] = useState<LayoutType>(DEFAULT_LAYOUT);
   const [collapseEnabled, setCollapseEnabled] = useState(true);
+  const [layoutOverrides, setLayoutOverrides] = useState<
+    Partial<Record<LayoutType, Record<string, unknown>>>
+  >({});
   const [dagChainSummary, setDagChainSummary] = useState<
     {chainIds: string[]; collapsedIds: string[]}
     | null>(null);
 
   const graphData = useMemo(() => selectedExample?.data(), [selectedExample]);
-  const layoutOptions = useMemo(
-    () =>
-      selectedExample && selectedLayout && graphData
-        ? selectedExample.getLayoutOptions?.(selectedLayout, graphData)
-        : undefined,
-    [selectedExample, selectedLayout, graphData]
-  );
+  const layoutOptions = useMemo(() => {
+    if (!selectedExample || !selectedLayout) {
+      return undefined;
+    }
+
+    const baseOptions = graphData
+      ? selectedExample.getLayoutOptions?.(selectedLayout, graphData)
+      : undefined;
+    const overrides = layoutOverrides[selectedLayout];
+
+    if (baseOptions && overrides) {
+      return {...baseOptions, ...overrides};
+    }
+
+    return overrides ?? baseOptions;
+  }, [selectedExample, selectedLayout, graphData, layoutOverrides]);
   const graph = useMemo(() => (graphData ? JSONLoader({json: graphData}) : null), [graphData]);
   const layout = useMemo(() => {
     if (!selectedLayout) {
@@ -345,6 +358,13 @@ export function App(props) {
     setSelectedLayout(layoutType);
   }, []);
 
+  const handleApplyLayoutOptions = useCallback(
+    (layoutType: LayoutType, options: Record<string, unknown>) => {
+      setLayoutOverrides((current) => ({...current, [layoutType]: options}));
+    },
+    []
+  );
+
   return (
     <div
       style={{
@@ -435,6 +455,8 @@ export function App(props) {
           examples={EXAMPLES}
           defaultExample={DEFAULT_EXAMPLE}
           onExampleChange={handleExampleChange}
+          layoutOptions={layoutOptions}
+          onLayoutOptionsApply={handleApplyLayoutOptions}
         >
           <>
             {isDagLayout ? (

examples/graph-layers/graph-viewer/control-panel.tsx

@@ -4,54 +4,25 @@
 
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import type {ReactNode} from 'react';
-import type {GraphLayerProps} from '@deck.gl-community/graph-layers';
-
-export type LayoutType =
-  | 'd3-force-layout'
-  | 'gpu-force-layout'
-  | 'simple-layout'
-  | 'radial-layout'
-  | 'hive-plot-layout'
-  | 'force-multi-graph-layout'
-  | 'd3-dag-layout';
-
-export type ExampleStyles = NonNullable<GraphLayerProps['stylesheet']>;
-
-export type ExampleDefinition = {
-  name: string;
-  description: string;
-  data: () => {nodes: unknown[]; edges: unknown[]};
-  /** First listed layout is the default */
-  layouts: LayoutType[];
-  layoutDescriptions: Record<LayoutType, string>;
-  style: ExampleStyles;
-  getLayoutOptions?: (
-    layout: LayoutType,
-    data: {nodes: unknown[]; edges: unknown[]}
-  ) => Record<string, unknown> | undefined;
-};
+import type {ExampleDefinition, LayoutType} from './layout-options';
+import {LAYOUT_LABELS} from './layout-options';
+import {LayoutOptionsPanel} from './layout-options-panel';
 
 type ControlPanelProps = {
   examples: ExampleDefinition[];
   defaultExample?: ExampleDefinition;
   onExampleChange: (example: ExampleDefinition, layout: LayoutType) => void;
   children?: ReactNode;
-};
-
-const LAYOUT_LABELS: Record<LayoutType, string> = {
-  'd3-force-layout': 'D3 Force Layout',
-  'gpu-force-layout': 'GPU Force Layout',
-  'simple-layout': 'Simple Layout',
-  'radial-layout': 'Radial Layout',
-  'hive-plot-layout': 'Hive Plot Layout',
-  'force-multi-graph-layout': 'Force Multi-Graph Layout',
-  'd3-dag-layout': 'D3 DAG Layout',
+  layoutOptions?: Record<string, unknown>;
+  onLayoutOptionsApply?: (layout: LayoutType, options: Record<string, unknown>) => void;
 };
 
 export function ControlPanel({
   examples,
   defaultExample,
   onExampleChange,
+  layoutOptions,
+  onLayoutOptionsApply,
   children
 }: ControlPanelProps) {
   const resolveExampleIndex = useCallback(
@@ -74,6 +45,7 @@ export function ControlPanel({
   const [selectedLayout, setSelectedLayout] = useState<LayoutType | undefined>(
     availableLayouts[0]
   );
+  
   useEffect(() => {
     if (!availableLayouts.length) {
       setSelectedLayout(undefined);
@@ -122,6 +94,19 @@ export function ControlPanel({
     return selectedExample.layoutDescriptions[selectedLayout];
   }, [selectedExample, selectedLayout]);
 
+  const styleJson = useMemo(() => {
+    const styles = selectedExample?.style;
+    if (!styles) {
+      return '';
+    }
+
+    return JSON.stringify(
+      styles,
+      (_key, value) => (typeof value === 'function' ? value.toString() : value),
+      2
+    );
+  }, [selectedExample]);
+
   if (!examples.length) {
     return null;
   }
@@ -172,6 +157,25 @@ export function ControlPanel({
             </option>
           ))}
         </select>
+      </div>
+      {datasetDescription ? (
+        <section style={{fontSize: '0.875rem', lineHeight: 1.5, color: '#334155'}}>
+          <h3 style={{margin: '0 0 0.25rem', fontSize: '0.875rem', fontWeight: 600, color: '#0f172a'}}>
+            Dataset overview
+          </h3>
+          <p style={{margin: 0}}>{datasetDescription}</p>
+        </section>
+      ) : null}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'auto 1fr',
+          gridAutoRows: 'auto',
+          columnGap: '0.75rem',
+          rowGap: '0.75rem',
+          alignItems: 'center'
+        }}
+      >
         <label htmlFor="graph-viewer-layout" style={{fontSize: '0.875rem', fontWeight: 600, color: '#0f172a'}}>
           Layout
         </label>
@@ -197,14 +201,11 @@ export function ControlPanel({
           ))}
         </select>
       </div>
-      {datasetDescription ? (
-        <section style={{fontSize: '0.875rem', lineHeight: 1.5, color: '#334155'}}>
-          <h3 style={{margin: '0 0 0.25rem', fontSize: '0.875rem', fontWeight: 600, color: '#0f172a'}}>
-            Dataset overview
-          </h3>
-          <p style={{margin: 0}}>{datasetDescription}</p>
-        </section>
-      ) : null}
+      <LayoutOptionsPanel
+        layout={selectedLayout}
+        appliedOptions={layoutOptions}
+        onApply={onLayoutOptionsApply}
+      />
       {children ? (
         <section
           style={{

examples/graph-layers/graph-viewer/examples.ts

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import {SAMPLE_GRAPH_DATASETS} from '../../../modules/graph-layers/test/data/graphs/sample-datasets';
-import type {ExampleDefinition, ExampleStyles, LayoutType} from './control-panel';
+import type {ExampleDefinition, ExampleStyles, LayoutType} from './layout-options';
 import witsRaw from '../../../modules/graph-layers/test/data/examples/wits.json';
 import sampleMultiGraph from './sample-multi-graph.json';