sample-ui-component-library 0.0.0

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