feat(data/biobank-directory): fixes Study model

Author: svituz

apps/directory/src/components/report-components/ReportStudyDetails.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <div class="d-flex">
+      <report-description
+        :description="study.description"
+        :maxLength="500"
+      ></report-description>
+    </div>
+
+    <!-- study information -->
+    <view-generator :viewmodel="studyModel.viewmodel" />
+  </div>
+</template>
+
+<script>
+import { getStudyDetails } from "../../functions/viewmodelMapper";
+import ReportDescription from "../report-components/ReportDescription.vue";
+import ViewGenerator from "../generators/ViewGenerator.vue";
+
+export default {
+  name: "ReportStudyDetails",
+  props: {
+    study: {
+      type: Object,
+      required: true,
+    },
+  },
+  components: {
+    ReportDescription,
+    ViewGenerator,
+  },
+  computed: {
+    studyModel() {
+      return this.study ? getStudyDetails(this.study) : {};
+    },
+  },
+};
+</script>

apps/directory/src/components/report-components/StudyReportInfoCard.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="col-md-4">
+    <div class="card">
+      <div class="card-body">
+        <div class="card-text">
+          <template v-if="info.also_known">
+            <h5>Also Known In</h5>
+            <ReportDetailsList :reportDetails="info.also_known" />
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { toRefs } from "vue";
+import ReportDetailsList from "../../components/report-components/ReportDetailsList.vue";
+
+const props = defineProps(["info"]);
+let { info } = toRefs(props);
+</script>
+
+<style scoped>
+.right-content-list {
+  list-style-type: none;
+  margin-left: -2.5rem;
+}
+.right-content-list:not(:last-child) {
+  margin-bottom: 1.5rem;
+}
+
+.right-content-list li {
+  margin-bottom: 0.5rem;
+}
+
+.info-list {
+  margin-bottom: 1rem;
+}
+
+.cert-badge:not(:last-child) {
+  margin-right: 1rem;
+}
+</style>

apps/directory/src/property-config/initialStudyColumns.js

@@ -0,0 +1,23 @@
+const initialStudyColumns = [
+  { label: "Id:", column: "id", type: "string", showCopyIcon: true },
+  { label: "Title:", column: "title", type: "string" },
+  { label: "Description:", column: "description", type: "string" },
+  { label: "Type:", column: "type", type: "string" },
+  { label: "Sex:", column: { sex: ["label"] }, type: "array" },
+  { label: "Number of subjects:", column: "number_of_subjects", type: "int" },
+  {
+    label: "Age:",
+    type: "range",
+    min: "age_high",
+    max: "age_low",
+    unit: "age_unit",
+    unit_column: { age_unit: ["label"] },
+  },
+  {
+    label: "Also Known In:",
+    column: { also_known: ["name_system", "url"] },
+    type: "xref",
+  },
+];
+
+export default initialStudyColumns;

apps/directory/src/stores/studyStore.js

@@ -0,0 +1,43 @@
+import { defineStore } from "pinia";
+import { QueryEMX2 } from "molgenis-components";
+import { useSettingsStore } from "./settingsStore";
+
+export const useStudyStore = defineStore("studyStore", () => {
+  const settingsStore = useSettingsStore();
+
+  const studyColumns = settingsStore.config.studyColumns;
+  const graphqlEndpoint = settingsStore.config.graphqlEndpoint;
+
+  function getStudyColumns() {
+    const properties = studyColumns
+      .filter((column) => column.column)
+      .flatMap((studyColumn) => studyColumn.column);
+
+    const rangeProperties = studyColumns.filter(
+      (column) => column.type === "range"
+    );
+
+    for (const property of rangeProperties) {
+      properties.push(property.min, property.max, property.unit_column);
+    }
+
+    return properties;
+  }
+
+  async function getStudyReport(id) {
+    const studyReportQuery = new QueryEMX2(graphqlEndpoint)
+      .table("Studies")
+      .select(getStudyColumns())
+      .orderBy("Studies", "id", "asc")
+      .where("id")
+      .like(id);
+    const reportResults = await studyReportQuery.execute();
+
+    return reportResults;
+  }
+
+  return {
+    getStudyColumns,
+    getStudyReport,
+  };
+});

