Merge branch 'master' into azuredeployment

.circleci/config.yml

@@ -1,11 +1,20 @@
 version: 2.1
+
+parameters:
+  GHA_Action:
+    type: string
+    default: ""
+  GHA_Meta:
+    type: string
+    default: ""
+
 orbs:
   slack: circleci/[email protected]
 
 definitions:
   build_config: &build_config
     docker:
-    - image: molgenis/ci-build:latest
+    - image: molgenis/ci-build:1.2.0
     working_directory: ~/repo
     resource_class: large
     environment:
@@ -14,7 +23,7 @@ definitions:
       TERM: dumb
   test_config: &test_config
     docker:
-    - image: molgenis/ci-build:latest
+    - image: molgenis/ci-build:1.2.0
     - image: postgres:15-alpine
       environment:
         POSTGRES_USER: postgres
@@ -95,8 +104,8 @@ jobs:
     - pre_steps
 
     - run:
-        name: build and push emx2 java docker images and helm for the preview
-        command: ./gradlew -s --no-daemon shadowJar dockerPush helmPublishMainChart ci -x test
+        name: build and push emx2 java docker images for the preview
+        command: ./gradlew -s --no-daemon shadowJar dockerPush ci -x test
 
     - run:
         name: push ssr-catalogue docker images
@@ -171,11 +180,11 @@ jobs:
         command: |
           export $( cat build/ci.properties | xargs )
           if [[ "$TAG_NAME" == *"SNAPSHOT"* ]]; then
-            ./gradlew -s --no-daemon dockerPush helmPublishMainChart
+            ./gradlew -s --no-daemon dockerPush
             docker build apps/nuxt3-ssr/ -t molgenis/ssr-catalogue-snapshot:latest -t molgenis/ssr-catalogue-snapshot:${TAG_NAME}
             docker push molgenis/ssr-catalogue-snapshot --all-tags
           else
-            ./gradlew -s --no-daemon dockerPush helmPublishMainChart release
+            ./gradlew -s --no-daemon dockerPush release
             docker build apps/nuxt3-ssr/ -t molgenis/ssr-catalogue:latest -t molgenis/ssr-catalogue:${TAG_NAME}
             docker push molgenis/ssr-catalogue --all-tags
           fi
@@ -197,20 +206,81 @@ jobs:
           -X POST https://slack.com/api/chat.postMessage  
 
     - post_steps
+  e2e-preview:
+    docker:
+      - image: mcr.microsoft.com/playwright:v1.41.2-jammy
+    steps:
+      - checkout
+      - run: npm i -D @playwright/test
+      - run: npx playwright install chrome
+      - run:
+          name: Wait for preview to be up, poll every 10 seconds
+          command: |
+            GETURL="https://preview-emx2-pr-${CIRCLE_PULL_REQUEST##*/}.dev.molgenis.org/"
+            while true; 
+                do 
+                    STATUS=$(curl --silent --head $GETURL | awk '/^HTTP/{print $2}')
+                    echo ${STATUS}
+                    if [[ "$STATUS" == "200" ]]; then 
+                        echo "preview is up";
+                        break; 
+                    else 
+                        echo "preview is not ready yet, waiting 10 seconds...";
+                    fi; 
+                    sleep 10; 
+                done
+      - run:
+          command: | 
+            echo "PR number: ${CIRCLE_PULL_REQUEST##*/}"
+            export E2E_BASE_URL=https://preview-emx2-pr-${CIRCLE_PULL_REQUEST##*/}.dev.molgenis.org/
+            echo $E2E_BASE_URL
+            npx playwright test --config e2e e2e/tests
+      - store_test_results:
+         path: /root/project/e2e
+
+
+  delete-helm-preview:
+    <<: *build_config
+
+    environment:
+      GHA_PREVIEW_NR: << pipeline.parameters.GHA_Meta >>
+
+    steps:
+    - pre_steps
+
+    - run:
+        name: delete preview on azure
+        command: |
+          export $( cat build/ci.properties | xargs )
+          bash ci/set_kubectl_config-azure.sh
+          kubectl delete namespace preview-emx2-pr-${GHA_PREVIEW_NR} || true
 
 workflows:
   version: 2
   build_and_test_and_preview_or_release:
+    unless:
+      equal: [ "delete-pr-preview", << pipeline.parameters.GHA_Action >> ]
     jobs:
     - preview:
         filters:
           branches:
             ignore: master
-    - test:
+    - e2e-preview:
+        requires:
+          - preview
         filters:
-          branches:
-            ignore: master
+            branches:
+              ignore: master
+    - test:
+       filters:
+         branches:
+           ignore: master
     - release:
