BI-1936 - Integrate the Graphical Filtering Tool BrAPP into DeltaBreed for searching for Germplasm

package.json

@@ -19,20 +19,25 @@
   "dependencies": {
     "@casl/ability": "~4.0.0",
     "@casl/vue": "^1.1.1",
+    "@popperjs/core": "^2.11.8",
+    "@solgenomics/brapi-graphical-filtering": "github:Breeding-Insight/BrAPI-Graphical-Filtering#master",
     "@solgenomics/brapi-pedigree-viewer": "git+https://github.com/Breeding-Insight/BrAPI-Pedigree-Viewer#v2.0.3",
-    "@solgenomics/brapijs": "git+https://github.com/Breeding-Insight/BrAPI-js#v2.0.2",
+    "@solgenomics/brapijs": "git+https://github.com/Breeding-Insight/BrAPI-js#feature/BI-1936",
     "@solgenomics/d3-pedigree-tree": "git+https://github.com/solgenomics/d3-pedigree-tree#f799b499c8019cfccd550d4297196e365c208d5c",
     "@types/flat": "^5.0.2",
     "@types/promise.allsettled": "^1.0.3",
     "@types/valid-url": "^1.0.3",
     "@types/vuelidate": "^0.7.10",
     "@xstate/fsm": "^1.4.0",
+    "bootstrap": "^5.3.3",
     "core-js": "^3.4.3",
     "d3": "^4.11.0",
+    "datatables.net-dt": "^2.1.8",
     "dompurify": "^3.0.6",
     "flat": "^5.0.2",
     "focus-trap": "^5.1.0",
     "focus-trap-vue": "0.0.6",
+    "jquery": "^3.7.1",
     "title-case": "^3.0.3",
     "uuid": "^8.3.2",
     "valid-url": "^1.0.9",
@@ -60,6 +65,7 @@
     "@types/d3": "^7.1.0",
     "@types/dompurify": "^3.0.5",
     "@types/jest": "^24.9.0",
+    "@types/jquery": "^3.5.31",
     "@types/uuid": "^8.3.0",
     "@vue/cli-plugin-babel": "^4.1.0",
     "@vue/cli-plugin-e2e-cypress": "^4.1.0",
@@ -86,10 +92,10 @@
     "execa": "^4.0.0",
     "json-beautify": "^1.1.1",
     "minimist": "^1.2.5",
-    "node-sass": "^4.14.1",
     "ora": "^4.0.3",
     "pa11y": "^5.3.0",
     "pa11y-reporter-json": "^1.0.0",
+    "sass": "^1.79.5",
     "sass-loader": "^8.0.0",
     "shelljs": "^0.8.3",
     "typescript": "~3.5.3",

src/router/index.ts

@@ -63,6 +63,7 @@ import GermplasmByList from "@/views/germplasm/GermplasmByList.vue";
 import GermplasmLists from "@/views/germplasm/GermplasmLists.vue";
 import BreedingMethods from "@/views/germplasm/BreedingMethods.vue";
 import GermplasmDetails from "@/views/germplasm/GermplasmDetails.vue";
+import GermplasmAdvancedSearch from "@/views/germplasm/GermplasmAdvancedSearch.vue";
 import ProgramConfiguration from "@/views/program/ProgramConfiguration.vue";
 import JobManagement from '@/views/program/JobManagement.vue';
 import GermplasmPedigreesView from "@/components/germplasm/GermplasmPedigreesView.vue";
@@ -286,6 +287,15 @@ const routes = [
           layout: layouts.userSideBar
         },
         component: GermplasmLists
+      },
+      {
+        path: 'germplasm-search',
+        name: 'germplasm-search',
+        meta: {
+          title: 'Germplasm Advanced Search',
+          layout: layouts.userSideBar
+        },
+        component: GermplasmAdvancedSearch
       }
     ]
   },

src/shims-vue.d.ts

@@ -87,3 +87,4 @@ declare module 'flat';
 declare module '@solgenomics/brapi-pedigree-viewer';
 declare module '@solgenomics/brapijs';
 declare module '@solgenomics/d3-pedigree-tree';
+declare module '@solgenomics/brapi-graphical-filtering'

src/views/germplasm/Germplasm.vue

@@ -37,6 +37,13 @@
               active-class="is-active"
           >
             <a>Lists</a>
