From dd9e18c3880acbdff6f8cc05722bde1f6cf9353c Mon Sep 17 00:00:00 2001
From: Mats Johansen <mats.johansen@dkfz-heidelberg.de>
Date: Thu, 11 Jul 2024 11:49:25 +0200
Subject: [PATCH] fix(search bar multiple): fix bug which crashes the catalogue

---
 package-lock.json                             |  8 ++++++
 package.json                                  |  1 +
 .../search-bar/SearchBarComponent.wc.svelte   | 15 ++++++-----
 .../StateDisplayComponent.wc.svelte           | 12 +++++----
 .../ast-to-cql-translator.ts                  |  1 +
 packages/lib/src/styles/searchbars.css        | 27 +++++++++++++++++++
 6 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4a43039a..527b5381 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "@commitlint/config-conventional": "^19.1.0",
         "@sveltejs/vite-plugin-svelte": "^2.5.3",
         "@tsconfig/svelte": "^5.0.0",
+        "@types/uuid": "^10.0.0",
         "@typescript-eslint/eslint-plugin": "^6.20.0",
         "@typescript-eslint/parser": "^6.20.0",
         "eslint": "^8.57.0",
@@ -1256,6 +1257,13 @@
       "integrity": "sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==",
       "dev": true
     },
+    "node_modules/@types/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "6.20.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.20.0.tgz",
diff --git a/package.json b/package.json
index 79865e6e..44df4ae6 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "@commitlint/config-conventional": "^19.1.0",
     "@sveltejs/vite-plugin-svelte": "^2.5.3",
     "@tsconfig/svelte": "^5.0.0",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",
     "eslint": "^8.57.0",
diff --git a/packages/lib/src/components/search-bar/SearchBarComponent.wc.svelte b/packages/lib/src/components/search-bar/SearchBarComponent.wc.svelte
index 1f231cf6..dab891d7 100644
--- a/packages/lib/src/components/search-bar/SearchBarComponent.wc.svelte
+++ b/packages/lib/src/components/search-bar/SearchBarComponent.wc.svelte
@@ -10,7 +10,11 @@
 
 <script lang="ts">
     import { writable } from "svelte/store";
