sample-ui-component-library 0.0.0-beta

package/src/components/Viewer/Tabs/Tabs.jsx

@@ -0,0 +1,159 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from 'prop-types';
+
+import {ChevronDown} from "react-bootstrap-icons";
+import {Tab} from "./Tab/Tab"
+
+import Dropdown from 'react-bootstrap/Dropdown';
+
+import 'bootstrap/dist/css/bootstrap.css';
+import "./Tabs.scss";
+
+// Dropdown needs access to the DOM node in order to position the Menu
+const SelectFileToggle = React.forwardRef(({ children, onClick }, ref) => (
+    <a ref={ref} onClick={(e) => { e.preventDefault(); onClick(e); }}>
+        {children}
+    </a>
+));
+
+/**
+ * Renders the tabs component.
+ * 
+ * The tabs component accepts a list of files which have been flattened from
+ * its system tree structure with a unique id. 
+ * 
+ * It allows you to add a tab, close a tab and select add new tabs using the 
+ * file drop down.
+ * 
+ * @return {JSX}
+ */
+export const Tabs = ({files, selectFile, systemTree}) => {
+
+    const [activeTab, setActiveTab] = useState(null);
+    const [tabsList, setTabsList] = useState([]);
+
+    const selectTab = (e, file) => {
+        setActiveTab(file.key);
+        selectFile(file.key)
+    }
+
+    const addTab = (key) => {
+        const currTabsList = [...tabsList];
+
+        let hasKey = currTabsList.find((tab) => tab.key === key)
+
+        if (hasKey) {
+            // Set the active tab and select the file.
+            setActiveTab(key);
+            selectFile(key);
+        } else {
+            // Add tab to the tabs list.
+            files.forEach((file, index) => {
+                if (file.key === key) {
+                    currTabsList.push(file);
+                    setActiveTab(file.key);
+                    selectFile(file.key);
+                    setTabsList(currTabsList);
+                }
+            });
+        }
+    }
+
+    const closeTab = (e, file) => {
+        e.stopPropagation();
+
+        // Get index of file in tabs list
+        const index = tabsList.indexOf(file);
+
+        // Remove the closed tab
+        const currTabsList = [...tabsList];
+        currTabsList.splice(index, 1);
+        setTabsList(currTabsList);
+
+        // Select new tab
+        if (currTabsList.length === 0) {
+            selectFile(null);
+            setActiveTab(null);
+        } else {
+            // If its the last tab, use the last tab in the new tabs list.
+            const newIndex = (index >= currTabsList.length)?currTabsList.length - 1:index;
+            setActiveTab(currTabsList[newIndex].key);
+            selectFile(currTabsList[newIndex].key);
+        }
+    }
+
+    const generateDropdown = () => {
+        const items = [];
+
+        if (!systemTree) {
+            return items;
+        }
+
+        // Build files list from system
+        for (const program in systemTree) {
+            items.push(<Dropdown.Header key={`header-${program}`}>{program}</Dropdown.Header>);
+            for (const fileName in systemTree[program]) {
+                const key = program + "_" + fileName;
+                items.push(
+                    <Dropdown.Item key={key} onClick={() => addTab(key)}>{fileName}</Dropdown.Item>
+                );
+            }
+            items.push(<Dropdown.Divider key={`divider-${program}`} />);
+        }
+
+        // Remove last divider
+        items.pop();
+
+        return items;
+    }
+
+    useEffect(() => {
+        if (files && files.length > 0) {    
+            const numFiles = Math.floor(Math.random() * files.length) + 1;
+            const newFiles = files.slice(0, numFiles);
+            setTabsList(newFiles);
+            const randomFileIndex = Math.floor(Math.random() * newFiles.length);
+            setActiveTab(newFiles[randomFileIndex].key);
+            selectFile(newFiles[randomFileIndex].key);
+        }
+    }, [files]);
+    
+    return (
+
+        <div className="tabsGutter">
+
+            <div className="tabsContainer">
+                {tabsList.map(function(file) {
+                    return <Tab 
+                        file={file} 
+                        key={file.key} 
+                        activeTab={activeTab} 
+                        selectTab={selectTab}
+                        closeTab={closeTab}
+                    />
+                })}
+            </div>
+
+            <div className="tabsDropdown">
+                {
+                    (files && files.length > 0) &&
+                    <Dropdown data-bs-theme="dark">
+                        <Dropdown.Toggle as={SelectFileToggle}>
+                            <ChevronDown className="chevron" />
+                        </Dropdown.Toggle>
+                        <Dropdown.Menu>
+                            {generateDropdown()}
+                        </Dropdown.Menu>
+                    </Dropdown>
+                }
+            </div>
+
+        </div>
+    );
+}
+
+Tabs.propTypes = {
+    files: PropTypes.array,
+    selectFile: PropTypes.func,
+    systemTree: PropTypes.object
+}

