From e126124182d727b0f3002c91424bb964a89cc3da Mon Sep 17 00:00:00 2001
From: Gregor Weber <mail@watwa.re>
Date: Tue, 23 Jul 2024 18:52:13 +0200
Subject: [PATCH 1/4] feat: effects filter

---
 .../seqvar-filtration.spec.ts                 |   8 +-
 frontend/src/cases/styles/main.scss           |   4 +
 .../EffectsSelect/EffectsSelect.vue           | 211 ++++++++++++++++++
 .../seqvars/components/EffectsSelect/utils.ts |  21 ++
 .../FrequencySelect/FrequencyControlRow.vue   |   2 +-
 .../FrequencySelect/FrequencySelect.vue       |  34 +--
 .../GenotypeSelect/GenotypeSelect.vue         |   6 +-
 .../InheritanceModeControls.vue               |   2 +-
 .../PathogenicityPrioSelect.vue               |  38 +---
 .../PhenotypePrioSelect.vue                   |  55 ++---
 .../components/PredefinedQueryList.vue        |   7 +-
 frontend/src/seqvars/components/QueryList.vue |   6 +-
 .../{GenotypeSelect => ui}/CheckButton.vue    |   4 +-
 .../{ => ui}/CollapsibleGroup.stories.ts      |   0
 .../components/{ => ui}/CollapsibleGroup.vue  |   0
 .../src/seqvars/components/{ => ui}/Hr.vue    |   0
 .../src/seqvars/components/{ => ui}/Input.vue |   4 +-
 .../components/{ => ui}/Item.stories.ts       |   0
 .../src/seqvars/components/{ => ui}/Item.vue  |   0
 .../components/{ => ui}/ItemButton.vue        |   0
 .../components/{ => ui}/ModifiedIcon.vue      |   0
 .../seqvars/components/ui/PresetSelect.vue    |  49 ++++
 frontend/src/seqvars/components/utils.ts      |  43 ++--
 frontend/src/seqvars/types.ts                 |   3 +-
 .../src/seqvars/views/SeqvarsFiltration.vue   |  41 ++--
 25 files changed, 397 insertions(+), 141 deletions(-)
 create mode 100644 frontend/src/seqvars/components/EffectsSelect/EffectsSelect.vue
 create mode 100644 frontend/src/seqvars/components/EffectsSelect/utils.ts
 rename frontend/src/seqvars/components/{GenotypeSelect => ui}/CheckButton.vue (92%)
 rename frontend/src/seqvars/components/{ => ui}/CollapsibleGroup.stories.ts (100%)
 rename frontend/src/seqvars/components/{ => ui}/CollapsibleGroup.vue (100%)
 rename frontend/src/seqvars/components/{ => ui}/Hr.vue (100%)
 rename frontend/src/seqvars/components/{ => ui}/Input.vue (88%)
 rename frontend/src/seqvars/components/{ => ui}/Item.stories.ts (100%)
 rename frontend/src/seqvars/components/{ => ui}/Item.vue (100%)
 rename frontend/src/seqvars/components/{ => ui}/ItemButton.vue (100%)
 rename frontend/src/seqvars/components/{ => ui}/ModifiedIcon.vue (100%)
 create mode 100644 frontend/src/seqvars/components/ui/PresetSelect.vue

diff --git a/frontend/end-to-end-tests/seqvar-filtration.spec.ts b/frontend/end-to-end-tests/seqvar-filtration.spec.ts
index 03ca0310d..1f3826320 100644
--- a/frontend/end-to-end-tests/seqvar-filtration.spec.ts
+++ b/frontend/end-to-end-tests/seqvar-filtration.spec.ts
@@ -30,16 +30,16 @@ test.describe('genotype', () => {
   test('any is checked when all types are checked', async ({ page }) => {
     const firstAnyButton = page
       .getByRole('button', { name: 'any' })
-      .and(page.locator('[aria-selected]'))
+      .and(page.locator('[aria-checked]'))
       .first()
-    await expect(firstAnyButton).toHaveAttribute('aria-selected', 'false')
+    await expect(firstAnyButton).toHaveAttribute('aria-checked', 'false')
     for (const name of ['0/0', '1/0', '1/1']) {
       const button = page.getByRole('button', { name }).first()
-      if ((await button.getAttribute('aria-selected')) === 'false') {
+      if ((await button.getAttribute('aria-checked')) === 'false') {
         await button.click()
       }
     }
-    await expect(firstAnyButton).toHaveAttribute('aria-selected', 'true')
+    await expect(firstAnyButton).toHaveAttribute('aria-checked', 'true')
   })
 })
 
diff --git a/frontend/src/cases/styles/main.scss b/frontend/src/cases/styles/main.scss
index 22db8a29c..f65c97fe4 100644
--- a/frontend/src/cases/styles/main.scss
+++ b/frontend/src/cases/styles/main.scss
@@ -108,3 +108,7 @@
   font-weight: 400;
   line-height: 20px;
 }
