Nodes that can contain flows.

server/main.py

@@ -9,6 +9,7 @@ import traceback
 from . import ops
 from . import basic_ops
 from . import networkx_ops
+from . import pytorch_model_ops
 
 class BaseConfig(pydantic.BaseModel):
     model_config = pydantic.ConfigDict(
@@ -30,6 +31,7 @@ class WorkspaceNode(BaseConfig):
     type: str
     data: WorkspaceNodeData
     position: Position
+    parentNode: Optional[str] = None
 
 class WorkspaceEdge(BaseConfig):
     id: str
@@ -46,17 +48,11 @@ app = fastapi.FastAPI()
 
 @app.get("/api/catalog")
 def get_catalog():
-    return [
-        {
-          'type': op.type,
-          'data': { 'title': op.name, 'params': op.params },
-          'targetPosition': 'left' if op.inputs else None,
-          'sourcePosition': 'right' if op.outputs else None,
-        }
-        for op in ops.ALL_OPS.values()]
+    return [op.to_json() for op in ops.ALL_OPS.values()]
 
 def execute(ws):
-    nodes = ws.nodes
+    # Nodes are responsible for interpreting/executing their child nodes.
+    nodes = [n for n in ws.nodes if not n.parentNode]
     outputs = {}
     failed = 0
     while len(outputs) + failed < len(nodes):

server/ops.py

@@ -11,10 +11,11 @@ ALL_OPS = {}
 class Op:
   func: callable
   name: str
-  params: dict
-  inputs: dict
-  outputs: dict
-  type: str
+  params: dict # name -> default
+  inputs: dict # name -> type
+  outputs: dict # name -> type
+  type: str # The UI to use for this operation.
+  sub_nodes: list = None # If set, these nodes can be placed inside the operation's node.
 
   def __call__(self, *inputs, **params):
     # Convert parameters.
@@ -39,20 +40,37 @@ class Op:
     res = self.func(*inputs, **params)
     return res
 
+  def to_json(self):
+    return {
+      'type': self.type,
+      'data': { 'title': self.name, 'params': self.params },
+      'targetPosition': 'left' if self.inputs else None,
+      'sourcePosition': 'right' if self.outputs else None,
+      'sub_nodes': [sub.to_json() for sub in self.sub_nodes.values()] if self.sub_nodes else None,
+    }
+
+
 @dataclasses.dataclass
 class RelationDefinition:
-  df: str
-  source_column: str
-  target_column: str
-  source_table: str
-  target_table: str
-  source_key: str
-  target_key: str
+  '''Defines a set of edges.'''
+  df: str # The DataFrame that contains the edges.
+  source_column: str # The column in the edge DataFrame that contains the source node ID.
+  target_column: str # The column in the edge DataFrame that contains the target node ID.
+  source_table: str # The DataFrame that contains the source nodes.
+  target_table: str # The DataFrame that contains the target nodes.
+  source_key: str # The column in the source table that contains the node ID.
+  target_key: str # The column in the target table that contains the node ID.
 
 @dataclasses.dataclass
 class Bundle:
+  '''A collection of DataFrames and other data.
+
+  Can efficiently represent a knowledge graph (homogeneous or heterogeneous) or tabular data.
+  It can also carry other data, such as a trained model.
+  '''
   dfs: dict
   relations: list[RelationDefinition]
+  other: dict = None
 
   @classmethod
   def from_nx(cls, graph: nx.Graph):
@@ -94,7 +112,7 @@ def nx_node_attribute_func(name):
   return decorator
 
 
-def op(name, *, view='basic'):
+def op(name, *, view='basic', sub_nodes=None):
   '''Decorator for defining an operation.'''
   def decorator(func):
     sig = inspect.signature(func)
@@ -109,6 +127,9 @@ def op(name, *, view='basic'):
       if param.kind == param.KEYWORD_ONLY}
     outputs = {'output': 'yes'} if view == 'basic' else {} # Maybe more fancy later.
     op = Op(func, name, params=params, inputs=inputs, outputs=outputs, type=view)
+    if sub_nodes is not None:
+      op.sub_nodes = sub_nodes
+      op.type = 'sub_flow'
     ALL_OPS[name] = op
     return func
   return decorator

server/pytorch_model_ops.py

