feat: initial mtb form elements/components

packages/core/src/domains/coding/types.ts

@@ -1,7 +1,7 @@
 /**
  * @see https://github.com/KohlbacherLab/dnpm-dip-core/blob/main/src/main/scala/de/dnpm/dip/coding/Coding.scala
  */
-export type Coding<S extends string = string> = {
+export type Coding<S = string> = {
     code: S,
     display?: string,
     system?: string,

packages/mtb/src/module.ts

@@ -18,18 +18,11 @@ export default defineNuxtModule({
             baseURL: '/mtb/',
             rootDir: import.meta.url,
             navigationItems: [
-                {
-                    id: 'mtb-home',
-                    name: 'Home',
-                    icon: 'fa fa-home',
-                    url: '',
-                    root: true,
-                },
                 {
                     id: 'mtb-search',
                     name: 'Suche',
                     icon: 'fa fa-search',
-                    url: 'search',
+                    url: '',
                 },
             ],
             navigationTopId: 'mtb',

packages/mtb/src/runtime/components/core/MMutationTabGroup.vue

@@ -0,0 +1,123 @@
+<script lang="ts">
+import type { FormSelectOption } from '@vuecs/form-controls';
+import { defineComponent, markRaw, ref } from 'vue';
+import type {
+    PropType,
+    Ref,
+} from 'vue';
+import { DFormSelectSearch } from '@dnpm-dip/core';
+import type { QueryCNVCriteria, QueryFusionCriteria, QuerySNVCriteria } from '../../domains';
+import MSearchCNVForm from './MSearchCNVForm.vue';
+import MSearchSNVForm from './MSearchSNVForm.vue';
+import MSearchFusionForm from './MSearchFusionForm.vue';
+
+enum MutationType {
+    SNV = 'snv',
+    CNV = 'cnv',
+    DNA_FUSION = 'dnaFusion',
+    RNA_FUSION = 'rnaFusion',
+}
+
+type MutationSNVDefinition = {
+    type: MutationType.SNV,
+    data: QuerySNVCriteria<string>
+};
+
+type MutationCNVDefinition = {
+    type: MutationType.CNV,
+    data: QueryCNVCriteria<string>
+};
+
+type MutationDNAFusionDefinition = {
+    type: MutationType.DNA_FUSION,
+    data: QueryFusionCriteria<string>
+};
+
+type MutationRNAFusionDefinition = {
+    type: MutationType.RNA_FUSION,
+    data: QueryFusionCriteria<string>
+};
+
+type MutationDefinition = MutationSNVDefinition | MutationCNVDefinition |
+MutationDNAFusionDefinition | MutationRNAFusionDefinition;
+
+export default defineComponent({
+    components: { DFormSelectSearch },
+    emit: ['updated'],
+    props: {
+        entity: {
+            type: Object as PropType<MutationDefinition>,
+        },
+    },
+    setup(props, { emit }) {
+        const options : FormSelectOption[] = [
+            { id: MutationType.CNV, value: 'CNV' },
+            { id: MutationType.SNV, value: 'SNV' },
+            { id: MutationType.DNA_FUSION, value: 'DNA Fusion' },
+            { id: MutationType.RNA_FUSION, value: 'RNA Fusion' },
+        ];
+
+        const comp = ref(null) as Ref<null | Record<string, any>>;
+        const compType = ref(null);
+        const changeComp = (type: MutationType) => {
+            switch (type) {
+                case MutationType.CNV: {
+                    comp.value = markRaw(MSearchCNVForm);
+                    break;
+                }
+                case MutationType.SNV: {
+                    comp.value = markRaw(MSearchSNVForm);
+                    break;
+                }
+                case MutationType.RNA_FUSION:
+                case MutationType.DNA_FUSION: {
+                    comp.value = markRaw(MSearchFusionForm);
+                    break;
+                }
+
+                default: {
+                    comp.value = null;
+                    break;
+                }
+            }
+        };
+
+        const changeCompByEvent = (event: Event) => {
+            if (!event.target) return;
+
+            changeComp((event.target as Record<string, any>).value);
+        };
+
+        const init = () => {
+            if (!props.entity) return;
+
+            changeComp(props.entity.type);
+        };
+
+        return {
+            changeCompByEvent,
+            comp,
+            compType,
+
+            options,
+        };
+    },
+});
+</script>
+<template>
+    <VCFormGroup>
+        <template #label>
+            Mutationsart
+        </template>
+        <template #default>
+            <VCFormSelect
+                v-model="compType"
+                :options="options"
+                @change="changeCompByEvent"
+            />
+        </template>
+    </VCFormGroup>
+    <template v-if="comp">
+        <component :is="comp" />
+    </template>
+</template>

packages/mtb/src/runtime/components/core/MSearchCNVForm.vue

@@ -0,0 +1,114 @@
+<script lang="ts">
+import {
+    DCollectionTransform, DFormSelectSearch, DTags, DValueSet, type ValueSetCoding,
+} from '@dnpm-dip/core';
+import { defineComponent, reactive } from 'vue';
+import type { QueryCNVCriteria } from '../../domains';
+
+export default defineComponent({
+    components: {
+        DTags, DValueSet, DCollectionTransform, DFormSelectSearch,
+    },
+    setup() {
+        const form = reactive<QueryCNVCriteria<string>>({
+            affectedGenes: [],
+            type: '',
+        });
+
+        const transformCodings = (coding: ValueSetCoding) => ({
+            id: coding.code,
+            value: coding.display ? `${coding.display}` : coding.code,
+        });
+
+        return {
+            form,
+            transformCodings,
+        };
+    },
+});
+</script>
+<template>
+    <VCFormGroup>
+        <template #label>
+            Type
+        </template>
+        <template #default>
+            <DValueSet
+                :code="'dnpm-dip/mtb/ngs-report/cnv/type'"
+                :lazy-load="true"
+            >
+                <template #default="{ data }">
+                    <DCollectionTransform
+                        :items="data.codings"
+                        :transform="transformCodings"
+                    >
+                        <template #default="options">
+                            <DFormSelectSearch
+                                v-model="form.type"
+                                :options="options"
+                                placeholder="CNV Type"
+                            >
+                                <template #selected="{ items, toggle }">
+                                    <DTags
+                                        :items="items"
+                                        tag-variant="dark"
+                                        @deleted="toggle"
+                                    />
+                                </template>
+                            </DFormSelectSearch>
+                        </template>
+                    </DCollectionTransform>
+                </template>
+                <template #loading>
+                    <DFormSelectSearch
+                        :options="[]"
+                        :disabled="true"
+                        placeholder="CNV Type"
+                    />
+                </template>
+            </DValueSet>
+        </template>
+    </VCFormGroup>
+    <VCFormGroup>
+        <template #label>
+            Gene
+        </template>
+        <template #default>
+            <DValueSet
+                :code="'https://www.genenames.org/'"
+                :lazy-load="true"
+            >
+                <template #default="{ data }">
+                    <DCollectionTransform
+                        :items="data.codings"
+                        :transform="transformCodings"
+                    >
+                        <template #default="options">
+                            <DFormSelectSearch
+                                v-model="form.affectedGenes"
+                                :multiple="true"
+                                :options="options"
+                                placeholder="HGNC"
+                            >
+                                <template #selected="{ items, toggle }">
+                                    <DTags
+                                        :items="items"
+                                        tag-variant="dark"
+                                        @deleted="toggle"
+                                    />
+                                </template>
+                            </DFormSelectSearch>
+                        </template>
+                    </DCollectionTransform>
+                </template>
+                <template #loading>
+                    <DFormSelectSearch
+                        :options="[]"
+                        :disabled="true"
+                        placeholder="HGNC"
+                    />
+                </template>
+            </DValueSet>
+        </template>
+    </VCFormGroup>
+</template>