@tellegen/svelte 0.2.0 → 0.3.0

package/dist/TellegenMap.svelte

@@ -3,7 +3,7 @@
 	import { tick } from 'svelte';
 	import type { Layer, PickingInfo } from '@deck.gl/core';
 	import type { IconLayer, PathLayer, ScatterplotLayer } from '@deck.gl/layers';
-	import type { MapboxOverlay } from '@deck.gl/mapbox';
+	import type { MapLibreOverlay } from '@deck.gl/maplibre';
 	import type { LngLatBoundsLike, Map as MapLibreMap } from 'maplibre-gl';
 	import type { NetworkBranch, NetworkBus } from './api.js';
 	import {
@@ -11,7 +11,7 @@
 		branchWidth,
 		busNeutral,
 		busRadius,
-		lmpColor,
+		priceColor,
 		scalarDomain,
 		sensColor,
 		sensFlatColor,
@@ -29,13 +29,16 @@
 		transformerMarks,
 		type PlacedMultiBus,
 		type PlacedMultiEdge,
-		type TransformerMark
+		type TransformerMark,
+		multiDiagramNetwork
 	} from './multiconductor.js';
 	import { transformerIcon } from './transformer-icon.js';
 	import { foldMapBounds } from './map-bounds.js';
 	import { getAppState, getController } from './context.svelte.js';
 	import { displayFmt, fmt, rgbaCss } from './format.js';
+	import { getPanelLayout } from './panels.svelte.js';
 	import type { RGBA } from './colors.js';