+
+.v-selection-control .v-label {
+  margin-bottom: 0;
+}
diff --git a/frontend/src/seqvars/components/EffectsSelect/EffectsSelect.vue b/frontend/src/seqvars/components/EffectsSelect/EffectsSelect.vue
new file mode 100644
index 000000000..8e5262992
--- /dev/null
+++ b/frontend/src/seqvars/components/EffectsSelect/EffectsSelect.vue
@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import {
+  SeqvarsQueryPresetsConsequence,
+  SeqvarsTranscriptTypeChoiceList,
+  SeqvarsVariantConsequenceChoiceList,
+  SeqvarsVariantTypeChoiceList,
+} from '@varfish-org/varfish-api/lib'
+
+import { Query } from '@/seqvars/types'
+
+import CheckButton from '../ui/CheckButton.vue'
+import CollapsibleGroup from '../ui/CollapsibleGroup.vue'
+import Input from '../ui/Input.vue'
+import PresetSelect from '../ui/PresetSelect.vue'
+
+import { matchesEffectsPreset } from './utils'
+
+const VARIANT_TYPES = {
+  snv: 'SNV',
+  indel: 'indel',
+  mnv: 'MNV',
+  complex_substitution: 'complex substitution',
+} satisfies Record<SeqvarsVariantTypeChoiceList[number], string>
+
+const TRANSCRIPT_TYPES = {
+  coding: 'coding',
+  non_coding: 'non-coding',
+} satisfies Record<SeqvarsTranscriptTypeChoiceList[number], string>
+
+const CUSTOMIZATION = {
+  Coding: {
+    disruptive_inframe_deletion: 'disruptive in-frame deletion',
+    disruptive_inframe_insertion: 'disruptive in-frame insertion',
+    // feature_truncation: 'feature truncation',
+    // frameshift_elongation: 'frameshift elongation',
+    frameshift_variant: 'frameshift variant',
+    // inframe_deletion: 'inframe deletion',
+    // inframe_insertion: 'inframe insertion',
+    // internal_elongation: 'internal elongation',
+    missense_variant: 'missense',
+    // mnv: 'MNV',
+    start_lost: 'start lost',
+    stop_gained: 'stop gained',
+    stop_retained_variant: 'stop retained',
+    stop_lost: 'stop lost',
+    // tandem_duplication: 'tandem duplication',
+  },
+  'Off-Exome': {
+    downstream_gene_variant: 'downstream',
+    intron_variant: 'intronic (coding transcript)',
+    // intergenic: 'intergenic',
+    upstream_gene_variant: 'upstream',
+    // exon_loss: 'exon loss',
+  },
+  'Non-coding': {
+    '3_prime_UTR_variant-exon_variant': "3' UTR exonic",
+    '3_prime_UTR_variant-intron_variant': "3' UTR intronic",
+    '5_prime_UTR_variant-exon_variant': "5' UTR exonic",
+    '5_prime_UTR_variant-intron_variant': "5' UTR intronic",
+    non_coding_transcript_exon_variant: 'non-coding exonic',
+    non_coding_transcript_intron_variant: 'non-coding intronic',
+  },
+  Splicing: {
+    splice_acceptor_variant: 'splice acceptor',
+    splice_donor_variant: 'splice donor',
+    splice_region_variant: 'splice region',
+  },
+  Structural: {
+    // structural: 'structural ',
+    // transcript_ablation: 'transcript ablation',
+  },
+} satisfies Record<
+  string,
+  Partial<Record<SeqvarsVariantConsequenceChoiceList[number], string>>
+>
+
+const model = defineModel<Query>({ required: true })
+
+const { presets } = defineProps<{
+  presets: SeqvarsQueryPresetsConsequence[]
+}>()
+
+const maxExonDistance = computed({
+  get: () => model.value.consequence.max_distance_to_exon,
+  set(value) {
+    model.value.consequence.max_distance_to_exon = value
+  },
+})
+</script>
+
+<template>
+  <CollapsibleGroup title="Effects">
+    <div style="display: flex; flex-direction: column; gap: 8px">
+      <PresetSelect
+        v-model="model"
+        :presets="presets"
+        preset-id-field="consequencepresets"
+        settings-field="consequence"
+        :matcher="matchesEffectsPreset"
+      />
+
+      <div>
+        <label style="margin: 0; font-size: var(--font-size-sm)" for="max-exon">
+          Max distance to next exon</label
+        >
+        <div
+          style="
+            display: flex;
+            flex-direction: row;
+            gap: 8px;
+            align-items: center;
+          "
+        >
+          <CheckButton
+            :model-value="
+              maxExonDistance == null || maxExonDistance == undefined
+            "
+            @update:model-value="maxExonDistance = null"
+          >
+            any
+          </CheckButton>
+          <CheckButton
+            :model-value="maxExonDistance == 20"
+            @update:model-value="maxExonDistance = 20"
+          >
+            20
+          </CheckButton>
+          <CheckButton
+            :model-value="maxExonDistance == 100"
+            @update:model-value="maxExonDistance = 100"
+          >
+            100
+          </CheckButton>
+          <Input
+            id="max-exon"
+            v-model="maxExonDistance"
+            type="number"
+            style="max-width: 100px"
+          />
+        </div>
+      </div>
+
+      <div>
+        <div>Variant Type</div>
+        <v-checkbox
+          v-for="(label, key) in VARIANT_TYPES"
+          :key="key"
+          :label="label"
+          :hide-details="true"
+          density="compact"
+          :model-value="model.consequence.variant_types?.includes(key)"
+          @update:model-value="
+            (checked: boolean) =>
+              (model.consequence.variant_types = checked
+                ? [...(model.consequence.variant_types ?? []), key]
+                : model.consequence.variant_types?.filter((v) => v !== key))
+          "
+        />
+      </div>
+
+      <div>
+        <div>Transcript Type</div>
+        <v-checkbox
+          v-for="(label, key) in TRANSCRIPT_TYPES"
+          :key="key"
+          :label="label"
+          :hide-details="true"
+          density="compact"
+          style="font-size: var(--font-size-sm)"
+          :model-value="model.consequence.transcript_types?.includes(key)"
+          @update:model-value="
+            (checked: boolean) =>
+              (model.consequence.transcript_types = checked
+                ? [...(model.consequence.transcript_types ?? []), key]
+                : model.consequence.transcript_types?.filter((v) => v !== key))
+          "
+        />
+      </div>
+
+      <CollapsibleGroup title="Customize effects">
+        <div style="display: flex; flex-direction: column; gap: 8px">
+          <div v-for="(fields, title) in CUSTOMIZATION">
+            {{ title }}
+
+            <v-checkbox
+              v-for="(label, key) in fields"
+              :key="key"
+              :label="label"
+              :hide-details="true"
+              density="compact"
+              style="font-size: var(--font-size-sm)"
+              :model-value="
+                model.consequence.variant_consequences?.includes(key)
+              "
+              @update:model-value="
+                (checked: boolean) =>
+                  (model.consequence.variant_consequences = checked
+                    ? [...(model.consequence.variant_consequences ?? []), key]
+                    : model.consequence.variant_consequences?.filter(
+                        (v) => v !== key,
+                      ))
+              "
+            />
+          </div>
+        </div>
+      </CollapsibleGroup>
+    </div>
+  </CollapsibleGroup>
+</template>
diff --git a/frontend/src/seqvars/components/EffectsSelect/utils.ts b/frontend/src/seqvars/components/EffectsSelect/utils.ts
new file mode 100644
index 000000000..68d151fbb
--- /dev/null
+++ b/frontend/src/seqvars/components/EffectsSelect/utils.ts
@@ -0,0 +1,21 @@
+import isEqual from 'fast-deep-equal/es6'
+
+import { LocalFields } from '@/seqvars/types'
+import {
+  SeqvarsQueryPresetsConsequence,
+  SeqvarsQuerySettingsConsequence,
+} from '@varfish-org/varfish-api/lib'
+
+export function matchesEffectsPreset(
+  value: LocalFields<SeqvarsQuerySettingsConsequence>,
+  preset: SeqvarsQueryPresetsConsequence,
+) {
+  return isEqual(
+    ...([value, preset].map((v) => [
+      v.max_distance_to_exon,
+      new Set(v.variant_types),
+      new Set(v.transcript_types),
+      new Set(v.variant_consequences),
+    ]) as [unknown, unknown]),
+  )
+}
diff --git a/frontend/src/seqvars/components/FrequencySelect/FrequencyControlRow.vue b/frontend/src/seqvars/components/FrequencySelect/FrequencyControlRow.vue
index 0cbae96b6..0aec97bdf 100644
--- a/frontend/src/seqvars/components/FrequencySelect/FrequencyControlRow.vue
+++ b/frontend/src/seqvars/components/FrequencySelect/FrequencyControlRow.vue
@@ -3,7 +3,7 @@ import { computed, defineProps } from 'vue'
 
 import { SeqvarsQuerySettingsFrequency } from '@varfish-org/varfish-api/lib'
 
