Us10.1 filter panel new design

README.md

@@ -13,7 +13,7 @@ EiffelVis is a scalable Eiffel pipeline traffic visualization stack built on Rus
 
 The Eiffel Protocol consists of multiple [Eiffel Events](https://github.com/eiffel-community/eiffel/tree/master/eiffel-vocabulary) which each have a defined purpose and structure. In a typical CI pipeline which uses the Eiffel Protocol, there can be hundreds of events which are generated over a short time period. Visualizing large amounts of data such as thousands of Eiffel Events can be difficult, and that's where EiffelVis stands out. EiffelVis is a data visualization and data manipulation tool for Eiffel Events.
 
-# Useful Links:
+# Useful Links
 
 - [How to contribute](./CONTRIBUTING.md)
 - [Issue tracker](https://github.com/ItJustWorksTM/EiffelVis/issues)
@@ -33,21 +33,28 @@ These instructions are an example of how you may run EiffelVis locally.
 ## Installation
 
 1. Clone the repository using SSH (or HTTP)
+
    ```bash
    git clone git@github.com:ItJustWorksTM/EiffelVis.git
    ```
+
 2. After going to the root folder where the repository was cloned, install dependencies for the frontend
+
    ```bash
    cd EiffelVis/frontend
    npm install
    ```
+
 3. Compile and run the frontend
+
    ```bash
    npm run dev
    ```
+
 4. The frontend will now be running on port `localhost:8080`. If you go to this address in your browser, you should be able to view the EiffelVis client. As you will see, there are no events and there is no graph. To see events we need to set up the backend through which we will also load the graph data.
 
 5. As the client will be running in the current terminal, open a new terminal to run the backend. Go to the root directory of EiffelVis and run the commands
+
    ```bash
    cd EiffelVis/backend
    cargo run -- --help
@@ -77,14 +84,14 @@ Copyright © 2022, EiffelVis. EiffelVis is a product by ItJustWorks™.
 
 # Event Sender and testing instructions (for default rabbitmq configuration)
 
-1. start your rabbitmq server 
-  `rabbitmq server` or `brew services start rabbitmq` if you are using homebrew on mac. 
+1. start your rabbitmq server
+  `rabbitmq server` or `brew services start rabbitmq` if you are using homebrew on mac.
 2. If not activated, activate the management pluggin by running `rabbitmq-plugins enable rabbitmq_management`
 3. go to `http://localhost:15672`to enter the rabbitMQ management page. (default credentials are username & password: `guest`)
 4. go to the queue panel and create a new queue. The queue has to use the same name as the one you are going to use with the backend (default `hello`)
 5 go to the exchange panel and select `amq.fanout`in the list.
-6. Click on `Bindings`and add the binding of this exchange to the queue using the same name as step 3. 
+6. Click on `Bindings`and add the binding of this exchange to the queue using the same name as step 3.
 7. go into `EiffelVis/backend/tools/event_sender`and run the command `cargo run -- -r <any_routing_key>` (you can also add other options, run to `cargo run -- --help`for more info)
 8. go into `EiffelVis/backend`and run `cargo run`
 9. go into `EiffelVis/frontend`and run `npm run dev`
-10. open your browser to `localhost:8080`and you should have nodes coming and being displayed on the graph. 
+10. open your browser to `localhost:8080`and you should have nodes coming and being displayed on the graph.

frontend/package.json

@@ -34,7 +34,8 @@
     "postcss": "^8.4.4",
     "postcss-loader": "^6.2.1",
     "precss": "^4.0.0",
+    "prettier": "^2.8.1",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.0.12"
   }
-}
+}

frontend/src/App.svelte

@@ -9,11 +9,21 @@
     import { FullEvent, query_eq } from './apidefinition';
     import { deep_copy } from './utils';
     import config from './config.json';
-    import { empty_fixed_event_filters, FixedQuery, fixed_query_to_norm } from './uitypes';
+    import {
+        empty_fixed_event_filters,
+        FilterInput,
+        FilterType,
+        FixedQuery,
+        fixed_query_to_norm,
+        TemperateFilterArray,
+    } from './uitypes';
     import Settings from './components/settings/Settings.svelte';
 
     export let connection: EiffelVisConnection;
-
+    let event_filters_sets: TemperateFilterArray[] = [[]];
+    $: event_filters_sets;
+    let select_filter_set = 0;
+    $: select_filter_set;
     let graph_elem: G6Graph = null;
     let active_stream: QueryStream = null;
     let awaiting_query_request: boolean = false;
@@ -172,7 +182,14 @@
         graph_elem.updateTimeBar(show_timebar);
     };
 
