feat(dashboards): connect CRANIO dashboard to the database

apps/cranio-provider/README.md

@@ -23,16 +23,18 @@ Changes can be made to the application by cloning the `molgenis/molgenis-emx2` r
 
 ### Setting up your development instance
 
-Select an EMX2 instance to use as your development instance. Log in as admin and create two schemas:
+Select an EMX2 instance to use as your development instance. Log in as admin and create three schemas:
 
 1. Public Schema: used to display the `cranio-public` vue application. Use the template `ERN_DASHBOARDS`. Give it a name e.g., `ErnStats`
 2. Provider Schema: An organisation-level schema to display the `cranio-provider` vue application. Use one of the organisations listed in the [Cranio Organisations.csv](https://github.com/molgenis/projects-rd-erns/blob/main/erns/cranio/imports/organisations.csv) file. The name of the schema is listed in the column `schemaName`. For example, use `DK1` to create a schema for `Aarhus University Hospital`.
+3. All Providers schema: A schema used to store the all site (or ERN wide) aggregations
 
 After creating both schemas, navigate to the settings table in the provider schema. Here we will create a reference to the public schema to link the provider with public schemas. This allows the vue applications to be independent and to avoid hardcoding any schema information. The key is hardcoded.
 
-| Key | Value |
-|-----|-------|
-| CRANIO_PUBLIC_SCHEMA | `<public_schema_name>` |
+| Key                    | Value                    |
+|------------------------|--------------------------|
+| CRANIO_PUBLIC_SCHEMA   | `<public_schema_name>`   |
+| CRANIO_PROVIDER_SCHEMA | `<provider_schema_name>` |
 
 Using the example schema name created in step one, we would use `ErnStats`.
 

apps/cranio-provider/index.html

@@ -16,6 +16,6 @@
       >
     </noscript>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

apps/cranio-provider/package.json

@@ -6,8 +6,9 @@
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "format": "prettier src  --write --config ../.prettierrc.js",
-    "checkFormat": "prettier src  --check --config ../.prettierrc.js"
+    "format": "prettier src tests  --write --config ../.prettierrc.js",
+    "checkFormat": "prettier src  --check --config ../.prettierrc.js",
+    "test": "vitest"
   },
   "dependencies": {
     "@heroicons/vue": "^2.0.18",

apps/cranio-provider/src/App.vue

@@ -4,50 +4,49 @@
       <LoadingScreen v-if="loading && !error" />
       <div class="message-box-container" v-else-if="!loading && error">
         <MessageBox type="error">
-          <p><{{ error }}</p>
+          <p>{{ error }}</p>
         </MessageBox>
       </div>
       <div v-else>
         <PageHeader
           title="ERN CRANIO Registry"
-          :subtitle="provider.name"
+          :subtitle="currentOrganisation?.name"
           :imageSrc="
-            Object.hasOwn(provider.image, 'id')
-              ? `${provider.image.url}`
+            currentOrganisation?.image
+              ? `${currentOrganisation?.image?.url}`
               : 'img/banner-diagnoses.jpg'
           "
         />
-        <PageSection
-          class="bg-gray-050"
-          aria-labelledby="temp-message-title"
-          :verticalPadding="1"
-        >
-          <h2 id="temp-message-title" class="visually-hidden">
-            About the dashboards
-          </h2>
-          <MessageBox type="warning">
-            <p>
-              This dashboard is currently under development. All data shown in
-              the following visualisations have been randomly generated for
-              demonstration purposes.
-            </p>
-          </MessageBox>
-        </PageSection>
         <Dashboard class="provider-dashboard-container" :horizontalPadding="5">
           <ProviderSidebar />
           <router-view
-            :providerId="provider.id"
-            :providerName="provider.name"
+            :organisation="currentOrganisation"
+            :schemaNames="cranioSchemas"
+            :api="{
+              graphql: {
+                current: `/${currentOrganisation?.schemaName}/api/graphql`,
+                public: `/${cranioSchemas?.CRANIO_PUBLIC_SCHEMA}/api/graphql`,
+                providers: `/${cranioSchemas?.CRANIO_PROVIDER_SCHEMA}/api/graphql`,
+              },
+            }"
           ></router-view>
         </Dashboard>
       </div>
     </Page>
-    <AppFooter :publicSchema="cranioPublicSchema" />
+    <AppFooter :publicSchema="cranioSchemas?.CRANIO_PUBLIC_SCHEMA" />
   </Molgenis>
 </template>
 
 <script setup lang="ts">
 import { ref, onBeforeMount } from "vue";