-import Input from '@/seqvars/components/Input.vue'
+import Input from '../ui/Input.vue'
 
 type ValueOf<T> = T[keyof T]
 
diff --git a/frontend/src/seqvars/components/FrequencySelect/FrequencySelect.vue b/frontend/src/seqvars/components/FrequencySelect/FrequencySelect.vue
index 2dcbf823c..fcf4bf785 100644
--- a/frontend/src/seqvars/components/FrequencySelect/FrequencySelect.vue
+++ b/frontend/src/seqvars/components/FrequencySelect/FrequencySelect.vue
@@ -1,21 +1,15 @@
 <script setup lang="ts">
 import { SeqvarsQueryPresetsFrequency } from '@varfish-org/varfish-api/lib'
 
-import CollapsibleGroup from '@/seqvars/components/CollapsibleGroup.vue'
-import Hr from '@/seqvars/components/Hr.vue'
-import Item from '@/seqvars/components/Item.vue'
+import CollapsibleGroup from '../ui/CollapsibleGroup.vue'
+import PresetSelect from '../ui/PresetSelect.vue'
 import { Query } from '@/seqvars/types'
-import { copy } from '@/varfish/helpers'
 
 import FrequencyControls from './FrequencyControls.vue'
 import { matchesFrequencyPreset } from './utils'
 
 const { presets } = defineProps<{ presets: SeqvarsQueryPresetsFrequency[] }>()
 const model = defineModel<Query>({ required: true })
-const setToPreset = (preset: SeqvarsQueryPresetsFrequency) => {
-  model.value.frequencypresets = preset.sodar_uuid
-  model.value.frequency = copy(preset)
-}
 </script>
 
 <template>
