From 6a318bc55ce6dda30c8fd0ac4bee313ae6c6cde1 Mon Sep 17 00:00:00 2001 From: Jesse Khorasanee Date: Wed, 7 Apr 2021 14:58:53 +1200 Subject: [PATCH 01/10] Test out a slot approach for putting tabs html in sidebar --- .env | 1 + src/App.vue | 2 +- src/components/SideBar.vue | 5 ++--- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.env b/.env index e69de29b..1e215cdd 100644 --- a/.env +++ b/.env @@ -0,0 +1 @@ +http://localhost:5000/ \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index c87ce2e9..7520ad5d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,7 +3,7 @@ Click arrow to open sidebar - +
Hello!
 diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue index 22d01e6a..4f43c7b5 100644 --- a/src/components/SideBar.vue +++ b/src/components/SideBar.vue @@ -3,7 +3,6 @@
- -
+
- +
Date: Thu, 8 Apr 2021 11:31:36 +1200 Subject: [PATCH 02/10] Finish first draft of tabs implementation: - Split drawer and cards/filter into different components - Tabs now conatain context data (in json style format) - Sidebar for each tab, is shown with v-show - Tabs are now in own component --- .env | 2 +- src/App.vue | 27 +- src/components/ContextCard.vue | 84 ++++++ src/components/SideBar.vue | 270 ++---------------- src/components/SidebarContent.vue | 460 ++++++++++++++++++++++++++++++ src/components/Tabs.vue | 73 +++++ 6 files changed, 672 insertions(+), 244 deletions(-) create mode 100644 src/components/ContextCard.vue create mode 100644 src/components/SidebarContent.vue create mode 100644 src/components/Tabs.vue diff --git a/.env b/.env index 1e215cdd..1a75d964 100644 --- a/.env +++ b/.env @@ -1 +1 @@ -http://localhost:5000/ \ No newline at end of file +VUE_APP_API_LOCATION=http://localhost:5000/ \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 7520ad5d..0b7c6b8e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,7 +3,7 @@ Click arrow to open sidebar -
Hello!
 +
