feat(store interface): add possibility to access stores from projects

packages/demo/src/AppFragmentDevelopment.svelte

@@ -1,59 +1,47 @@
 <script lang="ts">
+    import { get } from "svelte/store";
   import "../../lib";
+    import type { QueryItem, QueryValue } from "../../lib/src/types/queryData";
+  // import "../../../dist/lib/lens-web-componets";
+  import type { CatalogueText } from "../../lib/src/types/texts";
 
 
   import {
-    patientsMeasure,
-    diagnosisMeasure,
-    specimenMeasure,
-    proceduresMeasure,
-    medicationStatementsMeasure,
+    dktkDiagnosisMeasure,
+    dktkMedicationStatementsMeasure,
+    dktkPatientsMeasure,
+    dktkProceduresMeasure,
+    dktkSpecimenMeasure,
+    dktkHistologyMeasure
   } from "./measures";
 
   let mockCatalogueData = "";
+  let libraryOptions = "";
 
   fetch("catalogues/catalogue-dktk.json")
     .then((response) => response.text())
     .then((data) => {
       mockCatalogueData = data;
     });
 
+  fetch("options.json")
+    .then((response) => response.json())
+    .then((data) => {
+      libraryOptions = data;
+    });
+
   const measures = [
-    patientsMeasure,
-    diagnosisMeasure,
-    specimenMeasure,
-    proceduresMeasure,
-    medicationStatementsMeasure,
+    dktkPatientsMeasure,
+    dktkDiagnosisMeasure,
+    dktkSpecimenMeasure,
+    dktkProceduresMeasure,
+    dktkMedicationStatementsMeasure,
+    dktkHistologyMeasure
   ];
 
-  const cqlHeader = `library Retrieve
-  using FHIR version '4.0.0'
-  include FHIRHelpers version '4.0.0'
-
-  codesystem loinc: 'http://loinc.org'
-
-  context Patient
-
-  DKTK_STRAT_GENDER_STRATIFIER
-
-  DKTK_STRAT_AGE_STRATIFIER
-
-  DKTK_STRAT_DECEASED_STRATIFIER
-
-  DKTK_STRAT_DIAGNOSIS_STRATIFIER
-
-  DKTK_STRAT_SPECIMEN_STRATIFIER
-
-  DKTK_STRAT_PROCEDURE_STRATIFIER
-
-  DKTK_STRAT_MEDICATION_STRATIFIER
-
-  DKTK_STRAT_ENCOUNTER_STRATIFIER
-
-  DKTK_STRAT_DEF_IN_INITIAL_POPULATION
-`;
+  const backendMeasures = `DKTK_STRAT_DEF_IN_INITIAL_POPULATION`;
 
