Merge pull request #10 from lynxkite/darabos-grouping

lynxkite-app/src/lynxkite_app/crdt.py

@@ -117,6 +117,7 @@ last_ws_input = None
 
 
 def clean_input(ws_pyd):
+    """Delete everything that we want to ignore for the purposes of change detection."""
     for node in ws_pyd.nodes:
         node.data.display = None
         node.data.input_metadata = None
@@ -125,6 +126,8 @@ def clean_input(ws_pyd):
         for p in list(node.data.params):
             if p.startswith("_"):
                 del node.data.params[p]
+        if node.data.title == "Comment":
+            node.data.params = {}
         node.position.x = 0
         node.position.y = 0
         if node.model_extra:

lynxkite-app/web/src/Directory.tsx

@@ -58,7 +58,7 @@ function EntryCreator(props: {
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
-export default function () {
+export default function Directory() {
   const path = usePath().replace(/^[/]$|^[/]dir$|^[/]dir[/]/, "");
   const encodedPath = encodeURIComponent(path || "");
   const list = useSWR(`/api/dir/list?path=${encodedPath}`, fetcher, {

lynxkite-app/web/src/Tooltip.tsx

@@ -7,9 +7,9 @@ export default function Tooltip(props: any) {
   if (!props.doc) return null;
   return (
     <>
-      <a data-tooltip-id={id} tabIndex={0}>
+      <span data-tooltip-id={id} tabIndex={0}>
         {props.children}
-      </a>
+      </span>
       <ReactTooltip id={id} className="tooltip prose" place="top-end">
         {props.doc.map?.(
           (section: any, i: number) =>

lynxkite-app/web/src/common.ts

@@ -5,3 +5,12 @@ export function usePath() {
   const path = decodeURIComponent(useLocation().pathname).replace(/[/]$/, "");
   return path;
 }
+
+export const COLORS: { [key: string]: string } = {
+  gray: "oklch(95% 0 0)",
+  pink: "oklch(75% 0.2 0)",
+  orange: "oklch(75% 0.2 55)",
+  green: "oklch(75% 0.2 150)",
+  blue: "oklch(75% 0.2 230)",
+  purple: "oklch(75% 0.2 290)",
+};

lynxkite-app/web/src/index.css

@@ -88,6 +88,42 @@ body {
     }
   }
 
+  .in-group .lynxkite-node {
+    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
+    opacity: 0.3;
+    transition: opacity 0.3s;
+  }
+
+  .in-group .lynxkite-node:hover {
+    opacity: 1;
+  }
+
+  .node-group {
+    box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.3);
+    border-radius: 20px;
+    border: none;
+    background-color: white;
+    opacity: 0.9;
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    padding: 10px 20px;
+  }
+
+  .node-group-color-picker-icon {
+    font-size: 30px;
+    opacity: 0.1;
+    transition: opacity 0.3s;
+  }
+
+  .node-group:hover .node-group-color-picker-icon {
+    opacity: 1;
+  }
+
+  .color-picker-button {
+    font-size: 30px;
+  }
+
   .tooltip {
     padding: 8px;
     border-radius: 4px;
@@ -102,6 +138,10 @@ body {
     max-width: 300px;
   }
 
+  .prose p {
+    margin-bottom: 0;
+  }
+
   .expanded .lynxkite-node {
     height: 100%;
   }
@@ -526,12 +566,17 @@ body {
   z-index: -10 !important;
 }
 
+.selected .node-group,
 .selected .comment-view,
 .selected .lynxkite-node {
   outline: var(--xy-selection-border, var(--xy-selection-border-default));
   outline-offset: 7.5px;
 }
 
+.selected .node-group {
+  outline-offset: 20px;
+}
+
 .graph-creation-view {
   display: flex;
   width: 100%;

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

@@ -10,7 +10,7 @@ export type OpsOp = {
 export type Catalog = { [op: string]: OpsOp };
 export type Catalogs = { [env: string]: Catalog };
 
-export default function (props: {
+export default function NodeSearch(props: {
   boxes: Catalog;
   onCancel: any;
   onAdd: any;

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

@@ -25,10 +25,15 @@ import Atom from "~icons/tabler/atom.jsx";
 // @ts-ignore
 import Backspace from "~icons/tabler/backspace.jsx";
 // @ts-ignore
+import UngroupIcon from "~icons/tabler/library-minus.jsx";
+// @ts-ignore
+import GroupIcon from "~icons/tabler/library-plus.jsx";
+// @ts-ignore
 import Restart from "~icons/tabler/rotate-clockwise.jsx";
 // @ts-ignore
 import Close from "~icons/tabler/x.jsx";
-import type { Workspace, WorkspaceNode } from "../apiTypes.ts";
+import Tooltip from "../Tooltip.tsx";
+import type { WorkspaceNode, Workspace as WorkspaceType } from "../apiTypes.ts";
 import favicon from "../assets/favicon.ico";
 import { usePath } from "../common.ts";
 // import NodeWithTableView from './NodeWithTableView';
@@ -37,6 +42,7 @@ import LynxKiteEdge from "./LynxKiteEdge.tsx";
 import { LynxKiteState } from "./LynxKiteState";
 import NodeSearch, { type OpsOp, type Catalog, type Catalogs } from "./NodeSearch.tsx";
 import NodeWithGraphCreationView from "./nodes/GraphCreationNode.tsx";
+import Group from "./nodes/Group.tsx";
 import NodeWithComment from "./nodes/NodeWithComment.tsx";
 import NodeWithImage from "./nodes/NodeWithImage.tsx";
 import NodeWithMolecule from "./nodes/NodeWithMolecule.tsx";
@@ -44,7 +50,7 @@ import NodeWithParams from "./nodes/NodeWithParams";
 import NodeWithTableView from "./nodes/NodeWithTableView.tsx";
 import NodeWithVisualization from "./nodes/NodeWithVisualization.tsx";
 
-export default function (props: any) {
+export default function Workspace(props: any) {
   return (
     <ReactFlowProvider>
       <LynxKiteFlow {...props} />
@@ -62,10 +68,10 @@ function LynxKiteFlow() {
     .split("/")
     .pop()!
     .replace(/[.]lynxkite[.]json$/, "");
-  const [state, setState] = useState({ workspace: {} as Workspace });
+  const [state, setState] = useState({ workspace: {} as WorkspaceType });
   const [message, setMessage] = useState(null as string | null);
   useEffect(() => {
-    const state = syncedStore({ workspace: {} as Workspace });
+    const state = syncedStore({ workspace: {} as WorkspaceType });
     setState(state);
     const doc = getYjsDoc(state);
     const proto = location.protocol === "https:" ? "wss:" : "ws:";
@@ -78,7 +84,7 @@ function LynxKiteFlow() {
         if (!state.workspace.nodes) return;
         if (!state.workspace.edges) return;
         for (const n of state.workspace.nodes) {
-          if (n.dragHandle !== ".drag-handle") {
+          if (n.type !== "node_group" && n.dragHandle !== ".drag-handle") {
             n.dragHandle = ".drag-handle";
           }
         }
@@ -185,6 +191,7 @@ function LynxKiteFlow() {
       graph_creation_view: NodeWithGraphCreationView,
       molecule: NodeWithMolecule,
       comment: NodeWithComment,
+      node_group: Group,
     }),
     [],
   );
@@ -247,16 +254,18 @@ function LynxKiteFlow() {
     },
     [catalog, state, nodeSearchSettings, suppressSearchUntil, closeNodeSearch],
   );
-  function addNode(node: Partial<WorkspaceNode>, state: { workspace: Workspace }, nodes: Node[]) {
-    const title = node.data?.title;
+  function findFreeId(prefix: string) {
     let i = 1;
-    node.id = `${title} ${i}`;
-    const wnodes = state.workspace.nodes!;
-    while (wnodes.find((x) => x.id === node.id)) {
+    let id = `${prefix} ${i}`;
+    const used = new Set(state.workspace.nodes!.map((n) => n.id));
+    while (used.has(id)) {
       i += 1;
-      node.id = `${title} ${i}`;
+      id = `${prefix} ${i}`;
     }
-    wnodes.push(node as WorkspaceNode);
+    return id;
+  }
+  function addNode(node: Partial<WorkspaceNode>) {
+    state.workspace.nodes!.push(node as WorkspaceNode);
     setNodes([...nodes, node as WorkspaceNode]);
   }
   function nodeFromMeta(meta: OpsOp): Partial<WorkspaceNode> {
@@ -278,7 +287,8 @@ function LynxKiteFlow() {
         x: nss.pos.x,
         y: nss.pos.y,
       });
-      addNode(node, state, nodes);
+      node.id = findFreeId(node.data!.title);
+      addNode(node);
       closeNodeSearch();
     },
     [nodeSearchSettings, state, reactFlow, nodes, closeNodeSearch],
@@ -321,6 +331,7 @@ function LynxKiteFlow() {
       setMessage(null);
       const cat = catalog.data![state.workspace.env!];
       const node = nodeFromMeta(cat["Import file"]);
+      node.id = findFreeId(node.data!.title);
       node.position = reactFlow.screenToFlowPosition({
         x: e.clientX,
         y: e.clientY,
@@ -335,7 +346,7 @@ function LynxKiteFlow() {
       } else if (file.name.includes(".xls")) {
         node.data!.params.file_format = "excel";
       }
-      addNode(node, state, nodes);
+      addNode(node);
     } catch (error) {
       setMessage("File upload failed.");
     }
@@ -346,6 +357,106 @@ function LynxKiteFlow() {
       setMessage("Workspace execution failed.");
     }
   }
+  function deleteSelection() {
+    const selectedNodes = nodes.filter((n) => n.selected);
+    const selectedEdges = edges.filter((e) => e.selected);
+    reactFlow.deleteElements({ nodes: selectedNodes, edges: selectedEdges });
+  }
+  function groupSelection() {
+    const selectedNodes = nodes.filter((n) => n.selected && !n.parentId);
+    const groupNode = {
+      id: findFreeId("Group"),
+      type: "node_group",
+      position: { x: 0, y: 0 },
+      width: 0,
+      height: 0,
+      data: { title: "Group", params: {} },
+    };
+    let top = Number.POSITIVE_INFINITY;
+    let left = Number.POSITIVE_INFINITY;
+    let bottom = Number.NEGATIVE_INFINITY;
+    let right = Number.NEGATIVE_INFINITY;
+    const PAD = 10;
+    for (const node of selectedNodes) {
+      if (node.position.y - PAD < top) top = node.position.y - PAD;
+      if (node.position.x - PAD < left) left = node.position.x - PAD;
+      if (node.position.y + PAD + node.height! > bottom)
+        bottom = node.position.y + PAD + node.height!;
+      if (node.position.x + PAD + node.width! > right) right = node.position.x + PAD + node.width!;
+    }
+    groupNode.position = {
+      x: left,
+      y: top,
+    };
+    groupNode.width = right - left;
+    groupNode.height = bottom - top;
+    setNodes([
+      { ...(groupNode as WorkspaceNode), selected: true },
+      ...nodes.map((n) =>
+        n.selected
+          ? {
+              ...n,
+              position: { x: n.position.x - left, y: n.position.y - top },
+              parentId: groupNode.id,
+              extent: "parent" as const,
+              selected: false,
+            }
+          : n,
+      ),
+    ]);
+    getYjsDoc(state).transact(() => {
+      state.workspace.nodes!.unshift(groupNode as WorkspaceNode);
+      const selectedNodeIds = new Set(selectedNodes.map((n) => n.id));
+      for (const node of state.workspace.nodes!) {
+        if (selectedNodeIds.has(node.id)) {
+          node.position.x -= left;
+          node.position.y -= top;
+          node.parentId = groupNode.id;
+          node.extent = "parent";
+          node.selected = false;
+        }
+      }
+    });
+  }
+  function ungroupSelection() {
+    const groups = Object.fromEntries(
+      nodes
+        .filter((n) => n.selected && n.type === "node_group" && !n.parentId)
+        .map((n) => [n.id, n]),
+    );
+    setNodes(
+      nodes
+        .filter((n) => !groups[n.id])
+        .map((n) => {
+          const g = groups[n.parentId!];
+          if (!g) return n;
+          return {
+            ...n,
+            position: { x: n.position.x + g.position.x, y: n.position.y + g.position.y },
+            parentId: undefined,
+            extent: undefined,
+            selected: true,
+          };
+        }),
+    );
+    getYjsDoc(state).transact(() => {
+      const wnodes = state.workspace.nodes!;
+      for (const node of state.workspace.nodes!) {
+        const g = groups[node.parentId as string];
+        if (!g) continue;
+        node.position.x += g.position.x;
+        node.position.y += g.position.y;
+        node.parentId = undefined;
+        node.extent = undefined;
+      }
+      for (const groupId in groups) {
+        const groupIdx = wnodes.findIndex((n) => n.id === groupId);
+        wnodes.splice(groupIdx, 1);
+      }
+    });
+  }
+  const areMultipleNodesSelected = nodes.filter((n) => n.selected).length > 1;
+  const isAnyGroupSelected = nodes.some((n) => n.selected && n.type === "node_group");
   return (
     <div className="workspace">
       <div className="top-bar bg-neutral">
@@ -362,18 +473,35 @@ function LynxKiteFlow() {
           }}
         />
         <div className="tools text-secondary">
-          <button className="btn btn-link">
-            <Atom />
-          </button>
-          <button className="btn btn-link">
-            <Backspace />
-          </button>
-          <button className="btn btn-link" onClick={executeWorkspace}>
-            <Restart />
-          </button>
-          <Link className="btn btn-link" to={`/dir/${parentDir}`} aria-label="close">
-            <Close />
-          </Link>
+          {areMultipleNodesSelected && (
+            <Tooltip doc="Group selected nodes">
+              <button className="btn btn-link" onClick={groupSelection}>
+                <GroupIcon />
+              </button>
+            </Tooltip>
+          )}
+          {isAnyGroupSelected && (
+            <Tooltip doc="Ungroup selected nodes">
+              <button className="btn btn-link" onClick={ungroupSelection}>
+                <UngroupIcon />
+              </button>
+            </Tooltip>
+          )}
+          <Tooltip doc="Delete selected nodes and edges">
+            <button className="btn btn-link" onClick={deleteSelection}>
+              <Backspace />
+            </button>
+          </Tooltip>
+          <Tooltip doc="Re-run the workspace">
+            <button className="btn btn-link" onClick={executeWorkspace}>
+              <Restart />
+            </button>
+          </Tooltip>
+          <Tooltip doc="Close workspace">
+            <Link className="btn btn-link" to={`/dir/${parentDir}`} aria-label="close">
+              <Close />
+            </Link>
+          </Tooltip>
         </div>
       </div>
       <div style={{ height: "100%", width: "100vw" }} onDragOver={onDragOver} onDrop={onDrop}>

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

@@ -0,0 +1,65 @@
+import { useReactFlow } from "@xyflow/react";
+import { useState } from "react";
+// @ts-ignore
+import Palette from "~icons/tabler/palette-filled.jsx";
+// @ts-ignore
+import Square from "~icons/tabler/square-filled.jsx";
+import Tooltip from "../../Tooltip.tsx";
+import { COLORS } from "../../common.ts";
+
+export default function Group(props: any) {
+  const reactFlow = useReactFlow();
+  const [displayingColorPicker, setDisplayingColorPicker] = useState(false);
+  function setColor(newValue: string) {
+    reactFlow.updateNodeData(props.id, (prevData: any) => ({
+      ...prevData,
+      params: { color: newValue },
+    }));
+    setDisplayingColorPicker(false);
+  }
+  function toggleColorPicker(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+    e.stopPropagation();
+    setDisplayingColorPicker(!displayingColorPicker);
+  }
+  const currentColor = props.data?.params?.color || "gray";
+  return (
+    <div
+      className="node-group"
+      style={{
+        width: props.width,
+        height: props.height,
+        backgroundColor: COLORS[currentColor],
+        opacity: 0.9,
+      }}
+    >
+      <button
+        className="node-group-color-picker-icon"
+        onClick={toggleColorPicker}
+        aria-label="Change group color"
+      >
+        <Tooltip doc="Change color">
+          <Palette />
+        </Tooltip>
+      </button>
+      {displayingColorPicker && <ColorPicker currentColor={currentColor} onPick={setColor} />}
+    </div>
+  );
+}
+
+function ColorPicker(props: { currentColor: string; onPick: (color: string) => void }) {
+  const colors = Object.keys(COLORS).filter((color) => color !== props.currentColor);
+  return (
+    <div className="color-picker">
+      {colors.map((color) => (
+        <button
+          key={color}
+          className="color-picker-button"
+          style={{ color: COLORS[color] }}
+          onClick={() => props.onPick(color)}
+        >
+          <Square />
+        </button>
+      ))}
+    </div>
+  );
+}

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

@@ -12,6 +12,7 @@ import Help from "~icons/tabler/question-mark.jsx";
 // @ts-ignore
 import Skull from "~icons/tabler/skull.jsx";
 import Tooltip from "../../Tooltip";
+import { COLORS } from "../../common.ts";
 
 interface LynxKiteNodeProps {
   id: string;
@@ -20,6 +21,7 @@ interface LynxKiteNodeProps {
   nodeStyle: any;
   data: any;
   children: any;
+  parentId?: string;
 }
 
 function getHandles(inputs: any[], outputs: any[]) {
@@ -53,15 +55,6 @@ function getHandles(inputs: any[], outputs: any[]) {
   return handles;
 }
 
-const OP_COLORS: { [key: string]: string } = {
-  gray: "oklch(95% 0 0)",
-  pink: "oklch(75% 0.2 0)",
-  orange: "oklch(75% 0.2 55)",
-  green: "oklch(75% 0.2 150)",
-  blue: "oklch(75% 0.2 230)",
-  purple: "oklch(75% 0.2 290)",
-};
-
 function LynxKiteNodeComponent(props: LynxKiteNodeProps) {
   const reactFlow = useReactFlow();
   const data = props.data;
@@ -78,11 +71,11 @@ function LynxKiteNodeComponent(props: LynxKiteNodeProps) {
   };
   const titleStyle: { backgroundColor?: string } = {};
   if (data.meta?.value?.color) {
-    titleStyle.backgroundColor = OP_COLORS[data.meta.value.color] || data.meta.value.color;
+    titleStyle.backgroundColor = COLORS[data.meta.value.color] || data.meta.value.color;
   }
   return (
     <div
-      className={`node-container ${expanded ? "expanded" : "collapsed"} `}
+      className={`node-container ${expanded ? "expanded" : "collapsed"} ${props.parentId ? "in-group" : ""}`}
       style={{
         width: props.width || 200,
         height: expanded ? props.height || 200 : undefined,