253 lines
13 KiB
TypeScript
253 lines
13 KiB
TypeScript
import type { FeatureCollection, Geometry, Position } from "geojson";
|
|
import type { GeoJSONSource, Map as MapLibreMap, PaddingOptions, LayerSpecification } from "maplibre-gl";
|
|
import type { InvestigationOverlay } from "../api/investigation-presentation";
|
|
import { createScadaAnalysisCollection, createEmptyScadaAnalysisCollection, scadaAnalysisLayers, SCADA_ANALYSIS_SOURCE_ID, type ScadaAnalysisItem } from "./scada-analysis";
|
|
import { MAP_STYLE_TOKENS } from "./map-colors";
|
|
import { createPresentationHighlightLayers, presentationFeatureSource, PRESENTATION_FEATURE_SOURCE } from "./presentation-highlight-style";
|
|
|
|
export const INVESTIGATION_HIGHLIGHT_SOURCE = "investigation-presentation-highlights";
|
|
export const INVESTIGATION_OVERLAY_SOURCE = "investigation-presentation-overlay";
|
|
const empty = (): FeatureCollection => ({ type: "FeatureCollection", features: [] });
|
|
type OverlayOpacity = "fill-opacity" | "circle-opacity" | "circle-stroke-opacity" | "heatmap-opacity" | "line-opacity";
|
|
type OverlayOpacityValues = Partial<Record<OverlayOpacity, number>>;
|
|
|
|
const layers: LayerSpecification[] = [
|
|
{ id: `${INVESTIGATION_OVERLAY_SOURCE}-fill`, source: INVESTIGATION_OVERLAY_SOURCE, type: "fill", filter: ["==", ["geometry-type"], "Polygon"], paint: { "fill-color": MAP_STYLE_TOKENS.state.risk, "fill-opacity": 0.16 } },
|
|
{ id: `${INVESTIGATION_OVERLAY_SOURCE}-outline`, source: INVESTIGATION_OVERLAY_SOURCE, type: "line", filter: ["==", ["geometry-type"], "Polygon"], paint: { "line-color": MAP_STYLE_TOKENS.state.risk, "line-width": 2, "line-dasharray": [2, 2] } },
|
|
{ id: `${INVESTIGATION_OVERLAY_SOURCE}-line`, source: INVESTIGATION_OVERLAY_SOURCE, type: "line", filter: ["==", ["geometry-type"], "LineString"], paint: { "line-color": MAP_STYLE_TOKENS.supply.waterQuality, "line-width": 3 } },
|
|
{ id: `${INVESTIGATION_OVERLAY_SOURCE}-point`, source: INVESTIGATION_OVERLAY_SOURCE, type: "circle", filter: ["==", ["geometry-type"], "Point"], paint: { "circle-color": MAP_STYLE_TOKENS.supply.waterQuality, "circle-radius": 6, "circle-stroke-color": MAP_STYLE_TOKENS.canvas.casing, "circle-stroke-width": 2 } },
|
|
{ id: `${INVESTIGATION_OVERLAY_SOURCE}-heatmap`, source: INVESTIGATION_OVERLAY_SOURCE, type: "heatmap", paint: {
|
|
"heatmap-weight": ["coalesce", ["get", "weight"], 1], "heatmap-radius": 28, "heatmap-opacity": 0.65,
|
|
"heatmap-color": ["interpolate", ["linear"], ["heatmap-density"], 0, "rgba(15,118,110,0)", 0.3, MAP_STYLE_TOKENS.supply.waterQuality, 0.65, MAP_STYLE_TOKENS.state.risk, 1, MAP_STYLE_TOKENS.state.incident]
|
|
} }
|
|
];
|
|
|
|
export function investigationGeometryCoordinates(geometry: Geometry): Position[] {
|
|
if (geometry.type === "GeometryCollection") return geometry.geometries.flatMap(investigationGeometryCoordinates);
|
|
const flatten = (value: unknown): Position[] => {
|
|
if (!Array.isArray(value)) return [];
|
|
if (typeof value[0] === "number" && typeof value[1] === "number") return [value as Position];
|
|
return value.flatMap(flatten);
|
|
};
|
|
return flatten(geometry.coordinates);
|
|
}
|
|
|
|
/** All sources and animation state are owned by the currently followed investigation. */
|
|
export class InvestigationMapPresentation {
|
|
private pulseFrame: number | null = null;
|
|
private pulseDeadline: number | null = null;
|
|
private highlighted = empty();
|
|
private overlay: InvestigationOverlay | null = null;
|
|
private overlayFrame: number | null = null;
|
|
private overlayHideTimer: number | null = null;
|
|
|
|
private readonly highlightSource: string;
|
|
private readonly overlaySource: string;
|
|
private readonly scadaSource: string;
|
|
private readonly scadaLayers: LayerSpecification[];
|
|
private readonly layers: LayerSpecification[];
|
|
|
|
constructor(private getMap: () => MapLibreMap | null, private getPadding: () => PaddingOptions, scope = "investigation") {
|
|
this.highlightSource = `${scope}-presentation-highlights`;
|
|
this.overlaySource = `${scope}-presentation-overlay`;
|
|
this.scadaSource = `${scope}-presentation-scada`;
|
|
this.scadaLayers = scadaAnalysisLayers.map((layer) => ({ ...layer, id: layer.id.replace(SCADA_ANALYSIS_SOURCE_ID, this.scadaSource), source: this.scadaSource } as LayerSpecification));
|
|
this.layers = layers.map((layer) => ({ ...layer,
|
|
id: layer.id.replace(INVESTIGATION_HIGHLIGHT_SOURCE, this.highlightSource).replace(INVESTIGATION_OVERLAY_SOURCE, this.overlaySource),
|
|
source: String("source" in layer ? layer.source : "").replace(INVESTIGATION_HIGHLIGHT_SOURCE, this.highlightSource).replace(INVESTIGATION_OVERLAY_SOURCE, this.overlaySource)
|
|
} as LayerSpecification));
|
|
}
|
|
|
|
private ensure() {
|
|
const map = this.getMap();
|
|
if (!map) throw new Error("MAP_NOT_READY");
|
|
for (const id of [this.highlightSource, this.overlaySource]) {
|
|
if (!map.getSource(id)) map.addSource(id, { type: "geojson", data: empty() });
|
|
}
|
|
for (const layer of this.layers) {
|
|
if (!map.getLayer(layer.id)) map.addLayer({ ...layer, layout: { visibility: "none" } });
|
|
}
|
|
return map;
|
|
}
|
|
|
|
highlight(data: FeatureCollection, pulse: boolean, fit: boolean) {
|
|
this.stopPulse();
|
|
const nativeLayers = this.getMap()?.getStyle?.()?.layers;
|
|
for (const value of new Set(data.features.map((feature) => feature.properties?.[PRESENTATION_FEATURE_SOURCE]))) {
|
|
const source = presentationFeatureSource(value);
|
|
if (!source) continue;
|
|
for (const layer of createPresentationHighlightLayers(source, this.highlightSource, nativeLayers)) {
|
|
const index = this.layers.findIndex((current) => current.id === layer.id);
|
|
if (index < 0) this.layers.push(layer);
|
|
else {
|
|
this.layers[index] = layer;
|
|
const map = this.getMap();
|
|
if (map?.getLayer(layer.id) && "paint" in layer)
|
|
for (const [property, value] of Object.entries(layer.paint ?? {}))
|
|
map.setPaintProperty(layer.id, property as Parameters<MapLibreMap["setPaintProperty"]>[1], value);
|
|
}
|
|
}
|
|
}
|
|
const map = this.ensure();
|
|
this.highlighted = data;
|
|
(map.getSource(this.highlightSource) as GeoJSONSource).setData(data);
|
|
this.visibility(this.highlightSource, data.features.length > 0);
|
|
if (fit) this.fit(data);
|
|
if (pulse && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
|
const animate = (time: number) => {
|
|
const wave = (Math.sin(time / 300) + 1) / 2;
|
|
this.highlightOpacity(0.45 + wave * 0.55);
|
|
this.pulseFrame = requestAnimationFrame(animate);
|
|
};
|
|
this.pulseFrame = requestAnimationFrame(animate);
|
|
this.pulseDeadline = window.setTimeout(() => this.stopPulse(), 2500);
|
|
}
|
|
}
|
|
|
|
stopPulse() {
|
|
if (this.pulseFrame !== null) cancelAnimationFrame(this.pulseFrame);
|
|
this.pulseFrame = null;
|
|
if (this.pulseDeadline !== null) window.clearTimeout(this.pulseDeadline);
|
|
this.pulseDeadline = null;
|
|
this.highlightOpacity(1);
|
|
}
|
|
|
|
private highlightOpacity(opacity: number) {
|
|
const map = this.getMap();
|
|
for (const layer of this.layers) {
|
|
if (!("source" in layer) || layer.source !== this.highlightSource || !map?.getLayer(layer.id)) continue;
|
|
if (layer.type === "line") map.setPaintProperty(layer.id, "line-opacity", opacity);
|
|
else if (layer.type === "circle") map.setPaintProperty(layer.id, "circle-stroke-opacity", opacity);
|
|
}
|
|
}
|
|
|
|
clearHighlights() {
|
|
this.stopPulse();
|
|
this.highlighted = empty();
|
|
(this.getMap()?.getSource(this.highlightSource) as GeoJSONSource | undefined)?.setData(empty());
|
|
this.visibility(this.highlightSource, false);
|
|
}
|
|
|
|
setOverlay(overlay: InvestigationOverlay, fit: boolean) {
|
|
const map = this.ensure();
|
|
this.overlay = overlay;
|
|
(map.getSource(this.overlaySource) as GeoJSONSource).setData(overlay.data);
|
|
this.showOverlay(overlay.visible);
|
|
if (fit) this.fit(overlay.data);
|
|
}
|
|
|
|
private cancelOverlayTransition() {
|
|
if (this.overlayFrame !== null) cancelAnimationFrame(this.overlayFrame);
|
|
if (this.overlayHideTimer !== null) window.clearTimeout(this.overlayHideTimer);
|
|
this.overlayFrame = null;
|
|
this.overlayHideTimer = null;
|
|
}
|
|
|
|
showOverlay(visible: boolean) {
|
|
this.cancelOverlayTransition();
|
|
if (!this.overlay) return;
|
|
this.overlay = { ...this.overlay, visible };
|
|
const map = this.getMap();
|
|
if (!map) return;
|
|
const duration = window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 180;
|
|
const entering: Array<{ id: string; opacity: OverlayOpacityValues }> = [];
|
|
const hiding: string[] = [];
|
|
const paint = (id: string, opacity: OverlayOpacityValues, shown: boolean, milliseconds: number) => {
|
|
if (!map.getLayer(id)) return;
|
|
for (const [property, value] of Object.entries(opacity) as Array<[OverlayOpacity, number]>) {
|
|
map.setPaintProperty(id, `${property}-transition` as const, { duration: milliseconds, delay: 0 });
|
|
map.setPaintProperty(id, property, shown ? value : 0);
|
|
}
|
|
};
|
|
for (const layer of this.layers.filter((item) => "source" in item && item.source === this.overlaySource)) {
|
|
if (!map.getLayer(layer.id)) continue;
|
|
const opacity: OverlayOpacityValues = layer.type === "fill" ? { "fill-opacity": 0.16 }
|
|
: layer.type === "circle" ? { "circle-opacity": 1, "circle-stroke-opacity": 1 }
|
|
: layer.type === "heatmap" ? { "heatmap-opacity": 0.65 } : { "line-opacity": 1 };
|
|
const shown = visible && (this.overlay.mode === "heatmap") === (layer.type === "heatmap");
|
|
const wasHidden = map.getLayoutProperty(layer.id, "visibility") === "none";
|
|
if (shown) {
|
|
if (duration && wasHidden) {
|
|
paint(layer.id, opacity, false, 0);
|
|
map.setLayoutProperty(layer.id, "visibility", "visible");
|
|
entering.push({ id: layer.id, opacity });
|
|
} else {
|
|
map.setLayoutProperty(layer.id, "visibility", "visible");
|
|
paint(layer.id, opacity, true, duration);
|
|
}
|
|
} else {
|
|
paint(layer.id, opacity, false, duration);
|
|
if (!duration || wasHidden) map.setLayoutProperty(layer.id, "visibility", "none");
|
|
else hiding.push(layer.id);
|
|
}
|
|
}
|
|
if (entering.length) this.overlayFrame = requestAnimationFrame(() => {
|
|
this.overlayFrame = null;
|
|
for (const layer of entering) paint(layer.id, layer.opacity, true, duration);
|
|
});
|
|
if (hiding.length) this.overlayHideTimer = window.setTimeout(() => {
|
|
this.overlayHideTimer = null;
|
|
for (const id of hiding) if (map.getLayer(id)) map.setLayoutProperty(id, "visibility", "none");
|
|
}, duration);
|
|
}
|
|
|
|
clearOverlay(id?: string) {
|
|
if (id && id !== this.overlay?.overlay_id) return;
|
|
this.cancelOverlayTransition();
|
|
this.overlay = null;
|
|
(this.getMap()?.getSource(this.overlaySource) as GeoJSONSource | undefined)?.setData(empty());
|
|
this.visibility(this.overlaySource, false);
|
|
}
|
|
|
|
fitOverlay() { if (this.overlay) this.fit(this.overlay.data); }
|
|
fitHighlights() { this.fit(this.highlighted); }
|
|
|
|
private visibility(source: string, visible: boolean) {
|
|
const map = this.getMap();
|
|
for (const layer of this.layers.filter((item) => "source" in item && item.source === source)) {
|
|
if (map?.getLayer(layer.id)) map.setLayoutProperty(layer.id, "visibility", visible ? "visible" : "none");
|
|
}
|
|
}
|
|
|
|
private fit(data: FeatureCollection) {
|
|
const positions = data.features.flatMap((feature) => feature.geometry ? investigationGeometryCoordinates(feature.geometry) : []);
|
|
if (!positions.length) return;
|
|
const bounds = positions.reduce((value, point) => [Math.min(value[0], point[0]), Math.min(value[1], point[1]), Math.max(value[2], point[0]), Math.max(value[3], point[1])], [Infinity, Infinity, -Infinity, -Infinity]);
|
|
const map = this.getMap();
|
|
if (!map) return;
|
|
map.stop();
|
|
map.fitBounds([[bounds[0], bounds[1]], [bounds[2], bounds[3]]], {
|
|
padding: this.getPadding(), maxZoom: 18, linear: true,
|
|
duration: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 450,
|
|
easing: (progress: number) => 1 - (1 - progress) ** 3
|
|
});
|
|
}
|
|
|
|
renderScadaAnalysis(data: FeatureCollection, items: ScadaAnalysisItem[], fit = true) {
|
|
const map = this.getMap();
|
|
if (!map) throw new Error("MAP_NOT_READY");
|
|
const next = createScadaAnalysisCollection(data, items);
|
|
if (!next.result.rendered_ids.length) throw new Error("SCADA_FEATURES_NOT_FOUND");
|
|
if (!map.getSource(this.scadaSource)) map.addSource(this.scadaSource, { type: "geojson", data: createEmptyScadaAnalysisCollection() });
|
|
for (const layer of this.scadaLayers) if (!map.getLayer(layer.id)) map.addLayer(layer);
|
|
(map.getSource(this.scadaSource) as GeoJSONSource).setData(next.collection);
|
|
if (fit) this.fit(next.collection);
|
|
return { ...next.result, fitted: fit };
|
|
}
|
|
|
|
clearScadaAnalysis() {
|
|
(this.getMap()?.getSource(this.scadaSource) as GeoJSONSource | undefined)?.setData(createEmptyScadaAnalysisCollection());
|
|
return { cleared: true as const };
|
|
}
|
|
|
|
clear() { this.clearHighlights(); this.clearOverlay(); this.clearScadaAnalysis(); }
|
|
destroy() {
|
|
this.cancelOverlayTransition();
|
|
this.stopPulse();
|
|
const map = this.getMap();
|
|
if (!map) return;
|
|
for (const layer of [...this.layers, ...this.scadaLayers].reverse()) if (map.getLayer(layer.id)) map.removeLayer(layer.id);
|
|
for (const id of [this.highlightSource, this.overlaySource, this.scadaSource]) if (map.getSource(id)) map.removeSource(id);
|
|
}
|
|
}
|