Merge pull request #12 from lynxkite/darabos-shadows

lynxkite-app/tests/test_main.py

@@ -44,6 +44,8 @@ def test_save_and_load():
                         "params": {"param1": "value"},
                     },
                     "position": {"x": -493.5496596237119, "y": 20.90123252513356},
+                    "width": 100,
+                    "height": 100,
                 }
             ],
             "edges": [],

lynxkite-app/web/src/apiTypes.ts

@@ -34,6 +34,8 @@ export interface WorkspaceNode {
   type: string;
   data: WorkspaceNodeData;
   position: Position;
+  width: number;
+  height: number;
   [k: string]: unknown;
 }
 export interface WorkspaceNodeData {

lynxkite-app/web/src/index.css

@@ -76,6 +76,7 @@ body {
   .lynxkite-node {
     box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3);
     border-radius: 4px;
+    overflow: hidden;
     background: white;
     display: flex;
     flex-direction: column;

lynxkite-app/web/src/workspace/Workspace.tsx

@@ -16,7 +16,7 @@ import {
   useUpdateNodeInternals,
 } from "@xyflow/react";
 import axios from "axios";
-import { type MouseEvent, useCallback, useEffect, useMemo, useState } from "react";
+import { type MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Link } from "react-router";
 import useSWR, { type Fetcher } from "swr";
 import { WebsocketProvider } from "y-websocket";
@@ -61,6 +61,7 @@ export default function Workspace(props: any) {
 function LynxKiteFlow() {
   const updateNodeInternals = useUpdateNodeInternals();
   const reactFlow = useReactFlow();
+  const reactFlowContainer = useRef<HTMLDivElement>(null);
   const [nodes, setNodes] = useState([] as Node[]);
   const [edges, setEdges] = useState([] as Edge[]);
   const path = usePath().replace(/^[/]edit[/]/, "");
@@ -210,7 +211,7 @@ function LynxKiteFlow() {
       if (event.key === "/") {
         event.preventDefault();
         setNodeSearchSettings({
-          pos: { x: 100, y: 100 },
+          pos: getBestPosition(),
           boxes: catalog.data![state.workspace.env!],
         });
       } else if (event.key === "r") {
@@ -225,6 +226,39 @@ function LynxKiteFlow() {
     };
   }, [catalog.data, nodeSearchSettings, state.workspace.env]);
 
+  function getBestPosition() {
+    const W = reactFlowContainer.current!.clientWidth;
+    const H = reactFlowContainer.current!.clientHeight;
+    const w = 200;
+    const h = 200;
+    const SPEED = 20;
+    const GAP = 50;
+    const pos = { x: 100, y: 100 };
+    while (pos.y < H) {
+      // Find a position that is not occupied by a node.
+      const fpos = reactFlow.screenToFlowPosition(pos);
+      const occupied = state.workspace.nodes!.some((n) => {
+        const np = n.position;
+        return (
+          np.x < fpos.x + w + GAP &&
+          np.x + n.width + GAP > fpos.x &&
+          np.y < fpos.y + h + GAP &&
+          np.y + n.height + GAP > fpos.y
+        );
+      });
+      if (!occupied) {
+        return pos;
+      }
+      // Move the position to the right and down until we find a free spot.
+      pos.x += SPEED;
+      if (pos.x + w > W) {
+        pos.x = 100;
+        pos.y += SPEED;
+      }
+    }
+    return { x: 100, y: 100 };
+  }
+
   function isTypingInFormElement() {
     const activeElement = document.activeElement;
     return (
@@ -504,7 +538,12 @@ function LynxKiteFlow() {
           </Tooltip>
         </div>
       </div>
-      <div style={{ height: "100%", width: "100vw" }} onDragOver={onDragOver} onDrop={onDrop}>
+      <div
+        style={{ height: "100%", width: "100vw" }}
+        onDragOver={onDragOver}
+        onDrop={onDrop}
+        ref={reactFlowContainer}
+      >
         <LynxKiteState.Provider value={state}>
           <ReactFlow
             nodes={nodes}
@@ -517,9 +556,13 @@ function LynxKiteFlow() {
             onPaneClick={toggleNodeSearch}
             onConnect={onConnect}
             proOptions={{ hideAttribution: true }}
-            maxZoom={1}
+            maxZoom={10}
             minZoom={0.2}
             zoomOnScroll={false}
+            panOnScroll={true}
+            panOnDrag={false}
+            selectionOnDrag={true}
+            panOnScrollSpeed={1}
             preventScrolling={false}
             defaultEdgeOptions={{
               markerEnd: {
@@ -533,6 +576,7 @@ function LynxKiteFlow() {
                 stroke: "black",
               },
             }}
+            fitViewOptions={{ maxZoom: 1 }}
           >
             <Controls />
             {nodeSearchSettings && (

lynxkite-app/web/src/workspace/nodes/NodeParameter.tsx

@@ -237,7 +237,7 @@ export default function NodeParameter({ name, value, meta, data, setParam }: Nod
       <textarea
         className="textarea textarea-bordered w-full"
         rows={6}
-        value={value}
+        value={value || ""}
         onChange={(evt) => onChange(evt.currentTarget.value, { delay: 2 })}
         onBlur={(evt) => onChange(evt.currentTarget.value, { delay: 0 })}
       />

lynxkite-app/web/tests/lynxkite.ts

@@ -53,14 +53,8 @@ export class Workspace {
   }
 
   async addBox(boxName) {
-    //TODO: Support passing box parameters (id, position, etc.)
+    // TODO: Support passing box parameters.
     const allBoxes = await this.getBoxes().all();
-    if (allBoxes) {
-      // Avoid overlapping with existing nodes
-      const numNodes = allBoxes.length || 1;
-      await this.page.mouse.wheel(0, numNodes * 400);
-    }
-
     await this.page.locator(".ws-name").click();
     await this.page.keyboard.press("/");
     await this.page.locator(".node-search").getByText(boxName, { exact: true }).click();

lynxkite-core/src/lynxkite/core/workspace.py

@@ -40,12 +40,13 @@ class WorkspaceNodeData(BaseConfig):
 
 
 class WorkspaceNode(BaseConfig):
-    # The naming of these attributes matches the ones for the NodeBase type in React flow
-    # modyfing them will break the frontend.
+    # Most of these fields are shared with ReactFlow.
     id: str
     type: str
     data: WorkspaceNodeData
     position: Position
+    width: float
+    height: float
     _crdt: pycrdt.Map
 
     def publish_started(self):
@@ -202,27 +203,27 @@ class Workspace(BaseConfig):
                     nc["data"] = pycrdt.Map()
                 np._crdt = nc
 
-    def add_node(self, func):
+    def add_node(self, func=None, **kwargs):
         """For convenience in e.g. tests."""
         random_string = os.urandom(4).hex()
-        node = WorkspaceNode(
-            id=f"{func.__op__.name} {random_string}",
-            type=func.__op__.type,
-            data=WorkspaceNodeData(
-                title=func.__op__.name,
-                params={},
-                display=None,
-                input_metadata=None,
-                error=None,
-                status=NodeStatus.planned,
-            ),
-            position=Position(x=0, y=0),
-        )
+        if func:
+            kwargs["type"] = func.__op__.type
+            kwargs["data"] = WorkspaceNodeData(title=func.__op__.name, params={})
+        kwargs.setdefault("type", "basic")
+        kwargs.setdefault("id", f"{kwargs['data'].title} {random_string}")
+        kwargs.setdefault("position", Position(x=0, y=0))
+        kwargs.setdefault("width", 100)
+        kwargs.setdefault("height", 100)
+        node = WorkspaceNode(**kwargs)
         self.nodes.append(node)
         return node
 
     def add_edge(
-        self, source: WorkspaceNode, sourceHandle: str, target: WorkspaceNode, targetHandle: str
+        self,
+        source: WorkspaceNode,
+        sourceHandle: str,
+        target: WorkspaceNode,
+        targetHandle: str,
     ):
         """For convenience in e.g. tests."""
         edge = WorkspaceEdge(

lynxkite-core/tests/test_workspace.py

@@ -6,21 +6,15 @@ from lynxkite.core import workspace
 
 def test_save_load():
     ws = workspace.Workspace(env="test")
-    ws.nodes.append(
-        workspace.WorkspaceNode(
-            id="1",
-            type="node_type",
-            data=workspace.WorkspaceNodeData(title="Node 1", params={}),
-            position=workspace.Position(x=0, y=0),
-        )
+    ws.add_node(
+        id="1",
+        type="node_type",
+        data=workspace.WorkspaceNodeData(title="Node 1", params={}),
     )
-    ws.nodes.append(
-        workspace.WorkspaceNode(
-            id="2",
-            type="node_type",
-            data=workspace.WorkspaceNodeData(title="Node 2", params={}),
-            position=workspace.Position(x=0, y=0),
-        )
+    ws.add_node(
+        id="2",
+        type="node_type",
+        data=workspace.WorkspaceNodeData(title="Node 2", params={}),
     )
     ws.edges.append(
         workspace.WorkspaceEdge(
@@ -72,21 +66,15 @@ def populate_ops_catalog():
 
 def test_update_metadata():
     ws = workspace.Workspace(env="test")
-    ws.nodes.append(
-        workspace.WorkspaceNode(
-            id="1",
-            type="basic",
-            data=workspace.WorkspaceNodeData(title="Test Operation", params={}),
-            position=workspace.Position(x=0, y=0),
-        )
+    ws.add_node(
+        id="1",
+        type="basic",
+        data=workspace.WorkspaceNodeData(title="Test Operation", params={}),
     )
-    ws.nodes.append(
-        workspace.WorkspaceNode(
-            id="2",
-            type="basic",
-            data=workspace.WorkspaceNodeData(title="Unknown Operation", params={}),
-            position=workspace.Position(x=0, y=0),
-        )
+    ws.add_node(
+        id="2",
+        type="basic",
+        data=workspace.WorkspaceNodeData(title="Unknown Operation", params={}),
     )
     ws.update_metadata()
     assert ws.nodes[0].data.meta.name == "Test Operation"

lynxkite-graph-analytics/tests/test_lynxkite_ops.py

@@ -8,13 +8,11 @@ from lynxkite_graph_analytics.core import Bundle, execute, ENV
 
 async def test_execute_operation_not_in_catalog():
     ws = workspace.Workspace(env=ENV)
-    ws.nodes.append(
-        workspace.WorkspaceNode(
-            id="1",
-            type="node_type",
-            data=workspace.WorkspaceNodeData(title="Non existing op", params={}),
-            position=workspace.Position(x=0, y=0),
-        )
+    ws.add_node(
+        id="1",
+        type="node_type",
+        data=workspace.WorkspaceNodeData(title="Non existing op", params={}),
+        position=workspace.Position(x=0, y=0),
     )
     await execute(ws)
     assert ws.nodes[0].data.error == "Operation not found in catalog"
@@ -43,37 +41,29 @@ async def test_execute_operation_inputs_correct_cast():
         return bundle
 
     ws = workspace.Workspace(env="test")
-    ws.nodes.append(
-        workspace.WorkspaceNode(
-            id="1",
-            type="node_type",
-            data=workspace.WorkspaceNodeData(title="Create Bundle", params={}),
-            position=workspace.Position(x=0, y=0),
-        )
+    ws.add_node(
+        id="1",
+        type="node_type",
+        data=workspace.WorkspaceNodeData(title="Create Bundle", params={}),
+        position=workspace.Position(x=0, y=0),
     )
-    ws.nodes.append(
-        workspace.WorkspaceNode(
-            id="2",
-            type="node_type",
-            data=workspace.WorkspaceNodeData(title="Bundle to Graph", params={}),
-            position=workspace.Position(x=100, y=0),
-        )
+    ws.add_node(
+        id="2",
+        type="node_type",
+        data=workspace.WorkspaceNodeData(title="Bundle to Graph", params={}),
+        position=workspace.Position(x=100, y=0),
     )
-    ws.nodes.append(
-        workspace.WorkspaceNode(
-            id="3",
-            type="node_type",
-            data=workspace.WorkspaceNodeData(title="Graph to Bundle", params={}),
-            position=workspace.Position(x=200, y=0),
-        )
+    ws.add_node(
+        id="3",
+        type="node_type",
+        data=workspace.WorkspaceNodeData(title="Graph to Bundle", params={}),
+        position=workspace.Position(x=200, y=0),
     )
-    ws.nodes.append(
-        workspace.WorkspaceNode(
-            id="4",
-            type="node_type",
-            data=workspace.WorkspaceNodeData(title="Dataframe to Bundle", params={}),
-            position=workspace.Position(x=300, y=0),
-        )
+    ws.add_node(
+        id="4",
+        type="node_type",
+        data=workspace.WorkspaceNodeData(title="Dataframe to Bundle", params={}),
+        position=workspace.Position(x=300, y=0),
     )
     ws.edges = [
         workspace.WorkspaceEdge(
@@ -109,29 +99,23 @@ async def test_multiple_inputs():
         return a < b
 
     ws = workspace.Workspace(env="test")
-    ws.nodes.append(
-        workspace.WorkspaceNode(
-            id="one",
-            type="cool",
-            data=workspace.WorkspaceNodeData(title="One", params={}),
-            position=workspace.Position(x=0, y=0),
-        )
+    ws.add_node(
+        id="one",
+        type="cool",
+        data=workspace.WorkspaceNodeData(title="One", params={}),
+        position=workspace.Position(x=0, y=0),
     )
-    ws.nodes.append(
-        workspace.WorkspaceNode(
-            id="two",
-            type="cool",
-            data=workspace.WorkspaceNodeData(title="Two", params={}),
-            position=workspace.Position(x=100, y=0),
-        )
+    ws.add_node(
+        id="two",
+        type="cool",
+        data=workspace.WorkspaceNodeData(title="Two", params={}),
+        position=workspace.Position(x=100, y=0),
     )
-    ws.nodes.append(
-        workspace.WorkspaceNode(
-            id="smaller",
-            type="cool",
-            data=workspace.WorkspaceNodeData(title="Smaller?", params={}),
-            position=workspace.Position(x=200, y=0),
-        )
+    ws.add_node(
+        id="smaller",
+        type="cool",
+        data=workspace.WorkspaceNodeData(title="Smaller?", params={}),
+        position=workspace.Position(x=200, y=0),
     )
     ws.edges = [
         workspace.WorkspaceEdge(

lynxkite-graph-analytics/tests/test_pytorch_model_ops.py

@@ -9,16 +9,9 @@ def make_ws(env, nodes: dict[str, dict], edges: list[tuple[str, str]]):
     for id, data in nodes.items():
         title = data["title"]
         del data["title"]
-        ws.nodes.append(
-            workspace.WorkspaceNode(
-                id=id,
-                type="basic",
-                data=workspace.WorkspaceNodeData(title=title, params=data),
-                position=workspace.Position(
-                    x=data.get("x", 0),
-                    y=data.get("y", 0),
-                ),
-            )
+        ws.add_node(
+            id=id,
+            data=workspace.WorkspaceNodeData(title=title, params=data),
         )
     ws.edges = [
         workspace.WorkspaceEdge(