Merge pull request #14 from samply/develop

Develop
samply · Oct 25, 2023 · 7319400 · 7319400
2 parents 9424094 + 9132e63
commit 7319400
Show file tree

Hide file tree

Showing 13 changed files with 387 additions and 134 deletions.
diff --git a/packages/demo/public/catalogues/catalogue-dktk.json b/packages/demo/public/catalogues/catalogue-dktk.json
diff --git a/packages/demo/public/options.json b/packages/demo/public/options.json
@@ -0,0 +1,19 @@
+{"chartOptions": 
+    {
+        "diagnosis": {
+            "hintText": ["Bei Patienten mit mehreren onkologischen Diagnosen werden auch Einträge angezeigt, die ggfs. nicht den ausgewählten Suchkriterien entsprechen."]
+        },
+        "age_at_diagnosis": {
+            "hintText": ["Bei Patienten mit mehreren Erstdiagnosen werden auch Einträge angezeigt, die ggfs. außerhalb der Suchkriterien liegen. "]
+        },
+        "75186-7": {
+            "hintText": ["\"verstorben\": ein Todesdatum ist dokumentiert oder das aktuelle Lebensalter ist größer 123 Jahre.", "\"lebend\": wird angenommen, wenn kein Todesdatum dokumentiert ist oder das aktuelle Lebensalter nicht 123 Jahre überschritten hat.", "\"unbekannt\": kein Geburtsdatum oder Todesdatum bekannt."]
+        },
+        "medicationStatements": {
+            "hintText": ["Art der systemischen oder abwartenden Therapie (ADT Basisdatensatz Versionen 2014, 2021)"]
+        },
+        "sample_kind": {
+            "hintText":["Verteilung der Bioprobentypen der Patienten gemäß der ausgewählten Kriterien. Es werden auch Einträge angezeigt, die ggfs. außerhalb der Suchkriterien liegen."]
+        } 
+    }
+}
diff --git a/packages/demo/src/AppCCP.svelte b/packages/demo/src/AppCCP.svelte
@@ -10,13 +10,20 @@
   } from "./measures";
 
   let mockCatalogueData = "";
+  let libraryOptions = ""
 
   fetch("catalogues/catalogue-dktk.json")
     .then((response) => response.text())
     .then((data) => {
       mockCatalogueData = data;
     });
 
