Another node type that marks an area.

server/ops.py

@@ -171,3 +171,9 @@ def register_passive_op(name, inputs={'input': Bundle}, outputs={'output': Bundl
   '''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')
   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.type = 'area'

server/pytorch_model_ops.py

@@ -32,11 +32,11 @@ def register_layer(name):
   return decorator
 
 @register_layer('LayerNorm')
-def layernorm():
+def layernorm(x):
   return 'LayerNorm'
 
 @register_layer('Dropout')
-def dropout(*, p=0.5):
+def dropout(x, *, p=0.5):
   return f'Dropout ({p})'
 
 @register_layer('Linear')
@@ -50,7 +50,7 @@ class GraphConv(Enum):
   SAGEConv = 'SAGEConv'
 
 @register_layer('Graph Convolution')
-def graph_convolution(*, type: GraphConv):
+def graph_convolution(x, edges, *, type: GraphConv):
   return 'GraphConv'
 
 class Nonlinearity(Enum):
@@ -59,6 +59,12 @@ class Nonlinearity(Enum):
   Tanh = 'Tanh'
 
 @register_layer('Nonlinearity')
-def nonlinearity(*, type: Nonlinearity):
+def nonlinearity(x, *, type: Nonlinearity):
   return 'ReLU'
 
+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 = ops.Op(ops.no_op, name, params={p.name: p for p in params}, inputs={}, outputs={}, type='area')
+  LAYERS[name] = op
+
+register_area('Repeat', params=[ops.Parameter('times', 1, int)])

web/src/LynxKiteFlow.svelte

@@ -19,6 +19,7 @@
   import NodeWithGraphView from './NodeWithGraphView.svelte';
   import NodeWithTableView from './NodeWithTableView.svelte';
   import NodeWithSubFlow from './NodeWithSubFlow.svelte';
+  import NodeWithArea from './NodeWithArea.svelte';
   import NodeSearch from './NodeSearch.svelte';
   import '@xyflow/svelte/dist/style.css';
 
@@ -30,6 +31,7 @@
     graph_view: NodeWithGraphView,
     table_view: NodeWithTableView,
     sub_flow: NodeWithSubFlow,
+    area: NodeWithArea,
   };
 
   export let path = '';

web/src/LynxKiteNode.svelte

@@ -26,7 +26,7 @@
     expanded = !expanded;
     onToggle({ expanded });
   }
-  function asPx(n: number) {
+  function asPx(n: number | undefined) {
     return n ? n + 'px' : undefined;
   }
   $: inputs = Object.entries(data.inputs || {});

web/src/NodeParameter.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  export let name: string;
+  export let value;
+  export let meta;
+  export let onChange;
+</script>
+
+<div class="param">
+  <label>
+    {name}<br>
+    {#if meta?.type?.enum}
+      <select
+        value={value}
+        on:change={(evt) => onChange(evt.currentTarget.value)}
+      >
+        {#each meta.type.enum as option}
+          <option value={option}>{option}</option>
+        {/each}
+      </select>
+    {:else}
+      <input
+      value={value}
+      on:input={(evt) => onChange(evt.currentTarget.value)}
+      />
+    {/if}
+  </label>
+</div>
+
+<style>
+  .param {
+    padding: 8px;
+  }
+  .param label {
+    font-size: 12px;
+    display: block;
+  }
+  .param input,
+  .param select {
+    width: calc(100% - 8px);
+  }
+</style>

web/src/NodeWithArea.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import { type NodeProps, useSvelteFlow } from '@xyflow/svelte';
+  import NodeParameter from './NodeParameter.svelte';
+
+  type $$Props = NodeProps;
+
+  export let nodeStyle = '';
+  export let containerStyle = '';
+  export let id: $$Props['id']; id;
+  export let data: $$Props['data'];
+  export let dragHandle: $$Props['dragHandle'] = undefined; dragHandle;
+  export let type: $$Props['type']  = undefined; type;
+  export let selected: $$Props['selected'] = undefined; selected;
+  export let isConnectable: $$Props['isConnectable'] = undefined; isConnectable;
+  export let zIndex: $$Props['zIndex'] = undefined; zIndex;
+  export let width: $$Props['width'] = undefined; width;
+  export let height: $$Props['height'] = undefined; height;
+  export let dragging: $$Props['dragging']; dragging;
+  export let targetPosition: $$Props['targetPosition'] = undefined; targetPosition;
+  export let sourcePosition: $$Props['sourcePosition'] = undefined; sourcePosition;
+  export let positionAbsoluteX: $$Props['positionAbsoluteX'] = undefined; positionAbsoluteX;
+  export let positionAbsoluteY: $$Props['positionAbsoluteY'] = undefined; positionAbsoluteY;
+
+  function asPx(n: number | undefined) {
+    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]));
+</script>
+
+<div class="area" style:width={asPx(width)} style:height={asPx(height)} style={containerStyle}>
+  <div class="title">
+    {data.title}
+  </div>
+  {#each Object.entries(data.params) as [name, value]}
+    <NodeParameter
+      {name}
+      {value}
+      meta={metaParams?.[name]}
+      onChange={(newValue) => updateNodeData(id, { params: { ...data.params, [name]: newValue } })}
+      />
+  {/each}
+</div>
+
+<style>
+  .area {
+    border-radius: 10px;
+    border: 3px dashed #f80;
+    min-width: 400px;
+    min-height: 400px;
+    max-width: 800px;
+    max-height: 800px;
+    z-index: 0 !important;
+  }
+  .title {
+    color: #f80;
+    width: 100%;
+    text-align: center;
+    top: -1.5em;
+    position: absolute;
+    -webkit-text-stroke: 5px white;
+    paint-order: stroke fill;
+    font-weight: bold;
+  }
+</style>

web/src/NodeWithParams.svelte

@@ -2,6 +2,7 @@
   import { getContext } from 'svelte';
   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'];
@@ -12,38 +13,11 @@
 
 <LynxKiteNode {...$$props}>
   {#each Object.entries(data.params) as [name, value]}
-    <div class="param">
-      <label>
-        {name}<br>
-        {#if metaParams?.[name]?.type?.enum}
-          <select
-            value={value}
-            on:change={(evt) => updateNodeData(id, { params: { ...data.params, [name]: evt.currentTarget.value } })}
-          >
-            {#each metaParams[name].type.enum as option}
-              <option value={option}>{option}</option>
-            {/each}
-          </select>
-        {:else}
-          <input
-          value={value}
-          on:input={(evt) => updateNodeData(id, { params: { ...data.params, [name]: evt.currentTarget.value } })}
-          />
-        {/if}
-      </label>
-    </div>
+    <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,
-  .param select {
-    width: calc(100% - 8px);
-  }
-</style>

web/src/NodeWithParamsVertical.svelte

@@ -1,23 +1,24 @@
 <script lang="ts">
+  import { getContext } from 'svelte';
   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();
+  $: meta = getContext('LynxKiteFlow').getMeta(data.title);
+  $: metaParams = meta && Object.fromEntries(meta.data.params.map((p) => [p.name, p]));
 </script>
 
-<LynxKiteNode {...$$props} sourcePosition="bottom" targetPosition="top">
+<LynxKiteNode {...$$props} sourcePosition="top" targetPosition="bottom">
   {#each Object.entries(data.params) as [name, value]}
-    <div class="param">
-      <label>
-        {name}<br>
-        <input
-          value={value}
-          on:input={(evt) => updateNodeData(id, { params: { ...data.params, [name]: evt.currentTarget.value } })}
-        />
-      </label>
-    </div>
+    <NodeParameter
+      {name}
+      {value}
+      meta={metaParams?.[name]}
+      onChange={(newValue) => updateNodeData(id, { params: { ...data.params, [name]: newValue } })}
+      />
   {/each}
 </LynxKiteNode>
 <style>

web/src/NodeWithSubFlow.svelte

@@ -8,7 +8,6 @@
   let isExpanded = true;
   function onToggle({ expanded }) {
     isExpanded = expanded;
-    console.log('onToggle', expanded, height);
     nodes.update((n) =>
       n.map((node) =>
         node.parentNode === id