-  const catalogueText = {
+  const catalogueText: CatalogueText = {
     group: "Group",
     collapseButtonTitle: "Collapse Tree",
     expandButtonTitle: "Expand Tree",
@@ -65,15 +53,15 @@
 
   let catalogueopen = false;
 
-  const resultSummaryConfig = [
-    {
-      key: "sites",
-      title: "Sites",
-    },
-    {
-      key: "patients",
-      title: "Patients",
-    },
+  const catalogueKeyToResponseKeyMap = [
+    ["gender", "Gender"],
+    ["age_at_diagnosis", "Age"],
+    ["diagnosis", "diagnosis"],
+    ["medicationStatements", "MedicationType"],
+    ["sample_kind", "sample_kind"],
+    ["therapy_of_tumor", "ProcedureType"],
+    ["75186-7", "75186-7"],
+    // ["encounter", "Encounter"],
   ];
 
   const siteToDefaultCollectionId: string[][] = [
@@ -104,29 +92,30 @@
 
   const uiSiteMap: string[][] = [
     ["berlin", "Berlin"],
+    ["berlin-test", "Berlin"],
     ["bonn", "Bonn"],
     ["dresden", "Dresden"],
     ["essen", "Essen"],
     ["frankfurt", "Frankfurt"],
     ["freiburg", "Freiburg"],
     ["hannover", "Hannover"],
     ["mainz", "Mainz"],
-    ["muenchen-lmu", "München(LMU],"],
-    ["muenchen-tum", "München(TUM],"],
+    ["muenchen-lmu", "München(LMU)"],
+    ["muenchen-tum", "München(TUM)"],
     ["ulm", "Ulm"],
     ["wuerzburg", "Würzburg"],
     ["mannheim", "Mannheim"],
     ["dktk-test", "DKTK-Test"],
     ["hamburg", "Hamburg"],
   ];
 
-  const catalogueKeyToResponseKeyMap = [
-    ["gender", "Gender"],
-    ["age_at_diagnosis", "Age"],
-  ];
+  // VITE_TARGET_ENVIRONMENT should be set by the ci pipeline
+  const backendUrl = (import.meta.env.VITE_TARGET_ENVIRONMENT === "production")
+               ? "https://backend.data.dktk.dkfz.de/prod/"
+               : "https://backend.demo.lens.samply.de/prod/";
 
   const backendConfig = {
-    url: "http://localhost:8080",
+    url: (import.meta.env.PROD) ? backendUrl : "http://localhost:8080",
     backends: [
       "mannheim",
       "freiburg",
@@ -144,26 +133,84 @@
     uiSiteMap: uiSiteMap,
     catalogueKeyToResponseKeyMap: catalogueKeyToResponseKeyMap,
   };
+
+  let dataPasser: any;
+
+  const getQuery = () => {
+    console.log(dataPasser, dataPasser.getQueryAPI());
+    queryStore = dataPasser.getQueryAPI();
+  };
+
+  const getResponse = () => {
+    console.log(dataPasser, dataPasser.getResponseAPI());
+  };
+
+  const getAST = () => {
+    console.log(dataPasser, dataPasser.getAstAPI());
+  };
+
+  const removeItem = (queryObject) => {
+    dataPasser.removeItemFromQuyeryAPI({queryObject});
+    getQuery();
+  };
+
+  const removeValue = (queryItem: QueryItem, value: QueryValue) => {
+    console.log(queryItem, value);
+    dataPasser.removeValueFromQueryAPI({queryItem, value});
+    getQuery();
+  };
+
+  let queryStore: QueryItem[][] = [];
 </script>
 
 <main>
+  <h2>Data Passer</h2>
+  <div class="componentBox">
+    <lens-data-passer bind:this={dataPasser} />
+    <button on:click={() => getQuery()}>Get Query Store</button>
+    <button on:click={() => getResponse()}>Get Response Store</button>
+    <button on:click={() => getAST()}>Get AST</button>
+    {#each queryStore as queryStoreGroup}
+      <div>
+        {#each queryStoreGroup as queryStoreItem}
+          <div>
+            <button on:click={() => removeItem(queryStoreItem)}>
+              remove {queryStoreItem.name}: 
+            </button>
+            <ul>
+              {#each queryStoreItem.values as queryStoreValue}
+                <li>
+                  <button on:click={() => removeValue(queryStoreItem, queryStoreValue)}>
+                    remove {queryStoreValue.name}
+                  </button>
+                </li>
+              {/each}
+            </ul>
+          </div>
+        {/each}
+      </div>
+    {/each}
+  </div>
+
+  <h2>Search bars</h2>
+  <div class="componentBox">
+    <lens-search-bar-multiple
+      noMatchesFoundMessage={"No matches found"}
+    />
+  </div>
+
   <h2>Search Button</h2>
   <div class="componentBox">
     <lens-search-button
       {measures}
       backendConfig={JSON.stringify(backendConfig)}
-      {cqlHeader}
+      {backendMeasures}
     />
   </div>
 
   <h2>Result Summary Bar</h2>
   <div class="componentBox">
-    <lens-result-summary
-      title="Results"
-      resultSummaryDataTypes={JSON.stringify(resultSummaryConfig)}
-      negotiateButton={true}
-      negotiateButtonText="Negotiate with biobanks"
-    />
+    <lens-result-summary />
   </div>
 
   <h2>Result Table</h2>
@@ -175,7 +222,6 @@
   <div class="componentBox">
     <lens-chart
       title="Gender distribution"
-      hintText="Lorem ipsum dolor sit amet consectetur adipisicing elit."
       catalogueGroupCode="gender"
       chartType="pie"
     />
@@ -184,9 +230,7 @@
   <h2>Result Bar Chart</h2>
   <div class="componentBox">
     <lens-chart
-      class="chart1"
       title="Alter bei Erstdiagnose"
-      hintText="Lorem ipsum dolor sit amet consectetur adipisicing elit."
       catalogueGroupCode="age_at_diagnosis"
       chartType="bar"
     />
@@ -195,22 +239,17 @@
   <h2>Catalogue</h2>
   <div class="componentBox">
     <lens-catalogue
-      treeData={mockCatalogueData}
       texts={catalogueText}
       toggle={{ collapsable: true, open: catalogueopen }}
     />
   </div>
 
-  <h2>Search bars</h2>
-  <div class="componentBox">
-    <lens-search-bar-multiple
-      treeData={mockCatalogueData}
-      noMatchesFoundMessage={"No matches found"}
-    />
-  </div>
+
 
   <h2>State display</h2>
   <div class="componentBox">
     <lens-state-display />
   </div>
 </main>
+
+<lens-options options={libraryOptions} catalogueData={mockCatalogueData}/>

packages/lib/index.ts

@@ -10,4 +10,5 @@ export { default as SearchBarMultipleComponent } from './src/components/search-b
 export { default as NegotiateButtonComponent } from './src/components/buttons/NegotiateButtonComponent.wc.svelte'
 export { default as InfoButton } from './src/components/buttons/InfoButtonComponent.wc.svelte'
 export { default as lensOptions } from './src/components/Options.wc.svelte'
+export { default as DataPasser } from './src/components/DataPasser.wc.svelte'
 export { default as ModifiedSearchComponent } from './src/components/informational/ModifiedSearchComponent.wc.svelte'

packages/lib/src/components/DataPasser.wc.svelte

@@ -0,0 +1,98 @@
+<svelte:options
+    customElement={{
+        tag: "lens-data-passer",
+    }}
+/>
+<!-- This component offers an api to pass and get data from the stores -->
+<script lang="ts">
+	import { catalogue } from "../stores/catalogue";
+    import { responseStore } from "../stores/response";
+	import { addStratifier, queryStore, removeItemFromQuery, removeValueFromQuery} from "../stores/query";
+    import { buildAstFromQuery } from "../helpers/ast-transformer";
+	import type { QueryItem, QueryValue } from "../types/queryData";
+    import type { ResponseStore } from "../types/backend";
+    import type { AstTopLayer } from "../types/ast";
+
+    /**
+     * returns the query store to the library user
+     * @returns the query store
+     */
+    export const getQueryAPI = () : QueryItem[][] => {
+        return $queryStore;
+    }
+
+
+    /**
+     * lets the library user add a single stratifier to the query store
+     * @param label the value of the stratifier (e.g. "C31")
+     * @param catalogueGroupCode the code of the group where the stratifier is located (e.g. "diagnosis")
+     * @param queryGroupIndex the index of the query group where the stratifier should be added
+     */
+
+    interface addStratifierToQueryAPIParams {
+        label: string;
+        catalogueGroupCode: string;
+        groupRange?: string;
+        queryGroupIndex?: number;
+    }
+
+    export const addStratifierToQueryAPI = ({label, catalogueGroupCode, groupRange, queryGroupIndex}: addStratifierToQueryAPIParams) : void => {
+        addStratifier({label, catalogueGroupCode, catalogue: $catalogue, queryGroupIndex, groupRange});
+    }
+
+
+    /**
+     * removes a query item from the query store
+     * @param queryObject the query object that should be removed
+     * @param queryGroupIndex the index of the query group where the stratifier should be removed
+    */
+
+    interface RemoveItemFromQueryAPIParams {
+        queryObject: QueryItem;
+        queryGroupIndex?: number;
+    }
+
+    export const removeItemFromQuyeryAPI = ({queryObject, queryGroupIndex = 0}: RemoveItemFromQueryAPIParams): void => {
+        removeItemFromQuery(queryObject, queryGroupIndex);
+    }
+
+
+    /**
+     * removes the value of a query item from the query store
+     * @param queryItem the query item from which the value should be removed from
+     * @param value the value that should be removed
+    */
+
+    interface RemoveValueFromQueryAPIParams {
+        queryItem: QueryItem;
+        value: QueryValue;
+        queryGroupIndex?: number;
+    }
+
+    export const removeValueFromQueryAPI = ({ queryItem, value, queryGroupIndex = 0}: RemoveValueFromQueryAPIParams): void => {
+        const queryObject = {
+            ...queryItem,
+            values: [value]
+        }
+        removeValueFromQuery(queryObject, queryGroupIndex);
+    }
+
+
+    /**
+     * returns the response from the backend to the library user
+     * @returns the response from the backend
+    */
+    export const getResponseAPI = () : ResponseStore => {
+        return $responseStore;
+    }
+
+
+    /**
+     * returns the AST to the library user
+     * @returns the AST
+    */
+    export const getAstAPI = () : AstTopLayer => {
+        return buildAstFromQuery($queryStore);
+    }
+
+</script>