Merge branch 'develop'

samply · Oct 23, 2023 · ca755d9 · ca755d9
2 parents efc4e09 + d5af403
commit ca755d9
Show file tree

Hide file tree

Showing 15 changed files with 773 additions and 341 deletions.
diff --git a/packages/demo/public/catalogues/catalogue-dktk.json b/packages/demo/public/catalogues/catalogue-dktk.json
diff --git a/packages/demo/src/AppCCP.svelte b/packages/demo/src/AppCCP.svelte
@@ -122,9 +122,59 @@
     catalogueKeyToResponseKeyMap: catalogueKeyToResponseKeyMap,
   };
 
- 
-  
-    
+  const genderHeaders: Map<string, string> = new Map<string, string>()
+    .set('male', 'männlich')
+    .set('female', 'weiblich')
+    .set('other', 'divers, intersexuell')
+    .set('unknown', 'unbekannt');
+
+  const vitalStateHeaders: Map<string, string> = new Map<string, string>()
+    .set('lebend', 'alive')
+    .set('verstorben', 'deceased')
+    .set('unbekannt', 'unknown');
+
+  const therapyHeaders: Map<string, string> = new Map<string, string>()
+    .set('medicationStatements', 'Sys. T');
+
+  const therapyTooltips: Map<string, string> = new Map<string, string>()
+    .set('OP', 'Operationen')
+    .set('ST', 'Strahlentherapien')
+    .set('medicationStatements', 'Systemische Therapien');
+
+  const systemicTherapyTooltips: Map<string, string> = new Map<string, string>()
+    .set('CH', 'Chemotherapie')
+    .set('HO', 'Hormontherapie')
+    .set('IM', 'Immun- und Antikörpertherapie')
+    .set('KM', 'Knochenmarkstransplantation')
+    .set('WS', 'Wait and see')
+    .set('AS', 'Active Surveillance')
+    .set('ZS', 'Zielgerichtete Substanzen')
+    .set('SO', 'Sonstiges')
+    .set('ST', 'Strahlentherapie')
+    .set('OP', 'Operation')
+
+  const specimenHeaders: Map<string, string> = new Map<string, string>()
+    .set('whole-blood','Whole blood')
+    .set('bone-marrow','Bone marrow')
+    .set('buffy-coat','Buffy-Coat')
+    .set('dried-whole-blood','Dried whole blood')
+    .set('peripheral-blood-cells-vital','Peripheral blood mononuclear cells (PBMCs, viable)')
+    .set('blood-plasma','Plasma')
+    .set('blood-serum','Serum')
+    .set('ascites','Ascites')
+    .set('csf-liquor','CSF/Liquor')
+    .set('saliva','Saliva')
+    .set('stool-faeces','Stool/Faeces')
+    .set('urine','Urine')
+    .set('swab','Swab')
+    .set('liquid-other','Other liquid biosample/storage')
+    .set('tissue-ffpe','Tissue FFPE')
+    .set('tissue-frozen','Tissue frozen')
+    .set('tissue-other','Other tissue storage')
+    .set('dna','DNA')
+    .set('rna','RNA')
+    .set('derivative-other','Other derivative')
+
 </script>
 
 <header>
@@ -144,7 +194,7 @@
       measures={[dktkPatientsMeasure, dktkDiagnosisMeasure, dktkSpecimenMeasure, dktkPatientsMeasure, dktkMedicationStatementsMeasure]}
     >
   </lens-search-bar>
-  <lens-info-button iconUrl='../info-circle-svgrepo-com.svg' noQueryMessage="Leere Suchanfrage: Sucht nach allen Ergebnissen." />
+  <lens-info-button infoIconUrl='info-circle-svgrepo-com.svg' noQueryMessage="Leere Suchanfrage: Sucht nach allen Ergebnissen." showQuery={true} />
   <lens-search-button
     title="Suchen"
     {measures}
@@ -157,6 +207,7 @@
       <lens-catalogue
         toggleIconUrl='right-arrow-svgrepo-com.svg'
         addIconUrl='long-right-arrow-svgrepo-com.svg'
+        infoIconUrl='info-circle-svgrepo-com.svg'
         treeData={mockCatalogueData}
         texts={catalogueText}
         toggle={{ collapsable: false, open: catalogueopen }}
@@ -188,6 +239,7 @@
           chartType="pie"
           displayLegends={true}
           clickToAddState={true}
+          headers={genderHeaders}
         />
       </div>
       <div class="chart-wrapper chart-diagnosis">
