From 1133e0c51108000ae6091dd20f0b68422b9a904e Mon Sep 17 00:00:00 2001
From: gromdimon <grom.dima.grom@gmail.com>
Date: Fri, 17 Nov 2023 12:43:04 +0100
Subject: [PATCH 1/6] feat: cada-prio integration

---
 backend/app/api/internal/endpoints/proxy.py   |  4 ++
 backend/app/core/config.py                    |  2 +
 backend/env.dev                               |  1 +
 frontend/src/api/cadaprio.ts                  | 27 +++++++++
 frontend/src/api/common.ts                    |  1 +
 .../src/components/CaseInformationCard.vue    | 35 ++++++++++-
 frontend/src/stores/cadaprio.ts               | 59 +++++++++++++++++++
 7 files changed, 128 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/api/cadaprio.ts
 create mode 100644 frontend/src/stores/cadaprio.ts

diff --git a/backend/app/api/internal/endpoints/proxy.py b/backend/app/api/internal/endpoints/proxy.py
index 184ccf6c..c6354668 100644
--- a/backend/app/api/internal/endpoints/proxy.py
+++ b/backend/app/api/internal/endpoints/proxy.py
@@ -46,6 +46,10 @@ async def reverse_proxy(request: Request) -> Response:
         backend_url = settings.BACKEND_PREFIX_NGINX + url.path.replace("/internal/proxy/nginx", "")
     elif url.path.startswith(f"{settings.INTERNAL_STR}/proxy/dotty"):
         backend_url = settings.BACKEND_PREFIX_DOTTY + url.path.replace("/internal/proxy/dotty", "")
+    elif url.path.startswith(f"{settings.INTERNAL_STR}/proxy/cada-prio"):
+        backend_url = settings.BACKEND_PREFIX_CADA_PRIO + url.path.replace(
+            "/internal/proxy/cada-prio", ""
+        )
 
     if backend_url:
         client = httpx.AsyncClient()
diff --git a/backend/app/core/config.py b/backend/app/core/config.py
index 624936d6..5c975495 100644
--- a/backend/app/core/config.py
+++ b/backend/app/core/config.py
@@ -93,6 +93,8 @@ def assemble_cors_origins(cls, v: str | list[str]) -> list[str] | str:  # pragma
     BACKEND_PREFIX_NGINX: str = "http://nginx:80"
     #: Prefix for the backend of dotty service.
     BACKEND_PREFIX_DOTTY: str = "http://dotty:8080"
+    #: Prefix for the backend of cada-prio service.
+    BACKEND_PREFIX_CADA_PRIO: str = "http://cada-prio:8080"
 
     #: URL to REDIS service.
     REDIS_URL: str = "redis://redis:6379"
diff --git a/backend/env.dev b/backend/env.dev
index 13d17071..41e0b764 100644
--- a/backend/env.dev
+++ b/backend/env.dev
@@ -17,6 +17,7 @@ BACKEND_PREFIX_MEHARI=http://localhost:3002
 BACKEND_PREFIX_VIGUNO=http://localhost:3003
 BACKEND_PREFIX_NGINX=http://localhost:3004
 BACKEND_PREFIX_DOTTY=http://localhost:3005
+BACKEND_PREFIX_CADA_PRIORI=http://localhost:3006
 
 # Access to redis as it runs Docker Compose.
 REDIS_URL=redis://localhost:3030
