Merge pull request #113 from samply/fix/searchbar-multiple-behaviour

fix(search bar multiple): fix bug which crashes the catalogue
samply · Jul 11, 2024 · b3ec4d3 · b3ec4d3
2 parents a18efff + dd9e18c
commit b3ec4d3
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -4,18 +4,20 @@
     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>
 <hr />
 {#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
@@ -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
@@ -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