sample-ui-component-library 0.0.39-dev → 0.0.40-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.39-dev",
+  "version": "0.0.40-dev",
   "description": "A library which contains sample UI elements that can be used for populating layouts.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/BehavioralGraphBuilder/BehavioralGraphBuilder.jsx

@@ -1,159 +1,32 @@
-import { useCallback, useEffect, useState } from "react";
-import {
-    ReactFlow,
-    ReactFlowProvider,
-    useNodesState,
-    useEdgesState,
-    Background,
-    Controls,
-    useReactFlow,
-    addEdge,
-    applyNodeChanges,
-    applyEdgeChanges 
-} from "@xyflow/react";
-import "@xyflow/react/dist/style.css";
+import { Flow } from "./Flow";
+import { ReactFlowProvider } from "@xyflow/react";
+import { useEffect, useState } from "react";
+import { designToReactFlowElements } from "./helper";
+
+export const BehavioralGraphBuilder = ({
+    activeTool,
+    onBehaviorSelect,
+    onAddBehavior,
+    onAddEdge,
+    design,
+}) => {
+    const [initialElements, setInitialElements] = useState(null);
 
-const initialNodes = [
-    {
-        id: "1",
-        position: { x: 250, y: 150 },
-        data: { label: "Behavior 1" },
-        draggable: true,
-        selectable: true,
-    },
-    {
-        id: "2",
-        position: { x: 250, y: 250 },
-        data: { label: "Behavior 2" },
-        draggable: true,
-        selectable: true,
-    },
-];
-
-const NODE_WIDTH = 150;
-const NODE_HEIGHT = 40;
-const Flow = ({ activeTool }) => {
-    const { screenToFlowPosition } = useReactFlow();
-    const [nodes, setNodes] = useState(initialNodes);
-    const [edges, setEdges] = useState([]);
-    const [ghostNode, setGhostNode] = useState(null);
-
-    // Callbacks to apply node changes
-    const onNodesChange = useCallback((changes) => {
-        setNodes((nds) => applyNodeChanges(changes, nds));
-    }, []);
-    const onEdgesChange = useCallback((changes) => {
-        setEdges((eds) => applyEdgeChanges(changes, eds));
-    }, []);
-
-    // Console messages for debugging
     useEffect(() => {
-        console.log("Active Tool:", activeTool);
-    }, [activeTool]);
-
-    // Callback for mouse pane move
-    const onPaneMouseMove = useCallback( (event) => {
-        const pos = screenToFlowPosition({
-            x: event.clientX,
-            y: event.clientY,
-        });
-
-        if (activeTool === "drop") {
-            setGhostNode({
-                id: "ghost",
-                position: {
-                    x: pos.x - NODE_WIDTH / 2,
-                    y: pos.y - NODE_HEIGHT / 2,
-                },
-                data: { label: "Behavior" },
-                draggable: false,
-                selectable: false,
-                style: {
-                    opacity: 0.5,
-                    pointerEvents: "none",
-                    width: NODE_WIDTH,
-                    height: NODE_HEIGHT,
-                },
-            });
-        } 
-    }, [activeTool]);
-
-    // Callback for when mouse leaves pane
-    const onPaneMouseLeave = useCallback(() => {
-        setGhostNode(null);
-    }, []);
-
-    // Callback for pane click
-    const onPaneClick = useCallback((event, node) => {
-        if (activeTool === "drop") {
-            if (!ghostNode) return;
-            setNodes((nds) => [
-                ...nds,
-                {
-                    ...ghostNode,
-                    draggable: true,
-                    selectable: true,
-                    id: crypto.randomUUID(),
-                    style: {},
-                },
-            ]);
-        }  
-    }, [ghostNode, activeTool]);
-
-    // Callback for node click to delete it (if tool is active)
-    const onNodeClick = useCallback((event, node) => {
-        if (activeTool === "delete") {
-            setNodes((nds) => nds.filter((n) => n.id !== node.id));
-            setEdges((eds) =>
-                eds.filter((e) => e.source !== node.id && e.target !== node.id)
-            );
+        if (design) {
+            setInitialElements(designToReactFlowElements(design));
         }
-    }, [activeTool]);
-
-    // Callback for edge click to delete it (if tool is active)
-    const onEdgeClick = useCallback((event, edge) => {
-        if (activeTool === "delete") {
-            setEdges((eds) => eds.filter((e) => e.id !== edge.id));
-        }
-    }, [activeTool]);
-
-    // Callback for when edge is connected, nodesConnectable={activeTool === "connect"}
-    // is used to determine connectability
-    const onConnect = useCallback((connection) => {
-        const edge = {
-            ...connection,
-            id: crypto.randomUUID(),
-            type: "smoothstep",
-            animated: true,
-        };
-        setEdges((eds) => [...eds, edge]);
-    }, [activeTool]);
-
-    return (
-        <ReactFlow
-            nodes={ghostNode ? [...nodes, ghostNode] : nodes}
-            edges={edges}
-            onPaneMouseMove={onPaneMouseMove}
-            onPaneMouseLeave={onPaneMouseLeave}
-            onPaneClick={onPaneClick}
-            onConnect={onConnect}
-            onNodesChange={onNodesChange}
-            onEdgesChange={onEdgesChange}
-            onNodeClick={onNodeClick}
-            onEdgeClick={onEdgeClick}
-            colorMode={"dark"}
-            fitView
-        >
-            <Background />
-            <Controls />
-        </ReactFlow>
-    );
-};
+    }, [design]);
 