-    const add_filter = () => {};
+    const add_filter_set = () => {
+        if (event_filters_sets) {
+            let empty_filter_set = [];
+            event_filters_sets.push(empty_filter_set);
+        } else {
+            event_filters_sets = [];
+        }
+    };
 
     // TODO: add loading for this
     const on_node_selected = async (e: any) => {
@@ -188,10 +205,34 @@
         current_query.range_filter = { begin: null, end: null };
 
         const filters = empty_fixed_event_filters();
-        filters.ids.pred.ids = [selected_node.meta.id];
+        filters.ids[0] = {
+            rev: false,
+            pred: { type: 'Id', ids: [selected_node.meta.id] },
+        };
         current_query.event_filters = [filters];
 
-        submit_state_query();
+        add_selected_node_as_root_to_filter();
+    };
+    const add_selected_node_as_root_to_filter = () => {
+        let new_filter = <FilterInput>{
+            active: true,
+            isWildCard: false,
+            exclude: false,
+            filterField: FilterType.ID,
+            value: selected_node.meta.id,
+        };
+        console.log(select_filter_set);
+        let target_filter_set = event_filters_sets[select_filter_set];
+        target_filter_set.forEach((filter, i) => {
+            if (filter.filterField == FilterType.ID) {
+                target_filter_set.splice(i, 1);
+                target_filter_set = [...target_filter_set];
+                console.log(target_filter_set);
+            }
+        });
+        console.log(target_filter_set);
+        target_filter_set = [...target_filter_set, new_filter];
+        event_filters_sets[select_filter_set] = target_filter_set;
     };
 
     const reset_graph_options = () => {
@@ -351,16 +392,18 @@
         <!-- panels  -->
         <Panel
             {show_filter_panel}
+            bind:event_filters_sets
             show_legend_placeholder={show_legend}
             {use_selected_as_root}
-            {current_query}
-            {current_query_changed}
-            {add_filter}
-            {qhistory}
-            {awaiting_query_request}
+            bind:current_query
+            bind:current_query_changed
+            {add_filter_set}
+            bind:qhistory
+            bind:awaiting_query_request
             submit_state_query_placeholder={submit_state_query}
             {selected_node}
             {styles}
+            bind:select_filter_set
         />
     </div>
     <div class="flex flex-col fixed z-0 items-center">
@@ -381,7 +424,7 @@
         class="flex flex-wrap content-center justify-center z-30 absolute w-screen h-screen pointer-events-none rounded-lg"
     >
         <div
-            class="pointer-events-auto rounded-lg w-3/6 min-w-min h-3/6 relative"
+            class="pointer-events-auto rounded-lg w-3/6 max-w-screen-sm min-w-min h-2/6 relative overflow-y-auto"
             class:hidden={!show_settings}
         >
             <Settings

frontend/src/apidefinition.ts

@@ -1,4 +1,7 @@
 /* eslint-disable camelcase */
+
+import type { TemperateFilterArray } from './uitypes';
+
 // Interally tagged type for types that are part of a enum
 type TypeTag<T, K> = K & { type: T };
 
@@ -78,7 +81,7 @@ export const event_filter_type_eq = (lhs: EventFilterType, rhs: EventFilterType)
     ((): boolean => {
         switch (lhs.type) {
             case 'Id':
-                return lhs.ids.every(val => (rhs as Id).ids.includes(val));
+                return lhs.ids.every(val => (rhs as Id).ids.every(rhs_val => val == rhs_val));
             case 'SourceHost':
                 return lhs.hosts.every(val =>
                     (rhs as SourceHost).hosts.every(rhs_val => string_compare_eq(val, rhs_val)),

frontend/src/components/FilterWidget.svelte

@@ -1,117 +1,55 @@
 <!-- svelte-ignore a11y-missing-attribute -->
 <script lang="ts">
-    import {
-        EventFilter,
-        Id,
-        SourceHost,
-        SourceName,
-        string_compare_default,
-        Tag,
-        Type,
-    } from '../apidefinition';
-
-    import LineInputList from './LineInputList.svelte';
-    import Input from './TextInput.svelte';
-
-    const filter_types: string[] = ['Id', 'Type', 'Source', 'Host', 'Tag'];
-    let active_filter: string = 'Id';
-
-    // TODO: Maybe just fixed filter?
-    export let ids: EventFilter<Id>;
-    export let tags: EventFilter<Tag>;
-    export let types: EventFilter<Type>;
-    export let sourcehosts: EventFilter<SourceHost>;
-    export let sourcenames: EventFilter<SourceName>;
+    import type { FilterInput, TemperateFilterArray } from "../uitypes";
+    import LineInputList from "./LineInputList.svelte";
+
+    const filter_types: string[] = ["ID", "Type", "Source", "Host", "Tag"];
+
+    let selected = filter_types[0];
+    let inputValue = "";
+    export let tempFilterArray: TemperateFilterArray = [];
+    const add_filter_to_TempFilterArray = () => {
+        let newFilter = <FilterInput>{
+            active: true,
+            isWildCard: false,
+            exclude: false,
+            filterField: selected,
+            value: inputValue,
+        };
+        tempFilterArray = [...tempFilterArray, newFilter];
+        inputValue = "";
+    };
 </script>
 
-<div class="w-full h-full flex flex-col">
-    <div class="tabs tabs-boxed">
+<div class="w-full h-auto">
+    <LineInputList bind:values={tempFilterArray} />
+    <select class="select select-primary" bind:value={selected}>
         {#each filter_types as type}
-            <a
-                class="tab"
-                class:tab-active={active_filter == type}
-                on:click={() => (active_filter = type)}>{type}</a
-            >
+            <option>{type}</option>
         {/each}
-    </div>
-    <div class:hidden={active_filter != 'Id'}>
-        <label class="cursor-pointer label" class:hidden={ids.pred.ids.length == 0}>
-            <span class="label-text">Reversed</span>
-            <input type="checkbox" class="toggle toggle-primary" bind:checked={ids.rev} />
-        </label>
-        <LineInputList bind:values={ids.pred.ids} let:index={i}>
-            <Input placeholder={'uuid'} bind:value={ids.pred.ids[i]} />
-        </LineInputList>
-        <button class="btn btn-xs w-full" on:click={() => (ids.pred.ids = [...ids.pred.ids, ''])}
-            >+</button
-        >
-    </div>
-
-    <div class:hidden={active_filter != 'Type'}>
-        <label class="cursor-pointer label" class:hidden={types.pred.names.length == 0}>
-            <span class="label-text">Reversed</span>
-            <input type="checkbox" class="toggle toggle-primary" bind:checked={types.rev} />
-        </label>
-        <LineInputList bind:values={types.pred.names} let:index={i}>
-            <Input placeholder={'type name'} bind:value={types.pred.names[i].value} />
-        </LineInputList>
-        <button
-            class="btn btn-xs w-full"
-            on:click={() => (types.pred.names = [...types.pred.names, string_compare_default()])}
-            >+</button
-        >
-    </div>
-
-    <div class:hidden={active_filter != 'Source'}>
-        <label class="cursor-pointer label" class:hidden={sourcenames.pred.names.length == 0}>
-            <span class="label-text">Reversed</span>
-            <input type="checkbox" class="toggle toggle-primary" bind:checked={sourcenames.rev} />
-        </label>
-        <LineInputList bind:values={sourcenames.pred.names} let:index={i}>
-            <Input placeholder={'source name'} bind:value={sourcenames.pred.names[i].value} />
-        </LineInputList>
-        <button
-            class="btn btn-xs w-full"
-            on:click={() =>
-                (sourcenames.pred.names = [...sourcenames.pred.names, string_compare_default()])}
-            >+</button
-        >
-    </div>
-
-    <div class:hidden={active_filter != 'Host'}>
-        <label class="cursor-pointer label" class:hidden={sourcehosts.pred.hosts.length == 0}>
-            <span class="label-text">Reversed</span>
-            <input type="checkbox" class="toggle toggle-primary" bind:checked={sourcehosts.rev} />
-        </label>
-        <LineInputList values={sourcehosts.pred.hosts} let:index={i}>
-            <Input placeholder={'host name'} bind:value={sourcehosts.pred.hosts[i].value} />
-        </LineInputList>
-        <button
-            class="btn btn-xs w-full"
-            on:click={() =>
-                (sourcehosts.pred.hosts = [...sourcehosts.pred.hosts, string_compare_default()])}
-            >+</button
-        >
-    </div>
-
-    <div class:hidden={active_filter != 'Tag'}>
-        <label class="cursor-pointer label" class:hidden={tags.pred.tags.length == 0}>
-            <span class="label-text">Reversed</span>
-            <input type="checkbox" class="toggle toggle-primary" bind:checked={tags.rev} />
-        </label>
-        <LineInputList bind:values={tags.pred.tags} let:index={i}>
-            <Input placeholder={'tag name'} bind:value={tags.pred.tags[i].value} />
-        </LineInputList>
-        <button
-            class="btn btn-xs w-full"
-            on:click={() => (tags.pred.tags = [...tags.pred.tags, string_compare_default()])}
-            >+</button
-        >
-    </div>
+    </select>
+    <input
+        type="text"
+        placeholder={selected}
+        bind:value={inputValue}
+        class="input input-sm input-bordered basis-2/3 h-8"
+    />
+    <button
+        class="btn btn-xs"
+        on:click={() => add_filter_to_TempFilterArray()}
+        disabled={inputValue == ""}>+</button
+    >
 </div>
 
 <style lang="postcss" global>
     .hidden {
         display: none;
     }
+    .select.select-primary {
+        min-height: 2rem;
+        padding-left: 0.6rem;
+        padding-right: 1.7rem;
+        margin-right: 0.5rem;
+        height: 2rem;
+    }
 </style>