+  fetch("options.json")
+    .then((response) => response.json())
+    .then((data) => {
+      libraryOptions = data
+    });
+
   const measures = [
     dktkPatientsMeasure,
     dktkDiagnosisMeasure,
@@ -186,6 +193,7 @@
     .set("derivative-other", "Other derivative");
 </script>
 
+
 <header>
   <div class="logo">
     <img src="../dktk.svg" alt="Logo des DKTK" />
@@ -203,13 +211,6 @@
     <lens-search-bar
       treeData={mockCatalogueData}
       noMatchesFoundMessage={"keine Ergebnisse gefunden"}
-      measures={[
-        dktkPatientsMeasure,
-        dktkDiagnosisMeasure,
-        dktkSpecimenMeasure,
-        dktkPatientsMeasure,
-        dktkMedicationStatementsMeasure,
-      ]}
     />
     <lens-info-button
       infoIconUrl="info-circle-svgrepo-com.svg"
@@ -281,6 +282,7 @@
           catalogueGroupCode="age_at_diagnosis"
           chartType="bar"
           groupRange={10}
+          filterRegex="^(1*[12]*[0-9])"
           xAxisTitle="Alter"
           yAxisTitle="Anzahl der Primärdiagnosen"
         />
@@ -337,3 +339,4 @@
     >
   </div>
 </footer>
+<lens-options options={libraryOptions} catalogueData={mockCatalogueData}/>
diff --git a/packages/demo/src/styles/default/result-chart.css b/packages/demo/src/styles/default/result-chart.css
@@ -7,24 +7,56 @@ lens-chart {
   lens-chart::part(chart-wrapper) {
     display: grid;
     grid-template-rows: auto 1fr auto;
+    position: relative;
 
   }
 
+
   lens-chart::part(chart-title) {
     text-align: center;
     margin: 0;
     padding-bottom: var(--gap-m);
   }
 
 
-  lens-chart::part(chart-canvas) {
-    width: 100%;
-    max-height: 400px;
-  }
-
-  lens-chart::part(chart-hint) {
-    font-size: var(--font-size-xs);
-    padding-top: var(--gap-m);
-  }
-
-
+lens-chart::part(info-button) {
+  position: absolute;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  padding: 0;
+  top: -10px;
+  right: -10px;
+}
+
+lens-chart::part(info-button-icon) {
+  bottom: var(--gap-xxs);
+  width: 16px;
+  height: 16px;
+}
+lens-chart::part(info-button-dialogue) {
+    position: absolute;
+    border: none;
+    background-color: var(--white);
+    width: max-content;
+    max-width: 300px;
+    z-index: 100;
+    padding: var(--gap-s);
+    top: 40px;
+    right: 0px;
+    border: solid 1px var(--light-blue);
+    border-radius: var(--border-radius-small);
+    text-align: left;
+}
+
+
+
+lens-chart::part(chart-canvas) {
+  width: 100%;
+  max-height: 400px;
+}
+
+lens-chart::part(chart-hint) {
+  font-size: var(--font-size-xs);
+  padding-top: var(--gap-m);
+}
diff --git a/packages/lib/index.ts b/packages/lib/index.ts
@@ -8,4 +8,5 @@ export { default as ResutSummaryComponent } from './src/components/results/Resul
 export { default as ResultTableComponent } from './src/components/results/ResultTableComponent.wc.svelte'
 export { default as SearchBarMultipleComponent } from './src/components/search-bar/SearchBarMultipleComponent.wc.svelte'
 export { default as NegotiateButtonComponent } from './src/components/buttons/NegotiateButtonComponent.wc.svelte'
-export { default as InfoButton } from './src/components/buttons/InfoButtonComponent.wc.svelte'
+export { default as InfoButton } from './src/components/buttons/InfoButtonComponent.wc.svelte'
+export { default as lensOptions } from './src/components/Options.wc.svelte'
diff --git a/packages/lib/src/components/Options.wc.svelte b/packages/lib/src/components/Options.wc.svelte
@@ -0,0 +1,26 @@
+<svelte:options
+    customElement={{
+        tag: "lens-options",
+        props: {
+            options: {type: 'Object'},
+            catalogueData: { type: "Object" },
+        },
+    }}
+/>
+
+<script lang="ts">
+    /**
+     * this component takes the catalogue and all options set from the project and passes them to the appropriate store
+     * TODO: refactor all mappings and configurations to be passed in here
+    */
+    import {lensOptions} from "../stores/options";
+    import { catalogue } from "../stores/catalogue";
+    import type { Criteria } from "../types/treeData";
+
+    export let options: object = {};
+    export let catalogueData: Criteria[] = [];
+    
+    $: $lensOptions = options;
+    $: $catalogue = catalogueData;
+
+</script>
diff --git a/packages/lib/src/components/buttons/SearchButtonComponenet.wc.svelte b/packages/lib/src/components/buttons/SearchButtonComponenet.wc.svelte
@@ -68,13 +68,11 @@
 
         const ast = buildAstFromQuery($queryStore);
         const cql = translateAstToCql(ast, false, backendMeasures);
-        console.log(cql);
 
         const library = buildLibrary(`${cql}`)
         const measure = buildMeasure(library.url, $measureStore.map( measureItem => measureItem.measure))
         const query = {lang: "cql", lib: library, measure: measure};
 
-        console.log(query);
 
 
         const backend = new Spot(
@@ -89,9 +87,6 @@
 
     };
 
-    $: console.log($responseStore);
-
-
 </script>
 
 <button

diff --git a/packages/lib/src/components/catalogue/DataTreeElement.svelte b/packages/lib/src/components/catalogue/DataTreeElement.svelte
@@ -78,8 +78,6 @@
                 return store;
             }
             
-            console.log(store);
-            
             return store;
         });
     };

diff --git a/packages/lib/src/components/catalogue/NumberInputComponent.svelte b/packages/lib/src/components/catalogue/NumberInputComponent.svelte
@@ -21,9 +21,8 @@
      */
     const transformName = (): string => {
         if (from === to) return `${from}`;
-        if (from < to && !from) return `≤ ${to}`;
-        if (from !== null && to === null) return `≥ ${from}`;
-        if (from === null && to !== null) return `≤ ${to}`;
+        if(!to && from) return `≥ ${from}`
+        if(!from && to) return `≤ ${to}`
         if (from < to) return ` ${from} - ${to}`;
         return "invalid";
     };
@@ -113,11 +112,8 @@
             >
                 {$catalogueTextStore.numberInput.labelFrom}
                 <input
-                    part="number-input-formfield number-input-formfield-from{from >
-                        to &&
-                        to !== null ?
-                        ' formfield-error': ''
-                        }"
+                    part="number-input-formfield number-input-formfield-from
+                        {to && from > to ? ' formfield-error': ''}"
                     type="number"
                     bind:value={from}
                     min="0"