@@ -17,10 +17,33 @@ export default { components: { SideBar }, + computed: { + tabs: function(){ + let temp = [...this.tabArray] + for(let i in this.tabArray){ + temp[i].contextCard = this.contextArray[i] + } + return temp + } + }, data: function(){ return { + tabArray: [{title: 'Flatmap', id:1},{title: 'Heart Scaffold', id:2},{title: 'Stomach Scaffold', id:3}], + contextArray: [null,{ + title: "ICN fitted Scaffold", + description: "oints are mapped to their positions on a 3d heart that is mapped to the data.", + bannerImage: 'https://image.prntscr.com/image/BKgqmjSaQjK-B9hy_W7haQ.png', + key: [{ + image: "https://image.prntscr.com/image/DO_ZZXl7RtOXgVDv-Vw6yA.png", + text: "Data type 1" + },{ + image: "https://image.prntscr.com/image/tsnuRyFZTbmYfSjrMHTK8w.png", + text: "Data type 2" + } + ] + }, null], sideBarVisibility: true, - apiLocation: process.env.VUE_APP_API_LOCATION + apiLocation: 'http://localhost:5000/' } }, } diff --git a/src/components/ContextCard.vue b/src/components/ContextCard.vue new file mode 100644 index 00000000..d5b282d1 --- /dev/null +++ b/src/components/ContextCard.vue @@ -0,0 +1,84 @@ + + + + + + + diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue index 4f43c7b5..9f64b83f 100644 --- a/src/components/SideBar.vue +++ b/src/components/SideBar.vue @@ -18,40 +18,12 @@
- -
- - Search -
- -
-
- No results found - Please change your search / filter criteria. -
-
{{sciCrunchError}}
-
- -
- - -
- + + + +
@@ -72,9 +44,8 @@ import { } from "element-ui"; import lang from "element-ui/lib/locale/lang/en"; import locale from "element-ui/lib/locale"; -import SearchFilters from "./SearchFilters"; -import DatasetCard from "./DatasetCard"; -import EventBus from './EventBus'; +import SidebarContent from './SidebarContent.vue'; +import Tabs from './Tabs' locale.use(lang); Vue.use(Button); @@ -85,20 +56,6 @@ Vue.use(Input); Vue.use(Loading); Vue.use(Pagination); -// handleErrors: A custom fetch error handler to recieve messages from the server -// even when an error is found -var handleErrors = async function(response) { - if (!response.ok) { - let parse = await response.json() - if (parse){ - throw new Error(parse.message) - } else { - throw new Error(response) - } - } - return response; -} - var initial_state = { searchInput: "", lastSearch: "", @@ -117,7 +74,7 @@ var initial_state = { } export default { - components: { SearchFilters, DatasetCard }, + components: {SidebarContent, Tabs }, name: "SideBar", props: { visible: { @@ -136,191 +93,43 @@ export default { type: String, default: "" }, + tabs: { + type: Array, + default: () => [] + }, + activeId: { + type: Number, + default: 1 + } }, data: function () { return { ...this.entry, } }, - computed: { - // This computed property populates filter data's entry object with $data from this sidebar - filterEntry: function () { - return { - results: this.results, - lastSearch: this.lastSearch, - numberOfHits: this.numberOfHits, - filterFacet: this.filterFacet - }; - }, - }, methods: { close: function () { this.drawerOpen = !this.drawerOpen; - if(this.drawerOpen && !this.hasSearched){ - this.openSearch(this.searchInput); - } - }, - openSearch: function (search, filter=undefined) { - this.drawerOpen = true; - this.searchInput = search; - this.resetPageNavigation() - this.searchSciCrunch(search, filter); - if (filter){ - this.filterFacet = filter[0].facet; - EventBus.$emit("filterUiUpdate", filter[0].facet); - } - }, - clearSearchClicked: function(){ - this.searchInput = '' - this.resetPageNavigation() - this.searchSciCrunch(this.searchInput) - }, - searchEvent: function (event = false) { - if (event.keyCode === 13 || event instanceof MouseEvent) { - this.resetPageNavigation() - this.searchSciCrunch(this.searchInput); - } }, - filterUpdate: function(filter){ - this.resetPageNavigation() - this.searchSciCrunch(this.searchInput, filter); - this.filter = filter - }, - numberPerPageUpdate: function (val) { - this.numberPerPage = val; - this.pageChange(1); - }, - pageChange: function(page){ - this.start = (page-1) * this.numberPerPage; - this.searchSciCrunch(this.searchInput); - }, - searchSciCrunch: function (search, filter=undefined) { - this.loadingCards = true; - this.results = []; - this.disableCards(); - let params = this.createParams(filter, this.start, this.numberPerPage) - this.callSciCrunch(this.apiLocation, this.searchEndpoint, search, params).then((result) => { - this.sciCrunchError = false - this.resultsProcessing(result) - this.$refs.content.style['overflow-y'] = 'scroll' - }).catch((result) => { - this.sciCrunchError = result.message - }).finally(() => { - this.loadingCards = false - }) - }, - disableCards: function(){ - if(this.$refs.content){ - this.$refs.content.scroll({top:0, behavior:'smooth'}) - this.$refs.content.style['overflow-y'] = 'hidden' - } - }, - resetPageNavigation: function(){ - this.start = 0 - this.page = 1 - }, - createParams: function(filter, start, size){ - var params = {} - if (filter !== undefined){ - params = filter - } else { - params = this.filter; - } - if(params.length > 0){ - for(let i in params){ - if(params[i].start){ - params[i].start = start - params[i].size = size - } - } - } else { - params.start = start - params.size = size - params = [params] - } - return params - }, - resultsProcessing: function (data) { - this.lastSearch = this.searchInput - this.results = []; - let id = 0; - this.numberOfHits = data.numberOfHits; - if (data.results.length === 0){ - return - } - data.results.forEach((element) => { - this.results.push({ - description: element.name, - contributors: element.contributors, - numberSamples: Array.isArray(element.samples) - ? element.samples.length - : 1, - sexes: element.samples - ? element.samples[0].sex - ? [...new Set(element.samples.map((v) => v.sex.value))] - : undefined - : undefined, // This processing only includes each gender once into 'sexes' - organs: (element.organs && element.organs.length > 0) - ? [...new Set(element.organs.map((v) => v.name))] - : undefined, - ages: element.samples - ? "ageCategory" in element.samples[0] - ? [...new Set(element.samples.map((v) => v.ageCategory.value))] - : undefined - : undefined, - updated: element.updated[0].timestamp.split("T")[0], - url: element.uri[0], - datasetId: element.identifier, - csvFiles: element.csvFiles, - id: id, - doi: element.doi, - scaffold: element.scaffolds ? true : false, - scaffolds: element.scaffolds ? element.scaffolds : false - }); - id++; - }); - }, - createfilterParams: function(params){ - var paramsString = '' - for(let param in params){ - paramsString += (new URLSearchParams(params[param])).toString() - paramsString += '&' - } - paramsString = paramsString.slice(0, -1); - return paramsString - }, - callSciCrunch: function (apiLocation, searchEndpoint, search, params={}) { - return new Promise((resolve, reject) => { - var endpoint = apiLocation + searchEndpoint; - // Add parameters if we are sent them - if (search !== '' && Object.entries(params).length !== 0){ - endpoint = endpoint + search + '/?' + this.createfilterParams(params) - } else { - endpoint = endpoint + '?' + this.createfilterParams(params) - } - - fetch(endpoint) - .then(handleErrors) - .then((response) => response.json()) - .then((data) => resolve(data)) - .catch((data) => reject(data)) - }); + titleClicked: function(id) { + this.activeId = id + this.$emit("titleClicked", id); }, }, - created: function () { - //Create non-reactive local variables - this.searchEndpoint = "filter-search/"; - }, - mounted: function() { - EventBus.$on("PopoverActionClick", (payLoad) => { - this.$emit("actionClick", payLoad); - }); - }, }; diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue new file mode 100644 index 00000000..1eb660d7 --- /dev/null +++ b/src/components/Tabs.vue @@ -0,0 +1,73 @@ + + + + + + From 6a0485b14d39143e2b263e4661e59d1d44873112 Mon Sep 17 00:00:00 2001 From: Jesse Khorasanee Date: Thu, 8 Apr 2021 16:46:00 +1200 Subject: [PATCH 03/10] Finish adding cards to top of sidebar --- src/App.vue | 30 +++++++++++++++++++++++----- src/components/ContextCard.vue | 36 ++++++++++++++++++++++------------ src/components/SideBar.vue | 9 +++------ 3 files changed, 52 insertions(+), 23 deletions(-) diff --git a/src/App.vue b/src/App.vue index 0b7c6b8e..9566f4c7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,7 +3,7 @@ Click arrow to open sidebar - + @@ -30,22 +30,42 @@ export default { return { tabArray: [{title: 'Flatmap', id:1},{title: 'Heart Scaffold', id:2},{title: 'Stomach Scaffold', id:3}], contextArray: [null,{ + title: "Neural paths mapped to a heart scaffold", + description: "Points are mapped to their positions on a 3d heart that is mapped to the data.", + bannerImage: 'https://image.prntscr.com/image/aNIksBFARaKwlKhpnDCKbA.png', + keys: [{ + image: "https://image.prntscr.com/image/VqNcZ8fSQJu5TJEf9ahwvA.png", + text: "Neural path" + }], + },{ title: "ICN fitted Scaffold", - description: "oints are mapped to their positions on a 3d heart that is mapped to the data.", + description: "Points are mapped to their positions on a 3d heart that is mapped to the data.", bannerImage: 'https://image.prntscr.com/image/BKgqmjSaQjK-B9hy_W7haQ.png', - key: [{ + keys: [{ image: "https://image.prntscr.com/image/DO_ZZXl7RtOXgVDv-Vw6yA.png", text: "Data type 1" },{ image: "https://image.prntscr.com/image/tsnuRyFZTbmYfSjrMHTK8w.png", text: "Data type 2" + },{ + image: "https://image.prntscr.com/image/DO_ZZXl7RtOXgVDv-Vw6yA.png", + text: "Data type 3" + },{ + image: "https://image.prntscr.com/image/tsnuRyFZTbmYfSjrMHTK8w.png", + text: "Data type 4" } ] - }, null], + }], sideBarVisibility: true, - apiLocation: 'http://localhost:5000/' + apiLocation: 'http://localhost:5000/', + activeId: 1, } }, + methods:{ + tabClicked: function(id){ + this.activeId = id + } + } } diff --git a/src/components/ContextCard.vue b/src/components/ContextCard.vue index d5b282d1..4b6f73f8 100644 --- a/src/components/ContextCard.vue +++ b/src/components/ContextCard.vue @@ -1,16 +1,17 @@ @@ -45,6 +46,7 @@ export default { }, data: function () { return { + showDetails: true }; }, computed: { @@ -57,6 +59,12 @@ export default { diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue index 9f64b83f..4fbd8153 100644 --- a/src/components/SideBar.vue +++ b/src/components/SideBar.vue @@ -18,9 +18,7 @@
- - - + @@ -111,9 +109,8 @@ export default { close: function () { this.drawerOpen = !this.drawerOpen; }, - titleClicked: function(id) { - this.activeId = id - this.$emit("titleClicked", id); + tabClicked: function(id) { + this.$emit("tabClicked", id); }, }, }; From 7af21d46dbc062e933bcee71b7856225e9d17e95 Mon Sep 17 00:00:00 2001 From: Jesse Khorasanee Date: Thu, 8 Apr 2021 17:07:09 +1200 Subject: [PATCH 04/10] Change apiLocation back to what it was --- src/App.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.vue b/src/App.vue index 9566f4c7..fd7f8252 100644 --- a/src/App.vue +++ b/src/App.vue @@ -57,7 +57,7 @@ export default { ] }], sideBarVisibility: true, - apiLocation: 'http://localhost:5000/', + apiLocation: process.env.VUE_APP_API_LOCATION, activeId: 1, } }, From 61d0e7e9280661f20b59af7438368856c5b63593 Mon Sep 17 00:00:00 2001 From: Jesse Khorasanee Date: Thu, 8 Apr 2021 17:58:14 +1200 Subject: [PATCH 05/10] Use dynamic refs to search from outside sidebar --- src/components/SideBar.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue index 4fbd8153..44ebfd02 100644 --- a/src/components/SideBar.vue +++ b/src/components/SideBar.vue @@ -20,7 +20,7 @@ @@ -109,6 +109,9 @@ export default { close: function () { this.drawerOpen = !this.drawerOpen; }, + openSearch: function(term, facets){ + this.$refs[this.activeId].openSearch(term, facets) + } tabClicked: function(id) { this.$emit("tabClicked", id); }, From 253e0eb818d475f8e7da362f4326dd2579c39339 Mon Sep 17 00:00:00 2001 From: Jesse Khorasanee Date: Thu, 8 Apr 2021 19:42:05 +1200 Subject: [PATCH 06/10] Finished first run of adding tabs to sidebar: - dataset cards now output context cards - dynamic refs used to access the v-for sidebars function "opensearch". This currently requires a timer hack, looking for a solution - Eventbus moved back to sidebar.vue to be top level --- src/App.vue | 6 ++++- src/components/DatasetCard.vue | 1 + src/components/SideBar.vue | 29 +++++++++++++++++---- src/components/SidebarContent.vue | 5 ---- src/components/scaffold-meta-map.js | 39 ++++++++++++++++++++++++++--- 5 files changed, 65 insertions(+), 15 deletions(-) diff --git a/src/App.vue b/src/App.vue index fd7f8252..0a6f4757 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,7 +3,8 @@ Click arrow to open sidebar - + search 'heart' from refs + @@ -64,6 +65,9 @@ export default { methods:{ tabClicked: function(id){ this.activeId = id + }, + openSearch: function(){ + this.$refs.sideBar.openSearch('heart', [{facet: 'All Species', term:'species'}] ) } } } diff --git a/src/components/DatasetCard.vue b/src/components/DatasetCard.vue index a470b5dc..98c2ede9 100644 --- a/src/components/DatasetCard.vue +++ b/src/components/DatasetCard.vue @@ -87,6 +87,7 @@ export default { title: "View 3D scaffold", type: "Scaffold", discoverId: this.discoverId, + contextCard: scaffoldMetaMap[this.discoverId].contextCard } EventBus.$emit("PopoverActionClick", action) }, diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue index 44ebfd02..bf562cc3 100644 --- a/src/components/SideBar.vue +++ b/src/components/SideBar.vue @@ -1,5 +1,5 @@ diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue index bf562cc3..e4540bdf 100644 --- a/src/components/SideBar.vue +++ b/src/components/SideBar.vue @@ -20,7 +20,7 @@ @@ -112,28 +112,17 @@ export default { }, openSearch: function(term, facets){ this.drawerOpen = true - this.$refs[this.activeId][0].openSearch(term, facets) + // Because refs are in v-for, nextTick is needed here + Vue.nextTick(()=>{this.$refs[this.activeId][0].openSearch(term, facets)}) }, tabClicked: function(id) { this.$emit("tabClicked", id); }, - // Timer hack to force v-for refs to be available - forceRefRender: function(){ - this.$refs.container.style.opacity = 0 - this.drawerOpen = true - setTimeout(()=>{ - this.drawerOpen = false - },1) - setTimeout(()=>{ - this.$refs.container.style.opacity = '100%' - },512) - } }, mounted: function(){ EventBus.$on("PopoverActionClick", (payLoad) => { this.$emit("actionClick", payLoad); }) - this.forceRefRender() } }; diff --git a/src/components/SidebarContent.vue b/src/components/SidebarContent.vue index daf1e7f8..8aa3e689 100644 --- a/src/components/SidebarContent.vue +++ b/src/components/SidebarContent.vue @@ -120,6 +120,10 @@ components: { SearchFilters, DatasetCard, ContextCard }, type: String, default: "" }, + firstSearch: { + type: String, + default: "" + } }, data: function () { return { @@ -291,6 +295,9 @@ components: { SearchFilters, DatasetCard, ContextCard }, }); }, }, + mounted: function(){ + this.openSearch(this.firstSearch,[]) + }, created: function () { //Create non-reactive local variables this.searchEndpoint = "filter-search/"; From c774017c9bd197a23dd594c26c8ba689661a4402 Mon Sep 17 00:00:00 2001 From: Jesse Khorasanee Date: Fri, 9 Apr 2021 12:30:25 +1200 Subject: [PATCH 08/10] Fix tab container being slightly too big --- src/components/Tabs.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue index 1eb660d7..af0c5416 100644 --- a/src/components/Tabs.vue +++ b/src/components/Tabs.vue @@ -37,9 +37,13 @@ export default {