Merge pull request #133 from samply/develop

Develop
samply · Oct 2, 2024 · 6ec946f · 6ec946f
2 parents 610d584 + 4d1f062
commit 6ec946f
Show file tree

Hide file tree

Showing 18 changed files with 102 additions and 82 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@samply/lens",
   "description": "A web component library for clinical data search and visualisation",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "type": "module",
   "module": "dist/lens.js",
   "main": "dist/lens.umd.js",

diff --git a/packages/demo/src/AppCCP.svelte b/packages/demo/src/AppCCP.svelte
@@ -13,8 +13,10 @@
         dktkHistologyMeasure,
     } from "./measures";
 
-    let catalogueData: string = "";
-    let libraryOptions: string = "";
+    /**
+     * VITE_TARGET_ENVIRONMENT is set by the ci pipeline
+     */
+
     let catalogueUrl: string = "";
     let optionsFilePath: string = "";
 
@@ -27,26 +29,35 @@
     }
 
     /**
-     * VITE_TARGET_ENVIRONMENT is set by the ci pipeline
+     * fetch both catalogue data and options
+     * response needs to be converted to text so that it can be passed to the options component for proper schema validation
+     * @param catalogueUrl the url where to fetch the catalogue.json
+     * @param optionsFilePath the url where to fetch the options.json
+     * @returns a promise that resolves to an object containing the catalogueJSON and optionsJSON
      */
+    const fetchData = async (
+        catalogueUrl: string,
+        optionsFilePath: string,
+    ): Promise<{ catalogueJSON: string; optionsJSON: string }> => {
+        const cataloguePromise: string = await fetch(catalogueUrl).then(
+            (response) => response.text(),
+        );
 
-    /**
-     * get catalogue file
-     */
-    fetch(catalogueUrl)
-        .then((response) => response.text())
-        .then((data) => {
-            catalogueData = data;
-        });
+        const optionsPromise: string = await fetch(optionsFilePath).then(
+            (response) => response.text(),
+        );
 
-    /**
-     * get options file
-     */
-    fetch(optionsFilePath)
-        .then((response) => response.json())
-        .then((data) => {
-            libraryOptions = data;
-        });
+        return Promise.all([cataloguePromise, optionsPromise]).then(
+            ([catalogueJSON, optionsJSON]) => {
+                return { catalogueJSON, optionsJSON };
+            },
+        );
+    };
+
+    const jsonPromises: Promise<{
+        catalogueJSON: string;
+        optionsJSON: string;
+    }> = fetchData(catalogueUrl, optionsFilePath);
 
     const measures: MeasureGroup[] = [
         {
@@ -63,7 +74,7 @@
     ];
 
     /**
-     * TODO: move to config file
+     * TODO: add catalogueText option to config file
      */
     const catalogueText = {
         group: "Group",
@@ -75,7 +86,7 @@
         },
     };
 
-    let catalogueopen = false;
+    let catalogueopen: boolean = false;
 
     const genderHeaders: Map<string, string> = new Map<string, string>()
         .set("male", "männlich")
@@ -190,7 +201,7 @@
                     filterRegex="^[CD].*"
                     xAxisTitle="Anzahl der Diagnosen"
                     yAxisTitle="ICD-10-Codes"
-                    backgroundColor={JSON.stringify(barChartBackgroundColors)}
+                    backgroundColor={barChartBackgroundColors}
                 />
             </div>
             <div class="chart-wrapper chart-age-distribution">
@@ -202,7 +213,7 @@
                     filterRegex="^(([0-9]?[0-9]$)|(1[0-2]0))"
                     xAxisTitle="Alter"
                     yAxisTitle="Anzahl der Primärdiagnosen"
-                    backgroundColor={JSON.stringify(barChartBackgroundColors)}
+                    backgroundColor={barChartBackgroundColors}
                 />
             </div>
             <div class="chart-wrapper">
@@ -222,7 +233,7 @@
                     headers={therapyHeaders}
                     xAxisTitle="Art der Therapie"
                     yAxisTitle="Anzahl der Therapieeinträge"
-                    backgroundColor={JSON.stringify(barChartBackgroundColors)}
+                    backgroundColor={barChartBackgroundColors}
                 />
             </div>
             <div class="chart-wrapper">
@@ -232,7 +243,7 @@
                     chartType="bar"
                     xAxisTitle="Art der Therapie"
                     yAxisTitle="Anzahl der Therapieeinträge"
-                    backgroundColor={JSON.stringify(barChartBackgroundColors)}
+                    backgroundColor={barChartBackgroundColors}
                 />
             </div>
             <div class="chart-wrapper">
