Control plug position for each input/output.

server/ops.py

@@ -50,14 +50,30 @@ class Parameter(BaseConfig):
       type = typeof(default) if default else None
     return Parameter(name=name, default=default, type=type)
 
+class Input(BaseConfig):
+  name: str
+  type: Type
+  position: str = 'left'
+
+class Output(BaseConfig):
+  name: str
+  type: Type
+  position: str = 'right'
+
+MULTI_INPUT = Input(name='multi', type='*')
+def basic_inputs(*names):
+  return {name: Input(name=name, type=None) for name in names}
+def basic_outputs(*names):
+  return {name: Output(name=name, type=None) for name in names}
+
 
 class Op(BaseConfig):
   func: callable = pydantic.Field(exclude=True)
   name: str
   params: dict[str, Parameter]
-  inputs: dict[str, Type] # name -> type
-  outputs: dict[str, Type] # name -> type
-  type: str # The UI to use for this operation.
+  inputs: dict[str, Input]
+  outputs: dict[str, Output]
+  type: str = 'basic' # The UI to use for this operation.
   sub_nodes: list[Op] = None # If set, these nodes can be placed inside the operation's node.
 
   def __call__(self, *inputs, **params):
@@ -70,10 +86,10 @@ class Op(BaseConfig):
           params[p] = float(params[p])
     # Convert inputs.
     inputs = list(inputs)
-    for i, (x, t) in enumerate(zip(inputs, self.inputs.values())):
-      if t == nx.Graph and isinstance(x, Bundle):
+    for i, (x, p) in enumerate(zip(inputs, self.inputs.values())):
+      if p.type == nx.Graph and isinstance(x, Bundle):
         inputs[i] = x.to_nx()
-      elif t == Bundle and isinstance(x, nx.Graph):
+      elif p.type == Bundle and isinstance(x, nx.Graph):
         inputs[i] = Bundle.from_nx(x)
     res = self.func(*inputs, **params)
     return res
@@ -147,14 +163,14 @@ def op(name, *, view='basic', sub_nodes=None):
     sig = inspect.signature(func)
     # Positional arguments are inputs.
     inputs = {
-      name: param.annotation
+      name: Input(name=name, type=param.annotation)
       for name, param in sig.parameters.items()
       if param.kind != param.KEYWORD_ONLY}
     params = {}
     for n, param in sig.parameters.items():
       if param.kind == param.KEYWORD_ONLY:
         params[n] = Parameter.basic(n, param.default, param.annotation)
-    outputs = {'output': 'yes'} if view == 'basic' else {} # Maybe more fancy later.
+    outputs = {'output': Output(name='output', type=None)} if view == 'basic' else {} # Maybe more fancy later.
     op = Op(func=func, name=name, params=params, inputs=inputs, outputs=outputs, type=view)
     if sub_nodes is not None:
       op.sub_nodes = sub_nodes
@@ -168,13 +184,22 @@ def no_op(*args, **kwargs):
     return args[0]
   return Bundle()
 
-def register_passive_op(name, inputs={'input': Bundle}, outputs={'output': Bundle}, params=[]):
+def register_passive_op(name, inputs=[], outputs=['output'], params=[]):
   '''A passive operation has no associated code.'''
-  op = Op(no_op, name, params={p.name: p for p in params}, inputs=inputs, outputs=outputs, type='basic')
+  op = Op(
+    func=no_op,
+    name=name,
+    params={p.name: p for p in params},
+    inputs=dict(
+      (i, Input(name=i, type=None)) if isinstance(i, str)
+      else (i.name, i) for i in inputs),
+    outputs=dict(
+      (o, Output(name=o, type=None)) if isinstance(o, str)
+      else (o.name, o) for o in outputs))
   ALL_OPS[name] = op
   return op
 
 def register_area(name, params=[]):
   '''A node that represents an area. It can contain other nodes, but does not restrict movement in any way.'''
-  op = register_passive_op(name, params=params, inputs={}, outputs={})
+  op = register_passive_op(name, params=params)
   op.type = 'area'

server/pytorch_model_ops.py

@@ -19,15 +19,15 @@ def register_layer(name):
   def decorator(func):
     sig = inspect.signature(func)
     inputs = {
-      name: param.annotation
+      name: ops.Input(name=name, type=param.annotation, position='bottom')
       for name, param in sig.parameters.items()
       if param.kind != param.KEYWORD_ONLY}
     params = {
       name: ops.Parameter.basic(name, param.default, param.annotation)
       for name, param in sig.parameters.items()
       if param.kind == param.KEYWORD_ONLY}
-    outputs = {'x': 'tensor'}
-    LAYERS[name] = ops.Op(func=func, name=name, params=params, inputs=inputs, outputs=outputs, type='vertical')
+    outputs = {'x': ops.Output(name='x', type='tensor', position='top')}
+    LAYERS[name] = ops.Op(func=func, name=name, params=params, inputs=inputs, outputs=outputs)
     return func
   return decorator
 

