Merge pull request #242 from Breeding-Insight/feature/BI-1191

[BI-1191] Germplasm Search

src/assets/scss/main.scss

@@ -740,4 +740,17 @@ th.activesort.sortcolumn, th.sortcolumn:hover {
       stroke: gray;
     }
   }
-}
+}
+
+// Some css to only overlay on tbody for tables instead of entire table like b-table
+div.b-table.loading-active tbody {
+  opacity: 0.25;
+  z-index: 1;
+  pointer-events: none;
+}
+.loading-overlay {
+  &, .loading-background {
+    pointer-events: none;
+    background: rgba(255, 255, 255, 0);
+  }
+}

src/breeding-insight/utils/CallStack.ts

@@ -0,0 +1,42 @@
+/*
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {v4 as uuidv4} from "uuid";
+
+/*
+Handles a call stack for a single endpoint. When multiple calls are made
+over a period of time, this class will record the most recent call and only
+return the response from that call.
+ */
+export class CallStack {
+  call: (options: any) => Promise<any>;
+  currentCallId: string;
+
+  constructor(call: (options: any) => Promise<any>) {
+    this.call = call;
+  }
+
+  makeCall(options: any): { call: Promise<any>; callId: string; } {
+    const callId = uuidv4();
+    this.currentCallId = callId;
+    return {call: this.call(options), callId};
+  }
+
+  isCurrentCall(callId: string) {
+    return this.currentCallId === callId;
+  }
+}

src/components/tables/expandableTable/ExpandableTable.vue

@@ -18,6 +18,7 @@
 <template>
   <div>
     <b-table
+        :class="{'loading-active': loading}"
         :data.sync="tableRows"
         narrowed
         :show-detail-icon="false"
@@ -40,6 +41,9 @@
         v-on="$listeners"
         v-bind:loading="loading"
         :row-class="calculateRowClass"
+        backend-filtering
+        v-bind:debounce-search="searchDebounce"
+        v-on:filters-change="cloneFilters"
     >
 
       <slot></slot>
@@ -139,6 +143,8 @@ export default class ExpandableTable extends Mixins(ValidationMixin) {
   loading!: boolean;
   @Prop()
   details!: boolean;
+  @Prop()
+  searchDebounce!: number;
 
   private tableRows: Array<TableRow<any>> = new Array<TableRow<any>>();
   private openDetail: Array<TableRow<any>> = new Array<TableRow<any>>();
@@ -220,5 +226,10 @@ export default class ExpandableTable extends Mixins(ValidationMixin) {
     this.cancelEdit(row);
     this.openDetail = [];
   }
+
+  // A patch so if we're listening the filters, we can still debounce
+  cloneFilters(event: any) {
+    this.$emit('search', JSON.parse(JSON.stringify(event)));
+  }
 }
 </script>

src/views/germplasm/GermplasmTable.vue

@@ -12,39 +12,41 @@
         v-on:paginate-toggle-all="paginationController.toggleShowAll(pagination.totalCount.valueOf())"
         v-on:paginate-page-size="paginationController.updatePageSize($event)"
         v-on:sort="paginationController.updateSort($event)"
+        v-on:search="filters = $event"
+        v-bind:search-debounce="400"
     >
-      <b-table-column field="accessionNumber" label="GID" v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+      <b-table-column field="accessionNumber" label="GID" v-slot="props" :th-attrs="(column) => ({scope:'col'})" searchable>
         <GermplasmLink
             v-bind:germplasmUUID="GermplasmUtils.getGermplasmUUID(props.row.data.externalReferences)"
             v-bind:germplasmGID="props.row.data.accessionNumber"
         >
         </GermplasmLink>
       </b-table-column>
-      <b-table-column field="defaultDisplayName" label="Name" v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+      <b-table-column field="defaultDisplayName" label="Name" v-slot="props" :th-attrs="(column) => ({scope:'col'})" searchable>
         {{ props.row.data.defaultDisplayName }}
       </b-table-column>
-      <b-table-column field="additionalInfo.breedingMethod" label="Breeding Method" v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+      <b-table-column field="breedingMethod" label="Breeding Method" v-slot="props" :th-attrs="(column) => ({scope:'col'})" searchable>
         {{ props.row.data.additionalInfo.breedingMethod }}
       </b-table-column>
