feat: add settings export and import to vue sv interface (#1453) (#1456)

varfish-org · Mar 19, 2024 · 6da6f43 · 6da6f43
1 parent 925896c
commit 6da6f43
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 31 deletions.
diff --git a/svs/vueapp/src/components/SvFilterForm.vue b/svs/vueapp/src/components/SvFilterForm.vue
@@ -11,6 +11,7 @@ import SvFilterFormTadsPane from '@svs/components/SvFilterForm/TadsPane.vue'
 import SvFilterFormPatho from '@svs/components/SvFilterForm/Patho.vue'
 import SvFilterFormDev from '@svs/components/SvFilterForm/Dev.vue'
 import SvFilterFormFooter from '@svs/components/SvFilterForm/Footer.vue'
+import SvFilterFormDevPane from '@varfish/components/FilterForm//DevPane.vue'
 import { QueryStates } from '@variants/enums'
 import { computed, reactive, ref } from 'vue'
 import { useVuelidate } from '@vuelidate/core'
@@ -28,6 +29,7 @@ const regulatoryPaneRef = ref(null)
 const tadsPaneRef = ref(null)
 const genePaneRef = ref(null)
 const pathoPaneRef = ref(null)
+const exportPaneRef = ref(null)
 const devPaneRef = ref(null)
 
 const makePaneHasError = (pane) =>
@@ -42,6 +44,7 @@ const effectHasError = makePaneHasError(effectPaneRef)
 const regulatoryHasError = makePaneHasError(regulatoryPaneRef)
 const tadsHasError = makePaneHasError(tadsPaneRef)
 const pathoHasError = makePaneHasError(pathoPaneRef)
+const exportHasError = makePaneHasError(exportPaneRef)
 const geneHasError = computed(() => {
   return genePaneRef.value && !genePaneRef.value.isValid()
 })
@@ -223,13 +226,15 @@ const onSubmitCancelButtonClicked = () => {
               id="tads-tab"
               ref="devPaneRef"
               class="nav-link"
+              :class="{ 'text-danger': exportHasError }"
               data-toggle="tab"
               href="#panel-dev"
               role="tab"
               title="Perform changes in JSON (wear a hard hat!)"
               data-placement="left"
             >
               Developer Settings
+              <i-mdi-alert-circle-outline v-if="exportHasError" />
             </a>
           </li>
         </ul>
@@ -374,12 +379,13 @@ const onSubmitCancelButtonClicked = () => {
             />
           </div>
           <div
+            v-if="svQueryStore.filtrationComplexityMode === 'dev'"
             id="panel-dev"
             class="tab-pane fade"
             role="tabpanel"
             aria-labelledby="dev-tab"
           >
-            <SvFilterFormDev
+            <SvFilterFormDevPane
               v-model:query-settings="svQueryStore.querySettings"
             />
           </div>

diff --git a/.../src/components/FilterForm/ExportPane.vue → ...varfish/components/FilterForm/DevPane.vue b/.../src/components/FilterForm/ExportPane.vue → ...varfish/components/FilterForm/DevPane.vue
@@ -5,15 +5,22 @@ import { computed, ref } from 'vue'
 const props = defineProps({
   querySettings: Object,
 })
+
 const emit = defineEmits(['update:querySettings'])
+
 const { toClipboard } = useClipboard()
+
+const rawFilterCriteriaRef = ref(null)
+const editSettingsRef = ref(false)
+
 const copyToClipboard = async () => {
   try {
     await toClipboard(JSON.stringify(props.querySettings, null, 2))
   } catch (e) {
     console.error(e)
   }
 }
+
 const downloadJson = () => {
   const data = JSON.stringify(props.querySettings, null, 2)
   const blob = new Blob([data], { type: 'application/json' })
@@ -24,19 +31,27 @@ const downloadJson = () => {
   a.click()
   window.URL.revokeObjectURL(url)
 }
+
 const settingsValue = computed({
   get: () => {
     return JSON.stringify(props.querySettings, null, 2)
   },
-  set: (value) => {
-    try {
-      emit('update:querySettings', JSON.parse(value))
-    } catch (e) {
-      console.warn(e)
-    }
-  },
 })
-const editSettings = ref(false)
+
+const applySettings = () => {
+  try {
+    emit('update:querySettings', JSON.parse(rawFilterCriteriaRef.value.value))
+  } catch (e) {
+    console.warn(e)
+  }
+}
+
+const toggleEditMode = () => {
+  editSettingsRef.value = !editSettingsRef.value
+  if (!editSettingsRef.value) {
+    applySettings()
+  }
+}
 </script>
 
 <template>
@@ -51,17 +66,18 @@ const editSettings = ref(false)
     <div>
       <textarea
         class="form-control"
-        rows="5"
+        rows="20"
+        ref="rawFilterCriteriaRef"
         v-model="settingsValue"
-        :readonly="!editSettings"
+        :readonly="!editSettingsRef"
       />
       <div class="form-inline">
         <div class="btn-group">
-          <button class="btn btn-primary" @click="copyToClipboard">
+          <button class="btn btn-primary" @click.prevent="copyToClipboard">
             <i-mdi-content-copy />
             Copy to Clipboard
           </button>
-          <button class="btn btn-secondary" @click="downloadJson">
+          <button class="btn btn-secondary" @click.prevent="downloadJson">
             <i-mdi-download />
             Export as JSON
           </button>
@@ -71,11 +87,12 @@ const editSettings = ref(false)
             type="checkbox"
             class="custom-control-input"
             id="customSwitch1"
-            @click="editSettings = !editSettings"
+            @click="toggleEditMode"
           />
-          <label class="custom-control-label" for="customSwitch1"
-            >Enable Edit Mode</label
-          >
+          <label class="custom-control-label" for="customSwitch1">
+            Toggle Edit Mode &mdash; <u class="ml-1 mr-1">enable</u> to modify
+            settings &mdash; <u class="ml-1 mr-1">disable</u> to apply settings
+          </label>
         </div>
       </div>
     </div>

diff --git a/variants/vueapp/src/components/FilterForm.vue b/variants/vueapp/src/components/FilterForm.vue
@@ -8,7 +8,7 @@ import FilterFormEffectPane from '@variants/components/FilterForm//EffectPane.vu
 import FilterFormClinvarPane from '@variants/components/FilterForm//ClinvarPane.vue'
 import FilterFormGenesRegionsPane from '@variants/components/FilterForm//GenesRegionsPane.vue'
 import FilterFormFlagsPane from '@variants/components/FilterForm//FlagsPane.vue'
-import FilterFormExportPane from '@variants/components/FilterForm//ExportPane.vue'
+import FilterFormDevPane from '@varfish/components/FilterForm//DevPane.vue'
 import FilterFormQualityPane from '@variants/components/FilterForm//QualityPane.vue'
 import FilterFormQuickPresets from '@variants/components/FilterForm//QuickPresets.vue'
 import { QueryStates } from '@variants/enums'
@@ -25,7 +25,6 @@ const frequencyPaneRef = ref(null)
 const prioritizationPaneRef = ref(null)
 const effectPaneRef = ref(null)
 const qualityPaneRef = ref(null)
-const exportPaneRef = ref(null)
 const genePaneRef = ref(null)
 
 const makePaneHasError = (pane) =>
@@ -38,7 +37,6 @@ const frequencyHasError = makePaneHasError(frequencyPaneRef)
 const prioritizationHasError = makePaneHasError(prioritizationPaneRef)
 const effectHasError = makePaneHasError(effectPaneRef)
 const qualityHasError = makePaneHasError(qualityPaneRef)
-const exportHasError = makePaneHasError(exportPaneRef)
 const geneHasError = computed(() => {
   return genePaneRef.value && !genePaneRef.value.isValid()
 })
@@ -50,8 +48,7 @@ const anyHasError = computed(() => {
     prioritizationHasError.value ||
     effectHasError.value ||
     qualityHasError.value ||
-    geneHasError.value ||
-    exportHasError.value
+    geneHasError.value
   )
 })
 
@@ -212,16 +209,14 @@ const onSubmitCancelButtonClicked = () => {
             class="nav-item"
           >
             <a
-              id="export-tab"
+              id="dev-tab"
               class="nav-link"
-              :class="{ 'text-danger': exportHasError }"
               data-toggle="tab"
-              href="#panel-export"
+              href="#panel-dev"
               role="tab"
-              title="Export settings"
+              title="Developer settings"
             >
-              Export Settings
-              <i-mdi-alert-circle-outline v-if="exportHasError" />
+              Developer Settings
             </a>
           </li>
         </ul>
@@ -380,12 +375,12 @@ const onSubmitCancelButtonClicked = () => {
           </div>
           <div
             v-if="variantQueryStore.filtrationComplexityMode === 'dev'"
-            id="panel-export"
+            id="panel-dev"
             class="tab-pane fade"
             role="tabpanel"
-            aria-labelledby="export-tab"
+            aria-labelledby="dev-tab"
           >
-            <FilterFormExportPane
+            <FilterFormDevPane
               v-model:query-settings="variantQueryStore.querySettings"
             />
           </div>