corinz · corinz · Jan 19, 2024 · Jan 19, 2024 · Jan 19, 2024 · Jan 19, 2024
diff --git a/docs/icon.svg b/docs/icon.svg
diff --git a/frontend/index.html b/frontend/index.html
@@ -3,22 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <meta content="width=device-width, initial-scale=1.0" name="viewport" />
-    <!--    <link href="./src/style.css" rel="stylesheet">-->
     <title>m8</title>
   </head>
   <body>
     <div id="app"></div>
     <script src="./src/main.ts" type="module"></script>
-
-    <!--<body style="margin: 0; overflow-x: hidden; overflow-y: hidden">-->
-    <!--<div id="sandbox" style="height:100vh; width:100vw;"></div>-->
-    <!--<script src="https://embeddable-sandbox.cdn.apollographql.com/_latest/embeddable-sandbox.umd.production.min.js"></script>-->
-    <!--<script>-->
-    <!--    new window.EmbeddedSandbox({-->
-    <!--        target: "#sandbox",-->
-    <!--        initialEndpoint: "http://localhost:8080/graphql",-->
-    <!--    });-->
-    <!--</script>-->
-    <!--</body>-->
   </body>
 </html>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -17,16 +17,13 @@
     "svelte": "^3.49.0",
     "svelte-check": "^2.8.0",
     "svelte-preprocess": "^4.10.7",
-    "tslib": "^2.4.0",
     "typescript": "^4.6.4",
     "vite": "^3.0.7"
   },
   "dependencies": {
     "@urql/core": "^4.1.1",
     "@urql/svelte": "^4.0.4",
-    "fuse": "^0.4.0",
-    "fuse.js": "^6.6.2",
-    "gql-query-builder": "^3.8.0",
+    "fuse.js": "^7.0.0",
     "svelte-material-ui": "^7.0.0-beta.14",
     "underscore": "^1.13.6"
   }

diff --git a/frontend/package.json.md5 b/frontend/package.json.md5
@@ -1 +1 @@
-9f1b52d3a87f4103b133575d796ee918
+6f626a21c9b113d2253245cf65260ca7
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
@@ -1,59 +1,28 @@
-<svelte:head>
-    <!-- SMUI Styles -->
-    <link rel="stylesheet" href="node_modules/svelte-material-ui/bare.css"/>
-    <link rel="preconnect" href="https://fonts.googleapis.com"/>
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
-    <!-- Material Icons, Roboto, and Roboto Mono fonts -->
-    <link rel="stylesheet"
-          href="https://fonts.googleapis.com/css2?family=Material+Icons&Roboto+Mono:ital@0;1&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"/>
-</svelte:head>
-
 <script lang="ts">
     import SearchBar from "./SearchBar.svelte";
     import Legend from "./Legend.svelte";
-    import {focusedElement, defaultFocus} from "./focus"
     import {Client, cacheExchange, fetchExchange, setContextClient} from '@urql/svelte';
+    import JsonTable from "./JsonTable.svelte";
+
+    window.addEventListener("keydown", function(e) {
+        if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
+            e.preventDefault();
+        }
+    }, false);
 
     const client = new Client({
+        // TODO: https
         url: 'http://localhost:8080/graphql',
         exchanges: [cacheExchange, fetchExchange],
         maskTypename: true, // suppresses __typename field from graphql response
     });
     setContextClient(client);
-
-    document.body.style.cursor = 'none';
-    let searchEventKey = ''
-    defaultFocus()
-
-    function handleKeyDown(event: CustomEvent | KeyboardEvent) {
-        event = event as KeyboardEvent;
-        if (event.key === '/' || event.key === ':') { // search bar focus
-            searchEventKey = event.key
-            event.preventDefault() // preventDefault to ignore it from input box
-            focusedElement.set(document.getElementById('search'))
-        } else if (event.key === "Escape") { // default focus
-            const highlightRow = document.getElementById('highlight')
-            defaultFocus()
-            highlightRow.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
-        }
-    }
 </script>
 
-<main class="nopointer" on:keydown={handleKeyDown}>
+<main>
     <div>
-<!--        <pre>-->
-<!--  ┌────┐-->
-<!--  │   ▼│-->
-<!--  │ m8 │-->
-<!--  └────┘-->
-<!--        </pre>-->
         <Legend></Legend>
-        <SearchBar searchEventKey={searchEventKey}/>
+        <SearchBar searchEventKey=""/>
+        <JsonTable></JsonTable>
     </div>
-</main>
-
-<style>
-    .nopointer {
-        pointer-events: none;
-    }
-</style>
+</main>
diff --git a/frontend/src/JsonTable.svelte b/frontend/src/JsonTable.svelte
@@ -1,83 +1,55 @@
 <script lang="ts">