-export const BehavioralGraphBuilder = ({ activeTool }) => {
     return (
         <ReactFlowProvider>
-            <Flow activeTool={activeTool} />
+            <Flow
+                initialElements={initialElements}
+                activeTool={activeTool}
+                onBehaviorSelect={onBehaviorSelect}
+                onAddBehavior={onAddBehavior}
+                onAddEdge={onAddEdge}
+            />
         </ReactFlowProvider>
     );
 };

package/src/components/BehavioralGraphBuilder/DagreLayout.js

@@ -0,0 +1,33 @@
+
+import Dagre from '@dagrejs/dagre';
+
+export const getLayoutedElements = (nodes, edges, options) => {
+    // Reference: https://reactflow.dev/learn/layouting/layouting
+
+    const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+    g.setGraph({ rankdir: options.direction, ranksep: 100, nodesep: 170});
+   
+    edges.forEach((edge) => g.setEdge(edge.source, edge.target));
+    nodes.forEach((node) =>
+      g.setNode(node.id, {
+        ...node,
+        width: node.measured?.width ?? 0,
+        height: node.measured?.height ?? 0,
+      }),
+    );
+   
+    Dagre.layout(g);
+   
+    return {
+      nodes: nodes.map((node) => {
+        const position = g.node(node.id);
+        // We are shifting the dagre node position (anchor=center center) to the top left
+        // so it matches the React Flow node anchor point (top left).
+        const x = position.x - (node.measured?.width ?? 0) / 2;
+        const y = position.y - (node.measured?.height ?? 0) / 2;
+   
+        return { ...node, position: { x, y } };
+      }),
+      edges,
+    };
+};

package/src/components/BehavioralGraphBuilder/Flow.jsx

