feat: integration of strucvars from REEV (#1300)

cases/vueapp/src/components/CaseDetail/Content.vue

@@ -8,7 +8,6 @@ import PaneAnnotations from '@cases/components/CaseDetail/PaneAnnotations.vue'
 import { useRouter } from 'vue-router'
 import { useCaseDetailsStore } from '@cases/stores/caseDetails'
 import { useCaseQcStore } from '@cases_qc/stores/caseQc'
-import GenomeBrowser from '@svs/components/GenomeBrowser.vue'
 
 const router = useRouter()
 
@@ -38,7 +37,6 @@ const Tabs = Object.freeze({
   overview: 'overview',
   qc: 'qc',
   annotation: 'annotation',
-  browser: 'browser',
 })
 
 const caseDetailsStore = useCaseDetailsStore()
@@ -113,18 +111,6 @@ const updateCurrentTab = (newValue) => {
           </span>
         </a>
       </li>
-      <li class="nav-item">
-        <a
-          class="nav-link"
-          :class="{ active: props.currentTab === Tabs.browser }"
-          role="button"
-          @click="updateCurrentTab(Tabs.browser)"
-        >
-          <i-mdi-safety-goggles />
-
-          Browser
-        </a>
-      </li>
     </ul>
     <div id="cases-content" class="tab-content flex-grow-1 d-flex flex-column">
       <div
@@ -166,17 +152,6 @@ const updateCurrentTab = (newValue) => {
           <template #fallback> Loading ... </template>
         </Suspense>
       </div>
-      <div
-        v-if="props.currentTab === Tabs.browser"
-        id="case-list"
-        class="border border-top-0 tab-pane fade show active flex-grow-1 d-flex flex-column"
-        role="tabpanel"
-      >
-        <GenomeBrowser
-          :case-uuid="caseDetailsStore.caseObj?.sodar_uuid"
-          :genome="caseDetailsStore.caseObj?.release"
-        />
-      </div>
     </div>
   </div>
 </template>

cases/vueapp/src/components/CaseDetail/PaneAnnotations.vue

@@ -18,7 +18,7 @@ const showSmallVariantDetails = async (event) => {
 
 const showStructuralVariantDetails = async (event) => {
   router.push({
-    name: 'sv-details',
+    name: 'strucvar-details',
     params: {
       row: event.svresultrow,
       selectedSection: event.selectedSection ?? null,

cases/vueapp/src/plugins/reevFrontend.ts

@@ -4,7 +4,7 @@ export function setupBackendUrls() {
   urlConfig.baseUrlAnnonars = '/proxy/varfish/annonars'
   urlConfig.baseUrlMehari = '/proxy/varfish/mehari'
   urlConfig.baseUrlViguno = '/proxy/varfish/viguno'
-  urlConfig.baseUrlNginx = '/proxy/varfish/nginx'
+  urlConfig.baseUrlNginx = '/proxy/varfish/nginx/'
   urlConfig.baseUrlPubtator = '/proxy/remote/pubtator3-api'
   urlConfig.baseUrlVariantValidator = '/proxy/variantvalidator'
 

cases/vueapp/src/router/index.ts

@@ -1,6 +1,6 @@
 import CaseDetailApp from '@cases/components/CaseDetailApp.vue'
 import CaseListApp from '@cases/components/CaseListApp.vue'
-import SvDetails from '@svs/components/SvDetails.vue'
+import StrucvarDetails from '@svs/views/StrucvarDetails/StrucvarDetails.vue'
 import SvFilterApp from '@svs/components/SvFilterApp.vue'
 import { useHistoryStore } from '@varfish/stores/history'
 import FilterApp from '@variants/components/FilterApp.vue'
@@ -110,12 +110,12 @@ const routes: RouteRecordRaw[] = [
     }),
   },
   {
-    name: 'sv-details',
-    path: '/svs/details/:row/:selectedSection?',
-    component: SvDetails,
+    name: 'strucvar-details',
+    path: '/strucvar/details/:row/:selectedSection?',
+    component: StrucvarDetails,
     props: (route: RouteLocationNormalized) => ({
       resultRowUuid: route.params.row,
-      selectedSection: route.params.selectedSection || 'genes',
+      selectedSection: route.params.selectedSection || 'top',
     }),
   },
 ]
@@ -135,7 +135,7 @@ export const router = createRouter({
     savedPosition: null | _ScrollPositionNormalized,
   ) {
     if (
-      ['seqvar-details', 'sv-details'].includes(String(to.name)) &&
+      ['seqvar-details', 'strucvar-details'].includes(String(to.name)) &&
       to.params.selectedSection
     ) {
       const res = { el: `#${to.params.selectedSection}` }

cases/vueapp/tests/unit/cases/CaseDetail/Content.spec.js

@@ -33,8 +33,7 @@ describe('CaseDetailContent.vue', () => {
     expect(wrapper.html()).matches(/<pane-case-stub/)
     expect(wrapper.html()).not.matches(/<pane-qc-stub/)
     expect(wrapper.html()).not.matches(/<pane-annotations-stub/)
-    expect(wrapper.html()).not.matches(/<genome-browser-stub/)
-    expect(wrapper.findAll('a.nav-link').length).toBe(4)
+    expect(wrapper.findAll('a.nav-link').length).toBe(3)
   })
 
   test('test with some data', async () => {
@@ -45,8 +44,7 @@ describe('CaseDetailContent.vue', () => {
     expect(wrapper.html()).matches(/<pane-case-stub/)
     expect(wrapper.html()).not.matches(/<pane-qc-stub/)
     expect(wrapper.html()).not.matches(/<pane-annotations-stub/)
-    expect(wrapper.html()).not.matches(/<genome-browser-stub/)
-    expect(wrapper.findAll('a.nav-link').length).toBe(4)
+    expect(wrapper.findAll('a.nav-link').length).toBe(3)
   })
 
   test('test click quality control', async () => {
@@ -57,9 +55,8 @@ describe('CaseDetailContent.vue', () => {
     expect(wrapper.html()).matches(/<pane-case-stub/)
     expect(wrapper.html()).not.matches(/<pane-qc-stub/)
     expect(wrapper.html()).not.matches(/<pane-annotations-stub/)
-    expect(wrapper.html()).not.matches(/<genome-browser-stub/)
 
-    expect(wrapper.findAll('a.nav-link').length).toBe(4)
+    expect(wrapper.findAll('a.nav-link').length).toBe(3)
     await wrapper.findAll('a.nav-link')[1].trigger('click')
 
     expect(router.push).toHaveBeenCalledTimes(1)
@@ -73,7 +70,6 @@ describe('CaseDetailContent.vue', () => {
     // expect(wrapper.html()).not.matches(/<pane-case-stub/)
     // expect(wrapper.html()).matches(/<pane-qc-stub/)
     // expect(wrapper.html()).not.matches(/<pane-annotations-stub/)
-    // expect(wrapper.html()).not.matches(/<genome-browser-stub/)
   })
 
   test('test click quality control, then overview', async () => {
@@ -84,9 +80,8 @@ describe('CaseDetailContent.vue', () => {
     expect(wrapper.html()).matches(/<pane-case-stub/)
     expect(wrapper.html()).not.matches(/<pane-qc-stub/)
     expect(wrapper.html()).not.matches(/<pane-annotations-stub/)
-    expect(wrapper.html()).not.matches(/<genome-browser-stub/)
 
-    expect(wrapper.findAll('a.nav-link').length).toBe(4)
+    expect(wrapper.findAll('a.nav-link').length).toBe(3)
     await wrapper.findAll('a.nav-link')[1].trigger('click')
     await wrapper.findAll('a.nav-link')[0].trigger('click')
 
@@ -107,7 +102,6 @@ describe('CaseDetailContent.vue', () => {
     expect(wrapper.html()).matches(/<pane-case-stub/)
     expect(wrapper.html()).not.matches(/<pane-qc-stub/)
     expect(wrapper.html()).not.matches(/<pane-annotations-stub/)
-    expect(wrapper.html()).not.matches(/<genome-browser-stub/)
   })
 
   test('test click variant annotation', async () => {
@@ -120,7 +114,7 @@ describe('CaseDetailContent.vue', () => {
     expect(wrapper.html()).not.matches(/<pane-annotations-stub/)
     expect(wrapper.html()).not.matches(/<genome-browser-stub/)
 
-    expect(wrapper.findAll('a.nav-link').length).toBe(4)
+    expect(wrapper.findAll('a.nav-link').length).toBe(3)
     await wrapper.findAll('a.nav-link')[2].trigger('click')
 
     expect(router.push).toHaveBeenCalledTimes(1)
@@ -134,33 +128,5 @@ describe('CaseDetailContent.vue', () => {
     // expect(wrapper.html()).not.matches(/<pane-case-stub/)
     // expect(wrapper.html()).not.matches(/<pane-qc-stub/)
     // expect(wrapper.html()).matches(/<pane-annotations-stub/)
-    // expect(wrapper.html()).not.matches(/<genome-browser-stub/)
-  })
-
-  test('test click genome browser', async () => {
-    const wrapper = makeWrapper(CaseDetailContent, {
-      caseDetails: caseDetailsStoreData,
-    })
-
-    expect(wrapper.html()).matches(/<pane-case-stub/)
-    expect(wrapper.html()).not.matches(/<pane-qc-stub/)
-    expect(wrapper.html()).not.matches(/<pane-annotations-stub/)
-    expect(wrapper.html()).not.matches(/<genome-browser-stub/)
-
-    expect(wrapper.findAll('a.nav-link').length).toBe(4)
-    await wrapper.findAll('a.nav-link')[3].trigger('click')
-
-    expect(router.push).toHaveBeenCalledTimes(1)
-    expect(router.push).toHaveBeenCalledWith({
-      name: 'case-detail-browser',
-      params: {
-        case: caseDetailsStoreData.caseObj.sodar_uuid,
-      },
-    })
-
-    // expect(wrapper.html()).not.matches(/<pane-case-stub/)
-    // expect(wrapper.html()).not.matches(/<pane-qc-stub/)
-    // expect(wrapper.html()).not.matches(/<pane-annotations-stub/)
-    // expect(wrapper.html()).matches(/<genome-browser-stub/)
   })
 })