server/workspace.py

@@ -21,6 +21,8 @@ class WorkspaceNodeData(BaseConfig):
     params: dict
     display: Optional[object] = None
     error: Optional[str] = None
+    # Also contains a "meta" field when going out.
+    # This is ignored when coming back from the frontend.
 
 class WorkspaceNode(BaseConfig):
     id: str
@@ -118,6 +120,7 @@ def _update_metadata(ws):
                 continue
             if op:
                 data.meta = op
+                node.type = op.type
                 if data.error == 'Unknown operation.':
                     data.error = None
             else:

web/src/LynxKiteFlow.svelte

@@ -16,7 +16,6 @@
   } from '@xyflow/svelte';
   import { useQuery, useMutation, useQueryClient } from '@sveltestack/svelte-query';
   import NodeWithParams from './NodeWithParams.svelte';
-  import NodeWithParamsVertical from './NodeWithParamsVertical.svelte';
   import NodeWithVisualization from './NodeWithVisualization.svelte';
   import NodeWithTableView from './NodeWithTableView.svelte';
   import NodeWithSubFlow from './NodeWithSubFlow.svelte';
@@ -47,7 +46,6 @@
 
   const nodeTypes: NodeTypes = {
     basic: NodeWithParams,
-    vertical: NodeWithParamsVertical,
     visualization: NodeWithVisualization,
     table_view: NodeWithTableView,
     sub_flow: NodeWithSubFlow,
@@ -88,8 +86,6 @@
           title: meta.name,
           params: Object.fromEntries(
             Object.values(meta.params).map((p) => [p.name, p.default])),
-          inputs: meta.inputs,
-          outputs: meta.outputs,
         },
       };
       node.position = screenToFlowPosition({x: nodeSearchSettings.pos.x, y: nodeSearchSettings.pos.y});

web/src/LynxKiteNode.svelte

@@ -29,8 +29,8 @@
   function asPx(n: number | undefined) {
     return n ? n + 'px' : undefined;
   }
-  $: inputs = Object.entries(data.inputs || {});
-  $: outputs = Object.entries(data.outputs || {});
+  $: inputs = Object.values(data.meta?.inputs || {});
+  $: outputs = Object.values(data.meta?.outputs || {});
   const handleOffsetDirection = { top: 'left', bottom: 'left', left: 'top', right: 'top' };
 </script>
 
@@ -47,18 +47,18 @@
       {/if}
       <slot />
     {/if}
-    {#each inputs as [name, input], i}
+    {#each inputs as input, i}
       <Handle
-        id={name} type="target" position={targetPosition || 'left'}
-        style="{handleOffsetDirection[targetPosition || 'left']}: {100 * (i + 1) / (inputs.length + 1)}%">
-        {#if inputs.length>1}<span class="handle-name">{name.replace(/_/g, " ")}</span>{/if}
+        id={input.name} type="target" position={input.position}
+        style="{handleOffsetDirection[input.position]}: {100 * (i + 1) / (inputs.length + 1)}%">
+        {#if inputs.length>1}<span class="handle-name">{input.name.replace(/_/g, " ")}</span>{/if}
       </Handle>
     {/each}
-    {#each outputs as [name, output], i}
+    {#each outputs as output, i}
       <Handle
-        id={name} type="source" position={sourcePosition || 'right'}
-        style="{handleOffsetDirection[sourcePosition || 'right']}: {100 * (i + 1) / (outputs.length + 1)}%">
-        {#if outputs.length>1}<span class="handle-name">{name.replace(/_/g, " ")}</span>{/if}
+        id={output.name} type="source" position={output.position}
+        style="{handleOffsetDirection[output.position]}: {100 * (i + 1) / (outputs.length + 1)}%">
+        {#if outputs.length>1}<span class="handle-name">{output.name.replace(/_/g, " ")}</span>{/if}
       </Handle>
     {/each}
   </div>

web/src/NodeWithParamsVertical.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-  import { type NodeProps, useSvelteFlow } from '@xyflow/svelte';
-  import LynxKiteNode from './LynxKiteNode.svelte';
-  import NodeParameter from './NodeParameter.svelte';
-  type $$Props = NodeProps;
-  export let id: $$Props['id'];
-  export let data: $$Props['data'];
-  const { updateNodeData } = useSvelteFlow();
-  $: metaParams = data.meta?.params;
-</script>
-
-<LynxKiteNode {...$$props} sourcePosition="top" targetPosition="bottom">
-  {#each Object.entries(data.params) as [name, value]}
-    <NodeParameter
-      {name}
-      {value}
-      meta={metaParams?.[name]}
-      onChange={(newValue) => updateNodeData(id, { params: { ...data.params, [name]: newValue } })}
-      />
-  {/each}
-</LynxKiteNode>
-<style>
-  .param {
-    padding: 8px;
-  }
-  .param label {
-    font-size: 12px;
-    display: block;
-  }
-  .param input {
-    width: calc(100% - 8px);
-  }
-</style>