feat: initial therapy response by variant table (#858)

* feat: initial therapy response by variant table

* fix: typing of component

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

@@ -0,0 +1,91 @@
+<script lang="ts">
+import { type PropType, defineComponent } from 'vue';
+import { BTable } from 'bootstrap-vue-next';
+import type { QueryTherapyResponseByVariant } from '../../domains';
+import MTherapyResponseDistributionBar from './MTherapyResponseDistributionBar.vue';
+
+export default defineComponent({
+    components: {
+        MTherapyResponseDistributionBar,
+        BTable,
+    },
+    props: {
+        items: {
+            type: Object as PropType<QueryTherapyResponseByVariant[]>,
+            required: true,
+        },
+        busy: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    setup() {
+        const fields = [
+            {
+                key: 'supportingVariant', label: 'Stützende Variante', thClass: 'text-left', tdClass: 'text-left',
+            },
+            {
+                key: 'medicationClasses', label: 'Medikationsklasse', thClass: 'text-left', tdClass: 'text-left',
+            },
+            {
+                key: 'medications', label: 'Medikation', thClass: 'text-left', tdClass: 'text-left',
+            },
+            {
+                key: 'responseDistribution', label: 'Response Verteilung', thClass: 'text-center', tdClass: 'text-center align-middle',
+            },
+        ];
+
+        return {
+            fields,
+        };
+    },
+});
+</script>
+<template>
+    <BTable
+        :variant="'light'"
+        :items="items"
+        :fields="fields"
+        :busy="busy"
+        outlined
+    >
+        <template #cell(medicationClasses)="data">
+            <ul class="column">
+                <li
+                    v-for="(item,key) in data.item.medicationClasses"
+                    :key="key"
+                >
+                    {{ item.display }}
+                </li>
+            </ul>
+        </template>
+        <template #cell(medications)="data">
+            <ul class="column">
+                <li
+                    v-for="(item,key) in data.item.medications"
+                    :key="key"
+                >
+                    {{ item.display }}
+                </li>
+            </ul>
+        </template>
+        <template #cell(supportingVariants)="data">
+            <ul class="column">
+                <li
+                    v-for="(item,key) in data.item.supportingVariants"
+                    :key="key"
+                >
+                    {{ item }}
+                </li>
+            </ul>
+        </template>
+        <template #cell(responseDistribution)="data">
+            <MTherapyResponseDistributionBar :distribution="data.item.responseDistribution" />
+        </template>
+    </BTable>
+</template>
+<style scoped>
+.column {
+    word-break: break-all;
+}
+</style>

packages/mtb/src/runtime/domains/query/api.ts

@@ -12,7 +12,7 @@ import type {
     QuerySessionCreate,
     QuerySummaryMedication,
     QuerySummaryTumorDiagnostics,
-    QueryTherapyResponse,
+    QueryTherapyResponse, QueryTherapyResponseByVariant,
 } from './types';
 
 export class QueryAPI extends BaseAPI {
@@ -106,6 +106,11 @@ export class QueryAPI extends BaseAPI {
         return response.data;
     }
 
+    async getTherapyResponsesByVariant(queryId: string, query?: URLQueryRecord) : Promise<ResourceCollectionResponse<QueryTherapyResponseByVariant>> {
+        const response = await this.client.get(`mtb/queries/${queryId}/therapy-responses-by-variant${this.buildRequestQueryString(query)}`);
+        return response.data;
+    }
+
     async getTumorDiagnostics(queryId: string, query?: URLQueryRecord) : Promise<QuerySummaryTumorDiagnostics> {
         const response = await this.client.get(`mtb/queries/${queryId}/tumor-diagnostics${this.buildRequestQueryString(query)}`);
         return response.data;

packages/mtb/src/runtime/domains/query/types.ts

@@ -112,3 +112,10 @@ export type QueryTherapyResponse = {
     supportingVariants: string[],
     responseDistribution: DistributionConceptsCount<Coding>
 };
+
+export type QueryTherapyResponseByVariant = {
+    medicationClasses: Coding[],
+    medications: Coding[],
+    supportingVariant: string,
+    responseDistribution: DistributionConceptsCount<Coding>
+};

packages/mtb/src/runtime/pages/query/[id]/index/summary.vue

@@ -41,6 +41,9 @@ export default defineNuxtComponent({
             {
                 id: 'therapyResponses', name: 'Therapie Responses', icon: 'fas fa-comment-medical', urlSuffix: '/therapy-responses',
             },
+            {
+                id: 'therapyResponsesByVariant', name: 'Therapie Responses By Variant', icon: 'fas fa-comment-medical', urlSuffix: '/therapy-responses-by-variant',
+            },
             {
                 id: 'survivalReport', name: 'Überlebensbericht', icon: 'fas fa-book-open', urlSuffix: '/survival-report',
             },

packages/mtb/src/runtime/pages/query/[id]/index/summary/therapy-responses-by-variant.vue

@@ -0,0 +1,57 @@
+<!--
+  - Copyright (c) 2024.
+  - Author Peter Placzek (tada5hi)
+  - For the full copyright and license information,
+  - view the LICENSE file that was distributed with this source code.
+  -->
+<script lang="ts">
+import { wrapFnWithBusyState } from '@authup/client-web-kit';
+import { QueryEventBusEventName, injectQueryEventBus, useQueryFilterStore } from '@dnpm-dip/core';
+import {
+    type PropType, defineComponent, ref,
+} from 'vue';
+import MQuerySummaryTherapyResponsesByVariant
+    from '../../../../../components/core/MQuerySummaryTherapyResponsesByVariant.vue';
+import { injectHTTPClient } from '../../../../../core/http-client';
+import type { QuerySession, QueryTherapyResponse } from '../../../../../domains';
+
+export default defineComponent({
+    components: { MQuerySummaryTherapyResponsesByVariant },
+    props: {
+        entity: {
+            type: Object as PropType<QuerySession>,
+            required: true,
+        },
+    },
+
+    setup(props) {
+        const api = injectHTTPClient();
+        const queryEventBus = injectQueryEventBus();
+        const queryFilterStore = useQueryFilterStore();
+
+        const busy = ref(false);
+        const items = ref<QueryTherapyResponse[]>([]);
+        const load = wrapFnWithBusyState(busy, async () => {
+            const response = await api.query.getTherapyResponsesByVariant(props.entity.id, queryFilterStore.buildURLRecord());
+            items.value = response.entries;
+        });
+
+        Promise.resolve()
+            .then(() => load());
+
+        queryEventBus.on(QueryEventBusEventName.SESSION_UPDATED, () => load());
+        queryEventBus.on(QueryEventBusEventName.FILTERS_COMMITED, () => load());
+
+        return {
+            busy,
+            items,
+        };
+    },
+});
+</script>
+<template>
+    <MQuerySummaryTherapyResponsesByVariant
+        :busy="busy"
+        :items="items"
+    />
+</template>