From 82b39242422d9ad8f5732d486acc412bb6c8cb24 Mon Sep 17 00:00:00 2001 From: Nick <53413353+nickpalladino@users.noreply.github.com> Date: Mon, 14 Oct 2024 10:08:07 -0400 Subject: [PATCH 1/9] Added germplasm advanced search tab --- src/router/index.ts | 10 ++++ src/views/germplasm/Germplasm.vue | 7 +++ .../germplasm/GermplasmAdvancedSearch.vue | 49 +++++++++++++++++++ 3 files changed, 66 insertions(+) create mode 100644 src/views/germplasm/GermplasmAdvancedSearch.vue diff --git a/src/router/index.ts b/src/router/index.ts index afbd08f38..6bbdff0b8 100644 --- a/src/router/index.ts +++ b/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 } ] }, diff --git a/src/views/germplasm/Germplasm.vue b/src/views/germplasm/Germplasm.vue index d84dcf291..9b2e431f5 100644 --- a/src/views/germplasm/Germplasm.vue +++ b/src/views/germplasm/Germplasm.vue @@ -37,6 +37,13 @@ active-class="is-active" > Lists + + + Advanced Search + + + + From 3ac39f634df56f25e117f6e3c86e8f53b9fc7ebf Mon Sep 17 00:00:00 2001 From: Nick <53413353+nickpalladino@users.noreply.github.com> Date: Mon, 14 Oct 2024 14:51:22 -0400 Subject: [PATCH 2/9] Bring in graphical filtering dependencies --- package.json | 1 + src/shims-vue.d.ts | 1 + .../germplasm/GermplasmAdvancedSearch.vue | 50 ++++++++++++++++++- 3 files changed, 51 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index fb2e2fb2f..d3d966460 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "dependencies": { "@casl/ability": "~4.0.0", "@casl/vue": "^1.1.1", + "@solgenomics/brapi-graphical-filtering": "git+https://github.com/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/d3-pedigree-tree": "git+https://github.com/solgenomics/d3-pedigree-tree#f799b499c8019cfccd550d4297196e365c208d5c", diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts index ee1f107f6..e091a4107 100644 --- a/src/shims-vue.d.ts +++ b/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' diff --git a/src/views/germplasm/GermplasmAdvancedSearch.vue b/src/views/germplasm/GermplasmAdvancedSearch.vue index 33662466c..cebdae60a 100644 --- a/src/views/germplasm/GermplasmAdvancedSearch.vue +++ b/src/views/germplasm/GermplasmAdvancedSearch.vue @@ -17,7 +17,7 @@ @@ -28,6 +28,9 @@ 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'; + @Component({ components: {GermplasmTable, GermplasmDownloadButton}, @@ -42,6 +45,51 @@ export default class GermplasmAdvancedSearch extends GermplasmBase { private activeProgram?: Program; mounted() { + 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} + */ + let gf = GraphicalFilter( + // BrAPI search of observationUnits to be displayed + BrAPI(`${process.env.VUE_APP_BI_API_V1_PATH}/programs/${this.activeProgram!.id}/brapi/v2`, + undefined, + undefined, + undefined, + 'include').search_observations(), + // Accessor describing traits for each observationUnit (returns object) + function (d) { + var traits = {} + d.observations.forEach(function (obs) { + traits[obs.observationVariableName] = obs.value; + }); + return traits; + }, + // Accessor describing extra columns to display in the table (returns object) + function (d) { + return { + 'Accession': d.germplasmName + } + }, + // Order to display the above columns in (array) + ["Accession"], + // key to group observationUnits by in the table (key value or undefined for no grouping) + function (d) { // groupBy function + return d.germplasmDbId + } + ); + + gf.draw("#filter_div","#filtered_results"); } From 197507f16032e9ab4129f78f87a58907ac325e15 Mon Sep 17 00:00:00 2001 From: Nick <53413353+nickpalladino@users.noreply.github.com> Date: Mon, 14 Oct 2024 15:48:15 -0400 Subject: [PATCH 3/9] Use hackathon branch for brapijs --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d3d966460..ea62266bf 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "@casl/vue": "^1.1.1", "@solgenomics/brapi-graphical-filtering": "git+https://github.com/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", From 372bc9691eb452f1061bc2603651c28164076b83 Mon Sep 17 00:00:00 2001 From: Nick <53413353+nickpalladino@users.noreply.github.com> Date: Wed, 16 Oct 2024 13:57:34 -0400 Subject: [PATCH 4/9] Debugging and got basic table displaying --- package.json | 7 +- .../germplasm/GermplasmAdvancedSearch.vue | 76 +++++++++++++++++-- 2 files changed, 75 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index ea62266bf..fe3d69a9b 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "dependencies": { "@casl/ability": "~4.0.0", "@casl/vue": "^1.1.1", - "@solgenomics/brapi-graphical-filtering": "git+https://github.com/Breeding-Insight/BrAPI-Graphical-Filtering#master", + "@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#feature/BI-1936", "@solgenomics/d3-pedigree-tree": "git+https://github.com/solgenomics/d3-pedigree-tree#f799b499c8019cfccd550d4297196e365c208d5c", @@ -30,10 +30,12 @@ "@xstate/fsm": "^1.4.0", "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", @@ -61,6 +63,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", @@ -87,10 +90,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", diff --git a/src/views/germplasm/GermplasmAdvancedSearch.vue b/src/views/germplasm/GermplasmAdvancedSearch.vue index cebdae60a..b9c86206f 100644 --- a/src/views/germplasm/GermplasmAdvancedSearch.vue +++ b/src/views/germplasm/GermplasmAdvancedSearch.vue @@ -16,8 +16,11 @@ --> @@ -30,6 +33,11 @@ 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 $ from 'jquery'; +import pedigreeTree from "@solgenomics/d3-pedigree-tree"; @Component({ @@ -43,12 +51,21 @@ import GraphicalFilter from '@solgenomics/brapi-graphical-filtering'; export default class GermplasmAdvancedSearch extends GermplasmBase { private activeProgram?: Program; + private pedigreeWrapId: String = 'pedigree-wrap'; + + $refs!: { + pedigreeWrap: HTMLElement + } mounted() { + window.d3 = Object.assign( + d3 + ); + window.$ = $; + this.drawGraphicalFilter(); } - drawGraphicalFilter() { /** * BrAPI - initializes a BrAPI client handler @@ -60,19 +77,21 @@ export default class GermplasmAdvancedSearch extends GermplasmBase { * @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} */ + + /* let gf = GraphicalFilter( // BrAPI search of observationUnits to be displayed BrAPI(`${process.env.VUE_APP_BI_API_V1_PATH}/programs/${this.activeProgram!.id}/brapi/v2`, undefined, undefined, undefined, - 'include').search_observations(), + 'include').observations(), // Accessor describing traits for each observationUnit (returns object) function (d) { + console.log('TEST'); + console.log(d); var traits = {} - d.observations.forEach(function (obs) { - traits[obs.observationVariableName] = obs.value; - }); + traits[d.observationVariableName] = d.value; return traits; }, // Accessor describing extra columns to display in the table (returns object) @@ -91,6 +110,51 @@ export default class GermplasmAdvancedSearch extends GermplasmBase { gf.draw("#filter_div","#filtered_results"); + */ + 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) { + var traits = {} + d.observations.forEach(function(obs){ + traits[obs.observationVariableName] = obs.value; + }); + return traits; + }, + // Accessor describing extra columns to display in the table (returns object) + function(d) { + return { + 'Accession':d.germplasmName + } + }, + // Order to display the above columns in (array) + ["Accession"], + // key to group observationUnits by in the table (key value or undefined for no grouping) + function(d) { // groupBy function + return d.germplasmDbId + } + ); + + // Draw the filter + gf.draw("#filter_div", "#filtered_results"); + + } } From 65ebb37273132cfb9a10e3a54965da3fc829c92f Mon Sep 17 00:00:00 2001 From: Nick <53413353+nickpalladino@users.noreply.github.com> Date: Wed, 16 Oct 2024 14:56:05 -0400 Subject: [PATCH 5/9] Imported css and got filtering partially showing now --- src/views/germplasm/GermplasmAdvancedSearch.vue | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/views/germplasm/GermplasmAdvancedSearch.vue b/src/views/germplasm/GermplasmAdvancedSearch.vue index b9c86206f..6a3cdbc40 100644 --- a/src/views/germplasm/GermplasmAdvancedSearch.vue +++ b/src/views/germplasm/GermplasmAdvancedSearch.vue @@ -17,10 +17,18 @@ @@ -36,6 +44,7 @@ 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 pedigreeTree from "@solgenomics/d3-pedigree-tree"; @@ -131,10 +140,12 @@ export default class GermplasmAdvancedSearch extends GermplasmBase { 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) @@ -155,6 +166,7 @@ export default class GermplasmAdvancedSearch extends GermplasmBase { gf.draw("#filter_div", "#filtered_results"); + } } From 4a8e63c003f70e0053667c446cec5b70911b9174 Mon Sep 17 00:00:00 2001 From: Nick <53413353+nickpalladino@users.noreply.github.com> Date: Wed, 16 Oct 2024 16:46:41 -0400 Subject: [PATCH 6/9] Added bootstrap css --- package.json | 2 ++ src/views/germplasm/GermplasmAdvancedSearch.vue | 7 +++++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index fe3d69a9b..4f3bc09eb 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "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#feature/BI-1936", @@ -28,6 +29,7 @@ "@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", diff --git a/src/views/germplasm/GermplasmAdvancedSearch.vue b/src/views/germplasm/GermplasmAdvancedSearch.vue index 6a3cdbc40..b1b9c2cd1 100644 --- a/src/views/germplasm/GermplasmAdvancedSearch.vue +++ b/src/views/germplasm/GermplasmAdvancedSearch.vue @@ -46,6 +46,9 @@ 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'; import pedigreeTree from "@solgenomics/d3-pedigree-tree"; @@ -140,12 +143,12 @@ export default class GermplasmAdvancedSearch extends GermplasmBase { brapiNode, // Accessor describing traits for each observationUnit (returns object) function(d) { - console.log(d); + //console.log(d); var traits = {} d.observations.forEach(function(obs){ traits[obs.observationVariableName] = obs.value; }); - console.log(traits); + //console.log(traits); return traits; }, // Accessor describing extra columns to display in the table (returns object) From 1e3b56780ef613fd526216d38f573e8836f7c05a Mon Sep 17 00:00:00 2001 From: Nick <53413353+nickpalladino@users.noreply.github.com> Date: Thu, 17 Oct 2024 12:01:33 -0400 Subject: [PATCH 7/9] Added additional columns to table --- src/views/germplasm/GermplasmAdvancedSearch.vue | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/views/germplasm/GermplasmAdvancedSearch.vue b/src/views/germplasm/GermplasmAdvancedSearch.vue index b1b9c2cd1..7d7ccee2e 100644 --- a/src/views/germplasm/GermplasmAdvancedSearch.vue +++ b/src/views/germplasm/GermplasmAdvancedSearch.vue @@ -154,14 +154,17 @@ export default class GermplasmAdvancedSearch extends GermplasmBase { // Accessor describing extra columns to display in the table (returns object) function(d) { return { - 'Accession':d.germplasmName + 'Accession':d.germplasmName, + 'GID':d.additionalInfo.gid, + 'Experiment':d.trialName, + 'Environment':d.studyName } }, // Order to display the above columns in (array) - ["Accession"], + ["Accession", "GID", "Experiment", "Environment"], // key to group observationUnits by in the table (key value or undefined for no grouping) function(d) { // groupBy function - return d.germplasmDbId + return d.observationUnitDbId } ); From 3fd3c9eb58905f2aa959af49f0005fa31c283d1f Mon Sep 17 00:00:00 2001 From: Nick <53413353+nickpalladino@users.noreply.github.com> Date: Thu, 17 Oct 2024 12:04:44 -0400 Subject: [PATCH 8/9] Changed width and margin --- src/views/germplasm/GermplasmAdvancedSearch.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/views/germplasm/GermplasmAdvancedSearch.vue b/src/views/germplasm/GermplasmAdvancedSearch.vue index 7d7ccee2e..c4fbb4813 100644 --- a/src/views/germplasm/GermplasmAdvancedSearch.vue +++ b/src/views/germplasm/GermplasmAdvancedSearch.vue @@ -17,12 +17,12 @@ @@ -49,8 +41,6 @@ import $ from 'jquery'; import 'bootstrap'; import 'bootstrap/dist/css/bootstrap.min.css'; import '@popperjs/core'; -import pedigreeTree from "@solgenomics/d3-pedigree-tree"; - @Component({ components: {GermplasmTable, GermplasmDownloadButton}, @@ -63,11 +53,6 @@ import pedigreeTree from "@solgenomics/d3-pedigree-tree"; export default class GermplasmAdvancedSearch extends GermplasmBase { private activeProgram?: Program; - private pedigreeWrapId: String = 'pedigree-wrap'; - - $refs!: { - pedigreeWrap: HTMLElement - } mounted() { window.d3 = Object.assign( @@ -89,40 +74,6 @@ export default class GermplasmAdvancedSearch extends GermplasmBase { * @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} */ - - /* - let gf = GraphicalFilter( - // BrAPI search of observationUnits to be displayed - BrAPI(`${process.env.VUE_APP_BI_API_V1_PATH}/programs/${this.activeProgram!.id}/brapi/v2`, - undefined, - undefined, - undefined, - 'include').observations(), - // Accessor describing traits for each observationUnit (returns object) - function (d) { - console.log('TEST'); - console.log(d); - var traits = {} - traits[d.observationVariableName] = d.value; - return traits; - }, - // Accessor describing extra columns to display in the table (returns object) - function (d) { - return { - 'Accession': d.germplasmName - } - }, - // Order to display the above columns in (array) - ["Accession"], - // key to group observationUnits by in the table (key value or undefined for no grouping) - function (d) { // groupBy function - return d.germplasmDbId - } - ); - - gf.draw("#filter_div","#filtered_results"); - - */ const brapiClient = BrAPI( `${process.env.VUE_APP_BI_API_V1_PATH}/programs/${this.activeProgram.id}/brapi/v2`, undefined, @@ -143,36 +94,36 @@ export default class GermplasmAdvancedSearch extends GermplasmBase { brapiNode, // Accessor describing traits for each observationUnit (returns object) function(d) { - //console.log(d); + console.log(d); var traits = {} d.observations.forEach(function(obs){ traits[obs.observationVariableName] = obs.value; }); - //console.log(traits); + console.log(traits); return traits; }, // Accessor describing extra columns to display in the table (returns object) function(d) { return { - 'Accession':d.germplasmName, 'GID':d.additionalInfo.gid, + 'Germplasm Name':d.germplasmName, 'Experiment':d.trialName, - 'Environment':d.studyName + 'Environment':d.studyName, + 'Exp Unit ID':d.observationUnitName } }, // Order to display the above columns in (array) - ["Accession", "GID", "Experiment", "Environment"], + ["GID", "Germplasm Name", "Experiment", "Environment", "Exp Unit ID"], // key to group observationUnits by in the table (key value or undefined for no grouping) - function(d) { // groupBy function - return d.observationUnitDbId - } + undefined + //function(d) { // groupBy function + // return d.observationUnitDbId + //} ); // Draw the filter gf.draw("#filter_div", "#filtered_results"); - - } }