feat(apps/directory): adds viewing of studies related to collections

molgenis · Jun 3, 2024 · 5abb2e3 · 5abb2e3
1 parent 5eb4932
commit 5abb2e3
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 0 deletions.
diff --git a/apps/directory/src/components/report-components/CollectionReportInfoCard.vue b/apps/directory/src/components/report-components/CollectionReportInfoCard.vue
@@ -98,6 +98,26 @@
               </li>
             </ul>
           </template>
+          <template v-if="info.study">
+            <h5>Study</h5>
+            <ul class="right-content-list">
+              <li>
+                <span class="font-weight-bold mr-2">Name:</span>
+                <span>{{ info.study.title }}</span>
+                <div>
+                  <span
+                    class="fa fa-fw fa-address-card mr-2"
+                    aria-hidden="true"
+                  />
+                  <router-link :to="info.study.report">
+                    <span>
+                      {{ uiText["view"] }} {{ info.study.title }} study
+                    </span>
+                  </router-link>
+                </div>
+              </li>
+            </ul>
+          </template>
           <template v-if="info.collaboration.length > 0">
             <h5>Collaboration</h5>
             <div class="container p-0">

diff --git a/apps/directory/src/functions/viewmodelMapper.js b/apps/directory/src/functions/viewmodelMapper.js
@@ -265,6 +265,16 @@ export function getCollectionDetails(collection, isBiobankWithdrawn) {
   };
 }
 
+export function getStudyDetails(study) {
+  const settingsStore = useSettingsStore();
+  const viewmodel = getViewmodel(study, settingsStore.config.studyColumns);
+
+  return {
+    ...study,
+    viewmodel,
+  };
+}
+
 export const getBiobankDetails = (biobank) => {
   const settingsStore = useSettingsStore();
 
@@ -336,6 +346,14 @@ export const collectionReportInformation = (collection) => {
     collectionReport.certifications = mapQualityStandards(collection.quality);
   }
 
+  if (collection.study) {
+    collectionReport.study = {
+      id: collection.study.id,
+      title: collection.study.title,
+      report: `/study/${collection.study.id}`,
+    };
+  }
+
   collectionReport.collaboration = [];
 
   if (collection.collaboration_commercial) {
@@ -357,6 +375,14 @@ export const collectionReportInformation = (collection) => {
   return collectionReport;
 };
 
+export const studyReportInformation = (study) => {
+  const studyReport = {};
+
+  studyReport.also_known = study.also_known ? mapAlsoKnownIn(study) : undefined;
+
+  return studyReport;
+};
+
 export const mapNetworkInfo = (data) => {
   return data.network.map((network) => {
     return {

diff --git a/apps/directory/src/property-config/initialCollectionColumns.js b/apps/directory/src/property-config/initialCollectionColumns.js
@@ -78,6 +78,11 @@ const initialCollectionColumns = [
     column: { data_use: ["label", "ontologyTermURI"] },
     type: "array",
   },
+  {
+    label: "Study:",
+    column: { study: ["id", "title"] },
+    type: "xref",
+  },
   {
     column: [
       "name",

diff --git a/apps/directory/src/router/index.js b/apps/directory/src/router/index.js
@@ -5,6 +5,7 @@ import Landingpage from "../views/Landingpage.vue";
 import BiobankReport from "../views/BiobankReport.vue";
 import NetworkReport from "../views/NetworkReport.vue";
 import CollectionReport from "../views/CollectionReport.vue";
+import StudyReport from "../views/StudyReport.vue";
 import ConfigurationScreen from "../views/ConfigurationScreen.vue";
 import { useSettingsStore } from "../stores/settingsStore";
 
@@ -32,6 +33,11 @@ const router = createRouter({
       component: BiobankReport,
     },
     { path: "/network/:id", name: "networkdetails", component: NetworkReport },
+    {
+      path: "/study/:id",
+      name: "studydetails",
+      component: StudyReport,
+    },
     {
       path: "/configuration",
       component: ConfigurationScreen,

diff --git a/apps/directory/src/stores/settingsStore.js b/apps/directory/src/stores/settingsStore.js
@@ -7,6 +7,7 @@ import initialBiobankColumns from "../property-config/initialBiobankColumns";
 import initialBiobankReportColumns from "../property-config/initialBiobankReportColumns";
 import initialLandingpage from "../property-config/initialLandingpage";
 import { QueryEMX2 } from "molgenis-components";
+import initialStudyColumns from "../property-config/initialStudyColumns";
 /**
  * Settings store is where all the configuration of the application is handled.
  * This means that user config from the database is merged with the defaults here.
@@ -28,6 +29,7 @@ export const useSettingsStore = defineStore("settingsStore", () => {
     biobankColumns: initialBiobankColumns,
     biobankReportColumns: initialBiobankReportColumns,
     collectionColumns: initialCollectionColumns,
+    studyColumns: initialStudyColumns,
     filterFacets: initialFilterFacets,
     filterMenuInitiallyFolded: false,
     biobankCardShowCollections: true,