fix: make the runtime work with groups

app/src/lib/runtime/runtime-executor.test.ts

@@ -0,0 +1,154 @@
+import { describe, expect, it } from 'vitest';
+import { expandGroups } from './runtime-executor';
+import type { Graph } from '@nodarium/types';
+
+// Helpers to build minimal serialized nodes/edges
+function node(id: number, type: string, props?: Record<string, number>) {
+  return { id, type: type as Graph['nodes'][0]['type'], position: [0, 0] as [number, number], ...(props ? { props } : {}) };
+}
+
+function edge(from: number, fromSocket: number, to: number, toSocket: string): [number, number, number, string] {
+  return [from, fromSocket, to, toSocket];
+}
+
+describe('expandGroups', () => {
+  it('returns graph unchanged when there are no groups', () => {
+    const graph: Graph = {
+      id: 1,
+      nodes: [node(0, 'test/node/output'), node(1, 'test/node/input')],
+      edges: [edge(0, 0, 1, 'value')],
+      groups: []
+    };
+
+    const result = expandGroups(graph);
+
+    expect(result.nodes.length).toBe(2);
+    expect(result.edges.length).toBe(1);
+    expect(result).toBe(graph); // same reference — no copy needed
+  });
+
+  it('expands a simple group: A → [B] → C rewires to A → B → C', () => {
+    // IDs: A=1, B=2, C=3, groupNode=4, group.id=5, inputBoundary=6, outputBoundary=7
+    const groupId = 5;
+    const groupNodeId = 4;
+    const remappedB = (groupNodeId + 1) * 1_000_000 + 2; // 5_000_002
+
+    const graph: Graph = {
+      id: 1,
+      nodes: [
+        node(1, 'test/node/output'),
+        node(groupNodeId, '__internal/group/instance', { groupId }),
+        node(3, 'test/node/input')
+      ],
+      edges: [
+        edge(1, 0, groupNodeId, 'input_0'),  // A → group
+        edge(groupNodeId, 0, 3, 'value')     // group → C
+      ],
+      groups: [{
+        id: groupId,
+        nodes: [
+          node(6, '__internal/group/input'),
+          node(2, 'test/node/output'),
+          node(7, '__internal/group/output')
+        ],
+        edges: [
+          edge(6, 0, 2, 'input'),  // inputBoundary → B
+          edge(2, 0, 7, 'Out')     // B → outputBoundary
+        ],
+        inputs: { input_0: { type: 'float' } },
+        outputs: [{ type: 'float', label: 'Output 0' }]
+      }]
+    };
+
+    const result = expandGroups(graph);
+
+    const ids = result.nodes.map(n => n.id);
+    expect(ids).not.toContain(groupNodeId);
+    expect(ids).toContain(remappedB);
+    expect(ids).toContain(1); // A
+    expect(ids).toContain(3); // C
+    expect(result.nodes.length).toBe(3); // A, B(remapped), C
+
+    expect(result.edges).toContainEqual(edge(1, 0, remappedB, 'input'));   // A → B
+    expect(result.edges).toContainEqual(edge(remappedB, 0, 3, 'value')); // B → C
+    expect(result.edges.length).toBe(2);
+  });
+
+  it('expands a group with two internal nodes (B→D) and preserves the internal edge', () => {
+    // A → [B → D] → C
+    const groupId = 10;
+    const groupNodeId = 5;
+    const remappedB = (groupNodeId + 1) * 1_000_000 + 1; // 6_000_001
+    const remappedD = (groupNodeId + 1) * 1_000_000 + 2; // 6_000_002
+
+    const graph: Graph = {
+      id: 1,
+      nodes: [
+        node(0, 'test/node/output'),
+        node(groupNodeId, '__internal/group/instance', { groupId }),
+        node(9, 'test/node/input')
+      ],
+      edges: [
+        edge(0, 0, groupNodeId, 'input_0'),
+        edge(groupNodeId, 0, 9, 'value')
+      ],
+      groups: [{
+        id: groupId,
+        nodes: [
+          node(3, '__internal/group/input'),
+          node(1, 'test/node/output'),  // B
+          node(2, 'test/node/output'),  // D
+          node(4, '__internal/group/output')
+        ],
+        edges: [
+          edge(3, 0, 1, 'input'),  // inputBoundary → B
+          edge(1, 0, 2, 'input'),  // B → D (internal)
+          edge(2, 0, 4, 'Out')     // D → outputBoundary
+        ],
+        inputs: { input_0: { type: 'float' } },
+        outputs: [{ type: 'float' }]
+      }]
+    };
+
+    const result = expandGroups(graph);
+
+    expect(result.nodes.map(n => n.id)).not.toContain(groupNodeId);
+    expect(result.nodes.map(n => n.id)).toContain(remappedB);
+    expect(result.nodes.map(n => n.id)).toContain(remappedD);
+
+    expect(result.edges).toContainEqual(edge(0, 0, remappedB, 'input'));    // A → B
+    expect(result.edges).toContainEqual(edge(remappedB, 0, remappedD, 'input')); // B → D (internal)
+    expect(result.edges).toContainEqual(edge(remappedD, 0, 9, 'value'));    // D → C
+    expect(result.edges.length).toBe(3);
+  });
+
+  it('expands a group with no external connections (isolated)', () => {
+    const groupId = 20;
+    const groupNodeId = 1;
+    const remappedB = (groupNodeId + 1) * 1_000_000 + 2; // 2_000_002
+
+    const graph: Graph = {
+      id: 1,
+      nodes: [node(groupNodeId, '__internal/group/instance', { groupId })],
+      edges: [],
+      groups: [{
+        id: groupId,
+        nodes: [
+          node(3, '__internal/group/input'),
+          node(2, 'test/node/output'),
+          node(4, '__internal/group/output')
+        ],
+        edges: [
+          edge(3, 0, 2, 'input'),
+          edge(2, 0, 4, 'Out')
+        ]
+      }]
+    };
+
+    const result = expandGroups(graph);
+
+    expect(result.nodes.map(n => n.id)).not.toContain(groupNodeId);
+    expect(result.nodes.map(n => n.id)).toContain(remappedB);
+    expect(result.edges.length).toBe(0);
+  });
+});