@@ -0,0 +1,164 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+    ReactFlow,
+    ReactFlowProvider,
+    useNodesState,
+    useEdgesState,
+    Background,
+    Controls,
+    useReactFlow,
+    addEdge,
+    BezierEdge ,
+    applyNodeChanges,
+    applyEdgeChanges 
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+
+import { getLayoutedElements } from "./DagreLayout.js";
+
+const edgeTypes = {
+  bezier: BezierEdge,
+};
+
+const NODE_WIDTH = 150;
+const NODE_HEIGHT = 40;
+export const Flow = ({ activeTool, onBehaviorSelect, onAddBehavior, onAddEdge, initialElements }) => {
+    const { screenToFlowPosition } = useReactFlow();
+    const [nodes, setNodes] = useState([]);
+    const [edges, setEdges] = useState([]);
+    const [ghostNode, setGhostNode] = useState(null);
+
+    useEffect(() => {
+        if (!initialElements) return;
+        const layouted = getLayoutedElements(
+            initialElements.nodes,
+            initialElements.edges,
+            {direction:"TB"}
+        );
+
+        setNodes([...layouted.nodes]);
+        setEdges([...layouted.edges]);
+    }, [initialElements]);
+
+    // Callbacks to apply node changes
+    const onNodesChange = useCallback((changes) => {
+        setNodes((nds) => applyNodeChanges(changes, nds));
+    }, []);
+    const onEdgesChange = useCallback((changes) => {
+        setEdges((eds) => applyEdgeChanges(changes, eds));
+    }, []);
+
+    // Console messages for debugging
+    useEffect(() => {
+        console.log("Active Tool:", activeTool);
+    }, [activeTool]);
+
+    // Callback for mouse pane move
+    const onPaneMouseMove = useCallback( (event) => {
+        const pos = screenToFlowPosition({
+            x: event.clientX,
+            y: event.clientY,
+        });
+
+        if (activeTool === "drop") {
+            setGhostNode({
+                id: "ghost",
+                position: {
+                    x: pos.x - NODE_WIDTH / 2,
+                    y: pos.y - NODE_HEIGHT / 2,
+                },
+                data: { label: "Behavior" },
+                draggable: false,
+                selectable: false,
+                style: {
+                    opacity: 0.5,
+                    pointerEvents: "none",
+                    width: NODE_WIDTH,
+                    height: NODE_HEIGHT,
+                },
+            });
+        } 
+    }, [activeTool]);
+
+    // Callback for when mouse leaves pane
+    const onPaneMouseLeave = useCallback(() => {
+        setGhostNode(null);
+    }, []);
+
+    // Callback for pane click
+    const onPaneClick = useCallback((event, node) => {
+        if (activeTool === "drop") {
+            if (!ghostNode) return;
+            setNodes((nds) => [
+                ...nds,
+                {
+                    ...ghostNode,
+                    draggable: true,
+                    selectable: true,
+                    id: crypto.randomUUID(),
+                    style: {},
+                },
+            ]);
+            onAddBehavior(ghostNode);
+            setGhostNode(null);
+        }  
+    }, [ghostNode, activeTool, onAddBehavior]);
+
+    // Callback for node click to delete it (if tool is active)
+    const onNodeClick = useCallback((event, node) => {
+        if (activeTool === "delete") {
+            setNodes((nds) => nds.filter((n) => n.id !== node.id));
+            setEdges((eds) =>
+                eds.filter((e) => e.source !== node.id && e.target !== node.id)
+            );
+        }
+    }, [activeTool, onBehaviorSelect]);
+
+    // Callback for edge click to delete it (if tool is active)
+    const onEdgeClick = useCallback((event, edge) => {
+        if (activeTool === "delete") {
+            setEdges((eds) => eds.filter((e) => e.id !== edge.id));
+        }
+    }, [activeTool]);
+
+    const onSelectionChange = useCallback((selection) => {
+        if (selection.nodes.length > 0) {
+            onBehaviorSelect(selection.nodes[0]);
+        }
+    }, [ onBehaviorSelect]);
+
+    // Callback for when edge is connected, nodesConnectable={activeTool === "connect"}
+    // is used to determine connectability
+    const onConnect = useCallback((connection) => {
+        const edge = {
+            ...connection,
+            id: crypto.randomUUID(),
+            type: "smoothstep",
+            animated: true,
+        };
+        setEdges((eds) => [...eds, edge]);
+        onAddEdge(edge);
+    }, [activeTool, onAddEdge]);
+
+    return (
+        <ReactFlow
+            nodes={ghostNode ? [...nodes, ghostNode] : nodes}
+            edges={edges}
+            onPaneMouseMove={onPaneMouseMove}
+            onPaneMouseLeave={onPaneMouseLeave}
+            onPaneClick={onPaneClick}
+            onConnect={onConnect}
+            onNodesChange={onNodesChange}
+            onEdgesChange={onEdgesChange}
+            onNodeClick={onNodeClick}
+            onEdgeClick={onEdgeClick}
+            colorMode={"dark"}
+            edgeTypes={edgeTypes}
+            onSelectionChange={onSelectionChange}
+            fitView
+        >
+            <Background />
+            <Controls />
+        </ReactFlow>
+    );
+};

package/src/components/BehavioralGraphBuilder/helper.js

@@ -0,0 +1,35 @@
+
+/**
+ * Converts a DAL design specification object into React Flow elements (nodes and edges).
+ * @param {Object} design 
+ * @returns {Object} An object containing nodes and edges for React Flow
+ */
+export const designToReactFlowElements = (design) => {
+
+    let edges = [];
+    let nodes = [];
+    design.nodes.forEach((node) => {
+        nodes.push({
+            id: node.behavior.uid,
+            type: 'default',
+            data: { label: node.behavior.name },
+            position: { x: 10, y: 10 },
+        });
+
+        node.goToBehaviors.forEach((goTo) => {
+            edges.push({
+                id: `${node.behavior.uid}->${goTo.uid}`,
+                type: "bezier",
+                source: node.behavior.uid,
+                target: goTo.uid,
+                animated: true
+            });
+        });
+    });
+
+    return {
+        nodes: nodes,
+        edges: edges
+    };
+
+}

package/src/stories/BehavioralGraphBuilder.stories.js

@@ -1,8 +1,11 @@
 import { useCallback, useState, useEffect } from "react";
 import { BehavioralGraphBuilder } from "../components/BehavioralGraphBuilder";
-import "./BehavioralGraphBuilderStories.scss"
 import { ToolBar } from "./components/ToolBar/ToolBar";
 import { useArgs } from "@storybook/preview-api";