@@ -129,11 +125,8 @@
             >
                 {$catalogueTextStore.numberInput.labelTo}
                 <input
-                    part="number-input-formfield number-input-formfield-from{from >
-                        to &&
-                        to !== null ?
-                        ' formfield-error' : ''
-                        }"
+                    part="number-input-formfield number-input-formfield-from
+                        {to && from > to ? ' formfield-error' : ''}"
                     type="number"
                     bind:value={to}
                     min="0"

diff --git a/packages/lib/src/components/results/ChartComponent.wc.svelte b/packages/lib/src/components/results/ChartComponent.wc.svelte
@@ -27,6 +27,8 @@
     import { catalogueKeyToResponseKeyMap } from "../../stores/mappings";
     import type { ResponseStore } from "../../types/backend";
     import type { Site } from "../../types/response";
+    import InfoButtonComponent from "../buttons/InfoButtonComponent.wc.svelte";
+    import { lensOptions } from "../../stores/options";
 
     export let title: string = ""; // e.g. 'Gender Distribution'
     export let catalogueGroupCode: string = ""; // e.g. "gender"
@@ -38,7 +40,6 @@
     $: responseGroupCode =
         $catalogueKeyToResponseKeyMap.get(catalogueGroupCode);
 
-    export let hintText: string = "";
     export let tooltips: Map<string, string> = new Map<string, string>();
     export let headers: Map<string, string> = new Map<string, string>();
     export let displayLegends: boolean = false;
@@ -48,6 +49,10 @@
     export let groupingDivider: string | null = null;
     export let filterRegex: string | null = null;
     export let groupingLabel: string = "";
+    export let viewScales: boolean = chartType !== "pie" ? true : false;
+
+    let options: any
+    $: options = $lensOptions?.chartOptions && $lensOptions?.chartOptions[catalogueGroupCode] || {}
 
     export let backgroundColor: string[] = [
         "#4dc9f6",
@@ -114,14 +119,14 @@
             },
             scales: {
                 y: {
-                    display: true,
+                    display: viewScales,
                     title: {
                         display: true,
                         text: yAxisTitle
                     }
                 },
                 x: {
-                    display: true,
+                    display: viewScales,
                     title: {
                         display: true,
                         text: xAxisTitle
@@ -194,7 +199,8 @@
                 const stratifierCodeCount: number =
                     getAggregatedPopulationForStratumCode(
                         responseStore,
-                        stratifierCode
+                        stratifierCode,
+                        responseGroupCode
                     );
                 return stratifierCodeCount;
             });
@@ -253,7 +259,8 @@
                             label: label + groupingLabel,
                             value: getAggregatedPopulationForStratumCode(
                                 responseStore,
-                                label
+                                label,
+                                responseGroupCode
                             ),
                         },
                     ];
@@ -279,7 +286,8 @@
 
                 superClassItem.value += getAggregatedPopulationForStratumCode(
                     responseStore,
-                    label
+                    label,
+                    responseGroupCode
                 );
 
                 return [
@@ -465,15 +473,18 @@
 
         addItemToQuery(queryItem, $activeQueryGroupIndex);
     };
+    // console.log(hintText);
 </script>
 
 <div part="chart-wrapper">
     <h4 part="chart-title">{title}</h4>
+    {#if options.hintText}
+        <InfoButtonComponent message={options.hintText}/>
+    {/if}
     <canvas
         part="chart-canvas"
         bind:this={canvas}
         id="chart"
         on:click={handleClickOnStratifier}
     />
-    <div part="chart-hint">{hintText}</div>
 </div>
diff --git a/packages/lib/src/cql-translator-service/ast-to-cql-translator.ts b/packages/lib/src/cql-translator-service/ast-to-cql-translator.ts
@@ -47,7 +47,7 @@ export const translateAstToCql = (query: AstTopLayer, returnOnlySingeltons: bool
   singletons += resolveOperation(query)
 
   if (query.children.length == 0) {
-    singletons += "true"
+    singletons += "\ntrue"
   }
 
   if (returnOnlySingeltons) {

diff --git a/packages/lib/src/stores/options.ts b/packages/lib/src/stores/options.ts
@@ -0,0 +1,4 @@
+import { writable } from "svelte/store";
+
+
+export const lensOptions = writable<any>()
-Original file line number
+Diff line change
@@ Expand Up / @@ -78,8 +78,6 @@ @@
                     return store;
                 }
-                console.log(store);
                 return store;
             });
         };
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@
		import { writable } from "svelte/store";


		export const lensOptions = writable<any>()