Simple input conversion. Simple table viewer.

server/basic_ops.py

@@ -14,11 +14,11 @@ def create_scale_free_graph(*, nodes: int = 10):
   return nx.scale_free_graph(nodes)
 
 @ops.op("Compute PageRank")
-def compute_pagerank(graph, *, damping: 0.85, iterations: 3):
+def compute_pagerank(graph: nx.Graph, *, damping: 0.85, iterations: 3):
   return nx.pagerank(graph)
 
 @ops.op("Visualize graph")
-def visualize_graph(graph) -> 'graphviz':
+def visualize_graph(graph: ops.Bundle) -> 'graph_view':
   return {
     'attributes': {
       'name': 'My Graph'
@@ -40,3 +40,15 @@ def visualize_graph(graph) -> 'graphviz':
       }
     ]
   }
+
+@ops.op("View table")
+def view_table(dfs: ops.Bundle) -> 'table_view':
+  v = {
+    'dataframes': { name: {
+      'columns': [str(c) for c in df.columns],
+      'data': df.values.tolist(),
+    } for name, df in dfs.dfs.items() },
+    'edges': dfs.edges,
+  }
+  print(v)
+  return v

server/main.py

@@ -72,8 +72,8 @@ def execute(ws):
                   continue
                 data.error = None
                 outputs[node.id] = output
-                if op.type == 'graphviz':
-                    data.graph = output
+                if op.type == 'graph_view' or op.type == 'table_view':
+                    data.view = output
 
 
 @app.post("/api/save")

server/ops.py

@@ -1,6 +1,8 @@
 '''API for implementing LynxKite operations.'''
 import dataclasses
 import inspect
+import networkx as nx
+import pandas as pd
 
 ALL_OPS = {}
 
@@ -21,6 +23,14 @@ class Op:
         t = sig.parameters[p].annotation
         if t == int:
           params[p] = int(params[p])
+    # Convert inputs.
+    inputs = list(inputs)
+    for i, (x, p) in enumerate(zip(inputs, sig.parameters.values())):
+      t = p.annotation
+      if t == nx.Graph and isinstance(x, Bundle):
+        inputs[i] = o.to_nx()
+      elif t == Bundle and isinstance(x, nx.Graph):
+        inputs[i] = Bundle.from_nx(x)
     res = self.func(*inputs, **params)
     return res
 
@@ -39,6 +49,33 @@ class Bundle:
   dfs: dict
   edges: list[EdgeDefinition]
 
+  @classmethod
+  def from_nx(cls, graph: nx.Graph):
+    edges = nx.to_pandas_edgelist(graph)
+    print(edges)
+    nodes = pd.DataFrame({'id': list(graph.nodes)})
+    print(nodes)
+    return cls(
+      dfs={'edges': edges, 'nodes': nodes},
+      edges=[
+        EdgeDefinition(
+          df='edges',
+          source_column='source',
+          target_column='target',
+          source_table='nodes',
+          target_table='nodes',
+          source_key='id',
+          target_key='id',
+        )
+      ]
+    )
+
+  def to_nx(self):
+    graph = nx.from_pandas_edgelist(self.dfs['edges'])
+    nx.set_node_attributes(graph, self.dfs['nodes'].set_index('id').to_dict('index'))
+    return graph
+
+
 def op(name):
   '''Decorator for defining an operation.'''
   def decorator(func):
@@ -53,7 +90,8 @@ def op(name):
       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}
-    op = Op(func, name, params=params, inputs=inputs, outputs={'output': 'yes'}, type=type)
+    outputs = {'output': 'yes'} if type == 'basic' else {} # Maybe more fancy later.
+    op = Op(func, name, params=params, inputs=inputs, outputs=outputs, type=type)
     ALL_OPS[name] = op
     return func
   return decorator

web/src/LynxKiteFlow.svelte

@@ -13,7 +13,8 @@
     type Edge,
   } from '@xyflow/svelte';
   import NodeWithParams from './NodeWithParams.svelte';
