@tellegen/svelte 0.2.0 → 0.4.0

package/dist/components/ControlPanel.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
-	import { untrack } from 'svelte';
+	import { tick, untrack } from 'svelte';
 	import { getAppState, getController, getUiConfig } from '../context.svelte.js';
-	import { splitName } from '../format.js';
+	import PanelFrame from './PanelFrame.svelte';
+	import SavedNetworkDetails from './SavedNetworkDetails.svelte';
+	import ModelDetails from './ModelDetails.svelte';
+	import { getPanelLayout } from '../panels.svelte.js';
 	import AppFooter from './AppFooter.svelte';
 	import BindingLines from './BindingLines.svelte';
 	import BusPicker from './BusPicker.svelte';
@@ -11,6 +14,7 @@
 	import LocalCaseDetails from './LocalCaseDetails.svelte';
 	import MulticonductorDetails from './MulticonductorDetails.svelte';
 	import NetworkStats from './NetworkStats.svelte';
+	import PowerFlowDetails from './PowerFlowDetails.svelte';
 	import RatingSlider from './RatingSlider.svelte';
 	import SensitivityReadout from './SensitivityReadout.svelte';
 	import SizeLegend from './SizeLegend.svelte';
@@ -20,56 +24,9 @@
 	const ctrl = getController();
 	const config = getUiConfig();
 
