Put metadata in the nodes.

server/main.py

@@ -13,7 +13,7 @@ app = fastapi.FastAPI()
 
 @app.get("/api/catalog")
 def get_catalog():
-    return [op.model_dump() for op in ops.ALL_OPS.values()]
+    return {op.name: op.model_dump() for op in ops.ALL_OPS.values()}
 
 
 class SaveRequest(workspace.BaseConfig):

server/workspace.py

@@ -93,4 +93,34 @@ def load(path: str):
     with open(path) as f:
         j = f.read()
     ws = Workspace.model_validate_json(j)
+    # Metadata is added after loading. This way code changes take effect on old boxes too.
+    _update_metadata(ws)
+    return ws
+
+
+def _update_metadata(ws):
+    nodes = {node.id: node for node in ws.nodes}
+    done = set()
+    while len(done) < len(nodes):
+        for node in ws.nodes:
+            if node.id in done:
+                continue
+            data = node.data
+            if node.parentId is None:
+                op = ops.ALL_OPS.get(data.title)
+            elif node.parentId not in nodes:
+                data.error = f'Parent not found: {node.parentId}'
+                done.add(node.id)
+                continue
+            elif node.parentId in done:
+                op = nodes[node.parentId].data.meta.sub_nodes[data.title]
+            else:
+                continue
+            if op:
+                data.meta = op
+                if data.error == 'Unknown operation.':
+                    data.error = None
+            else:
+                data.error = 'Unknown operation.'
+            done.add(node.id)
     return ws

web/src/LynxKiteFlow.svelte

@@ -84,6 +84,7 @@
       const node = {
         type: meta.type,
         data: {
+          meta: meta,
           title: meta.name,
           params: Object.fromEntries(
             Object.values(meta.params).map((p) => [p.name, p.default])),
@@ -153,13 +154,9 @@
         || e.targetHandle !== connection.targetHandle);
     });
   }
-  function getMeta(title) {
-    return $boxes.find((m) => m.data.title === title);
-  }
-  setContext('LynxKiteFlow', { getMeta });
   function nodeClick(e) {
     const node = e.detail.node;
-    const meta = getMeta(node.data.title);
+    const meta = node.data.meta;
     if (!meta) return;
     const sub_nodes = meta.sub_nodes;
     if (!sub_nodes) return;

web/src/NodeParameter.svelte

@@ -13,7 +13,7 @@
     </button>
   {:else if meta?.type?.enum}
     <select class="form-select form-select-sm"
-      value={value}
+      value={value || meta.type.enum[0]}
       on:change={(evt) => onChange(evt.currentTarget.value)}
     >
       {#each meta.type.enum as option}

web/src/NodeSearch.svelte

@@ -5,7 +5,7 @@
   export let pos;
   export let boxes;
   let searchBox: HTMLInputElement;
-  let hits = boxes.map(box => ({item: box}));
+  let hits = Object.values(boxes).map(box => ({item: box}));
   let selectedIndex = 0;
   onMount(() => searchBox.focus());
   $: fuse = new Fuse(boxes, {

web/src/NodeWithArea.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { getContext } from 'svelte';
   import { type NodeProps, useSvelteFlow } from '@xyflow/svelte';
   import NodeParameter from './NodeParameter.svelte';
 
@@ -25,8 +24,7 @@
     return n ? n + 'px' : undefined;
   }
   const { updateNodeData } = useSvelteFlow();
-  $: meta = getContext('LynxKiteFlow').getMeta(data.title);
-  $: metaParams = meta && Object.fromEntries(meta.data.params.map((p) => [p.name, p]));
+  $: metaParams = data.meta?.params;
 </script>
 
 <div class="area" style:width={asPx(width)} style:height={asPx(height)} style={containerStyle}>

web/src/NodeWithParams.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { getContext } from 'svelte';
   import { type NodeProps, useSvelteFlow } from '@xyflow/svelte';
   import LynxKiteNode from './LynxKiteNode.svelte';
   import NodeParameter from './NodeParameter.svelte';
@@ -7,8 +6,7 @@
   export let id: $$Props['id'];
   export let data: $$Props['data'];
   const { updateNodeData } = useSvelteFlow();
-  $: meta = getContext('LynxKiteFlow').getMeta(data.title);
-  $: metaParams = meta && Object.fromEntries(meta.data.params.map((p) => [p.name, p]));
+  $: metaParams = data.meta?.params;
 </script>
 
 <LynxKiteNode {...$$props}>

web/src/NodeWithParamsVertical.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { getContext } from 'svelte';
   import { type NodeProps, useSvelteFlow } from '@xyflow/svelte';
   import LynxKiteNode from './LynxKiteNode.svelte';
   import NodeParameter from './NodeParameter.svelte';
@@ -7,8 +6,7 @@
   export let id: $$Props['id'];
   export let data: $$Props['data'];
   const { updateNodeData } = useSvelteFlow();
-  $: meta = getContext('LynxKiteFlow').getMeta(data.title);
-  $: metaParams = meta && Object.fromEntries(meta.data.params.map((p) => [p.name, p]));
+  $: metaParams = data.meta?.params;
 </script>
 
 <LynxKiteNode {...$$props} sourcePosition="top" targetPosition="bottom">