Box resizing - not perfect yet.

server/ops.py

@@ -39,7 +39,7 @@ class BaseConfig(pydantic.BaseModel):
 class Parameter(BaseConfig):
   '''Defines a parameter for an operation.'''
   name: str
-  default: any
+  default: typing.Any
   type: Type = None
 
   @staticmethod
@@ -77,7 +77,7 @@ def basic_outputs(*names):
 
 
 class Op(BaseConfig):
-  func: callable = pydantic.Field(exclude=True)
+  func: typing.Callable = pydantic.Field(exclude=True)
   name: str
   params: dict[str, Parameter]
   inputs: dict[str, Input]

web/package-lock.json

@@ -13,6 +13,7 @@
         "@sveltestack/svelte-query": "^1.6.0",
         "@xyflow/svelte": "^0.1.3",
         "bootstrap": "^5.3.3",
+        "deep-object-diff": "^1.1.9",
         "echarts": "^5.5.0",
         "fuse.js": "^7.0.0",
         "svelte-echarts": "^1.0.0-rc1",
@@ -1423,6 +1424,11 @@
         }
       }
     },
+    "node_modules/deep-object-diff": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/deep-object-diff/-/deep-object-diff-1.1.9.tgz",
+      "integrity": "sha512-Rn+RuwkmkDwCi2/oXOFS9Gsr5lJZu/yTGpK7wAaAIE75CC+LCGEZHpY6VQJa/RoJcrmaA/docWJZvYohlNkWPA=="
+    },
     "node_modules/deepmerge": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",

web/package.json

@@ -26,6 +26,7 @@
     "@sveltestack/svelte-query": "^1.6.0",
     "@xyflow/svelte": "^0.1.3",
     "bootstrap": "^5.3.3",
+    "deep-object-diff": "^1.1.9",
     "echarts": "^5.5.0",
     "fuse.js": "^7.0.0",
     "svelte-echarts": "^1.0.0-rc1",

web/src/LynxKiteFlow.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { setContext } from 'svelte';
+  import { diff } from 'deep-object-diff';
   import { writable, derived } from 'svelte/store';
   import {
     SvelteFlow,
@@ -131,16 +131,34 @@
     if (doNotSave) return;
     const dragging = g.nodes.find((n) => n.dragging);
     if (dragging) return;
+    const resizing = g.nodes.find((n) => n.data?.beingResized);
+    if (resizing) return;
+    scheduleSave(g);
+  });
+  let saveTimeout;
+  function scheduleSave(g) {
+    // A slight delay, so we don't send a million requests when a node is resized, for example.
+    clearTimeout(saveTimeout);
+    saveTimeout = setTimeout(() => save(g), 500);
+  }
+  function save(g) {
     g = JSON.parse(JSON.stringify(g));
     for (const node of g.nodes) {
-      delete node.computed;
+      delete node.measured;
+      delete node.selected;
+      delete node.dragging;
+      delete node.beingResized;
+    }
+    for (const node of g.edges) {
+      delete node.markerEnd;
       delete node.selected;
     }
     const ws = orderedJSON(g);
     const bd = orderedJSON($backendWorkspace.data);
     if (ws === bd) return;
+    console.log('changed', JSON.stringify(diff(g, $backendWorkspace.data), null, 2));
     $mutation.mutate({ path, ws: g });
-  });
+  }
   function onconnect(connection: Connection) {
     edges.update((edges) => {
       // Only one source can connect to a given target.

web/src/LynxKiteNode.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
-  import { Handle, type NodeProps } from '@xyflow/svelte';
+  import { Handle, useSvelteFlow, useUpdateNodeInternals, type NodeProps, NodeResizeControl } from '@xyflow/svelte';
+  import ChevronDownRight from 'virtual:icons/tabler/chevron-down-right';
 
+  const { updateNodeData } = useSvelteFlow();
+  const updateNodeInternals = useUpdateNodeInternals();
   type $$Props = NodeProps;
 
   export let nodeStyle = '';
@@ -21,10 +24,12 @@
   export let positionAbsoluteY: $$Props['positionAbsoluteY'] = undefined; positionAbsoluteY;
   export let onToggle = () => {};
 
-  let expanded = true;
+  $: expanded = !data.collapsed;
   function titleClicked() {
-    expanded = !expanded;
+    updateNodeData(id, { collapsed: expanded });
+    data = data;
     onToggle({ expanded });
+    updateNodeInternals();
   }
   function asPx(n: number | undefined) {
     return n ? n + 'px' : undefined;
@@ -34,7 +39,8 @@
   const handleOffsetDirection = { top: 'left', bottom: 'left', left: 'top', right: 'top' };
 </script>
 
-<div class="node-container" style:width={asPx(width)} style:height={asPx(height)} style={containerStyle}>
+<div class="node-container" class:expanded={expanded}
+  style:width={asPx(width)} style:height={asPx(expanded ? height : undefined)} style={containerStyle}>
   <div class="lynxkite-node" style={nodeStyle}>
     <div class="title" on:click={titleClicked}>
       {data.title}
@@ -62,6 +68,17 @@
       </Handle>
     {/each}
   </div>
+  {#if expanded}
+    <NodeResizeControl
+      minWidth={100}
+      minHeight={50}
+      style="background: transparent; border: none;"
+      onResizeStart={() => updateNodeData(id, { beingResized: true })}
+      onResizeEnd={() => updateNodeData(id, { beingResized: false })}
+      >
+      <ChevronDownRight class="node-resizer" />
+    </NodeResizeControl>
+  {/if}
 </div>
 
 <style>
@@ -76,15 +93,15 @@
   }
   .node-container {
     padding: 8px;
-    min-width: 200px;
-    max-width: 400px;
-    max-height: 400px;
+    position: relative;
   }
   .lynxkite-node {
     box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
     background: white;
+  }
+  .expanded .lynxkite-node {
     overflow-y: auto;
-    border-radius: 4px;
     height: 100%;
   }
   .title {
@@ -120,4 +137,11 @@
   .node-container:hover .handle-name {
     visibility: visible;
   }
+  :global(.node-resizer) {
+    position: absolute;
+    bottom: 8px;
+    right: 8px;
+    cursor: nwse-resize;
+    color: var(--bs-border-color);
+  }
 </style>