feat: start integrating seqvars filtration with frontend (#1882) (#1889)

.github/workflows/playwright.yml

@@ -14,7 +14,8 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          submodules: true
+          submodules: 'recursive'
+          lfs: true
       - uses: actions/setup-node@v4
         with:
           node-version: 18

backend/cases/views_api.py

@@ -4,6 +4,7 @@
 from django.conf import settings
 from django.db import transaction
 from django.middleware.csrf import get_token
+from drf_spectacular.utils import OpenApiParameter, extend_schema, extend_schema_view
 from modelcluster.queryset import FakeQuerySet
 from projectroles.app_settings import AppSettingAPI
 from projectroles.views_api import (
@@ -60,6 +61,15 @@ class CasePagination(PageNumberPagination):
     max_page_size = 1000
 
 
+@extend_schema_view(
+    get=extend_schema(
+        parameters=[
+            OpenApiParameter(name="order_by", type=str),
+            OpenApiParameter(name="order_dir", type=str),
+            OpenApiParameter(name="q", type=str),
+        ]
+    )
+)
 class CaseListApiView(SODARAPIBaseProjectMixin, ListAPIView):
     """
     List all cases in the current project.

backend/varfish/tests/drf_openapi_schema/varfish_api_schema.yaml

@@ -856,6 +856,14 @@ paths:
 
         **Returns:** List of project details (see :py:class:`CaseRetrieveApiView`)
       parameters:
+      - in: query
+        name: order_by
+        schema:
+          type: string
+      - in: query
+        name: order_dir
+        schema:
+          type: string
       - name: page
         required: false
         in: query
@@ -874,6 +882,10 @@ paths:
           type: string
           pattern: ^[0-9a-f-]+$
         required: true
+      - in: query
+        name: q
+        schema:
+          type: string
       tags:
       - cases
       security:

frontend/.gitignore

@@ -1,4 +1,5 @@
 /components.d.ts
+/test-results
 
 !/src
 !/ext/varfish-api/src/lib

frontend/end-to-end-tests/seqvar-filtration.spec.ts

@@ -122,7 +122,7 @@ test.describe('genotype', () => {
 test.describe('genotype (recessive)', () => {
   test.beforeEach(async ({ page }) => {
     await page
-      .locator('button[aria-label="Create query based on recessive"]')
+      .locator('button[title="Create query based on recessive"]')
       .click()
   })
 

frontend/ext/varfish-api/src/lib/types.gen.ts

@@ -3545,6 +3545,8 @@ export type CasesApiCaseListListData = {
         project: string;
     };
     query?: {
+        order_by?: string;
+        order_dir?: string;
         /**
          * A page number within the paginated result set.
          */
@@ -3553,6 +3555,7 @@ export type CasesApiCaseListListData = {
          * Number of results to return per page.
          */
         page_size?: number;
+        q?: string;
     };
 };
 

frontend/package.json

@@ -6,6 +6,7 @@
     "build": "vite build --emptyOutDir",
     "test:unit": "vitest run",
     "test:unit:nocov": "vitest run",
+    "test:e2e": "playwright test",
     "lint": "eslint . --fix --max-warnings 0",
     "type-check": "vue-tsc --noEmit --composite false",
     "prettier-check": "npx prettier --check src/*/** tests/*/**",
@@ -24,11 +25,11 @@
     "@vueform/multiselect": "^2.6.7",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
+    "@wdns/vuetify-resize-drawer": "^3.1.6",
     "bootstrap": "^4.6.2",
     "camelcase": "^8.0.0",
     "core-js": "^3.37.0",
     "fast-deep-equal": "^3.1.3",
-    "iconify-icon": "^2.1.0",
     "igv": "^2.15.11",
     "javascript-time-ago": "^2.5.10",
     "jquery": "^3.7.1",

frontend/src/cases/components/CaseDetail/CardCase.vue

@@ -96,6 +96,8 @@ const badgeStatusColor = computed(() => {
             Reference Genome
           </span>
           <span class="col-3"> {{ caseObj.release }} </span>
+          <span class="col-3 text-nowrap font-weight-bold"> Case Version </span>
+          <span class="col-3"> {{ caseObj.case_version }} </span>
         </div>
       </li>
       <li class="list-group-item pl-2">

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

@@ -42,7 +42,7 @@ const caseQcStore = useCaseQcStore()
   <div
     v-if="props.currentTab === Tabs.overview"
     id="case-list"
-    class="border border-top-0 tab-pane fade show active flex-grow-1 d-flex flex-column"
+    class="border-top-0 tab-pane fade show active flex-grow-1 d-flex flex-column"
     role="tabpanel"
   >
     <PaneCase
@@ -61,7 +61,7 @@ const caseQcStore = useCaseQcStore()
   <div
     v-if="props.currentTab === Tabs.qc && caseDetailsStore.caseObj"
     id="case-list"
-    class="border border-top-0 tab-pane fade show active flex-grow-1 d-flex flex-column"
+    class="border-top-0 tab-pane fade show active flex-grow-1 d-flex flex-column"
     role="tabpanel"
   >
     <LegacyPaneQc v-if="caseDetailsStore.caseObj?.case_version !== 2" />
@@ -70,7 +70,7 @@ const caseQcStore = useCaseQcStore()
   <div
     v-if="props.currentTab === Tabs.annotation"
     id="case-list"
-    class="border border-top-0 tab-pane fade show active flex-grow-1 d-flex flex-column"
+    class="border-top-0 tab-pane fade show active flex-grow-1 d-flex flex-column"
     role="tabpanel"
   >
     <Suspense>

frontend/src/cases/components/CaseListTable/CaseListTable.vue

@@ -1,27 +1,33 @@
 <script setup lang="ts">
-import { CaseListClient } from '@/cases/api/caseListClient'
+import { client } from '@hey-api/client-fetch'
+import { CasesService } from '@varfish-org/varfish-api/lib'
 import { useCaseListStore } from '@/cases/stores/caseList'
-import { useCtxStore } from '@/varfish/stores/ctx'
 import debounce from 'lodash.debounce'
 import { onMounted, ref } from 'vue'
 import { formatLargeInt, formatTimeAgo } from '@/varfish/helpers'
 import { Case, SortBy } from './types'
 import { getIndividuals } from './lib'
+import { SnackbarMessage } from '@/seqvars/views/PresetSets/lib'
 
+/** Props used in this component. */
 const props = defineProps<{
   projectUuid?: string
 }>()
 
-const ctxStore = useCtxStore()
-const caseListStore = useCaseListStore()
+/** This component's events. */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const emit = defineEmits<{
+  message: [message: SnackbarMessage]
+}>()
 
-const caseListClient = new CaseListClient(ctxStore.csrfToken)
+const caseListStore = useCaseListStore()
 
 const headers = [
   { title: '#', key: 'index', width: 50, sortable: false },
   { title: 'Case Name', key: 'name', width: 100, sortable: true },
   { title: 'Status', key: 'status', width: 100, sortable: true },
   { title: 'Individuals', key: 'individuals' },
+  { title: 'Case Version', key: 'case_version', sortable: true, width: 100 },
   { title: 'Small Vars', key: 'num_small_vars', sortable: true, width: 100 },
   { title: 'SVs', key: 'num_svs', sortable: true, width: 100 },
   { title: 'Creation', key: 'date_created', width: 150 },
@@ -64,14 +70,27 @@ const loadItems = async ({
     sortBy.length > 0 ? (sortBy[0].order === 'desc' ? 'desc' : 'asc') : 'asc'
 
   loading.value = true
-  const response = await caseListClient.listCase(props.projectUuid, {
-    pageNo: page - 1,
-    pageSize: itemsPerPage,
-    orderBy,
-    orderDir,
-    queryString: search.value,
+  const response = await CasesService.casesApiCaseListList({
+    client,
+    path: { project: props.projectUuid },
+    query: {
+      page,
+      pageSize: itemsPerPage,
+      order_by: orderBy,
+      order_dir: orderDir,
+      q: search.value,
+    },
   })
-  tableRows.value = response.results.map(transmogrify)
+  // Bail out and notify parent if there was an error.
+  if (!response.data) {
+    emit('message', {
+      text: 'Failed to load cases',
+      color: 'error',
+    })
+    return
+  }
+
+  tableRows.value = (response.data.results ?? []).map(transmogrify)
   loading.value = false
 }
 

frontend/src/cases/components/TheAppBar/TheAppBar.vue

@@ -1,34 +1,72 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue'
 import VarFishLogo from '@/varfish/components/VarFishLogo.vue'
-import 'iconify-icon'
 
-const navbarHidden = defineModel('navbarHidden', {
+/** The props used in this component. */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = withDefaults(
+  defineProps<{
+    /** Whether to show the left panel button. */
+    showLeftPanelButton?: boolean
+    /** Whether to show the right panel button. */
+    showRightPanelButton?: boolean
+    /** The string to display as the title. */
+    title?: string
+  }>(),
+  { title: 'VarFish' },
+)
+
+/** Whether to show the left panel button. */
+const showLeftPanel = defineModel('showLeftPanel', {
+  type: Boolean,
+  default: true,
+})
+
+/** Whether to show the right panel button. */
+const showRightPanel = defineModel('showRightPanel', {
   type: Boolean,
   default: true,
 })
 </script>
 
 <template>
   <v-app-bar color="primary" density="compact">
-    <template #prepend>
+    <template v-if="showLeftPanelButton" #prepend>
       <v-btn
         rounded="xl"
-        icon=""
-        :title="`${navbarHidden ? 'Show' : 'Hide'} the left sidebar.`"
-        @click="navbarHidden = !navbarHidden"
+        icon
+        :title="`${showLeftPanel ? 'Hide' : 'Show'} the left panel.`"
+        @click="showLeftPanel = !showLeftPanel"
       >
-        <iconify-icon
-          :icon="`material-symbols:left-panel-${navbarHidden ? 'open' : 'close'}`"
+        <Icon
+          :icon="`material-symbols:left-panel-${showLeftPanel ? 'close' : 'open'}`"
           style="font-size: 24px"
-        ></iconify-icon>
+        ></Icon>
       </v-btn>
     </template>
 
     <v-app-bar-title>
-      <div class="d-flex">
-        <VarFishLogo />
-        <div class="pl-2">VarFish</div>
-      </div>
+      <slot name="title">
+        <div class="d-flex">
+          <VarFishLogo />
+          <div class="pl-2">{{ title }}</div>
+        </div>
+      </slot>
     </v-app-bar-title>
+
+    <template v-if="showRightPanelButton" #append>
+      <slot name="append"> </slot>
+      <v-btn
+        rounded="xl"
+        icon
+        :title="`${showRightPanel ? 'Hide' : 'Show'} the right panel.`"
+        @click="showRightPanel = !showRightPanel"
+      >
+        <Icon
+          :icon="`material-symbols:right-panel-${showRightPanel ? 'close' : 'open'}`"
+          style="font-size: 24px"
+        ></Icon>
+      </v-btn>
+    </template>
   </v-app-bar>
 </template>

frontend/src/cases/components/TheNavBar/TheNavBar.vue

@@ -3,10 +3,10 @@
 const props = withDefaults(
   defineProps<{
     /** Whether the navigation bar is hidden. */
-    navbarHidden: boolean
+    navbarShown: boolean
   }>(),
   {
-    navbarHidden: false,
+    navbarShown: true,
   },
 )
 </script>
@@ -16,7 +16,7 @@ const props = withDefaults(
     floating
     permanent
     color="grey-lighten-3"
-    :rail="navbarHidden"
+    :rail="!navbarShown"
   >
     <v-list density="compact">
       <slot></slot>