Skip to content

Commit 917af4d

Browse files
fengelniederhammerfengelniederhammer
committed
984 wip
1 parent 50de90d commit 917af4d

25 files changed

+264
-270
lines changed

‎website/src/components/pageStateSelectors/ApplyFilterButton.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import type { Dispatch, SetStateAction } from 'react';
2+
13
import type { WithClassName } from '../../types/WithClassName.ts';
24
import type { PageStateHandler } from '../../views/pageStateHandlers/PageStateHandler.ts';
35

@@ -8,15 +10,22 @@ const MAX_URL_LENGTH = 2000;
810
export function ApplyFilterButton<PageState extends object>({
911
pageStateHandler,
1012
newPageState,
13+
setPageState,
1114
className = '',
1215
}: WithClassName<{
1316
pageStateHandler: PageStateHandler<PageState>;
1417
newPageState: PageState;
18+
setPageState: Dispatch<SetStateAction<PageState>>;
1519
}>) {
1620
const url = pageStateHandler.toUrl(newPageState);
1721
const fullUrl = `${window.location.origin}${url}`;
1822
const urlTooLong = fullUrl.length > MAX_URL_LENGTH;
1923

24+
const applyFilters = () => {
25+
window.history.pushState(undefined, '', url);
26+
setPageState(newPageState);
27+
};
28+
2029
return urlTooLong ? (
2130
<>
2231
<span role='button' className={`btn btn-primary btn-disabled ${className}`}>
@@ -30,8 +39,8 @@ export function ApplyFilterButton<PageState extends object>({
3039
</div>
3140
</>
3241
) : (
33-
<a role='button' href={url} className={`btn btn-primary ${className}`}>
42+
<button type='button' onClick={applyFilters} className={`btn btn-primary ${className}`}>
3443
Apply filters
35-
</a>
44+
</button>
3645
);
3746
}

‎website/src/components/pageStateSelectors/CompareSideBySidePageStateSelector.tsx‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,38 @@
1-
import { useMemo, useState } from 'react';
1+
import { type Dispatch, type SetStateAction, useEffect, useMemo, useState } from 'react';
22

33
import { ApplyFilterButton } from './ApplyFilterButton.tsx';
44
import { BaselineSelector } from './BaselineSelector.tsx';
55
import { SelectorHeadline } from './SelectorHeadline.tsx';
66
import { makeVariantFilterConfig, VariantSelector } from './VariantSelector.tsx';
7-
import type { OrganismsConfig } from '../../config.ts';
87
import { Inset } from '../../styles/Inset.tsx';
8+
import { BaseView } from '../../views/BaseView.ts';
9+
import type { OrganismConstants } from '../../views/OrganismConstants.ts';
910
import type { CompareSideBySideData } from '../../views/View.ts';
10-
import { type OrganismViewKey, Routing } from '../../views/routing.ts';
11-
import type { compareSideBySideViewKey } from '../../views/viewKeys.ts';
11+
import { CompareSideBySideStateHandler } from '../../views/pageStateHandlers/CompareSideBySidePageStateHandler.ts';
1212

1313
export function CompareSideBySidePageStateSelector({
14+
view,
1415
filterId,
15-
initialPageState,
16-
organismViewKey,
17-
organismsConfig,
16+
pageState,
17+
setPageState,
1818
enableAdvancedQueryFilter,
1919
}: {
20+
view: BaseView<CompareSideBySideData, OrganismConstants, CompareSideBySideStateHandler>;
2021
filterId: number;
21-
initialPageState: CompareSideBySideData;
22-
organismViewKey: OrganismViewKey & `${string}.${typeof compareSideBySideViewKey}`;
23-
organismsConfig: OrganismsConfig;
22+
pageState: CompareSideBySideData;
23+
setPageState: Dispatch<SetStateAction<CompareSideBySideData>>;
2424
enableAdvancedQueryFilter: boolean;
2525
}) {
26-
const view = useMemo(() => new Routing(organismsConfig), [organismsConfig]).getOrganismView(organismViewKey);
26+
const [draftPageState, setDraftPageState] = useState(pageState);
27+
useEffect(() => setDraftPageState(pageState), [pageState]);
28+
2729
const variantFilterConfig = useMemo(
2830
() => makeVariantFilterConfig(view.organismConstants),
2931
[view.organismConstants],
3032
);
31-
const [pageState, setPageState] = useState(initialPageState);
3233

3334
const { filterOfCurrentId, currentLapisFilter } = useMemo(() => {
34-
const filterOfCurrentId = pageState.filters.get(filterId) ?? {
35+
const filterOfCurrentId = draftPageState.filters.get(filterId) ?? {
3536
datasetFilter: {
3637
locationFilters: {},
3738
dateFilters: {},
@@ -47,7 +48,7 @@ export function CompareSideBySidePageStateSelector({
4748
filterOfCurrentId.variantFilter,
4849
),
4950
};
50-
}, [pageState, filterId, view.pageStateHandler]);
51+
}, [draftPageState, filterId, view.pageStateHandler]);
5152

5253
return (
5354
<div className='flex flex-col gap-4 p-2 shadow-lg'>
@@ -60,8 +61,8 @@ export function CompareSideBySidePageStateSelector({
6061
lapisFilter={currentLapisFilter}
6162
datasetFilter={filterOfCurrentId.datasetFilter}
6263
setDatasetFilter={(newDatasetFilter) => {
63-
setPageState((previousState) => {
64-
const updatedFilters = new Map(initialPageState.filters);
64+
setDraftPageState((previousState) => {
65+
const updatedFilters = new Map(pageState.filters);
6566
updatedFilters.set(filterId, {
6667
...filterOfCurrentId,
6768
datasetFilter: newDatasetFilter,
@@ -78,8 +79,8 @@ export function CompareSideBySidePageStateSelector({
7879
<Inset className='p-2'>
7980
<VariantSelector
8081
onVariantFilterChange={(newVariantFilter) => {
81-
setPageState((previousState) => {
82-
const updatedFilters = new Map(initialPageState.filters);
82+
setDraftPageState((previousState) => {
83+
const updatedFilters = new Map(pageState.filters);
8384
updatedFilters.set(filterId, {
8485
...filterOfCurrentId,
8586
variantFilter: newVariantFilter,
@@ -96,7 +97,11 @@ export function CompareSideBySidePageStateSelector({
9697
</div>
9798
</div>
9899
<div className='flex justify-end'>
99-
<ApplyFilterButton pageStateHandler={view.pageStateHandler} newPageState={pageState} />
100+
<ApplyFilterButton
101+
pageStateHandler={view.pageStateHandler}
102+
newPageState={draftPageState}
103+
setPageState={setPageState}
104+
/>
100105
</div>
101106
</div>
102107
);

‎website/src/components/pageStateSelectors/CompareVariantsPageStateSelector.tsx‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,38 @@
1-
import { useMemo, useState } from 'react';
1+
import { type Dispatch, type SetStateAction, useEffect, useMemo, useState } from 'react';
22

33
import { ApplyFilterButton } from './ApplyFilterButton.tsx';
44
import { BaselineSelector } from './BaselineSelector.tsx';
55
import { SelectorHeadline } from './SelectorHeadline.tsx';
66
import { makeVariantFilterConfig } from './VariantSelector.tsx';
77
import { VariantsSelector } from './VariantsSelector.tsx';
8-
import { type OrganismsConfig } from '../../config.ts';
98
import { Inset } from '../../styles/Inset.tsx';
9+
import { GenericCompareVariantsView } from '../../views/BaseView.ts';
10+
import type { OrganismConstants } from '../../views/OrganismConstants.ts';
1011
import type { CompareVariantsData, Id, VariantFilter } from '../../views/View.ts';
11-
import { type OrganismViewKey, Routing } from '../../views/routing.ts';
12-
import type { compareVariantsViewKey } from '../../views/viewKeys.ts';
1312

1413
export function CompareVariantsPageStateSelector({
15-
organismViewKey,
16-
organismsConfig,
17-
initialPageState,
14+
view,
15+
pageState,
16+
setPageState,
1817
enableAdvancedQueryFilter,
1918
}: {
20-
organismViewKey: OrganismViewKey & `${string}.${typeof compareVariantsViewKey}`;
21-
organismsConfig: OrganismsConfig;
22-
initialPageState: CompareVariantsData;
19+
view: GenericCompareVariantsView<OrganismConstants>;
20+
pageState: CompareVariantsData;
21+
setPageState: Dispatch<SetStateAction<CompareVariantsData>>;
2322
enableAdvancedQueryFilter: boolean;
2423
}) {
25-
const view = useMemo(() => new Routing(organismsConfig), [organismsConfig]).getOrganismView(organismViewKey);
26-
const [pageState, setPageState] = useState(initialPageState);
24+
const [draftPageState, setDraftPageState] = useState(pageState);
25+
useEffect(() => setDraftPageState(pageState), [pageState]);
2726

2827
const variantFilterConfigs = useMemo(() => {
2928
return new Map(
30-
pageState.variants.entries().map(([id]) => [id, makeVariantFilterConfig(view.organismConstants)]),
29+
draftPageState.variants.entries().map(([id]) => [id, makeVariantFilterConfig(view.organismConstants)]),
3130
);
32-
}, [pageState.variants, view.organismConstants]);
31+
}, [draftPageState.variants, view.organismConstants]);
3332

3433
const currentLapisFilter = useMemo(() => {
35-
return view.pageStateHandler.datasetFilterToLapisFilter(pageState.datasetFilter);
36-
}, [pageState, view.pageStateHandler]);
34+
return view.pageStateHandler.datasetFilterToLapisFilter(draftPageState.datasetFilter);
35+
}, [draftPageState, view.pageStateHandler]);
3736

3837
return (
3938
<div className='flex flex-col gap-4'>
@@ -43,9 +42,9 @@ export function CompareVariantsPageStateSelector({
4342
<BaselineSelector
4443
baselineFilterConfigs={view.organismConstants.baselineFilterConfigs}
4544
lapisFilter={currentLapisFilter}
46-
datasetFilter={pageState.datasetFilter}
45+
datasetFilter={draftPageState.datasetFilter}
4746
setDatasetFilter={(newDatasetFilter) => {
48-
setPageState((previousState) => ({
47+
setDraftPageState((previousState) => ({
4948
...previousState,
5049
datasetFilter: newDatasetFilter,
5150
}));
@@ -58,10 +57,10 @@ export function CompareVariantsPageStateSelector({
5857
<SelectorHeadline>Variant Filters</SelectorHeadline>
5958
<Inset className='p-2'>
6059
<VariantsSelector
61-
variantFilters={pageState.variants}
60+
variantFilters={draftPageState.variants}
6261
variantFilterConfigs={variantFilterConfigs}
6362
setVariantFilters={(newVariantFilters: Map<Id, VariantFilter>) => {
64-
setPageState((previousState) => ({
63+
setDraftPageState((previousState) => ({
6564
...previousState,
6665
variants: newVariantFilters,
6766
}));
@@ -75,7 +74,8 @@ export function CompareVariantsPageStateSelector({
7574
<ApplyFilterButton
7675
className='w-full'
7776
pageStateHandler={view.pageStateHandler}
78-
newPageState={pageState}
77+
newPageState={draftPageState}
78+
setPageState={setPageState}
7979
/>
8080
</div>
8181
</div>

‎website/src/components/pageStateSelectors/CompareVariantsToBaselineStateSelector.tsx‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,41 @@
1-
import { useMemo, useState } from 'react';
1+
import { type Dispatch, type SetStateAction, useEffect, useMemo, useState } from 'react';
22

33
import { ApplyFilterButton } from './ApplyFilterButton.tsx';
44
import { BaselineSelector } from './BaselineSelector.tsx';
55
import { SelectorHeadline } from './SelectorHeadline.tsx';
66
import { makeVariantFilterConfig, VariantSelector } from './VariantSelector.tsx';
77
import { VariantsSelector } from './VariantsSelector.tsx';
8-
import { type OrganismsConfig } from '../../config.ts';
98
import { Inset } from '../../styles/Inset.tsx';
9+
import { GenericCompareToBaselineView } from '../../views/BaseView.ts';
10+
import type { OrganismConstants } from '../../views/OrganismConstants.ts';
1011
import type { CompareToBaselineData, Id, VariantFilter } from '../../views/View.ts';
11-
import { type OrganismViewKey, Routing } from '../../views/routing.ts';
12-
import { type compareToBaselineViewKey } from '../../views/viewKeys.ts';
1312

1413
export function CompareVariantsToBaselineStateSelector({
15-
organismViewKey,
16-
organismsConfig,
17-
initialPageState,
14+
view,
15+
pageState,
16+
setPageState,
1817
enableAdvancedQueryFilter,
1918
}: {
20-
organismViewKey: OrganismViewKey & `${string}.${typeof compareToBaselineViewKey}`;
21-
organismsConfig: OrganismsConfig;
22-
initialPageState: CompareToBaselineData;
19+
view: GenericCompareToBaselineView<OrganismConstants>;
20+
pageState: CompareToBaselineData;
21+
setPageState: Dispatch<SetStateAction<CompareToBaselineData>>;
2322
enableAdvancedQueryFilter: boolean;
2423
}) {
25-
const view = useMemo(() => new Routing(organismsConfig), [organismsConfig]).getOrganismView(organismViewKey);
26-
const [pageState, setPageState] = useState(initialPageState);
24+
const [draftPageState, setDraftPageState] = useState(pageState);
25+
useEffect(() => setDraftPageState(pageState), [pageState]);
2726

2827
const variantFilterConfig = useMemo(
2928
() => makeVariantFilterConfig(view.organismConstants),
3029
[view.organismConstants],
3130
);
3231

3332
const variantFilterConfigs = useMemo(() => {
34-
return new Map(pageState.variants.entries().map(([id]) => [id, { ...variantFilterConfig }]));
35-
}, [pageState.variants, variantFilterConfig]);
33+
return new Map(draftPageState.variants.entries().map(([id]) => [id, { ...variantFilterConfig }]));
34+
}, [draftPageState.variants, variantFilterConfig]);
3635

3736
const currentLapisFilter = useMemo(() => {
38-
return view.pageStateHandler.baselineFilterToLapisFilter(pageState);
39-
}, [pageState, view.pageStateHandler]);
37+
return view.pageStateHandler.baselineFilterToLapisFilter(draftPageState);
38+
}, [draftPageState, view.pageStateHandler]);
4039

4140
return (
4241
<div className='flex flex-col gap-4'>
@@ -47,9 +46,9 @@ export function CompareVariantsToBaselineStateSelector({
4746
<BaselineSelector
4847
baselineFilterConfigs={view.organismConstants.baselineFilterConfigs}
4948
lapisFilter={currentLapisFilter}
50-
datasetFilter={pageState.datasetFilter}
49+
datasetFilter={draftPageState.datasetFilter}
5150
setDatasetFilter={(newDatasetFilter) => {
52-
setPageState((previousState) => ({
51+
setDraftPageState((previousState) => ({
5352
...previousState,
5453
datasetFilter: newDatasetFilter,
5554
}));
@@ -64,13 +63,13 @@ export function CompareVariantsToBaselineStateSelector({
6463
<Inset className='p-2'>
6564
<VariantSelector
6665
onVariantFilterChange={(newVariantFilter) => {
67-
setPageState((previousState) => ({
66+
setDraftPageState((previousState) => ({
6867
...previousState,
6968
baselineFilter: newVariantFilter,
7069
}));
7170
}}
7271
variantFilterConfig={variantFilterConfig}
73-
variantFilter={pageState.baselineFilter}
72+
variantFilter={draftPageState.baselineFilter}
7473
lapisFilter={currentLapisFilter}
7574
enableAdvancedQueryFilter={enableAdvancedQueryFilter}
7675
/>
@@ -81,10 +80,10 @@ export function CompareVariantsToBaselineStateSelector({
8180
<SelectorHeadline>Variant Filters</SelectorHeadline>
8281
<Inset className='p-2'>
8382
<VariantsSelector
84-
variantFilters={pageState.variants}
83+
variantFilters={draftPageState.variants}
8584
variantFilterConfigs={variantFilterConfigs}
8685
setVariantFilters={(newVariantFilters: Map<Id, VariantFilter>) => {
87-
setPageState((previousState) => ({
86+
setDraftPageState((previousState) => ({
8887
...previousState,
8988
variants: newVariantFilters,
9089
}));
@@ -98,7 +97,8 @@ export function CompareVariantsToBaselineStateSelector({
9897
<ApplyFilterButton
9998
className='w-full'
10099
pageStateHandler={view.pageStateHandler}
101-
newPageState={pageState}
100+
newPageState={draftPageState}
101+
setPageState={setPageState}
102102
/>
103103
</div>
104104
</div>

0 commit comments

Comments
 (0)