From 527043632d48722375f43a454b9a381d02de5331 Mon Sep 17 00:00:00 2001
From: Kaden Emley <kemley@mitre.org>
Date: Tue, 13 Aug 2024 12:09:42 -0400
Subject: [PATCH] re-adjust structure of sbom component filtering

Signed-off-by: Kaden Emley <kemley@mitre.org>
---
 .../cards/sbomview/ComponentContent.vue       |  32 +++-
 .../cards/sbomview/ComponentTable.vue         | 161 +++---------------
 .../cards/sbomview/DependencyTree.vue         |   9 +-
 .../cards/sbomview/SbomSettingsSelector.vue   | 100 +++++++++++
 apps/frontend/src/store/data_filters.ts       |  34 +++-
 apps/frontend/src/utilities/sbom_util.ts      |   5 +
 apps/frontend/src/views/Sbom.vue              | 118 +++++++++++--
 7 files changed, 286 insertions(+), 173 deletions(-)
 create mode 100644 apps/frontend/src/components/cards/sbomview/SbomSettingsSelector.vue

diff --git a/apps/frontend/src/components/cards/sbomview/ComponentContent.vue b/apps/frontend/src/components/cards/sbomview/ComponentContent.vue
index 02a02999f3..b1c25a2179 100644
--- a/apps/frontend/src/components/cards/sbomview/ComponentContent.vue
+++ b/apps/frontend/src/components/cards/sbomview/ComponentContent.vue
@@ -56,8 +56,32 @@
               <tr>
                 <td>Name</td>
                 <td>Description</td>
-                <td />
-                <td />
+                <td>
+                  <v-chip
+                    small
+                    outlined
+                    @click="
+                      $emit(
+                        'show-components-in-table',
+                        tab.relatedComponents.map((c) => c['bom-ref'])
+                      )
+                    "
+                    >View All</v-chip
+                  >
+                </td>
+                <td>
+                  <v-chip
+                    small
+                    outlined
+                    @click="
+                      $emit(
+                        'show-components-in-tree',
+                        tab.relatedComponents.map((c) => c['bom-ref'])
+                      )
+                    "
+                    >View All</v-chip
+                  >
+                </td>
               </tr>
             </thead>
             <tbody>
@@ -69,7 +93,7 @@
                     small
                     outlined
                     @click="
-                      $emit('show-component-in-table', component['bom-ref'])
+                      $emit('show-components-in-table', [component['bom-ref']])
                     "
                     >Go to Component Table</v-chip
                   >
@@ -79,7 +103,7 @@
                     small
                     outlined
                     @click="
-                      $emit('show-component-in-tree', component['bom-ref'])
+                      $emit('show-components-in-tree', [component['bom-ref']])
                     "
                     >Go to Dependency Tree</v-chip
                   >
diff --git a/apps/frontend/src/components/cards/sbomview/ComponentTable.vue b/apps/frontend/src/components/cards/sbomview/ComponentTable.vue
index afeb1393d6..43f9d7f097 100644
--- a/apps/frontend/src/components/cards/sbomview/ComponentTable.vue
+++ b/apps/frontend/src/components/cards/sbomview/ComponentTable.vue
@@ -6,7 +6,6 @@
         <v-data-table
           :items="components"
           :headers="headers"
-          :search="searchTerm"
           :expanded.sync="expanded"
           show-expand
           :items-per-page="-1"
@@ -16,61 +15,7 @@
           <!--           fixed-header
           height="calc(100vh - 250px)" -->
           <template #top>