-  import NodeWithGraphVisualization from './NodeWithGraphVisualization.svelte';
+  import NodeWithGraphView from './NodeWithGraphView.svelte';
+  import NodeWithTableView from './NodeWithTableView.svelte';
   import NodeSearch from './NodeSearch.svelte';
   import '@xyflow/svelte/dist/style.css';
 
@@ -21,33 +22,11 @@
 
   const nodeTypes: NodeTypes = {
     basic: NodeWithParams,
-    graphviz: NodeWithGraphVisualization,
+    graph_view: NodeWithGraphView,
+    table_view: NodeWithTableView,
   };
 
-  const nodes = writable<Node[]>([
-    {
-      id: '1',
-      type: 'basic',
-      data: { title: 'Compute PageRank', params: { damping: 0.85, iterations: 3 } },
-      position: { x: 0, y: 0 },
-      sourcePosition: Position.Right,
-      targetPosition: Position.Left,
-    },
-    {
-      id: '3',
-      type: 'basic',
-      data: { title: 'Import Parquet', params: { filename: '/tmp/x.parquet' } },
-      position: { x: -400, y: 0 },
-      sourcePosition: Position.Right,
-    },
-    {
-      id: '4',
-      type: 'graphviz',
-      data: { title: 'Visualize graph', params: {} },
-      position: { x: 300, y: 0 },
-      targetPosition: Position.Left,
-    },
-  ]);
+  const nodes = writable<Node[]>([]);
 
   const edges = writable<Edge[]>([
     {

web/src/LynxKiteNode.svelte

@@ -56,12 +56,14 @@
   }
   .node-container {
     padding: 8px;
-    min-width: 170px;
-    max-width: 300px;
   }
   .lynxkite-node {
     box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3);
     background: white;
+    min-width: 170px;
+    max-width: 300px;
+    max-height: 400px;
+    overflow-y: auto;
   }
   .title {
     background: #ff8800;

web/src/{NodeWithGraphVisualization.svelte → NodeWithGraphView.svelte}

@@ -5,14 +5,13 @@
   import * as graphologyLibrary from 'graphology-library';
   import LynxKiteNode from './LynxKiteNode.svelte';
   type $$Props = NodeProps;
-  export let id: $$Props['id'];
   export let data: $$Props['data'];
   let sigmaCanvas: HTMLElement;
   let sigmaInstance: Sigma;
 
   $: if (sigmaCanvas) sigmaInstance = new Sigma(new graphology.Graph(), sigmaCanvas);
-  $: if (sigmaInstance && data.graph) {
-    const graph = graphology.Graph.from(data.graph);
+  $: if (sigmaInstance && data.view) {
+    const graph = graphology.Graph.from(data.view);
     graphologyLibrary.layout.random.assign(graph);
     const settings = graphologyLibrary.layoutForceAtlas2.inferSettings(graph);
     graphologyLibrary.layoutForceAtlas2.assign(graph, { iterations: 10, settings });

web/src/NodeWithTableView.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { type NodeProps } from '@xyflow/svelte';
+  import LynxKiteNode from './LynxKiteNode.svelte';
+  type $$Props = NodeProps;
+  export let data: $$Props['data'];
+</script>
+
+<LynxKiteNode {...$$props}>
+  {#if data.view}
+    {#each Object.entries(data.view.dataframes) as [name, df]}
+      <div class="df-head">{name}</div>
+      <table>
+        <tr>
+          {#each df.columns as column}
+            <th>{column}</th>
+          {/each}
+        </tr>
+        {#each df.data as row}
+          <tr>
+            {#each row as cell}
+              <td>{cell}</td>
+            {/each}
+          </tr>
+        {/each}
+      </table>
+    {/each}
+  {/if}
+</LynxKiteNode>
+<style>
+  .df-head {
+    font-weight: bold;
+    padding: 8px;
+    background: #f0f0f0;
+  }
+  table {
+    margin: 8px;
+    border-collapse: collapse;
+  }
+</style>