feat: integrate variant details pages from reev (#1300)

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "varfish/vueapp/ext/reev-frontend-lib"]
+	path = varfish/vueapp/ext/reev-frontend-lib
+	url = https://github.com/bihealth/reev-frontend-lib.git

cases/templates/cases/entrypoint.html

@@ -12,6 +12,6 @@
   <div id="sodar-ss-app-context" app-context="{{ app_context }}"></div>
   <div id="app" class="h-100"></div>
 
-  {% vite_scripts 'src/cases/main.js' %}
-  {% vite_styles 'src/cases/main.js' %}
+  {% vite_scripts 'src/cases/main.ts' %}
+  {% vite_styles 'src/cases/main.ts' %}
 {% endblock %}

cases/vueapp/src/main.ts

@@ -0,0 +1,22 @@
+import App from '@cases/App.vue'
+import { createApp, nextTick } from 'vue'
+import { registerPlugins } from './plugins'
+
+declare global {
+  interface Window {
+    _paq: any[]
+  }
+}
+
+async function bootstrap() {
+  const app = createApp(App)
+
+  await registerPlugins(app)
+
+  app.mount('#app')
+
+  await nextTick()
+  window._paq?.push(['trackPageView'])
+}
+
+bootstrap()

cases/vueapp/src/plugins/index.ts

@@ -0,0 +1,11 @@
+import type { App } from 'vue'
+
+import { router } from '../router'
+import { vuetify } from './vuetify'
+import { pinia } from '../stores'
+import { setupBackendUrls } from './reevFrontend'
+
+export async function registerPlugins(app: App) {
+  setupBackendUrls()
+  app.use(vuetify).use(router).use(pinia)
+}

cases/vueapp/src/plugins/reevFrontend.ts

@@ -0,0 +1,14 @@
+import { urlConfig } from '@bihealth/reev-frontend-lib/lib/urlConfig'
+
+export function setupBackendUrls() {
+  urlConfig.baseUrlAnnonars = '/proxy/varfish/annonars'
+  urlConfig.baseUrlMehari = '/proxy/varfish/mehari'
+  urlConfig.baseUrlViguno = '/proxy/varfish/viguno'
+  urlConfig.baseUrlNginx = '/proxy/varfish/nginx'
+  urlConfig.baseUrlPubtator = '/proxy/remote/pubtator3-api'
+
+  // urlConfig.baseUrlCadaPrio = '/internal/proxy/cada-prio'
+  // urlConfig.baseUrlDotty = '/internal/proxy/dotty'
+  // urlConfig.baseUrlVariantValidator = '/remote/variantvalidator'
+  // urlConfig.baseUrlPubtator = '/remote/pubtator3-api'
+}

cases/vueapp/src/plugins/vuetify.ts

@@ -0,0 +1,61 @@
+/**
+ * plugins/vuetify.ts
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+// Composables
+import { type ThemeDefinition, createVuetify } from 'vuetify'
+import { aliases, mdi } from 'vuetify/iconsets/mdi'
+import { md3 } from 'vuetify/blueprints'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import '../styles/main.scss'
+
+const customLightTheme: ThemeDefinition = {
+  dark: false,
+  colors: {
+    primary: '#757ce8',
+    secondary: '#3f50b5',
+    tertiary: '#002884',
+    background: '#eeeeee',
+    success: '#4caf50',
+    warning: '#ff9800',
+    error: '#f44336',
+    info: '#f0f2f5',
+  },
+}
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export const vuetify = createVuetify({
+  blueprint: md3,
+  components: {
+    ...components,
+  },
+  icons: {
+    defaultSet: 'mdi',
+    aliases,
+    sets: {
+      mdi,
+    },
+  },
+  directives,
+  defaults: {
+    global: {
+      flat: true,
+    },
+    VCard: {
+      rounded: 'lg',
+    },
+    VSheet: {
+      rounded: 'lg',
+    },
+  },
+  theme: {
+    defaultTheme: 'customLightTheme',
+    themes: {
+      customLightTheme,
+    },
+  },
+})

cases/vueapp/src/main.js → cases/vueapp/src/router/index.ts

@@ -1,13 +1,10 @@
-import App from '@cases/App.vue'
 import CaseDetailApp from '@cases/components/CaseDetailApp.vue'
 import CaseListApp from '@cases/components/CaseListApp.vue'
 import SvDetails from '@svs/components/SvDetails.vue'
 import SvFilterApp from '@svs/components/SvFilterApp.vue'
 import { useHistoryStore } from '@varfish/stores/history'
 import FilterApp from '@variants/components/FilterApp.vue'
 import VariantDetails from '@variants/components/VariantDetails.vue'
-import { createPinia } from 'pinia'
-import { createApp } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
 
 const routes = [
@@ -117,7 +114,7 @@ const routes = [
   },
 ]
 
-const router = createRouter({
+export const router = createRouter({
   history: createWebHashHistory(),
   routes,
   scrollBehavior(to, from, savedPosition) {
@@ -134,12 +131,6 @@ const router = createRouter({
   },
 })
 
-const pinia = createPinia()
-const app = createApp(App)
-app.use(router)
-app.use(pinia)
-app.mount('#app')
-
 router.beforeEach((_to, from) => {
   // Push history element, initial will be swallowed by store.
   const historyStore = useHistoryStore()

cases/vueapp/src/stores/index.ts

@@ -0,0 +1,4 @@
+// Utilities
+import { createPinia } from 'pinia'
+
+export const pinia = createPinia()

cases/vueapp/src/styles/main.scss

@@ -0,0 +1,22 @@
+@use 'vuetify' with (
+  $utilities: (
+    margin: false,
+    margin-x: false,
+    margin-y: false,
+    margin-top: false,
+    margin-bottom: false,
+    margin-left: false,
+    margin-right: false,
+    margin-start: false,
+    margin-end: false,
+    negative-margin: false,
+    negative-margin-x: false,
+    negative-margin-y: false,
+    negative-margin-top: false,
+    negative-margin-bottom: false,
+    negative-margin-left: false,
+    negative-margin-right: false,
+    negative-margin-start: false,
+    negative-margin-end: false,
+  )
+);

config/urls.py

@@ -121,6 +121,14 @@ def handler500(request, *args, **argv):
             ignored_request_headers=HttpProxy.ignored_upstream_headers + ["cookie"],
         ),
     ),
+    # Augment url patterns with proxy for PubTator3
+    url(
+        r"^proxy/remote/pubtator3-api/(?P<url>.*)$",
+        HttpProxy.as_view(
+            base_url="https://www.ncbi.nlm.nih.gov/research/pubtator3-api/",
+            ignored_request_headers=HttpProxy.ignored_upstream_headers + ["cookie"],
+        ),
+    ),
     url(
         r"^proxy/varfish/viguno/(?P<url>.*)$",
         HttpProxy.as_view(

tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./varfish/vueapp/tsconfig.json"
+}

varfish/vueapp/jsconfig.json

@@ -10,7 +10,8 @@
       "@svs/*": ["./src/svs/*"],
       "@cases/*": ["./src/cases/*"],
       "@cases_qc/*": ["./src/cases_qc/*"],
-      "@cohorts/*": ["./src/cohorts/*"]
+      "@cohorts/*": ["./src/cohorts/*"],
+      "@bihealth/reev-frontend-lib/*": ["./src/reev-frontend-lib/src/*"]
     }
   }
 }