@@ -200,7 +252,8 @@
           groupingDivider='.'
           groupingLabel='.%'
           filterRegex='^[CD].*'
-
+          xAxisTitle="Anzahl der Diagnosen"
+          yAxisTitle="ICD-10-Codes"
         />
       </div>
       <div class="chart-wrapper chart-age-distribution">
@@ -210,6 +263,8 @@
           chartType="bar"
           clickToAddState={true}
           groupRange={10}
+          xAxisTitle="Alter"
+          yAxisTitle="Anzahl der Primärdiagnosen"
         />
       </div>
       <div class="chart-wrapper">
@@ -219,6 +274,7 @@
           chartType="pie"
           displayLegends={true}
           clickToAddState={true}
+          headers={vitalStateHeaders}
         />
       </div>
       <div class="chart-wrapper">
@@ -227,6 +283,9 @@
           catalogueGroupCode="therapy_of_tumor"
           chartType="bar"
           clickToAddState={true}
+          headers={therapyHeaders}
+          tooltips={therapyTooltips}
+          yAxisTitle="Anzahl der Therapien"
         />
       </div>
       <div class="chart-wrapper">
@@ -235,6 +294,8 @@
           catalogueGroupCode="medicationStatements"
           chartType="bar"
           clickToAddState={true}
+          tooltips={systemicTherapyTooltips}
+          yAxisTitle="Anzahl der Therapien"
         />
       </div>
       <div class="chart-wrapper">
@@ -243,6 +304,9 @@
           catalogueGroupCode="sample_kind"
           chartType="bar"
           clickToAddState={true}
+          xAxisTitle="Probentypen"
+          yAxisTitle="Probenanzahl"
+          tooltips={specimenHeaders}
         />
       </div>
     </div>

