From 8d60b5caada97c2ea06f6c896eb40897a8241712 Mon Sep 17 00:00:00 2001
From: Abhinandan Bhuse <i.am.abhi747@gmail.com>
Date: Sat, 7 Dec 2024 10:16:19 +0530
Subject: [PATCH] Added syntactic content assistance to the filter field

---
 frontend/components/Filter.svelte     | 89 ++++++++++++++++++++-------
 frontend/components/Suggestion.svelte | 39 ++++++++++++
 frontend/dsl.ts                       | 51 +++++++++++----
 3 files changed, 147 insertions(+), 32 deletions(-)
 create mode 100644 frontend/components/Suggestion.svelte

diff --git a/frontend/components/Filter.svelte b/frontend/components/Filter.svelte
index 65e21f1..8abbae1 100644
--- a/frontend/components/Filter.svelte
+++ b/frontend/components/Filter.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import Button from './Button.svelte';
     import QueryModal from './QueryModal.svelte';
+    import Suggestion from './Suggestion.svelte';
     import { parseDSL } from '../dsl';
     import { debounce } from '../util';
     import {
@@ -14,28 +15,45 @@
     let filter: string = '';
     let filterValid: boolean = false;
     let saveModal: QueryModal;
+    let hideSuggestions: boolean = true;
+    let filterState = {
+        suggestions: [],
+        partialToken: null,
+    };
+    let suggestionsDiv;
+    let inputField;
 
     stringFilter.subscribe((value) => {
         filter = value;
         applyFilter();
     });
 
+    function _filterChangeHandler() {
+        // TODO: validate queries as user types them.
+        if (filter == '') {
+            filterValid = true;
+            filterState = {
+                suggestions: [],
+                partialToken: null,
+            };
+            return;
+        }
+        let parseResult = parseDSL(filter, filterState);
+        filterState = filterState; // force reactivity to update suggestions
+        if (parseResult.lexErrors.length > 0 || parseResult.parseErrors.length > 0) {
+            console.log('Found some errors', parseResult.lexErrors, parseResult.parseErrors);
+            filterValid = false;
+            // TODO: highlight in red
+        } else {
+            filterValid = true;
+        }
+        if (hideSuggestions) hideSuggestions = false;
+    }
+
     function filterChangeHandler(): () => void {
         return debounce(() => {
-            // TODO: validate queries as user types them.
-            if (filter == '') {
-                filterValid = true;
-                return;
-            }
-            let parseResult = parseDSL(filter);
-            if (parseResult.lexErrors.length > 0 || parseResult.parseErrors.length > 0) {
-                console.log('Found some errors', parseResult.lexErrors, parseResult.parseErrors);
-                filterValid = false;
-                // TODO: highlight in red
-            } else {
-                filterValid = true;
-            }
-        }, 1000);
+            _filterChangeHandler();
+        }, 500);
     }
 
     function applyFilter() {
@@ -50,7 +68,7 @@
             return;
         }
 
-        let parseResult = parseDSL(filter);
+        let parseResult = parseDSL(filter, filterState);
         if (parseResult.lexErrors.length > 0) {
             console.error(parseResult.lexErrors);
             filterActive.set(false);
@@ -71,15 +89,43 @@
             content: filter,
         });
     }
+
+    function handleClickOutsideSuggestionBox(event) {
+        if (suggestionsDiv && !suggestionsDiv.contains(event.target) && inputField && !inputField.contains(event.target)) {
+            hideSuggestions = true;
+        }
+    }
 </script>
 
+<svelte:window on:click={handleClickOutsideSuggestionBox} />
+
 <section class="filter">
