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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.38-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

@@ -0,0 +1,32 @@
+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);
+
+    useEffect(() => {
+        if (design) {
+            setInitialElements(designToReactFlowElements(design));
+        }
+    }, [design]);
+
+    return (
+        <ReactFlowProvider>
+            <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/components/BehavioralGraphBuilder/index.js

@@ -0,0 +1 @@
+export * from "./BehavioralGraphBuilder.jsx"

package/src/index.js

@@ -1,4 +1,5 @@
 export * from "./components/StackList";
 export * from "./components/FlowDiagram";
 export * from "./components/FileBrowser";
-export * from "./components/Editor";
+export * from "./components/Editor";
+export * from "./components/BehavioralGraphBuilder";

package/src/stories/BehavioralGraphBuilder.stories.js

@@ -0,0 +1,66 @@
+import { useCallback, useState, useEffect } from "react";
+import { BehavioralGraphBuilder } from "../components/BehavioralGraphBuilder";
+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', 
+    component: BehavioralGraphBuilder,
+    argTypes: {
+    }
+};
+
+const Template = (args) => {
+    const [, updateArgs] = useArgs();
+
+    const [activeTool, setActiveTool] = useState("select");
+
+    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,
+                design: design,
+                onBehaviorSelect: onBehaviorSelect,
+                onAddBehavior: onAddBehavior,
+                onAddEdge: onAddEdge
+            }
+        );
+    }, []);
+
+    return (
+        <div className="graphBuilderRootContainer">
+            <div className="toolbar">
+                <ToolBar onSelectTool={selectTool}/>
+            </div>
+            <div className="flow">
+                <BehavioralGraphBuilder {...args}/> 
+            </div>
+        </div>
+    )
+}
+
+export const Default = Template.bind({})
+
+Default.args = {
+    design: design
+}

package/src/stories/BehavioralGraphBuilderStories.scss

@@ -0,0 +1,17 @@
+.graphBuilderRootContainer {
+    position: absolute;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+    display:flex;
+    flex-direction: row;
+}
+
+.toolbar {
+    width:40px;
+}
+
+.flow {
+    flex-grow: 1;
+}

package/src/stories/components/ToolBar/ToolBar.js

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+
+import {
+  Cursor,
+  Square,
+  NodePlus,
+  Trash
+} from "react-bootstrap-icons";
+
+import "./ToolBar.scss";
+
+ToolBar.propTypes = {};
+
+/**
+ * Toolbar Component
+ * @return {JSX.Element}
+ */
+export function ToolBar({ onSelectTool }) {
+  const [selectedTool, setSelectedTool] = useState("select");
+
+  const selectTool = (tool) => {
+    setSelectedTool(tool);
+    onSelectTool(tool);
+  };
+
+  return (
+    <div className="toolbarWrapper">
+      <div className="toolbarContainer">
+        <Cursor
+          onClick={(e) => selectTool("select")}
+          style={{color: selectedTool === "select" ? "white": "grey"}}
+          title="Select"
+          className="icon"
+        />
+        <Square
+          onClick={(e) => selectTool("drop")}
+          style={{color: selectedTool === "drop" ? "white": "grey"}}
+          title="Add Node"
+          className="icon"
+        />
+        <NodePlus
+          onClick={(e) => selectTool("connect")}
+          style={{color: selectedTool === "connect" ? "white": "grey"}}
+          title="Connect Node"
+          className="icon"
+        />
+        <Trash
+          onClick={(e) => selectTool("delete")}
+          style={{color: selectedTool === "delete" ? "white": "grey"}}
+          title="Delete Node"
+          className="icon"
+        />
+      </div>
+      <div className="toolbarContainer bottom"></div>
+    </div>
+  );
+}

package/src/stories/components/ToolBar/ToolBar.scss

@@ -0,0 +1,29 @@
+.toolbarWrapper {
+    display:flex;
+    flex-direction: column;
+    justify-content:space-around;
+    height: 100%;
+    background-color: #333333;
+}
+
+.toolbarContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    width:100%;
+    align-items: center;
+    padding: 10px 0;
+}
+
+.toolbarWrapper > .bottom {
+  margin-top: auto;
+}
+
+.toolbarContainer > .icon {
+    color:grey;
+}
+
+.toolbarContainer > .icon:hover {
+    color:white;
+    cursor:pointer;
+}

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"}}]}