Merge branch 'develop'

samply · Oct 16, 2023 · cfa8b7e · cfa8b7e
2 parents 9e4ab69 + 8e658c8
commit cfa8b7e
Show file tree

Hide file tree

Showing 16 changed files with 795 additions and 57 deletions.
diff --git a/packages/demo/public/Deutsches_Krebsforschungszentrum_Logo.svg b/packages/demo/public/Deutsches_Krebsforschungszentrum_Logo.svg
diff --git a/packages/demo/public/long-right-arrow-svgrepo-com.svg b/packages/demo/public/long-right-arrow-svgrepo-com.svg
diff --git a/packages/demo/public/right-arrow-svgrepo-com.svg b/packages/demo/public/right-arrow-svgrepo-com.svg
diff --git a/packages/demo/src/AppCCP.svelte b/packages/demo/src/AppCCP.svelte
@@ -157,14 +157,14 @@
   </div>
   <h1>CCP Explorer</h1>
   <div class="logo logo-dkfz">
-    <img src="../logo-dkfz.svg" alt="Logo des DKFZ" />
+    <img src="../Deutsches_Krebsforschungszentrum_Logo.svg" alt="Logo des DKTK" />
   </div>
 </header>
 <main>
   <div class="search">
     <lens-search-bar
       treeData={mockCatalogueData}
-      noMatchesFoundMessage={"No matches found"}
+      noMatchesFoundMessage={"keine Ergebnisse gefunden"}
       measures={[dktkPatientsMeasure, dktkDiagnosisMeasure, dktkSpecimenMeasure, dktkPatientsMeasure, dktkMedicationStatementsMeasure]}
     >
   </lens-search-bar>
@@ -179,6 +179,8 @@
   <div class="grid">
     <div class="catalogue">
       <lens-catalogue
+        toggleIconUrl='right-arrow-svgrepo-com.svg'
+        addIconUrl='long-right-arrow-svgrepo-com.svg'
         treeData={mockCatalogueData}
         texts={catalogueText}
         toggle={{ collapsable: false, open: catalogueopen }}
@@ -196,23 +198,25 @@
           title="Patienten pro Standort"
           catalogueGroupCode="patients"
           perSite={true}
+          displayLegends={true}
           chartType="pie"
         />
       </div>
       <div class="chart-wrapper result-table">
-        <lens-result-table pageSize="10" title="Responding sites" />
+        <lens-result-table pageSize="10" />
       </div>
       <div class="chart-wrapper">
         <lens-chart
           title="Geschlecht"
           catalogueGroupCode="gender"
           chartType="pie"
+          displayLegends={true}
           clickToAddState={true}
         />
       </div>
       <div class="chart-wrapper chart-diagnosis">
         <lens-chart
-          title="Diagnosis"
+          title="Diagnose"
           catalogueGroupCode="diagnosis"
           chartType="bar"
           indexAxis='y'
@@ -232,6 +236,7 @@
           title="Vitalstatus"
           catalogueGroupCode="75186-7"
           chartType="pie"
+          displayLegends={true}
           clickToAddState={true}
         />
       </div>

