Skip to content

Commit

Permalink
Merge pull request #41 from samply/feature/make-stores-accessible
Browse files Browse the repository at this point in the history
feat(store interface): add possibility to access stores from projects
  • Loading branch information
MatsJohansen87 authored Feb 6, 2024
2 parents eaee5f9 + 7a64714 commit f512e35
Show file tree
Hide file tree
Showing 5 changed files with 311 additions and 74 deletions.
181 changes: 110 additions & 71 deletions packages/demo/src/AppFragmentDevelopment.svelte
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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[][] = [
Expand Down Expand Up @@ -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",
Expand All @@ -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>
Expand All @@ -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"
/>
Expand All @@ -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"
/>
Expand All @@ -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}/>
1 change: 1 addition & 0 deletions packages/lib/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
98 changes: 98 additions & 0 deletions packages/lib/src/components/DataPasser.wc.svelte
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit f512e35

Please sign in to comment.