+          </router-link>
+          <router-link
+              v-bind:to="{name: 'germplasm-search', params: {programId: activeProgram.id}}"
+              tag="li"
+              active-class="is-active"
+          >
+            <a>Advanced Search</a>
           </router-link>
             <ActionMenu
                 class = "is-pulled-right has-text-weight-bold above-tabs-button"

src/views/germplasm/GermplasmAdvancedSearch.vue

@@ -0,0 +1,130 @@
+<!--
+  - 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.
+-->
+
+<template>
+  <div id="germplasm-advanced-search">
+      <div id="filter_div"></div>
+      <div style="width:100%;overflow-x:scroll;">
+        <table id="filtered_results"></table>
+      </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component} from 'vue-property-decorator'
+import GermplasmBase from "@/components/germplasm/GermplasmBase.vue";
+import GermplasmTable from '@/components/germplasm/GermplasmTable.vue';
+import {mapGetters} from 'vuex';
+import {Program} from '@/breeding-insight/model/Program';
+import GermplasmDownloadButton from '@/components/germplasm/GermplasmDownloadButton.vue';
+import BrAPI from '@solgenomics/brapijs';
+import GraphicalFilter from '@solgenomics/brapi-graphical-filtering';
+import * as d3 from 'd3';
+import 'datatables.net';
+import 'datatables.net-dt/css/dataTables.dataTables.min.css';
+import '@solgenomics/brapi-graphical-filtering/css/GraphicalFilter.css';
+import $ from 'jquery';
+import 'bootstrap';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import '@popperjs/core';
+
+@Component({
+  components: {GermplasmTable, GermplasmDownloadButton},
+  computed: {
+    ...mapGetters([
+      'activeProgram'
+    ])
+  }
+})
+export default class GermplasmAdvancedSearch extends GermplasmBase {
+
+  private activeProgram?: Program;
+
+  mounted() {
+    window.d3 = Object.assign(
+        d3
+    );
+    window.$ = $;
+
+    this.drawGraphicalFilter();
+  }
+
+  drawGraphicalFilter() {
+    /**
+     * BrAPI - initializes a BrAPI client handler
+     *
+     * @param   {String} server      URL without trailing '/' to the BrAPI endpoint
+     * @param   {String} version     Optional. BrAPI version of endpoint (e.g. "1.2" or "v1.1")
+     * @param   {String} auth_token  Optional. BrAPI Auth Bearer token.
+     * @param   {Int}    call_limit  Optional. Maximum number of simultanious calls the server which can be running.
+     * @param   {String} credentials Optional. credentials option to use for fetch API.  See: https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials
+     * @returns {EmptyBrAPINode}
+     */
+    const brapiClient = BrAPI(
+        `${process.env.VUE_APP_BI_API_V1_PATH}/programs/${this.activeProgram.id}/brapi/v2`,
+        undefined,
+        undefined,
+        undefined,
+        'include'
+    );
+
+    const params = {
+      "includeObservations": true
+    };
+
+    // Get brapi_node
+    const brapiNode = brapiClient.observationunits(params);
+
+    // Create GraphicalFilter without changing its code
+    let gf = GraphicalFilter(
+        brapiNode,
+        // Accessor describing traits for each observationUnit (returns object)
+        function(d) {
+          console.log(d);
+          var traits = {}
+          d.observations.forEach(function(obs){
+            traits[obs.observationVariableName] = obs.value;
+          });
+          console.log(traits);
+          return traits;
+        },
+        // Accessor describing extra columns to display in the table (returns object)
+        function(d) {
+          return {
+            'GID':d.additionalInfo.gid,
+            'Germplasm Name':d.germplasmName,
+            'Experiment':d.trialName,
+            'Environment':d.studyName,
+            'Exp Unit ID':d.observationUnitName
+          }
+        },
+        // Order to display the above columns in (array)
+        ["GID", "Germplasm Name", "Experiment", "Environment", "Exp Unit ID"],
+        // key to group observationUnits by in the table (key value or undefined for no grouping)
+        undefined
+        //function(d) { // groupBy function
+        //  return d.observationUnitDbId
+        //}
+    );
+
+    // Draw the filter
+    gf.draw("#filter_div", "#filtered_results");
+
+  }
+
+}
+</script>