Skip to content

WIP: Refactor browse sketch layers #598

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Pete-Y-CS wants to merge 3 commits into
base: main
Choose a base branch
from
Open

WIP: Refactor browse sketch layers #598

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5fbfa7a
Add final inspections if they exist
peteryork-dft Mar 31, 2025
6ec02de
use strict equality
peteryork-dft Apr 14, 2025
3e88248
Begin to share some more code for browse page scheme layers
peteryork-dft Apr 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 17 additions & 19 deletions src/lib/browse/schemes/InterventionLayer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,7 @@
isPolygon,
layerId,
} from "lib/maplibre";
import type {
DataDrivenPropertyValueSpecification,
ExpressionSpecification,
} from "maplibre-gl";
import type { ExpressionSpecification } from "maplibre-gl";
import {
CircleLayer,
FillLayer,
Expand All @@ -20,16 +17,17 @@
LineLayer,
} from "svelte-maplibre";
import type { Schemes } from "types";
import type { SchemeTypeDetails } from "./data";
import InterventionPopup from "./InterventionPopup.svelte";
import type { Writable } from "svelte/store";

export let name: string;
export let description: string;
export let show: boolean;
export let details: SchemeTypeDetails;
export let show: Writable<boolean>;

export let schemesGj: Schemes;
export let filterSchemeText: string;
export let filterInterventionText: string;
export let color: DataDrivenPropertyValueSpecification<string>;

$: gj = addLineStringEndpoints(schemesGj);

Expand All @@ -53,19 +51,19 @@
manageHoverState
eventsIfTopMost
paint={{
"circle-color": color,
"circle-color": details.colour,
"circle-radius": circleRadius,
"circle-opacity": hoverStateFilter(1.0, 0.5),
}}
layout={{
visibility: show ? "visible" : "none",
visibility: $show ? "visible" : "none",
}}
hoverCursor="pointer"
>
<Popup let:props popupClass="border-popup"><p>{props.name}</p></Popup>
<Popup let:props openOn="click" popupClass="border-popup">
<InterventionPopup
{description}
description={details.title}
{props}
{schemesGj}
{filterSchemeText}
Expand All @@ -80,19 +78,19 @@
manageHoverState
eventsIfTopMost
paint={{
"line-color": color,
"line-color": details.colour,
"line-width": lineWidth,
"line-opacity": hoverStateFilter(1.0, 0.5),
}}
layout={{
visibility: show ? "visible" : "none",
visibility: $show ? "visible" : "none",
}}
hoverCursor="pointer"
>
<Popup let:props popupClass="border-popup"><p>{props.name}</p></Popup>
<Popup let:props openOn="click" popupClass="border-popup">
<InterventionPopup
{description}
description={details.title}
{props}
{schemesGj}
{filterSchemeText}
Expand All @@ -110,7 +108,7 @@
"circle-stroke-width": 2.0,
}}
layout={{
visibility: show ? "visible" : "none",
visibility: $show ? "visible" : "none",
}}
/>

Expand All @@ -120,18 +118,18 @@
manageHoverState
eventsIfTopMost
paint={{
"fill-color": color,
"fill-color": details.colour,
"fill-opacity": hoverStateFilter(0.2, 0.5),
}}
layout={{
visibility: show ? "visible" : "none",
visibility: $show ? "visible" : "none",
}}
hoverCursor="pointer"
>
<Popup let:props popupClass="border-popup"><p>{props.name}</p></Popup>
<Popup let:props openOn="click" popupClass="border-popup">
<InterventionPopup
{description}
description={details.title}
{props}
{schemesGj}
{filterSchemeText}
Expand All @@ -143,12 +141,12 @@
{...layerId(`${name}-interventions-polygons-outlines`)}
filter={["all", isPolygon, hideWhileEditing]}
paint={{
"line-color": color,
"line-color": details.colour,
"line-opacity": 0.5,
"line-width": 0.7 * lineWidth,
}}
layout={{
visibility: show ? "visible" : "none",
visibility: $show ? "visible" : "none",
}}
/>
</GeoJSON>
Expand Down
200 changes: 114 additions & 86 deletions src/lib/browse/schemes/SchemesLayer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,38 +13,95 @@
import { constructMatchExpression } from "lib/maplibre";
import type { DataDrivenPropertyValueSpecification } from "maplibre-gl";
import { colorInterventionsBySchema, schemaLegend } from "schemas";
import type { Writable } from "svelte/store";
import LayerControl from "../layers/LayerControl.svelte";
import { showHideLayer } from "../layers/url";
import { atfFundingProgrammes, currentMilestones } from "./colors";
import { importAllLocalSketches, setupSchemes } from "./data";
import {
importAllLocalSketches,
setupSchemes,
type SchemeTypeDetails,
} from "./data";
import Filters from "./Filters.svelte";
import InterventionLayer from "./InterventionLayer.svelte";
import LoadRemoteSchemeData from "./LoadRemoteSchemeData.svelte";
import SchemesLayerControl from "./SchemesLayerControl.svelte";
import {
atfSchemes,
filterAtfInterventionText,
filterAtfSchemeText,
filterFinalInspectionsInterventionText,
filterFinalInspectionsSchemeText,
filterLcwipInterventionText,
filterLcwipSchemeText,
filterLocalInterventionText,
filterLocalSchemeText,
finalInspectionsSchemes,
lcwipSchemes,
localSchemes,
} from "./stores";