-        filters:
-          branches:
-            only: master
+       filters:
+         branches:
+           only: master
+  delete_preview:
+    when:
+      equal: [ "delete-pr-preview", << pipeline.parameters.GHA_Action >> ]
+    jobs:
+    - delete-helm-preview

.github/workflows/main.yml

@@ -0,0 +1,14 @@
+on:
+  pull_request:
+    types: [ closed ]
+jobs:
+  trigger-circleci:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Trigger CircleCI delete_preview workflow
+        id: "delete-pr-preview"
+        uses: CircleCI-Public/[email protected]
+        with:
+          GHA_Meta: ${{ github.event.number }}
+        env:
+          CCI_TOKEN: ${{ secrets.CCI_TOKEN }}

Dockerfile

@@ -1,4 +1,4 @@
-FROM eclipse-temurin:17.0.9_9-jdk-focal
+FROM eclipse-temurin:17.0.10_7-jdk-jammy
 ARG JAR_FILE
 COPY ${JAR_FILE} app.jar
 EXPOSE 8080

apps/build.gradle

@@ -8,7 +8,7 @@ plugins {
 def isCI = System.getenv('CI') ? true : false
 
 def nodeSpec = {
-    version = '18.16.0'
+    version = '20.11.0'
     yarnVersion = '1.22.19'
     npmVersion = "9.5.1"
     download = !isCI

apps/cranio-provider/README.md

@@ -0,0 +1,37 @@
+# Dashboard template for ERN Cranio providers
+
+The `cranio-provider` vue app is a template for creating dashboards for data providers affiliated with ERN CRANIO. This app contains "mini dashboards" for each workstream and further breakdowns for ERN versus center summaries, as well as general and surgical overviews. As a result, the application is structured using nested router views.
+
+```text
+cranio-provider
+    - Center landing page and overview
+    - Craniosynostosis
+        - General overview for all centers
+        - Surgical overview for all centers
+        - General overview for the current center
+        - Surgical overview for the current center
+    - Cleft lip and palate
+        - Overview for the current center
+        - Overview for all centers
+    - Genetic Deafness (TBD)
+    - Larynxcleft (TBD)
+```
+
+## Getting Started
+
+Changes can be made to the application by cloning the `molgenis/molgenis-emx2` repository and creating a new branch; use the prefix `feat/...` or `fix/...` when naming the branch.
+
+### Vue config
+
+A few items are required to develop the application. These are outlined below.
+
+1. In the `vue.config.js` file, enter a host or schema, or use the defaults.
+2. In the selected host, create a new schema using the template `ERN_DASHBOARDS`. Use the name `CranioStats`. **NOTE**: the name of this schema is hard coded into the Cranio provider application.
+3. Upload the [Cranio dataset](https://github.com/molgenis/projects-rd-erns/blob/main/erns/cranio/cranio_emx2.xlsx) into the `CranioStats` schema.
+4. In the organisations table, select one of the organisations and create a new schema using the value in the `providerInformation` column (e.g., `NL1`, `DK1`, etc).
+5. Next we will import the profile image for the organization. Click the "edit row" button and scroll down to the field for `image`. Find the profile image of the selected organisation in the [provider profiles](https://github.com/molgenis/projects-rd-erns/tree/main/erns/cranio/profiles) folder. (Either download the image or clone the repo.) Back in the update form, click the *browse* button and select the file that you would like to import. Click save.
+6. In the terminal, change directories to `apps/cranio-provider` and run the `yarn dev` command. This will serve the vue app at `localhost:5173`
+
+## Troubleshooting
+
+1. **Error importing components**: If you get an error importing components from `molgenis-viz` or `molgenis-components`, these may need to be built and installed locally. In each folder, run `yarn build`

apps/cranio-provider/src/App.vue

@@ -12,7 +12,9 @@
           title="ERN CRANIO Registry"
           :subtitle="provider.name"
           :imageSrc="
-            provider.imageUrl ? provider.imageUrl : 'banner-diagnoses.jpg'
+            Object.hasOwn(provider.image, 'id')
+              ? `${provider.image.url}`
+              : 'banner-diagnoses.jpg'
           "
         />
         <PageSection
@@ -93,7 +95,12 @@ async function getProviderMeta() {
       }
     ) {
       name
-      imageUrl
+      image {
+        id
+        url
+        size
+        extension
+      }
       providerInformation {
         providerIdentifier
       }

apps/cranio-provider/src/styles/index.scss

@@ -4,25 +4,6 @@
 
   .page-header {
     height: 15em;
-
-    &.ern-header {
-      height: 21em;
-
-      .header-content {
-        .header-title {
-          color: $gray-800;
-          font-size: 18pt;
-        }
-        .header-subtitle {
-          color: $gray-900;
-        }
-      }
-
-      .background-image-filter {
-        background-color: $cranio-primary-alt;
-        opacity: 0.1;
-      }
-    }
   }
 
   .page-section {

apps/cranio-provider/vite.config.js

@@ -1,7 +1,7 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 
-const host = "https://beta-erncranio.molgeniscloud.org";
+const host = "https://emx2.dev.molgenis.org";
 const schema = "NL2";
 const opts = { changeOrigin: true, secure: false, logLevel: "debug" };
 
@@ -31,6 +31,10 @@ export default defineConfig(() => {
           target: host,
           ...opts,
         },
+        "^/[a-zA-Z0-9_.%-]+/api/file": {
+          target: host,
+          ...opts,
+        },
         "/api": {
           target: `${host}/api`,
           ...opts,

apps/cranio-public/src/styles/index.scss

@@ -93,7 +93,7 @@
 .quicklink-cards {
   display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: stretch;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 2em;
@@ -104,6 +104,7 @@
     color: currentColor;
     border-radius: 12pt;
     text-align: center;
+    padding: 1em;
 
     svg {
       display: block;
@@ -135,4 +136,8 @@
       font-size: 10pt;
     }
   }
+
+  @media (min-width: 917px) {
+    flex-wrap: nowrap;
+  }
 }

apps/cranio-public/src/views/view-about.vue

@@ -40,10 +40,13 @@
         of clinical and patient-reported outcomes.
       </p>
       <p>
-        In a collaborative partnership with MOLGENIS, an expert in registry
-        development and support, the registry is built and hosted, further
-        enhancing its functionality by supporting FAIR interfaces for seamless
-        data exchange.
+        he registry has been built and is hosted in collaboration with the
+        Genomics Coordination Centre at the University Medical Center Groningen
+        (UMCG), which specialises in registry development and support. The
+        registry is based on MOLGENIS, an open source LGPLv3 licensed data
+        platform for scientific data. The platform is user-friendly and provides
+        the highest level of security for patient data. It also supports FAIR
+        interfaces for data exchange.
       </p>
       <p>
         To ensure utmost data security, all information incorporated into the

apps/dev-proxy.config.js

@@ -1,5 +1,5 @@
 const HOST = process.env.MOLGENIS_APPS_HOST || "https://emx2.dev.molgenis.org";
-const SCHEMA = process.env.MOLGENIS_APPS_SCHEMA || "FAIR%20data%20hub";
+const SCHEMA = process.env.MOLGENIS_APPS_SCHEMA || "pet store";
 
 const opts = { changeOrigin: true, secure: false, logLevel: "debug" };
 

apps/directory/package.json

@@ -27,7 +27,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "4.6.2",
-    "@vue/test-utils": "2.4.3",
+    "@vue/test-utils": "2.4.4",
     "@vue/vue3-jest": "29.2.6",
     "babel-jest": "29.7.0",
     "jest": "29.7.0",

apps/directory/src/App.vue

@@ -110,7 +110,6 @@ nav.navbar a.nav-link:hover,
 nav.navbar button.btn:hover {
   color: #ec6707 !important;
 }
-
 nav.navbar button.btn.btn-outline-light:not(.border-0) {
   border-color: #495057 !important;
 }
@@ -119,4 +118,13 @@ nav.navbar button.btn.btn-outline-light:not(.border-0):hover {
   background-color: #ec6707 !important;
   color: #dbedff !important;
 }
+
+.filterbar > details.dropdown-button > summary {
+  color: #08205c !important;
+}
+.filterbar > details.dropdown-button[open] > summary,
+.filterbar > details.dropdown-button:hover > summary,
+.filterbar > details.text-white > summary {
+  color: white !important;
+}
 </style>

apps/directory/src/functions/applyFiltersToQuery.js

@@ -43,6 +43,7 @@ export async function applyFiltersToQuery(
         baseQuery.orFilter("collections.id").like(filterValue);
         baseQuery.orFilter("collections.name").like(filterValue);
         baseQuery.orFilter("collections.acronym").like(filterValue);
+        baseQuery.orFilter("collections.biobank.name").like(filterValue);
         baseQuery
           .orFilter("collections.diagnosis_available.name")
           .like(filterValue);
@@ -99,7 +100,7 @@ export async function applyFiltersToQuery(
       }
       case "OntologyFilter": {
         const values = filterValue.map((fv) => fv.code);
-        baseQuery.where(filterDetail.applyToColumn).in(values);
+        baseQuery.filter(filterDetail.applyToColumn).in(values);
         break;
       }
     }

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

@@ -111,6 +111,8 @@ const initialCollectionColumns = [
       "sub_collections.order_of_magnitude.label",
       "sub_collections.materials.label",
       "sub_collections.data_categories.label",
+      "collaboration_commercial",
+      "collaboration_non_for_profit",
     ],
   },
 ];