-    import type { Category, Criteria } from "../../types/treeData";
+    import type {
+        AggregatedValue,
+        Category,
+        Criteria,
+    } from "../../types/treeData";
     import {
         addItemToQuery,
         queryStore,
@@ -28,7 +32,6 @@
      * @param treeData takes a Category tree to build the autocomplete items from
      * @param noMatchesFoundMessage takes a string to display when no matches are found
      */
-    export let treeData: Category[] = [];
     export let noMatchesFoundMessage: string = "No matches found";
     export let placeholderText: string = "Type to filter conditions";
     export let index: number = 0;
@@ -39,7 +42,6 @@
      * Initialize the catalogue store with the given tree data
      * watch for changes from other components
      */
-    $: $catalogue = treeData;
 
     /**
      * handles the focus state of the input element
@@ -182,13 +184,14 @@
             id: uuidv4(),
             name: inputItem.name,
             key: inputItem.key,
-            type: "type" in inputItem && inputItem.type,
-            system: "system" in inputItem && inputItem.system,
+            type: "type" in inputItem ? inputItem.type : "",
+            system: "system" in inputItem ? inputItem.system : "",
             values: [
                 {
                     value:
                         "aggregatedValue" in inputItem.criterion
-                            ? inputItem.criterion.aggregatedValue
+                            ? (inputItem.criterion
+                                  .aggregatedValue as AggregatedValue[][])
                             : inputItem.criterion.key,
                     name: inputItem.criterion.name,
                     description: inputItem.criterion.description,
diff --git a/packages/lib/src/components/testing-components/StateDisplayComponent.wc.svelte b/packages/lib/src/components/testing-components/StateDisplayComponent.wc.svelte
index 92d58d79..25cec7de 100644
--- a/packages/lib/src/components/testing-components/StateDisplayComponent.wc.svelte
+++ b/packages/lib/src/components/testing-components/StateDisplayComponent.wc.svelte
@@ -4,13 +4,16 @@
     import { buildAstFromQuery } from "../../helpers/ast-transformer";
     import { queryStore } from "../../stores/query";
     import { translateAstToCql } from "../../cql-translator-service/ast-to-cql-translator";
-
-    import { getCriteria } from "../../stores/catalogue";
-    getCriteria("diagnosis");
+    import { measureStore } from "../../stores/measures";
 </script>
 
 {#if $queryStore[0].length > 0}
-    {translateAstToCql(buildAstFromQuery($queryStore))}
+    {translateAstToCql(
+        buildAstFromQuery($queryStore),
+        false,
+        "DKTK_STRAT_DEF_IN_INITIAL_POPULATION",
+        $measureStore[0]?.measures,
+    )}
 {/if}
 <hr />
 <pre>{@html JSON.stringify($queryStore, null, 2)}</pre>
@@ -18,4 +21,3 @@
 {#if $queryStore[0].length > 0}
     <pre>{@html JSON.stringify(buildAstFromQuery($queryStore), null, 2)}</pre>
 {/if}
-
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
index 0e7182f4..23e29171 100644
--- a/packages/lib/src/cql-translator-service/ast-to-cql-translator.ts
+++ b/packages/lib/src/cql-translator-service/ast-to-cql-translator.ts
@@ -71,6 +71,7 @@ const resolveOperation = (operation: AstElement): string => {
 
     "children" in operation &&
         operation.children.forEach((element: AstElement, index) => {
+            if (element === null) return;
             if ("children" in element) {
                 expression += resolveOperation(element);
             }
diff --git a/packages/lib/src/styles/searchbars.css b/packages/lib/src/styles/searchbars.css
index 36c7392e..a679730b 100644
--- a/packages/lib/src/styles/searchbars.css
+++ b/packages/lib/src/styles/searchbars.css
@@ -193,6 +193,7 @@ lens-search-bar-multiple::part(info-button-icon) {
 lens-search-bar::part(info-button-icon):hover,
 lens-search-bar-multiple::part(info-button-icon):hover {
   cursor: pointer;
+  filter: invert(41%) sepia(43%) saturate(4610%) hue-rotate(357deg) brightness(96%) contrast(90%);
 }
 
 lens-search-bar::part(info-button-dialogue),
@@ -242,6 +243,7 @@ lens-search-bar-multiple::part(query-delete-button-value) {
   margin: 0 var(--gap-xs) 0 var(--gap-xxs);
   background-color: var(--blue);
   border: var(--white) 1px solid;
+  transform: translatey(-1px);
 }
 
 lens-search-bar::part(query-delete-button-item),
@@ -262,6 +264,31 @@ lens-search-bar-multiple::part(query-delete-button-group) {
   border: solid 1px var(--white);
 }
 
+lens-search-bar::part(delete-button-icon-item), 
+lens-search-bar-multiple::part(delete-button-icon-item) {
+  filter: invert(41%) sepia(43%) saturate(4610%) hue-rotate(357deg) brightness(96%) contrast(90%);
+  transform: translate(-1px, -1px);
+  width: 20px;
+}
+
+lens-search-bar::part(delete-button-icon-group), 
+lens-search-bar-multiple::part(delete-button-icon-group) {
+  filter: invert(41%) sepia(43%) saturate(4610%) hue-rotate(357deg) brightness(96%) contrast(90%);
+  transform: translate(0px, 2px);
+  width: 20px;
+}
+
+lens-search-bar::part(delete-button-icon-value),
+lens-search-bar-multiple::part(delete-button-icon-value) {
+  transform: translate(-1px, -1px);
+  width: 20px;
+}
+
+lens-search-bar::part(delete-button-icon):hover,
+lens-search-bar-multiple::part(delete-button-icon-value):hover {
+  filter: invert(38%) sepia(78%) saturate(1321%) hue-rotate(352deg) brightness(92%) contrast(99%);
+}
+
 
 /**
 * Lens search Button in multiple searchbar mode