diff --git a/packages/demo/src/ccp.css b/packages/demo/src/ccp.css
@@ -10,7 +10,7 @@
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
-  src: url('../public/fonts/Open_Sans/OpenSans-VariableFont_wdth\,wght.ttf') format('truetype');
+  src: url('../fonts/Open_Sans/OpenSans-VariableFont_wdth\,wght.ttf') format('truetype');
 }
 
 :root {

diff --git a/packages/demo/src/measures.ts b/packages/demo/src/measures.ts
@@ -58,8 +58,16 @@ export const patientsMeasure = {
 define Gender:
 if (Patient.gender is null) then 'unknown' else Patient.gender
 
+define PrimaryDiagnosis:
+First(
+  from [Condition] C
+  where C.extension.where(url='http://hl7.org/fhir/StructureDefinition/condition-related').empty()
+  sort by date from onset asc
+)
+
 define AgeClass:
 if (Patient.birthDate is null) then 'unknown' else ToString((AgeInYears() div 10) * 10)
+if (PrimaryDiagnosis.onset is null) then 'unknown' else ToString((AgeInYearsAt(FHIRHelpers.ToDateTime(PrimaryDiagnosis.onset)) div 10) * 10)
 
 define PatientDeceased:
 First (from [Observation: Code '75186-7' from loinc] O return O.value.coding.where(system = 'http://dktk.dkfz.de/fhir/onco/core/CodeSystem/VitalstatusCS').code.first())

diff --git a/packages/demo/src/styles/default/catalogue.css b/packages/demo/src/styles/default/catalogue.css
@@ -13,6 +13,7 @@ lens-catalogue::part(lens-catalogue-toggle-button) {
   cursor: pointer;
   display: flex;
   gap: var(--gap-xs);
+  width: 100%;
 }
 
 lens-catalogue::part(lens-catalogue-toggle-button):hover {
@@ -23,7 +24,6 @@ lens-catalogue::part(toggle-button-open-icon) {
   transform: rotate(180deg);
 }
 
-
 lens-catalogue::part(data-tree-element-name) {
   font-size: var(--font-size-m);
   color: var(--dark-gray);
@@ -36,6 +36,7 @@ lens-catalogue::part(data-tree-element-name) {
 
 lens-catalogue::part(data-tree-element-name) {
   padding-left: var(--gap-s);
+  padding-right: 0;
   font-size: var(--font-size-m);
   color: var(--dark-gray);
   margin-bottom: 10px;
@@ -60,8 +61,43 @@ lens-catalogue::part(data-tree-element-toggle-icon-open) {
   transform: rotate(0deg);
 }
 
+
+lens-catalogue::part(info-button) {
+  position: relative;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  padding: 0;
+}
+
+lens-catalogue::part(info-button-icon) {
+  position: absolute;
+  bottom: var(--gap-xxs);
+  width: 16px;
+  height: 16px;
+}
+
+lens-catalogue::part(info-button-dialogue) {
+    position: absolute;
+    border: none;
+    background-color: var(--white);
+    width: max-content;
+    max-width: 80vw;
+    z-index: 100;
+    padding: var(--gap-xs);
+    top: 0;
+    left: var(--gap-xxs);
+    border: solid 1px var(--light-blue);
+    border-radius: var(--border-radius-small);
+}
+
+
+lens-catalogue::part(data-tree-element-info-icon):hover lens-catalogue::part(data-tree-element-info-text) {
+  display: block;
+}
+
 lens-catalogue::part(data-tree-element-child-category) {
-  padding: var(--gap-xs) var(--gap-s) 0;
+  padding: var(--gap-xs) 0 0 var(--gap-s);
   border-left: solid 1px var(--lightest-gray);
 }
 
@@ -285,4 +321,4 @@ lens-catalogue::part(criterion-autocomplete-tooltip) {
 lens-catalogue::part(formfield-error) {
   color: var(--red);
   border-color: var(--red);
-}
+}
diff --git a/packages/lib/index.ts b/packages/lib/index.ts
@@ -8,4 +8,4 @@ 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 QueryInfoButton } from './src/components/buttons/QueryInfoButtonComponent.wc.svelte'
+export { default as InfoButton } from './src/components/buttons/InfoButtonComponent.wc.svelte'
diff --git a/...uttons/QueryInfoButtonComponent.wc.svelte → ...nts/buttons/InfoButtonComponent.wc.svelte b/...uttons/QueryInfoButtonComponent.wc.svelte → ...nts/buttons/InfoButtonComponent.wc.svelte
@@ -1,42 +1,58 @@
 <svelte:options
     customElement={{
         tag: "lens-info-button",
-        props: {},
+        props: {
+            showQuery: {type: "Boolean"},
+        },
     }}
 />
 
 <script lang="ts">
+    import { iconStore } from "../../stores/icons";
     import { getHumanReadableQuery } from "../../stores/negotiate";
-
+    
+    export let message: string = "";
     export let noQueryMessage: string = "Search for all results";
-    export let iconUrl: string | null = null;
-    $: query = "";
+    export let showQuery: boolean = false;
+    export let infoIconUrl: string | null = null;
+
+    iconStore.update((store) => {
+        if (infoIconUrl){
+            store.set("info", infoIconUrl);
+        }
+        return store;
+    });
 
+    $: iconUrl = $iconStore.get("info");
     /**
      * handles the toggling of the tooltip
      */
     let tooltipOpen: boolean = false;
 
+    const onFocusOut = () => {
+        tooltipOpen = false;
+    };
+
     const displayQueryInfo = () => {
-        query = getHumanReadableQuery();
+        if(showQuery){
+            message = getHumanReadableQuery().length > 0 ? getHumanReadableQuery() : noQueryMessage;
+        }
         tooltipOpen = !tooltipOpen;
     };
 
-    const onFocusOut = () => {
-        displayQueryInfo();
-        tooltipOpen = false;
-    };
 </script>
 
 <button part="info-button" on:click={displayQueryInfo} on:focusout={onFocusOut}>
         {#if iconUrl}
             <img part="info-button-icon" src={iconUrl} alt="info icon" />
         {:else}
+        <span part="info-button-icon">
             &#9432;
+        </span>
         {/if}
     {#if tooltipOpen}
         <div part="info-button-dialogue">
-            {query.length > 0 ? query : noQueryMessage}
+            {message}
         </div>
     {/if}
 </button>
diff --git a/packages/lib/src/components/catalogue/Catalogue.wc.svelte b/packages/lib/src/components/catalogue/Catalogue.wc.svelte
@@ -23,6 +23,7 @@
     export let texts: CatalogueText = {};
     export let addIconUrl: string | null = null;
     export let toggleIconUrl: string | null = null;
+    export let infoIconUrl: string | null = null;
 
     iconStore.update((store: Map<string,string>) => {
         if (addIconUrl) {
@@ -31,6 +32,9 @@
         if (toggleIconUrl) {
             store.set('toggleIconUrl', toggleIconUrl);
         }
+        if (infoIconUrl) {
+            store.set('infoIconUrl', infoIconUrl);
+        }
         return store;
     })