package/src/components/Viewer/Tabs/Tabs.scss

@@ -0,0 +1,50 @@
+.tabsGutter {
+    display: flex;
+    flex-direction: row;
+    width:100%;
+    height:40px;
+    background-color: #252526;
+}
+
+.tabsContainer {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    flex-grow: 1;
+    overflow-x: auto;
+    scrollbar-gutter: stable;
+    scrollbar-color: #47474766 #1e1e1e;
+    scrollbar-width: thin;
+}
+
+.tabsDropdown {
+    float: right;
+    display: flex;
+    align-items: center;
+    color:rgb(138, 138, 138);
+    padding: 0 10px;
+    cursor:pointer;
+    height:100%;
+}
+
+.chevron {
+    color:rgb(177, 177, 177);
+}
+
+.chevron:hover {
+    color: rgb(255, 255, 255);
+}
+
+.dropdown-menu {
+    border-radius: 0 !important;
+    padding: 0 !important;
+}
+
+.dropdown-item {
+    font-size:11px;
+}
+
+.dropdown-header {
+    font-size:12px !important;
+    padding-bottom:5px !important;
+}

package/src/components/Viewer/Viewer.jsx

@@ -0,0 +1,84 @@
+import "./Viewer.scss";
+import PropTypes from 'prop-types';
+
+import { MonacoInstance } from "./MonacoInstance/MonacoInstance";
+import { useEffect, useState } from "react";
+import { Tabs } from "./Tabs/Tabs";
+
+/**
+ * Renders the viewer component with support for tabs.
+ * 
+ * @return {JSX}
+ */
+export const Viewer = ({systemTree, onFileSelect}) => {
+
+    const [files, setFiles] = useState();
+    const [fileContent, setFileContent] = useState();
+    const [editorContent, setEditorContent] = useState();
+
+    // Flatten system tree into list with necessary information for tabs component
+    useEffect(() => {
+
+        // Store the files meta and content separately
+        const files = [];
+        const content = {};
+
+        // Flatten system tree and assign key to each file in the program.
+        for (const program in systemTree) {
+            for (const filePath in systemTree[program]) {
+                const file = systemTree[program][filePath];
+                const key = program + "_" + filePath;
+                const info = {
+                    program: program,
+                    key: key,
+                    fileName: filePath.split("/").slice(-1)[0],
+                    path: filePath
+                }
+                content[key] = file.source
+                files.push(info);
+            }
+        }
+
+        if (files.length === 0) {
+            // TODO: Replace monaco editor with prompt until a tab is added
+            setEditorContent("Select file using file navigator or drop down on top right.");
+            setFileContent({});
+            setFiles([]);
+        } else {
+            setFileContent(content);
+            setFiles(files);
+        }
+
+    }, [systemTree])
+
+
+    const selectFile = (fileKey) => {
+        if (fileKey) {
+            if (files && fileContent) {
+                let file = files.find((tab) => tab.key === fileKey)
+                setEditorContent(fileContent[fileKey]);
+                if (onFileSelect && file) {
+                    onFileSelect(file);
+                }
+            }
+        } else {
+            setEditorContent("Select file using drop down on top right.");
+        }
+    }
+    
+    return (
+        <div className="viewerContainer">
+            <div className="tabContainer">
+                <Tabs files={files} selectFile={selectFile} systemTree={systemTree}/>
+            </div>
+            <div className="monacoContainer">
+                <MonacoInstance editorContent={editorContent}/>
+            </div>
+        </div>
+    );
+}
+
+Viewer.propTypes = {
+    systemTree: PropTypes.object,
+    onFileSelect: PropTypes.func
+}