-	// Bottom sheet heights, compact layout only. peek is measured from the grab
-	// bar; half and full are fractions of the viewport.
-	type Snap = 'peek' | 'half' | 'full';
-	const SNAPS: Snap[] = ['peek', 'half', 'full'];
-	const SNAP_FRACTION: Record<Snap, number> = { peek: 0, half: 0.46, full: 0.92 };
-	/** Below this the viewport is a landscape phone and half has to give up room. */
-	const SHORT_VIEWPORT_PX = 560;
-	/** px/ms above which a release snaps in the drag direction instead of to the nearest. */
-	const FLICK_SPEED = 0.35;
-	/** Map left visible above a full sheet, on top of the header it also clears. */
-	const FULL_SNAP_MAP_BAND = 14;
-
-	let snap = $state<Snap>('half');
-	let headEl = $state.raw<HTMLElement | undefined>(undefined);
-	let bodyEl = $state.raw<HTMLElement | undefined>(undefined);
-	let headHeight = $state(52);
-	/** Height under an active drag; null when resting on a snap. */
-	let dragHeight = $state<number | null>(null);
-
-	const fractionFor = (s: Snap) =>
-		s === 'half' && app.viewportHeight < SHORT_VIEWPORT_PX ? 0.38 : SNAP_FRACTION[s];
-
-	const snapHeight = (s: Snap) =>
-		s === 'peek'
-			? headHeight
-			: Math.min(
-					Math.round(app.viewportHeight * fractionFor(s)),
-					app.viewportHeight - app.headerInset - FULL_SNAP_MAP_BAND
-				);
-	const sheetHeight = $derived(dragHeight ?? snapHeight(snap));
-
-	const caseLabel = $derived(
-		app.active
-			? splitName(app.active.name)[0]
-			: (app.activeLocal?.label ?? app.activeMulti?.label ?? '')
-	);
-
-	/** Single line shown on the grab bar while collapsed. */
-	const summary = $derived.by(() => {
-		if (app.error) return 'error — open for details';
-		if (app.selectedBus !== null) return `bus ${app.selectedBus} · ∂LMP/∂d`;
-		if (app.selectedBranch !== null) return `line ${app.selectedBranch} · ∂LMP/∂rating`;
-		const stats = ctrl.networkStats;
-		if (!stats) return app.parsingFile ? 'parsing…' : 'loading…';
-		return `${caseLabel} · ${stats.buses} buses · ${stats.branches} lines`;
-	});
-
-	const expandLabel = $derived(
-		snap === 'full' ? 'collapse the control panel' : 'expand the control panel'
-	);
+	const layout = getPanelLayout();
+	let open = $state(true);
+	let bodyEl = $state.raw<HTMLElement>();
 
 	/** A selection whose readout has resolved (or is resolving). */
 	const busReadout = $derived(
@@ -81,141 +38,34 @@
 	/** Compact only: a resolved selection outranks the case stats it was read
 	 * against. Gated on networkStats because that is what renders the readout. */
 	const selectionLeads = $derived(
-		app.compactLayout && !!ctrl.networkStats && (busReadout || branchReadout)
+		app.compactLayout &&
+			!!ctrl.networkStats &&
+			(busReadout ||
+				branchReadout ||
+				(ctrl.activeFormulation === 'acpf' &&
+					(app.selectedBus !== null || app.selectedBranch !== null)))
 	);
 
 	$effect(() => {
-		app.sheetInset = app.compactLayout ? sheetHeight : 0;
-	});
-
-	// peek height tracks the grab bar, which resizes when the summary line changes.
-	$effect(() => {
-		const el = headEl;
-		if (!el) return;
-		const measure = () => (headHeight = Math.round(el.getBoundingClientRect().height));
-		measure();
-		const observer = new ResizeObserver(measure);
-		observer.observe(el);
-		return () => observer.disconnect();
-	});
-
-	// A map selection renders the sensitivity readout and the demand control, both
-	// of which are below the fold at peek. The body also has to go back to the top:
-	// reaching the bus lookup scrolls it down, and the readout that replaces it as
-	// the first block would otherwise open out of view.
-	$effect(() => {
-		const selected = app.selectedBus ?? app.selectedBranch;
-		if (selected === null) return;
-		untrack(() => {
-			if (!app.compactLayout) return;
-			if (snap === 'peek') snap = 'half';
-			if (bodyEl) bodyEl.scrollTop = 0;
-		});
+		const selection = app.selectedBus ?? app.selectedBranch;
+		if (selection !== null)
+			untrack(() => {
+				open = true;
+				if (layout.compact) {
+					layout.drawer = 'network';
+					void tick().then(() => bodyEl?.closest('.panel-content')?.scrollTo({ top: 0 }));
+				}
+			});
 	});
-
-	function cycle() {
-		snap = snap === 'peek' ? 'half' : snap === 'half' ? 'full' : 'peek';
-	}
-
-	function nearestSnap(height: number): Snap {
-		return SNAPS.reduce((best, s) =>
-			Math.abs(snapHeight(s) - height) < Math.abs(snapHeight(best) - height) ? s : best
-		);
-	}
-
-	let dragStartY = 0;
-	let dragStartHeight = 0;
-	let dragMoved = false;
-	let lastY = 0;
-	let lastT = 0;
-	let speed = 0;
-
-	function onPointerDown(e: PointerEvent) {
-		if (!app.compactLayout || !e.isPrimary) return;
-		if (e.currentTarget instanceof HTMLElement) e.currentTarget.setPointerCapture(e.pointerId);
-		dragStartY = e.clientY;
-		dragStartHeight = sheetHeight;
-		dragHeight = dragStartHeight;
-		dragMoved = false;
-		speed = 0;
-		lastY = e.clientY;
-		lastT = e.timeStamp;
-	}
-
-	function onPointerMove(e: PointerEvent) {
-		if (dragHeight === null) return;
-		const dy = dragStartY - e.clientY;
-		if (Math.abs(dy) > 4) dragMoved = true;
-		const dt = e.timeStamp - lastT;
-		if (dt > 0) speed = (lastY - e.clientY) / dt;
-		lastY = e.clientY;
-		lastT = e.timeStamp;
-		dragHeight = Math.max(
-			snapHeight('peek'),
-			Math.min(snapHeight('full'), dragStartHeight + dy)
-		);
-	}
-
-	function onPointerUp() {
-		if (dragHeight === null) return;
-		const height = dragHeight;
-		dragHeight = null;
-		if (!dragMoved) return; // a tap; the click handler cycles
-		const landed = nearestSnap(height);
-		if (Math.abs(speed) > FLICK_SPEED) {
-			const next = SNAPS.indexOf(landed) + (speed > 0 ? 1 : -1);
-			snap = SNAPS[Math.max(0, Math.min(SNAPS.length - 1, next))];
-		} else {
-			snap = landed;
-		}
-	}
-
-	function onHeadKeydown(e: KeyboardEvent) {
-		const step = e.key === 'ArrowUp' ? 1 : e.key === 'ArrowDown' ? -1 : 0;
-		if (step === 0) return;
-		e.preventDefault();
-		const next = SNAPS.indexOf(snap) + step;
-		snap = SNAPS[Math.max(0, Math.min(SNAPS.length - 1, next))];
-	}
 </script>
 
-<aside
-	class="panel"
-	class:sheet={app.compactLayout}
-	class:dragging={dragHeight !== null}
-	style:height={app.compactLayout ? `${sheetHeight}px` : null}
->
-	{#if app.compactLayout}
-		<button
-			type="button"
-			class="sheet-head"
-			bind:this={headEl}
-			aria-expanded={snap !== 'peek'}
-			aria-controls="control-panel-body"
-			aria-label={expandLabel}
-			onpointerdown={onPointerDown}
-			onpointermove={onPointerMove}
-			onpointerup={onPointerUp}
-			onpointercancel={onPointerUp}
-			onkeydown={onHeadKeydown}
-			onclick={() => {
-				// click fires after pointerup; a keyboard activation leaves dragMoved
-				// unset, so clear it here rather than in the pointer handlers
-				const moved = dragMoved;
-				dragMoved = false;
-				if (!moved) cycle();
-			}}
-		>
-			<span class="grabber" aria-hidden="true"></span>
-			{#if snap === 'peek'}
-				<span class="sheet-summary mono">{summary}</span>
-			{/if}
-		</button>
-	{/if}
-
+<PanelFrame id="network" title="Network" side="left" order={10} width={320} bind:open>
 	<div class="panel-body" id="control-panel-body" bind:this={bodyEl}>
 		{#snippet selectionBlock()}
-			{#if busReadout}
+			{#if ctrl.activeFormulation === 'acpf'}
+				<DisplayControls />
+				<PowerFlowDetails />
+			{:else if busReadout}
 				<SensitivityReadout />
 
 				<DemandSlider />
@@ -236,108 +86,90 @@
 			{/if}
 		{/snippet}
 
-		{#if app.error}
-			<p class="error mono">{app.error}</p>
-			<div class="error-actions">
-				<button class="reset mono" onclick={ctrl.retryError}>retry</button>
-				<button class="reset mono" onclick={() => (app.error = null)}>dismiss</button>
-			</div>
-		{/if}
-		{#if app.parsingFile}
-			<p class="dim mono blink">parsing&hellip;</p>
-		{/if}
+		{#if app.studyView}
+			<SavedNetworkDetails />
+		{:else}
+			{#if app.parsingFile}
+				<p class="dim mono blink">parsing&hellip;</p>
+			{/if}
 
-		<!-- The sheet shows a few hundred px at most, so what the last tap produced
-		     leads; the case provenance and stats it was read against follow. -->
-		{#if selectionLeads}
-			{@render selectionBlock()}
+			<!-- Selected equipment leads on narrow screens. -->
+			{#if selectionLeads}
+				{@render selectionBlock()}
 
-			<hr />
-		{/if}
+				<hr />
+			{/if}
 
-		{#if app.activeLocal}
-			<LocalCaseDetails />
-		{/if}
-		{#if app.activeMulti}
-			<MulticonductorDetails />
-		{/if}
-		{#if !ctrl.networkStats}
-			{#if !app.error && !app.activeLocal && !app.activeMulti}
-				{#if ctrl.casesLoaded && app.cases.length === 0}
-					<p class="dim mono">
-						{config.loadDefaultCases ? 'no default cases loaded' : 'drop a case file to begin'}
-					</p>
-					{#if config.loadDefaultCases}
-						<button class="reset mono" onclick={ctrl.restoreDefaultCases}
-							>restore default cases</button
+			{#if app.activeLocal}
+				{#if app.activeLocal.diagram && app.activeLocal.view?.buses.length}
+					<div class="view-mode" aria-label="Coordinate display">
+						<button
+							aria-pressed={app.activeLocal.displayMode === 'geographic'}
+							onclick={() => ctrl.setCaseDisplayMode(app.activeLocal!, 'geographic')}>Map</button
 						>
-					{/if}
-				{:else if ctrl.loadingBackendCase}
-					<p class="dim mono blink">loading selected case&hellip;</p>
-				{:else}
-					<p class="dim mono blink">loading cases&hellip;</p>
+						<button
+							aria-pressed={app.activeLocal.displayMode === 'diagram'}
+							onclick={() => ctrl.setCaseDisplayMode(app.activeLocal!, 'diagram')}>Diagram</button
+						>
+					</div>
 				{/if}
+				<LocalCaseDetails />
 			{/if}
-		{:else}
-			{#if !app.activeLocal}
-				<NetworkStats />
+			{#if app.activeMulti}
+				<MulticonductorDetails />
 			{/if}
+			{#if !ctrl.networkStats}
+				{#if !app.activeLocal && !app.activeMulti}
+					{#if ctrl.casesLoaded && app.cases.length === 0}
+						<p class="dim mono">
+							{config.loadDefaultCases ? 'no default cases loaded' : 'drop a case file to begin'}
+						</p>
+						{#if config.loadDefaultCases}
+							<button class="reset mono" onclick={ctrl.restoreDefaultCases}
+								>restore default cases</button
+							>
+						{/if}
+					{:else if ctrl.loadingBackendCase}
+						<p class="dim mono blink">loading selected case&hellip;</p>
+					{:else}
+						<p class="dim mono blink">loading cases&hellip;</p>
+					{/if}
+				{/if}
+			{:else}
+				{#if !app.activeLocal}
+					<NetworkStats />
+				{/if}
 
-			{#if ctrl.activeSolvable}
-				<FormulationSelector />
-			{/if}
+				{#if ctrl.activeSolvable}
+					<FormulationSelector />
+				{/if}
 
-			{#if app.compactLayout}
+				<ModelDetails details={ctrl.activeSolvable?.network?.model_details} />
 				<BusPicker inline />
-			{/if}
 
-			{#if !app.placingLocalId}
-				<BindingLines />
-			{/if}
+				{#if !app.placingLocalId && ctrl.activeFormulation !== 'acpf'}
+					<BindingLines />
+				{/if}
 
-			{#if !selectionLeads}
-				<hr />
+				{#if !selectionLeads}
+					<hr />
 
-				{@render selectionBlock()}
-			{/if}
+					{@render selectionBlock()}
+				{/if}
 
-			<hr />
+				<hr />
 
-			<SizeLegend />
+				<SizeLegend />
+			{/if}
 		{/if}
-
 		{#if app.compactLayout && config.showFooter}
 			<AppFooter inline />
 		{/if}
 	</div>
-</aside>
+</PanelFrame>
 
 <style>
-	.panel {
-		position: absolute;
-		top: 76px;
-		left: 20px;
-		z-index: 10;
-		display: flex;
-		flex-direction: column;
-		width: 312px;
-		max-height: calc(100% - 122px);
-		overflow: hidden;
-		background: var(--panel);
-		border: 1px solid var(--line);
-		border-radius: 3px;
-		backdrop-filter: blur(6px);
-		box-shadow: 0 4px 24px rgba(32, 36, 43, 0.08);
-		animation: rise 0.5s 0.12s ease-out both;
-	}
-
 	.panel-body {
-		flex: 1 1 auto;
-		min-height: 0;
-		overflow-y: auto;
-		/* A flick that runs past the end of the panel must not scroll the page or
-		   pan the map underneath. */
-		overscroll-behavior: contain;
 		padding: 16px 18px;
 	}
 
@@ -347,95 +179,26 @@
 		margin: 12px 0;
 	}
 
-	.error {
-		color: var(--red);
-		font-size: 12px;
-	}
-
-	.error-actions {
-		display: flex;
-		gap: 6px;
-	}
-
-	/* The grab bar: a 44px strip that drags the sheet and cycles it on tap. */
-	.sheet-head {
-		flex: 0 0 auto;
+	.view-mode {
 		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		gap: 7px;
-		width: 100%;
-		min-height: 44px;
-		padding: 9px 16px 11px;
-		background: none;
-		border: 0;
-		border-bottom: 1px solid transparent;
-		color: inherit;
-		font: inherit;
-		cursor: grab;
-		/* the browser must not claim the vertical gesture */
-		touch-action: none;
-	}
-
-	.sheet-head:active {
-		cursor: grabbing;
-	}
-
-	.grabber {
-		width: 40px;
-		height: 4px;
-		border-radius: 2px;
-		background: var(--line);
-	}
-
-	.sheet-head:hover .grabber,
-	.sheet-head:focus-visible .grabber {
-		background: var(--accent);
+		gap: 4px;
+		margin-bottom: 12px;
 	}
-
-	.sheet-summary {
-		max-width: 100%;
-		overflow: hidden;
-		font-size: 11.5px;
-		color: var(--text-secondary);
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.sheet {
-		top: auto;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		width: auto;
-		max-height: none;
+	.view-mode button {
+		border: 1px solid var(--line);
+		border-radius: 4px;
+		padding: 5px 10px;
+		font: 12px/1.4 var(--font-display);
+		color: var(--ink);
 		background: var(--paper);
-		border-width: 1px 0 0;
-		border-radius: 12px 12px 0 0;
-		box-shadow: 0 -6px 28px rgba(32, 36, 43, 0.14);
-		transition: height var(--dur-med) var(--ease-out);
-	}
-
-	.sheet .panel-body {
-		padding: 0 16px 14px;
-		/* clear the home indicator on a phone with no bezel */
-		padding-bottom: max(14px, env(safe-area-inset-bottom));
-		-webkit-overflow-scrolling: touch;
+		cursor: pointer;
 	}
-
-	.sheet .sheet-head {
-		border-bottom-color: var(--line);
+	.view-mode button[aria-pressed='true'] {
+		border-color: var(--accent);
+		background: var(--accent-soft);
 	}
-
-	/* A dragged sheet tracks the finger; the snap animation is for releases. */
-	.sheet.dragging {
-		transition: none;
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.panel {
-			animation: none;
-		}
+	.view-mode button:focus-visible {
+		outline: 2px solid var(--focus-ring);
+		outline-offset: 2px;
 	}
 </style>

package/dist/components/DemandSlider.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getAppState, getController } from '../context.svelte.js';
 	import { fmt, signed } from '../format.js';
+	import { sliderKeyValue } from '../slider.js';
 
 	const app = getAppState();
 	const ctrl = getController();
@@ -26,7 +27,7 @@
 		'The black tick marks the last committed demand. Drag the knob to preview a new demand; release to solve and move the tick to that point.';
 	const disabledTip = 'this analysis bus is display-only; demand is not adjustable';
 	const scoreTip =
-		'Gradient is the estimate of total cost change versus base before the solve finishes. It uses the selected bus LMP times the demand step, plus local curvature when the preview engine is unavailable. Exact is the resolved OPF objective change.';
+		'Gradient estimates the declared objective change before the solve finishes. It uses the selected bus LMP times the demand step, plus local curvature when the preview engine is unavailable. Exact is the resolved OPF objective change.';
 </script>
 
 {#if ctrl.activeSolvable}
@@ -37,49 +38,57 @@
 			<span class="val">{signed(ctrl.sliderValue)} MW</span>
 		</div>
 		<div class="range-mode">
-			<div class="segment mono" aria-label="demand range">
+			<div class="segment mono" role="group" aria-label="demand range">
 				<button
 					type="button"
 					class:active={app.demandRangeMode === 'local'}
-						aria-pressed={app.demandRangeMode === 'local'}
-						aria-label="nearby demand range"
-						disabled={disabled}
+					aria-pressed={app.demandRangeMode === 'local'}
+					aria-label="nearby demand range"
+					{disabled}
 					title="range near the selected demand setting"
 					onclick={() => ctrl.setDemandRangeMode('local')}>nearby</button
 				>
 				<button
 					type="button"
 					class:active={app.demandRangeMode === 'full'}
-						aria-pressed={app.demandRangeMode === 'full'}
-						aria-label="full demand range"
-						disabled={disabled}
+					aria-pressed={app.demandRangeMode === 'full'}
+					aria-label="full range of demand"
+					{disabled}
 					title="range from zero load to the local physical limit"
 					onclick={() => ctrl.setDemandRangeMode('full')}>full range</button
 				>
 			</div>
-				<span class="mono dim">
-					{#if disabled}
-						not adjustable
-					{:else}
-						{fmt.format(ctrl.sliderMin)} to {fmt.format(ctrl.sliderMax)} MW
-					{/if}
-				</span>
+			<span class="mono dim">
+				{#if disabled}
+					not adjustable
+				{:else}
+					{fmt.format(ctrl.sliderMin)} to {fmt.format(ctrl.sliderMax)} MW
+				{/if}
+			</span>
 		</div>
 		<div
 			class="slider-track"
 			style="--fill-lo:{fillLo}; --fill-hi:{fillHi}; --neutral-pos:{neutralPos}"
-				title={disabled ? disabledTip : sliderTip}
+			title={disabled ? disabledTip : sliderTip}
 		>
 			<input
 				type="range"
 				min={ctrl.sliderMin}
-					max={ctrl.sliderMax}
-					step="any"
-					disabled={disabled}
+				max={ctrl.sliderMax}
+				step="any"
+				{disabled}
 				bind:value={ctrl.sliderCurrent, ctrl.setSliderPreview}
 				aria-label="demand delta at selected bus"
 				onpointerdown={() => ctrl.setSliderPreview(ctrl.sliderValue)}
-				onkeydown={() => ctrl.setSliderPreview(ctrl.sliderValue)}
+				onkeydown={(e) => {
+					const next = sliderKeyValue(e.key, ctrl.sliderValue, ctrl.sliderMin, ctrl.sliderMax);
+					if (next === null) {
+						ctrl.setSliderPreview(ctrl.sliderValue);
+						return;
+					}
+					e.preventDefault();
+					ctrl.setSliderPreview(next);
+				}}
 				onpointerup={(e) => ctrl.finishDemandInput(Number(e.currentTarget.value))}
 				onkeyup={(e) => ctrl.finishDemandInput(Number(e.currentTarget.value))}
 				onchange={(e) => ctrl.finishDemandInput(Number(e.currentTarget.value))}
@@ -88,7 +97,7 @@
 		<div class="demand-feedback" class:idle={!ctrl.previewing && !ctrl.isPerturbed(c)}>
 			<p class="pred mono dim" aria-hidden={!(ctrl.predictedDeltaObj !== null && ctrl.previewing)}>
 				{#if ctrl.predictedDeltaObj !== null && ctrl.previewing}
-					predicted &Delta;cost {signed(ctrl.predictedDeltaObj)} $/h
+					predicted &Delta;objective {signed(ctrl.predictedDeltaObj)}
 				{:else}
 					&nbsp;
 				{/if}
@@ -96,10 +105,8 @@
 			<p class="score mono" aria-hidden={!(ctrl.gradientScore && ctrl.isPerturbed(c))}>
 				{#if ctrl.gradientScore && ctrl.isPerturbed(c)}
 					<span title={scoreTip}>
-						gradient {signed(ctrl.gradientScore.pred)} &middot; exact {signed(
-							ctrl.gradientScore.exact
-						)}
-						$/h
+						gradient {signed(ctrl.gradientScore.pred)}, exact {signed(ctrl.gradientScore.exact)} objective
+						units
 					</span>
 				{:else}
 					&nbsp;
@@ -122,7 +129,7 @@
 	.slider-head {
 		display: flex;
 		justify-content: space-between;
-		font-size: 11.5px;
+		font-size: 13.5px;
 		color: var(--text-secondary);
 		margin-bottom: 4px;
 	}
@@ -137,7 +144,7 @@
 		justify-content: space-between;
 		gap: 8px;
 		margin: 6px 0 7px;
-		font-size: 10.5px;
+		font-size: 12.5px;
 	}
 
 	.slider-track {
@@ -258,13 +265,13 @@
 
 	.pred {
 		margin: 2px 0 0;
-		font-size: 11px;
+		font-size: 13px;
 		min-height: 16px;
 	}
 
 	.score {
 		margin: 8px 0 0;
-		font-size: 11px;
+		font-size: 13px;
 		color: var(--ink);
 		min-height: 16px;
 	}