+	import DiagramCanvas from './components/DiagramCanvas.svelte';
 
 	let {
 		onbusclick,
@@ -59,6 +62,47 @@
 
 	const app = getAppState();
 	const ctrl = getController();
+	const panels = getPanelLayout();
+	const diagramCase = $derived(app.studyView ? null : (app.active ?? app.activeLocal));
+	const diagramMulti = $derived(
+		!app.studyView && app.activeMulti?.coordsKind !== 'geographic' ? app.activeMulti : null
+	);
+	const multiNetwork = $derived(
+		diagramMulti?.view
+			? multiDiagramNetwork(diagramMulti.id, diagramMulti.label, diagramMulti.view)
+			: null
+	);
+	const displayedNetwork = $derived(app.studyView?.network ?? diagramCase?.network);
+	const diagramNetwork = $derived(
+		multiNetwork ?? (displayedNetwork?.coordinate_space === 'diagram' ? displayedNetwork : null)
+	);
+	const diagramCaseId = $derived(
+		app.studyView?.caseId ?? diagramMulti?.id ?? diagramCase?.id ?? 'diagram'
+	);
+	function selectDiagramBus(busId: number) {
+		if (diagramMulti?.view) {
+			const bus = diagramMulti.view.buses[busId];
+			if (bus) onmultibusclick(diagramMulti.id, bus.id);
+			return;
+		}
+		if (app.studyView) {
+			app.selectedBranch = null;
+			app.selectedBus = busId;
+		} else if (app.activeLocal) onlocalbusclick(diagramCaseId, busId);
+		else onbusclick(diagramCaseId, busId);
+	}
+	function selectDiagramBranch(branchId: number) {
+		if (diagramMulti?.view) {
+			const edge = diagramMulti.view.edges[branchId];
+			if (edge) onmultiedgeclick?.(diagramMulti.id, edge.id);
+			return;
+		}
+		if (app.studyView) {
+			app.selectedBus = null;
+			app.selectedBranch = branchId;
+		} else if (app.activeLocal) onlocalbranchclick?.(diagramCaseId, branchId);
+		else onbranchclick?.(diagramCaseId, branchId);
+	}
 
 	const STYLE = 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json';
 	const CUE_MARGIN_PX = 64;
@@ -66,7 +110,7 @@
 	const BRANCH_FOCUS_MAX_ZOOM = 9.5;
 
 	let map = $state.raw<MapLibreMap | null>(null);
-	let overlay = $state.raw<MapboxOverlay | null>(null);
+	let overlay = $state.raw<MapLibreOverlay | null>(null);
 	// Bumped to remount the map after a WebGL context is lost and cannot be
 	// repainted in place. See initMap's context-loss handling.
 	let mapGen = $state(0);
@@ -85,7 +129,7 @@
 	let layerCtors = $state.raw<LayerCtors | null>(null);
 
 	interface CaseDisplay {
-		lmp: Map<number, number>;
+		prices: Map<number, number>;
 		scalar: Map<number, number>;
 		scalarLo: number;
 		scalarHi: number;
@@ -93,7 +137,7 @@
 		scalarLabel: string;
 		scalarUnit: string;
 		loading: Map<number, number>;
-		mode: 'lmp' | 'sens' | 'preview';
+		mode: 'price' | 'sens' | 'preview';
 		sens: Map<number, number>;
 		sensDomain: SensitivityDomain | null;
 		preview: Map<number, number>;
@@ -106,7 +150,7 @@
 	type SolvableCase = CaseState | LocalCase;
 
 	// Everything the accessors need, rebuilt when any case's data moves. The
-	// LMP scale normalizes per network: each case is an islanded market, so
+	// The LMP scale normalizes per network: each case is an islanded network, so
 	// within network structure beats cross network color comparability (the
 	// panel legend and tooltips carry the actual numbers). Preview values
 	// shift individual buses without rescaling.
@@ -114,8 +158,8 @@
 		const active = app.active ?? app.activeLocal;
 		const selectedBus = app.selectedBus;
 		const selectedBranch = app.selectedBranch;
-		// The active case's column for the live selection: the ∂LMP/∂d column at the
-		// selected bus, or the ∂LMP/∂rating column at the selected branch. Both are
+		// The active case's column for the live selection: the price-demand column at the
+		// selected bus, or the price-rating column at the selected branch. Both are
 		// bus-keyed value maps, so the color pipeline below is target-agnostic.
 		const activeSensitivity =
 			active &&
@@ -125,18 +169,18 @@
 				: null;
 		const activeDeltas = active ? caseDeltas(active) : {};
 		const activeRatings = active ? caseRatings(active) : {};
-		// Engine first-order LMP preview (Study.preview): predicted per-bus ΔLMP for
+		// Engine first order preview (Study.preview): predicted per-bus LMP change for
 		// the live drag, scoped to this case + selection target. Preferred over the JS
 		// gradient shift when present; the gradient path stays for server and browser
 		// fallbacks.
 		const enginePreview =
 			active &&
-			app.previewLmp &&
-			app.previewLmp.caseId === active.id &&
-			('bus' in app.previewLmp.target
-				? app.previewLmp.target.bus === selectedBus
-				: app.previewLmp.target.branch === selectedBranch)
-				? app.previewLmp.delta
+			app.previewPrices &&
+			app.previewPrices.caseId === active.id &&
+			('bus' in app.previewPrices.target
+				? app.previewPrices.target.bus === selectedBus
+				: app.previewPrices.target.branch === selectedBranch)
+				? app.previewPrices.delta
 				: null;
 		const previewStep =
 			active && activeSensitivity
@@ -153,13 +197,13 @@
 		const perCase = new Map<string, CaseDisplay>();
 		const addCase = (c: CaseState | LocalCase) => {
 			if (!c.network || !c.solution) return;
-			const lmp = new Map<number, number>();
-			for (const e of c.solution.lmp) lmp.set(e.bus, e.usd_per_mwh);
+			const prices = new Map<number, number>();
+			for (const e of c.solution.prices) prices.set(e.bus, e.value);
 			// Resolve the active display mode against what this case can show, falling
-			// back to LMP when the chosen mode doesn't apply (e.g. |V| under DC OPF).
+			// back to LMPs when the chosen mode doesn't apply (e.g. |V| under DC OPF).
 			const meta = displayMetaFor(c);
 			const activeMeta = meta.find((o) => o.mode === app.displayMode) ?? meta[0] ?? null;
-			const scalarMode = activeMeta?.mode ?? 'lmp';
+			const scalarMode = activeMeta?.mode ?? 'price';
 			const seriesValues = displaySeriesFor(c, scalarMode);
 			const scalar = new Map<number, number>();
 			for (const e of seriesValues) scalar.set(e.bus, e.value);
@@ -175,10 +219,10 @@
 			let domain: SensitivityDomain | null = null;
 			const isActive = c === active;
 			if (isActive && enginePreview) {
-				// Engine preview owns the LMP shift: add the predicted ΔLMP per bus.
-				for (const [bus, dlmp] of enginePreview) {
-					preview.set(bus, dlmp);
-					lmp.set(bus, (lmp.get(bus) ?? 0) + dlmp);
+				// Engine preview owns the LMP shift.
+				for (const [bus, deltaPrice] of enginePreview) {
+					preview.set(bus, deltaPrice);
+					prices.set(bus, (prices.get(bus) ?? 0) + deltaPrice);
 				}
 			}
 			if (isActive && activeSensitivity) {
@@ -190,9 +234,9 @@
 				if (!enginePreview && previewStep !== 0) {
 					// Fallback first order preview: shift LMPs along the gradient.
 					for (const v of activeSensitivity.values) {
-						const dlmp = v.value * previewStep;
-						preview.set(v.bus, dlmp);
-						lmp.set(v.bus, (lmp.get(v.bus) ?? 0) + dlmp);
+						const deltaPrice = v.value * previewStep;
+						preview.set(v.bus, deltaPrice);
+						prices.set(v.bus, (prices.get(v.bus) ?? 0) + deltaPrice);
 					}
 				}
 			}
@@ -203,16 +247,15 @@
 				previewDomain &&
 				(app.previewActive || c.solving || enginePreview || Math.abs(previewStep) >= 0.25)
 			);
-			// The sensitivity and demand-preview overlays are price-space fields (∂LMP/∂d
-			// and the ΔLMP preview). They only paint the map under the LMP display mode;
+			// The sensitivity and demand preview overlays are LMP fields. They only paint the map under the price display mode;
 			// under angle or |V| the map stays on the chosen scalar and the sensitivity
 			// shows in the side panel, so selecting a bus never silently overrides the
 			// angle/|V| coloring with the price ramp.
-			const sensEligible = scalarMode === 'lmp';
+			const sensEligible = scalarMode === 'price';
 			// While a sensitivity is still loading for the selected bus, stay in sens
-			// mode (renders neutral, not the prior LMP palette) so the node colors
+			// mode (renders neutral, not the prior price palette) so the node colors
 			// don't flash orange->purple between the old and new selection.
-			const mode: 'lmp' | 'sens' | 'preview' =
+			const mode: 'price' | 'sens' | 'preview' =
 				sensEligible && showPreview
 					? 'preview'
 					: sensEligible &&
@@ -221,15 +264,15 @@
 						  (domain || app.sensitivityLoading) &&
 						  !previewing
 						? 'sens'
-						: 'lmp';
+						: 'price';
 			perCase.set(c.id, {
-				lmp,
+				prices,
 				scalar,
 				scalarLo,
 				scalarHi,
 				scalarMode,
 				scalarLabel: activeMeta?.label ?? 'LMP',
-				scalarUnit: activeMeta?.unit ?? '$/MWh',
+				scalarUnit: activeMeta?.unit ?? 'objective units/MW',
 				loading,
 				mode,
 				sens,
@@ -266,7 +309,7 @@
 				return sensColor((d.preview.get(bus.id) ?? 0) / d.previewDomain.scale);
 			}
 			const mid = (d.scalarLo + d.scalarHi) / 2;
-			return lmpColor(((d.scalar.get(bus.id) ?? mid) - d.scalarLo) / (d.scalarHi - d.scalarLo));
+			return priceColor(((d.scalar.get(bus.id) ?? mid) - d.scalarLo) / (d.scalarHi - d.scalarLo));
 		};
 	}
 
@@ -282,34 +325,38 @@
 	// click handler must not treat those clicks as "empty map" and clear the selection.
 	function isSelectableLayer(layerId: string | undefined): boolean {
 		return Boolean(
+			layerId?.startsWith('study-') ||
 			layerId?.startsWith('buses-') ||
-				layerId?.startsWith('local-buses-') ||
-				layerId?.startsWith('branches-') ||
-				layerId?.startsWith('local-branches-') ||
-				layerId?.startsWith('multi-buses-') ||
-				layerId?.startsWith('multi-edges-')
+			layerId?.startsWith('local-buses-') ||
+			layerId?.startsWith('branches-') ||
+			layerId?.startsWith('local-branches-') ||
+			layerId?.startsWith('multi-buses-') ||
+			layerId?.startsWith('multi-edges-')
 		);
 	}
 
+	function displayedGeometry(caseId: string) {
+		if (app.studyView) return app.studyView.caseId === caseId ? app.studyView.network : null;
+		const local = app.localCases.find((c) => c.id === caseId);
+		return app.byId(caseId)?.network ?? local?.view ?? local?.network ?? null;
+	}
 	const selectedBusCue = $derived.by(() => {
 		const busId = app.selectedBus;
-		const c = app.active ?? app.activeLocal;
-		if (!c || busId === null) return null;
-		const buses =
-			app.active?.network?.buses ?? app.activeLocal?.network?.buses ?? app.activeLocal?.view?.buses ?? [];
-		const bus = buses.find((b) => b.id === busId);
-		return bus ? { key: `${c.id}-${bus.id}`, id: bus.id, lon: bus.lon, lat: bus.lat } : null;
+		const caseId = app.studyView?.caseId ?? app.active?.id ?? app.activeLocal?.id;
+		if (!caseId || busId === null) return null;
+		const bus = displayedGeometry(caseId)?.buses.find((b) => b.id === busId);
+		return bus
+			? { key: `${app.studyView?.id ?? caseId}-${bus.id}`, id: bus.id, lon: bus.lon, lat: bus.lat }
+			: null;
 	});
 	const selectedBranchCue = $derived.by(() => {
 		const branchId = app.selectedBranch;
-		const c = app.active ?? app.activeLocal;
-		if (!c || branchId === null) return null;
-		const branches =
-			c instanceof CaseState ? c.network?.branches : (c.view?.branches ?? c.network?.branches);
-		const branch = branches?.find((b) => b.id === branchId);
+		const caseId = app.studyView?.caseId ?? app.active?.id ?? app.activeLocal?.id;
+		if (!caseId || branchId === null) return null;
+		const branch = displayedGeometry(caseId)?.branches.find((b) => b.id === branchId);
 		const path = branch?.path.filter(([lon, lat]) => Number.isFinite(lon) && Number.isFinite(lat));
 		return branch && path && path.length >= 2
-			? { key: `${c.id}-${branch.id}`, caseId: c.id, branchId: branch.id, path }
+			? { key: `${app.studyView?.id ?? caseId}-${branch.id}`, caseId, branchId: branch.id, path }
 			: null;
 	});
 	let selectedCueEl = $state.raw<HTMLDivElement | null>(null);
@@ -317,6 +364,7 @@
 	let selectedBranchHaloPath = $state.raw<SVGPathElement | null>(null);
 	let selectedBranchLinePath = $state.raw<SVGPathElement | null>(null);
 	let handledFrameSeq = 0;
+	let handledCameraSeq = 0;
 
 	// The selected multiconductor bus and its incident edges, whose per-conductor
 	// strands and terminal stack the detail overlay draws in screen space.
@@ -492,18 +540,23 @@
 		});
 	}
 
