Color by PageRank.

requirements.txt

@@ -1,5 +1,7 @@
 fastapi
+matplotlib
 networkx
 numpy
 pandas
+scipy
 uvicorn

server/basic_ops.py

@@ -1,7 +1,8 @@
 '''Some operations. To be split into separate files when we have more.'''
 from . import ops
-import pandas as pd
+import matplotlib
 import networkx as nx
+import pandas as pd
 
 @ops.op("Import Parquet")
 def import_parquet(*, filename: str):
@@ -14,28 +15,51 @@ def create_scale_free_graph(*, nodes: int = 10):
   return nx.scale_free_graph(nodes)
 
 @ops.op("Compute PageRank")
-def compute_pagerank(graph: nx.Graph, *, damping: 0.85, iterations: 3):
-  return nx.pagerank(graph)
+def compute_pagerank(graph: nx.Graph, *, damping=0.85, iterations=3):
+  graph = graph.copy()
+  pr = nx.pagerank(graph, alpha=damping, max_iter=iterations)
+  nx.set_node_attributes(graph, pr, 'pagerank')
+  return graph
+
+
+def _map_color(value):
+  cmap = matplotlib.cm.get_cmap('viridis')
+  value = (value - value.min()) / (value.max() - value.min())
+  rgba = cmap(value)
+  return ['#{:02x}{:02x}{:02x}'.format(int(r*255), int(g*255), int(b*255)) for r, g, b in rgba[:, :3]]
 
 @ops.op("Visualize graph")
-def visualize_graph(graph: ops.Bundle) -> 'graph_view':
-  nodes = graph.dfs['nodes']['id'].tolist()
+def visualize_graph(graph: ops.Bundle, *, color_nodes_by: 'node_attribute' = None) -> 'graph_view':
+  nodes = graph.dfs['nodes'].copy()
+  node_attributes = sorted(nodes.columns)
+  if color_nodes_by:
+    nodes['color'] = _map_color(nodes[color_nodes_by])
+  nodes = nodes.to_records()
   edges = graph.dfs['edges'].drop_duplicates(['source', 'target'])
-  edges = edges.to_dict(orient='records')
-  return {
+  edges = edges.to_records()
+  v = {
+    'node_attributes': node_attributes,
     'attributes': {},
     'options': {},
-    'nodes': [{'key': id} for id in nodes],
-    'edges': [{'key': str(r['source']) + ' -> ' + str(r['target']), **r} for r in edges],
+    'nodes': [
+      {
+        'key': str(n.id),
+        'attributes': {'color': n.color, 'size': 5} if color_nodes_by else {}
+      }
+      for n in nodes],
+    'edges': [
+      {'key': str(r.source) + ' -> ' + str(r.target), 'source': str(r.source), 'target': str(r.target)}
+      for r in edges],
   }
+  return v
 
-@ops.op("View table")
-def view_table(dfs: ops.Bundle) -> 'table_view':
+@ops.op("View tables")
+def view_tables(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,
+    'relations': dfs.relations,
   }
   return v

server/ops.py

@@ -21,8 +21,12 @@ class Op:
     for p in params:
       if p in self.params:
         t = sig.parameters[p].annotation
+        if t is inspect._empty:
+          t = type(sig.parameters[p].default)
         if t == int:
           params[p] = int(params[p])
+        elif t == float:
+          params[p] = float(params[p])
     # Convert inputs.
     inputs = list(inputs)
     for i, (x, p) in enumerate(zip(inputs, sig.parameters.values())):
@@ -35,7 +39,7 @@ class Op:
     return res
 
 @dataclasses.dataclass
-class EdgeDefinition:
+class RelationDefinition:
   df: str
   source_column: str
   target_column: str
@@ -47,16 +51,17 @@ class EdgeDefinition:
 @dataclasses.dataclass
 class Bundle:
   dfs: dict
-  edges: list[EdgeDefinition]
+  relations: list[RelationDefinition]
 
   @classmethod
   def from_nx(cls, graph: nx.Graph):
     edges = nx.to_pandas_edgelist(graph)
-    nodes = pd.DataFrame({'id': list(graph.nodes)})
+    nodes = pd.DataFrame.from_dict(dict(graph.nodes(data=True)), orient='index')
+    nodes['id'] = nodes.index
     return cls(
       dfs={'edges': edges, 'nodes': nodes},
-      edges=[
-        EdgeDefinition(
+      relations=[
+        RelationDefinition(
           df='edges',
           source_column='source',
           target_column='target',

web/src/NodeWithGraphView.svelte

@@ -1,17 +1,21 @@
 <script lang="ts">
-  import { type NodeProps } from '@xyflow/svelte';
+  import { type NodeProps, useSvelteFlow } from '@xyflow/svelte';
   import Sigma from 'sigma';
   import * as graphology from 'graphology';
   import * as graphologyLibrary from 'graphology-library';
   import LynxKiteNode from './LynxKiteNode.svelte';
   type $$Props = NodeProps;
+  const { updateNodeData } = useSvelteFlow();
+  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.view) {
-    const graph = graphology.Graph.from(data.view);
+    // Graphology will modify this in place, so we make a copy.
+    const view = JSON.parse(JSON.stringify(data.view));
+    const graph = graphology.Graph.from(view);
     graphologyLibrary.layout.random.assign(graph);
     const settings = graphologyLibrary.layoutForceAtlas2.inferSettings(graph);
     graphologyLibrary.layoutForceAtlas2.assign(graph, { iterations: 10, settings });
@@ -22,6 +26,15 @@
 </script>
 
 <LynxKiteNode {...$$props}>
+  {#if data.view}
+    <label>Color by
+      <select on:change={(evt) => updateNodeData(id, { params: { ...data.params, color_nodes_by: evt.currentTarget.value } })}>
+        <option value="">nothing</option>
+        {#each data.view.node_attributes as attr}
+          <option value={attr} selected={attr === data.params.color_nodes_by}>{attr}</option>
+        {/each}
+    </select></label>
+  {/if}
   <div bind:this={sigmaCanvas} style="height: 200px; width: 200px;" >
   </div>
 </LynxKiteNode>