app/src/lib/runtime/runtime-executor.ts

@@ -7,18 +7,11 @@ import type {
   SyncCache
 } from '@nodarium/types';
 
-function isGroupInstanceType(type: string): boolean {
-  return type === '__virtual/group/instance';
-}
-
 export function expandGroups(graph: Graph): Graph {
-  if (!graph.groups || Object.keys(graph.groups).length === 0) {
+  if (!graph.groups || graph.groups.length === 0) return graph;
-    return graph;
-  }
 
   let nodes = [...graph.nodes];
   let edges = [...graph.edges];
-  const groups = graph.groups;
 
   let changed = true;
   while (changed) {
@@ -26,120 +19,69 @@ export function expandGroups(graph: Graph): Graph {
 
     for (let i = 0; i < nodes.length; i++) {
       const node = nodes[i];
-      if (!isGroupInstanceType(node.type)) continue;
+      if (node.type !== '__internal/group/instance') continue;
 
-      const groupId = (node.props as Record<string, unknown> | undefined)?.groupId as
+      const groupId = node.props?.groupId as number | undefined;
-        | string
+      if (groupId === undefined) continue;
-        | undefined;
+
-      if (!groupId) continue;
+      const group = graph.groups.find(g => g.id === groupId);
-      const group = groups[groupId];
       if (!group) continue;
 
       changed = true;
 
-      // Recursively expand nested groups inside this group's internal graph
+      const ID_OFFSET = (node.id + 1) * 1_000_000;
-      const expandedInternal = expandGroups({
-        id: 0,
-        nodes: group.graph.nodes,
-        edges: group.graph.edges,
-        groups
-      });
-
-      const ID_PREFIX = node.id * 1000000;
       const idMap = new Map<number, number>();
 
-      const inputVirtualNode = expandedInternal.nodes.find(
+      const inputBoundary = group.nodes.find(n => n.type === '__internal/group/input');
-        n => n.type === '__virtual/group/input'
+      const outputBoundary = group.nodes.find(n => n.type === '__internal/group/output');
-      );
+
-      const outputVirtualNode = expandedInternal.nodes.find(
+      const realNodes = group.nodes.filter(
-        n => n.type === '__virtual/group/output'
+        n => n.type !== '__internal/group/input' && n.type !== '__internal/group/output'
       );
 
-      const realInternalNodes = expandedInternal.nodes.filter(
+      for (const n of realNodes) idMap.set(n.id, ID_OFFSET + n.id);
-        n => n.type !== '__virtual/group/input' && n.type !== '__virtual/group/output'
-      );
-
-      for (const n of realInternalNodes) {
-        idMap.set(n.id, ID_PREFIX + n.id);
-      }
-
-      const parentIncomingEdges = edges.filter(e => e[2] === node.id);
-      const parentOutgoingEdges = edges.filter(e => e[0] === node.id);
-
-      // Edges from/to virtual nodes in the expanded internal graph
-      const edgesFromInput = expandedInternal.edges.filter(
-        e => e[0] === inputVirtualNode?.id
-      );
-      const edgesToOutput = expandedInternal.edges.filter(
-        e => e[2] === outputVirtualNode?.id
-      );
 
+      const incomingExternal = edges.filter(e => e[2] === node.id);
+      const outgoingExternal = edges.filter(e => e[0] === node.id);
       const newEdges: Graph['edges'] = [];
 
-      // Short-circuit: parent source → internal target (via group input)
+      // external_source → [inputBoundary →] internal_target
-      for (const parentEdge of parentIncomingEdges) {
+      if (inputBoundary) {
-        const socketName = parentEdge[3];
+        const fromInput = group.edges.filter(e => e[0] === inputBoundary.id);
-        const socketIdx = group.inputs.findIndex(s => s.name === socketName);
+        for (const extEdge of incomingExternal) {
-        if (socketIdx === -1) continue;
+          for (const intEdge of fromInput) {
-
+            const toId = idMap.get(intEdge[2]);
-        for (const internalEdge of edgesFromInput.filter(e => e[1] === socketIdx)) {
+            if (toId !== undefined) newEdges.push([extEdge[0], extEdge[1], toId, intEdge[3]]);
-          const remappedId = idMap.get(internalEdge[2]);
-          if (remappedId !== undefined) {
-            newEdges.push([parentEdge[0], parentEdge[1], remappedId, internalEdge[3]]);
           }
         }
       }
 
-      // Short-circuit: internal source → parent target (via group output)
+      // internal_source → [outputBoundary →] external_target
-      for (const parentEdge of parentOutgoingEdges) {
+      if (outputBoundary) {
-        const outputIdx = parentEdge[1];
+        const toOutput = group.edges.filter(e => e[2] === outputBoundary.id);
-        const outputSocketName = group.outputs[outputIdx]?.name;
+        for (const extEdge of outgoingExternal) {
-        if (!outputSocketName) continue;
+          for (const intEdge of toOutput) {
-
+            const fromId = idMap.get(intEdge[0]);
-        for (const internalEdge of edgesToOutput.filter(e => e[3] === outputSocketName)) {
+            if (fromId !== undefined) newEdges.push([fromId, intEdge[1], extEdge[2], extEdge[3]]);
-          const remappedId = idMap.get(internalEdge[0]);
-          if (remappedId !== undefined) {
-            newEdges.push([remappedId, internalEdge[1], parentEdge[2], parentEdge[3]]);
           }
         }
       }
 
-      // Remap internal-to-internal edges
+      // internal-to-internal edges (skip boundary edges)
-      const internalEdges = expandedInternal.edges.filter(
+      for (const e of group.edges) {
-        e =>
+        if (e[0] === inputBoundary?.id || e[2] === outputBoundary?.id) continue;
-          e[0] !== inputVirtualNode?.id
-          && e[0] !== outputVirtualNode?.id
-          && e[2] !== inputVirtualNode?.id
-          && e[2] !== outputVirtualNode?.id
-      );
-
-      for (const e of internalEdges) {
         const fromId = idMap.get(e[0]);
         const toId = idMap.get(e[2]);
-        if (fromId !== undefined && toId !== undefined) {
+        if (fromId !== undefined && toId !== undefined) newEdges.push([fromId, e[1], toId, e[3]]);
-          newEdges.push([fromId, e[1], toId, e[3]]);
-        }
       }
 
-      // Remove the group node
       nodes.splice(i, 1);
+      for (const n of realNodes) nodes.push({ ...n, id: idMap.get(n.id)! });
 
-      // Add remapped internal nodes
+      edges = edges.filter(e => e[0] !== node.id && e[2] !== node.id);
-      for (const n of realInternalNodes) {
-        nodes.push({ ...n, id: idMap.get(n.id)! });
-      }
-
-      // Remove group node's edges and add short-circuit edges
-      const groupEdgeKeys = new Set([
-        ...parentIncomingEdges.map(e => `${e[0]}-${e[1]}-${e[2]}-${e[3]}`),
-        ...parentOutgoingEdges.map(e => `${e[0]}-${e[1]}-${e[2]}-${e[3]}`)
-      ]);
-      edges = edges.filter(
-        e => !groupEdgeKeys.has(`${e[0]}-${e[1]}-${e[2]}-${e[3]}`)
-      );
       edges.push(...newEdges);
 
-      break; // Restart loop with updated nodes array
+      break;
     }
   }
 

packages/ui/src/lib/inputs/InputSelect.svelte

@@ -6,13 +6,6 @@
   }
 
   let { options = [], value = $bindable(0), id = '' }: Props = $props();
-
-  $effect(() => {
-    console.log({ options, value });
-    if (typeof value !== typeof options[0]) {
-      console.trace('WARNING: value type does not match options type');
-    }
-  });
 </script>
 
 <select {id} bind:value class="bg-layer-2 text-text">