From 65bc01d48e81029e5244b809ecf00f89aab65508 Mon Sep 17 00:00:00 2001 From: Stephan Heunis Date: Mon, 11 Dec 2023 22:42:59 +0100 Subject: [PATCH 1/2] Add new component to render an 'additional_tab_display' with context information This update stems from the work done on the SFB1451 catalog regarding the rendering of semantic information, see: https://github.com/psychoinformatics-de/sfb1451-projects-catalog/pull/62/files. A new async component is introduced to encapsulate any rendering of 'additional_tab_display's that have an '@context' key in their 'content' field. The component was created to remove specific implementation details related to semantics from the overall dataset page rendering (i.e. from the dataset-template component). This allows for future changes to the semantic tab rendering without affecting how the component is invoked. --- .../assets/app_component_contexttab.js | 33 +++++++++ datalad_catalog/catalog/index.html | 5 +- .../templates/context-tab-template.html | 70 +++++++++++++++++++ .../catalog/templates/dataset-template.html | 11 +-- 4 files changed, 113 insertions(+), 6 deletions(-) create mode 100644 datalad_catalog/catalog/assets/app_component_contexttab.js create mode 100644 datalad_catalog/catalog/templates/context-tab-template.html diff --git a/datalad_catalog/catalog/assets/app_component_contexttab.js b/datalad_catalog/catalog/assets/app_component_contexttab.js new file mode 100644 index 00000000..efe28aa9 --- /dev/null +++ b/datalad_catalog/catalog/assets/app_component_contexttab.js @@ -0,0 +1,33 @@ +// Component definition: an "additional tab" with context +Vue.component('context-tab-body', function (resolve, reject) { + url = template_dir + "/context-tab-template.html" + fetch(url). + then(response => { + return response.text(); + }). + then(text => { + resolve( + { + template: text, + props: { + tabby: Object, + }, + data: function () { + return { + context_tab_ready: false, + }; + }, + computed: {}, + methods: { + toUpperString(str_in) { + return str_in.charAt(0).toUpperCase() + str_in.slice(1) + } + }, + async created() { + this.context_tab_ready = true; + // console.log(new_tab) + } + } + ) + }); +}); \ No newline at end of file diff --git a/datalad_catalog/catalog/index.html b/datalad_catalog/catalog/index.html index add1c04b..4b317dc3 100644 --- a/datalad_catalog/catalog/index.html +++ b/datalad_catalog/catalog/index.html @@ -20,8 +20,8 @@ - - + + @@ -72,6 +72,7 @@ + diff --git a/datalad_catalog/catalog/templates/context-tab-template.html b/datalad_catalog/catalog/templates/context-tab-template.html new file mode 100644 index 00000000..ffc2a6ba --- /dev/null +++ b/datalad_catalog/catalog/templates/context-tab-template.html @@ -0,0 +1,70 @@ + + + + + + + {{ toUpperString(content_key) }} + + +   + + {{ tabby.content?.['@context']?.[content_key] }} + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/datalad_catalog/catalog/templates/dataset-template.html b/datalad_catalog/catalog/templates/dataset-template.html index 92a5ec1f..d2c594e6 100644 --- a/datalad_catalog/catalog/templates/dataset-template.html +++ b/datalad_catalog/catalog/templates/dataset-template.html @@ -466,7 +466,7 @@
{{fund.name}}(fund name not s - +