@@ -26,23 +20,13 @@ const setToPreset = (preset: SeqvarsQueryPresetsFrequency) => {
     "
   >
     <div style="width: 100%; display: flex; flex-direction: column; gap: 4px">
-      <div
-        role="listbox"
-        style="width: 100%; display: flex; flex-direction: column"
-      >
-        <Item
-          v-for="preset in presets"
-          :key="preset.sodar_uuid"
-          :selected="preset.sodar_uuid === model.frequencypresets"
-          :modified="!matchesFrequencyPreset(model.frequency, preset)"
-          @click="() => setToPreset(preset)"
-          @revert="() => setToPreset(preset)"
-        >
-          {{ preset.label }}
-        </Item>
-      </div>
-
-      <Hr />
+      <PresetSelect
+        v-model="model"
+        :presets="presets"
+        preset-id-field="frequencypresets"
+        settings-field="frequency"
+        :matcher="matchesFrequencyPreset"
+      />
 
       <FrequencyControls v-model="model.frequency" />
     </div>
diff --git a/frontend/src/seqvars/components/GenotypeSelect/GenotypeSelect.vue b/frontend/src/seqvars/components/GenotypeSelect/GenotypeSelect.vue
index c2902a1a5..9c06a3f83 100644
--- a/frontend/src/seqvars/components/GenotypeSelect/GenotypeSelect.vue
+++ b/frontend/src/seqvars/components/GenotypeSelect/GenotypeSelect.vue
@@ -7,9 +7,9 @@ import {
 } from '@varfish-org/varfish-api/lib'
 import { copy } from '@/varfish/helpers'
 
-import CollapsibleGroup from '@/seqvars/components/CollapsibleGroup.vue'
-import Hr from '@/seqvars/components/Hr.vue'
-import Item from '@/seqvars/components/Item.vue'
+import CollapsibleGroup from '../ui/CollapsibleGroup.vue'
+import Hr from '../ui/Hr.vue'
+import Item from '../ui/Item.vue'
 import { Query } from '@/seqvars/types'
 
 import { Affected, GENOTYPE_PRESETS, SexAssignedAtBirth } from './constants'
diff --git a/frontend/src/seqvars/components/GenotypeSelect/InheritanceModeControls.vue b/frontend/src/seqvars/components/GenotypeSelect/InheritanceModeControls.vue
index 90312fa01..a22dccbb6 100644
--- a/frontend/src/seqvars/components/GenotypeSelect/InheritanceModeControls.vue
+++ b/frontend/src/seqvars/components/GenotypeSelect/InheritanceModeControls.vue
@@ -7,7 +7,7 @@ import {
   SeqvarsSampleGenotypeChoiceList,
 } from '@varfish-org/varfish-api/lib'
 
-import CheckButton from './CheckButton.vue'
+import CheckButton from '../ui/CheckButton.vue'
 
 enum InheritanceMode {
   WILD_TYPE = 'wild-type',
diff --git a/frontend/src/seqvars/components/PathogenicityPrioSelect/PathogenicityPrioSelect.vue b/frontend/src/seqvars/components/PathogenicityPrioSelect/PathogenicityPrioSelect.vue
index 30cdb08ee..6091ed6ea 100644
--- a/frontend/src/seqvars/components/PathogenicityPrioSelect/PathogenicityPrioSelect.vue
+++ b/frontend/src/seqvars/components/PathogenicityPrioSelect/PathogenicityPrioSelect.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { copy } from '@/varfish/helpers'
 import { SeqvarsQueryPresetsVariantPrio } from '@varfish-org/varfish-api/lib'
 
-import CollapsibleGroup from '@/seqvars/components/CollapsibleGroup.vue'
-import Hr from '@/seqvars/components/Hr.vue'
-import Item from '@/seqvars/components/Item.vue'
+import CollapsibleGroup from '../ui/CollapsibleGroup.vue'
+import Item from '../ui/Item.vue'
+import PresetSelect from '../ui/PresetSelect.vue'
 import { Query } from '@/seqvars/types'
 
 import { matchesPathogenicityPrioPreset } from './utils'
@@ -25,34 +24,17 @@ const model = defineModel<Query>({ required: true })
 const { presets } = defineProps<{
   presets: SeqvarsQueryPresetsVariantPrio[]
 }>()
-
-const setToPreset = (preset: SeqvarsQueryPresetsVariantPrio) => {
-  model.value.variantpriopresets = preset.sodar_uuid
-  model.value.variantprio = copy(preset)
-}
 </script>
 
 <template>
   <CollapsibleGroup title="Phenotype Priorization">
-    <div>
-      <div
-        role="listbox"
-        style="width: 100%; display: flex; flex-direction: column"
-      >
-        <Item
-          v-for="preset in presets"
-          :key="preset.sodar_uuid"
-          :selected="preset.sodar_uuid === model.variantpriopresets"
-          :modified="!matchesPathogenicityPrioPreset(model.variantprio, preset)"
-          @click="() => setToPreset(preset)"
-          @revert="() => setToPreset(preset)"
-        >
-          {{ preset.label }}
-        </Item>
-      </div>
-
-      <Hr />
-    </div>
+    <PresetSelect
+      v-model="model"
+      :presets="presets"
+      preset-id-field="variantpriopresets"
+      settings-field="variantprio"
+      :matcher="matchesPathogenicityPrioPreset"
+    />
 
     <label style="display: flex; max-width: 260px">
       <v-checkbox-btn v-model="model.variantprio.variant_prio_enabled" />
diff --git a/frontend/src/seqvars/components/PhenotypePrioSelect/PhenotypePrioSelect.vue b/frontend/src/seqvars/components/PhenotypePrioSelect/PhenotypePrioSelect.vue
index b48db95d9..38d2b2b91 100644
--- a/frontend/src/seqvars/components/PhenotypePrioSelect/PhenotypePrioSelect.vue
+++ b/frontend/src/seqvars/components/PhenotypePrioSelect/PhenotypePrioSelect.vue
@@ -2,11 +2,10 @@
 import { ref } from 'vue'
 
 import { SeqvarsQueryPresetsPhenotypePrio } from '@varfish-org/varfish-api/lib'
-import { copy } from '@/varfish/helpers'
 
-import CollapsibleGroup from '@/seqvars/components/CollapsibleGroup.vue'
-import Hr from '@/seqvars/components/Hr.vue'
-import Item from '@/seqvars/components/Item.vue'
+import CollapsibleGroup from '../ui/CollapsibleGroup.vue'
+import Item from '../ui/Item.vue'
+import PresetSelect from '../ui/PresetSelect.vue'
 import { Query } from '@/seqvars/types'
 
 import TermItem from './TermItem.vue'
@@ -34,34 +33,17 @@ async function onSearch(query: string) {
     value: i.term_id,
   }))
 }
-
-const setToPreset = (preset: SeqvarsQueryPresetsPhenotypePrio) => {
-  model.value.phenotypepriopresets = preset.sodar_uuid
-  model.value.phenotypeprio = copy(preset)
-}
 </script>
 
 <template>
   <CollapsibleGroup title="Phenotype Priorization">
