From 72a5f66bc6806d6703cbbb0c3fa7c67244d60778 Mon Sep 17 00:00:00 2001
From: Neeli Katti <neeli.katti@diamond.ac.uk>
Date: Thu, 21 Sep 2023 17:05:01 +0100
Subject: [PATCH 01/11] adding multiple input component with dialogue box

---
 .../app/components/multi-input-dialogue.vue   | 129 ++++++++++++++++++
 .../src/js/modules/summary/views/summary.vue  | 125 +++++++++++++----
 2 files changed, 229 insertions(+), 25 deletions(-)
 create mode 100644 client/src/js/app/components/multi-input-dialogue.vue

diff --git a/client/src/js/app/components/multi-input-dialogue.vue b/client/src/js/app/components/multi-input-dialogue.vue
new file mode 100644
index 000000000..0312acce2
--- /dev/null
+++ b/client/src/js/app/components/multi-input-dialogue.vue
@@ -0,0 +1,129 @@
+<template>
+    <div class="tw-relative tw-max-w-sm tw-mx-auto tw-text-xs">
+        <div ref="myElement" class="tw-bg-white tw-rounded-md tw-p-2 tw-flex gap-1 tw-flex-wrap" 
+        @click="$refs.search_input.focus()">
+            <div v-for="(name, id) in selected" :key="id">
+                <div class="tw-bg-blue-200 tw-rounded-md tw-flex items-center">
+                    <div class="tw-p-2"> {{ name }}</div>
+                    <div @click="remove(id)"
+                        class="tw-p-2 tw-select-none tw-rounded-r-md tw-cursor-pointer hover:tw-bg-magma-orange-clear">
+                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M12.5745 1L1 12.5745" stroke="#FEAD69" stroke-width="2" stroke-linecap="round"/>
+                            <path d="M1.00024 1L12.5747 12.5745" stroke="#FEAD69" stroke-width="2" stroke-linecap="round"/>
+                        </svg>
+                    </div>
+                </div>
+            </div>
+            <div class="tw-flex-1">
+                <input type="text" v-model="search" ref="search_input"
+                @click="openDialog" placeholder="Search"
+                    class="tw-w-full tw-border-0 focus:tw-border-0 focus:tw-outline-none focus:tw-ring-0 tw-py-1 tw-px-0">
+                
+                    <dialog-modal
+                        class="tw-w-full"
+                        v-if="showDialog"
+                        :show-dialog="showDialog"
+                        :title="title"
+                        @cancel="showDialog = false"
+                        >
+                        <slot name="dialog-content"></slot>
+                    </dialog-modal>
+                
+                    <!-- <div v-show="showSelector" class="tw-absolute tw-left-0 tw-bg-white tw-z-30 tw-w-full tw-rounded-b-md tw-font-medium">
+                    <div class="tw-p-2 tw-space-y-1">
+                        <div v-for="(name, id) in options" :key="id">
+                            <div>
+                                <template v-if="!selected[id]">
+                                    <div @click="select(id, name)"
+                                        class="tw-bg-blue-200 tw-border-2 tw-border-blue-200 tw-cursor-pointer tw-rounded-md tw-p-2 hover:tw-border-light-blue-1"
+                                        >{{ name }}</div>
+                                </template>
+                            </div>
+                        </div>
+                        <div v-if="options.length === 0">
+                            <div class="tw-text-gray-500">
+                                No result
+                            </div>
+                        </div>
+                    </div>
+                </div> -->
+            </div>
+        </div>
+
+    </div>
+
+</template>
+
+<script>
+import DialogModal from 'app/components/dialog-modal.vue'
+
+export default {
+    name: 'multi-input-dia',
+    props: {
+        multInputSelected: {},
+    },
+    components: {
+        'dialog-modal': DialogModal,
+    },
+    data() {
+        return {
+        search: '',
+        showSelector: false,
+        inputContent: '',
+        selected: {...this.multInputSelected},
+        debounceTimeout: null,
+        showDialog: false,
+        }
+    },
+    mounted() {
+        document.addEventListener('click', this.handleClickOutside);
+    },
+    beforeDestroy() {
+        document.removeEventListener('click', this.handleClickOutside);
+    },
+    methods: {
+        updateInput(event) {
+            clearTimeout(this.debounceTimeout);
+
+            this.debounceTimeout = setTimeout(() => {
+                this.inputContent = event.target.value;
+                this.goSearch();
+            }, 300);  // 300ms debounce time
+        },
+        handleClickOutside(event) {
+            if (this.$refs.myElement && !this.$refs.myElement.contains(event.target)) {
+            // Clicked outside the element
+            console.log('Clicked outside!');
+            this.showSelector = false;
+            }
+        },
+        clearOpts() {
+                this.search = '';
+                this.showSelector = false;
+                this.options = []
+            },
+        remove(id) {
+            console.log('trying to delete', this.selected[id]);
+            this.$delete(this.selected, id); // Vue's method to ensure reactivity
+            this.$emit('selected-changed', this.selected);
+        },
+        goSearch() {
+            if (this.search) {
+                this.showSelector = true;
+            } else {
+                this.showSelector = false;
+            }
+            console.log(this.options)
+        },
+        openDialog() {
+            this.showDialog = true;
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
+
+    
diff --git a/client/src/js/modules/summary/views/summary.vue b/client/src/js/modules/summary/views/summary.vue
index e57f83fed..c52f0e85d 100644
--- a/client/src/js/modules/summary/views/summary.vue
+++ b/client/src/js/modules/summary/views/summary.vue
@@ -9,15 +9,6 @@
             
         </div>
 
-        <!-- <div style="position:relative;border:1px solid blue;">
-            <div style="height: 100px; width: 100px; background: red; overflow: auto;">
-                if there is some really long content here, it will cause overflow, but the green box will not
-                <div style="position:absolute; z-index:1; left: 20px; top:0; height: 200px; width: 200px; background: green;">
-                </div>
-            </div>
-        </div> -->
-
-
         <div>
             <i class="tooltip fa fa-info-circle" aria-hidden="true">
                 <span class="tooltiptext">Use the Advanced Filter Search bar to filter your values</span>
@@ -76,7 +67,60 @@
                         <div class="filter-options-grid tw-col-span-3 ">
 
                                 <div class="tw-flex" v-for="(value, index) in filters.slice(2)" :key="value.id">
-                                    <combo-box
+                                    <multi-input-dia 
+                                        :multInputSelected="multInputSelected"
+                                        @selected-changed="updateSelected"
+                                    > {{ index }}
+                                    <template v-slot:dialog-content>
+                                        <div class="">
+                                            <combo-box
+                                                v-if="value.title!='Proposal'"
+                                                    class="combo-box t-mr-1 tw-text-black"
+                                                    :data="summaryParameters"
+                                                    textField="title"
+                                                    valueField="valueField"
+                                                    size="small"
+                                                    :can-create-new-item="false"
+                                                    v-model="value.selected"
+                                                    :defaultText="value.title"
+                                            ></combo-box>
+
+                                            <combo-box v-if="value.inputtype == 'combo-box' & value.title != 'Proposal'"
+                                                class="combo-box-description tw-my-5"
+                                                :data="value.data"
+                                                :textField="value.textField"
+                                                :valueField="value.valueField"
+                                                size="small"
+                                                :can-create-new-item="false"
+                                                v-model="value.selected"
+                                                defaultText='Select Multiple'
+                                                :multiple="true"
+                                                :valueArray="value.selectedArr"
+                                                :searchArray="value.selectedArr"
+                                            ></combo-box>
+
+                                            <combo-box v-if="value.inputtype == 'search-operands'"
+                                                class="combo-box-description tw-my-5"
+                                                :data="operands"
+                                                textField="title"
+                                                valueField="value"
+                                                size="small"
+                                                :can-create-new-item="false"
+                                                v-model="value.operand"
+                                                defaultText='Select Operand'
+                                                ></combo-box>
+
+                                            <input  v-if="value.inputtype == 'search-operands'"
+                                                v-model="value.value"
+                                                class="input-description tw-mb-4"
+                                                placeholder="Enter Value"
+                                            >
+                                        </div>
+                                    </template>
+                                </multi-input-dia>
+                                <button v-if="value.textField != 'PROP'" v-on:click="popArr(filters, index+1)" 
+                                    class="fa fa-times-circle tw-text-red-600 tw-ml-2 tw-mb-3"></button>
+                                    <!-- <combo-box
                                     v-if="value.title!='Proposal'"
                                     class="combo-box tw-w-7/12 t-mr-1 tw-text-black"
                                     :data="summaryParameters"
@@ -88,11 +132,43 @@
                                     :defaultText="value.title"
                                     ></combo-box>
 
+                                    <combo-box v-if="value.inputtype == 'combo-box' & value.title != 'Proposal'"
+                                    class="combo-box-description tw-px-4 tw-my-5"
+                                    :data="value.data"
+                                    :textField="value.textField"
+                                    :valueField="value.valueField"
+                                    size="small"
+                                    :can-create-new-item="false"
+                                    v-model="value.selected"
+                                    defaultText='Select Multiple'
+                                    :multiple="true"
+                                    :valueArray="value.selectedArr"
+                                    :searchArray="value.selectedArr"
+                                    ></combo-box>
+
+                                    <combo-box v-if="value.inputtype == 'search-operands'"
+                                    class="combo-box-description tw-px-4 tw-my-5"
+                                    :data="operands"
+                                    textField="title"
+                                    valueField="value"
+                                    size="small"
+                                    :can-create-new-item="false"
+                                    v-model="value.operand"
+                                    defaultText='Select Operand'
+                                    ></combo-box>
+
+                                    <input  v-if="value.inputtype == 'search-operands'"
+                                    v-model="value.value"
+                                    class="input-description tw-mb-4 tw-mx-4"
+                                    placeholder="Enter Value"
+                                    >
+
                                     <div class="param-options-wrapper">
                                         <div class="param-options-tooltip">
                                             Add Values
                                             <div class="param-preview">
-                                                <combo-box v-if="value.inputtype == 'combo-box' & value.title != 'Proposal'"
+                                            
+                                            <combo-box v-if="value.inputtype == 'combo-box' & value.title != 'Proposal'"
                                             class="combo-box-description tw-px-4 tw-my-5"
                                             :data="value.data"
                                             :textField="value.textField"
@@ -128,7 +204,7 @@
                                         <button v-if="value.textField != 'PROP'" v-on:click="popArr(filters, index+1)" 
                                             class="fa fa-times-circle tw-text-red-600 tw-ml-2 tw-mb-3"></button>
 
-                                    </div>
+                                    </div> -->
 
 
                                     <!-- <i class="tooltip tooltip-position-relative fa fa-ellipsis-v tw-ml-1 tw-text-base tw-my-2" aria-hidden="true">
@@ -435,8 +511,7 @@
         @page-changed="handlePageChange"
         />
 
-  
-    
+
 
 
     </div>
@@ -460,6 +535,7 @@ import CustomTableRow from 'app/components/custom-table-row.vue'
 import ComboBox from 'app/components/combo-box.vue'
 import DialogModal from 'app/components/dialog-modal.vue'
 import ExpandableSidebar from 'app/components/expandable-sidebar.vue'
+import MultiInputDialogue from 'app/components/multi-input-dialogue.vue'
 
 import { popArr, convertToCSV, exportCSV } from 'modules/summary/utils/utils.js'
 
@@ -475,7 +551,8 @@ export default {
     'expandable-sidebar': ExpandableSidebar,
     'dialog-modal': DialogModal,
     'base-input-select': BaseInputSelect,
-    'base-input-text' : BaseInputText
+    'base-input-text' : BaseInputText,
+    'multi-input-dia' : MultiInputDialogue
     },
     props: {
 
@@ -489,6 +566,7 @@ export default {
             isOpen: true,
             isSelectAll: true,
             showFavourites: false,
+            showDialog: true,
             totalRecords:  10,
             pageSize: 15,
             currentPage: 1,
@@ -502,6 +580,7 @@ export default {
             beamLines: [],
             searchedSamplePrefix: [],
             selectedColumns: [],
+            multInputSelected: {1:'Chris'},
             operands: [
                 {   
                     "title": "greater than",
@@ -1286,14 +1365,10 @@ export default {
                 this.$refs.iframeref[index].setAttribute('src', src)
 
             }
-
+        },
+        updateSelected(newSelected) {
+            this.multInputSelected = newSelected;
         }
-
-
-
-    },
-    computed: {
-
     },
     watch: {
         windowWidth: {
@@ -1359,8 +1434,8 @@ export default {
 
     .combo-box {
         font-size: small;
-        position: absolute;
-        width: 15%
+        position: relative;
+        width: 200px;
     }
 
     .combo-box-description {
@@ -1369,7 +1444,7 @@ export default {
     }
 
     .input-description {
-        width: 170px;
+        width: 200px;
         font-size: small;
     }
 

From 22714c1738112c86a977272c43b7ff0b3ca81f80 Mon Sep 17 00:00:00 2001
From: Neeli Katti <neeli.katti@diamond.ac.uk>
Date: Mon, 25 Sep 2023 11:41:36 +0100
Subject: [PATCH 02/11] removed remove function and filter structure

---
 client/src/js/app/components/combo-box.vue    |   7 +-
 .../app/components/multi-input-dialogue.vue   |  71 ++--
 .../js/modules/summary/styles/_summary.scss   |  14 +-
 .../src/js/modules/summary/views/summary.vue  | 311 +++++++-----------
 4 files changed, 146 insertions(+), 257 deletions(-)

diff --git a/client/src/js/app/components/combo-box.vue b/client/src/js/app/components/combo-box.vue
index 01004048b..588824452 100644
--- a/client/src/js/app/components/combo-box.vue
+++ b/client/src/js/app/components/combo-box.vue
@@ -434,9 +434,6 @@ export default {
   @apply tw-bg-white tw-h-8 tw-rounded tw-border tw-border-content-dark-background tw-flex tw-items-center tw-cursor-pointer
 }
 
-.select-selected-multiple {
-  @apply tw-bg-white tw-h-8 tw-rounded tw-border tw-border-content-dark-background tw-flex tw-items-center tw-cursor-pointer
-}
 .select-selected.disabled {
   @apply tw-bg-content-page-background
 }
@@ -522,6 +519,8 @@ export default {
 .item-multiple-selected {
   @apply tw-bg-content-active tw-text-white;
 }
+
+
 .select-search-input.small {
   @apply tw-h-8;
 }
@@ -531,7 +530,7 @@ export default {
 
 .pill-input {
   white-space: nowrap;
-  @apply tw-rounded-full tw-h-6 tw-max-w-xs tw-ml-1 tw-px-2 tw-py-1 tw-bg-content-active tw-text-sm
+  @apply tw-rounded-md tw-h-6 tw-max-w-xs tw-ml-1 tw-px-2 tw-py-1 tw-bg-gray-300 tw-text-sm
 }
 
 ::-webkit-scrollbar {
diff --git a/client/src/js/app/components/multi-input-dialogue.vue b/client/src/js/app/components/multi-input-dialogue.vue
index 0312acce2..92f4167d5 100644
--- a/client/src/js/app/components/multi-input-dialogue.vue
+++ b/client/src/js/app/components/multi-input-dialogue.vue
@@ -1,17 +1,10 @@
 <template>
-    <div class="tw-relative tw-max-w-sm tw-mx-auto tw-text-xs">
+    <div class="tw-relative tw-w-auto tw-text-xs">
         <div ref="myElement" class="tw-bg-white tw-rounded-md tw-p-2 tw-flex gap-1 tw-flex-wrap" 
         @click="$refs.search_input.focus()">
             <div v-for="(name, id) in selected" :key="id">
-                <div class="tw-bg-blue-200 tw-rounded-md tw-flex items-center">
+                <div v-if="name" class="tw-bg-gray-300 tw-h-8 tw-m-1 tw-rounded-md tw-flex tw-items-center">
                     <div class="tw-p-2"> {{ name }}</div>
-                    <div @click="remove(id)"
-                        class="tw-p-2 tw-select-none tw-rounded-r-md tw-cursor-pointer hover:tw-bg-magma-orange-clear">
-                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M12.5745 1L1 12.5745" stroke="#FEAD69" stroke-width="2" stroke-linecap="round"/>
-                            <path d="M1.00024 1L12.5747 12.5745" stroke="#FEAD69" stroke-width="2" stroke-linecap="round"/>
-                        </svg>
-                    </div>
                 </div>
             </div>
             <div class="tw-flex-1">
@@ -26,27 +19,8 @@
                         :title="title"
                         @cancel="showDialog = false"
                         >
-                        <slot name="dialog-content"></slot>
+                        <slot></slot>
                     </dialog-modal>
-                
-                    <!-- <div v-show="showSelector" class="tw-absolute tw-left-0 tw-bg-white tw-z-30 tw-w-full tw-rounded-b-md tw-font-medium">
-                    <div class="tw-p-2 tw-space-y-1">
-                        <div v-for="(name, id) in options" :key="id">
-                            <div>
-                                <template v-if="!selected[id]">
-                                    <div @click="select(id, name)"
-                                        class="tw-bg-blue-200 tw-border-2 tw-border-blue-200 tw-cursor-pointer tw-rounded-md tw-p-2 hover:tw-border-light-blue-1"
-                                        >{{ name }}</div>
-                                </template>
-                            </div>
-                        </div>
-                        <div v-if="options.length === 0">
-                            <div class="tw-text-gray-500">
-                                No result
-                            </div>
-                        </div>
-                    </div>
-                </div> -->
             </div>
         </div>
 
@@ -60,7 +34,8 @@ import DialogModal from 'app/components/dialog-modal.vue'
 export default {
     name: 'multi-input-dia',
     props: {
-        multInputSelected: {},
+        multInputSelected: Object,
+        index: Number
     },
     components: {
         'dialog-modal': DialogModal,
@@ -70,7 +45,7 @@ export default {
         search: '',
         showSelector: false,
         inputContent: '',
-        selected: {...this.multInputSelected},
+        selected: this.multInputSelected,
         debounceTimeout: null,
         showDialog: false,
         }
@@ -82,14 +57,6 @@ export default {
         document.removeEventListener('click', this.handleClickOutside);
     },
     methods: {
-        updateInput(event) {
-            clearTimeout(this.debounceTimeout);
-
-            this.debounceTimeout = setTimeout(() => {
-                this.inputContent = event.target.value;
-                this.goSearch();
-            }, 300);  // 300ms debounce time
-        },
         handleClickOutside(event) {
             if (this.$refs.myElement && !this.$refs.myElement.contains(event.target)) {
             // Clicked outside the element
@@ -102,27 +69,27 @@ export default {
                 this.showSelector = false;
                 this.options = []
             },
-        remove(id) {
-            console.log('trying to delete', this.selected[id]);
-            this.$delete(this.selected, id); // Vue's method to ensure reactivity
-            this.$emit('selected-changed', this.selected);
-        },
-        goSearch() {
-            if (this.search) {
-                this.showSelector = true;
-            } else {
-                this.showSelector = false;
-            }
-            console.log(this.options)
-        },
         openDialog() {
             this.showDialog = true;
         }
+    },
+    watch: {
+        multInputSelected: {
+            handler(newValue) {
+                this.selected = newValue;
+            },
+            deep: true
+        }
     }
+    
 }
 </script>
 
 <style scoped>
+    .pill-input {
+        white-space: nowrap;
+        @apply tw-rounded-full tw-h-6 tw-max-w-xs tw-ml-1 tw-px-2 tw-py-1 tw-bg-content-active tw-text-sm
+    }
 
 </style>
 
diff --git a/client/src/js/modules/summary/styles/_summary.scss b/client/src/js/modules/summary/styles/_summary.scss
index 884d4fca0..8f94fafdb 100644
--- a/client/src/js/modules/summary/styles/_summary.scss
+++ b/client/src/js/modules/summary/styles/_summary.scss
@@ -55,17 +55,15 @@
     @apply tw-text-content-active tw-text-content-active
 }
 
-.filter-grid {
-    @apply tw-grid tw-grid-rows-1 tw-grid-cols-4 tw-grid-flow-col 
-}
-
 .filter-options-grid {
-    @apply tw-grid tw-grid-rows-6 tw-grid-cols-3 tw-grid-flow-col tw-mb-2
+    @apply tw-flex tw-flex-wrap 
 }
 
-.format-options-grid {
-    @apply tw-grid tw-grid-rows-6 tw-grid-cols-1 tw-grid-flow-col tw-mb-2
-
+.flex-thirds {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-flow: row; /* this will make items flow vertically within columns */
+    gap: 1rem; /* for spacing between rows/columns, you can adjust this */
 }
 
 .select-column-button {
diff --git a/client/src/js/modules/summary/views/summary.vue b/client/src/js/modules/summary/views/summary.vue
index c52f0e85d..17164e9b7 100644
--- a/client/src/js/modules/summary/views/summary.vue
+++ b/client/src/js/modules/summary/views/summary.vue
@@ -63,205 +63,77 @@
                 </template>
 
                 <template v-slot:filter-bar-content>
-                    <div class="filter-grid tw-divide-x tw-divide-white">
-                        <div class="filter-options-grid tw-col-span-3 ">
-
-                                <div class="tw-flex" v-for="(value, index) in filters.slice(2)" :key="value.id">
-                                    <multi-input-dia 
-                                        :multInputSelected="multInputSelected"
-                                        @selected-changed="updateSelected"
-                                    > {{ index }}
-                                    <template v-slot:dialog-content>
-                                        <div class="">
-                                            <combo-box
-                                                v-if="value.title!='Proposal'"
-                                                    class="combo-box t-mr-1 tw-text-black"
-                                                    :data="summaryParameters"
-                                                    textField="title"
-                                                    valueField="valueField"
+                    <!-- <div class="filter-options-grid tw-space-x-4 tw-space-y-4"> -->
+                    <div class="flex-thirds">
+                        <div class="tw-m-2" v-for="(value, index) in filters.slice(2)" :key="value.id">
+                            <div class="tw-flex">
+                                        <multi-input-dia 
+                                            class="tw-w-full"
+                                            :mult-input-selected="multiInputDicts[index+2]"
+                                            @selected-changed-multiinput="handleSelectedChange"
+                                        > 
+                                        <template v-slot:default>
+                                            <div>
+                                                <combo-box
+                                                    v-if="value.title!='Proposal'"
+                                                        class="combo-box t-mr-1 tw-text-black"
+                                                        :data="summaryParameters"
+                                                        textField="title"
+                                                        valueField="valueField"
+                                                        size="small"
+                                                        :can-create-new-item="false"
+                                                        v-model="value.selected"
+                                                        :defaultText="value.title"
+                                                ></combo-box>
+
+                                                <combo-box v-if="value.inputtype == 'combo-box' & value.title != 'Proposal'"
+                                                    class="combo-box-description tw-my-5"
+                                                    :data="value.data"
+                                                    :textField="value.textField"
+                                                    :valueField="value.valueField"
                                                     size="small"
                                                     :can-create-new-item="false"
                                                     v-model="value.selected"
-                                                    :defaultText="value.title"
-                                            ></combo-box>
-
-                                            <combo-box v-if="value.inputtype == 'combo-box' & value.title != 'Proposal'"
-                                                class="combo-box-description tw-my-5"
-                                                :data="value.data"
-                                                :textField="value.textField"
-                                                :valueField="value.valueField"
-                                                size="small"
-                                                :can-create-new-item="false"
-                                                v-model="value.selected"
-                                                defaultText='Select Multiple'
-                                                :multiple="true"
-                                                :valueArray="value.selectedArr"
-                                                :searchArray="value.selectedArr"
-                                            ></combo-box>
-
-                                            <combo-box v-if="value.inputtype == 'search-operands'"
-                                                class="combo-box-description tw-my-5"
-                                                :data="operands"
-                                                textField="title"
-                                                valueField="value"
-                                                size="small"
-                                                :can-create-new-item="false"
-                                                v-model="value.operand"
-                                                defaultText='Select Operand'
+                                                    defaultText='Select Multiple'
+                                                    :multiple="true"
+                                                    :valueArray="value.selectedArr"
+                                                    :searchArray="value.selectedArr"
                                                 ></combo-box>
 
-                                            <input  v-if="value.inputtype == 'search-operands'"
-                                                v-model="value.value"
-                                                class="input-description tw-mb-4"
-                                                placeholder="Enter Value"
-                                            >
-                                        </div>
-                                    </template>
-                                </multi-input-dia>
-                                <button v-if="value.textField != 'PROP'" v-on:click="popArr(filters, index+1)" 
-                                    class="fa fa-times-circle tw-text-red-600 tw-ml-2 tw-mb-3"></button>
-                                    <!-- <combo-box
-                                    v-if="value.title!='Proposal'"
-                                    class="combo-box tw-w-7/12 t-mr-1 tw-text-black"
-                                    :data="summaryParameters"
-                                    textField="title"
-                                    valueField="valueField"
-                                    size="small"
-                                    :can-create-new-item="false"
-                                    v-model="value.selected"
-                                    :defaultText="value.title"
-                                    ></combo-box>
-
-                                    <combo-box v-if="value.inputtype == 'combo-box' & value.title != 'Proposal'"
-                                    class="combo-box-description tw-px-4 tw-my-5"
-                                    :data="value.data"
-                                    :textField="value.textField"
-                                    :valueField="value.valueField"
-                                    size="small"
-                                    :can-create-new-item="false"
-                                    v-model="value.selected"
-                                    defaultText='Select Multiple'
-                                    :multiple="true"
-                                    :valueArray="value.selectedArr"
-                                    :searchArray="value.selectedArr"
-                                    ></combo-box>
-
-                                    <combo-box v-if="value.inputtype == 'search-operands'"
-                                    class="combo-box-description tw-px-4 tw-my-5"
-                                    :data="operands"
-                                    textField="title"
-                                    valueField="value"
-                                    size="small"
-                                    :can-create-new-item="false"
-                                    v-model="value.operand"
-                                    defaultText='Select Operand'
-                                    ></combo-box>
-
-                                    <input  v-if="value.inputtype == 'search-operands'"
-                                    v-model="value.value"
-                                    class="input-description tw-mb-4 tw-mx-4"
-                                    placeholder="Enter Value"
-                                    >
-
-                                    <div class="param-options-wrapper">
-                                        <div class="param-options-tooltip">
-                                            Add Values
-                                            <div class="param-preview">
-                                            
-                                            <combo-box v-if="value.inputtype == 'combo-box' & value.title != 'Proposal'"
-                                            class="combo-box-description tw-px-4 tw-my-5"
-                                            :data="value.data"
-                                            :textField="value.textField"
-                                            :valueField="value.valueField"
-                                            size="small"
-                                            :can-create-new-item="false"
-                                            v-model="value.selected"
-                                            defaultText='Select Multiple'
-                                            :multiple="true"
-                                            :valueArray="value.selectedArr"
-                                            :searchArray="value.selectedArr"
-                                            ></combo-box>
-
-                                            <combo-box v-if="value.inputtype == 'search-operands'"
-                                            class="combo-box-description tw-px-4 tw-my-5"
-                                            :data="operands"
-                                            textField="title"
-                                            valueField="value"
-                                            size="small"
-                                            :can-create-new-item="false"
-                                            v-model="value.operand"
-                                            defaultText='Select Operand'
-                                            ></combo-box>
-
-                                            <input  v-if="value.inputtype == 'search-operands'"
-                                            v-model="value.value"
-                                            class="input-description tw-mb-4 tw-mx-4"
-                                            placeholder="Enter Value"
-                                            >
-                                                
+                                                <combo-box v-if="value.inputtype == 'search-operands'"
+                                                    class="combo-box-description tw-my-5"
+                                                    :data="operands"
+                                                    textField="title"
+                                                    valueField="value"
+                                                    size="small"
+                                                    :can-create-new-item="false"
+                                                    v-model="value.operand"
+                                                    defaultText='Select Operand'
+                                                    ></combo-box>
+
+                                                <input v-if="value.inputtype == 'search-operands'"
+                                                    v-model="value.value"
+                                                    class="input-description tw-mb-4"
+                                                    placeholder="Enter Value"
+                                                    @click.stop>
                                             </div>
-                                        </div>
-                                        <button v-if="value.textField != 'PROP'" v-on:click="popArr(filters, index+1)" 
-                                            class="fa fa-times-circle tw-text-red-600 tw-ml-2 tw-mb-3"></button>
-
-                                    </div> -->
-
-
-                                    <!-- <i class="tooltip tooltip-position-relative fa fa-ellipsis-v tw-ml-1 tw-text-base tw-my-2" aria-hidden="true">
-                                        <div class="description-options">
-  
-                                        </div>
-                                    </i> -->
-
-
-
-      
-                                    
-                                </div>
-                                <div class="button_plus tw-h-3 tw-mt-2" v-if="filters.length < 18" v-on:click="addFilterOption($event)">
-                                <i class="button-plus-icon fa fa-plus"></i>
+                                        </template>
+                                    </multi-input-dia>
+                                    <button v-if="value.textField != 'PROP'" v-on:click="popArr(filters, index+1)" 
+                                        class="fa fa-times-circle tw-text-red-600 tw-ml-2">
+                                    </button>
                                 </div>
-
-                                <i class="tooltip tooltip-position-absolute fa fa-info-circle tw-ml-6" v-if="filters.length < 3" aria-hidden="true">
-                                    <span class="tooltiptext">Click to add filter options</span>
-                                </i>
-
                         </div>
+                    </div>
+                    <div class="button_plus tw-h-3 tw-mt-2 tw-mb-3" v-if="filters.length < 18" v-on:click="addFilterOption($event)">
+                        <i class="button-plus-icon fa fa-plus"></i>
+                        <i class="tooltip tooltip-position-absolute fa fa-info-circle tw-ml-6" v-if="filters.length < 3" aria-hidden="true">
+                            <span class="tooltiptext">Click to add filter options</span>
+                         </i>
+                    </div>
 
-                        <!-- <div class="format-options-grid">
-
-
-                            <div class="tw-flex" v-for="value in format.slice(2)" :key="value.id">
-                                    <combo-box
-                                    v-if="value.title!='Proposal'"
-                                    class="combo-box tw-w-7/12 t-mx-2 tw-text-black"
-                                    :data="summaryParameters.slice(3)"
-                                    textField="title"
-                                    valueField="valueField"
-                                    size="small"
-                                    :can-create-new-item="false"
-                                    v-model="value.selected"
-                                    :defaultText="value.title"
-                                    ></combo-box>
-
-                                    <i class="tooltip fa fa-ellipsis-v tw-ml-1 tw-text-base tw-my-2" aria-hidden="true">
-                                        <div class="description-options">
-                                            <input type="range" min="0" max="100" step="1" v-model="value.maxColor">
-                                            <input v-model="value.maxColor" type="number" class="input" /> 
-                                        </div>
-                                    </i>
-
-                                    <button v-if="value.textField != 'PROP'" v-on:click="popFormat(index+1)" 
-                                            class="fa fa-times-circle tw-text-red-600 tw-ml-2"></button>
-                            </div>
-
-                            <div class="button_plus tw-h-3 tw-mt-2" v-if="format.length < 6" v-on:click="addFormatOption($event)">
-                            <i class="button-plus-icon fa fa-plus"></i>
-                            </div>
-                            
-                        </div> -->
+                <!-- </div> -->
 
-                    </div>
                     
 
                 </template>
@@ -580,7 +452,7 @@ export default {
             beamLines: [],
             searchedSamplePrefix: [],
             selectedColumns: [],
-            multInputSelected: {1:'Chris'},
+            multiInputDicts: [],
             operands: [
                 {   
                     "title": "greater than",
@@ -796,6 +668,7 @@ export default {
         this.addFormatOption()
         this.toggleSidebar()
         this.popSelectedColumns()
+        this.updateMultiInputDicts();
     },
     mounted() {
         window.onerror = (msg) => {
@@ -818,7 +691,8 @@ export default {
                 "operand": "",
                 "value": "",
                 "checked": true,
-                "data": [] };
+                "data": [],           
+             };
         })
         },
         addFilterOption(event) {
@@ -868,6 +742,41 @@ export default {
             } 
 
         },
+        createMultiInputDict(filterItem) {
+            let resultDict = {
+                selected: filterItem.selected,
+                operand: filterItem.operand,
+                value: filterItem.value
+            };
+
+            // Spread values from selectedArr into the result dictionary
+            filterItem.selectedArr.forEach((item, index) => {
+                resultDict[`selectedArr${index + 1}`] = item;
+            });
+
+            return resultDict;
+        },
+        updateMultiInputDicts() {
+            this.multiInputDicts = this.filters.map(filterItem => {
+                let resultDict = {
+                    selected: filterItem.title,
+                    operand: filterItem.operand,
+                    value: filterItem.value
+                };
+
+                // Spread values from selectedArr into the result dictionary
+                filterItem.selectedArr.forEach((item, index) => {
+                    // Check if the item is an object and has a property matching filterItem.valueField
+                    if (typeof item === 'object' && item[filterItem.valueField]) {
+                        resultDict[`selectedArr${index + 1}`] = item[filterItem.valueField];
+                    } else {
+                        resultDict[`selectedArr${index + 1}`] = item;
+                    }
+                });
+
+                return resultDict;
+            });
+        },
         async searchProposal() {
 
             // gets proposal list from proposal endpoint for combo box from proposal collection 
@@ -1366,8 +1275,19 @@ export default {
 
             }
         },
-        updateSelected(newSelected) {
-            this.multInputSelected = newSelected;
+        handleSelectedChange(eventPayload) {
+
+            console.log('Received payload:', eventPayload);
+
+            if (index !== undefined && index > -1) {
+            // Remove the item at that index
+            this.filters.splice(index, 1);
+
+            console.log('filters removed 2', this.filters)
+
+            // OR if you want to replace the value at that index with updatedSelected:
+            // this.$set(this.filters, index, updatedSelected);
+            }
         }
     },
     watch: {
@@ -1379,6 +1299,9 @@ export default {
         filters: {
             // if empty filter combo box is populated with a parameter, then populate the keys with values attributed to the selected parameter
             handler(val){
+
+                console.log('filters', this.filters)
+
                 for (var i in this.filters) {
 
                     let keyToCompare = this.filters[i].selected;
@@ -1395,6 +1318,8 @@ export default {
                         }
                     }
                 }
+
+                this.updateMultiInputDicts();
             },
             deep: true
         },

From 2c31065f912d17628e283adb865287af0e22f95f Mon Sep 17 00:00:00 2001
From: NKatti2011 <108797920+NKatti2011@users.noreply.github.com>
Date: Mon, 25 Sep 2023 16:28:21 +0100
Subject: [PATCH 03/11] Update client/src/js/modules/summary/views/summary.vue

Co-authored-by: Matthew Pritchard <46708056+MattPrit@users.noreply.github.com>
---
 client/src/js/modules/summary/views/summary.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/client/src/js/modules/summary/views/summary.vue b/client/src/js/modules/summary/views/summary.vue
index 17164e9b7..c140fa453 100644
--- a/client/src/js/modules/summary/views/summary.vue
+++ b/client/src/js/modules/summary/views/summary.vue
@@ -1299,9 +1299,6 @@ export default {
         filters: {
             // if empty filter combo box is populated with a parameter, then populate the keys with values attributed to the selected parameter
             handler(val){
-
-                console.log('filters', this.filters)
-
                 for (var i in this.filters) {
 
                     let keyToCompare = this.filters[i].selected;

From 77198d06fb74ee84580a07aa7850e6ea213a4a6d Mon Sep 17 00:00:00 2001
From: NKatti2011 <108797920+NKatti2011@users.noreply.github.com>
Date: Mon, 25 Sep 2023 16:28:38 +0100
Subject: [PATCH 04/11] Update
 client/src/js/app/components/multi-input-dialogue.vue

Co-authored-by: Matthew Pritchard <46708056+MattPrit@users.noreply.github.com>
---
 client/src/js/app/components/multi-input-dialogue.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/js/app/components/multi-input-dialogue.vue b/client/src/js/app/components/multi-input-dialogue.vue
index 92f4167d5..52a068967 100644
--- a/client/src/js/app/components/multi-input-dialogue.vue
+++ b/client/src/js/app/components/multi-input-dialogue.vue
@@ -46,7 +46,6 @@ export default {
         showSelector: false,
         inputContent: '',
         selected: this.multInputSelected,
-        debounceTimeout: null,
         showDialog: false,
         }
     },

From 5012c637f70a340f3310447227202122f15c2524 Mon Sep 17 00:00:00 2001
From: Neeli Katti <neeli.katti@diamond.ac.uk>
Date: Tue, 26 Sep 2023 10:39:44 +0100
Subject: [PATCH 05/11] remove handleclickoutside and clearopts

---
 .../src/js/app/components/multi-input-dialogue.vue   | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/client/src/js/app/components/multi-input-dialogue.vue b/client/src/js/app/components/multi-input-dialogue.vue
index 52a068967..e96b03c3d 100644
--- a/client/src/js/app/components/multi-input-dialogue.vue
+++ b/client/src/js/app/components/multi-input-dialogue.vue
@@ -56,18 +56,6 @@ export default {
         document.removeEventListener('click', this.handleClickOutside);
     },
     methods: {
-        handleClickOutside(event) {
-            if (this.$refs.myElement && !this.$refs.myElement.contains(event.target)) {
-            // Clicked outside the element
-            console.log('Clicked outside!');
-            this.showSelector = false;
-            }
-        },
-        clearOpts() {
-                this.search = '';
-                this.showSelector = false;
-                this.options = []
-            },
         openDialog() {
             this.showDialog = true;
         }

From e85ed192d1eb88098441ecb91695c379cc5e3b1d Mon Sep 17 00:00:00 2001
From: Neeli Katti <neeli.katti@diamond.ac.uk>
Date: Tue, 26 Sep 2023 10:45:30 +0100
Subject: [PATCH 06/11] remove test console.logs

---
 client/src/js/modules/summary/views/summary.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/client/src/js/modules/summary/views/summary.vue b/client/src/js/modules/summary/views/summary.vue
index c140fa453..2c83bdb47 100644
--- a/client/src/js/modules/summary/views/summary.vue
+++ b/client/src/js/modules/summary/views/summary.vue
@@ -1277,13 +1277,10 @@ export default {
         },
         handleSelectedChange(eventPayload) {
 
-            console.log('Received payload:', eventPayload);
-
             if (index !== undefined && index > -1) {
             // Remove the item at that index
             this.filters.splice(index, 1);
 
-            console.log('filters removed 2', this.filters)
 
             // OR if you want to replace the value at that index with updatedSelected:
             // this.$set(this.filters, index, updatedSelected);

From 217932a7079379724274800097b09025b3c4dba4 Mon Sep 17 00:00:00 2001
From: NKatti2011 <108797920+NKatti2011@users.noreply.github.com>
Date: Tue, 26 Sep 2023 10:45:48 +0100
Subject: [PATCH 07/11] Update
 client/src/js/app/components/multi-input-dialogue.vue

Co-authored-by: Matthew Pritchard <46708056+MattPrit@users.noreply.github.com>
---
 client/src/js/app/components/multi-input-dialogue.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/client/src/js/app/components/multi-input-dialogue.vue b/client/src/js/app/components/multi-input-dialogue.vue
index e96b03c3d..11f1cad03 100644
--- a/client/src/js/app/components/multi-input-dialogue.vue
+++ b/client/src/js/app/components/multi-input-dialogue.vue
@@ -42,9 +42,6 @@ export default {
     },
     data() {
         return {
-        search: '',
-        showSelector: false,
-        inputContent: '',
         selected: this.multInputSelected,
         showDialog: false,
         }

From 0af71d67d417acb4b4ba76f12b82ac8017004678 Mon Sep 17 00:00:00 2001
From: NKatti2011 <108797920+NKatti2011@users.noreply.github.com>
Date: Tue, 26 Sep 2023 10:47:20 +0100
Subject: [PATCH 08/11] Update client/src/js/modules/summary/views/summary.vue

Co-authored-by: Matthew Pritchard <46708056+MattPrit@users.noreply.github.com>
---
 client/src/js/modules/summary/views/summary.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/js/modules/summary/views/summary.vue b/client/src/js/modules/summary/views/summary.vue
index 2c83bdb47..dcd7b3c2f 100644
--- a/client/src/js/modules/summary/views/summary.vue
+++ b/client/src/js/modules/summary/views/summary.vue
@@ -438,7 +438,6 @@ export default {
             isOpen: true,
             isSelectAll: true,
             showFavourites: false,
-            showDialog: true,
             totalRecords:  10,
             pageSize: 15,
             currentPage: 1,

From cddc2ac6dd1a4f6337f2d2731f0f32b67d070406 Mon Sep 17 00:00:00 2001
From: Neeli Katti <neeli.katti@diamond.ac.uk>
Date: Tue, 26 Sep 2023 10:48:36 +0100
Subject: [PATCH 09/11] remove handleselectedchange

---
 client/src/js/modules/summary/views/summary.vue | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/client/src/js/modules/summary/views/summary.vue b/client/src/js/modules/summary/views/summary.vue
index 2c83bdb47..a69ce52ef 100644
--- a/client/src/js/modules/summary/views/summary.vue
+++ b/client/src/js/modules/summary/views/summary.vue
@@ -1275,17 +1275,6 @@ export default {
 
             }
         },
-        handleSelectedChange(eventPayload) {
-
-            if (index !== undefined && index > -1) {
-            // Remove the item at that index
-            this.filters.splice(index, 1);
-
-
-            // OR if you want to replace the value at that index with updatedSelected:
-            // this.$set(this.filters, index, updatedSelected);
-            }
-        }
     },
     watch: {
         windowWidth: {

From cec7295b27eb7c26c0c5661cea7142833f14d048 Mon Sep 17 00:00:00 2001
From: NKatti2011 <108797920+NKatti2011@users.noreply.github.com>
Date: Tue, 26 Sep 2023 10:49:11 +0100
Subject: [PATCH 10/11] Update client/src/js/modules/summary/views/summary.vue

Co-authored-by: Matthew Pritchard <46708056+MattPrit@users.noreply.github.com>
---
 client/src/js/modules/summary/views/summary.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/js/modules/summary/views/summary.vue b/client/src/js/modules/summary/views/summary.vue
index e69026ebb..74866392c 100644
--- a/client/src/js/modules/summary/views/summary.vue
+++ b/client/src/js/modules/summary/views/summary.vue
@@ -63,7 +63,6 @@
                 </template>
 
                 <template v-slot:filter-bar-content>
-                    <!-- <div class="filter-options-grid tw-space-x-4 tw-space-y-4"> -->
                     <div class="flex-thirds">
                         <div class="tw-m-2" v-for="(value, index) in filters.slice(2)" :key="value.id">
                             <div class="tw-flex">

From 1f94c916458d511d878dadf6467ae39581e5c02c Mon Sep 17 00:00:00 2001
From: Neeli Katti <neeli.katti@diamond.ac.uk>
Date: Tue, 26 Sep 2023 10:51:26 +0100
Subject: [PATCH 11/11] change input to be div

---
 client/src/js/app/components/multi-input-dialogue.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/js/app/components/multi-input-dialogue.vue b/client/src/js/app/components/multi-input-dialogue.vue
index 11f1cad03..d2f39be40 100644
--- a/client/src/js/app/components/multi-input-dialogue.vue
+++ b/client/src/js/app/components/multi-input-dialogue.vue
@@ -8,10 +8,10 @@
                 </div>
             </div>
             <div class="tw-flex-1">
-                <input type="text" v-model="search" ref="search_input"
+                <div type="text" ref="search_input"
                 @click="openDialog" placeholder="Search"
-                    class="tw-w-full tw-border-0 focus:tw-border-0 focus:tw-outline-none focus:tw-ring-0 tw-py-1 tw-px-0">
-                
+                    class="tw-w-full tw-h-8 tw-border-0 focus:tw-border-0 focus:tw-outline-none focus:tw-ring-0 tw-py-1 tw-px-0">
+            </div>
                     <dialog-modal
                         class="tw-w-full"
                         v-if="showDialog"