@@ -0,0 +1,48 @@
+'''Boxes for defining and using PyTorch models.'''
+import inspect
+from . import ops
+
+LAYERS = {}
+
+@ops.op("Define PyTorch model", sub_nodes=LAYERS)
+def define_pytorch_model(*, sub_flow):
+  # import torch # Lazy import because it's slow.
+  print('sub_flow:', sub_flow)
+  return 'hello ' + str(sub_flow)
+
+def register_layer(name):
+  def decorator(func):
+    sig = inspect.signature(func)
+    inputs = {
+      name: param.annotation
+      for name, param in sig.parameters.items()
+      if param.kind != param.KEYWORD_ONLY}
+    params = {
+      name: param.default if param.default is not inspect._empty else None
+      for name, param in sig.parameters.items()
+      if param.kind == param.KEYWORD_ONLY}
+    outputs = {'x': 'tensor'}
+    LAYERS[name] = ops.Op(func, name, params=params, inputs=inputs, outputs=outputs, type='vertical')
+    return func
+  return decorator
+
+@register_layer('LayerNorm')
+def normalization():
+  return 'LayerNorm'
+
+@register_layer('Dropout')
+def dropout(*, p=0.5):
+  return f'Dropout ({p})'
+
+@register_layer('Linear')
+def linear(*, output_dim: int):
+  return f'Linear {output_dim}'
+
+@register_layer('Graph Convolution')
+def graph_convolution():
+  return 'GraphConv'
+
+@register_layer('Nonlinearity')
+def nonlinearity():
+  return 'ReLU'
+

web/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/public/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Svelte Flow Starter</title>
+    <title>LynxKite 2024</title>
   </head>
   <body>
     <div id="app"></div>

web/src/LynxKiteFlow.svelte

@@ -14,8 +14,10 @@
     type NodeTypes,
   } from '@xyflow/svelte';
   import NodeWithParams from './NodeWithParams.svelte';
+  import NodeWithParamsVertical from './NodeWithParamsVertical.svelte';
   import NodeWithGraphView from './NodeWithGraphView.svelte';
   import NodeWithTableView from './NodeWithTableView.svelte';
+  import NodeWithSubFlow from './NodeWithSubFlow.svelte';
   import NodeSearch from './NodeSearch.svelte';
   import '@xyflow/svelte/dist/style.css';
 
@@ -23,8 +25,10 @@
 
   const nodeTypes: NodeTypes = {
     basic: NodeWithParams,
+    vertical: NodeWithParamsVertical,
     graph_view: NodeWithGraphView,
     table_view: NodeWithTableView,
+    sub_flow: NodeWithSubFlow,
   };
 
   export let path = '';
@@ -43,23 +47,23 @@
   $: fetchWorkspace(path);
 
   function closeNodeSearch() {
-    nodeSearchPos = undefined;
+    nodeSearchSettings = undefined;
   }
   function toggleNodeSearch({ detail: { event } }) {
-    if (nodeSearchPos) {
+    if (nodeSearchSettings) {
       closeNodeSearch();
       return;
     }
     event.preventDefault();
-    nodeSearchPos = {
-      top: event.offsetY,
-      left: event.offsetX - 155,
+    nodeSearchSettings = {
+      pos: { x: event.clientX, y: event.clientY },
+      boxes: $boxes,
     };
   }
   function addNode(e) {
     const node = {...e.detail};
     nodes.update((n) => {
-      node.position = screenToFlowPosition({x: nodeSearchPos.left, y: nodeSearchPos.top});
+      node.position = screenToFlowPosition({x: nodeSearchSettings.pos.x, y: nodeSearchSettings.pos.y});
       const title = node.data.title;
       let i = 1;
       node.id = `${title} ${i}`;
@@ -67,6 +71,12 @@
         i += 1;
         node.id = `${title} ${i}`;
       }
+      node.parentNode = nodeSearchSettings.parentNode;
+      if (node.parentNode) {
+        node.extent = 'parent';
+        const parent = n.find((x) => x.id === node.parentNode);
+        node.position = { x: node.position.x - parent.position.x, y: node.position.y - parent.position.y };
+      }
       return [...n, node]
     });
     closeNodeSearch();
@@ -79,7 +89,11 @@
   }
   getBoxes();
 
-  let nodeSearchPos: XYPosition | undefined = undefined;
+  let nodeSearchSettings: {
+    pos: XYPosition,
+    boxes: any[],
+    parentNode: string,
+  };
 
   const graph = derived([nodes, edges], ([nodes, edges]) => ({ nodes, edges }));
   let backendWorkspace: string;
@@ -120,20 +134,36 @@
       return edges.filter((e) => e.source === connection.source || e.target !== connection.target);
     });
   }
+  function nodeClick(e) {
+    const node = e.detail.node;
+    const meta = $boxes.find(m => m.data.title === node.data.title);
+    if (!meta) return;
+    const sub_nodes = meta.sub_nodes;
+    if (!sub_nodes) return;
+    const event = e.detail.event;
+    if (event.target.classList.contains('title')) return;
+    nodeSearchSettings = {
+      pos: { x: event.clientX, y: event.clientY },
+      boxes: sub_nodes,
+      parentNode: node.id,
+    };
+  }
 
 </script>
 
 <div style:height="100%">
   <SvelteFlow {nodes} {edges} {nodeTypes} fitView
     on:paneclick={toggleNodeSearch}
+    on:nodeclick={nodeClick}
     proOptions={{ hideAttribution: true }}
     maxZoom={1.5}
     minZoom={0.3}
     onconnect={onconnect}
     >
-    <Background patternColor="#39bcf3" />
     <Controls />
     <MiniMap />
