Skip to content

Commit fa5ae80

Browse files
sgreenburysgreenbury
committed
Initial download tab
1 parent 05af840 commit fa5ae80

File tree

4 files changed

+165
-17
lines changed

4 files changed

+165
-17
lines changed

‎popgetter-browser/web/src/routes/DownloadMode.svelte

+151-12
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import { SplitComponent } from "@uatp/components/two_column_layout";
44
import {
55
duckdbBackend,
6-
map,
76
previewedMetricsList,
87
previewMetricMap,
98
rustBackend,
@@ -27,14 +26,23 @@
2726
CloseButton,
2827
TabItem,
2928
Tabs,
29+
Label,
30+
Input,
31+
Dropdown,
32+
DropdownItem,
33+
ButtonGroup,
3034
} from "flowbite-svelte";
3135
3236
import { sineIn } from "svelte/easing";
3337
import SelectedMetrics from "./SelectedMetrics.svelte";
3438
import PreviewedMetrics from "./PreviewedMetrics.svelte";
3539
import { onMount } from "svelte";
3640
import TilesMap from "./TilesMap.svelte";
41+
import { ChevronDownOutline } from "flowbite-svelte-icons";
3742
43+
const outputFormats: string[] = ["geojson", "csv", "geojsonseq"];
44+
let selectedOutputFormat: string = "csv";
45+
let bboxValue: string = "";
3846
let hidden8 = false;
3947
let transitionParams = {
4048
y: 320,
@@ -125,6 +133,16 @@
125133
return;
126134
}
127135
136+
function getPopgetterCli(): string {
137+
let ids = $selectedMetricsList
138+
.map((record: {}) => `--id ${record.metric_id}`)
139+
.join(" ");
140+
let outputFormatStr = "--output-format " + selectedOutputFormat;
141+
let bboxStr = bboxValue === "" ? "" : "--bbox " + bboxValue;
142+
143+
return ["popgetter", "data", ids, outputFormatStr, bboxStr].join(" ");
144+
}
145+
128146
// TODO: consider if can be async to enable preview to be generated here
129147
function add(record: {}) {
130148
console.log(record);
@@ -161,16 +179,24 @@
161179
}
162180
}
163181
164-
// Using bbox
165-
let bbox = [];
166-
function updateBoundingBox() {
167-
const bounds = $map.getBounds();
168-
bbox = [
169-
bounds.getWest(),
170-
bounds.getSouth(),
171-
bounds.getEast(),
172-
bounds.getNorth(),
173-
];
182+
// Assign bounding box from map
183+
// TODO: fix this, currently returns not initialized
184+
let mapInstance;
185+
function updateBoundingBox(): string {
186+
if (mapInstance) {
187+
const bounds = mapInstance.getBounds().toArray();
188+
console.log("Bounding Box:", bounds);
189+
let bbox = [
190+
bounds.getWest(),
191+
bounds.getSouth(),
192+
bounds.getEast(),
193+
bounds.getNorth(),
194+
];
195+
return bbox.map((el) => Number(el.toFixed(6)).toString()).join(",");
196+
} else {
197+
console.error("Map instance is not yet initialized.");
198+
return "";
199+
}
174200
}
175201
176202
async function download(dataRequestSpec: {}): Promise<Array<{}>> {
@@ -356,7 +382,7 @@
356382
<!-- Map previews downloaded metrics -->
357383

358384
<div slot="map">
359-
<TilesMap></TilesMap>
385+
<TilesMap bind:mapInstance></TilesMap>
360386

361387
<div>
362388
<Drawer
@@ -391,6 +417,119 @@
391417
</p>
392418
<PreviewedMetrics></PreviewedMetrics>
393419
</TabItem>
420+
<!-- TODO: complete adding interface for advanced search -->
421+
<TabItem
422+
title="Advanced Search"
423+
on:click={() => setPreviewedMetrics()}
424+
>
425+
<!-- Search -->
426+
<section
427+
id="query-section"
428+
style="text-align: left; margin-top: 2.5%; margin-bottom: 5%; "
429+
>
430+
<Search bind:searchTerm on:input={debouncedHandleInput} />
431+
</section>
432+
433+
<!-- TODO: convert table for search results into component -->
434+
<section id="<results-table">
435+
<Table>
436+
<TableHead>
437+
<!-- <TableHeadCell>ID</TableHeadCell> -->
438+
<TableHeadCell>Name</TableHeadCell>
439+
<TableHeadCell>Year</TableHeadCell>
440+
<TableHeadCell>Selected metrics</TableHeadCell>
441+
</TableHead>
442+
<TableBody tableBodyClass="divide-y">
443+
{#each items as item}
444+
<TableBodyRow>
445+
<!-- <TableBodyCell>{item.metric_id.slice(0, 8)}</TableBodyCell> -->
446+
<TableBodyCell
447+
class="max-w-md whitespace-normal break-words border-b border-gray-200 px-2 py-2"
448+
>{item.metric_human_readable_name}</TableBodyCell
449+
>
450+
<TableBodyCell
451+
>{item.source_data_release_collection_period_start.slice(
452+
0,
453+
4,
454+
)}</TableBodyCell
455+
>
456+
<TableBodyCell>
457+
<Button color="light" on:click={() => add(item)}
458+
>Add</Button
459+
>
460+
</TableBodyCell>
461+
</TableBodyRow>
462+
{/each}
463+
</TableBody>
464+
</Table>
465+
</section>
466+
</TabItem>
467+
<TabItem title="Download" on:click={() => setPreviewedMetrics()}>
468+
<div class="pt-8">
469+
<div
470+
style="text-align: left; margin-top: 0.5%; margin-bottom: 0.5%; "
471+
>
472+
<Label class="space-y-2"
473+
><span>Bounding Box (left, bottom, right, top)</span></Label
474+
>
475+
<ButtonGroup class="w-full">
476+
<Input
477+
id="bbox"
478+
type="text"
479+
placeholder=""
480+
bind:value={bboxValue}
481+
/>
482+
<Button
483+
color="light"
484+
on:click={() => updateBoundingBox()}
485+
class="w-80">Get from map</Button
486+
>
487+
</ButtonGroup>
488+
</div>
489+
<div
490+
style="text-align: left; margin-top: 0.5%; margin-bottom: 0.5%; "
491+
>
492+
<Label class="space-y-2">
493+
Output format:
494+
<Button color="light">
495+
{selectedOutputFormat}
496+
<ChevronDownOutline class="ms-2 h-6 w-6" />
497+
</Button>
498+
<Dropdown>
499+
{#each outputFormats as outputFormat}
500+
<DropdownItem
501+
on:click={() => (selectedOutputFormat = outputFormat)}
502+
>{outputFormat}
503+
</DropdownItem>
504+
{/each}
505+
</Dropdown>
506+
</Label>
507+
</div>
508+
</div>
509+
<div
510+
style="text-align: left; margin-top: 0.5%; margin-bottom: 0.5%; "
511+
>
512+
<Label class="space-y-2">
513+
Popgetter CLI command
514+
<ButtonGroup class="w-full">
515+
<Input
516+
id="popgetter-data-cli"
517+
readonly
518+
value={getPopgetterCli()}
519+
/>
520+
<Button
521+
color="light"
522+
data-copy-to-clipboard-target="popgetter-data-cli"
523+
on:click={() => {
524+
console.log(getPopgetterCli());
525+
navigator.clipboard.writeText(getPopgetterCli());
526+
}}>Copy</Button
527+
>
528+
</ButtonGroup>
529+
</Label>
530+
</div>
531+
<!-- TODO: add download button -->
532+
</TabItem>
394533
</Tabs>
395534
</Drawer>
396535
</div>

‎popgetter-browser/web/src/routes/LevelsMode.svelte

+3-1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@
2323
$mode = { kind: "download" };
2424
}
2525
26+
let mapInstance;
27+
2628
onMount(async () => {
2729
try {
2830
levelsList = levels[$selectedCountry + ""];
@@ -64,6 +66,6 @@
6466
</div>
6567
</div>
6668
<div slot="map">
67-
<TilesMap></TilesMap>
69+
<TilesMap bind:mapInstance></TilesMap>
6870
</div>
6971
</SplitComponent>

‎popgetter-browser/web/src/routes/TilesMap.svelte

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<script>
1+
<script lang="ts">
22
import {
33
MapLibre,
44
VectorTileSource,
@@ -11,12 +11,18 @@
1111
// Reactive subscription to get the updates to URL value
1212
let showMap = true;
1313
let currentUrl;
14+
export let mapInstance;
15+
1416
// Subscribe to the store and toggle `showMap` to trigger a re-render
1517
tileUrl.subscribe((value) => {
1618
currentUrl = value;
1719
showMap = false;
1820
setTimeout(() => (showMap = true), 0);
1921
});
22+
23+
function handleMapLoad(event) {
24+
mapInstance = event.detail.map;
25+
}
2026
</script>
2127

2228
{#if showMap}
@@ -25,6 +31,8 @@
2531
standardControls
2632
center={[0.0, 53.0]}
2733
zoom={2}
34+
bind:this={mapInstance}
35+
on:load={handleMapLoad}
2836
>
2937
<VectorTileSource url={currentUrl} promoteId={"GEO_ID"}>
3038
<FillLayer

‎popgetter-browser/web/src/routes/TitleMode.svelte

+2-3
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,14 @@
1212
import { ChevronRightOutline } from "flowbite-svelte-icons";
1313
import { onMount } from "svelte";
1414
import Subtitle from "./Subtitle.svelte";
15-
1615
import TilesMap from "./TilesMap.svelte";
1716
1817
function setCountryAndLevelsList(country: String) {
1918
$selectedCountry = country;
2019
console.log("Selected country: ", $selectedCountry);
2120
$mode = { kind: "level" };
2221
}
23-
22+
let mapInstance;
2423
onMount(async () => {
2524
$previewMetricMapColors = [];
2625
$selectedMetricsList = [];
@@ -59,6 +58,6 @@
5958
</div>
6059
</div>
6160
<div slot="map">
62-
<TilesMap></TilesMap>
61+
<TilesMap bind:mapInstance></TilesMap>
6362
</div>
6463
</SplitComponent>

0 commit comments

Comments
 (0)