-            <v-card-title>
-              Components
-              <v-spacer />
-
-              <!-- Table settings menu -->
-              <v-menu offset-y offset-overflow :close-on-content-click="false">
-                <template #activator="{on}">
-                  <v-btn fab small v-on="on">
-                    <v-icon> mdi-cog-outline </v-icon>
-                  </v-btn>
-                </template>
-                <v-card max-width="400" class="px-5">
-                  <v-card-title class="py-5">Column Select</v-card-title>
-                  <v-chip-group
-                    v-model="headerColumns"
-                    active-class="primary--text"
-                    center-active
-                    column
-                    multiple
-                  >
-                    <v-chip
-                      v-for="field in headerOptions"
-                      :key="field.key"
-                      :value="field.key"
-                    >
-                      {{ field.name }}
-                    </v-chip>
-                  </v-chip-group>
-                  <v-divider />
-                  <v-card-title class="py-2">Severity Filters</v-card-title>
-                  <v-chip-group
-                    v-model="severityFilter"
-                    active-class="primary--text"
-                    center-active
-                    column
-                    multiple
-                  >
-                    <v-chip
-                      v-for="severity in severities"
-                      :key="severity"
-                      :value="severity"
-                    >
-                      {{ severityName(severity) }}
-                    </v-chip>
-                  </v-chip-group>
-                </v-card>
-              </v-menu>
-            </v-card-title>
-          </template>
-
-          <template #[`item.name`]="{item}">
-            {{ item.name }}
-            <template v-if="componentRef == item['bom-ref']">
-              <a id="scroll-to" />
-            </template>
+            <v-card-title> Components </v-card-title>
           </template>
 
           <template #[`item.affectingVulnerabilities`]="{item}">
@@ -105,8 +50,8 @@
               <ComponentContent
                 :component="item"
                 :vulnerabilities="affectingVulns.get(item['bom-ref'])"
-                @show-component-in-table="showComponentInTable"
-                @show-component-in-tree="showComponentInTree"
+                @show-components-in-table="showComponentsInTable"
+                @show-components-in-tree="showComponentsInTree"
               />
             </td>
           </template>
@@ -117,7 +62,7 @@
 </template>
 
 <script lang="ts">
-import {Filter, FilteredDataModule} from '@/store/data_filters';
+import {FilteredDataModule, SBOMFilter} from '@/store/data_filters';
 import {SnackbarModule} from '@/store/snackbar';
 import {ContextualizedControl, severities, Severity} from 'inspecjs';
 import _ from 'lodash';