package/src/components/Viewer/Viewer.scss

@@ -0,0 +1,25 @@
+.viewerContainer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right:0;
+    overflow:hidden;
+}
+
+.tabContainer{
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 40px;
+    right:0;
+}
+
+.monacoContainer{
+    position: absolute;
+    top: 40px;
+    left: 0;
+    bottom: 0;
+    right:0;
+
+}

package/src/components/Viewer/index.js

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

package/src/index.js

@@ -0,0 +1,3 @@
+export * from "./components/StackList";
+export * from "./components/Viewer";
+export * from "./components/FlowDiagram";

package/src/stories/FlowDiagram.scss

@@ -0,0 +1,7 @@
+.rootTraceContainer {
+    position: absolute;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+}

package/src/stories/FlowDiagram.stories.js

@@ -0,0 +1,29 @@
+import { FlowDiagram } from "../components/FlowDiagram";
+import "./FlowDiagram.scss"
+
+import sampleTree from "./data/flow/SampleTree.json";
+
+export default {
+    title: 'FlowDiagram', 
+    component: FlowDiagram,
+    argTypes: {
+        treeInfo: {
+            type: 'array'
+        }
+    }
+};
+
+const Template = (args) => {
+
+    return (
+        <div className="rootTraceContainer">
+            <FlowDiagram  {...args}/> 
+        </div>
+    )
+}
+
+export const Default = Template.bind({})
+
+Default.args = {
+    treeInfo: sampleTree
+}

package/src/stories/StackList.stories.js

@@ -0,0 +1,89 @@
+import { useEffect } from "react";
+import { StackList } from "../components/StackList";
+import { useArgs } from "@storybook/preview-api";
+import { action } from "@storybook/addon-actions";
+
+import "./StackListStories.scss"
+
+export default {
+    title: 'CallStack', 
+    component: StackList,
+    argTypes: {
+        traces: {
+            type: 'array'
+        }
+    }
+};
+
+const Template = (args) => {
+    const [, updateArgs] = useArgs();
+    
+    const selectTraceItem = (selectedIndex) => {
+        action('Selected Stack Position:')(selectedIndex);
+        const newTraces = [];
+        args.traces.forEach((value, index) => {
+            value.selected = (selectedIndex === index);
+            newTraces.push(value);
+        });
+        updateArgs({traces : newTraces});
+    };
+
+    useEffect(() => {
+        updateArgs({selectTraceItem : selectTraceItem});
+    }, []);
+
+    return (
+        <div className="rootContainer">
+            <div className="stackContainer">
+                <StackList  {...args}/> 
+            </div>
+        </div>
+    )
+}
+
+
+export const Default = Template.bind({})
+
+Default.args = {
+    traces: [
+        {functionName:"visit_arg", fileName: "helper.py", lineNumber: 3},
+        {functionName:"__init__", fileName: "helper.py", lineNumber: 65},
+        {functionName:"injectLogTypesA", fileName: "LogInjector.py", lineNumber: 3, selected: true},
+        {functionName:"visit_import", fileName: "LogInjector.py", lineNumber: 3},
+        {functionName:"__init__", fileName: "LogInjector.py", lineNumber: 65},
+        {functionName:"run", fileName: "ProgramProcessor.py", lineNumber: 3},
+        {functionName:"main", fileName: "main.py", lineNumber: 3},
+        {functionName:"<module>", fileName: "main.py", lineNumber: 65}
+    ]
+}
+
+
+export const StackTopSelected = Template.bind({})
+
+StackTopSelected.args = {
+    traces: [
+        {functionName:"visit_arg", fileName: "helper.py", lineNumber: 3, selected: true},
+        {functionName:"__init__", fileName: "helper.py", lineNumber: 65},
+        {functionName:"injectLogTypesA", fileName: "LogInjector.py", lineNumber: 3},
+        {functionName:"visit_import", fileName: "LogInjector.py", lineNumber: 3},
+        {functionName:"__init__", fileName: "LogInjector.py", lineNumber: 65},
+        {functionName:"run", fileName: "ProgramProcessor.py", lineNumber: 3},
+        {functionName:"main", fileName: "main.py", lineNumber: 3},
+        {functionName:"<module>", fileName: "main.py", lineNumber: 65}
+    ]
+}
+
+export const WithException = Template.bind({})
+
+WithException.args = {
+    traces: [
+        {functionName:"visit_arg", fileName: "helper.py", hasException: true,  lineNumber: 3, selected: true},
+        {functionName:"__init__", fileName: "helper.py", lineNumber: 65},
+        {functionName:"injectLogTypesA", fileName: "LogInjector.py", lineNumber: 3},
+        {functionName:"visit_import", fileName: "LogInjector.py", lineNumber: 3},
+        {functionName:"__init__", fileName: "LogInjector.py", lineNumber: 65},
+        {functionName:"run", fileName: "ProgramProcessor.py", lineNumber: 3},
+        {functionName:"main", fileName: "main.py", lineNumber: 3},
+        {functionName:"<module>", fileName: "main.py", lineNumber: 65}
+    ]
+}

