feat: new ACMG criteria card

bihealth · Sep 25, 2023 · 85b9aa7 · 85b9aa7
1 parent 607af69
commit 85b9aa7
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 38 deletions.
diff --git a/frontend/src/components/AcmgCriteriaCard.vue b/frontend/src/components/AcmgCriteriaCard.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { defineComponent } from 'vue'
+import {
+  Presence,
+  type CriteriaState,
+  ACMG_CRITERIA_DEFS,
+  ACMG_EVIDENCE_LEVELS_PATHOGENIC,
+  ACMG_EVIDENCE_LEVELS_BENIGN,
+  AcmgCriteria,
+  AcmgEvidenceLevel,
+  StateSource
+} from '@/lib/acmgSeqVar'
+
+export interface Props {
+  acmgRating: any
+  criteria: AcmgCriteria
+  criteriaState: CriteriaState
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  acmgRating: undefined,
+  criteria: undefined,
+  criteriaState: undefined
+})
+
+const findSwitchColor = (): string => {
+  const evidence = props.criteriaState.evidenceLevel
+  if (evidence === AcmgEvidenceLevel.PathogenicVeryStrong) {
+    return 'red-accent-4'
+  } else if (evidence === AcmgEvidenceLevel.PathogenicStrong) {
+    return 'orange-darken-4'
+  } else if (evidence === AcmgEvidenceLevel.PathogenicModerate) {
+    return 'amber-darken-4'
+  } else if (evidence === AcmgEvidenceLevel.PathogenicSupporting) {
+    return 'yellow-darken-3'
+  } else if (evidence === AcmgEvidenceLevel.BenignStandalone) {
+    return 'green-darken-4'
+  } else if (evidence === AcmgEvidenceLevel.BenignStrong) {
+    return 'light-green'
+  } else if (evidence === AcmgEvidenceLevel.BenignSupporting) {
+    return 'lime'
+  } else {
+    return 'primary'
+  }
+}
+
+const switchCriteria = (criteria: AcmgCriteria, presence: Presence) => {
+  if (presence === Presence.Present) {
+    props.acmgRating.setPresence(StateSource.User, criteria, Presence.Absent)
+  } else {
+    props.acmgRating.setPresence(StateSource.User, criteria, Presence.Present)
+  }
+}
+
+defineComponent({
+  name: 'AcmgCriteriaCard'
+})
+</script>
+
+<template>
+  <v-card class="mx-auto" width="150" style="margin: 10px">
+    <div class="d-flex justify-content-between">
+      <v-switch
+        :color="findSwitchColor()"
+        :label="props.criteria"
+        :model-value="props.criteriaState.presence === Presence.Present"
+        @update:model-value="switchCriteria(props.criteria, props.criteriaState.presence)"
+        class="switch"
+      />
+      <v-tooltip :text="ACMG_CRITERIA_DEFS.get(props.criteria)?.hint">
+        <template v-slot:activator="{ props }">
+          <v-icon style="margin: 10px" v-bind="props">mdi-information</v-icon>
+        </template>
+      </v-tooltip>
+    </div>
+    <v-select
+      :model-value="props.criteriaState.evidenceLevel"
+      @update:model-value="props.acmgRating.setEvidenceLevel(StateSource.User, criteria, $event)"
+      :items="
+        ACMG_EVIDENCE_LEVELS_PATHOGENIC.includes(props.criteriaState.evidenceLevel)
+          ? ACMG_EVIDENCE_LEVELS_PATHOGENIC
+          : ACMG_EVIDENCE_LEVELS_BENIGN
+      "
+      hide-details="auto"
+      class="select"
+    />
+  </v-card>
+</template>
+
+<style scoped>
+.switch {
+  margin-left: 10px;
+  padding: 0px;
+}
+
+.select {
+  margin: 0px;
+}
+</style>
diff --git a/frontend/src/components/VariantDetails/AcmgRating.vue b/frontend/src/components/VariantDetails/AcmgRating.vue
@@ -14,6 +14,7 @@ import {
   ACMG_CRITERIA_DEFS,
   AcmgEvidenceLevel
 } from '@/lib/acmgSeqVar'
+import AcmgCriteriaCard from '../AcmgCriteriaCard.vue'
 
 const props = defineProps({
   smallVariant: Object as () => SmallVariant | undefined
@@ -221,44 +222,11 @@ onMounted(async () => {
                   Presence.Present || showFailed
               "
             >
-              <v-card class="mx-auto" width="200" style="margin: 10px">
-                <div class="d-flex justify-content-between">
-                  <v-switch
-                    :color="findSwitchColor(criteria)"
-                    :label="criteria"
-                    :model-value="
-                      acmgRatingStore.acmgRating.getCriteriaState(criteria).presence ===
-                      Presence.Present
-                    "
-                    @update:model-value="
-                      switchCriteria(
-                        criteria,
-                        acmgRatingStore.acmgRating.getCriteriaState(criteria).presence
-                      )
-                    "
-                    style="margin-right: 20px; margin-left: 10px"
-                  />
-                  <v-tooltip :text="ACMG_CRITERIA_DEFS.get(criteria)?.hint">
-                    <template v-slot:activator="{ props }">
-                      <v-icon style="margin: 10px" v-bind="props">mdi-information</v-icon>
-                    </template>
-                  </v-tooltip>
-                </div>
-                <v-divider />
-                <v-select
-                  :model-value="acmgRatingStore.acmgRating.getCriteriaState(criteria).evidenceLevel"
-                  @update:model-value="
-                    acmgRatingStore.acmgRating.setEvidenceLevel(StateSource.User, criteria, $event)
-                  "
-                  :items="
-                    ACMG_EVIDENCE_LEVELS_PATHOGENIC.includes(
-                      acmgRatingStore.acmgRating.getCriteriaState(criteria).evidenceLevel
-                    )
-                      ? ACMG_EVIDENCE_LEVELS_PATHOGENIC
-                      : ACMG_EVIDENCE_LEVELS_BENIGN
-                  "
-                ></v-select>
-              </v-card>
+              <AcmgCriteriaCard
+                :acmgRating="acmgRatingStore.acmgRating"
+                :criteria="criteria"
+                :criteriaState="acmgRatingStore.acmgRating.getCriteriaState(criteria)"
+              />
             </td>
             <td
               v-if="