Skip to content

Commit f771fe5

Browse files
JonasKellererJonasKellerer
committed
wip: scroll component into view after loading
1 parent d994d02 commit f771fe5

File tree

2 files changed

+131
-65
lines changed

2 files changed

+131
-65
lines changed

‎website/src/components/LoadingListener.astro‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
interface Props {
3+
count: number;
4+
}
5+
6+
const { count } = Astro.props;
7+
---
8+
9+
<div id='loading-listener'>
10+
<div class='loading-element'>
11+
<div class='flex flex-col gap-2'>
12+
<div>Loading data</div>
13+
<progress class='progress progress-primary w-56' value='0' max={count}></progress>
14+
</div>
15+
</div>
16+
<div class='loading-content hidden'>
17+
<slot />
18+
</div>
19+
</div>
20+
21+
<script define:vars={{ count }} is:inline>
22+
let received = 0;
23+
const element = document.getElementById('loading-listener');
24+
element?.scrollIntoView({ behavior: 'smooth' }); // prevent default scrolling to the wrong position of the anker
25+
const loadingElement = element.querySelector('.loading-element');
26+
const loadingContent = element.querySelector('.loading-content');
27+
const progressBar = element.querySelector('.progress');
28+
29+
function handleFinishedLoading() {
30+
received++;
31+
progressBar.value = received;
32+
33+
setTimeout(() => { // Also show finished loading
34+
if (received === count) {
35+
const hash = window.location.hash.substring(1);
36+
37+
if (hash) {
38+
const target = document.getElementById(hash);
39+
40+
loadingElement.classList.add('hidden');
41+
loadingContent.classList.remove('hidden');
42+
setTimeout(() => { // wait for rendering
43+
target?.scrollIntoView({ behavior: 'smooth' });
44+
}, 100);
45+
46+
if (element) {
47+
element.removeEventListener('gs-component-finished-loading', handleFinishedLoading);
48+
}
49+
} else {
50+
loadingElement.classList.add('hidden');
51+
loadingContent.classList.remove('hidden');
52+
}
53+
}
54+
}, 1000);
55+
}
56+
57+
if (element) {
58+
element.addEventListener('gs-component-finished-loading', handleFinishedLoading);
59+
}
60+
</script>

‎website/src/components/views/analyzeSingleVariant/GenericAnalyzeSingleVariantPage.astro‎

Lines changed: 71 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import GsStatistics from '../../genspectrum/GsStatistics.astro';
2222
import { AnalyzeSingleVariantSelectorFallback } from '../../pageStateSelectors/FallbackElement';
2323
import { SingleVariantPageStateSelector } from '../../pageStateSelectors/SingleVariantPageStateSelector';
2424
import { sanitizeForFilename } from '../compareSideBySide/toDownloadLink';
25+
import LoadingListener from '../../LoadingListener.astro';
2526
2627
type OrganismViewCompareVariant = OrganismWithViewKey<typeof singleVariantViewKey>;
2728
interface Props {
@@ -58,6 +59,9 @@ const downloadLinks = noVariantSelected
5859
downloadFileBasename: `${organism}_${sanitizeForFilename(displayName)}_accessions`,
5960
},
6061
];
62+
63+
const count =
64+
view.organismConstants.aggregatedVisualizations.singleVariant.length + 6 + (subdivisionField !== undefined ? 1 : 0);
6165
---
6266

6367
<SingleVariantOrganismPageLayout view={view} downloadLinks={downloadLinks}>
@@ -71,75 +75,77 @@ const downloadLinks = noVariantSelected
7175
<AnalyzeSingleVariantSelectorFallback slot='fallback' />
7276
</SingleVariantPageStateSelector>
7377