-    <div>
-      <div
-        role="listbox"
-        style="width: 100%; display: flex; flex-direction: column"
-      >
-        <Item
-          v-for="preset in presets"
-          :key="preset.sodar_uuid"
-          :selected="preset.sodar_uuid === model.phenotypepriopresets"
-          :modified="!matchesPhenotypePrioPreset(model.phenotypeprio, preset)"
-          @click="() => setToPreset(preset)"
-          @revert="() => setToPreset(preset)"
-        >
-          {{ preset.label }}
-        </Item>
-      </div>
-
-      <Hr />
-    </div>
+    <PresetSelect
+      v-model="model"
+      :presets="presets"
+      preset-id-field="phenotypepriopresets"
+      settings-field="phenotypeprio"
+      :matcher="matchesPhenotypePrioPreset"
+    />
 
     <label style="display: flex; max-width: 260px">
       <v-checkbox-btn v-model="model.phenotypeprio.phenotype_prio_enabled" />
@@ -141,26 +123,15 @@ const setToPreset = (preset: SeqvarsQueryPresetsPhenotypePrio) => {
         @update:search="onSearch"
         ><template #selection="" />
         <template #item="{ item, props }"
-          ><v-list-items v-bind="props">
+          ><v-list-item v-bind="props" title="">
             <TermItem
               :label="item.title"
               :term-id="item.value"
-              class="term-list-item"
+              style="padding: 4px 16px; cursor: pointer"
             />
-          </v-list-items>
+          </v-list-item>
         </template>
       </v-autocomplete>
     </div>
   </CollapsibleGroup>
 </template>
-
-<style scoped>
-.term-list-item {
-  padding: 4px 16px;
-  cursor: pointer;
-
-  &:hover {
-    background: #f5f5f5;
-  }
-}
-</style>
diff --git a/frontend/src/seqvars/components/PredefinedQueryList.vue b/frontend/src/seqvars/components/PredefinedQueryList.vue
index 6662d36fb..4aaf7a8d7 100644
--- a/frontend/src/seqvars/components/PredefinedQueryList.vue
+++ b/frontend/src/seqvars/components/PredefinedQueryList.vue
@@ -4,10 +4,11 @@ import {
   SeqvarsQueryPresetsSetVersionDetails,
 } from '@varfish-org/varfish-api/lib'
 
-import CollapsibleGroup from '@/seqvars/components/CollapsibleGroup.vue'
-import Item from '@/seqvars/components/Item.vue'
-import ItemButton from '@/seqvars/components/ItemButton.vue'
 import { Query } from '@/seqvars/types'
+
+import CollapsibleGroup from './ui/CollapsibleGroup.vue'
+import Item from './ui/Item.vue'
+import ItemButton from './ui/ItemButton.vue'
 import { matchesPredefinedQuery } from './utils'
 
 const { presets, query } = defineProps<{
diff --git a/frontend/src/seqvars/components/QueryList.vue b/frontend/src/seqvars/components/QueryList.vue
index 01068b10f..02f0f544d 100644
--- a/frontend/src/seqvars/components/QueryList.vue
+++ b/frontend/src/seqvars/components/QueryList.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { SeqvarsQueryPresetsSetVersionDetails } from '@varfish-org/varfish-api/lib'
 
-import CollapsibleGroup from '@/seqvars/components/CollapsibleGroup.vue'
-import Item from '@/seqvars/components/Item.vue'
-import ItemButton from '@/seqvars/components/ItemButton.vue'
 import { Query } from '@/seqvars/types'
 
+import CollapsibleGroup from './ui/CollapsibleGroup.vue'
+import Item from './ui/Item.vue'
+import ItemButton from './ui/ItemButton.vue'
 import { matchesPredefinedQuery } from './utils'
 
 const selectedIndex = defineModel<number | null>('selectedIndex', {
diff --git a/frontend/src/seqvars/components/GenotypeSelect/CheckButton.vue b/frontend/src/seqvars/components/ui/CheckButton.vue
similarity index 92%
rename from frontend/src/seqvars/components/GenotypeSelect/CheckButton.vue
rename to frontend/src/seqvars/components/ui/CheckButton.vue
index 69f560602..6f6cfbb46 100644
--- a/frontend/src/seqvars/components/GenotypeSelect/CheckButton.vue
+++ b/frontend/src/seqvars/components/ui/CheckButton.vue
@@ -7,7 +7,7 @@ const model = defineModel<boolean>({ default: false })
     class="root ui-control-text"
     variant="outlined"
     rounded="sm"
-    :aria-selected="model"
+    :aria-checked="model"
     @click="model = !model"
   >
     <slot />
@@ -27,7 +27,7 @@ const model = defineModel<boolean>({ default: false })
     outline: none;
   }
 
-  &[aria-selected='true'] {
+  &[aria-checked='true'] {
     border-color: #0f6cbd;
     color: white !important;
 
diff --git a/frontend/src/seqvars/components/CollapsibleGroup.stories.ts b/frontend/src/seqvars/components/ui/CollapsibleGroup.stories.ts
similarity index 100%
rename from frontend/src/seqvars/components/CollapsibleGroup.stories.ts
rename to frontend/src/seqvars/components/ui/CollapsibleGroup.stories.ts
diff --git a/frontend/src/seqvars/components/CollapsibleGroup.vue b/frontend/src/seqvars/components/ui/CollapsibleGroup.vue
similarity index 100%
rename from frontend/src/seqvars/components/CollapsibleGroup.vue
rename to frontend/src/seqvars/components/ui/CollapsibleGroup.vue
diff --git a/frontend/src/seqvars/components/Hr.vue b/frontend/src/seqvars/components/ui/Hr.vue
similarity index 100%
rename from frontend/src/seqvars/components/Hr.vue
rename to frontend/src/seqvars/components/ui/Hr.vue
diff --git a/frontend/src/seqvars/components/Input.vue b/frontend/src/seqvars/components/ui/Input.vue
similarity index 88%
rename from frontend/src/seqvars/components/Input.vue
rename to frontend/src/seqvars/components/ui/Input.vue
index 702a8eab1..2bc18fc63 100644
--- a/frontend/src/seqvars/components/Input.vue
+++ b/frontend/src/seqvars/components/ui/Input.vue
@@ -2,16 +2,18 @@
 import type { CSSProperties } from 'vue'
 
 const props = defineProps<{
+  id?: string
   style?: CSSProperties
   type?: 'text' | 'number'
   ariaLabel?: string
 }>()
-const model = defineModel<string | number>()
+const model = defineModel<string | number | null>()
 </script>
 
 <template>
   <div class="root" :style="props.style">
     <input
+      :id="props.id"
       v-model="model"
       :aria-label="props.ariaLabel"
       :type="props.type ?? 'text'"
diff --git a/frontend/src/seqvars/components/Item.stories.ts b/frontend/src/seqvars/components/ui/Item.stories.ts
similarity index 100%
rename from frontend/src/seqvars/components/Item.stories.ts
rename to frontend/src/seqvars/components/ui/Item.stories.ts
diff --git a/frontend/src/seqvars/components/Item.vue b/frontend/src/seqvars/components/ui/Item.vue
similarity index 100%
rename from frontend/src/seqvars/components/Item.vue
rename to frontend/src/seqvars/components/ui/Item.vue
diff --git a/frontend/src/seqvars/components/ItemButton.vue b/frontend/src/seqvars/components/ui/ItemButton.vue
similarity index 100%
rename from frontend/src/seqvars/components/ItemButton.vue
rename to frontend/src/seqvars/components/ui/ItemButton.vue
diff --git a/frontend/src/seqvars/components/ModifiedIcon.vue b/frontend/src/seqvars/components/ui/ModifiedIcon.vue
similarity index 100%
rename from frontend/src/seqvars/components/ModifiedIcon.vue
rename to frontend/src/seqvars/components/ui/ModifiedIcon.vue
diff --git a/frontend/src/seqvars/components/ui/PresetSelect.vue b/frontend/src/seqvars/components/ui/PresetSelect.vue
new file mode 100644
index 000000000..74377a406
--- /dev/null
+++ b/frontend/src/seqvars/components/ui/PresetSelect.vue
@@ -0,0 +1,49 @@
+<script
+  setup
+  lang="ts"
+  generic="
+    PresetField extends keyof Query,
+    SettingsField extends keyof Query,
+    Preset extends { sodar_uuid: string; label: string } & Query[SettingsField]
+  "
+>
+import { copy } from '@/varfish/helpers'
+
+import Hr from '@/seqvars/components/ui/Hr.vue'
+import Item from '@/seqvars/components/ui/Item.vue'
+import { Query } from '@/seqvars/types'
+
+const model = defineModel<Query>({ required: true })
+
+const { presets, presetIdField, settingsField, matcher } = defineProps<{
+  presets: Preset[]
+  settingsField: SettingsField
+  presetIdField: PresetField
+  matcher: (value: Query[SettingsField], preset: Preset) => boolean
+}>()
+
+const setToPreset = (preset: Preset) => {
+  model.value[presetIdField] = preset.sodar_uuid
+  model.value[settingsField] = copy(preset)
+}
+</script>
+
+<template>
+  <div
+    role="listbox"
+    style="width: 100%; display: flex; flex-direction: column"
+  >
+    <Item
+      v-for="preset in presets"
+      :key="preset.sodar_uuid"
+      :selected="preset.sodar_uuid === model[presetIdField]"
+      :modified="!matcher(model[settingsField] as never, preset)"
+      @click="() => setToPreset(preset)"
+      @revert="() => setToPreset(preset)"
+    >
+      {{ preset.label }}
+    </Item>
+  </div>
+
+  <Hr />
+</template>
diff --git a/frontend/src/seqvars/components/utils.ts b/frontend/src/seqvars/components/utils.ts
index ca5f42c7b..aa31b5c44 100644
--- a/frontend/src/seqvars/components/utils.ts
+++ b/frontend/src/seqvars/components/utils.ts
@@ -1,6 +1,7 @@
 import {
   SeqvarsPredefinedQuery,
   SeqvarsQueryPresetsSetVersionDetails,
+  SeqvarsQuerySettingsDetails,
 } from '@varfish-org/varfish-api/lib'
 import { Query } from '@/seqvars/types'
 
@@ -8,6 +9,26 @@ import { matchesFrequencyPreset } from './FrequencySelect/utils'
 import { matchesGenotypePreset } from './GenotypeSelect/utils'
 import { matchesPathogenicityPrioPreset } from './PathogenicityPrioSelect/utils'
 import { matchesPhenotypePrioPreset } from './PhenotypePrioSelect/utils'
+import { matchesEffectsPreset } from './EffectsSelect/utils'
+
+export const getReferencedPresets = (
+  presets: SeqvarsQueryPresetsSetVersionDetails,
+  pq: SeqvarsPredefinedQuery,
+) =>
+  ({
+    frequency: presets.seqvarsquerypresetsfrequency_set.find(
+      (f) => f.sodar_uuid === pq.frequency,
+    ),
+    phenotypeprio: presets.seqvarsquerypresetsphenotypeprio_set.find(
+      (p) => p.sodar_uuid === pq.phenotypeprio,
+    ),
+    variantprio: presets.seqvarsquerypresetsvariantprio_set.find(
+      (p) => p.sodar_uuid === pq.variantprio,
+    ),
+    consequence: presets.seqvarsquerypresetsconsequence_set.find(
+      (c) => c.sodar_uuid === pq.consequence,
+    ),
+  }) satisfies Partial<Record<keyof Query, unknown>>
 
 export function matchesPredefinedQuery(
   presets: SeqvarsQueryPresetsSetVersionDetails,
@@ -15,23 +36,19 @@ export function matchesPredefinedQuery(
   pq: SeqvarsPredefinedQuery,
 ): boolean {
   const genotype = pq.genotype?.choice
-  const frequency = presets.seqvarsquerypresetsfrequency_set.find(
-    (f) => f.sodar_uuid === pq.frequency,
-  )
-  const phenotypePrio = presets.seqvarsquerypresetsphenotypeprio_set.find(
-    (p) => p.sodar_uuid === pq.phenotypeprio,
-  )
-  const pathogenicityPrio = presets.seqvarsquerypresetsvariantprio_set.find(
-    (p) => p.sodar_uuid === pq.variantprio,
-  )
+
+  const { frequency, phenotypeprio, variantprio, consequence } =
+    getReferencedPresets(presets, pq)
   return (
     !!genotype &&
     matchesGenotypePreset(query.genotype, genotype) &&
     !!frequency &&
     matchesFrequencyPreset(query.frequency, frequency) &&
-    !!phenotypePrio &&
-    matchesPhenotypePrioPreset(query.phenotypeprio, phenotypePrio) &&
-    !!pathogenicityPrio &&
-    matchesPathogenicityPrioPreset(query.variantprio, pathogenicityPrio)
+    !!phenotypeprio &&
+    matchesPhenotypePrioPreset(query.phenotypeprio, phenotypeprio) &&
+    !!variantprio &&
+    matchesPathogenicityPrioPreset(query.variantprio, variantprio) &&
+    !!consequence &&
+    matchesEffectsPreset(query.consequence, consequence)
   )
 }
diff --git a/frontend/src/seqvars/types.ts b/frontend/src/seqvars/types.ts
index 55180476a..807f0d81d 100644
--- a/frontend/src/seqvars/types.ts
+++ b/frontend/src/seqvars/types.ts
@@ -10,7 +10,7 @@ export type LocalFields<T> = Omit<
 export type Query = LocalFields<
   Pick<
     QuerySettingsDetails,
-    'genotype' | 'frequency' | 'phenotypeprio' | 'variantprio'
+    'genotype' | 'frequency' | 'phenotypeprio' | 'variantprio' | 'consequence'
   >
 > &
   Pick<
@@ -20,4 +20,5 @@ export type Query = LocalFields<
     | 'frequencypresets'
     | 'phenotypepriopresets'
     | 'variantpriopresets'
+    | 'consequencepresets'
   >
diff --git a/frontend/src/seqvars/views/SeqvarsFiltration.vue b/frontend/src/seqvars/views/SeqvarsFiltration.vue
index 74578e2e5..37ae55b5e 100644
--- a/frontend/src/seqvars/views/SeqvarsFiltration.vue
+++ b/frontend/src/seqvars/views/SeqvarsFiltration.vue
@@ -5,16 +5,18 @@ import {
   SeqvarsPredefinedQuery,
   SeqvarsQueryPresetsSetVersionDetails,
 } from '@varfish-org/varfish-api/lib'
+import { copy } from '@/varfish/helpers'
 
+import EffectsSelect from '@/seqvars/components/EffectsSelect/EffectsSelect.vue'
 import FrequencySelect from '@/seqvars/components/FrequencySelect/FrequencySelect.vue'
 import GenotypeSelect from '@/seqvars/components/GenotypeSelect/GenotypeSelect.vue'
 import PhenotypePrioSelect from '@/seqvars/components/PhenotypePrioSelect/PhenotypePrioSelect.vue'
 import PredefinedQueryList from '@/seqvars/components/PredefinedQueryList.vue'
 import QueryList from '@/seqvars/components/QueryList.vue'
+import { getGenotypeSettingsFromPreset } from '@/seqvars/components/GenotypeSelect/utils'
+import PathogenicityPrioSelect from '@/seqvars/components/PathogenicityPrioSelect/PathogenicityPrioSelect.vue'
+import { getReferencedPresets } from '@/seqvars/components/utils'
 import { Query } from '@/seqvars/types'
-import { copy } from '@/varfish/helpers'
-import { getGenotypeSettingsFromPreset } from '../components/GenotypeSelect/utils'
-import PathogenicityPrioSelect from '../components/PathogenicityPrioSelect/PathogenicityPrioSelect.vue'
 
 const { presets } = defineProps<{
   presets: SeqvarsQueryPresetsSetVersionDetails
@@ -36,27 +38,30 @@ const selectedQuery = computed({
   },
 })
 
-const createQuery = (pq: SeqvarsPredefinedQuery): Query => {
+const createQuery = (pq: SeqvarsPredefinedQuery): Query | null => {
+  const { frequency, phenotypeprio, variantprio, consequence } =
+    getReferencedPresets(presets, pq)
+  if (!frequency || !phenotypeprio || !variantprio || !consequence) {
+    console.error('Missing preset(s)')
+    return null
+  }
   return copy({
     predefinedquery: pq.sodar_uuid,
 
     genotype: getGenotypeSettingsFromPreset(pq.genotype?.choice ?? 'any'),
     genotypepresets: pq.genotype,
 
-    frequency: presets.seqvarsquerypresetsfrequency_set.find(
-      (f) => f.sodar_uuid === pq.frequency,
-    )!,
+    frequency,
     frequencypresets: pq.frequency,
 
-    phenotypeprio: presets.seqvarsquerypresetsphenotypeprio_set.find(
-      (f) => f.sodar_uuid === pq.phenotypeprio,
-    )!,
+    phenotypeprio,
     phenotypepriopresets: pq.phenotypeprio,
 
-    variantprio: presets.seqvarsquerypresetsvariantprio_set.find(
-      (f) => f.sodar_uuid === pq.variantprio,
-    )!,
+    variantprio,
     variantpriopresets: pq.variantprio,
+
+    consequence,
+    consequencepresets: pq.consequence,
   })
 }
 </script>
@@ -120,7 +125,11 @@ const createQuery = (pq: SeqvarsPredefinedQuery): Query => {
           "
           @add-query="
             (preset) => {
-              queries.push(createQuery(preset))
+              const query = createQuery(preset)
+              if (!query) {
+                return
+              }
+              queries.push(query)
               selectedQueryIndex = queries.length - 1
             }
           "
@@ -140,6 +149,10 @@ const createQuery = (pq: SeqvarsPredefinedQuery): Query => {
             v-model="selectedQuery"
             :presets="presets.seqvarsquerypresetsvariantprio_set"
           />
+          <EffectsSelect
+            v-model="selectedQuery"
+            :presets="presets.seqvarsquerypresetsconsequence_set"
+          />
         </template>
       </div>
     </div>

From edf51695e79dffda4245fad92d7d13d232f40582 Mon Sep 17 00:00:00 2001
From: Gregor Weber <mail@watwa.re>
Date: Tue, 23 Jul 2024 18:59:12 +0200
Subject: [PATCH 2/4] wip

---
 frontend/src/seqvars/components/utils.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/seqvars/components/utils.ts b/frontend/src/seqvars/components/utils.ts
index aa31b5c44..7032f5cb3 100644
--- a/frontend/src/seqvars/components/utils.ts
+++ b/frontend/src/seqvars/components/utils.ts
@@ -1,7 +1,6 @@
 import {
   SeqvarsPredefinedQuery,
   SeqvarsQueryPresetsSetVersionDetails,
-  SeqvarsQuerySettingsDetails,
 } from '@varfish-org/varfish-api/lib'
 import { Query } from '@/seqvars/types'
 

From d498ea69250de3803343e7abca85ac59aee1d0da Mon Sep 17 00:00:00 2001
From: Gregor Weber <mail@watwa.re>
Date: Tue, 23 Jul 2024 21:49:49 +0200
Subject: [PATCH 3/4] wip

---
 .../EffectsSelect/EffectsSelect.vue           | 33 +++++++++----------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/frontend/src/seqvars/components/EffectsSelect/EffectsSelect.vue b/frontend/src/seqvars/components/EffectsSelect/EffectsSelect.vue
index 8e5262992..b7a1f187e 100644
--- a/frontend/src/seqvars/components/EffectsSelect/EffectsSelect.vue
+++ b/frontend/src/seqvars/components/EffectsSelect/EffectsSelect.vue
@@ -88,6 +88,18 @@ const maxExonDistance = computed({
     model.value.consequence.max_distance_to_exon = value
   },
 })
+
+const toggle = (arr: string[] | undefined, key: string) => {
+  if (arr == undefined) {
+    return
+  }
+  const index = arr.indexOf(key)
+  if (index === -1) {
+    arr.push(key)
+  } else {
+    arr.splice(index, 1)
+  }
+}
 </script>
 
 <template>
@@ -151,12 +163,7 @@ const maxExonDistance = computed({
           :hide-details="true"
           density="compact"
           :model-value="model.consequence.variant_types?.includes(key)"
-          @update:model-value="
-            (checked: boolean) =>
-              (model.consequence.variant_types = checked
-                ? [...(model.consequence.variant_types ?? []), key]
-                : model.consequence.variant_types?.filter((v) => v !== key))
-          "
+          @update:model-value="toggle(model.consequence.variant_types, key)"
         />
       </div>
 
@@ -170,12 +177,7 @@ const maxExonDistance = computed({
           density="compact"
           style="font-size: var(--font-size-sm)"
           :model-value="model.consequence.transcript_types?.includes(key)"
-          @update:model-value="
-            (checked: boolean) =>
-              (model.consequence.transcript_types = checked
-                ? [...(model.consequence.transcript_types ?? []), key]
-                : model.consequence.transcript_types?.filter((v) => v !== key))
-          "
+          @update:model-value="toggle(model.consequence.transcript_types, key)"
         />
       </div>
 
@@ -195,12 +197,7 @@ const maxExonDistance = computed({
                 model.consequence.variant_consequences?.includes(key)
               "
               @update:model-value="
-                (checked: boolean) =>
-                  (model.consequence.variant_consequences = checked
-                    ? [...(model.consequence.variant_consequences ?? []), key]
-                    : model.consequence.variant_consequences?.filter(
-                        (v) => v !== key,
-                      ))
+                toggle(model.consequence.variant_consequences, key)
               "
             />
           </div>

From 44fd9350eca5ae7d2971144ed6ecdff72323439f Mon Sep 17 00:00:00 2001
From: Gregor Weber <mail@watwa.re>
Date: Wed, 24 Jul 2024 11:51:46 +0200
Subject: [PATCH 4/4] wip

---
 .../seqvars/components/EffectsSelect/EffectsSelect.vue    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/seqvars/components/EffectsSelect/EffectsSelect.vue b/frontend/src/seqvars/components/EffectsSelect/EffectsSelect.vue
index b7a1f187e..3c35b5790 100644
--- a/frontend/src/seqvars/components/EffectsSelect/EffectsSelect.vue
+++ b/frontend/src/seqvars/components/EffectsSelect/EffectsSelect.vue
@@ -67,10 +67,10 @@ const CUSTOMIZATION = {
     splice_donor_variant: 'splice donor',
     splice_region_variant: 'splice region',
   },
-  Structural: {
-    // structural: 'structural ',
-    // transcript_ablation: 'transcript ablation',
-  },
+  // Structural: {
+  // structural: 'structural ',
+  // transcript_ablation: 'transcript ablation',
+  // },
 } satisfies Record<
   string,
   Partial<Record<SeqvarsVariantConsequenceChoiceList[number], string>>