feat: put the current version into docker image and display (#28) (#29)

.gitignore

@@ -2,6 +2,9 @@
 .coverage
 coverage.lcov
 
+# Version file
+/VERSION
+
 # Environment variables
 .env
 

backend/app/main.py

@@ -1,5 +1,6 @@
 import os
 import pathlib
+import subprocess
 import sys
 
 import httpx
@@ -25,6 +26,14 @@
 BACKEND_PREFIX_MEHARI = env.get("REEV_BACKEND_PREFIX_MEHARI", "http://mehari:8080")
 #: Prefix for the backend of viguno service
 BACKEND_PREFIX_VIGUNO = env.get("REEV_BACKEND_PREFIX_VIGUNO", "http://viguno:8080")
+#: Path to REEV version file.
+VERSION_FILE = env.get("REEV_VERSION_FILE", "/VERSION")
+#: The REEV version from the file (``None`` if to load dynamically from git)
+REEV_VERSION = None
+# Try to obtain version from file, otherwise keep it at ``None``
+if os.path.exists(VERSION_FILE):
+    with open(VERSION_FILE) as f:
+        REEV_VERSION = f.read().strip() or None
 
 
 app = FastAPI()
@@ -82,6 +91,16 @@ async def reverse_proxy(request: Request) -> Response:
 app.add_route("/proxy/{path:path}", reverse_proxy, methods=["GET", "POST"])
 
 
+# Register app for returning REEV version.
+@app.get("/version")
+async def version():
+    if REEV_VERSION:
+        version = REEV_VERSION
+    else:
+        version = subprocess.check_output(["git", "describe", "--tags", "--dirty"]).strip()
+    return Response(content=version)
+
+
 # Register route for favicon.
 @app.get("/favicon.ico")
 async def favicon():

frontend/src/api/__tests__/common.spec.ts

@@ -1,11 +1,17 @@
 import { describe, it, expect } from 'vitest'
 
-import { API_BASE_PREFIX } from '../common'
+import { API_BASE_PREFIX, API_PROXY_BASE_PREFIX } from '../common'
 
-describe('API_BASE_PREFIX constant', () => {
-  it('returns the correct API base prefix in production mode', () => {
+describe('constants', () => {
+  it('returns the correct proxy API base prefix in production mode', () => {
     const originalMode = import.meta.env.MODE
-    expect(API_BASE_PREFIX).toBe('/proxy/annonars')
+    expect(API_BASE_PREFIX).toBe('/')
+    import.meta.env.MODE = originalMode
+  })
+
+  it('returns the correct proxy API base prefix in production mode', () => {
+    const originalMode = import.meta.env.MODE
+    expect(API_PROXY_BASE_PREFIX).toBe('/proxy/')
     import.meta.env.MODE = originalMode
   })
 })

frontend/src/api/__tests__/misc.spec.ts

@@ -0,0 +1,21 @@
+import { beforeEach, describe, it, expect, vi } from 'vitest'
+import createFetchMock from 'vitest-fetch-mock'
+
+import { MiscClient } from '../misc'
+
+const fetchMocker = createFetchMock(vi)
+
+describe('Misc Client', () => {
+  beforeEach(() => {
+    fetchMocker.enableMocks()
+    fetchMocker.resetMocks()
+  })
+
+  it('fetches version info correctly', async () => {
+    fetchMocker.mockResponseOnce('v0.0.0')
+
+    const client = new MiscClient()
+    const result = await client.fetchVersion()
+    expect(result).toEqual('v0.0.0')
+  })
+})

frontend/src/api/annonars.ts

@@ -1,18 +1,16 @@
-import { API_BASE_PREFIX } from '@/api/common'
-
-const API_BASE_URL = `${API_BASE_PREFIX}/`
+import { API_PROXY_BASE_PREFIX } from '@/api/common'
 
 export class AnnonarsClient {
   private apiBaseUrl: string
   private csrfToken: string | null
 
   constructor(apiBaseUrl?: string, csrfToken?: string) {
-    this.apiBaseUrl = apiBaseUrl ?? API_BASE_URL
+    this.apiBaseUrl = apiBaseUrl ?? `${API_PROXY_BASE_PREFIX}annonars`
     this.csrfToken = csrfToken ?? null
   }
 
   async fetchGeneInfo(hgncId: string): Promise<any> {
-    const response = await fetch(`${this.apiBaseUrl}genes/info?hgnc_id=${hgncId}`, {
+    const response = await fetch(`${this.apiBaseUrl}/genes/info?hgnc_id=${hgncId}`, {
       method: 'GET'
     })
     return await response.json()

frontend/src/api/common.ts

@@ -1,2 +1,3 @@
-export const API_BASE_PREFIX =
-  import.meta.env.MODE == 'development' ? '//localhost:8080/proxy/annonars' : '/proxy/annonars'
+export const API_BASE_PREFIX = import.meta.env.MODE == 'development' ? '//localhost:8080/' : '/'
+
+export const API_PROXY_BASE_PREFIX = `${API_BASE_PREFIX}proxy/`

frontend/src/api/misc.ts

@@ -0,0 +1,20 @@
+import { API_BASE_PREFIX } from '@/api/common'
+
+const API_BASE_URL = API_BASE_PREFIX
+
+export class MiscClient {
+  private apiBaseUrl: string
+  private csrfToken: string | null
+
+  constructor(apiBaseUrl?: string, csrfToken?: string) {
+    this.apiBaseUrl = apiBaseUrl ?? API_BASE_URL
+    this.csrfToken = csrfToken ?? null
+  }
+
+  async fetchVersion(): Promise<any> {
+    const response = await fetch(`${this.apiBaseUrl}version`, {
+      method: 'GET'
+    })
+    return await response.text()
+  }
+}

frontend/src/components/HeaderDefault.vue

@@ -1,9 +1,23 @@
+<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-app-bar app class="top-bar">
     <v-toolbar-title>
       <router-link to="/">
         <img src="@/assets/reev-logo.svg" id="logo" alt="logo" width="100" />
         Explanation and Evaluation of Variants
+        <small>{{ miscStore?.appVersion }}</small>
       </router-link>
     </v-toolbar-title>
     <v-spacer></v-spacer>

frontend/src/components/__tests__/HeaderDefault.spec.ts

@@ -2,6 +2,7 @@ import { describe, it, expect, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from '@/router'
+import { createTestingPinia } from '@pinia/testing'
 
 import { createVuetify } from 'vuetify'
 import * as components from 'vuetify/components'
@@ -28,7 +29,18 @@ const makeWrapper = () => {
     },
     {
       global: {
-        plugins: [vuetify, router],
+        plugins: [
+          vuetify,
+          router,
+          createTestingPinia({
+            createSpy: vi.fn(),
+            initialState: {
+              misc: {
+                appVersion: 'v0.0.0'
+              }
+            }
+          })
+        ],
         components: {
           HeaderDefault
         }
@@ -44,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')
+    expect(title.text()).toBe('Explanation and Evaluation of Variants v0.0.0')
   })
 
   it('renders the navigation links', () => {

frontend/src/components/__tests__/HeaderDetailPage.spec.ts

@@ -11,7 +11,7 @@ import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 
 import HeaderDetailPage from '../HeaderDetailPage.vue'
-import { StoreState } from '@/stores/geneInfo'
+import { StoreState } from '@/stores/misc'
 
 const vuetify = createVuetify({
   components,

frontend/src/stores/__tests__/geneInfo.spec.ts

@@ -3,7 +3,8 @@ import createFetchMock from 'vitest-fetch-mock'
 
 import { setActivePinia, createPinia } from 'pinia'
 
-import { useGeneInfoStore, StoreState } from '../geneInfo'
+import { StoreState } from '../misc'
+import { useGeneInfoStore } from '../geneInfo'
 
 const fetchMocker = createFetchMock(vi)
 

frontend/src/stores/__tests__/misc.spec.ts

@@ -0,0 +1,33 @@
+import { beforeEach, describe, it, expect, vi } from 'vitest'
+import createFetchMock from 'vitest-fetch-mock'
+
+import { setActivePinia, createPinia } from 'pinia'
+
+import { StoreState, useMiscStore } from '../misc'
+
+const fetchMocker = createFetchMock(vi)
+
+describe('miscInfo Store', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    fetchMocker.enableMocks()
+    fetchMocker.resetMocks()
+  })
+
+  it('should have initial state', () => {
+    const store = useMiscStore()
+
+    expect(store.storeState).toBe(StoreState.Initial)
+    expect(store.appVersion).toBe(null)
+  })
+
+  it('should load data', async () => {
+    const store = useMiscStore()
+    fetchMocker.mockResponseOnce('v0.0.0')
+
+    await store.initialize()
+
+    expect(store.storeState).toBe(StoreState.Active)
+    expect(store.appVersion).toBe('v0.0.0')
+  })
+})

frontend/src/stores/geneInfo.ts

@@ -6,15 +6,9 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
+import { StoreState } from '@/stores/misc'
 import { AnnonarsClient } from '@/api/annonars'
 
-export enum StoreState {
-  Initial = 'initial',
-  Loading = 'loading',
-  Active = 'active',
-  Error = 'error'
-}
-
 export const useGeneInfoStore = defineStore('geneInfo', () => {
   // The current store state
   const storeState = ref<StoreState>(StoreState.Initial)

frontend/src/stores/misc.ts

@@ -0,0 +1,43 @@
+/**
+ * Store for misc info such as the current version.
+ */
+
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+import { MiscClient } from '@/api/misc'
+
+export enum StoreState {
+  Initial = 'initial',
+  Loading = 'loading',
+  Active = 'active',
+  Error = 'error'
+}
+
+export const useMiscStore = defineStore('misc', () => {
+  // The current store state
+  const storeState = ref<StoreState>(StoreState.Initial)
+
+  // The app version.
+  const appVersion = ref<string | null>(null)
+
+  // Initialize store, load version.
+  const initialize = async () => {
+    storeState.value = StoreState.Loading
+    try {
+      const client = new MiscClient()
+      appVersion.value = await client.fetchVersion()
+
+      storeState.value = StoreState.Active
+    } catch (e) {
+      console.error('There was an error loading the app version.', e)
+      storeState.value = StoreState.Error
+    }
+  }
+
+  return {
+    storeState,
+    appVersion,
+    initialize
+  }
+})

frontend/src/views/GeneDetailView.vue

@@ -2,7 +2,8 @@
 import { watch, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
-import { StoreState, useGeneInfoStore } from '@/stores/geneInfo'
+import { StoreState } from '@/stores/misc'
+import { useGeneInfoStore } from '@/stores/geneInfo'
 
 import HeaderDetailPage from '@/components/HeaderDetailPage.vue'
 import { roundIt } from '@/api/utils'

frontend/src/views/__tests__/AboutView.spec.ts

@@ -2,6 +2,7 @@ import { describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from '@/router'
+import { createTestingPinia } from '@pinia/testing'
 
 import { createVuetify } from 'vuetify'
 import * as components from 'vuetify/components'
@@ -28,7 +29,18 @@ const makeWrapper = () => {
     },
     {
       global: {
-        plugins: [vuetify, router],
+        plugins: [
+          vuetify,
+          router,
+          createTestingPinia({
+            createSpy: vi.fn(),
+            initialState: {
+              misc: {
+                appVersion: 'v0.0.0'
+              }
+            }
+          })
+        ],
         components: {
           AboutView
         }

frontend/src/views/__tests__/ContactView.spec.ts

@@ -2,6 +2,7 @@ import { describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from '@/router'
+import { createTestingPinia } from '@pinia/testing'
 
 import { createVuetify } from 'vuetify'
 import * as components from 'vuetify/components'
@@ -28,7 +29,18 @@ const makeWrapper = () => {
     },
     {
       global: {
-        plugins: [vuetify, router],
+        plugins: [
+          vuetify,
+          router,
+          createTestingPinia({
+            createSpy: vi.fn(),
+            initialState: {
+              misc: {
+                appVersion: 'v0.0.0'
+              }
+            }
+          })
+        ],
         components: {
           ContactView
         }

frontend/src/views/__tests__/GeneDetailView.spec.ts

@@ -11,7 +11,7 @@ import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 
 import GeneDetailView from '../GeneDetailView.vue'
-import { StoreState } from '@/stores/geneInfo'
+import { StoreState } from '@/stores/misc'
 import * as BRCA1geneInfo from '@/assets/__tests__/BRCA1GeneInfo.json'
 
 const vuetify = createVuetify({