ui: NodeGraph: Add options to the demo code for testing (#3480)

<img width="881" height="528" alt="image"
src="https://github.com/user-attachments/assets/ab264a16-b83e-4e46-80e4-e837bec6e41a"
/>

Author: stevegolton

ui/src/assets/widgets/nodegraph.scss

@@ -71,11 +71,22 @@
   left: 0;
   width: 10px;
   height: 100%;
-  background: hsl(var(--pf-node-hue, 210), 60%, 50%);
+  background-color: var(
+    --pf-color-border
+  ); /* Fallback color when hue not set */
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
 }
 
+/* Override with hue-based color when --pf-node-hue is set via inline styles */
+.pf-node[style*="--pf-node-hue"].pf-node--has-accent-bar::before {
+  background: color-mix(
+    in srgb,
+    hsl(var(--pf-node-hue), 60%, 50%) 50%,
+    var(--pf-color-background)
+  );
+}
+
 .pf-node-body {
   padding-block: 12px;
 }
@@ -137,13 +148,9 @@
 }
 
 .pf-node-header {
-  background: color-mix(
-    in srgb,
-    hsl(var(--pf-node-hue, 210), 60%, 50%) 50%,
-    var(--pf-color-background)
-  );
-  padding: 8px 12px;
-  font-weight: bold;
+  /* Default background when hue is not set */
+  background: var(--pf-color-background);
+  padding: 6px 12px;
   border-radius: 6px 6px 0 0;
   display: flex;
   border-bottom: 1px solid var(--pf-color-border);
@@ -152,6 +159,19 @@
   gap: 8px;
 }
 