-      <b-table-column field="seedSource" label="Source" v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+      <b-table-column field="seedSource" label="Source" v-slot="props" :th-attrs="(column) => ({scope:'col'})" searchable>
         {{ props.row.data.seedSource }}
       </b-table-column>
-      <b-table-column field="pedigree" label="Female Parent GID" v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+      <b-table-column field="femaleParentGID" label="Female Parent GID" v-slot="props" :th-attrs="(column) => ({scope:'col'})" searchable>
         <GermplasmLink
             v-bind:germplasmUUID="Pedigree.parsePedigreeString(props.row.data.additionalInfo.pedigreeByUUID).femaleParent"
             v-bind:germplasmGID="Pedigree.parsePedigreeString(props.row.data.pedigree).femaleParent"
         > </GermplasmLink>
       </b-table-column>
-      <b-table-column field="pedigree" label="Male Parent GID" v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+      <b-table-column field="maleParentGID" label="Male Parent GID" v-slot="props" :th-attrs="(column) => ({scope:'col'})" searchable>
         <GermplasmLink
             v-bind:germplasmUUID="Pedigree.parsePedigreeString(props.row.data.additionalInfo.pedigreeByUUID).maleParent"
             v-bind:germplasmGID="Pedigree.parsePedigreeString(props.row.data.pedigree).maleParent"
         > </GermplasmLink>
       </b-table-column>
-      <b-table-column field="createdDate" label="Created Date" v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+      <b-table-column field="createdDate" label="Created Date" v-slot="props" :th-attrs="(column) => ({scope:'col'})" searchable>
         {{ props.row.data.additionalInfo.createdDate }}
       </b-table-column>
-      <b-table-column field="createdBy.userName" label="Created By" v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+      <b-table-column field="createdByUserName" label="Created By" v-slot="props" :th-attrs="(column) => ({scope:'col'})" searchable>
         {{ props.row.data.additionalInfo.createdBy.userName }}
       </b-table-column>
       <b-table-column v-slot="props" :th-attrs="(column) => ({scope:'col'})">
@@ -80,6 +82,7 @@ import {BackendPaginationController} from "@/breeding-insight/model/view_models/
 import {Pedigree} from "@/breeding-insight/model/import/germplasm/Pedigree";
 import GermplasmLink from '@/components/germplasm/GermplasmLink.vue'
 import {GermplasmUtils} from '@/breeding-insight/utils/GermplasmUtils';
+import {CallStack} from "@/breeding-insight/utils/CallStack";
 
 @Component({
   mixins: [validationMixin],
@@ -98,24 +101,33 @@ export default class GermplasmTable extends Vue {
   private paginationController: BackendPaginationController = new BackendPaginationController();
   private germplasmLoading: Boolean = false;
   private germplasm: Germplasm[] = [];
+  private filters: any = {};
+
+  private germplasmCallStack: CallStack;
 
   mounted() {
+    this.germplasmCallStack = new CallStack((options) => BrAPIService.get(BrAPIType.GERMPLASM, options, this.activeProgram!.id!,
+        this.paginationController.pageSize, this.paginationController.currentPage - 1));
     this.paginationController.pageSize = 20;
-    this.getGermplasm();
   }
 
   @Watch('paginationController', { deep: true})
+  @Watch('filters', {deep: true})
   async getGermplasm() {
     this.germplasmLoading = true;
     try {
-      const response = await BrAPIService.get(BrAPIType.GERMPLASM, {}, this.activeProgram!.id!,
-          this.paginationController.pageSize, this.paginationController.currentPage - 1);
+      // Only process the most recent call
+      const {call, callId} = this.germplasmCallStack.makeCall(this.filters);
+      const response = await call;
+      if (!this.germplasmCallStack.isCurrentCall(callId)) return;
+
       this.pagination = new Pagination(response.metadata.pagination);
       // Account for brapi 0 indexing of paging
       this.pagination.currentPage = this.pagination.currentPage.valueOf() + 1;
       this.germplasm = response.result.data;
       this.germplasmLoading = false;
     } catch (e) {
+      this.$log.error(e);
       this.$emit('show-error-notification', 'Error loading germplasm');
       this.germplasmLoading = false;
     }