let errorMessage = "";

let atfName = "atf_schemes";
let atfTitle = "ATF schemes";
let atfShow = showHideLayer(atfName);
let atfStyle = "fundingProgramme";
$: [atfColor, atfLegend] = pickStyle(atfStyle);
const [atfColour, atfLegend] = pickStyle("fundingProgramme");
let atfDetails: SchemeTypeDetails = {
name: "atf_schemes",
title: "ATF schemes",
style: "fundingProgramme",
colour: atfColour,
legend: atfLegend,
};
const showAtf: Writable<boolean> = showHideLayer("atf_schemes");

$: {
const [atfColour, atfLegend] = pickStyle(atfDetails.style);
atfDetails.colour = atfColour;
atfDetails.legend = atfLegend;
}

const [lcwipColour, lcwipLegend] = pickStyle("fundingProgramme");
let lcwipDetails: SchemeTypeDetails = {
name: "lcwip_schemes",
title: "LCWIP schemes",
style: "fundingProgramme",
colour: lcwipColour,
legend: lcwipLegend,
};
const showLcwip: Writable<boolean> = showHideLayer("lcwip_schemes");

let lcwipName = "lcwip_schemes";
let lcwipTitle = "LCWIP schemes";
let lcwipShow = showHideLayer(lcwipName);
let lcwipStyle = "interventionType";
$: [lcwipColor, lcwipLegend] = pickStyle(lcwipStyle);
$: {
const [lcwipColour, lcwipLegend] = pickStyle(lcwipDetails.style);
lcwipDetails.colour = lcwipColour;
lcwipDetails.legend = lcwipLegend;
}

console.log(atfDetails);
console.log(JSON.stringify(atfDetails));
$: {
console.log(atfSchemes);
console.log($atfSchemes);
console.log(JSON.stringify(atfSchemes))
}

const [finalInspectionsColour, finalInspectionsLegend] =
pickStyle("fundingProgramme");
let finalInspectionsDetails: SchemeTypeDetails = {
name: "finalInspections_schemes",
title: "Final Inspections schemes",
style: "fundingProgramme",
colour: finalInspectionsColour,
legend: finalInspectionsLegend,
};
const showFinalInspections: Writable<boolean> = showHideLayer(
"finalInspections_schemes",
);
$: {
const [finalInspectionsColour, finalInspectionsLegend] = pickStyle(
finalInspectionsDetails.style,
);
finalInspectionsDetails.colour = finalInspectionsColour;
finalInspectionsDetails.legend = finalInspectionsLegend;
}

let localName = "local_schemes";
let localTitle = "Your schemes";
Expand All @@ -53,9 +110,15 @@

