Automatically find location for "/".

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/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}
@@ -537,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):