feat: Default Footer implementation (#33) (#35)

bihealth · Sep 4, 2023 · ef6549a · ef6549a
1 parent 6043aec
commit ef6549a
Show file tree

Hide file tree

Showing 13 changed files with 77 additions and 2,310 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,6 +8,9 @@ coverage.lcov
 # Environment variables
 .env
 
+# Local favicon
+/frontend/favicon.ico
+
 # Created by https://www.toptal.com/developers/gitignore/api/visualstudiocode,pycharm,vim,emacs
 # Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode,pycharm,vim,emacs
 

diff --git a/frontend/src/api/__tests__/utils.spec.ts b/frontend/src/api/__tests__/utils.spec.ts
@@ -36,17 +36,18 @@ describe('roundIt method', () => {
 
 describe('search method', () => {
   it('should return route location if match', () => {
-    const result = search('BRCA1')
+    const result = search('BRCA1', 'ghcr37')
     expect(result).toEqual({
       name: 'gene',
       params: {
-        searchTerm: 'BRCA1'
+        searchTerm: 'BRCA1',
+        genomeRelease: 'ghcr37'
       }
     })
   })
 
   it.skip('should return null if no match', () => {
-    const result = search('foo')
+    const result = search('foo', 'foo37')
     expect(result).toBe(null)
   })
 })
diff --git a/frontend/src/api/common.ts b/frontend/src/api/common.ts
@@ -1,3 +1,5 @@
+export const API_BASE_PREFIX = import.meta.env.MODE == 'development' ? '//localhost:8080/' : '/'
+
 export const API_BASE_PREFIX_ANNONARS =
   import.meta.env.MODE == 'development' ? '//localhost:8080/proxy/annonars' : '/proxy/annonars'
 

diff --git a/frontend/src/api/misc.ts b/frontend/src/api/misc.ts
@@ -1,6 +1,6 @@
-import { API_BASE_PREFIX_ANNONARS } from '@/api/common'
+import { API_BASE_PREFIX } from '@/api/common'
 
-const API_BASE_URL = API_BASE_PREFIX_ANNONARS
+const API_BASE_URL = API_BASE_PREFIX
 
 export class MiscClient {
   private apiBaseUrl: string

diff --git a/frontend/src/assets/reev-logo_old.svg b/frontend/src/assets/reev-logo_old.svg
diff --git a/frontend/src/components/FooterDefault.vue b/frontend/src/components/FooterDefault.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useMiscStore } from '@/stores/misc'
+
+const miscStore = useMiscStore()
+
+onMounted(() => {
+  if (miscStore?.initialize) {
+    miscStore?.initialize()
+  }
+})
+</script>
+
+<template>
+  <v-footer app>
+    <small>
+      Developed by BIH CUBI. For support and feedback, please contact [email protected].
+      REEV: Explanation and Evaluation of Variants {{ miscStore?.appVersion }}
+    </small>
+  </v-footer>
+</template>
diff --git a/frontend/src/components/HeaderDefault.vue b/frontend/src/components/HeaderDefault.vue
@@ -15,9 +15,14 @@ onMounted(() => {
   <v-app-bar app class="top-bar">
     <v-toolbar-title>
       <router-link to="/">
-        <img src="@/assets/reev-logo.svg" id="logo" alt="logo" width="70" />
+        <img
+          style="vertical-align: middle"
+          src="@/assets/reev-logo.svg"
+          id="logo"
+          alt="logo"
+          width="70"
+        />
         Explanation and Evaluation of Variants
-        <small>{{ miscStore?.appVersion }}</small>
       </router-link>
     </v-toolbar-title>
     <v-spacer></v-spacer>
@@ -43,5 +48,6 @@ onMounted(() => {
   margin-left: 25px;
   margin-right: 10px;
   margin-top: 10px;
+  margin-bottom: 10px;
 }
 </style>
diff --git a/frontend/src/components/HeaderDetailPage.vue b/frontend/src/components/HeaderDetailPage.vue
@@ -28,7 +28,13 @@ const performSearch = async () => {
   <v-app-bar app class="top-bar">
     <v-toolbar-title>
       <router-link to="/">
-        <img src="@/assets/reev-logo.svg" id="logo" alt="logo" width="100" />
+        <img
+          style="vertical-align: middle"
+          src="@/assets/reev-logo.svg"
+          id="logo"
+          alt="logo"
+          width="70"
+        />
       </router-link>
     </v-toolbar-title>
     <SearchBar
@@ -64,5 +70,6 @@ const performSearch = async () => {
 #logo {
   margin-left: 25px;
   margin-top: 10px;
+  margin-bottom: 10px;
 }
 </style>
diff --git a/frontend/src/components/VariantDetails/VariantTools.vue b/frontend/src/components/VariantDetails/VariantTools.vue
@@ -433,7 +433,7 @@ const jumpToLocus = async () => {
 
             <tr>
               <th class="align-middle">FATHMM</th>
-              <template v-if="fathmmScore">
+              <template v-if="fathmmScore && translatedFathmmScore">
                 <td class="text-center align-middle">{{ fathmmScore }}</td>
                 <td class="text-center align-middle">
                   <ScoreDisplay
@@ -720,7 +720,7 @@ const jumpToLocus = async () => {
 
             <tr>
               <th class="align-middle">SIFT</th>
-              <template v-if="siftScore">
+              <template v-if="siftScore && translatedSiftScore">
                 <td class="text-center align-middle">{{ siftScore }}</td>
                 <td class="text-center align-middle">
                   <ScoreDisplay

diff --git a/frontend/src/components/VariantDetails/VariantValidator.vue b/frontend/src/components/VariantDetails/VariantValidator.vue
@@ -46,7 +46,7 @@ const queryVariantValidatorApi = async () => {
         }}</span>
       </span>
     </p>
-    <div class="container-fluid" v-if="variantValidatorState === VariantValidatorStates.Done">
+    <!-- <div class="container-fluid" v-if="variantValidatorState === VariantValidatorStates.Done">
       <ul class="nav nav-pills pb-3" id="pills-tab" role="tablist">
         <template v-for="(data, identifier, index) in variantValidatorResults" :key="index">
           <li class="nav-item" v-if="identifier !== 'metadata' && identifier !== 'flag'">
@@ -197,7 +197,7 @@ const queryVariantValidatorApi = async () => {
           </div>
         </template>
       </div>
-    </div>
+    </div> -->
     <div v-else-if="variantValidatorState === VariantValidatorStates.Running">
       <div class="alert alert-info">
         <v-progress-circular indeterminate></v-progress-circular>

diff --git a/frontend/src/components/__tests__/HeaderDefault.spec.ts b/frontend/src/components/__tests__/HeaderDefault.spec.ts
@@ -56,7 +56,7 @@ describe('HeaderDefault.vue', () => {
     const logo = wrapper.find('#logo')
     const title = wrapper.find('a[href="/"]')
     expect(logo.exists()).toBe(true)
-    expect(title.text()).toBe('Explanation and Evaluation of Variants v0.0.0')
+    expect(title.text()).toBe('Explanation and Evaluation of Variants')
   })
 
   it('renders the navigation links', () => {

diff --git a/frontend/src/main.ts b/frontend/src/main.ts
@@ -13,10 +13,31 @@ import App from '@/App.vue'
 import router from '@/router'
 
 const app = createApp(App)
+
+const LightTheme = {
+  dark: false,
+  colors: {
+    background: '#FFFFFF',
+    surface: '#FFFFFF',
+    primary: '#E55540',
+    'primary-darken-1': '#3700B3',
+    secondary: '#03DAC6',
+    'secondary-darken-1': '#018786',
+    error: '#B00020',
+    info: '#2196F3',
+    success: '#4CAF50',
+    warning: '#FB8C00'
+  }
+}
+
 const vuetify = createVuetify({
   blueprint: md3,
   components,
-  directives
+  directives,
+  theme: {
+    defaultTheme: 'LightTheme',
+    themes: { LightTheme }
+  }
 })
 
 app.use(createPinia())

diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
@@ -9,6 +9,7 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import HeaderDefault from '@/components/HeaderDefault.vue'
+import FooterDefault from '@/components/FooterDefault.vue'
 import SearchBar from '@/components/SearchBar.vue'
 import { search } from '@/api/utils'
 
@@ -69,6 +70,7 @@ const performSearch = async () => {
       </v-col>
     </v-row>
   </v-container>
+  <FooterDefault />
 </template>
 
 <style scoped>