function loadMainFile(filename: string, text: string) {
try {
setupSchemes(JSON.parse(text), atfSchemes, lcwipSchemes);
$atfShow = true;
$lcwipShow = true;
setupSchemes(
JSON.parse(text),
atfSchemes,
lcwipSchemes,
finalInspectionsSchemes,
);
$showAtf = true;
$showLcwip = true;
$showFinalInspections = true;
errorMessage = "";
} catch (err) {
errorMessage = `The file you loaded is broken: ${err}`;
Expand Down Expand Up @@ -110,72 +173,30 @@
{/if}

<CheckboxGroup small>
{#if Object.entries($atfSchemes.schemes).length > 0}
<LayerControl name={atfName} title={atfTitle} bind:show={$atfShow}>
<span slot="help">
<p>
<WarningIcon text="Scheme data caveats" />Please note there are data
quality caveats for all scheme data:
</p>
<ul>
{#each $atfSchemes.notes ?? [] as note}
<li><p>{note}</p></li>
{/each}
</ul>
</span>
{#if atfSchemes && finalInspectionsSchemes && lcwipSchemes}
<SchemesLayerControl
details={atfDetails},
show={showAtf},
schemes={atfSchemes},
filterSchemeText={$filterAtfSchemeText},
filterInterventionText={$filterAtfInterventionText},
/>

<div slot="controls" style="border: 1px solid black; padding: 8px;">
<Filters
source="ATF"
bind:schemesGj={$atfSchemes}
bind:filterSchemeText={$filterAtfSchemeText}
bind:filterInterventionText={$filterAtfInterventionText}
/>

<Select
label="Colour interventions"
choices={[
["fundingProgramme", "By funding programme"],
["interventionType", "By intervention type"],
["currentMilestone", "By current milestone"],
]}
bind:value={atfStyle}
/>
<Legend rows={atfLegend} />
</div>
</LayerControl>
{/if}
<SchemesLayerControl
details={finalInspectionsDetails},
show={showFinalInspections},
schemes={finalInspectionsSchemes},
filterSchemeText={$filterFinalInspectionsSchemeText},
filterInterventionText={$filterFinalInspectionsInterventionText},
/>

{#if Object.entries($lcwipSchemes.schemes).length > 0}
<LayerControl name={lcwipName} title={lcwipTitle} bind:show={$lcwipShow}>
<span slot="help">
<p>
<WarningIcon text="Scheme data caveats" />Please note there are data
quality caveats for all scheme data:
</p>
<ul>
{#each $lcwipSchemes.notes ?? [] as note}
<li><p>{note}</p></li>
{/each}
</ul>
</span>

<div slot="controls" style="border: 1px solid black; padding: 8px;">
<Filters
source="LCWIP"
bind:schemesGj={$lcwipSchemes}
bind:filterSchemeText={$filterLcwipSchemeText}
bind:filterInterventionText={$filterLcwipInterventionText}
/>

<Select
label="Colour interventions"
choices={[["interventionType", "By intervention type"]]}
bind:value={lcwipStyle}
/>
<Legend rows={lcwipLegend} />
</div>
</LayerControl>
<SchemesLayerControl
details={lcwipDetails},
show={showLcwip},
schemes={lcwipSchemes},
filterSchemeText={$filterLcwipSchemeText},
filterInterventionText={$filterLcwipInterventionText},
/>
{/if}
</CheckboxGroup>

Expand Down Expand Up @@ -225,30 +246,37 @@

<InterventionLayer
name="atf"
description={atfTitle}
show={$atfShow}
details={atfDetails}
show={showAtf}
schemesGj={$atfSchemes}
filterSchemeText={$filterAtfSchemeText}
filterInterventionText={$filterAtfInterventionText}
color={atfColor}
/>

<InterventionLayer
name="finalInspections"
details={finalInspectionsDetails}
show={showFinalInspections}
schemesGj={$finalInspectionsSchemes}
filterSchemeText={$filterFinalInspectionsSchemeText}
filterInterventionText={$filterFinalInspectionsInterventionText}
/>

<InterventionLayer
name="lcwip"
description={lcwipTitle}
show={$lcwipShow}
details={lcwipDetails}
show={showLcwip}
schemesGj={$lcwipSchemes}
filterSchemeText={$filterLcwipSchemeText}
filterInterventionText={$filterLcwipInterventionText}
color={lcwipColor}
/>

<InterventionLayer
<!-- <InterventionLayer
name="local"
description={localTitle}
show={$localShow}
schemesGj={$localSchemes}
filterSchemeText={$filterLocalSchemeText}
filterInterventionText={$filterLocalInterventionText}
color={localColor}
/>
/> -->
Loading
Loading