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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.40-dev",
+  "version": "0.0.43-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",
@@ -68,6 +68,8 @@
     "@dagrejs/dagre": "^1.1.4",
     "@monaco-editor/react": "^4.7.0",
     "@xyflow/react": "^12.6.0",
-    "react-bootstrap-icons": "^1.11.5"
+    "dal-engine-core-js-lib-dev": "^0.0.4",
+    "react-bootstrap-icons": "^1.11.5",
+    "reaflow": "^5.4.1"
   }
 }

package/src/components/BehavioralGraphBuilder/BehavioralGraphBuilder.jsx

@@ -1,32 +1,107 @@
-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);
+import { useEffect, useState, useRef, useImperativeHandle, forwardRef, useMemo, useCallback } from "react";
+import { Canvas, Node, Edge, removeAndUpsertNodes  } from 'reaflow';
+import PropTypes from 'prop-types';
 
+import { designToNodes } from "./helper";
+
+import "./BehavioralGraphBuilder.scss";
+
+/**
+ * Renders a behavioral graph editor component using reaflow.
+ * 
+ * @return {JSX}
+ */
+export const BehavioralGraphBuilder = forwardRef(({connectBehaviors, deleteTransition, deleteBehavior}, ref) => {
+    const canvasRef = useRef();
+
+    // Resizer to set canvas size to match container
+    // TODO: Issues with zooming and resizing, need to explore.
+    const containerRef = useRef();
+    const [size, setSize] = useState({ width: 0, height: 0 });    
     useEffect(() => {
-        if (design) {
-            setInitialElements(designToReactFlowElements(design));
+        const observer = new ResizeObserver(([entry]) => {
+        const { width, height } = entry.contentRect;
+            setSize({ width, height });
+        });
+
+        if (containerRef.current) observer.observe(containerRef.current);
+        return () => observer.disconnect();
+    }, []);
+
+
+    const [edges, setEdges] = useState([]);
+    const [nodes, setNodes] = useState([]);
+    const [selections, setSelections] = useState([]);
+'1'
+    const onNodeLink =(_event, from, to) => {
+        connectBehaviors(from, to);
+    }
+
+    const updateEngine = useCallback((engine) => {
+        if (engine) {
+            const { nodes, edges } = designToNodes(engine);
+            setNodes(nodes);
+            setEdges(edges);
         }
-    }, [design]);
+    }, [setNodes, setEdges]);
+
+    const api = useMemo(() => {
+        return {
+            updateEngine
+        };
+    }, [updateEngine]);
+    
+    useImperativeHandle(ref, () => api, [api]);
+
+    const handleWheel = useCallback((e) => {
+        if (e.deltaY < 0) {
+            canvasRef.current.zoomIn()
+        } else {
+            canvasRef.current.zoomOut();
+        }
+    }, [canvasRef]);
 
     return (
-        <ReactFlowProvider>
-            <Flow
-                initialElements={initialElements}
-                activeTool={activeTool}
-                onBehaviorSelect={onBehaviorSelect}
-                onAddBehavior={onAddBehavior}
-                onAddEdge={onAddEdge}
+        <div onWheel={handleWheel} ref={containerRef}  className="canvas-wrapper">
+            <Canvas 
+                ref={canvasRef}
+                nodes={nodes}
+                edges={edges}
+                width={size.width}
+                height={size.height}
+                onNodeLink={onNodeLink}
+                panType="drag"
+                selections={selections}node={
+                <Node
+                    onClick={(event, node) => {
+                        setSelections([node.id]);
+                    }}
+                    onRemove={(event, node) => {
+                        deleteBehavior(node);
+                        setSelections([]);
+                    }}
+                />
+                }
+                edge={
+                <Edge
+                    onClick={(event, edge) => {
+                        setSelections([edge.id]);
+                    }}
+                    onRemove={(event, edge) => {
+                        deleteTransition(edge);
+                        setSelections([]);
+                    }}
+                />
+                }
+                onCanvasClick={(event) => {setSelections([]);}}
+                fit
+                center
             />
-        </ReactFlowProvider>
-    );
-};
+        </div>
+    )
+});
+
+BehavioralGraphBuilder.propTypes = {
+    connectBehaviors: PropTypes.func.isRequired,
+    deleteBehavior: PropTypes.func.isRequired
+}

package/src/components/BehavioralGraphBuilder/BehavioralGraphBuilder.scss

@@ -0,0 +1,12 @@
+
+.canvas-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: #1b1c1d;
+    overflow:hidden;
+}
+
+canvas {
+    overflow: hidden;
+}

package/src/components/BehavioralGraphBuilder/helper.js

@@ -4,32 +4,36 @@
  * @param {Object} design 
  * @returns {Object} An object containing nodes and edges for React Flow
  */