apps/directory/src/views/StudyReport.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="container mg-network-report-card">
+    <div
+      v-if="!loaded"
+      class="d-flex justify-content-center align-items-center spinner-container"
+    >
+      <Spinner />
+    </div>
+    <div v-else class="container-fluid">
+      <div class="row">
+        <div class="col my-3 shadow-sm d-flex p-2 align-items-center bg-white">
+          <Breadcrumb
+            class="directory-nav"
+            :crumbs="{
+              [uiText['home']]: '../#/',
+              [study.title]: '/',
+            }"
+          />
+        </div>
+      </div>
+
+      <div class="row" v-if="study">
+        <div class="col">
+          <report-title type="Study" :name="study.title" />
+          <div class="container">
+            <div class="row">
+              <div class="container p-0">
+                <div class="row">
+                  <div class="col-md-8">
+                    <report-study-details v-if="study" :study="study" />
+                  </div>
+                  <study-report-info-card :info="info" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Breadcrumb, Spinner } from "molgenis-components";
+import { computed, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import ReportStudyDetails from "../components/report-components/ReportStudyDetails.vue";
+import StudyReportInfoCard from "../components/report-components/StudyReportInfoCard.vue";
+import ReportTitle from "../components/report-components/ReportTitle.vue";
+import { studyReportInformation } from "../functions/viewmodelMapper";
+import { useStudyStore } from "../stores/studyStore";
+import { useSettingsStore } from "../stores/settingsStore";
+
+const settingsStore = useSettingsStore();
+const studyStore = useStudyStore();
+
+const route = useRoute();
+const study = ref({});
+
+let loaded = ref(false);
+
+loadStudyReport(route.params.id);
+
+watch(route, async (route) => {
+  loadStudyReport(route.params.id);
+});
+
+const uiText = computed(() => settingsStore.uiText);
+
+const studyDataAvailable = computed(() => {
+  return Object.keys(study).length;
+});
+
+const info = computed(() => {
+  return studyDataAvailable.value ? studyReportInformation(study.value) : {};
+});
+
+function loadStudyReport(id) {
+  loaded.value = false;
+  const studyPromise = studyStore.getStudyReport(id).then((result) => {
+    study.value = result.Studies.length ? result.Studies[0] : {};
+  });
+  Promise.all([studyPromise]).then(() => {
+    loaded.value = true;
+  });
+}
+</script>

data/biobank-directory/molgenis.csv

@@ -12,7 +12,7 @@ AlsoKnownIn,,id,ID,string,1,true,true,Unique ID.,,,,,,,,,
 AlsoKnownIn,,name_system,Name of the System,string,,true,,"Name of the source in which the biobank, collection or network also exists.",,,,,,,,,
 AlsoKnownIn,,pid,Persistent Identifier,string,,false,,"Persistent Identifier of the biobank, collection or network in the other source.",,,,,,,,,
 AlsoKnownIn,,url,URL,hyperlink,,true,,"Link to the biobank, collection or network in the other source.",,,,,,,,,
-AlsoKnownIn,,national_node,National Node,ref,,true,,"The biobank, collection or network where this also known In refers to originates from this national node.",,NationalNodes,,${description},,,,,
+AlsoKnownIn,,national_node,National Node,ref,,false,,"The biobank, collection or network where this also known In refers to originates from this national node.",,NationalNodes,,${description},,,,,
 AlsoKnownIn,,label,Name of the System,string,,false,true,"Name of the source in which the biobank, collection or network also exists.",,,,,,,,name_system,
 Biobanks,,,,,,,,"Description of the biobank organisation, like name, location, network, contact person, collaboration opportunities and quality assessments.",,,,,,,,,
 Biobanks,,id,ID,string,1,true,true,"Unique biobank ID within BBMRI-ERIC based on MIABIS 2.0 standard (ISO 3166-1 alpha-2 + underscore + biobank national ID or name), prefixed with bbmri-eric:ID: string - MIABIS-2.0-01.",,,,,,,,,
@@ -115,6 +115,7 @@ Collections,,access_joint_project,Access via Join Projects to,ontology_array,,fa
 Collections,,access_description,Access Description,text,,false,,Short description of the access rules.,,,,,,,,,
 Collections,,access_uri,Access URI,hyperlink,,false,,URI describing the access policy.,,,,,,,,,
 Collections,,sop,PD/SOPs,ontology_array,,false,,Availability of Process Descriptions (PDs) and/or Standard Operating Procedures (SOPs).,DirectoryOntologies,SOPs,,${label},,,,,
+Collections,,study,Study,ref,,false,,A link to a Study during which the collection was generated,,Studies,,,,,,,
 ContactPersonsNationalNodes,,,,,,,,Contact persons national nodes,,,,,,,,,
 ContactPersonsNationalNodes,,id,ID,string,1,true,true,Unique ID.,,,,,,,,,
 ContactPersonsNationalNodes,,first_name,First name,string,,false,,First name.,,,,,,,,,
@@ -167,10 +168,10 @@ Studies,,id,ID,string,1,true,,"Unique ID of the study, prefixed with bbmri-eric:
 Studies,,title,Title,text,,true,,The title of the study,,,,,,,,,
 Studies,,description,Description,text,,false,,A text describing the study,,,,,,,,,
 Studies,,type,Type,string,,false,,"The type of study (Observational, Interventional). This is a string imported from ECRIN",,,,,,,,,
-Studies,,sex,Sex,ontology_array,,false,,"The sex of the individuals that participated to the study",,SexTypes,,,,,,,
+Studies,,sex,Sex,ontology_array,,false,,"The sex of the individuals that participated to the study",DirectoryOntologies,SexTypes,,,,,,,
 Studies,,age_low,Age Low,int,,false,,Age of youngest sample donor at time of sample donation - MIABIS-2.0-10.,,,,,,,,,
 Studies,,age_high,Age High,int,,false,,Age of oldest sample donor at time of sample donation - MIABIS-2.0-11.,,,,,,,,,
-Studies,,age_unit,Age Unit,ontology,,false,,"Unit defining Age Low and Age High. Can be one of the following values: YEAR, MONTH, WEEK, DAY - MIABIS-2.0-08.",,AgeUnits,,${label},,,,,
+Studies,,age_unit,Age Unit,ontology,,false,,"Unit defining Age Low and Age High. Can be one of the following values: YEAR, MONTH, WEEK, DAY - MIABIS-2.0-08.",DirectoryOntologies,AgeUnits,,${label},,,,,
 Studies,,number_of_subjects,Number of subjects,int,,false,,"The number of subjects that participated to the study",,,,,,,,,
 Studies,,also_known,Also Known In,ref_array,,false,,The study also exists in …,,AlsoKnownIn,,${name_system},,,,,
-Studies,,collections,Collection,refback,,false,true,,,Collections,study,,,,,,
+Studies,,collections,Collections,refback,,false,true,,,Collections,study,,,,,,