+import { action } from "@storybook/addon-actions";
+
+import design from "./data/Designs/simple_design_temp.json";
+import "./BehavioralGraphBuilderStories.scss"
 
 export default {
     title: 'BehavioralGraphBuilder', 
@@ -19,9 +22,29 @@ const Template = (args) => {
     const selectTool = useCallback((tool) => {
         updateArgs({activeTool : tool});
     }, [activeTool, setActiveTool]);
+
+    const onBehaviorSelect = useCallback((behavior) => {
+        action('Selected Behavior:')(behavior);
+    }, []);
+
+    const onAddBehavior = useCallback((behavior) => {
+        action('Added Behavior:')(behavior);
+    }, []);
+
+    const onAddEdge = useCallback((edge) => {
+        action('Added Edge:')(edge);
+    }, []);
     
     useEffect(() => {
-        updateArgs({activeTool : activeTool});
+        updateArgs(
+            {
+                activeTool: activeTool,
+                design: design,
+                onBehaviorSelect: onBehaviorSelect,
+                onAddBehavior: onAddBehavior,
+                onAddEdge: onAddEdge
+            }
+        );
     }, []);
 
     return (
@@ -39,4 +62,5 @@ const Template = (args) => {
 export const Default = Template.bind({})
 
 Default.args = {
+    design: design
 }

package/src/stories/data/Designs/simple_design_temp.json

@@ -0,0 +1 @@
+{"uid":"60e79b4f-fc4b-4237-989f-e1b1559c2ee9","type":5,"nodes":[{"uid":"08a4e18c-f293-4ba1-be0a-c8451b50e819","type":6,"goToBehaviors":[{"uid":"35a2759b-e0df-47db-93b7-1f18c216922d","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"AcceptBookFromUser"}],"behavior":{"uid":"a873c4ba-3a63-4097-80df-46ed361f2e26","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"AcceptChoiceToAddBookToBasket"}},{"uid":"db74773a-2f47-4873-b66f-08da9aaf196f","type":6,"goToBehaviors":[{"uid":"ac522716-13d2-48e5-b241-f2366b37efdb","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"AddBookToBasket"}],"behavior":{"uid":"35a2759b-e0df-47db-93b7-1f18c216922d","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"AcceptBookFromUser"}},{"uid":"31bba9d3-9af2-41bc-bd70-d757f62b40c6","type":6,"goToBehaviors":[{"uid":"d4ec5fe5-acd2-4a8b-8e09-9ea3d5212a1f","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"GenerateAuditReport"}],"behavior":{"uid":"53cebd65-5c19-4dde-8e50-4acc581dc166","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"AcceptChoiceToAuditLibrary"}},{"uid":"836fdec5-db3e-4770-95fe-70c2d2c1261c","type":6,"goToBehaviors":[{"uid":"3e0b400c-f92a-48b5-b67b-e65d69f18a21","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"HandAuditToUser"}],"behavior":{"uid":"d4ec5fe5-acd2-4a8b-8e09-9ea3d5212a1f","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"GenerateAuditReport"}},{"uid":"f79c407e-66fc-4d64-bcce-4a1c4841d098","type":6,"goToBehaviors":[{"uid":"1c75d75c-8970-4dd1-b91e-c79590354bd9","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"GetBookFromBasket"}],"behavior":{"uid":"b39dfb15-d121-4ded-aa29-d317149308e9","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"AcceptChoiceToPlaceBooksOnShelf"}},{"uid":"0e266610-d498-4857-9249-7e6c98a1077f","type":6,"goToBehaviors":[{"uid":"7e80caf3-7fa9-4684-af89-fe2556addb87","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"GetFirstLetterOfBookName"}],"behavior":{"uid":"1c75d75c-8970-4dd1-b91e-c79590354bd9","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"GetBookFromBasket"}},{"uid":"b009ee09-e037-4864-99a2-15f80187623f","type":6,"goToBehaviors":[{"uid":"457332a3-3c79-4c04-83c7-2b5b0539c0da","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"CreateSlotOnBookShelf"}],"behavior":{"uid":"7e80caf3-7fa9-4684-af89-fe2556addb87","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"GetFirstLetterOfBookName"}},{"uid":"b2acd6d3-d6b8-41de-b8a1-f22b4db4fcbe","type":6,"goToBehaviors":[{"uid":"a666f210-c00c-48bc-a13f-aea72f068e37","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"AddBookToShelf"}],"behavior":{"uid":"7e80caf3-7fa9-4684-af89-fe2556addb87","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"GetFirstLetterOfBookName"}},{"uid":"3baca40a-9584-4ba7-be1b-235a660ca472","type":6,"goToBehaviors":[{"uid":"a666f210-c00c-48bc-a13f-aea72f068e37","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"AddBookToShelf"}],"behavior":{"uid":"457332a3-3c79-4c04-83c7-2b5b0539c0da","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"CreateSlotOnBookShelf"}},{"uid":"14acf45d-ca77-48f4-9ff0-5692133a6258","type":6,"goToBehaviors":[{"uid":"1c75d75c-8970-4dd1-b91e-c79590354bd9","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"GetBookFromBasket"}],"behavior":{"uid":"a666f210-c00c-48bc-a13f-aea72f068e37","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"AddBookToShelf"}}]}