-export const designToReactFlowElements = (design) => {
+export const designToNodes = (engine) => {
 
     let edges = [];
     let nodes = [];
-    design.nodes.forEach((node) => {
+
+    for (let i = 0; i < engine.graph.nodes.length; i++) {
+        const node = engine.graph.nodes[i];
         nodes.push({
-            id: node.behavior.uid,
-            type: 'default',
-            data: { label: node.behavior.name },
-            position: { x: 10, y: 10 },
+            id: node.getBehavior().name,
+            text: node.getBehavior().name,
         });
+    }
+    
+    for (let i = 0; i < engine.graph.nodes.length; i++) {
+        const node = engine.graph.nodes[i];
+        if (!node?.getGoToBehaviors()) {
+            continue;
+        }
 
-        node.goToBehaviors.forEach((goTo) => {
+        node.getGoToBehaviors().forEach((goTo) => {
             edges.push({
-                id: `${node.behavior.uid}->${goTo.uid}`,
-                type: "bezier",
-                source: node.behavior.uid,
-                target: goTo.uid,
-                animated: true
+                id: `${node.getBehavior().name}->${goTo}`,
+                from: node.getBehavior().name,
+                to: goTo,
             });
         });
-    });
+    }
 
     return {
         nodes: nodes,
         edges: edges
     };
-
 }

package/src/stories/{BehavioralGraphBuilderStories.scss → BehavioralGraphBuilder.scss}

@@ -13,5 +13,8 @@
 }
 
 .flow {
+    display: flex;
     flex-grow: 1;
-}
+    flex-direction: column;
+    overflow:hidden;
+}

package/src/stories/BehavioralGraphBuilder.stories.js

@@ -1,66 +1,115 @@
-import { useCallback, useState, useEffect } from "react";
-import { BehavioralGraphBuilder } from "../components/BehavioralGraphBuilder";
-import { ToolBar } from "./components/ToolBar/ToolBar";
+import { useEffect, useState, useCallback, useRef } from "react";
 import { useArgs } from "@storybook/preview-api";
 import { action } from "@storybook/addon-actions";
 
-import design from "./data/Designs/simple_design_temp.json";
-import "./BehavioralGraphBuilderStories.scss"
+import { BehavioralGraphBuilder } from "../components/BehavioralGraphBuilder/BehavioralGraphBuilder";
+import { ToolBar } from "./components/ToolBar/ToolBar";
+
+import { DALEngine } from "dal-engine-core-js-lib-dev";
+
+import design from "./data/Designs/simple_designs_temp.json";
+
+import "./BehavioralGraphBuilder.scss";
 
 export default {
-    title: 'BehavioralGraphBuilder', 
+    title: "BehavioralGraphBuilder",
     component: BehavioralGraphBuilder,
-    argTypes: {
-    }
+    argTypes: {},
 };
 
+let count = 0;
+
 const Template = (args) => {
     const [, updateArgs] = useArgs();
 
+    const editorRef = useRef();
+
+    const [engine, setEngine] = useState();
+
     const [activeTool, setActiveTool] = useState("select");
 
-    const selectTool = useCallback((tool) => {
-        updateArgs({activeTool : tool});
-    }, [activeTool, setActiveTool]);
+    const selectTool = useCallback(
+        (tool) => {
+            updateArgs({ activeTool: tool });
+            setActiveTool(tool);
 
-    const onBehaviorSelect = useCallback((behavior) => {
-        action('Selected Behavior:')(behavior);
-    }, []);
+            if (tool === "add-node") {
+                engine.addNode("node-" + count++, []);
+                editorRef.current.updateEngine(engine);
+            }
+        },
+        [activeTool, setActiveTool, engine],
+    );
 
-    const onAddBehavior = useCallback((behavior) => {
-        action('Added Behavior:')(behavior);
+    useEffect(() => {
+        updateArgs({
+            activeTool: activeTool,
+            design: design,
+        });
     }, []);
 
-    const onAddEdge = useCallback((edge) => {
-        action('Added Edge:')(edge);
-    }, []);
-    
     useEffect(() => {
-        updateArgs(
-            {
-                activeTool: activeTool,
-                design: design,
-                onBehaviorSelect: onBehaviorSelect,
-                onAddBehavior: onAddBehavior,
-                onAddEdge: onAddEdge
-            }
-        );
-    }, []);
+        if (editorRef.current) {
+            const engine = new DALEngine({ name: "testEngine" });
+            // engine.deserialize(JSON.stringify(design));
+            setEngine(engine);
+            editorRef.current.updateEngine(engine);
+            setTimeout(() => {
+                engine.addNode("testBehavior", []);
+                engine.addNode("testBehavior2", []);
+                editorRef.current.updateEngine(engine);
+            }, 4000);
+        }
+    }, [design, editorRef]);
 
+    const connectBehaviors = useCallback(
+        (from, to) => {
+            if (!to) return;
+            action("Connect Behaviors")(from, to);
+            engine.getNode(from.id).addGoToBehavior(to.id);
+            editorRef.current.updateEngine(engine);
+        },
+        [editorRef, engine],
+    );
+
+    const deleteBehavior = useCallback(
+        (node) => {
+            action("Delete Behavior")(node);
+            engine.removeNode(node.id);
+            editorRef.current.updateEngine(engine);
+        },
+        [engine, editorRef],
+    );
+
+    const deleteTransition = useCallback(
+        (edge) => {
+            action("Delete Transition")(edge);
+            const fromNode = engine.getNode(edge.from);
+            fromNode.removeGoToBehavior(edge.to);
+            editorRef.current.updateEngine(engine);
+        },
+        [engine, editorRef],
+    );
     return (
         <div className="graphBuilderRootContainer">
             <div className="toolbar">
-                <ToolBar onSelectTool={selectTool}/>
+                <ToolBar onSelectTool={selectTool} />
             </div>
             <div className="flow">
-                <BehavioralGraphBuilder {...args}/> 
+                <BehavioralGraphBuilder
+                    ref={editorRef}
+                    {...args}
+                    connectBehaviors={connectBehaviors}
+                    deleteTransition={deleteTransition}
+                    deleteBehavior={deleteBehavior}
+                />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export const Default = Template.bind({})
+export const Default = Template.bind({});
 
 Default.args = {
-    design: design
-}
+    design: design,
+};

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

@@ -1,10 +1,8 @@
 import React, { useState } from "react";
 
 import {
-  Cursor,
-  Square,
-  NodePlus,
-  Trash
+  PlusSquare,
+  Floppy
 } from "react-bootstrap-icons";
 
 import "./ToolBar.scss";
@@ -26,32 +24,18 @@ export function ToolBar({ onSelectTool }) {
   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"}}
+        <PlusSquare
+          onClick={(e) => selectTool("add-node")}
           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>
+        <Floppy
+          onClick={(e) => selectTool("save")}
+          title="Save Design"
+          className="icon"
+        />
     </div>
   );
 }

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

@@ -0,0 +1 @@
+{"uid":"3b9b65ab-5e3e-48a7-871c-c76de3e20187","type":5,"nodes":[{"uid":"2038c653-587d-4c33-9103-43b59d85c5be","type":6,"_behavior":{"uid":"19ffb9d9-772b-4aca-89b5-6278e0cbee89","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"AcceptChoiceToAddBookToBasket"},"_goToBehaviorIds":["AcceptBookFromUser"]},{"uid":"98d6a9b8-3867-49c8-a93a-f0e11f70af3b","type":6,"_behavior":{"uid":"d1157a53-5938-42ca-92ad-d2d34d99c704","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"AcceptBookFromUser"},"_goToBehaviorIds":["AddBookToBasket"]},{"uid":"2aeb336f-37cc-4f28-8301-f3464c387603","type":6,"_behavior":{"uid":"0dc90e9c-6342-4c3d-90f7-5e5e89b48b76","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"AddBookToBasket"},"_goToBehaviorIds":[]},{"uid":"763e440b-8c09-4893-8e21-b7af11722d93","type":6,"_behavior":{"uid":"555f261d-00b8-4f2d-ad1d-7d18fb68a035","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"AcceptChoiceToAuditLibrary"},"_goToBehaviorIds":["GenerateAuditReport"]},{"uid":"92ba2c22-3beb-442c-a198-562779d7936c","type":6,"_behavior":{"uid":"d44d5d9c-f0f5-4542-9b7d-21793ea1995c","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"GenerateAuditReport"},"_goToBehaviorIds":["HandAuditToUser"]},{"uid":"f2e7e018-2596-4aeb-abeb-55948a17157c","type":6,"_behavior":{"uid":"17ac5068-a521-4fbd-9dcb-783d365e01fd","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"HandAuditToUser"},"_goToBehaviorIds":[]},{"uid":"e89cefaa-cdda-450e-808e-ffee9250db01","type":6,"_behavior":{"uid":"4db0dab8-3d4c-4668-88de-e73f38d8c28e","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"AcceptChoiceToPlaceBooksOnShelf"},"_goToBehaviorIds":[]},{"uid":"4d1de6bd-cd98-48de-81ed-9754b40c3a36","type":6,"_behavior":{"uid":"0ddc2e33-2b01-411b-a3ae-9f0198fafaf8","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"GetFirstLetterOfBookName"},"_goToBehaviorIds":["CreateSlotOnBookShelf","AddBookToShelf"]},{"uid":"e8e5ffe7-ba16-4c3e-a87f-2083c2502812","type":6,"_behavior":{"uid":"eefbf993-c76b-4c80-bb8d-e3093aaa17cb","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"CreateSlotOnBookShelf"},"_goToBehaviorIds":["AddBookToShelf"]},{"uid":"2fb19dc7-7647-44c1-afd1-4a157ab3d833","type":6,"_behavior":{"uid":"e4092d6e-49bb-4c54-9573-0379466c4ae6","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"AddBookToShelf"},"_goToBehaviorIds":[]}]}

package/src/components/BehavioralGraphBuilder/DagreLayout.js

@@ -1,33 +0,0 @@
-
-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

@@ -1,164 +0,0 @@
-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/stories/data/Designs/simple_design_temp.json

@@ -1 +0,0 @@
-{"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"}}]}