Color picker for groups.

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

@@ -98,13 +98,30 @@ body {
     opacity: 1;
   }
 
-  .react-flow__node-group,
-  .react-flow__node-group.selectable.selected,
-  .react-flow__node-group:hover {
+  .node-group {
     box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.3);
     border-radius: 20px;
     border: none;
-    background-color: #fffb;
+    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 {
@@ -121,6 +138,10 @@ body {
     max-width: 300px;
   }
 
+  .prose p {
+    margin-bottom: 0;
+  }
+
   .expanded .lynxkite-node {
     height: 100%;
   }
@@ -545,14 +566,14 @@ body {
   z-index: -10 !important;
 }
 
-.selected.selectable.react-flow__node-group,
+.selected .node-group,
 .selected .comment-view,
 .selected .lynxkite-node {
   outline: var(--xy-selection-border, var(--xy-selection-border-default));
   outline-offset: 7.5px;
 }
 
-.selected.selectable.react-flow__node-group {
+.selected .node-group {
   outline-offset: 20px;
 }
 

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

@@ -42,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";
@@ -83,7 +84,7 @@ function LynxKiteFlow() {
         if (!state.workspace.nodes) return;
         if (!state.workspace.edges) return;
         for (const n of state.workspace.nodes) {
-          if (n.type !== "group" && n.dragHandle !== ".drag-handle") {
+          if (n.type !== "node_group" && n.dragHandle !== ".drag-handle") {
             n.dragHandle = ".drag-handle";
           }
         }
@@ -190,6 +191,7 @@ function LynxKiteFlow() {
       graph_creation_view: NodeWithGraphCreationView,
       molecule: NodeWithMolecule,
       comment: NodeWithComment,
+      node_group: Group,
     }),
     [],
   );
@@ -364,7 +366,7 @@ function LynxKiteFlow() {
     const selectedNodes = nodes.filter((n) => n.selected);
     const groupNode = {
       id: findFreeId("Group"),
-      type: "group",
+      type: "node_group",
       position: { x: 0, y: 0 },
       width: 0,
       height: 0,
@@ -418,7 +420,7 @@ function LynxKiteFlow() {
   }
   function ungroupSelection() {
     const groups = Object.fromEntries(
-      nodes.filter((n) => n.selected && n.type === "group").map((n) => [n.id, n]),
+      nodes.filter((n) => n.selected && n.type === "node_group").map((n) => [n.id, n]),
     );
     setNodes(
       nodes
@@ -451,7 +453,7 @@ function LynxKiteFlow() {
     });
   }
   const areMultipleNodesSelected = nodes.filter((n) => n.selected).length > 1;
-  const isAnyGroupSelected = nodes.some((n) => n.selected && n.type === "group");
+  const isAnyGroupSelected = nodes.some((n) => n.selected && n.type === "node_group");
   return (
     <div className="workspace">
       <div className="top-bar bg-neutral">

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

@@ -0,0 +1,63 @@
+import { cursorTo } from "node:readline";
+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>) {
+    console.log("toggleColorPicker", displayingColorPicker);
+    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}>
+        <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,7 +71,7 @@ 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