package/src/stories/StackListStories.scss

@@ -0,0 +1,13 @@
+.rootContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    padding: 100px;
+}
+
+.stackContainer {
+    height: 200px;
+    width: 300px;
+    background-color: #1b1c1d;
+}

package/src/stories/Viewer.stories.js

@@ -0,0 +1,40 @@
+import { useEffect } from "react";
+import { Viewer } from "../components/Viewer";
+import { useArgs } from "@storybook/preview-api";
+import { action } from "@storybook/addon-actions";
+
+import fileTrees from "./data/filetree.json";
+
+import "./ViewerStories.scss"
+
+export default {
+    title: 'Viewer', 
+    component: Viewer,
+    argTypes: {}
+};
+
+const Template = (args) => {
+    const [, updateArgs] = useArgs();
+
+    const onFileSelect = (selectedFile) => {
+        action('Selected Stack Position:')(selectedFile);
+    }
+
+    useEffect(() => {
+        updateArgs({onFileSelect : onFileSelect});
+    }, []);
+
+    return (
+        <div className="viewerStoryWrapper">
+            <Viewer {...args} />
+        </div>
+    )
+}
+
+export const Default = Template.bind({})
+
+console.log(fileTrees);
+
+Default.args = {
+    systemTree: fileTrees.fileTrees
+}

package/src/stories/ViewerStories.scss

@@ -0,0 +1,7 @@
+.viewerStoryWrapper{
+    position: absolute;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+}

package/src/stories/data/filetree.json