-	/** Camera padding that keeps the framed subject clear of the panel chrome.
-	 * The branch variant also clears the rating readout on the panel's lower edge. */
+	/** Camera framing reserves the dock columns and the active compact drawer. */
 	function framePadding(width: number, height: number, kind: 'case' | 'branch') {
-		if (width <= 760) {
-			// bottom follows the sheet; capped so a fully open sheet still leaves a band to fit into
-			const clearance = kind === 'branch' ? 16 : 28;
-			const bottom = Math.min(app.sheetInset + clearance, Math.round(height * 0.55));
-			return { top: app.headerInset + 8, left: 24, right: 24, bottom };
+		const clearance = kind === 'branch' ? 16 : 28;
+		if (panels.compact) {
+			return {
+				top: panels.top + 8,
+				left: 24,
+				right: 24,
+				bottom: Math.min(app.sheetInset + clearance, Math.round(height * 0.6))
+			};
 		}
-		return kind === 'branch'
-			? { top: 106, left: 388, right: 76, bottom: 80 }
-			: { top: 96, left: 380, right: 60, bottom: 64 };
+		return {
+			top: panels.top + 16,
+			left: Math.min(panels.dockWidth('left') + 44, width * 0.34),
+			right: Math.min(panels.dockWidth('right') + 44, width * 0.34),
+			bottom: 80
+		};
 	}
 
 	function branchBounds(path: [number, number][]): LngLatBoundsLike | null {
@@ -512,8 +565,7 @@
 
 	function prefersReducedMotion(): boolean {
 		return (
-			typeof window !== 'undefined' &&
-			window.matchMedia('(prefers-reduced-motion: reduce)').matches
+			typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches
 		);
 	}
 
@@ -521,25 +573,9 @@
 		return typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches;
 	}
 
-	// Compact chrome anchoring. maplibre's bottom-right controls sit over the map,
-	// so the sheet would bury them; they ride above it instead. Under
-	// CHROME_MIN_BAND_PX of map left they drop out rather than climb into the
-	// header — at that point the sheet covers what they annotate.
-	const CHROME_MIN_BAND_PX = 132;
-
-	/** How far the sheet can push the chrome up before it would reach the header. */
-	const chromeLiftCap = $derived(
-		Math.max(0, app.viewportHeight - app.headerInset - CHROME_MIN_BAND_PX)
-	);
-	const chromeInset = $derived(
-		app.compactLayout ? Math.min(app.sheetInset, chromeLiftCap) : 0
-	);
-	const chromeVisible = $derived(!app.compactLayout || app.sheetInset <= chromeLiftCap);
-
-	/** Fly to the selected branch; true when a camera move started. */
-	function focusSelectedBranch(): boolean {
-		if (!map || !selectedBranchCue) return false;
-		const bounds = branchBounds(selectedBranchCue.path);
+	function focusGeometry(points: [number, number][], settle: () => void): boolean {
+		if (!map) return false;
+		const bounds = branchBounds(points);
 		if (!bounds) return false;
 		const { clientWidth, clientHeight } = map.getContainer();
 		const camera = map.cameraForBounds(bounds, {
@@ -547,6 +583,7 @@
 			maxZoom: Math.min(map.getZoom() + 2, BRANCH_FOCUS_MAX_ZOOM)
 		});
 		if (!camera?.center) return false;
+		map.once('moveend', settle);
 		map.easeTo({
 			center: camera.center,
 			zoom: camera.zoom ?? map.getZoom(),
@@ -580,6 +617,21 @@
 	function tooltip(info: PickingInfo): { html: string } | null {
 		const { object } = info;
 		if (!object) return null;
+		if (app.studyView && info.layer?.id.startsWith('study-')) {
+			const view = app.studyView.solution;
+			const id = Number((object as { id: number }).id);
+			if (info.layer.id === 'study-branches') {
+				const flow = view?.flows?.find((f) => f.branch === id);
+				return {
+					html: `<b>branch ${id}</b><br>saved state: ${esc(app.studyView.label)}${flow ? `<br>P from ${flow.pf.toFixed(3)} MW, loading ${(100 * flow.loading).toFixed(1)}%` : ''}`
+				};
+			}
+			const p = view?.lmp?.find((v) => v.bus === id),
+				v = view?.vm?.find((v) => v.bus === id);
+			return {
+				html: `<b>bus ${id}</b><br>saved state: ${esc(app.studyView.label)}${p ? `<br>LMP ${p.value.toFixed(4)}` : ''}${v ? `<br>voltage ${v.value.toFixed(5)} pu` : ''}`
+			};
+		}
 		if (info.layer?.id.startsWith('local-subs-')) {
 			// PowerWorld .pwd substation: display data only, position inferred from the diagram.
 			// The name is free text from a dropped file, so escape it; the number
@@ -587,7 +639,7 @@
 			const s = object as { number: number; name: string };
 			const named = s.name ? ` ${esc(s.name)}` : '';
 			return {
-				html: `<div class="tt"><b>substation ${Number(s.number)}</b>${named}<br><span style="opacity:0.6">.pwd diagram &#8901; approx. position</span></div>`
+				html: `<div class="tt"><b>substation ${Number(s.number)}</b>${named}<br><span style="opacity:0.6">.pwd diagram, approximate position</span></div>`
 			};
 		}
 		const layerId = info.layer?.id;
@@ -627,7 +679,7 @@
 					<span style="opacity:0.6">local file</span></div>`
 			};
 		}
-		const lmp = d?.lmp.get(bus.id);
+		const price = d?.prices.get(bus.id);
 		const scalar = d?.scalar.get(bus.id);
 		const sens = d?.mode === 'sens' ? d.sens.get(bus.id) : undefined;
 		const preview = d?.mode === 'preview' ? d.preview.get(bus.id) : undefined;
@@ -639,19 +691,19 @@
 		const sensRow =
 			sens === undefined
 				? ''
-				: `<br>&part;LMP/&part;d ${sens >= 0 ? '+' : ''}${sens.toExponential(2)}`;
+				: `<br>&part;price/&part;d ${sens >= 0 ? '+' : ''}${sens.toExponential(2)}`;
 		const previewRow =
 			preview === undefined
 				? ''
-				: `<br>&Delta;LMP ${preview >= 0 ? '+' : ''}${preview.toExponential(2)} $/MWh`;
+				: `<br>&Delta; LMP ${preview >= 0 ? '+' : ''}${preview.toExponential(2)} objective units/MW`;
 		const localRow =
 			c instanceof CaseState ? '' : '<br><span style="opacity:0.6">local file</span>';
 		const scalarRow =
-			!d || d.scalarMode === 'lmp'
-				? `LMP ${lmp === undefined ? '&mdash;' : fmt.format(lmp)} $/MWh`
+			!d || d.scalarMode === 'price'
+				? `LMP ${price === undefined ? '&mdash;' : fmt.format(price)} objective units/MW`
 				: `${d.scalarLabel} ${
 						scalar === undefined ? '&mdash;' : displayFmt(d.scalarMode, scalar)
-					} ${d.scalarUnit}<br>LMP ${lmp === undefined ? '&mdash;' : fmt.format(lmp)} $/MWh`;
+					} ${d.scalarUnit}<br>LMP ${price === undefined ? '&mdash;' : fmt.format(price)} objective units/MW`;
 		return {
 			html: `<div class="tt"><b>bus ${bus.id}</b>
 				${scalarRow}<br>
@@ -660,14 +712,17 @@
 	}
 
 	async function loadMapModules() {
-		const [maplibre, mapbox, layers] = await Promise.all([
+		const [maplibre, deckMap, layers, worker] = await Promise.all([
 			import('maplibre-gl'),
-			import('@deck.gl/mapbox'),
-			import('@deck.gl/layers')
+			import('@deck.gl/maplibre'),
+			import('@deck.gl/layers'),
+			import('maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url')
 		]);
+		// Bundle the worker with its shared imports and configure it before creating a map.
+		maplibre.setWorkerUrl(worker.default);
 		return {
-			maplibregl: maplibre.default,
-			MapboxOverlay: mapbox.MapboxOverlay,
+			maplibregl: maplibre,
+			MapLibreOverlay: deckMap.MapLibreOverlay,
 			PathLayer: layers.PathLayer,
 			ScatterplotLayer: layers.ScatterplotLayer,
 			IconLayer: layers.IconLayer
@@ -682,9 +737,9 @@
 	// memory and tab pressure, and one context survives that far better; the
 	// deck layers also inherit maplibre's 4096 canvas clamp. The flat positron
 	// basemap writes no depth, so the overlay always draws on top.
-	function buildOverlay(MapboxOverlay: MapModules['MapboxOverlay']): MapboxOverlay {
+	function buildOverlay(MapLibreOverlay: MapModules['MapLibreOverlay']): MapLibreOverlay {
 		const touch = coarsePointer();
-		return new MapboxOverlay({
+		return new MapLibreOverlay({
 			interleaved: true,
 			layers: [],
 			parameters: {
@@ -707,7 +762,7 @@
 		let cleanup = () => {};
 		let cancelled = false;
 		void loadMapModules()
-			.then(({ maplibregl, MapboxOverlay, PathLayer, ScatterplotLayer, IconLayer }) => {
+			.then(({ maplibregl, MapLibreOverlay, PathLayer, ScatterplotLayer, IconLayer }) => {
 				if (cancelled) return;
 				layerCtors = { PathLayer, ScatterplotLayer, IconLayer };
 				const m = new maplibregl.Map({
@@ -718,7 +773,7 @@
 					canvasContextAttributes: { antialias: true },
 					attributionControl: { compact: true }
 				});
-				const o = buildOverlay(MapboxOverlay);
+				const o = buildOverlay(MapLibreOverlay);
 				m.addControl(o);
 				m.on('click', (e) => {
 					if (app.placingId) onplacecase(e.lngLat.lng, e.lngLat.lat);
@@ -743,6 +798,16 @@
 					if (document.visibilityState === 'visible') repaint();
 				};
 				const syncCues = () => scheduleCueSync();
+				const saveCamera = () => {
+					const center = m.getCenter();
+					app.camera = {
+						center: [center.lng, center.lat],
+						zoom: m.getZoom(),
+						bearing: m.getBearing(),
+						pitch: m.getPitch()
+					};
+				};
+				m.on('moveend', saveCamera);
 				let rebuildTimer: ReturnType<typeof setTimeout> | null = null;
 				const clearRebuild = () => {
 					if (rebuildTimer !== null) {
@@ -797,7 +862,9 @@
 				// (from the case load) can fire before the async map import finishes and
 				// be lost; re-issuing it here ensures the first view is the active case,
 				// not the default world view. A remount opens at the default view too.
-				app.requestFrame(app.activeCaseId ?? app.activeLocalId ?? 'all');
+				if (mapGen > 0 && app.camera) m.jumpTo(app.camera);
+				else if (app.cameraSeq === handledCameraSeq)
+					app.requestFrame(app.activeCaseId ?? app.activeLocalId ?? 'all');
 				if (mapGen > 0) {
 					// This is a rebuilt map. Once it has held a live context without
 					// another loss, zero the budget so the cap only ever catches a tight
@@ -838,6 +905,74 @@
 		if (!overlay || !layerCtors) return;
 		const { PathLayer, ScatterplotLayer, IconLayer } = layerCtors;
 		const layers: Layer[] = [];
+		const study = app.studyView;
+		if (study) {
+			const s = study.solution;
+			const mode = app.displayMode;
+			const series =
+				mode === 'angle'
+					? (s?.va ?? [])
+					: mode === 'voltage'
+						? (s?.vm ??
+							(s?.w ?? []).map((v) => ({
+								...v,
+								value: Math.sqrt(Math.max(0, v.value))
+							})))
+						: (s?.lmp ?? []);
+			const values = new Map(series.map((v) => [v.bus, v.value]));
+			const domain = scalarDomain(
+				mode,
+				series.map((v) => v.value)
+			);
+			const flows = new Map((s?.flows ?? []).map((f) => [f.branch, f.loading]));
+			layers.push(
+				new PathLayer<NetworkBranch>({
+					id: 'study-branches',
+					data: study.network.branches,
+					getPath: (b) => b.path,
+					getColor: (b) => branchColor(flows.get(b.id) ?? 0, b.status === 1),
+					getWidth: (b) => branchWidth(flows.get(b.id) ?? 0),
+					widthUnits: 'pixels',
+					widthMinPixels: 1.5,
+					pickable: true,
+					onClick: (info: PickingInfo) => {
+						const branch = info.object as NetworkBranch | undefined;
+						if (!branch) return false;
+						app.selectedBus = null;
+						app.selectedBranch = branch.id;
+						return true;
+					},
+					updateTriggers: { getColor: [study], getWidth: [study] }
+				}),
+				new ScatterplotLayer<NetworkBus>({
+					id: 'study-buses',
+					data: study.network.buses,
+					getPosition: (b) => [b.lon, b.lat],
+					getRadius: (b) => busRadius(Math.max(b.demand_mw, b.gen_mw)),
+					radiusUnits: 'pixels',
+					getFillColor: (b) => {
+						const value = values.get(b.id);
+						return value === undefined
+							? [110, 115, 120, 200]
+							: priceColor((value - domain.lo) / Math.max(domain.hi - domain.lo, 1e-12));
+					},
+					pickable: true,
+					stroked: true,
+					getLineColor: [46, 42, 34, 110],
+					lineWidthUnits: 'pixels',
+					onClick: (info: PickingInfo) => {
+						const bus = info.object as NetworkBus | undefined;
+						if (!bus) return false;
+						app.selectedBranch = null;
+						app.selectedBus = bus.id;
+						return true;
+					},
+					updateTriggers: { getFillColor: [study, mode] }
+				})
+			);
+			overlay.setProps({ layers });
+			return;
+		}
 		for (const c of app.cases) {
 			if (!c.network) continue;
 			const d = display.get(c.id);
@@ -847,7 +982,7 @@
 					data: c.network.branches,
 					getPath: (b) => b.path,
 					// The selected branch draws in the selection blue of the bus halo cue,
-					// wider, so the ∂LMP/∂rating source line reads at a glance.
+					// wider, so the price-rating source line reads at a glance.
 					getColor: (b) =>
 						c.id === app.activeCaseId && b.id === app.selectedBranch
 							? [47, 111, 187, 255]
@@ -983,7 +1118,12 @@
 			}
 			if (c.substations) {
 				layers.push(
-					new ScatterplotLayer<{ number: number; name: string; lon: number; lat: number }>({
+					new ScatterplotLayer<{
+						number: number;
+						name: string;
+						lon: number;
+						lat: number;
+					}>({
 						id: `local-subs-${c.id}`,
 						data: c.substations.points,
 						getPosition: (s) => [s.lon, s.lat],
@@ -1007,7 +1147,7 @@
 		// kind and buses badged by attachment role. Selecting a bus fans its
 		// incident conductors and expands its terminal stack in the SVG overlay.
 		for (const c of app.multiCases) {
-			if (!c.view) continue;
+			if (c.coordsKind !== 'geographic' || !c.view) continue;
 			const selectedId = c.id === app.activeMultiId ? c.selectedBusId : null;
 			const selectedEdgeId = c.id === app.activeMultiId ? c.selectedEdgeId : null;
 			layers.push(
@@ -1114,7 +1254,7 @@
 	// does not re-run (and re-pan) on every frame of a sheet drag.
 	$effect(() => {
 		const cue = selectedBusCue;
-		if (!map || !cue || !app.compactLayout) return;
+		if (!map || !cue || !app.compactLayout || app.studyView) return;
 		void cue.key;
 		const m = map;
 		const timer = setTimeout(() => {
@@ -1129,6 +1269,7 @@
 	});
 
 	function boundsFor(target: string): LngLatBoundsLike | null {
+		if (app.studyView) return foldMapBounds(app.studyView.network.buses.map((b) => [b.lon, b.lat]));
 		const points: [number, number][] = [];
 		const fold = (pts: { lon: number; lat: number }[]) => {
 			for (const b of pts) points.push([b.lon, b.lat]);
@@ -1143,28 +1284,41 @@
 			if (c.substations) fold(c.substations.points);
 		}
 		for (const c of app.multiCases) {
+			if (c.coordsKind !== 'geographic') continue;
 			if (target !== 'all' && c.id !== target) continue;
 			if (c.view) fold(c.view.buses);
 		}
 		return foldMapBounds(points);
 	}
 
+	$effect(() => {
+		const seq = app.cameraSeq;
+		const snapshot = app.cameraRequest;
+		if (diagramNetwork || !map || !snapshot || seq === handledCameraSeq) return;
+		handledCameraSeq = seq;
+		handledFrameSeq = app.frameSeq;
+		map.jumpTo(snapshot);
+	});
+
 	// Fly to whatever the header, the initial load, or a branch selection asked
 	// for, and settle the request's promise once the camera lands so callers can
 	// defer heavy work past the animation. A branch request waits (unhandled)
 	// until its cue exists; anything unframeable settles immediately.
 	$effect(() => {
 		const seq = app.frameSeq;
-		if (!map || seq === handledFrameSeq) return;
+		if (diagramNetwork || !map || seq === handledFrameSeq) return;
 		const m = map;
 		const target = app.frameTarget;
 		const settle = () => app.settleFrame();
 		if (typeof target === 'object') {
-			const cue = selectedBranchCue;
-			if (!cue || cue.caseId !== target.caseId || cue.branchId !== target.branchId) return;
+			const geometry = displayedGeometry(target.caseId);
+			const bus =
+				'busId' in target ? geometry?.buses.find((b) => b.id === target.busId) : undefined;
+			const branch =
+				'branchId' in target ? geometry?.branches.find((b) => b.id === target.branchId) : undefined;
 			handledFrameSeq = seq;
-			if (focusSelectedBranch()) m.once('moveend', settle);
-			else settle();
+			const points: [number, number][] = bus ? [[bus.lon, bus.lat]] : (branch?.path ?? []);
+			if (!focusGeometry(points, settle)) settle();
 			return;
 		}
 		handledFrameSeq = seq;
@@ -1174,47 +1328,53 @@
 			return;
 		}
 		const { clientWidth: w, clientHeight: h } = m.getContainer();
+		m.once('moveend', settle);
 		m.fitBounds(bounds, {
 			padding: framePadding(w, h, 'case'),
 			duration: prefersReducedMotion() ? 0 : 1400
 		});
-		m.once('moveend', settle);
 	});
 </script>
 
-{#key mapGen}
-	<div
-		class="map-stage"
-		class:chrome-clear={!chromeVisible}
-		style="--chrome-inset: {chromeInset}px"
-	>
-		<div class="map" {@attach initMap}></div>
-		{#if selectedBusCue}
-			{#key selectedBusCue.key}
-				<div class="selected-bus-cue" bind:this={selectedCueEl} aria-hidden="true"></div>
-			{/key}
-		{/if}
-		{#if selectedBranchCue}
-			{#key selectedBranchCue.key}
-				<svg class="selected-branch-cue" bind:this={selectedBranchCueEl} aria-hidden="true">
-					<path class="selected-branch-halo" bind:this={selectedBranchHaloPath}></path>
-					<path class="selected-branch-line" bind:this={selectedBranchLinePath}></path>
-				</svg>
-			{/key}
-		{/if}
-		{#if selectedMultiDetail}
-			<!-- Content is built imperatively in syncMultiDetail (screen-space
+{#if diagramNetwork}
+	<DiagramCanvas
+		network={diagramNetwork}
+		multiconductor={diagramMulti}
+		caseId={diagramCaseId}
+		onbusclick={selectDiagramBus}
+		onbranchclick={selectDiagramBranch}
+		onclear={onmapclick}
+	/>
+{:else}
+	{#key mapGen}
+		<div class="map-stage">
+			<div class="map" {@attach initMap}></div>
+			{#if selectedBusCue}
+				{#key selectedBusCue.key}
+					<div class="selected-bus-cue" bind:this={selectedCueEl} aria-hidden="true"></div>
+				{/key}
+			{/if}
+			{#if selectedBranchCue}
+				{#key selectedBranchCue.key}
+					<svg class="selected-branch-cue" bind:this={selectedBranchCueEl} aria-hidden="true">
+						<path class="selected-branch-halo" bind:this={selectedBranchHaloPath}></path>
+						<path class="selected-branch-line" bind:this={selectedBranchLinePath}></path>
+					</svg>
+				{/key}
+			{/if}
+			{#if selectedMultiDetail}
+				<!-- Content is built imperatively in syncMultiDetail (screen-space
 			     projection); file-derived text is escaped there. -->
-			<svg class="multi-detail" bind:this={multiDetailEl} aria-hidden="true"></svg>
-		{/if}
-	</div>
-{/key}
+				<svg class="multi-detail" bind:this={multiDetailEl} aria-hidden="true"></svg>
+			{/if}
+		</div>
+	{/key}
+{/if}
 
 {#if app.placingId && map}
 	<button
 		type="button"
 		class="place-at-center mono"
-		style="--chrome-inset: {chromeInset}px"
 		onclick={() => {
 			if (!map) return;
 			const center = map.getCenter();
@@ -1398,7 +1558,7 @@
 	.place-at-center {
 		position: absolute;
 		left: 50%;
-		bottom: calc(92px + var(--chrome-inset, 0px));
+		bottom: 92px;
 		z-index: 15;
 		transform: translateX(-50%);
 		padding: 7px 14px;
@@ -1413,38 +1573,36 @@
 
 	@media (max-width: 420px) {
 		.place-at-center {
-			bottom: calc(78px + var(--chrome-inset, 0px));
+			bottom: 78px;
 		}
 	}
 
 	.map :global(.maplibregl-ctrl-bottom-right) {
 		right: 20px;
-		/* rides above the bottom sheet so attribution stays legible */
-		bottom: calc(18px + var(--chrome-inset, 0px));
+		bottom: 12px;
 		display: flex;
-		flex-direction: column;
+		flex-direction: row;
 		align-items: flex-end;
-		gap: 6px;
+		gap: 16px;
 		transition:
 			bottom var(--dur-med) var(--ease-out),
 			opacity var(--dur-fast) var(--ease-out);
 	}
 
-	/* The sheet has taken the map; nothing left down there to attribute. */
-	.map-stage.chrome-clear :global(.maplibregl-ctrl-bottom-right) {
-		opacity: 0;
-		pointer-events: none;
-	}
-
 	.map :global(.maplibregl-ctrl-bottom-right .maplibregl-ctrl) {
 		float: none;
 		margin: 0;
 	}
 
+	.map :global(.maplibregl-ctrl-group) {
+		order: 2;
+	}
+
 	.map :global(.maplibregl-ctrl-attrib) {
-		order: -1;
+		order: 1;
 		position: relative;
-		right: 2px;
+		bottom: 0;
+		right: 0;
 		width: auto;
 		min-width: 0;
 		max-width: calc(100vw - 96px);
@@ -1494,31 +1652,35 @@
 	}
 
 	@media (max-width: 760px) {
+		.map :global(.maplibregl-ctrl-bottom-right) {
+			bottom: 12px;
+			right: 12px;
+			gap: 12px;
+		}
 		.map :global(.maplibregl-ctrl-attrib) {
-			/* last in the column so it rests on the sheet's edge instead of
-			   floating over the network a zoom control's height above it */
-			order: 1;
+			position: relative;
+			bottom: auto;
 			width: auto;
 			min-width: 0;
 			right: 0;
 			white-space: normal;
 		}
 
-		/* The band of map a phone has left between the header and the sheet is
-		   about the height of the solve card, which covers the buttons wherever
-		   they land. Pinch and double tap zoom; the attribution stays. */
 		.map :global(.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group) {
-			display: none;
+			display: flex;
+		}
+		.map :global(.maplibregl-ctrl-group button + button) {
+			border-top: 0;
+			border-left: 1px solid var(--line);
 		}
 	}
 
-	/* One line on a small phone: wrapped attribution turns into a wide block
-	   sitting over the network. */
+	/* Attribution shares the bottom row with touch-sized zoom buttons. */
 	@media (max-width: 460px) {
 		.map :global(.maplibregl-ctrl-attrib) {
-			max-width: calc(100vw - 20px);
+			max-width: calc(100vw - 140px);
 			font-size: 9px;
-			white-space: nowrap;
+			white-space: normal;
 		}
 	}