@@ -243,7 +254,7 @@
                     xAxisTitle="Probentypen"
                     yAxisTitle="Probenanzahl"
                     filterRegex="^(?!(tissue-other|buffy-coat|peripheral-blood-cells|dried-whole-blood|swab|ascites|stool-faeces|saliva|liquid-other|derivative-other))"
-                    backgroundColor={JSON.stringify(barChartBackgroundColors)}
+                    backgroundColor={barChartBackgroundColors}
                 >
                 </lens-chart>
             </div>
@@ -287,5 +298,12 @@
     >
 </footer>
 
-<lens-options options={libraryOptions} {catalogueData} {measures} />
+{#await jsonPromises}
+    Loading data...
+{:then { optionsJSON, catalogueJSON }}
+    <lens-options {catalogueJSON} {optionsJSON} {measures}></lens-options>
+{:catch someError}
+    System error: {someError.message}
+{/await}
+
 <lens-data-passer bind:this={dataPasser} />
diff --git a/packages/demo/src/AppFragmentDevelopment.svelte b/packages/demo/src/AppFragmentDevelopment.svelte
@@ -95,6 +95,27 @@
         getQuery();
     };
 
+    const setQueryStore = (): void => {
+        const store: QueryItem[][] = [
+            [
+                {
+                    id: "0cf3a74c-77f8-49a0-bef5-16e20d6b361e",
+                    key: "gender",
+                    name: "Geschlecht",
+                    type: "EQUALS",
+                    values: [
+                        {
+                            name: "Männlich",
+                            value: "male",
+                            queryBindId: "1f69dd2d-3c29-40a6-ba83-a966def1cd12",
+                        },
+                    ],
+                },
+            ],
+        ];
+        dataPasser.setQueryStoreAPI(store);
+    };
+
     window.addEventListener("emit-lens-query", (e) => {
         const event = e as QueryEvent;
         const { ast, updateResponse, abortController } = event.detail;
@@ -158,6 +179,7 @@
         <button on:click={() => getQuery()}>Get Query Store</button>
         <button on:click={() => getResponse()}>Get Response Store</button>
         <button on:click={() => getAST()}>Get AST</button>
+        <button on:click={() => setQueryStore()}>Set Query Store</button>
         {#each queryStore as queryStoreGroup}
             <div>
                 {#each queryStoreGroup as queryStoreItem}

diff --git a/packages/lib/src/components/DataPasser.wc.svelte b/packages/lib/src/components/DataPasser.wc.svelte
@@ -73,6 +73,14 @@
      * Setters
      */
 
+    /**
+     * sets the query store
+     * @param newQuery the new query store
+     */
+    export const setQueryStoreAPI = (newQuery: QueryItem[][]): void => {
+        queryStore.set(newQuery);
+    };
+
     /**
      * lets the library user add a single stratifier to the query store
      * @param params the parameters for the function

diff --git a/packages/lib/src/components/Options.wc.svelte b/packages/lib/src/components/Options.wc.svelte
@@ -1,10 +1,6 @@
 <svelte:options
     customElement={{
         tag: "lens-options",
-        props: {
-            options: { type: "Object" },
-            catalogueData: { type: "Object" },
-        },
     }}
 />
 
@@ -21,26 +17,34 @@
     import type { Criteria } from "../types/treeData";
     import optionsSchema from "../types/options.schema.json";
     import catalogueSchema from "../types/catalogue.schema.json";
-    import { parser } from "@exodus/schemasafe";
+    import { parser, type Parse, type ParseResult } from "@exodus/schemasafe";
     import type { LensOptions } from "../types/options";
     import {
         catalogueKeyToResponseKeyMap,
         uiSiteMappingsStore,
     } from "../stores/mappings";
 
-    export let options: LensOptions = {};
-    export let catalogueData: Criteria[] = [];
+    export let optionsJSON: string = "";
+    export let catalogueJSON: string = "";
     export let measures: MeasureStore = {} as MeasureStore;
 
+    /**
+     * transform the JSON strings to objects for validation and further processing
+     */
+    let options: LensOptions = {} as LensOptions;
+    let catalogueData: Criteria[] = [];
+    $: options = JSON.parse(optionsJSON);
+    $: catalogueData = JSON.parse(catalogueJSON);
+
     /**
      * Validate the options against the schema before passing them to the store
      */
     $: {
-        const parse = parser(optionsSchema, {
+        const parse: Parse = parser(optionsSchema, {
             includeErrors: true,
             allErrors: true,
         });
-        const validJSON = parse(JSON.stringify(options));
+        const validJSON: ParseResult = parse(JSON.stringify(options));
         if (validJSON.valid === true) {
             $lensOptions = options;
         } else if (typeof options === "object") {
@@ -52,11 +56,11 @@
     }
 
     $: {
-        const parse = parser(catalogueSchema, {
+        const parse: Parse = parser(catalogueSchema, {
             includeErrors: true,
             allErrors: true,
         });
-        const validJSON = parse(JSON.stringify(catalogueData));
+        const validJSON: ParseResult = parse(JSON.stringify(catalogueData));
         if (validJSON.valid === true) {
             $catalogue = catalogueData;
         } else if (typeof catalogueData === "object") {

diff --git a/packages/lib/src/components/buttons/InfoButtonComponent.wc.svelte b/packages/lib/src/components/buttons/InfoButtonComponent.wc.svelte
@@ -1,11 +1,6 @@
 <svelte:options
     customElement={{
         tag: "lens-info-button",
-        props: {
-            showQuery: { type: "Boolean" },
-            onlyChildInfo: { type: "Boolean" },
-            queryItem: { type: "Object" },
-        },
     }}
 />
 

diff --git a/packages/lib/src/components/buttons/SearchButtonComponenet.wc.svelte b/packages/lib/src/components/buttons/SearchButtonComponenet.wc.svelte
@@ -1,11 +1,6 @@
 <svelte:options
     customElement={{
         tag: "lens-search-button",
-        props: {
-            measures: { type: "Object" },
-            disabled: { type: "Boolean" },
-            backendConfig: { type: "Object" },
-        },
     }}
 />
 

diff --git a/packages/lib/src/components/catalogue/AutoCompleteComponent.svelte b/packages/lib/src/components/catalogue/AutoCompleteComponent.svelte
@@ -139,6 +139,7 @@
             name: element.name,
             key: element.key,
             type: "type" in element && element.type,
+            system: "system" in element ? element.system : "",
             values: [
                 {
                     value: inputItem.key,

diff --git a/packages/lib/src/components/catalogue/Catalogue.wc.svelte b/packages/lib/src/components/catalogue/Catalogue.wc.svelte
@@ -1,12 +1,6 @@
 <svelte:options
     customElement={{
         tag: "lens-catalogue",
-        props: {
-            treeData: { type: "Object" },
-            texts: { type: "Object" },
-            toggle: { type: "Object" },
-            open: { type: "Boolean" },
-        },
     }}
 />
 

diff --git a/packages/lib/src/components/catalogue/SingleSelectItemComponent.svelte b/packages/lib/src/components/catalogue/SingleSelectItemComponent.svelte
@@ -15,10 +15,14 @@
         key: element.key,
         name: element.name,
         type: "type" in element && element.type,
+        system: "system" in element ? element.system : "",
         values: [
             {
                 name: criterion.name,
-                value: 'aggregatedValue' in criterion ? criterion.aggregatedValue : criterion.key,
+                value:
+                    "aggregatedValue" in criterion
+                        ? criterion.aggregatedValue
+                        : criterion.key,
                 queryBindId: queryBindId,
             },
         ],
@@ -30,6 +34,4 @@
         {criterion.name}
     </span>
 </div>
-<QueryAddButtonComponent
-    queryItem={queryItem}
-/>
+<QueryAddButtonComponent {queryItem} />
diff --git a/packages/lib/src/components/results/ChartComponent.wc.svelte b/packages/lib/src/components/results/ChartComponent.wc.svelte
@@ -1,13 +1,6 @@
 <svelte:options
     customElement={{
         tag: "lens-chart",
-        props: {
-            chartData: { type: "Object" },
-            backgroundColor: { type: "Array" },
-            backgroundHoverColor: { type: "Array" },
-            perSite: { type: "Boolean" },
-            groupRange: { type: "Number" },
-        },
     }}
 />
 

diff --git a/packages/lib/src/components/results/ResultSummaryComponent.wc.svelte b/packages/lib/src/components/results/ResultSummaryComponent.wc.svelte
@@ -1,9 +1,6 @@
 <svelte:options
     customElement={{
         tag: "lens-result-summary",
-        props: {
-            resultSummaryDataTypes: { type: "Array" },
-        },
     }}
 />
 

diff --git a/packages/lib/src/components/results/ResultTableComponent.wc.svelte b/packages/lib/src/components/results/ResultTableComponent.wc.svelte
@@ -1,7 +1,6 @@
 <svelte:options
     customElement={{
         tag: "lens-result-table",
-        props: { pageSize: { type: "Number" } },
     }}
 />
 

diff --git a/packages/lib/src/components/search-bar/SearchBarComponent.wc.svelte b/packages/lib/src/components/search-bar/SearchBarComponent.wc.svelte
@@ -1,10 +1,6 @@
 <svelte:options
     customElement={{
         tag: "lens-search-bar",
-        props: {
-            treeData: { type: "Object" },
-            noMatchesFoundMessage: { type: "String" },
-        },
     }}
 />