@@ -0,0 +1 @@
+{"fileTrees": {"mergeSortWorker.clp.zst": {"mergeSortWorker.py": {"source": "\nimport websockets\nimport asyncio\nimport json\nfrom mergeSort import mergeSort\nimport uuid\n\nconnection = websockets.connect(uri='ws://localhost:8765', ping_interval=None)\n\nMSG_TYPE = {\n    \"REGISTER\": 1,\n    \"REQUEST\": 2,\n    \"RESPONSE\": 3\n}\n\nIS_REGISTERED = False\n\nasync def send_response(websocket, response):\n    '''\n        Send response to job handler.\n    '''\n    await websocket.send(json.dumps(response))\n\nasync def handle_request(message):\n    '''\n        Handle request from job handler.\n    '''\n    # Print task info\n    print(f\"\\nTask: {message['type']}\")\n    print(f\"UID: {message['asp_uid']}\")\n    print(f\"Val: {message['data']}\")\n    print(f\"User: {message['user']}\")\n\n    # Execute Task   \n    n = len(message[\"data\"])\n    sortedList = mergeSort(message[\"data\"], 0, n - 1)\n    resp = {\n        \"code\": MSG_TYPE[\"RESPONSE\"],\n        \"worker\": True,\n        \"type\": \"mergeSort\",\n        \"value\": sortedList,\n        \"asp_uid\": message[\"asp_uid\"],\n        \"user\": message[\"user\"]\n    }\n    return resp\n\nasync def handle_message(websocket, message):\n    '''\n        Handle the received message.\n    '''\n    message = json.loads(message)\n    asp_uid = message[\"asp_uid\"]\n\n    if message[\"code\"] == MSG_TYPE[\"REQUEST\"]:\n        response = await handle_request(message=message)\n        await send_response(websocket=websocket, response=response)\n\n\nasync def register(websocket):\n    '''\n        Register the worker with the job handler.\n    '''\n    asp_uid = str(uuid.uuid4())\n\n    response = {\n        \"code\": MSG_TYPE[\"REGISTER\"],\n        \"worker\": True,\n        \"type\": \"mergeSort\",\n        \"asp_uid\": asp_uid\n    }\n\n    # Send message to register the worker.\n    await send_response(websocket=websocket, response=response)\n\nasync def receieve_message():\n    '''\n        Main loop receives jobs, executes them and responds.\n    '''\n    async with connection as websocket:\n        await register(websocket=websocket)\n            \n        try:\n            # Listen for messages\n            async for message in websocket:\n                await handle_message(websocket=websocket, message=message)\n        except KeyboardInterrupt:\n            await websocket.close()\n            return\n\n        await websocket.close()\n\nif __name__ == \"__main__\":\n    asyncio.run(receieve_message())", "minLt": 0, "maxLt": 46}, "mergeSort.py": {"source": "def merge(arr, l, m, r):\n    '''\n        Reference: https://www.geeksforgeeks.org/python-program-for-merge-sort/\n    '''\n    n1 = m - l + 1\n    n2 = r - m\n\n    # create temp arrays\n    L = [0] * (n1)\n    R = [0] * (n2)\n\n    # Copy data to temp arrays L[] and R[]\n    for i in range(0, n1):\n        L[i] = arr[l + i]\n\n    for j in range(0, n2):\n        R[j] = arr[m + 1 + j]\n\n    # Merge the temp arrays back into arr[l..r]\n    i = 0     # Initial index of first subarray\n    j = 0     # Initial index of second subarray\n    k = l     # Initial index of merged subarray\n\n    while i < n1 and j < n2:\n        if L[i] <= R[j]:\n            arr[k] = L[i]\n            i += 1\n        else:\n            arr[k] = R[j]\n            j += 1\n        k += 1\n\n    # Copy the remaining elements of L[], if there\n    # are any\n    while i < n1:\n        arr[k] = L[i]\n        i += 1\n        k += 1\n\n    # Copy the remaining elements of R[], if there\n    # are any\n    while j < n2:\n        arr[k] = R[j]\n        j += 1\n        k += 1\n\n# l is for left index and r is right index of the\n# sub-array of arr to be sorted\n\n\ndef mergeSort(arr, l, r):\n    '''\n        Reference: https://www.geeksforgeeks.org/python-program-for-merge-sort/\n    '''\n    if l < r:\n\n        # Same as (l+r)//2, but avoids overflow for\n        # large l and h\n        m = l+(r-l)//2\n\n        # Sort first and second halves\n        mergeSort(arr, l, m)\n        mergeSort(arr, m+1, r)\n        merge(arr, l, m, r)\n\n    return arr", "minLt": 46, "maxLt": 82}}, "bubbleSortWorker.clp.zst": {"bubbleSortWorker.py": {"source": "\nimport websockets\nimport asyncio\nimport json\nfrom bubbleSort import bubble_sort\nimport uuid\n\nconnection = websockets.connect(uri='ws://localhost:8765', ping_interval=None)\n\nMSG_TYPE = {\n    \"REGISTER\": 1,\n    \"REQUEST\": 2,\n    \"RESPONSE\": 3\n}\n\nIS_REGISTERED = False\n\n\nasync def send_response(websocket, response):\n    '''\n        Send response to job handler.\n    '''\n    await websocket.send(json.dumps(response))\n\nasync def handle_request(message):\n    '''\n        Handle request from job handler.\n    '''\n    # Print task info\n    print(f\"\\nTask: {message['type']}\")\n    print(f\"UID: {message['asp_uid']}\")\n    print(f\"Val: {message['data']}\")\n    print(f\"User: {message['user']}\")\n\n    # Execute Task\n    sortedList = bubble_sort(message[\"data\"])\n    resp = {\n        \"code\": MSG_TYPE[\"RESPONSE\"],\n        \"worker\": True,\n        \"type\": \"bubbleSort\",\n        \"value\": sortedList,\n        \"asp_uid\": message[\"asp_uid\"],\n        \"user\": message[\"user\"]\n    }\n    return resp\n\nasync def handle_message(websocket, message):\n    '''\n        Handle the received message.\n    '''\n    message = json.loads(message)\n    asp_uid = message[\"asp_uid\"]\n\n    if message[\"code\"] == MSG_TYPE[\"REQUEST\"]:\n        response = await handle_request(message=message)\n        await send_response(websocket=websocket, response=response)\n\n\nasync def register(websocket):\n    '''\n        Register the worker with the job handler.\n    '''\n    asp_uid = str(uuid.uuid4())\n\n    response = {\n        \"code\": MSG_TYPE[\"REGISTER\"],\n        \"worker\": True,\n        \"type\": \"bubbleSort\",\n        \"asp_uid\": asp_uid\n    }\n\n    # Send message to register the worker.\n    await send_response(websocket=websocket, response=response)\n\nasync def receieve_message():\n    '''\n        Main loop receives jobs, executes them and responds.\n    '''\n    async with connection as websocket:\n        await register(websocket=websocket)\n            \n        try:\n            # Listen for messages\n            async for message in websocket:\n                await handle_message(websocket=websocket, message=message)\n        except KeyboardInterrupt:\n            await websocket.close()\n            return\n\n        await websocket.close()\n\nif __name__ == \"__main__\":\n    asyncio.run(receieve_message())", "minLt": 0, "maxLt": 45}, "bubbleSort.py": {"source": "def bubble_sort(arr):\n    # Taken from here: https://www.geeksforgeeks.org/python-program-for-bubble-sort/\n    \n    # Outer loop to iterate through the list n times\n    for n in range(len(arr) - 1, 0, -1):\n        swapped = False  \n        for i in range(n):\n            if arr[i] > arr[i + 1]:\n\n                # Swap elements if they are in the wrong order\n                arr[i], arr[i + 1] = arr[i + 1], arr[i]\n                swapped = True\n        \n        if not swapped:\n            break\n\n    return arr\n    ", "minLt": 45, "maxLt": 55}}, "jobHandler.clp.zst": {"jobHandler.py": {"source": "#!/usr/bin/env python\n\nimport asyncio\nimport argparse\nimport json\nfrom websockets.asyncio.server import serve\n\nworkers = {}\nclient = None\n\nMSG_TYPE = {\n    \"REGISTER\": 1,\n    \"REQUEST\": 2,\n    \"RESPONSE\": 3\n}\n\nasync def send_to_worker(websocket, message):\n    '''\n        Send message to the given worker.\n    '''\n    await websocket.send(json.dumps(message))\n\nasync def send_to_client(websocket, message):\n    '''\n        Send message to the given client.\n    '''\n    await websocket.send(json.dumps(message))\n\nasync def handle_register(websocket, message):\n    '''\n        Handle register operations.\n    '''\n    global client, workers  \n    if \"client\" in message:\n        client = websocket\n        await send_to_client(client, message)\n    elif \"worker\" in message:\n        workers[message[\"type\"]] = websocket\n        await send_to_worker(workers[message[\"type\"]], message)\n\nasync def handle_request(websocket, message): \n    '''\n        Handle incoming requests and pass to relevant worker.\n    '''\n    if message[\"type\"] in workers:\n        await workers[message[\"type\"]].send(json.dumps(message))\n    else:\n        message[\"response\"] = f\"message['type'] worker isn't initialized\"\n        print(f\"{message['type']} worker isn't initialized\")\n        await websocket.send(json.dumps(message))\n\nasync def handle_response(message):   \n    '''\n        Handle response from worker and pass to client.\n    '''\n    global client, workers  \n    if client:\n        await send_to_client(client, message)\n    else:\n        message[\"response\"] = \"Client isn't initialized\"\n        print(f\"client isn't initialized\")\n        await send_to_client(client, message)\n\nasync def handle_message(websocket, message):\n    '''\n        Handle message received by client.\n    '''\n    message = json.loads(message)\n    asp_uid = message[\"asp_uid\"]\n    print(f\"\\nReceived message: {message}\")\n\n    if message[\"code\"] == MSG_TYPE[\"REGISTER\"]:        \n        await handle_register(websocket, message)\n    elif message[\"code\"] == MSG_TYPE[\"REQUEST\"]:           \n        await handle_request(websocket, message)\n    elif message[\"code\"] == MSG_TYPE[\"RESPONSE\"]:        \n        await handle_response(message)\n\nasync def receieve_message(websocket):\n    '''\n        Handles messages from websocket.\n\n        1. Workers register using \n        {\n            \"code\": 1,\n            \"type\": \"bubbleSort\"\n            \"worker\": True\n        }\n\n        2. Client Registers using\n        {\n            \"code\": 1,\n            \"client\": True\n        }\n\n        3. Client runs job using\n        {\n            \"code\": 2,\n            \"client\": True,\n            \"type\": \"bubbleSort\",\n            \"data\": [13,6,3,12,3]\n        }\n    '''\n    async for message in websocket:\n        await handle_message(websocket=websocket, message=message)\n\n\nasync def main():\n    '''\n        Creates a websocket at the provided port and initializes\n        the query handler. \n    '''\n    parser = argparse.ArgumentParser(description='WebSocket server for sample system queries')\n\n    parser.add_argument('--host',\n                        default='localhost',\n                        help='Host to bind the server to')\n                        \n    parser.add_argument('--port',\n                        type=int,\n                        default=8765,\n                        help='Port to bind the server to')\n    \n    args = parser.parse_args()\n\n    print(f\"Starting WebSocket server on {args.host}:{args.port}\")\n    async with serve(receieve_message, args.host, args.port) as server:\n        await server.serve_forever()\n\nif __name__ == \"__main__\":\n    asyncio.run(main())", "minLt": 0, "maxLt": 63}}, "radixSortWorker.clp.zst": {"radixSortWorker.py": {"source": "\nimport websockets\nimport asyncio\nimport json\nfrom radixSort import radixSort\nimport uuid\n\nconnection = websockets.connect(uri='ws://localhost:8765', ping_interval=None)\n\nMSG_TYPE = {\n    \"REGISTER\": 1,\n    \"REQUEST\": 2,\n    \"RESPONSE\": 3\n}\n\nIS_REGISTERED = False\n\n\nasync def send_response(websocket, response):\n    '''\n        Send response to job handler.\n    '''\n    await websocket.send(json.dumps(response))\n\nasync def handle_request(message):\n    '''\n        Handle request from job handler.\n    '''\n    # Print task info\n    print(f\"\\nTask: {message['type']}\")\n    print(f\"UID: {message['asp_uid']}\")\n    print(f\"Val: {message['data']}\")\n    print(f\"User: {message['user']}\")\n\n    # Execute Task\n    n = len(message[\"data\"])\n    sortedList = radixSort(message[\"data\"])\n    resp = {\n        \"code\": MSG_TYPE[\"RESPONSE\"],\n        \"worker\": True,\n        \"type\": \"radixSort\",\n        \"value\": sortedList,\n        \"asp_uid\": message[\"asp_uid\"],\n        \"user\": message[\"user\"]\n    }\n    return resp\n\nasync def handle_message(websocket, message):\n    '''\n        Handle the received message.\n    '''\n    message = json.loads(message)\n    asp_uid = message[\"asp_uid\"]\n\n    if message[\"code\"] == MSG_TYPE[\"REQUEST\"]:\n        response = await handle_request(message=message)\n        await send_response(websocket=websocket, response=response)\n\nasync def register(websocket):\n    '''\n        Register the worker with the job handler.\n    '''\n    asp_uid = str(uuid.uuid4())\n\n    response = {\n        \"code\": MSG_TYPE[\"REGISTER\"],\n        \"worker\": True,\n        \"type\": \"radixSort\",\n        \"asp_uid\": asp_uid\n    }\n\n    # Send message to register the worker.\n    await send_response(websocket=websocket, response=response)\n\n\nasync def receieve_message():\n    '''\n        Main loop receives jobs, executes them and responds.\n    '''\n    async with connection as websocket:\n        await register(websocket=websocket)\n        # Listen for messages\n        async for message in websocket:\n            await handle_message(websocket=websocket, message=message)\n\n        await websocket.close()\n\nif __name__ == \"__main__\":\n    asyncio.run(receieve_message())", "minLt": 0, "maxLt": 42}, "radixSort.py": {"source": "\n\ndef countingSort(arr, exp1): \n    '''\n        Reference: https://www.geeksforgeeks.org/python-program-for-radix-sort/\n    '''\n  \n    n = len(arr) \n  \n    # The output array elements that will have sorted arr \n    output = [0] * (n) \n  \n    # initialize count array as 0 \n    count = [0] * (10) \n  \n    # Store count of occurrences in count[] \n    for i in range(0, n): \n        index = (arr[i]/exp1) \n        count[int((index)%10)] += 1\n  \n    # Change count[i] so that count[i] now contains actual \n    #  position of this digit in output array \n    for i in range(1,10): \n        count[i] += count[i-1] \n  \n    # Build the output array \n    i = n-1\n    while i>=0: \n        index = (arr[i]/exp1) \n        output[ count[ int((index)%10) ] - 1] = arr[i] \n        count[int((index)%10)] -= 1\n        i -= 1\n  \n    # Copying the output array to arr[], \n    # so that arr now contains sorted numbers \n    i = 0\n    for i in range(0,len(arr)): \n        arr[i] = output[i] \n\ndef radixSort(arr):\n    '''\n        Reference: https://www.geeksforgeeks.org/python-program-for-radix-sort/\n    '''\n\n    # Find the maximum number to know number of digits\n    max1 = max(arr)\n\n    # Do counting sort for every digit. Note that instead\n    # of passing digit number, exp is passed. exp is 10^i\n    # where i is current digit number\n    exp = 1\n    while max1 // exp > 0:\n        countingSort(arr,exp)\n        exp *= 10\n\n    return arr", "minLt": 42, "maxLt": 69}}, "simulatedClient.clp.zst": {"simulatedClient.py": {"source": "\nimport websockets\nimport asyncio\nimport json\nimport random\nimport time\nimport uuid\n\nconnection = websockets.connect(uri='ws://localhost:8765', ping_interval=None)\n\nMSG_TYPE = {\n    \"REGISTER\": 1,\n    \"REQUEST\": 2,\n    \"RESPONSE\": 3\n}\n\nJOB_TYPES = [\n    \"bubbleSort\",\n    \"mergeSort\",\n    \"radixSort\"\n]\n\nUSERS = [\n    \"user1\",\n    \"user2\",\n    \"user3\",\n    \"user4\",\n    \"user5\",\n]\n\nIS_REGISTERED = False\n\nasync def sendRandomJob(websocket):\n    '''\n        Send a random job from a random user to the jobHandler.\n    '''\n    asp_uid = str(uuid.uuid4())\n    \n    await websocket.send(json.dumps({\n        \"code\": MSG_TYPE[\"REQUEST\"],\n        \"worker\": True,\n        \"type\": JOB_TYPES[random.randint(0, len(JOB_TYPES) - 1)],\n        \"user\": USERS[random.randint(0, len(USERS) - 1)],\n        \"data\": random.sample(range(6, 101), random.randint(5,15)),\n        \"asp_uid\": asp_uid\n    }))\n\nasync def registerClient(websocket):\n    '''\n        Register the client.\n    '''\n    asp_uid = str(uuid.uuid4())\n    await websocket.send(json.dumps({\n        \"code\": MSG_TYPE[\"REGISTER\"],\n        \"client\": True,\n        \"asp_uid\": asp_uid\n    }))\n\nasync def main():\n    '''\n        Main loop receives jobs, executes them and responds.\n    '''\n    async with connection as websocket:\n        await registerClient(websocket=websocket)\n        time.sleep(2)\n        try:\n            async for message in websocket:\n                await sendRandomJob(websocket= websocket)\n                time.sleep(random.randrange(1, 10))\n        except KeyboardInterrupt:\n            print('interrupted!')\n        except:\n            pass\n\n        await websocket.close()\n\n\nif __name__ == \"__main__\":\n    asyncio.run(main())", "minLt": 0, "maxLt": 35}}}}

package/src/stories/data/flow/SampleTree.json

@@ -0,0 +1,8 @@
+{
+    "orientation":"TB",
+    "data":{
+        "branch1" : ["a","b","c","p"],
+        "branch2" : ["a","b","d","x"],
+        "branch3" : ["a","f","g","x"]
+    }
+}