+import { getCranioSchemaNames } from "./utils/getCranioSchemaNames";
+import { getSchemaName } from "./utils/getSchemaName";
+import { getOrganisation } from "./utils/getOrganisation";
+
+import type { IMgErrorResponse, ICranioSchemas } from "./types";
+import type { IOrganisations } from "./types/schema";
+
+// @ts-ignore
 import { Molgenis } from "molgenis-components";
 import {
   Page,
@@ -56,101 +55,39 @@ import {
   Dashboard,
   MessageBox,
   LoadingScreen,
+  // @ts-ignore
 } from "molgenis-viz";
 
+// @ts-ignore
 import ProviderSidebar from "./components/ProviderSidebar.vue";
 import AppFooter from "./components/AppFooter.vue";
 
-import gql from "graphql-tag";
-import { request } from "graphql-request";
-
 const session = ref(null);
 const page = ref(null);
 
-let loading = ref<boolean>(true);
-let error = ref<Error | null>(null);
-let cranioPublicSchema = ref<string | null>(null);
-let schema = ref<object | null>(null);
-let provider = ref<object | null>(null);
-
-async function getCranioPublicSchema() {
-  const query = gql`
-    {
-      _settings {
-        key
-        value
-      }
-    }
-  `;
-  const response = await request("../api/graphql", query);
-  const result = response._settings?.filter(
-    (row) => row.key === "CRANIO_PUBLIC_SCHEMA"
-  )[0];
+const loading = ref<boolean>(true);
+const error = ref<string>();
+const cranioSchemas = ref<ICranioSchemas>();
+const currentSchemaName = ref<string>();
+const currentOrganisation = ref<IOrganisations>();
 
-  if (!result.value) {
-    throw new Error(
-      "Missing the name of the schema that controls the vue application cranio_public. In the current schema, navigate to the settings table. Add a new setting with the key 'CRANIO_PUBLIC_SCHEMA' and enter the name in the value column. Hit save and refresh the page."
+onBeforeMount(async () => {
+  try {
+    cranioSchemas.value = await getCranioSchemaNames();
+    currentSchemaName.value = await getSchemaName();
+    currentOrganisation.value = await getOrganisation(
+      `/${cranioSchemas.value?.CRANIO_PUBLIC_SCHEMA}/api/graphql`,
+      currentSchemaName.value
     );
-  } else {
-    cranioPublicSchema.value = result.value;
-  }
-}
-
-async function getSchemaMeta() {
-  const query = gql`
-    {
-      _schema {
-        name
-      }
+  } catch (err: unknown) {
+    if (Object.hasOwn(err as Error, "response")) {
+      const message = (err as IMgErrorResponse).response.errors[0].message;
+      error.value = message;
+    } else {
+      error.value = (err as Error).message;
     }
-  `;
-  const result = await request("../api/graphql", query);
-  schema.value = result._schema.name;
-}
-
-async function getProviderMeta() {
-  const query = gql`{
-    Organisations (
-      filter: {
-        providerInformation: {
-          providerIdentifier: {
-            equals: "${schema.value}"
-          }
-        }
-      }
-    ) {
-      name
-      image {
-        id
-        url
-        size
-        extension
-      }
-      providerInformation {
-        providerIdentifier
-      }
-    }
-  }`;
-
-  const result = await request(
-    `/${cranioPublicSchema.value}/api/graphql`,
-    query
-  );
-  const data = result.Organisations[0];
-  data.id = data.providerInformation[0].providerIdentifier;
-  delete data.providerInformation;
-  provider.value = data;
-}
-
-async function loadData() {
-  await getSchemaMeta();
-  await getProviderMeta();
-}
-
-onBeforeMount(async () => {
-  await getCranioPublicSchema().catch((err) => (error.value = err));
-  await loadData()
-    .catch((err) => (error.value = err))
-    .finally(() => (loading.value = false));
+  } finally {
+    loading.value = false;
+  }
 });
 </script>

apps/cranio-provider/src/components/AppFooter.vue

@@ -12,24 +12,24 @@
               <a :href="`/${publicSchema}/cranio-public/#/about`">About</a>
             </li>
             <li>
-              <a :href="`/${publicSchema}/cranio-public/#/dashboard`"
-                >Dashboard</a
-              >
+              <a :href="`/${publicSchema}/cranio-public/#/dashboard`">
+                Dashboard
+              </a>
             </li>
           </UnorderedList>
         </div>
         <div class="footer-column footer-links">
           <p><strong>For Members</strong></p>
           <UnorderedList listType="none">
             <li>
-              <a :href="`/${publicSchema}/cranio-public/#/Providers`"
-                >Providers</a
-              >
+              <a :href="`/${publicSchema}/cranio-public/#/Providers`">
+                Providers
+              </a>
             </li>
             <li>
-              <a :href="`/${publicSchema}/cranio-public/#/Documents`"
-                >Documents</a
-              >
+              <a :href="`/${publicSchema}/cranio-public/#/Documents`">
+                Documents
+              </a>
             </li>
           </UnorderedList>
         </div>
@@ -65,10 +65,11 @@
 </template>
 
 <script setup lang="ts">
+// @ts-ignore
 import { PageFooter, UnorderedList } from "molgenis-viz";
 
-const props = defineProps<{
-  publicSchema: string | null;
+defineProps<{
+  publicSchema?: string;
 }>();
 </script>
 

apps/cranio-provider/src/components/DashboardChartLayout.vue

@@ -1,25 +1,18 @@
 <template>
-  <div :class="classNames">
+  <div class="dashboard-chart-layout" :class="`columns-${columns}`">
     <slot></slot>
   </div>
 </template>
 
-<script setup>
-import { computed } from "vue";
-
-const props = defineProps({
-  columns: {
-    type: Number,
-    default: 2,
-    validator: (value) => {
-      return value >= 1 && value <= 4;
-    },
-  },
-});
-
-const classNames = computed(() => {
-  return `dashboard-chart-layout columns-${props.columns}`;
-});
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    columns: 1 | 2 | 3 | 4;
+  }>(),
+  {
+    columns: 2,
+  }
+);
 </script>
 
 <style lang="scss">