-    {#if nodeSearchPos}<NodeSearch boxes={$boxes} on:cancel={closeNodeSearch} on:add={addNode} pos={nodeSearchPos} />{/if}
+    {#if nodeSearchSettings}
+      <NodeSearch pos={nodeSearchSettings.pos} boxes={nodeSearchSettings.boxes} on:cancel={closeNodeSearch} on:add={addNode} />
+    {/if}
   </SvelteFlow>
 </div>

web/src/LynxKiteNode.svelte

@@ -3,6 +3,8 @@
 
   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;
@@ -17,15 +19,20 @@
   export let sourcePosition: $$Props['sourcePosition'] = undefined; sourcePosition;
   export let positionAbsoluteX: $$Props['positionAbsoluteX'] = undefined; positionAbsoluteX;
   export let positionAbsoluteY: $$Props['positionAbsoluteY'] = undefined; positionAbsoluteY;
+  export let onToggle = () => {};
 
   let expanded = true;
   function titleClicked() {
     expanded = !expanded;
+    onToggle({ expanded });
+  }
+  function asPx(n: number) {
+    return n ? n + 'px' : undefined;
   }
 </script>
 
-<div class="node-container">
-  <div class="lynxkite-node">
+<div class="node-container" style:width={asPx(width)} style:height={asPx(height)} style={containerStyle}>
+  <div class="lynxkite-node" style={nodeStyle}>
     <div class="title" on:click={titleClicked}>
       {data.title}
       {#if data.error}<span class="error-sign">⚠️</span>{/if}
@@ -56,15 +63,16 @@
   }
   .node-container {
     padding: 8px;
+    min-width: 200px;
+    max-width: 400px;
+    max-height: 400px;
   }
   .lynxkite-node {
     box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3);
     background: white;
-    min-width: 200px;
-    max-width: 400px;
-    max-height: 400px;
     overflow-y: auto;
     border-radius: 1px;
+    height: 100%;
   }
   .title {
     background: #ff8800;

web/src/NodeSearch.svelte

@@ -30,7 +30,8 @@
   }
   function addSelected() {
     const node = {...hits[selectedIndex].item};
-    node.position = {x: pos.left, y: pos.top};
+    delete node.sub_nodes;
+    node.position = pos;
     dispatch('add', node);
   }
   async function lostFocus(e) {
@@ -41,9 +42,7 @@
 
 </script>
 
-<div class="node-search"
-style="top: {pos.top}px; left: {pos.left}px; right: {pos.right}px; bottom: {pos.bottom}px;">
-
+<div class="node-search" style="top: {pos.y}px; left: {pos.x}px;">
   <input
     bind:this={searchBox}
     on:input={onInput}
@@ -83,7 +82,7 @@ style="top: {pos.top}px; left: {pos.left}px; right: {pos.right}px; bottom: {pos.
     border-radius: 4px;
   }
   .node-search {
-    position: absolute;
+    position: fixed;
     width: 300px;
     z-index: 5;
     padding: 4px;

web/src/NodeWithParamsVertical.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { type NodeProps, useSvelteFlow } from '@xyflow/svelte';
+  import LynxKiteNode from './LynxKiteNode.svelte';
+  type $$Props = NodeProps;
+  export let id: $$Props['id'];
+  export let data: $$Props['data'];
+  const { updateNodeData } = useSvelteFlow();
+</script>
+
+<LynxKiteNode {...$$props} sourcePosition="bottom" targetPosition="top">
+  {#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>
+  {/each}
+</LynxKiteNode>
+<style>
+  .param {
+    padding: 8px;
+  }
+  .param label {
+    font-size: 12px;
+    display: block;
+  }
+  .param input {
+    width: calc(100% - 8px);
+  }
+</style>

web/src/NodeWithSubFlow.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { type NodeProps, useNodes } from '@xyflow/svelte';
+  import LynxKiteNode from './LynxKiteNode.svelte';
+  type $$Props = NodeProps;
+  const nodes = useNodes();
+  export let id: $$Props['id'];
+  export let data: $$Props['data'];
+  let isExpanded = true;
+  function onToggle({ expanded }) {
+    isExpanded = expanded;
+    console.log('onToggle', expanded, height);
+    nodes.update((n) =>
+      n.map((node) =>
+        node.parentNode === id
+        ? { ...node, hidden: !expanded }
+        : node));
+  }
+  function computeSize(nodes) {
+    let width = 200;
+    let height = 200;
+    for (const node of nodes) {
+      if (node.parentNode === id) {
+        width = Math.max(width, node.position.x + 300);
+        height = Math.max(height, node.position.y + 200);
+      }
+    }
+    return { width, height };
+  }
+  $: ({ width, height } = computeSize($nodes));
+</script>
+
+<LynxKiteNode
+  {...$$props}
+  width={isExpanded && width} height={isExpanded && height}
+  nodeStyle="background: transparent;" containerStyle="max-width: none; max-height: none;" {onToggle}>
+</LynxKiteNode>
+<style>
+</style>