Fix/247 global filter UI

config.js

@@ -438,10 +438,28 @@
         },
 
         /**
-         * Enable global filters for ALL telemetry requests that support the filter
+         * Enable global filters for ALL telemetry requests that support the filter. 
+         * Telemetry filters modify the 'filter' field in queries to MCWS. 
          * 
+         * key property is required and other options are optional
+         * globalFilters: array, optional - list of global filters to configure. 
+         * * key: string, required. Filter column, e.g. vcid
+         * * name: string, required. Identifier of the filter in the selection window. 
+         * * icon: 'icon-flag', string, icon. Not implemented - potentially icon for minimized filter list. 
+         * * filter: object, required. Filter object to implement 
+         * * * comparator: string, required. currently supports 'equals'
+         * * * singleSelectionThreshold: boolean, required. currently supports true only. 
+         * * * defaultLabel: string, optional. Defaults to 'None'. Label to show if filter inactive.  
+         * * * possibleValues: array, required. List of values and labels for filter. 
+         * * * * label: string, required. Label to show in filter selection dropdown. 
+         * * * * value: string, required. value to set parameter to in filtered query. 
          * How to use:
-         * The global filters will be available from the Global Filters indicator
+         * The global filters will be available from the Global Filters indicator. 
+         * Enable a filter by selecting the desired filter from the dropdown and hitting update. 
+         * Outgoing requests that use the 'filter' parameter to MCWS will be modified with your filter. 
+         * example below, selecting 'A side' will ensure that the filter parameter in mcws includes: 
+         * vcid='1,2,3'. Note that poorly formatted filters may not pass MCWS API validation. 
+         *  
         */
         /*
         globalFilters: [
@@ -452,6 +470,7 @@
             filter: {
               comparator: 'equals',
               singleSelectionThreshold: true,
+              defaultLabel: "A & B",
               possibleValues: [
                 {
                   label: 'A Side',
@@ -470,6 +489,7 @@
             filter: {
               comparator: 'equals',
               singleSelectionThreshold: true,
+              defaultLabel: "REC & RLT",
               possibleValues: [
                 {
                   label: 'Realtime',

src/globalFilters/FilterField.vue

@@ -10,8 +10,8 @@
             name="setSelectionThreshold"
             @change="updateFilterValueFromDropdown($event, filter.comparator, $event.target.value)"
           >
-            <option key="NONE" value="NONE">
-              None
+           <option value="NONE">
+            {{ defaultLabel }}
             </option>
             <option
               v-for="option in filter.possibleValues"
@@ -53,6 +53,9 @@ export default {
   computed: {
     name() {
       return this.filterName || this.filterKey;
+    },
+    defaultLabel(){
+      return this.filter.defaultLabel ?? 'None';
     }
   },
   data() {

src/globalFilters/GlobalFilterSelector.vue

@@ -34,10 +34,12 @@
       </button>
     </div>
   </div>
+
 </template>
 
 <script>
 import FilterField from './FilterField.vue';
+import { toRaw } from 'vue';
 
 export default {
   inject: [
@@ -68,8 +70,8 @@ export default {
     };
   },
   mounted() {
-    this.updatedFilters = structuredClone(this.activeFilters);
 
+    this.updatedFilters = structuredClone(toRaw(this.activeFilters));
     this.openOverlay();
   },
   methods: {
@@ -84,7 +86,7 @@ export default {
       this.updatedFilters[key][comparator] = value;
     },
     updateFilters() {
-      this.$emit('update-filters', this.updatedFilters);
+      this.$emit('update-filters', toRaw(this.updatedFilters));
 
       this.closeOverlay();
     },
@@ -94,7 +96,7 @@ export default {
     openOverlay() {
       this.overlay = this.openmct.overlays.overlay({
         element: this.$el,
-        size: 'small',
+        size: 'fit',
         dismissable: true,
         onDestroy: () => {
           this.$emit('close-filter-selector');

src/services/filtering/FilterService.js

@@ -1,8 +1,6 @@
 import { EventEmitter } from 'eventemitter3';
 import FilterURLHandler from './FilterUrlHandler';
-import isEqual from 'lodash/isequal';
-import pickBy from 'lodash/pickby';
-import isEmpty from 'lodash/isempty';
+import { isEqual, pickBy, isEmpty } from 'lodash';
 
 class FilterService extends EventEmitter {
   constructor(openmct, config) {

src/services/filtering/FilterUrlHandler.js

@@ -1,5 +1,4 @@
-import isEqual from 'lodash/isequal';
-import isEmpty from 'lodash/isempty';
+import { isEqual, isEmpty } from 'lodash';
 
 const GLOBAL_FILTER_PARAM_PREFIX = "global_filter_"