+/* Override with hue-based color when --pf-node-hue is set via inline styles */
+.pf-node[style*="--pf-node-hue"] .pf-node-header {
+  background: color-mix(
+    in srgb,
+    hsl(var(--pf-node-hue), 60%, 50%) 50%,
+    var(--pf-color-background)
+  );
+}
+
+.pf-node--has-accent-bar .pf-node-header {
+  padding-left: 22px;
+}
+
 .pf-docked-child .pf-node-header {
   border-top-left-radius: 0;
   border-top-right-radius: 0;

ui/src/plugins/dev.perfetto.WidgetsPage/nodegraph_demo.ts

@@ -41,15 +41,14 @@ interface NodeTemplate {
   inputs: string[];
   outputs: string[];
   content?: m.Children;
-  allInputsLeft?: boolean;
 }
 
 interface NodeGraphDemoAttrs {
   readonly titleBars?: boolean;
   readonly accentBars?: boolean;
   readonly allInputsLeft?: boolean;
   readonly allOutputsRight?: boolean;
-  readonly multiselect?: boolean;
+  readonly colors?: boolean;
 }
 
 export function NodeGraphDemo(): m.Component<NodeGraphDemoAttrs> {
@@ -190,7 +189,6 @@ export function NodeGraphDemo(): m.Component<NodeGraphDemoAttrs> {
     join: {
       inputs: ['Left', 'Right'],
       outputs: ['Output'],
-      allInputsLeft: true,
       content: m(
         '',
         {style: {display: 'flex', flexDirection: 'column', gap: '4px'}},
@@ -231,89 +229,97 @@ export function NodeGraphDemo(): m.Component<NodeGraphDemoAttrs> {
     return Array.from(modelNodes.keys()).filter((id) => !referenced.has(id));
   }
 
-  // Render model state into NodeGraph nodes
-  function renderNodes(): Node[] {
-    const rootIds = getRootNodeIds();
-    return rootIds
-      .map((id) => {
-        const model = modelNodes.get(id);
-        if (!model) return null;
-        return renderNodeChain(model);
-      })
-      .filter((n): n is Node => n !== null);
-  }
-
-  // Render a model node and its chain
-  function renderNodeChain(model: ModelNode): Node {
-    const template = nodeTemplates[model.type];
-    const hasNext = model.nextId !== undefined;
-    const nextModel = hasNext ? modelNodes.get(model.nextId!) : undefined;
-    const allInputsLeft = template.allInputsLeft ?? false;
-
-    return {
-      id: model.id,
-      x: model.x,
-      y: model.y,
-      inputs: template.inputs,
-      outputs: template.outputs,
-      content: template.content,
-      next: nextModel ? renderChildNode(nextModel) : undefined,
-      allInputsLeft,
-      accentBar: true,
-      hue: nodeHues[model.type],
-      addMenuItems: [
-        m(MenuItem, {
-          label: 'Select',
-          icon: 'filter_alt',
-          onclick: () => addNode('select', model.id),
-        }),
-        m(MenuItem, {
-          label: 'Filter',
-          icon: 'filter_list',
-          onclick: () => addNode('filter', model.id),
-        }),
-      ],
-    };
-  }
+  const connections: Connection[] = [];
 
-  // Render child node (keep all ports visible)
-  function renderChildNode(model: ModelNode): Omit<Node, 'x' | 'y'> {
-    const template = nodeTemplates[model.type];
-    const hasNext = model.nextId !== undefined;
-    const nextModel = hasNext ? modelNodes.get(model.nextId!) : undefined;
+  return {
+    view: ({attrs}: m.Vnode<NodeGraphDemoAttrs>) => {
+      // Render a model node and its chain
+      function renderNodeChain(model: ModelNode): Node {
+        const template = nodeTemplates[model.type];
+        const hasNext = model.nextId !== undefined;
+        const nextModel = hasNext ? modelNodes.get(model.nextId!) : undefined;
+
+        return {
+          id: model.id,
+          x: model.x,
+          y: model.y,
+          inputs: template.inputs,
+          outputs: template.outputs,
+          content: template.content,
+          next: nextModel ? renderChildNode(nextModel) : undefined,
+          allInputsLeft: attrs.allInputsLeft,
+          allOutputsRight: attrs.allOutputsRight,
+          accentBar: attrs.accentBars,
+          titleBar: attrs.titleBars
+            ? {title: model.type.toUpperCase()}
+            : undefined,
+          hue: attrs.colors ? nodeHues[model.type] : undefined,
+          addMenuItems: [
+            m(MenuItem, {
+              label: 'Select',
+              icon: 'filter_alt',
+              onclick: () => addNode('select', model.id),
+            }),
+            m(MenuItem, {
+              label: 'Filter',
+              icon: 'filter_list',
+              onclick: () => addNode('filter', model.id),
+            }),
+          ],
+        };
+      }
 
-    return {
-      id: model.id,
-      inputs: template.inputs,
-      outputs: template.outputs,
-      content: template.content,
-      next: nextModel ? renderChildNode(nextModel) : undefined,
-      accentBar: true,
-      hue: nodeHues[model.type],
-      addMenuItems: [
-        m(MenuItem, {
-          label: 'Select',
-          icon: 'filter_alt',
-          onclick: () => addNode('select', model.id),
-        }),
-        m(MenuItem, {
-          label: 'Filter',
-          icon: 'filter_list',
-          onclick: () => addNode('filter', model.id),
-        }),
-        m(MenuItem, {
-          label: 'Join',
-          icon: 'join',
-          onclick: () => addNode('join', model.id),
-        }),
-      ],
-    };
-  }
+      // Render child node (keep all ports visible)
+      function renderChildNode(model: ModelNode): Omit<Node, 'x' | 'y'> {
+        const template = nodeTemplates[model.type];
+        const hasNext = model.nextId !== undefined;
+        const nextModel = hasNext ? modelNodes.get(model.nextId!) : undefined;
+
+        return {
+          id: model.id,
+          inputs: template.inputs,
+          outputs: template.outputs,
+          content: template.content,
+          next: nextModel ? renderChildNode(nextModel) : undefined,
+          allInputsLeft: attrs.allInputsLeft,
+          allOutputsRight: attrs.allOutputsRight,
+          accentBar: attrs.accentBars,
+          titleBar: attrs.titleBars
+            ? {title: model.type.toUpperCase()}
+            : undefined,
+          hue: attrs.colors ? nodeHues[model.type] : undefined,
+          addMenuItems: [
+            m(MenuItem, {
+              label: 'Select',
+              icon: 'filter_alt',
+              onclick: () => addNode('select', model.id),
+            }),
+            m(MenuItem, {
+              label: 'Filter',
+              icon: 'filter_list',
+              onclick: () => addNode('filter', model.id),
+            }),
+            m(MenuItem, {
+              label: 'Join',
+              icon: 'join',
+              onclick: () => addNode('join', model.id),
+            }),
+          ],
+        };
+      }
 
-  const connections: Connection[] = [];
+      // Render model state into NodeGraph nodes
+      function renderNodes(): Node[] {
+        const rootIds = getRootNodeIds();
+        return rootIds
+          .map((id) => {
+            const model = modelNodes.get(id);
+            if (!model) return null;
+            return renderNodeChain(model);
+          })
+          .filter((n): n is Node => n !== null);
+      }
 
-  return {
-    view: () => {
       return m('div', [
         // Add Node button
         m(

ui/src/plugins/dev.perfetto.WidgetsPage/widgets_page.ts

@@ -1654,8 +1654,14 @@ export class WidgetsPage implements m.ClassComponent<{app: App}> {
         description:
           'Scroll left and right to pan / pinch to zoom. Drag nodes from output to input ports to connect nodes. Click connectors or drag outputs away from ports to remove connections.',
         wide: true,
-        renderWidget: () => m(NodeGraphDemo),
-        initialOpts: {},
+        renderWidget: (opts) => m(NodeGraphDemo, opts),
+        initialOpts: {
+          titleBars: false,
+          accentBars: false,
+          allInputsLeft: false,
+          allOutputsRight: false,
+          colors: false,
+        },
       }),
     );
   }