diff --git a/frontend/src/api/cadaprio.ts b/frontend/src/api/cadaprio.ts
new file mode 100644
index 00000000..698c4b8c
--- /dev/null
+++ b/frontend/src/api/cadaprio.ts
@@ -0,0 +1,27 @@
+import { API_INTERNAL_BASE_PREFIX_CADA_PRIO } from "./common"
+
+const API_BASE_URL = `${API_INTERNAL_BASE_PREFIX_CADA_PRIO}/`
+
+export class CadaPrioClient {
+  private apiBaseUrl: string
+  private csrfToken: string | null
+
+  constructor(apiBaseUrl?: string, csrfToken?: string) {
+    this.apiBaseUrl = apiBaseUrl ?? API_BASE_URL
+    this.csrfToken = csrfToken ?? null
+  }
+
+  async predictGeneImpact(
+    hpoTerms: string[],
+    geneSymbols?: string[]
+  ): Promise<any> {
+    const geneSuffix = geneSymbols ? `&gene_symbols=${geneSymbols.join(',')}` : ''
+    const url =
+      `${this.apiBaseUrl}api/v1/predict?hpo_terms=${hpoTerms.join(',')}${geneSuffix}`
+
+    const response = await fetch(url, {
+      method: 'GET'
+    })
+    return await response.json()
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/api/common.ts b/frontend/src/api/common.ts
index 50b15b4c..ad314393 100644
--- a/frontend/src/api/common.ts
+++ b/frontend/src/api/common.ts
@@ -4,4 +4,5 @@ export const API_INTERNAL_BASE_PREFIX_MEHARI = '/internal/proxy/mehari'
 export const API_INTERNAL_BASE_PREFIX_VIGUNO = '/internal/proxy/viguno'
 export const API_INTERNAL_BASE_PREFIX_NGINX = '/internal/proxy/nginx'
 export const API_INTERNAL_BASE_PREFIX_DOTTY = '/internal/proxy/dotty'
+export const API_INTERNAL_BASE_PREFIX_CADA_PRIO = '/internal/proxy/cada-prio'
 export const API_V1_BASE_PREFIX = '/api/v1/'
diff --git a/frontend/src/components/CaseInformationCard.vue b/frontend/src/components/CaseInformationCard.vue
index 8386e2ab..3fe0c8b2 100644
--- a/frontend/src/components/CaseInformationCard.vue
+++ b/frontend/src/components/CaseInformationCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import _ from 'lodash'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 
 import {
   Ethnicity,
@@ -13,11 +13,14 @@ import {
   ethinicityLabels,
   useCaseStore
 } from '@/stores/case'
+import { useCadaPrioStore } from '@/stores/cadaprio'
 import { StoreState } from '@/stores/misc'
 import { useTermsStore } from '@/stores/terms'
 
 const caseStore = useCaseStore()
 const termsStore = useTermsStore()
+const cadaPrioStore = useCadaPrioStore()
+const cadaPrioRankingFields = ["Rank", "Score", "Gene Symbol", "NCBI gene id", "HGNC id"]
 
 const form = ref(null)
 
@@ -59,6 +62,10 @@ const zygosityOptions = computed(() => {
 
 const loadDataToStore = async () => {
   await caseStore.loadCase()
+  if (caseStore.caseInfo.hpoTerms.length > 0) {
+    const hpoTermsList: string[] = caseStore.caseInfo.hpoTerms.map(term => term.term_id);
+    await cadaPrioStore.loadData(hpoTermsList)
+  }
 }
 
 const saveChanges = () => {
@@ -108,11 +115,22 @@ const debouncedOmimFetchTerms = _.debounce(async (query: string) => {
 onMounted(async () => {
   loadDataToStore()
 })
+
+watch(() => caseStore.caseInfo.hpoTerms,
+  async () => {
+    if (caseStore.caseInfo.hpoTerms.length > 0) {
+      const hpoTermsList: string[] = caseStore.caseInfo.hpoTerms.map(term => term.term_id);
+      await cadaPrioStore.loadData(hpoTermsList)
+    }
+  }
+)
 </script>
 
 <template>
   <div v-if="caseStore.storeState === StoreState.Active">
     <v-card class="case-card">
+      <v-row no-gutters>
+        <v-col>
       <v-card-title>Case Information</v-card-title>
       <v-card-text>
         <v-form ref="form">
@@ -232,6 +250,21 @@ onMounted(async () => {
           >
         </v-form>
       </v-card-text>
+      </v-col>
+
+      <v-col v-if="cadaPrioStore.geneRanking">
+        <v-card-title>Cada-prio gene Ranking:</v-card-title>
+        <v-card-text>
+          <!-- Gene Ranking -->
+          <v-data-table
+            :headers="cadaPrioRankingFields as any"
+            :items="cadaPrioStore.geneRanking"
+            :items-per-page="10"
+            class="elevation-1"
+          />
+        </v-card-text>
+      </v-col>
+    </v-row>
     </v-card>
   </div>
   <div v-else-if="caseStore.storeState === StoreState.Loading">
diff --git a/frontend/src/stores/cadaprio.ts b/frontend/src/stores/cadaprio.ts
new file mode 100644
index 00000000..9b0028c8
--- /dev/null
+++ b/frontend/src/stores/cadaprio.ts
@@ -0,0 +1,59 @@
+/**
+ * Store for genes ranking from cada-prio.
+ * 
+ * This includes the data retrieved from the APIs.
+ */
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+import { CadaPrioClient } from '@/api/cadaprio'
+import { StoreState } from '@/stores/misc'
+
+export interface GeneRank {
+  "rank": number,
+  "score": number,
+  "gene_symbol": string,
+  "ncbi_gene_id": number,
+  "hgnc_id": number,
+}
+
+export const useCadaPrioStore = defineStore('cadaPrio', () => {
+  /** The current store state. */
+  const storeState = ref<StoreState>(StoreState.Initial)
+
+  /** The current gene Ranking. */
+  const geneRanking = ref<GeneRank[] | null>(null)
+
+  function clearData() {
+    storeState.value = StoreState.Initial
+    geneRanking.value = null
+  }
+
+  const loadData = async (hpoTerms: string[], geneSymbols?: string[]) => {
+    // Clear against artifact
+    clearData()
+
+    // Load data via API
+    storeState.value = StoreState.Loading
+    try {
+      const client = new CadaPrioClient()
+      const data = await client.predictGeneImpact(hpoTerms, geneSymbols)
+      if (data.lenght === 0) {
+        geneRanking.value = null
+      } else {
+        geneRanking.value = data
+      }
+      storeState.value = StoreState.Active
+    } catch (error) {
+      console.error(error)
+      storeState.value = StoreState.Error
+    }
+  }
+
+  return {
+    storeState,
+    geneRanking,
+    loadData
+  }
+})
+

From 03ec2273b98ab0b3a629574b6b4a916b1a91c902 Mon Sep 17 00:00:00 2001
From: gromdimon <grom.dima.grom@gmail.com>
Date: Fri, 17 Nov 2023 15:16:50 +0100
Subject: [PATCH 2/6] wip

---
 frontend/src/api/cadaprio.ts                  |  12 +-
 .../src/components/CaseInformationCard.vue    | 263 +++++++++---------
 frontend/src/stores/cadaprio.ts               |  13 +-
 3 files changed, 145 insertions(+), 143 deletions(-)

diff --git a/frontend/src/api/cadaprio.ts b/frontend/src/api/cadaprio.ts
index 698c4b8c..03ad4593 100644
--- a/frontend/src/api/cadaprio.ts
+++ b/frontend/src/api/cadaprio.ts
@@ -1,4 +1,4 @@
-import { API_INTERNAL_BASE_PREFIX_CADA_PRIO } from "./common"
+import { API_INTERNAL_BASE_PREFIX_CADA_PRIO } from './common'
 
 const API_BASE_URL = `${API_INTERNAL_BASE_PREFIX_CADA_PRIO}/`
 
@@ -11,17 +11,13 @@ export class CadaPrioClient {
     this.csrfToken = csrfToken ?? null
   }
 
-  async predictGeneImpact(
-    hpoTerms: string[],
-    geneSymbols?: string[]
-  ): Promise<any> {
+  async predictGeneImpact(hpoTerms: string[], geneSymbols?: string[]): Promise<any> {
     const geneSuffix = geneSymbols ? `&gene_symbols=${geneSymbols.join(',')}` : ''
-    const url =
-      `${this.apiBaseUrl}api/v1/predict?hpo_terms=${hpoTerms.join(',')}${geneSuffix}`
+    const url = `${this.apiBaseUrl}api/v1/predict?hpo_terms=${hpoTerms.join(',')}${geneSuffix}`
 
     const response = await fetch(url, {
       method: 'GET'
     })
     return await response.json()
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/CaseInformationCard.vue b/frontend/src/components/CaseInformationCard.vue
index 3fe0c8b2..0c008a3e 100644
--- a/frontend/src/components/CaseInformationCard.vue
+++ b/frontend/src/components/CaseInformationCard.vue
@@ -2,6 +2,7 @@
 import _ from 'lodash'
 import { computed, onMounted, ref, watch } from 'vue'
 
+import { useCadaPrioStore } from '@/stores/cadaprio'
 import {
   Ethnicity,
   Inheritance,
@@ -13,14 +14,19 @@ import {
   ethinicityLabels,
   useCaseStore
 } from '@/stores/case'
-import { useCadaPrioStore } from '@/stores/cadaprio'
 import { StoreState } from '@/stores/misc'
 import { useTermsStore } from '@/stores/terms'
 
 const caseStore = useCaseStore()
 const termsStore = useTermsStore()
 const cadaPrioStore = useCadaPrioStore()
-const cadaPrioRankingFields = ["Rank", "Score", "Gene Symbol", "NCBI gene id", "HGNC id"]
+const cadaPrioRankingFields = ref([
+  { title: 'Rank', key: 'rank' },
+  { title: 'Score', key: 'score' },
+  { title: 'Gene Symbol', key: 'gene_symbol' },
+  { title: 'NCBI Gene ID', key: 'ncbi_gene_id' },
+  { title: 'HGNC ID', key: 'hgnc_id' }
+])
 
 const form = ref(null)
 
@@ -62,8 +68,10 @@ const zygosityOptions = computed(() => {
 
 const loadDataToStore = async () => {
   await caseStore.loadCase()
+  console.log(caseStore.caseInfo)
   if (caseStore.caseInfo.hpoTerms.length > 0) {
-    const hpoTermsList: string[] = caseStore.caseInfo.hpoTerms.map(term => term.term_id);
+    const hpoTermsList: string[] = caseStore.caseInfo.hpoTerms.map((term) => term.term_id)
+    console.log(hpoTermsList)
     await cadaPrioStore.loadData(hpoTermsList)
   }
 }
@@ -116,10 +124,11 @@ onMounted(async () => {
   loadDataToStore()
 })
 
-watch(() => caseStore.caseInfo.hpoTerms,
+watch(
+  () => caseStore.caseInfo.hpoTerms,
   async () => {
     if (caseStore.caseInfo.hpoTerms.length > 0) {
-      const hpoTermsList: string[] = caseStore.caseInfo.hpoTerms.map(term => term.term_id);
+      const hpoTermsList: string[] = caseStore.caseInfo.hpoTerms.map((term) => term.term_id)
       await cadaPrioStore.loadData(hpoTermsList)
     }
   }
@@ -131,140 +140,138 @@ watch(() => caseStore.caseInfo.hpoTerms,
     <v-card class="case-card">
       <v-row no-gutters>
         <v-col>
-      <v-card-title>Case Information</v-card-title>
-      <v-card-text>
-        <v-form ref="form">
-          <v-text-field
-            variant="outlined"
-            label="Pseudonym"
-            v-model="caseStore.caseInfo.pseudonym"
-          ></v-text-field>
+          <v-card-title>Case Information</v-card-title>
+          <v-card-text>
+            <v-form ref="form">
+              <v-text-field
+                variant="outlined"
+                label="Pseudonym"
+                v-model="caseStore.caseInfo.pseudonym"
+              ></v-text-field>
 
-          <!-- Diseases -->
-          <v-autocomplete
-            v-model="caseStore.caseInfo.diseases"
-            v-model:search="omimSearchQuery"
-            :items="termsStore.omimTerms"
-            :loading="omimIsLoading"
-            @update:search="debouncedOmimFetchTerms"
-            label="Disease"
-            item-title="name"
-            :item-value="(item) => item"
-            multiple
-            chips
-            closable-chips
-            deletable-chips
-            variant="outlined"
-            prepend-icon="mdi-database-search"
-            hint="Select one or more diseases"
-          >
-          </v-autocomplete>
+              <!-- Diseases -->
+              <v-autocomplete
+                v-model="caseStore.caseInfo.diseases"
+                v-model:search="omimSearchQuery"
+                :items="termsStore.omimTerms"
+                :loading="omimIsLoading"
+                @update:search="debouncedOmimFetchTerms"
+                label="Disease"
+                item-title="name"
+                :item-value="(item) => item"
+                multiple
+                chips
+                closable-chips
+                deletable-chips
+                variant="outlined"
+                prepend-icon="mdi-database-search"
+                hint="Select one or more diseases"
+              >
+              </v-autocomplete>
 
-          <!-- HPO Terms -->
-          <v-autocomplete
-            v-model="caseStore.caseInfo.hpoTerms"
-            v-model:search="hpoSearchQuery"
-            :items="termsStore.hpoTerms"
-            :loading="hpoIsLoading"
-            @update:search="debouncedHpoFetchTerms"
-            label="HPO Terms"
-            item-title="name"
-            :item-value="(item) => item"
-            multiple
-            chips
-            closable-chips
-            deletable-chips
-            variant="outlined"
-            prepend-icon="mdi-database-search"
-            hint="Select one or more HPO terms"
-          >
-          </v-autocomplete>
+              <!-- HPO Terms -->
+              <v-autocomplete
+                v-model="caseStore.caseInfo.hpoTerms"
+                v-model:search="hpoSearchQuery"
+                :items="termsStore.hpoTerms"
+                :loading="hpoIsLoading"
+                @update:search="debouncedHpoFetchTerms"
+                label="HPO Terms"
+                item-title="name"
+                :item-value="(item) => item"
+                multiple
+                chips
+                closable-chips
+                deletable-chips
+                variant="outlined"
+                prepend-icon="mdi-database-search"
+                hint="Select one or more HPO terms"
+              >
+              </v-autocomplete>
 
-          <!-- Inheritance -->
-          <v-select
-            variant="outlined"
-            label="Inheritance"
-            :items="inheritanceOptions"
-            item-title="text"
-            item-value="value"
-            v-model="caseStore.caseInfo.inheritance"
-          ></v-select>
+              <!-- Inheritance -->
+              <v-select
+                variant="outlined"
+                label="Inheritance"
+                :items="inheritanceOptions"
+                item-title="text"
+                item-value="value"
+                v-model="caseStore.caseInfo.inheritance"
+              ></v-select>
 
-          <!-- Affected Family Members -->
-          <v-switch
-            variant="outlined"
-            label="Affected Family Members"
-            v-model="caseStore.caseInfo.affectedFamilyMembers"
-            color="primary"
-          ></v-switch>
+              <!-- Affected Family Members -->
+              <v-switch
+                variant="outlined"
+                label="Affected Family Members"
+                v-model="caseStore.caseInfo.affectedFamilyMembers"
+                color="primary"
+              ></v-switch>
 
-          <!-- Sex -->
-          <v-select
-            variant="outlined"
-            label="Sex"
-            :items="sexOptions"
-            item-title="text"
-            item-value="value"
-            v-model="caseStore.caseInfo.sex"
-          ></v-select>
+              <!-- Sex -->
+              <v-select
+                variant="outlined"
+                label="Sex"
+                :items="sexOptions"
+                item-title="text"
+                item-value="value"
+                v-model="caseStore.caseInfo.sex"
+              ></v-select>
 
-          <!-- Age of Onset -->
-          <v-text-field
-            variant="outlined"
-            label="Age of Onset"
-            v-model.number="caseStore.caseInfo.ageOfOnsetMonths"
-            :rules="[validateAgeOfOnset]"
-          ></v-text-field>
+              <!-- Age of Onset -->
+              <v-text-field
+                variant="outlined"
+                label="Age of Onset"
+                v-model.number="caseStore.caseInfo.ageOfOnsetMonths"
+                :rules="[validateAgeOfOnset]"
+              ></v-text-field>
 
-          <!-- Ethnicity -->
-          <v-select
-            variant="outlined"
-            label="Ethnicity"
-            :items="ethnicityOptions"
-            item-title="text"
-            item-value="value"
-            v-model="caseStore.caseInfo.ethnicity"
-          ></v-select>
+              <!-- Ethnicity -->
+              <v-select
+                variant="outlined"
+                label="Ethnicity"
+                :items="ethnicityOptions"
+                item-title="text"
+                item-value="value"
+                v-model="caseStore.caseInfo.ethnicity"
+              ></v-select>
 
-          <!-- Zygosity -->
-          <v-select
-            variant="outlined"
-            label="Zygosity"
-            :items="zygosityOptions"
-            item-title="text"
-            item-value="value"
-            v-model="caseStore.caseInfo.zygosity"
-          ></v-select>
+              <!-- Zygosity -->
+              <v-select
+                variant="outlined"
+                label="Zygosity"
+                :items="zygosityOptions"
+                item-title="text"
+                item-value="value"
+                v-model="caseStore.caseInfo.zygosity"
+              ></v-select>
 
-          <!-- Family Segregation -->
-          <v-switch
-            label="Family Segregation"
-            v-model="caseStore.caseInfo.familySegregation"
-            color="primary"
-          ></v-switch>
+              <!-- Family Segregation -->
+              <v-switch
+                label="Family Segregation"
+                v-model="caseStore.caseInfo.familySegregation"
+                color="primary"
+              ></v-switch>
 
-          <!-- Buttons -->
-          <v-btn class="ml-2" @click="saveChanges">Save Changes</v-btn>
-          <v-btn class="ml-2" color="secondary" @click="deleteCaseInformation"
-            >Delete Case info</v-btn
-          >
-        </v-form>
-      </v-card-text>
-      </v-col>
+              <!-- Buttons -->
+              <v-btn class="ml-2" @click="saveChanges">Save Changes</v-btn>
+              <v-btn class="ml-2" color="secondary" @click="deleteCaseInformation"
+                >Delete Case info</v-btn
+              >
+            </v-form>
+          </v-card-text>
+        </v-col>
 
-      <v-col v-if="cadaPrioStore.geneRanking">
-        <v-card-title>Cada-prio gene Ranking:</v-card-title>
-        <v-card-text>
-          <!-- Gene Ranking -->
-          <v-data-table
-            :headers="cadaPrioRankingFields as any"
-            :items="cadaPrioStore.geneRanking"
-            :items-per-page="10"
-            class="elevation-1"
-          />
-        </v-card-text>
-      </v-col>
-    </v-row>
+        <v-col v-if="cadaPrioStore.geneRanking">
+          <v-card-title>Cada-prio gene ranking for current HPO:</v-card-title>
+          <v-card-text>
+            <v-data-table
+              :headers="cadaPrioRankingFields as any"
+              :items="cadaPrioStore.geneRanking"
+              :items-per-page="10"
+            />
+          </v-card-text>
+        </v-col>
+      </v-row>
     </v-card>
   </div>
   <div v-else-if="caseStore.storeState === StoreState.Loading">
diff --git a/frontend/src/stores/cadaprio.ts b/frontend/src/stores/cadaprio.ts
index 9b0028c8..52a9dd9f 100644
--- a/frontend/src/stores/cadaprio.ts
+++ b/frontend/src/stores/cadaprio.ts
@@ -1,6 +1,6 @@
 /**
  * Store for genes ranking from cada-prio.
- * 
+ *
  * This includes the data retrieved from the APIs.
  */
 import { defineStore } from 'pinia'
@@ -10,11 +10,11 @@ import { CadaPrioClient } from '@/api/cadaprio'
 import { StoreState } from '@/stores/misc'
 
 export interface GeneRank {
-  "rank": number,
-  "score": number,
-  "gene_symbol": string,
-  "ncbi_gene_id": number,
-  "hgnc_id": number,
+  rank: number
+  score: number
+  gene_symbol: string
+  ncbi_gene_id: number
+  hgnc_id: number
 }
 
 export const useCadaPrioStore = defineStore('cadaPrio', () => {
@@ -56,4 +56,3 @@ export const useCadaPrioStore = defineStore('cadaPrio', () => {
     loadData
   }
 })
-

From 8853b8915ca41e08b4044ea4c8bc4dbfe9edd024 Mon Sep 17 00:00:00 2001
From: gromdimon <grom.dima.grom@gmail.com>
Date: Fri, 17 Nov 2023 15:26:11 +0100
Subject: [PATCH 3/6] wip

---
 frontend/src/components/CaseInformationCard.vue | 2 --
 frontend/src/components/HeaderDetailPage.vue    | 6 ++++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/CaseInformationCard.vue b/frontend/src/components/CaseInformationCard.vue
index 0c008a3e..5a11e04d 100644
--- a/frontend/src/components/CaseInformationCard.vue
+++ b/frontend/src/components/CaseInformationCard.vue
@@ -68,10 +68,8 @@ const zygosityOptions = computed(() => {
 
 const loadDataToStore = async () => {
   await caseStore.loadCase()
-  console.log(caseStore.caseInfo)
   if (caseStore.caseInfo.hpoTerms.length > 0) {
     const hpoTermsList: string[] = caseStore.caseInfo.hpoTerms.map((term) => term.term_id)
-    console.log(hpoTermsList)
     await cadaPrioStore.loadData(hpoTermsList)
   }
 }
diff --git a/frontend/src/components/HeaderDetailPage.vue b/frontend/src/components/HeaderDetailPage.vue
index c75e2496..d1d11b6b 100644
--- a/frontend/src/components/HeaderDetailPage.vue
+++ b/frontend/src/components/HeaderDetailPage.vue
@@ -69,13 +69,15 @@ watch(() => props.searchTerm, updateTerms)
     />
     <v-spacer></v-spacer>
     <v-toolbar-items class="topbar-links">
-      <v-dialog max-width="600">
+      <v-dialog scrollable width="auto" location="top">
         <template v-slot:activator="{ props }">
           <v-btn class="mr-4" prepend-icon="mdi-information-outline" v-bind="props">
             Show Case Information
           </v-btn>
         </template>
-        <CaseInformationCard />
+        <v-card>
+          <CaseInformationCard />
+        </v-card>
       </v-dialog>
 
       <UserProfileButton />

From 58a7a0445e0bb2e80b1ad9dcba6c03d95e202f01 Mon Sep 17 00:00:00 2001
From: gromdimon <grom.dima.grom@gmail.com>
Date: Mon, 20 Nov 2023 14:16:29 +0100
Subject: [PATCH 4/6] tests:

---
 backend/tests/api/internal/test_proxy.py      | 15 ++++++
 frontend/src/api/__tests__/cadaprio.spec.ts   | 42 +++++++++++++++++
 frontend/src/api/__tests__/common.spec.ts     |  7 +++
 .../__tests__/CaseInformationCard.spec.ts     |  6 +++
 .../src/stores/__tests__/bookmarks.spec.ts    | 21 ++++++---
 .../src/stores/__tests__/cadaprio.spec.ts     | 46 +++++++++++++++++++
 frontend/src/stores/bookmarks.ts              |  8 ++--
 7 files changed, 135 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/api/__tests__/cadaprio.spec.ts
 create mode 100644 frontend/src/stores/__tests__/cadaprio.spec.ts

diff --git a/backend/tests/api/internal/test_proxy.py b/backend/tests/api/internal/test_proxy.py
index 8de728cf..cfd2eb05 100644
--- a/backend/tests/api/internal/test_proxy.py
+++ b/backend/tests/api/internal/test_proxy.py
@@ -87,6 +87,21 @@ async def test_proxy_dotty(monkeypatch: MonkeyPatch, httpx_mock: HTTPXMock, clie
     assert response.text == "Mocked response"
 
 
+@pytest.mark.asyncio
+async def test_proxy_cada_prio(monkeypatch: MonkeyPatch, httpx_mock: HTTPXMock, client: TestClient):
+    """Test proxying to cada-prio backend."""
+    monkeypatch.setattr(settings, "BACKEND_PREFIX_CADA_PRIO", f"http://{MOCKED_BACKEND_HOST}")
+    httpx_mock.add_response(
+        url=f"http://{MOCKED_BACKEND_HOST}/{MOCKED_URL_TOKEN}",
+        method="GET",
+        text="Mocked response",
+    )
+
+    response = client.get(f"/internal/proxy/cada-prio/{MOCKED_URL_TOKEN}")
+    assert response.status_code == 200
+    assert response.text == "Mocked response"
+    
+
 @pytest.mark.asyncio
 async def test_invalid_proxy_route(client: TestClient):
     """Test invalid proxy route."""
diff --git a/frontend/src/api/__tests__/cadaprio.spec.ts b/frontend/src/api/__tests__/cadaprio.spec.ts
new file mode 100644
index 00000000..1452ec94
--- /dev/null
+++ b/frontend/src/api/__tests__/cadaprio.spec.ts
@@ -0,0 +1,42 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import createFetchMock from 'vitest-fetch-mock'
+
+import { CadaPrioClient } from '@/api/cadaprio'
+
+const fetchMocker = createFetchMock(vi)
+
+describe.concurrent('Cada Prio Client', () => {
+  beforeEach(() => {
+    fetchMocker.enableMocks()
+    fetchMocker.resetMocks()
+  })
+
+  it('fetches gene impact correctly', async () => {
+    fetchMocker.mockResponseOnce(JSON.stringify({ result: 'pathogenic' }))
+
+    const client = new CadaPrioClient()
+    const result = await client.predictGeneImpact(['HP:0000001'])
+    expect(JSON.stringify(result)).toEqual(JSON.stringify({ result: 'pathogenic' }))
+  })
+
+  it('fetches gene impact correctly with gene symbols', async () => {
+    fetchMocker.mockResponseOnce(JSON.stringify({ result: 'pathogenic' }))
+
+    const client = new CadaPrioClient()
+    const result = await client.predictGeneImpact(['HP:0000001'], ['BRCA1'])
+    expect(JSON.stringify(result)).toEqual(JSON.stringify({ result: 'pathogenic' }))
+  })
+
+  it('fails to fetch gene impact with wrong HPO terms', async () => {
+    fetchMocker.mockResponse((req) => {
+      if (req.url.includes('hpo_terms=HP:0000001')) {
+        return Promise.resolve(JSON.stringify({ result: 'pathogenic' }))
+      }
+      return Promise.resolve(JSON.stringify({ status: 400 }))
+    })
+
+    const client = new CadaPrioClient()
+    const result = await client.predictGeneImpact(['123'])
+    expect(JSON.stringify(result)).toEqual(JSON.stringify({ status: 400 }))
+  })
+})
diff --git a/frontend/src/api/__tests__/common.spec.ts b/frontend/src/api/__tests__/common.spec.ts
index 64e5b05c..33af0d60 100644
--- a/frontend/src/api/__tests__/common.spec.ts
+++ b/frontend/src/api/__tests__/common.spec.ts
@@ -3,6 +3,7 @@ import { describe, expect, it } from 'vitest'
 import {
   API_INTERNAL_BASE_PREFIX,
   API_INTERNAL_BASE_PREFIX_ANNONARS,
+  API_INTERNAL_BASE_PREFIX_CADA_PRIO,
   API_INTERNAL_BASE_PREFIX_MEHARI,
   API_INTERNAL_BASE_PREFIX_NGINX
 } from '@/api/common'
@@ -31,4 +32,10 @@ describe.concurrent('API_BASE_PREFIX constants', () => {
     expect(API_INTERNAL_BASE_PREFIX_NGINX).toBe('/internal/proxy/nginx')
     import.meta.env.MODE = originalMode
   })
+
+  it('returns the correct API base prefix for cada-prio in production mode', () => {
+    const originalMode = import.meta.env.MODE
+    expect(API_INTERNAL_BASE_PREFIX_CADA_PRIO).toBe('/internal/proxy/cada-prio')
+    import.meta.env.MODE = originalMode
+  })
 })
diff --git a/frontend/src/components/__tests__/CaseInformationCard.spec.ts b/frontend/src/components/__tests__/CaseInformationCard.spec.ts
index 1dfea2e1..175b2064 100644
--- a/frontend/src/components/__tests__/CaseInformationCard.spec.ts
+++ b/frontend/src/components/__tests__/CaseInformationCard.spec.ts
@@ -13,6 +13,12 @@ describe.concurrent('CaseInformationCard.vue', () => {
         initialStoreState: {
           case: {
             storeState: StoreState.Active
+          },
+          terms: {
+            storeState: StoreState.Active
+          },
+          cadaPrio: {
+            storeState: StoreState.Active
           }
         }
       }
diff --git a/frontend/src/stores/__tests__/bookmarks.spec.ts b/frontend/src/stores/__tests__/bookmarks.spec.ts
index 0dc9acfc..c877ce9d 100644
--- a/frontend/src/stores/__tests__/bookmarks.spec.ts
+++ b/frontend/src/stores/__tests__/bookmarks.spec.ts
@@ -40,9 +40,12 @@ describe.concurrent('User Store', () => {
     expect(store.bookmarks).toEqual(mockBookmarks)
   })
 
-  it.skip('should handle error when loading bookmarks', async () => {
+  it('should handle error when loading bookmarks', async () => {
+    // Disable error logging
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+
     const store = useBookmarksStore()
-    fetchMocker.mockResponse(JSON.stringify({ detail: 'Internal Server Error' }), { status: 500 })
+    fetchMocker.mockReject(new Error('Internal Server Error'))
 
     await store.loadBookmarks()
 
@@ -60,9 +63,12 @@ describe.concurrent('User Store', () => {
     expect(store.bookmarks).toStrictEqual({})
   })
 
-  it.skip('should handle error when deleting bookmark', async () => {
+  it('should handle error when deleting bookmark', async () => {
+    // Disable error logging
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+
     const store = useBookmarksStore()
-    fetchMocker.mockResponse(JSON.stringify({ detail: 'Internal Server Error' }), { status: 500 })
+    fetchMocker.mockReject(new Error('Internal Server Error'))
 
     await store.deleteBookmark('seqvar', 'HGNC:1100')
 
@@ -80,9 +86,12 @@ describe.concurrent('User Store', () => {
     expect(store.bookmarks).toStrictEqual({ bookmark: 'created' })
   })
 
-  it.skip('should handle error when creating bookmark', async () => {
+  it('should handle error when creating bookmark', async () => {
+    // Disable error logging
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+
     const store = useBookmarksStore()
-    fetchMocker.mockResponse(JSON.stringify({ detail: 'Internal Server Error' }), { status: 500 })
+    fetchMocker.mockReject(new Error('Internal Server Error'))
 
     await store.createBookmark('seqvar', 'HGNC:1100')
 
diff --git a/frontend/src/stores/__tests__/cadaprio.spec.ts b/frontend/src/stores/__tests__/cadaprio.spec.ts
new file mode 100644
index 00000000..0968ff3d
--- /dev/null
+++ b/frontend/src/stores/__tests__/cadaprio.spec.ts
@@ -0,0 +1,46 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import createFetchMock from 'vitest-fetch-mock'
+
+import { useCadaPrioStore } from '../cadaprio'
+import { StoreState } from '../misc'
+
+const fetchMocker = createFetchMock(vi)
+
+describe.concurrent('Cada Prio Store', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    fetchMocker.enableMocks()
+    fetchMocker.resetMocks()
+  })
+
+  it('should have initial state', () => {
+    const store = useCadaPrioStore()
+
+    expect(store.storeState).toBe(StoreState.Initial)
+    expect(store.geneRanking).toBe(null)
+  })
+
+  it('should predict gene impact', async () => {
+    const store = useCadaPrioStore()
+    fetchMocker.mockResponse(JSON.stringify({ result: 'pathogenic' }))
+
+    await store.loadData(['HP:0000001'])
+
+    expect(store.storeState).toBe(StoreState.Active)
+    expect(store.geneRanking).toStrictEqual({ result: 'pathogenic' })
+  })
+
+  it('should handle error when predicting gene impact', async () => {
+    // Disable error logging
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+
+    const store = useCadaPrioStore()
+    fetchMocker.mockReject(new Error('Internal Server Error'))
+
+    await store.loadData(['HP:0000001'])
+
+    expect(store.storeState).toBe(StoreState.Error)
+    expect(store.geneRanking).toBe(null)
+  })
+})
diff --git a/frontend/src/stores/bookmarks.ts b/frontend/src/stores/bookmarks.ts
index cd31ffd3..549cf8f4 100644
--- a/frontend/src/stores/bookmarks.ts
+++ b/frontend/src/stores/bookmarks.ts
@@ -28,7 +28,7 @@ export const useBookmarksStore = defineStore('bookmarks', () => {
       bookmarks.value = await client.fetchBookmarks()
       storeState.value = StoreState.Active
     } catch (e) {
-      console.log(e)
+      console.error(e)
       storeState.value = StoreState.Error
     }
   }
@@ -40,7 +40,7 @@ export const useBookmarksStore = defineStore('bookmarks', () => {
       await client.deleteBookmark(obj_type, obj_id)
       await loadBookmarks()
     } catch (e) {
-      console.log(e)
+      console.error(e)
       storeState.value = StoreState.Error
     }
   }
@@ -52,7 +52,7 @@ export const useBookmarksStore = defineStore('bookmarks', () => {
       await client.createBookmark(obj_type, obj_id)
       await loadBookmarks()
     } catch (e) {
-      console.log(e)
+      console.error(e)
       storeState.value = StoreState.Error
     }
   }
@@ -70,7 +70,7 @@ export const useBookmarksStore = defineStore('bookmarks', () => {
       return response
     } catch (e) {
       storeState.value = StoreState.Error
-      console.log(e)
+      console.error(e)
       return null
     }
   }

From f0b1f2d028ca300feee107a5c3eade76031372cc Mon Sep 17 00:00:00 2001
From: gromdimon <grom.dima.grom@gmail.com>
Date: Mon, 20 Nov 2023 15:29:21 +0100
Subject: [PATCH 5/6] info pages

---
 .../src/components/CaseInformationCard.vue    | 26 +++++--
 .../GeneDetails/CadaPrioRanking.vue           | 75 +++++++++++++++++++
 .../components/VariantDetails/VariantGene.vue |  7 ++
 frontend/src/views/GeneDetailView.vue         |  8 ++
 4 files changed, 111 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/GeneDetails/CadaPrioRanking.vue

diff --git a/frontend/src/components/CaseInformationCard.vue b/frontend/src/components/CaseInformationCard.vue
index 5a11e04d..4b8738de 100644
--- a/frontend/src/components/CaseInformationCard.vue
+++ b/frontend/src/components/CaseInformationCard.vue
@@ -2,6 +2,7 @@
 import _ from 'lodash'
 import { computed, onMounted, ref, watch } from 'vue'
 
+import { roundIt } from '@/lib/utils'
 import { useCadaPrioStore } from '@/stores/cadaprio'
 import {
   Ethnicity,
@@ -21,11 +22,9 @@ const caseStore = useCaseStore()
 const termsStore = useTermsStore()
 const cadaPrioStore = useCadaPrioStore()
 const cadaPrioRankingFields = ref([
-  { title: 'Rank', key: 'rank' },
-  { title: 'Score', key: 'score' },
+  { title: '#', key: 'rank' },
   { title: 'Gene Symbol', key: 'gene_symbol' },
-  { title: 'NCBI Gene ID', key: 'ncbi_gene_id' },
-  { title: 'HGNC ID', key: 'hgnc_id' }
+  { title: 'Score', key: 'score' }
 ])
 
 const form = ref(null)
@@ -266,7 +265,24 @@ watch(
               :headers="cadaPrioRankingFields as any"
               :items="cadaPrioStore.geneRanking"
               :items-per-page="10"
-            />
+              density="compact"
+            >
+              <template v-slot:[`item.gene_symbol`]="{ item }">
+                <router-link
+                  :to="{
+                    name: 'gene',
+                    params: { searchTerm: item.hgnc_id, genomeRelease: 'grch38' }
+                  }"
+                  target="_blank"
+                >
+                  {{ item.gene_symbol }}
+                </router-link>
+              </template>
+
+              <template v-slot:[`item.score`]="{ item }">
+                <span v-html="roundIt(item.score, 2)" />
+              </template>
+            </v-data-table>
           </v-card-text>
         </v-col>
       </v-row>
diff --git a/frontend/src/components/GeneDetails/CadaPrioRanking.vue b/frontend/src/components/GeneDetails/CadaPrioRanking.vue
new file mode 100644
index 00000000..87bda4f9
--- /dev/null
+++ b/frontend/src/components/GeneDetails/CadaPrioRanking.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+
+import { roundIt } from '@/lib/utils'
+import { useCadaPrioStore } from '@/stores/cadaprio'
+import { useCaseStore } from '@/stores/case'
+import { StoreState } from '@/stores/misc'
+
+const caseStore = useCaseStore()
+const cadaPrioStore = useCadaPrioStore()
+const cadaPrioRankingFields = ref([
+  { title: '#', key: 'rank' },
+  { title: 'Gene Symbol', key: 'gene_symbol' },
+  { title: 'Score', key: 'score' }
+])
+
+const loadDataToStore = async () => {
+  await caseStore.loadCase()
+  if (caseStore.caseInfo.hpoTerms.length > 0) {
+    const hpoTermsList: string[] = caseStore.caseInfo.hpoTerms.map((term) => term.term_id)
+    await cadaPrioStore.loadData(hpoTermsList)
+  }
+}
+
+onMounted(async () => {
+  loadDataToStore()
+})
+
+watch(
+  () => caseStore.caseInfo.hpoTerms,
+  async () => {
+    if (caseStore.caseInfo.hpoTerms.length > 0) {
+      const hpoTermsList: string[] = caseStore.caseInfo.hpoTerms.map((term) => term.term_id)
+      await cadaPrioStore.loadData(hpoTermsList)
+    }
+  }
+)
+</script>
+
+<template>
+  <v-card id="gene-ranking" class="gene-item">
+    <div v-if="cadaPrioStore.geneRanking">
+      <v-card-title>Cada-prio gene ranking for current HPO:</v-card-title>
+      <v-card-text>
+        <v-data-table
+          :headers="cadaPrioRankingFields as any"
+          :items="cadaPrioStore.geneRanking"
+          :items-per-page="10"
+          density="compact"
+        >
+          <template v-slot:[`item.gene_symbol`]="{ item }">
+            <router-link
+              :to="{ name: 'gene', params: { searchTerm: item.hgnc_id, genomeRelease: 'grch38' } }"
+              target="_blank"
+            >
+              {{ item.gene_symbol }}
+            </router-link>
+          </template>
+
+          <template v-slot:[`item.score`]="{ item }">
+            <span v-html="roundIt(item.score, 2)" />
+          </template>
+        </v-data-table>
+      </v-card-text>
+    </div>
+    <div v-else-if="cadaPrioStore.storeState === StoreState.Loading">
+      <v-progress-circular indeterminate></v-progress-circular>
+    </div>
+    <div v-else>
+      <v-card-text>
+        <p>No gene ranking for current phenotype was found. Did you specify HPO terms?</p>
+      </v-card-text>
+    </div>
+  </v-card>
+</template>
diff --git a/frontend/src/components/VariantDetails/VariantGene.vue b/frontend/src/components/VariantDetails/VariantGene.vue
index ae272512..bfcfa6cd 100644
--- a/frontend/src/components/VariantDetails/VariantGene.vue
+++ b/frontend/src/components/VariantDetails/VariantGene.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import { defineAsyncComponent } from 'vue'
+
+const CadaPrioRanking = defineAsyncComponent(
+  () => import('@/components/GeneDetails/CadaPrioRanking.vue')
+)
 export interface Props {
   /** Gene information from annonars. */
   gene: any
@@ -53,6 +58,8 @@ withDefaults(defineProps<Props>(), {
       </div>
     </v-card-text>
   </v-card>
+
+  <CadaPrioRanking />
 </template>
 
 <style scoped="true">
diff --git a/frontend/src/views/GeneDetailView.vue b/frontend/src/views/GeneDetailView.vue
index e2e872c2..807f8249 100644
--- a/frontend/src/views/GeneDetailView.vue
+++ b/frontend/src/views/GeneDetailView.vue
@@ -22,6 +22,9 @@ const ConstraintsCard = defineAsyncComponent(
 const DiseaseAnnotation = defineAsyncComponent(
   () => import('@/components/GeneDetails/DiseaseAnnotation.vue')
 )
+const CadaPrioRanking = defineAsyncComponent(
+  () => import('@/components/GeneDetails/CadaPrioRanking.vue')
+)
 const ExternalResouces = defineAsyncComponent(
   () => import('@/components/GeneDetails/ExternalResources.vue')
 )
@@ -96,6 +99,7 @@ const SECTIONS = [
   { id: 'alternative-identifiers', title: 'Alternative Identifiers' },
   { id: 'external-resources', title: 'External Resources' },
   { id: 'disease-annotation', title: 'Disease Annotation' },
+  { id: 'gene-ranking', title: 'Gene Ranking for current Phenotype' },
   { id: 'acmg-list', title: 'ACMG Supplementary Findings List' },
   { id: 'gene-rifs', title: 'Gene RIFs' },
   { id: 'locus-specific-databases', title: 'Locus-Specific Databases' },
@@ -166,6 +170,10 @@ const genomeReleaseRef = ref(props.genomeRelease)
           <DiseaseAnnotation :dbnsfp="geneInfoStore.geneInfo.dbnsfp" />
         </div>
 
+        <div id="gene-ranking" class="gene-item">
+          <CadaPrioRanking />
+        </div>
+
         <div id="acmg-list" class="gene-item">
           <SupplementaryList :acmg-sf="geneInfoStore.geneInfo?.acmg_sf" />
         </div>

From a574dda4101e3014170d774e2d5a2a0c49edac61 Mon Sep 17 00:00:00 2001
From: gromdimon <grom.dima.grom@gmail.com>
Date: Mon, 20 Nov 2023 15:30:42 +0100
Subject: [PATCH 6/6] format backend

---
 backend/tests/api/internal/test_proxy.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/tests/api/internal/test_proxy.py b/backend/tests/api/internal/test_proxy.py
index cfd2eb05..05f48a19 100644
--- a/backend/tests/api/internal/test_proxy.py
+++ b/backend/tests/api/internal/test_proxy.py
@@ -100,7 +100,7 @@ async def test_proxy_cada_prio(monkeypatch: MonkeyPatch, httpx_mock: HTTPXMock,
     response = client.get(f"/internal/proxy/cada-prio/{MOCKED_URL_TOKEN}")
     assert response.status_code == 200
     assert response.text == "Mocked response"
-    
+
 
 @pytest.mark.asyncio
 async def test_invalid_proxy_route(client: TestClient):