-    import IconButton from '@smui/icon-button';
-    import DataTable, {Body, Cell, Head, Label, Row, SortValue,} from '@smui/data-table';
+    import DataTable, {Body, Cell, Head, Label, Row} from '@smui/data-table'
+    import {dataStore} from "./jsonTable"
 
-    export let data;
-
-    let activeRowIndex = 0;
-    let highlightRow, sortedData;
+    let data, activeRowIndex
     $: {
-        sortedData = data;
-        activeRowIndex = 0;
-    }
-    let sortDirection: Lowercase<keyof typeof SortValue> = 'ascending';
-    let sort = 'id';
-
-    // TODO: fix this
-    function handleSort() {
-        sortedData.sort((a, b) => {
-            const [aVal, bVal] = [a[sort], b[sort]][
-                sortDirection === 'ascending' ? 'slice' : 'reverse'
-                ]();
-            if (typeof aVal === 'string' && typeof bVal === 'string') {
-                return aVal.localeCompare(bVal);
-            }
-            return Number(aVal) - Number(bVal);
-        });
+        data = $dataStore
+        activeRowIndex = 0
     }
 
     function handleKeyDown(event: CustomEvent | KeyboardEvent) {
+        document.getElementById('highlight').scrollIntoView({behavior: "auto", block: "center", inline: "nearest"});
+
         event = event as KeyboardEvent;
         if (event.key === 'ArrowUp' || event.key === 'Up') {
             activeRowIndex = Math.max(0, activeRowIndex - 1);
         } else if (event.key === 'ArrowDown' || event.key === 'Down') {
-            activeRowIndex = Math.min(sortedData.length - 1, activeRowIndex + 1);
+            activeRowIndex = Math.min(data.length - 1, activeRowIndex + 1);
         }
     }
 
-    $: if (highlightRow) {
-        document.getElementById('defaultFocus').focus();
-    }
+    window.addEventListener("keydown", function(e) {
+        handleKeyDown(e)
+    });
+
 </script>
 
-{#if (!sortedData)}
+{#if (!data)}
     Dataset is empty
-{:else if sortedData.length > 0}
-    <DataTable
-            stickyHeader
-            sortable
-            bind:sort
-            bind:sortDirection
-            on:keydown={handleKeyDown}
-            on:SMUIDataTable:sorted={handleSort}
-            table$aria-label="Multi-Result Table"
-            style="width: 100%;"
-    >
+{:else if data.length > 0}
+    <DataTable stickyHeader style="width: 100%;">
         <!-- HEADER ROW -->
         <Head>
             <Row>
-                {#each Object.keys(sortedData[0]) as header, i}
+                {#each Object.keys(data[0]) as header, i}
                     {#if i == 0 }
                         <Cell columnId={header} style="width: 100%;">
                             <Label>{header}</Label>
-                            <!--defaultFocus enables default scrolling capability-->
-                            <IconButton id="defaultFocus" class="material-icons">arrow_upward</IconButton>
                         </Cell>
                     {:else }
                         <Cell columnId={header}>
                             <Label>{header}</Label>
-                            <IconButton class="material-icons">arrow_upward</IconButton>
                         </Cell>
                     {/if}
                 {/each}
             </Row>
         </Head>
         <!-- DATA ROWS -->
-        <!--{#if sortedData.length > 0}-->
             <Body>
-            {#each Object.entries(sortedData) as [id, obj] }
+            {#each Object.entries(data) as [id, obj] }
                 {#if id == activeRowIndex}
-                    <Row id="highlight" bind:this={highlightRow}>
+                    <Row id="highlight">
                         {#each Object.values(obj) as val }
                             <Cell class="highlight">{val}</Cell>
                         {/each}
@@ -91,21 +63,16 @@
                 {/if}
             {/each}
             </Body>
-        <!--{/if}-->
     </DataTable>
 {/if}
 
 <style>
-    /* Reset some of the demo app styles that interfere. */
-    :global(body),
-    :global(html) {
-        height: auto;
-        width: auto;
-        position: static;
-    }
-
     :global(.highlight) {
         background-color: rgba(109, 119, 131, 0.12);
     }
-
+    .scroll {
+        /*TODO: this setting enables horizontal scrolling for the table */
+        /*but disables the sticky header*/
+        overflow-x: auto;
+    }
 </style>
diff --git a/frontend/src/Legend.svelte b/frontend/src/Legend.svelte
@@ -20,7 +20,6 @@
     let clusterQStore = contextQuery.executeQuery()
     let clusters
 
-
     let activeContextsLocal: Map<string, string> = new Map()
     let clusterArr: Cluster[] = []