-    <input
-        class:input-error={filter && !filterValid}
-        bind:value={filter}
-        placeholder="Filter destination port"
-        on:input={filterChangeHandler()}
-    />
+    <div style="position: relative;">
+        <input
+            class:input-error={filter && !filterValid}
+            class="filter-input"
+            bind:value={filter}
+            bind:this={inputField}
+            placeholder="Filter destination port"
+            on:input={filterChangeHandler()}
+            on:focus={() => { hideSuggestions = false; }}
+            
+        />
+        <Suggestion
+            suggestions={filterState.suggestions}
+            bind:suggestionsDiv
+            hide={hideSuggestions}
+            onSelect={(value) => {
+                console.log('Selected', value);
+                if (filterState.partialToken) {
+                    filter = filter.slice(0, filterState.partialToken.startOffset-1) + value;
+                } else {
+                    filter += ' ' + value;
+                }
+                inputField.focus();
+                _filterChangeHandler();
+            }} />
+    </div>
     <Button disabled={!filterValid} onClick={applyFilter} text="Apply" />
     {#if $isAuthenticated}<QueryModal bind:this={saveModal} />
         <Button disabled={!filterValid} onClick={openSaveQuery} text="Save" />
@@ -101,5 +147,6 @@
 
     input.input-error:focus {
         outline: 1px solid #ff0000;
+        color: #ff0000;
     }
 </style>
diff --git a/frontend/components/Suggestion.svelte b/frontend/components/Suggestion.svelte
new file mode 100644
index 0000000..7bb98ff
--- /dev/null
+++ b/frontend/components/Suggestion.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+    export let suggestionId: string = '';
+    export let hide: boolean = true;
+    export let onSelect: (value) => void;
+    export let suggestions: string[] = [];
+    export let suggestionsDiv;
+</script>
+
+<div id={suggestionId} class="suggestions"
+    style="display: {(suggestions.length == 0 || hide) ? " none" : "block"};"
+    bind:this={suggestionsDiv}>
+    <ul>
+    {#each suggestions as suggestion}
+        <p on:click={() => onSelect(suggestion)}>{suggestion}</p>
+    {/each}
+    </ul>
+</div>
+<style>
+    .suggestions {
+        position: absolute;
+        z-index: 1;
+        background-color: #f1f1f1;
+        width: 100%;
+        border: 1px solid #d3d3d3;
+    }
+
+    .suggestions ul {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .suggestions p {
+        padding-left: 10px;
+        text-decoration: none;
+        display: block;
+        cursor: pointer;
+    }
+</style>
diff --git a/frontend/dsl.ts b/frontend/dsl.ts
index 9c2778e..7713c5a 100644
--- a/frontend/dsl.ts
+++ b/frontend/dsl.ts
@@ -13,8 +13,8 @@ import type { QueryCstNode } from './generated/chevrotain_dts';
 // Comparison
 const eq = createToken({ name: 'EQUAL', pattern: /eq/, label: 'eq' });
 const ne = createToken({ name: 'NOT_EQUAL', pattern: /ne/, label: 'ne' });
-const eqSmb = createToken({ name: 'EQUAL_SMB', pattern: /==/, label: 'eq_smb' });
-const neSmb = createToken({ name: 'NOT_EQUAL_SMB', pattern: /!=/, label: 'ne_smb' });
+const eqSmb = createToken({ name: 'EQUAL_SMB', pattern: /==/, label: '==' });
+const neSmb = createToken({ name: 'NOT_EQUAL_SMB', pattern: /!=/, label: '!=' });
 
 // Boolean logic
 const and = createToken({ name: 'AND', pattern: /and/, label: 'and' });
@@ -24,24 +24,27 @@ const not = createToken({ name: 'NOT', pattern: /not/, label: 'not' });
 // Search and match operators
 const contains = createToken({ name: 'CONTAINS', pattern: /contains/, label: 'contains' });
 const matches = createToken({ name: 'MATCHES', pattern: /matches/, label: 'matches' });
-const matchesSmb = createToken({ name: 'MATCHES_SMB', pattern: /~/, label: 'matches_smb' });
+const matchesSmb = createToken({ name: 'MATCHES_SMB', pattern: /~/, label: '~' });
 
 // Literals
-const port = createToken({ name: 'PORT', pattern: /(?:0|[1-9]\d*)/ });
+const port = createToken({ name: 'PORT', pattern: /(?:0|[1-9]\d*)/, label: '<PORT>' });
 const ipv4 = createToken({
     name: 'IPV4',
     pattern:
         /([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])/,
+    label: '<IP>',
 });
 
-const ipSrc = createToken({ name: 'IP_SRC', pattern: /ip\.src/ });
-const ipDst = createToken({ name: 'IP_DST', pattern: /ip\.dst/ });
+const ipSrc = createToken({ name: 'IP_SRC', pattern: /ip\.src/, label: 'ip.src' });
+const ipDst = createToken({ name: 'IP_DST', pattern: /ip\.dst/, label: 'ip.dst' });
 
-const tcpPort = createToken({ name: 'TCP_PORT', pattern: /tcp\.port/ });
-const udpPort = createToken({ name: 'UDP_PORT', pattern: /udp\.port/ });
+const tcpPort = createToken({ name: 'TCP_PORT', pattern: /tcp\.port/, label: 'tcp.port' });
+const udpPort = createToken({ name: 'UDP_PORT', pattern: /udp\.port/, label: 'udp.port' });
 
-const payload = createToken({ name: 'PAYLOAD', pattern: /payload/ });
-const string = createToken({ name: 'STRING', pattern: /\"[a-zA-Z0-9]+\"/ });
+const payload = createToken({ name: 'PAYLOAD', pattern: /payload/, label: 'payload' });
+const string = createToken({ name: 'STRING', pattern: /\"[a-zA-Z0-9]+\"/, label: '"msg"' });
+
+const partial = createToken({ name: 'PARTIAL', pattern: /[a-zA-Z0-9]+|\?/, label: 'partial' });
 
 const whiteSpace = createToken({
     name: 'WhiteSpace',
@@ -74,6 +77,8 @@ let allTokens = [
 
     payload,
     string,
+
+    partial,
 ];
 
 let queryLexer = new Lexer(allTokens);
@@ -226,7 +231,7 @@ export const productions: Record<string, Rule> = parser.getGAstProductions();
 // create the HTML Text
 export const serializedGrammar = parser.getSerializedGastProductions();
 
-export function parseDSL(text: string): ParseResult {
+export function parseDSL(text: string, filterState = { suggestions: [], partialToken: null }): ParseResult {
     const lexResult = queryLexer.tokenize(text);
 
     if (lexResult.errors.length > 0) {
@@ -236,6 +241,30 @@ export function parseDSL(text: string): ParseResult {
         };
     }
     // setting a new input will RESET the parser instance's state.
+
+    const tokens = lexResult.tokens;
+    let lastToken;
+    let partialSuggestion = false;
+
+    if (tokens[tokens.length - 1].tokenType === partial) {
+        lastToken = tokens.pop();
+        partialSuggestion = true;
+    }
+
+    let suggestions = parser.computeContentAssist("query", tokens).map(nextToken => {
+        return nextToken.nextTokenType.LABEL;
+    });
+    console.log(suggestions);
+    console.log(lastToken);
+    if (partialSuggestion && lastToken.image !== '?') {
+        suggestions = suggestions.filter(suggestion => {
+            return suggestion.startsWith(lastToken.image);
+        });
+    }
+
+    filterState.suggestions = suggestions;
+    filterState.partialToken = partialSuggestion ? lastToken.image : null;
+
     parser.input = lexResult.tokens;
     // any top level rule may be used as an entry point
     const cst = parser.query();