@@ -136,72 +81,16 @@ import {
   }
 })
 export default class ComponentTable extends Vue {
-  @Prop({type: String, required: false}) readonly searchTerm!: string;
+  @Prop({type: Object, required: true}) readonly filter!: SBOMFilter;
+  @Prop({type: Array, required: true}) currentHeaders!: string[];
 
   componentRef = this.$route.query.componentRef ?? null;
-  severityFilter: Severity[] = this.severities;
   expanded: ContextualizedSBOMComponent[] = [];
-  /** The list of columns that are currently displayed */
-  headerColumns = [
-    'name',
-    'version',
-    'group',
-    'type',
-    'description',
-    'affectingVulnerabilities'
-  ];
-
-  /**
-   * A list of options (selectable in the column select menu) for which
-   * headers to display
-   */
-  headerOptions = [
-    'name',
-    'version',
-    'description',
-    'author',
-    'affectingVulnerabilities',
-    'type',
-    'bom-ref',
-    'copyright',
-    'purl',
-    'cpe',
-    'group',
-    'publisher',
-    'scope',
-    'mime-type'
-  ].map((option) => ({name: _.startCase(option), key: option}));
-
-  mounted() {
-    this.$nextTick(() => {
-      if (!this.componentRef) return;
-      try {
-        this.$vuetify.goTo(`#scroll-to`, {duration: 300});
-      } catch (e) {
-        SnackbarModule.failure(
-          `The component you are trying to view is not currently loaded (bom-ref: ${this.componentRef})`
-        );
-        return;
-      }
-
-      const item = this.components.find(
-        (i) => i['bom-ref'] === this.componentRef
-      );
-      if (item) {
-        this.expanded = [item];
-      }
-    });
-  }
-
-  headerIndex(str: string) {
-    return this.headerOptions.findIndex((option) => option.key === str);
-  }
 
   get headers() {
-    // ensure that the header columns are in a consistent order and not determined by 
+    // ensure that the header columns are in a consistent order and not determined by
     // the order in which they are selected
-    this.headerColumns.sort((a, b) => this.headerIndex(a) - this.headerIndex(b))
-    let h = this.headerColumns.map((v) => {
+    let h = this.currentHeaders.map((v) => {
       return {value: v, class: 'header-box', text: _.startCase(v)};
     });
     h.push({value: 'data-table-expand', text: 'More', class: 'header-box'});
@@ -209,14 +98,8 @@ export default class ComponentTable extends Vue {
   }
 
   get components(): readonly ContextualizedSBOMComponent[] {
-    return FilteredDataModule.components(this.all_filter);
-  }
-
-  get all_filter(): Filter {
-    return {
-      fromFile: FilteredDataModule.selected_sbom_ids,
-      severity: this.severityFilter
-    };
+    // TODO: Change this to have a refernece to the source evaluation in some way. File name?? Like List ELT in result table
+    return FilteredDataModule.components(this.filter);
   }
 
   get affectingVulns(): Map<string, ContextualizedControl[]> {
@@ -224,7 +107,7 @@ export default class ComponentTable extends Vue {
     for (const c of this.components) {
       // get the component's affecting vulnerabilities
       const componentVulns = [];
-      const controls = FilteredDataModule.controls(this.all_filter);
+      const controls = FilteredDataModule.controls(this.filter);
       for (const vulnBomRef of c.affectingVulnerabilities || []) {
         let result = getVulnsFromBomRef(vulnBomRef, controls);
         if (result.ok) componentVulns.push(result.value); // TODO: show components with unloaded vulns as errors?
@@ -239,21 +122,12 @@ export default class ComponentTable extends Vue {
     return `severity${_.startCase(severity)}`;
   }
 
-  severityName(severity: string): string {
-    return _.startCase(severity);
-  }
-
-  get severities(): Severity[] {
-    // returns the list of severities defined by inspecJS
-    return [...severities];
+  showComponentsInTable(bomRefs: string[]) {
+    this.$emit('show-components-in-table', bomRefs);
   }
 
-  showComponentInTable(ref: string) {
-    this.$emit('show-component-in-table', ref);
-  }
-
-  showComponentInTree(ref: string) {
-    this.$emit('show-component-in-tree', ref);
+  showComponentsInTree(bomRefs: string[]) {
+    this.$emit('show-components-in-tree', bomRefs);
   }
 }
 </script>
@@ -276,6 +150,11 @@ export default class ComponentTable extends Vue {
   border-left: 5px solid var(--v-primary-base);
 }
 
+/** Blue bar on the bottom to show where expanded content ends */
+::v-deep .v-data-table__expanded__content {
+  border-bottom: 5px solid var(--v-primary-base) !important;
+}
+
 /** Allows blue bar to be visible */
 ::v-deep .v-data-table__wrapper table {
   border-collapse: collapse;
diff --git a/apps/frontend/src/components/cards/sbomview/DependencyTree.vue b/apps/frontend/src/components/cards/sbomview/DependencyTree.vue
index 72bf30cc2f..1228b6266b 100644
--- a/apps/frontend/src/components/cards/sbomview/DependencyTree.vue
+++ b/apps/frontend/src/components/cards/sbomview/DependencyTree.vue
@@ -14,7 +14,7 @@
       <template #append="{item, active}">
         <v-chip
           v-if="active"
-          @click="$emit('show-component-in-table', item.ref)"
+          @click="$emit('show-component-in-table', item.component['bom-ref'])"
         >
           Open in Component Table
         </v-chip>
@@ -24,6 +24,7 @@
 </template>
 
 <script lang="ts">
+import {SBOMFilter} from '@/store/data_filters';
 import {ContextualizedSBOMComponent, SBOMData} from '@/utilities/sbom_util';
 import _ from 'lodash';
 import Vue from 'vue';
@@ -41,10 +42,10 @@ interface TreeNode {
   components: {}
 })
 export default class DependencyTree extends Vue {
+  @Prop({type: Object, required: true}) readonly filter!: SBOMFilter;
   @Prop({type: Object, required: true}) readonly sbomData!: SBOMData;
-  @Prop({type: String, required: false}) readonly searchTerm!: string;
-  @Prop({type: String, required: false}) readonly targetComponent!:
-    | string
+  @Prop({type: Array, required: false}) readonly targetComponents!:
+    | string[]
     | null;
 
   loadedDependencies: TreeNode[] = [];
diff --git a/apps/frontend/src/components/cards/sbomview/SbomSettingsSelector.vue b/apps/frontend/src/components/cards/sbomview/SbomSettingsSelector.vue
new file mode 100644
index 0000000000..0d0a5a2a44
--- /dev/null
+++ b/apps/frontend/src/components/cards/sbomview/SbomSettingsSelector.vue
@@ -0,0 +1,100 @@
+<template>
+  <v-menu offset-y offset-overflow :close-on-content-click="false">
+    <template #activator="{on}">
+      <v-btn fab small class="ma-3" v-on="on">
+        <v-icon> mdi-cog-outline </v-icon>
+      </v-btn>
+    </template>
+    <v-card max-width="400" class="px-5">
+      <v-card-title class="py-5">Column Select</v-card-title>
+      <v-chip-group
+        v-model="currentHeaders"
+        active-class="primary--text"
+        center-active
+        column
+        multiple
+      >
+        <v-chip
+          v-for="field in headerOptions"
+          :key="field.key"
+          :value="field.key"
+        >
+          {{ field.name }}
+        </v-chip>
+      </v-chip-group>
+      <v-divider />
+      <v-card-title class="py-2">Severity Filters</v-card-title>
+      <v-chip-group
+        v-model="value.severities"
+        active-class="primary--text"
+        center-active
+        column
+        multiple
+      >
+        <v-chip
+          v-for="severity in severities"
+          :key="severity"
+          :value="severity"
+        >
+          {{ severityName(severity) }}
+        </v-chip>
+      </v-chip-group>
+    </v-card>
+  </v-menu>
+</template>
+<script lang="ts">
+import {SbomViewSettings} from '@/utilities/sbom_util';
+import {severities, Severity} from 'inspecjs';
+import _ from 'lodash';
+import Component from 'vue-class-component';
+import {Prop, Vue} from 'vue-property-decorator';
+
+@Component({
+  components: {}
+})
+export default class SbomSettingsSelector extends Vue {
+  @Prop({type: Object, required: true}) readonly value!: SbomViewSettings;
+
+  /**
+   * A list of options (selectable in the column select menu) for which
+   * headers to display
+   */
+  headerOptions = [
+    'name',
+    'version',
+    'description',
+    'author',
+    'group',
+    'publisher',
+    'type',
+    'bom-ref',
+    'purl',
+    'cpe',
+    'copyright',
+    'scope',
+    'mime-type',
+    'affectingVulnerabilities'
+  ].map((option) => ({name: _.startCase(option), key: option}));
+
+  headerIndex(str: string) {
+    return this.headerOptions.findIndex((option) => option.key === str);
+  }
+
+  set currentHeaders(value: string[]) {
+    this.value.currentHeaders = _.sortBy(value, this.headerIndex);
+  }
+
+  get currentHeaders() {
+    return this.value.currentHeaders;
+  }
+
+  severityName(severity: string): string {
+    return _.startCase(severity);
+  }
+
+  get severities(): Severity[] {
+    // returns the list of severities defined by inspecJS
+    return [...severities];
+  }
+}
+</script>
diff --git a/apps/frontend/src/store/data_filters.ts b/apps/frontend/src/store/data_filters.ts
index 8a08627daf..b63e8f1a7c 100644
--- a/apps/frontend/src/store/data_filters.ts
+++ b/apps/frontend/src/store/data_filters.ts
@@ -90,6 +90,17 @@ export interface Filter {
   control_id?: string;
 }
 
+/** Contains common filters on SBOM components from the store */
+export interface SBOMFilter {
+  /** Which file these objects came from. */
+  fromFile: FileID[];
+
+  /** Each component has to have at least one of these severities.
+   * "none" allows controls with no vulnerabilities to appear */
+  severity?: Severity[];
+  'bom-refs'?: string[];
+}
+
 export type TreeMapState = string[]; // Representing the current path spec, from root
 
 /**
@@ -513,18 +524,27 @@ export class FilteredData extends VuexModule {
     };
   }
 
-  get components(): (filter: Filter) => readonly ContextualizedSBOMComponent[] {
-    return (filter: Filter) => {
+  get components(): (
+    filter: SBOMFilter
+  ) => readonly ContextualizedSBOMComponent[] {
+    return (filter: SBOMFilter) => {
       const sboms = this.sboms(filter.fromFile).map(parseSbomPassthrough);
-      const controls = this.controls(filter);
+      const controls = this.controls(filter); // gets all the controls in the SBOM files
 
       // grab every component from each SBOM and apply a filter if necessary
       return sboms.flatMap((sbom) =>
         sbom.components.filter((component) => {
-          return (
-            !filter.severity ||
-            componentFitsSeverityFilter(component, filter.severity, controls)
-          );
+          if (
+            filter.severity &&
+            !componentFitsSeverityFilter(component, filter.severity, controls)
+          )
+            return false;
+          if (
+            filter['bom-refs'] &&
+            !filter['bom-refs'].includes(component['bom-ref'])
+          )
+            return false;
+          return true;
         })
       );
     };
diff --git a/apps/frontend/src/utilities/sbom_util.ts b/apps/frontend/src/utilities/sbom_util.ts
index 2aa8014592..077d3e1295 100644
--- a/apps/frontend/src/utilities/sbom_util.ts
+++ b/apps/frontend/src/utilities/sbom_util.ts
@@ -55,6 +55,11 @@ export interface SBOMData {
   componentMap: Map<string, Readonly<ContextualizedSBOMComponent>>;
 }
 
+export interface SbomViewSettings {
+  severities: Severity[];
+  currentHeaders: string[];
+}
+
 /**
  * @param evaluation The evaluation to test
  * @returns true if the given evaluation contains SBOM data in the passthrough section
diff --git a/apps/frontend/src/views/Sbom.vue b/apps/frontend/src/views/Sbom.vue
index 58ad0eca1f..d420b52e52 100644
--- a/apps/frontend/src/views/Sbom.vue
+++ b/apps/frontend/src/views/Sbom.vue
@@ -17,6 +17,10 @@
         @click:clear="searchTerm = ''"
       />
 
+      <v-btn :disabled="!can_clear" @click="clear">
+        <span class="d-none d-md-inline pr-2"> Clear </span>
+        <v-icon>mdi-filter-remove</v-icon>
+      </v-btn>
       <UploadButton />
       <div class="text-center">
         <v-menu>
@@ -66,6 +70,8 @@
                 <ComponentContent
                   :component="currentSbomMetadata.component"
                   :metadata="currentSbomMetadata"
+                  @show-components-in-tree="showComponentsInTree"
+                  @show-components-in-table="showComponentsInTable"
                 />
               </v-col>
             </v-row>
@@ -76,18 +82,25 @@
         <v-row>
           <v-col xs-12>
             <v-card elevation="2">
-              <v-tabs v-model="tab">
+              <v-tabs v-model="tab" height="75">
                 <v-tab key="componentTable">Component Table</v-tab>
                 <v-tab key="dependencyTree">Dependency Tree</v-tab>
+
+                <v-spacer />
+
+                <SbomSettingsSelector v-model="sbomSettings" />
               </v-tabs>
+
               <v-tabs-items v-model="tab">
                 <v-tab-item key="componentTable">
                   <!-- List of all components -->
                   <ComponentTable
                     :component-ref="$route.params.componentRef"
-                    :search-term="searchTerm"
-                    @show-component-in-tree="showComponentInTree"
-                    @show-component-in-table="showComponentInTable"
+                    :bom-ref-filter="bomRefFilter"
+                    :current-headers="sbomSettings.currentHeaders"
+                    :filter="all_filter"
+                    @show-components-in-tree="showComponentsInTree"
+                    @show-components-in-table="showComponentsInTable"
                   />
                 </v-tab-item>
                 <v-tab-item key="dependencyTree">
@@ -95,10 +108,10 @@
                   <template v-for="(sbom, i) in sbomData">
                     <DependencyTree
                       :key="i"
-                      :search-term="searchTerm"
-                      :target-component="treeRef"
+                      :target-components="treeRef"
                       :sbom-data="sbom"
-                      @show-component-in-table="showComponentInTable"
+                      :filter="all_filter"
+                      @show-components-in-table="showComponentsInTable"
                     />
                   </template>
                 </v-tab-item>
@@ -111,14 +124,19 @@
 
     <!-- No viewable files snackbar -->
     <v-snackbar
-      :value="file_filter.length === 0"
+      :value="filterSnackbar"
       class="mt-11"
       style="z-index: 2"
       :timeout="-1"
       color="warning"
       top
     >
-      <span v-if="no_files" class="subtitle-2">
+      <span v-if="file_filter.length" class="subtitle-2">
+        All results are filtered out. Use the
+        <v-icon>mdi-filter-remove</v-icon> button in the top right to clear
+        filters and show all.
+      </span>
+      <span v-else-if="no_files" class="subtitle-2">
         No files are currently loaded. Press the <strong>LOAD</strong>
         <v-icon class="mx-1"> mdi-cloud-upload</v-icon> button above to load
         some.
@@ -135,6 +153,7 @@
 
 <script lang="ts">
 import ComponentTable from '@/components/cards/sbomview/ComponentTable.vue';
+import SbomSettingsSelector from '@/components/cards/sbomview/SbomSettingsSelector.vue';
 import DependencyTree from '@/components/cards/sbomview/DependencyTree.vue';
 import EvaluationInfo from '@/components/cards/EvaluationInfo.vue';
 import ProfileInfo from '@/components/cards/ProfileInfo.vue';
@@ -142,7 +161,7 @@ import UploadButton from '@/components/generic/UploadButton.vue';
 import ExportJson from '@/components/global/ExportJson.vue';
 import PrintButton from '@/components/global/PrintButton.vue';
 import RouteMixin from '@/mixins/RouteMixin';
-import {FilteredDataModule} from '@/store/data_filters';
+import {FilteredDataModule, SBOMFilter} from '@/store/data_filters';
 import {InspecDataModule} from '@/store/data_store';
 import {
   EvaluationFile,
@@ -161,8 +180,11 @@ import ComponentContent from '@/components/cards/sbomview/ComponentContent.vue';
 import {
   parseSbomPassthrough,
   SBOMData,
-  SBOMMetadata
+  SBOMMetadata,
+  SbomViewSettings
 } from '@/utilities/sbom_util';
+import {severities} from 'inspecjs';
+import _ from 'lodash';
 
 @Component({
   components: {
@@ -175,14 +197,42 @@ import {
     EvaluationInfo,
     UploadButton,
     ProfileInfo,
-    ProfileData
+    ProfileData,
+    SbomSettingsSelector
   }
 })
 export default class Sbom extends mixins(RouteMixin, ServerMixin) {
   searchTerm: string = '';
   currentSbomMetadata: SBOMMetadata | null = null;
   tab: number = 0; // open to componentTable
-  treeRef: string | null = null;
+
+  /** Model for if all-filtered snackbar should be showing */
+  filterSnackbar = false;
+  treeRef: string[] | null = null;
+  bomRefFilter: string[] | null = this.queryFilter;
+  sbomSettings: SbomViewSettings = {
+    severities: [...severities],
+    currentHeaders: [
+      'name',
+      'version',
+      'group',
+      'description',
+      'affectingVulnerabilities'
+    ]
+  };
+
+  get queryFilter(): string[] | null {
+    if (this.$route.query.componentRef) {
+      if (Array.isArray(this.$route.query.componentRef)) {
+        // remove all possibly null items
+        return this.$route.query.componentRef.flatMap((ref) =>
+          ref ? [ref] : []
+        );
+      }
+      return [this.$route.query.componentRef];
+    }
+    return null;
+  }
 
   /**
    * The currently selected file, if one exists.
@@ -242,15 +292,49 @@ export default class Sbom extends mixins(RouteMixin, ServerMixin) {
     }
   }
 
-  showComponentInTable(bomRef: string) {
-    this.searchTerm = bomRef;
+  showComponentsInTable(bomRefs: string[]) {
     this.tab = 0; // corresponds to componentTable
+    this.bomRefFilter = bomRefs;
   }
 
-  showComponentInTree(bomRef: string) {
-    this.treeRef = bomRef;
+  showComponentsInTree(bomRefs: string[]) {
+    this.treeRef = bomRefs;
     this.tab = 1; // corresponds to dependencyTree
   }
+
+  get all_filter(): SBOMFilter {
+    return {
+      fromFile: FilteredDataModule.selected_sbom_ids,
+      severity: this.sbomSettings.severities,
+      'bom-refs': this.bomRefFilter || undefined
+    };
+  }
+
+  get can_clear(): boolean {
+    let result = false;
+    if (
+      this.all_filter.severity?.length !== severities.length ||
+      this.all_filter['bom-refs']?.length
+    ) {
+      result = true;
+    }
+
+    // Logic to check: are any files actually visible?
+    if (FilteredDataModule.components(this.all_filter).length === 0) {
+      this.filterSnackbar = true;
+    } else {
+      this.filterSnackbar = false;
+    }
+
+    return result;
+  }
+
+  clear() {
+    this.sbomSettings.severities = [...severities];
+    this.bomRefFilter = null;
+    this.searchTerm = '';
+    this.filterSnackbar = false;
+  }
 }
 </script>