Merge pull request #129 from samply/feature/components-use-properties…

…-instead-of-attributes feat(parameters): change attributes to parameters
samply · Sep 26, 2024 · b33c288 · b33c288
2 parents d9fd9c9 + a39a1d3
commit b33c288
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 74 deletions.
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/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/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/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" },
-        },
     }}
 />
 

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