diff --git a/packages/demo/src/ccp.css b/packages/demo/src/ccp.css
@@ -7,8 +7,13 @@
 @import url('./styles/default/negotiate-button.css');
 @import url('./styles/default/info-button.css');
 
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  src: url('../public/fonts/Open_Sans/OpenSans-VariableFont_wdth\,wght.ttf') format('truetype');
+}
+
 :root {
-  font-family: Open_Sans, sans-serif;
   --white: #ffffff;
   --ghost-white: #f8f8ff;
   --black: #000000;
@@ -46,6 +51,8 @@
   --font-size-l: 18px;
   --font-size-xl: 24px;
   --font-size-xxl: 32px;
+
+  --font-family: 'Open Sans', sans-serif;
 }
 
 /**
@@ -59,11 +66,16 @@
 body {
   margin: 0px;
   background-color: var(--ghost-white);
+  font-family: var(--font-family);
+}
+
+button {
+  font-family: inherit;
 }
 
 header {
   background-color: var(--white);
-  padding: var(--gap-s);
+  padding: var(--gap-xs);
   display: grid;
   align-items: center;
   grid-template-columns: 1fr 1fr 1fr;
@@ -78,12 +90,16 @@ header {
 .logo-dkfz {
   justify-self: end;
 }
+.logo-dkfz img {
+  height: 30px;
+}
 
 header h1 {
   text-align: center;
-  font-size: var(--font-size-xl);
-  font-weight: normal;
+  font-size: var(--font-size-xxl);
+  font-weight: lighter;
   color: var(--blue);
+  margin: 0;
 }
 
 main>div,
@@ -248,4 +264,45 @@ lens-search-button::part(lens-search-button) {
   width: 100%;
   max-height: 1000px;
   height: 940px;
+}
+
+lens-catalogue::part(number-input-formfield) {
+  width: 60px;
+  margin-left: var(--gap-xs);
+  border: solid 1px var(--dark-gray);
+  border-radius: 0;
+  text-align: center;
+  font-size: var(--font-size-s);
+  -webkit-appearance: textfield;
+  -moz-appearance:    textfield;
+  appearance:         textfield !important;
+
+}
+
+lens-catalogue::part(number-input-formfield):focus {
+  border-color: var(--light-blue);
+  outline: none;
+}
+
+lens-catalogue::part(number-input-formfield)::-webkit-outer-spin-button,
+lens-catalogue::part(number-input-formfield)::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+lens-catalogue::part(data-tree-element-toggle-icon) {
+  width: 24px;
+  transform: rotate(0deg);
+  left: -15px;
+  top: 0px;
+  filter: invert(29%) sepia(17%) saturate(327%) hue-rotate(163deg) brightness(92%) contrast(85%);
+}
+
+lens-catalogue::part(data-tree-element-toggle-icon-open) {
+  transform: rotate(90deg);
+}
+
+lens-catalogue::part(query-add-button-icon) {
+  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(213deg) brightness(100%) contrast(100%);
+  width: 21px;
 }
diff --git a/packages/demo/src/styles/default/catalogue.css b/packages/demo/src/styles/default/catalogue.css
@@ -31,6 +31,7 @@ lens-catalogue::part(data-tree-element-name) {
   border: none;
   background-color: unset;
   cursor: pointer;
+  font-family: var(--font-family);
 }
 
 lens-catalogue::part(data-tree-element-name) {
@@ -47,8 +48,8 @@ lens-catalogue::part(data-tree-element-name) {
 
 lens-catalogue::part(data-tree-element-toggle-icon) {
   position: absolute;
-  left: -6px;
-  top: -3px;
+  left: -15px;
+  top: -8px;
   font-size: 22px;
   font-weight: lighter;
   transform: rotate(-90deg);
@@ -59,12 +60,16 @@ lens-catalogue::part(data-tree-element-toggle-icon-open) {
   transform: rotate(0deg);
 }
 
+lens-catalogue::part(data-tree-element-child-category) {
+  padding: var(--gap-xs) var(--gap-s) 0;
+  border-left: solid 1px var(--lightest-gray);
+}
 
-lens-catalogue::part(data-tree-element-child-category),
 lens-catalogue::part(data-tree-element-last-child-options) {
-  padding-left: 20px;
-  margin-bottom: 20px;
-  border-left: solid 1px var(--gray);
+  border-left: solid 1px var(--lightest-gray);
+  padding-left: var(--gap-m);
+  padding-top: var(--gap-xs);
+  padding-bottom: var(--gap-xs);
 }
 
 
@@ -108,13 +113,17 @@ lens-catalogue::part(query-add-button) {
   color: var(--white);
   border: none;
   border-radius: var(--border-radius-small);
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-m);
   cursor: pointer;
   width: 45px;
   height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 
+
 lens-catalogue::part(criterion-section-values) {
   display: flex;
   align-items: center;

diff --git a/packages/demo/src/styles/default/info-button.css b/packages/demo/src/styles/default/info-button.css
@@ -9,6 +9,7 @@ lens-info-button::part(info-button) {
 }
 
 lens-info-button::part(info-button-title) {
+    font-family: var(--font-family);
 }
 
 lens-info-button::part(info-button-dialogue) {

diff --git a/packages/demo/src/styles/default/negotiate-button.css b/packages/demo/src/styles/default/negotiate-button.css
@@ -12,6 +12,7 @@ lens-result-summary::part(lens-negotiate-button) {
     display: flex;
     gap: var(--gap-xs);
     align-items: center;
+    font-family: var(--font-family);
 }
 
 lens-result-summary::part(lens-negotiate-button-active) {

diff --git a/packages/demo/src/styles/default/search-button.css b/packages/demo/src/styles/default/search-button.css
@@ -32,6 +32,9 @@ lens-search-button::part(lens-search-button-magnifying-glass) {
     line-height: 0;
 }
 
+lens-search-button::part(lens-search-button-title) {
+    font-family: var(--font-family);
+}
 
 /**
 * search button in multiple searchbar

diff --git a/packages/lib/src/components/catalogue/AutoCompleteComponent.svelte b/packages/lib/src/components/catalogue/AutoCompleteComponent.svelte
@@ -52,9 +52,16 @@
      * watches the input value and updates the input options
      */
     $: inputOptions = criteria.filter((item: Criteria) => {
+        const clearedInputValue = inputValue
+        .replace(/^[0-9]*:/g, "")
+        .toLocaleLowerCase();
+
         return (
-            item.name.toLowerCase().includes(inputValue) ||
-            item.description.toLowerCase().includes(inputValue)
+            item.name.toLowerCase().includes(clearedInputValue) ||
+            item.key.toLowerCase().includes(clearedInputValue) ||
+            item.description
+                ?.toLowerCase()
+                .includes(clearedInputValue)
             /**
              * FIX ME:
              * should only take names. This needs a catalogue fix

diff --git a/packages/lib/src/components/catalogue/Catalogue.wc.svelte b/packages/lib/src/components/catalogue/Catalogue.wc.svelte
@@ -17,9 +17,22 @@
     import type { CatalogueText } from "../../types/texts";
     import type { Category } from "../../types/treeData";
     import DataTreeElement from "./DataTreeElement.svelte";
+    import { iconStore } from "../../stores/icons";
 
     export let treeData: Category[] = [];
     export let texts: CatalogueText = {};
+    export let addIconUrl: string | null = null;
+    export let toggleIconUrl: string | null = null;
+
+    iconStore.update((store: Map<string,string>) => {
+        if (addIconUrl) {
+            store.set('addIconUrl', addIconUrl);
+        }
+        if (toggleIconUrl) {
+            store.set('toggleIconUrl', toggleIconUrl);
+        }
+        return store;
+    })
 
       /**
      * Initialize the catalogue store with the given tree data