Start adding graph viz.

web/package-lock.json

@@ -9,7 +9,9 @@
       "version": "0.0.0",
       "dependencies": {
         "@xyflow/svelte": "^0.0.40",
-        "fuse.js": "^7.0.0"
+        "fuse.js": "^7.0.0",
+        "graphology": "^0.25.4",
+        "sigma": "^3.0.0-beta.17"
       },
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^3.0.2",
@@ -1331,6 +1333,14 @@
         "@types/estree": "^1.0.0"
       }
     },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -1431,6 +1441,32 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
+    "node_modules/graphology": {
+      "version": "0.25.4",
+      "resolved": "https://registry.npmjs.org/graphology/-/graphology-0.25.4.tgz",
+      "integrity": "sha512-33g0Ol9nkWdD6ulw687viS8YJQBxqG5LWII6FI6nul0pq6iM2t5EKquOTFDbyTblRB3O9I+7KX4xI8u5ffekAQ==",
+      "dependencies": {
+        "events": "^3.3.0",
+        "obliterator": "^2.0.2"
+      },
+      "peerDependencies": {
+        "graphology-types": ">=0.24.0"
+      }
+    },
+    "node_modules/graphology-types": {
+      "version": "0.24.7",
+      "resolved": "https://registry.npmjs.org/graphology-types/-/graphology-types-0.24.7.tgz",
+      "integrity": "sha512-tdcqOOpwArNjEr0gNQKCXwaNCWnQJrog14nJNQPeemcLnXQUUGrsCWpWkVKt46zLjcS6/KGoayeJfHHyPDlvwA==",
+      "peer": true
+    },
+    "node_modules/graphology-utils": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/graphology-utils/-/graphology-utils-2.5.2.tgz",
+      "integrity": "sha512-ckHg8MXrXJkOARk56ZaSCM1g1Wihe2d6iTmz1enGOz4W/l831MBCKSayeFQfowgF8wd+PQ4rlch/56Vs/VZLDQ==",
+      "peerDependencies": {
+        "graphology-types": ">=0.23.0"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -1643,6 +1679,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/obliterator": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/obliterator/-/obliterator-2.0.4.tgz",
+      "integrity": "sha512-lgHwxlxV1qIg1Eap7LgIeoBWIMFibOjbrYPIPJZcI1mmGAI2m3lNYpK12Y+GBdPQ0U1hRwSord7GIaawz962qQ=="
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -1869,6 +1910,15 @@
         "rimraf": "^2.5.2"
       }
     },
+    "node_modules/sigma": {
+      "version": "3.0.0-beta.17",
+      "resolved": "https://registry.npmjs.org/sigma/-/sigma-3.0.0-beta.17.tgz",
+      "integrity": "sha512-1kwQnU+OQNc1bbgr10cpGRr8qV9qkqmHKn+ApNwdogM6uUXwPS8HSQzLEVsQzMScugC3k8aSAw1DszAsAHskaA==",
+      "dependencies": {
+        "events": "^3.3.0",
+        "graphology-utils": "^2.5.2"
+      }
+    },
     "node_modules/sorcery": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.11.0.tgz",
@@ -3014,6 +3064,11 @@
         "@types/estree": "^1.0.0"
       }
     },
+    "events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
+    },
     "fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -3089,6 +3144,27 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
+    "graphology": {
+      "version": "0.25.4",
+      "resolved": "https://registry.npmjs.org/graphology/-/graphology-0.25.4.tgz",
+      "integrity": "sha512-33g0Ol9nkWdD6ulw687viS8YJQBxqG5LWII6FI6nul0pq6iM2t5EKquOTFDbyTblRB3O9I+7KX4xI8u5ffekAQ==",
+      "requires": {
+        "events": "^3.3.0",
+        "obliterator": "^2.0.2"
+      }
+    },
+    "graphology-types": {
+      "version": "0.24.7",
+      "resolved": "https://registry.npmjs.org/graphology-types/-/graphology-types-0.24.7.tgz",
+      "integrity": "sha512-tdcqOOpwArNjEr0gNQKCXwaNCWnQJrog14nJNQPeemcLnXQUUGrsCWpWkVKt46zLjcS6/KGoayeJfHHyPDlvwA==",
+      "peer": true
+    },
+    "graphology-utils": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/graphology-utils/-/graphology-utils-2.5.2.tgz",
+      "integrity": "sha512-ckHg8MXrXJkOARk56ZaSCM1g1Wihe2d6iTmz1enGOz4W/l831MBCKSayeFQfowgF8wd+PQ4rlch/56Vs/VZLDQ==",
+      "requires": {}
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -3241,6 +3317,11 @@
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
       "dev": true
     },