74-
<div class='mx-[8px] flex flex-col gap-y-6' slot='dataDisplay'>
75-
{
76-
noVariantSelected && (
77-
<SelectVariant>
78-
<QuickstartLinks view={view} />
79-
</SelectVariant>
80-
)
81-
}
82-
<GsStatistics numeratorFilter={variantLapisFilter} denominatorFilter={datasetLapisFilter} />
83-
<ComponentsGrid>
84-
<GsPrevalenceOverTime
85-
numeratorFilters={[
86-
{
87-
displayName: '',
88-
lapisFilter: variantLapisFilter,
89-
},
90-
]}
91-
denominatorFilter={datasetLapisFilter}
92-
lapisDateField={view.organismConstants.mainDateField}
93-
granularity={timeGranularity}
94-
pageSize={10}
95-
/>
96-
<GsMutations
78+
<LoadingListener count={count} slot='dataDisplay'>
79+
<div class='mx-[8px] flex flex-col gap-y-6'>
80+
{
81+
noVariantSelected && (
82+
<SelectVariant>
83+
<QuickstartLinks view={view} />
84+
</SelectVariant>
85+
)
86+
}
87+
<GsStatistics numeratorFilter={variantLapisFilter} denominatorFilter={datasetLapisFilter} />
88+
<ComponentsGrid>
89+
<GsPrevalenceOverTime
90+
numeratorFilters={[
91+
{
92+
displayName: '',
93+
lapisFilter: variantLapisFilter,
94+
},
95+
]}
96+
denominatorFilter={datasetLapisFilter}
97+
lapisDateField={view.organismConstants.mainDateField}
98+
granularity={timeGranularity}
99+
pageSize={10}
100+
/>
101+
<GsMutations
102+
lapisFilter={variantLapisFilter}
103+
baselineLapisFilter={datasetLapisFilter}
104+
sequenceType='nucleotide'
105+
pageSize={10}
106+
/>
107+
<GsMutations
108+
lapisFilter={variantLapisFilter}
109+
baselineLapisFilter={datasetLapisFilter}
110+
sequenceType='amino acid'
111+
pageSize={10}
112+
/>
113+
{
114+
subdivisionField !== undefined && (
115+
<GsAggregate
116+
title={subdivisionLabel}
117+
fields={[subdivisionField]}
118+
lapisFilter={variantLapisFilter}
119+
views={[views.table, views.bar]}
120+
pageSize={10}
121+
/>
122+
)
123+
}
124+
125+
{
126+
view.organismConstants.aggregatedVisualizations.singleVariant.map(({ label, fields, views }) => (
127+
<GsAggregate
128+
title={label}
129+
fields={fields}
130+
lapisFilter={variantLapisFilter}
131+
views={views}
132+
pageSize={10}
133+
/>
134+
))
135+
}
136+
</ComponentsGrid>
137+
<GsMutationsOverTime
97138
lapisFilter={variantLapisFilter}
98-
baselineLapisFilter={datasetLapisFilter}
99139
sequenceType='nucleotide'
100-
pageSize={10}
140+
granularity={timeGranularity}
141+
lapisDateField={view.organismConstants.mainDateField}
101142
/>
102-
<GsMutations
143+
<GsMutationsOverTime
103144
lapisFilter={variantLapisFilter}
104-
baselineLapisFilter={datasetLapisFilter}
105145
sequenceType='amino acid'
106-
pageSize={10}
146+
granularity={timeGranularity}
147+
lapisDateField={view.organismConstants.mainDateField}
107148
/>
108-
{
109-
subdivisionField !== undefined && (
110-
<GsAggregate
111-
title={subdivisionLabel}
112-
fields={[subdivisionField]}
113-
lapisFilter={variantLapisFilter}
114-
views={[views.table, views.bar]}
115-
pageSize={10}
116-
/>
117-
)
118-
}
119-
120-
{
121-
view.organismConstants.aggregatedVisualizations.singleVariant.map(({ label, fields, views }) => (
122-
<GsAggregate
123-
title={label}
124-
fields={fields}
125-
lapisFilter={variantLapisFilter}
126-
views={views}
127-
pageSize={10}
128-
/>
129-
))
130-
}
131-
</ComponentsGrid>
132-
<GsMutationsOverTime
133-
lapisFilter={variantLapisFilter}
134-
sequenceType='nucleotide'
135-
granularity={timeGranularity}
136-
lapisDateField={view.organismConstants.mainDateField}
137-
/>
138-
<GsMutationsOverTime
139-
lapisFilter={variantLapisFilter}
140-
sequenceType='amino acid'
141-
granularity={timeGranularity}
142-
lapisDateField={view.organismConstants.mainDateField}
143-
/>
144-
</div>
149+
</div>
150+
</LoadingListener>
145151
</SingleVariantOrganismPageLayout>

0 commit comments

Comments
 (0)