+    "obliterator": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/obliterator/-/obliterator-2.0.4.tgz",
+      "integrity": "sha512-lgHwxlxV1qIg1Eap7LgIeoBWIMFibOjbrYPIPJZcI1mmGAI2m3lNYpK12Y+GBdPQ0U1hRwSord7GIaawz962qQ=="
+    },
     "once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -3385,6 +3466,15 @@
         "rimraf": "^2.5.2"
       }
     },
+    "sigma": {
+      "version": "3.0.0-beta.17",
+      "resolved": "https://registry.npmjs.org/sigma/-/sigma-3.0.0-beta.17.tgz",
+      "integrity": "sha512-1kwQnU+OQNc1bbgr10cpGRr8qV9qkqmHKn+ApNwdogM6uUXwPS8HSQzLEVsQzMScugC3k8aSAw1DszAsAHskaA==",
+      "requires": {
+        "events": "^3.3.0",
+        "graphology-utils": "^2.5.2"
+      }
+    },
     "sorcery": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.11.0.tgz",

web/package.json

@@ -20,6 +20,8 @@
   },
   "dependencies": {
     "@xyflow/svelte": "^0.0.40",
-    "fuse.js": "^7.0.0"
+    "fuse.js": "^7.0.0",
+    "graphology": "^0.25.4",
+    "sigma": "^3.0.0-beta.17"
   }
 }

web/src/LynxKiteFlow.svelte

@@ -12,13 +12,15 @@
     type Node,
     type Edge,
   } from '@xyflow/svelte';
-  import LynxKiteNode from './LynxKiteNode.svelte';
+  import NodeWithParams from './NodeWithParams.svelte';
+  import NodeWithGraphVisualization from './NodeWithGraphVisualization.svelte';
   import NodeSearch from './NodeSearch.svelte';
   import '@xyflow/svelte/dist/style.css';
 
   const { screenToFlowPosition } = useSvelteFlow();
   const nodeTypes: NodeTypes = {
-    basic: LynxKiteNode,
+    basic: NodeWithParams,
+    graphviz: NodeWithGraphVisualization,
   };
 
   const nodes = writable<Node[]>([
@@ -37,6 +39,13 @@
       position: { x: -300, y: 0 },
       sourcePosition: Position.Right,
     },
+    {
+      id: '4',
+      type: 'graphviz',
+      data: { title: 'Visualize graph', params: {} },
+      position: { x: 300, y: 0 },
+      targetPosition: Position.Left,
+    },
   ]);
 
   const edges = writable<Edge[]>([
@@ -48,6 +57,14 @@
         type: MarkerType.ArrowClosed,
       },
     },
+    {
+      id: '3-4',
+      source: '1',
+      target: '4',
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+      },
+    },
   ]);
 
   function closeNodeSearch() {
@@ -97,12 +114,12 @@
     {
       type: 'basic',
       data: { title: 'Export Parquet', params: { filename: '/tmp/x.parquet' } },
-      sourcePosition: Position.Right,
+      targetPosition: Position.Left,
     },
     {
-      type: 'basic',
-      data: { title: 'Export CSV', params: { filename: '/tmp/x.csv' } },
-      sourcePosition: Position.Right,
+      type: 'graphviz',
+      data: { title: 'Visualize graph', params: {} },
+      targetPosition: Position.Left,
     },
     {
       type: 'basic',

web/src/LynxKiteNode.svelte

@@ -32,17 +32,7 @@
       {data.title}
     </div>
     {#if expanded}
-      {#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}
+      <slot />
     {/if}
     {#if sourcePosition}
       <Handle type="source" position={sourcePosition} />
@@ -54,16 +44,6 @@
 </div>
 
 <style>
-  .param {
-    padding: 8px;
-  }
-  .param label {
-    font-size: 12px;
-    display: block;
-  }
-  .param input {
-    width: calc(100% - 8px);
-  }
   .node-container {
     padding: 8px;
   }

web/src/NodeWithGraphVisualization.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import { Handle, 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 id={id} data={data} {...$$restProps}>
+  Graph here.
+</LynxKiteNode>
+<style>
+  .param {
+    padding: 8px;
+  }
+  .param label {
+    font-size: 12px;
+    display: block;
+  }
+  .param input {
+    width: calc(100% - 8px);
+  }
+</style>

web/src/NodeWithParams.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import { Handle, 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 id={id} data={data} {...$$restProps}>
+  {#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>