@tellegen/svelte 0.2.0 → 0.3.0

package/dist/components/PanelHost.svelte

@@ -0,0 +1,212 @@
+<script lang="ts">
+	import { onMount, untrack } from 'svelte';
+	import { getAppState } from '../context.svelte.js';
+	import { getPanelLayout } from '../panels.svelte.js';
+	import { getNoticeCenter } from '../notices.svelte.js';
+	import PanelCard from './PanelCard.svelte';
+	const app = getAppState();
+	const layout = getPanelLayout();
+	const notices = getNoticeCenter();
+	const bottomReserve = $derived(notices.entries.length ? 120 : 88);
+	const left = $derived(layout.ordered('left').filter((p) => p.open));
+	const right = $derived(layout.ordered('right').filter((p) => p.open));
+	const floating = $derived(
+		layout.ordered().filter((p) => p.open && layout.position(p) === 'floating')
+	);
+	const drawer = $derived(layout.panels.find((p) => p.id === layout.drawer));
+	const toolbarTop = $derived(app.headerInset + 6);
+	const panelTop = $derived(toolbarTop + 42);
+	const drawerHeight = $derived(
+		Math.max(
+			1,
+			Math.min(
+				layout.viewportHeight * 0.6,
+				(layout.viewportHeight - panelTop - bottomReserve - 8) * 0.75
+			)
+		)
+	);
+	function resize() {
+		layout.resizeViewport(window.innerWidth, window.innerHeight, panelTop);
+	}
+	onMount(() => {
+		resize();
+		try {
+			layout.initialize(window.localStorage);
+		} catch {
+			layout.initialize();
+		}
+	});
+	$effect(() => {
+		const top = panelTop;
+		const bottom = bottomReserve;
+		untrack(() => {
+			layout.bottom = bottom;
+			layout.resizeViewport(window.innerWidth, window.innerHeight, top);
+		});
+	});
+	$effect(() => {
+		app.sheetInset = layout.compact && drawer ? drawerHeight + bottomReserve : 0;
+	});
+</script>
+
+<svelte:window
+	onresize={resize}
+	onpointermove={(event) => layout.moveGesture(event.clientX, event.clientY)}
+	onpointerup={() => layout.finishGesture()}
+	onpointercancel={() => layout.finishGesture()}
+/>
+<div class="panel-toolbar" style:top="{toolbarTop}px" aria-label="Panels">
+	<div class="panel-buttons">
+		{#each layout.ordered().filter((p) => p.side === 'left') as panel (panel.id)}
+			<button
+				aria-label={panel.title}
+				aria-pressed={layout.compact ? layout.drawer === panel.id : panel.open}
+				onclick={() => layout.toggle(panel)}>{panel.title}</button
+			>
+		{/each}
+	</div>
+	<div class="panel-buttons right">
+		{#each layout.ordered().filter((p) => p.side === 'right') as panel (panel.id)}
+			<button
+				aria-label={panel.title}
+				aria-pressed={layout.compact ? layout.drawer === panel.id : panel.open}
+				onclick={() => layout.toggle(panel)}>{panel.title}</button
+			>
+		{/each}
+		<button
+			class="reset-layout"
+			onclick={() => layout.reset()}
+			title="Restore the default panel positions">Reset layout</button
+		>
+	</div>
+</div>
+{#if layout.storageError}<p class="layout-error" role="status" style:top="{panelTop}px">
+		{layout.storageError}
+	</p>{/if}
+{#if layout.compact}
+	{#if drawer}<div class="drawer" style:bottom="{bottomReserve}px" style:height="{drawerHeight}px">
+			<PanelCard panel={drawer} mobile />
+		</div>{/if}
+{:else}
+	<div
+		class="dock left"
+		style:bottom="{Math.max(100, bottomReserve)}px"
+		data-panel-dock="left"
+		style:top="{panelTop}px"
+		style:width="{layout.dockWidth('left')}px"
+	>
+		{#each left as panel (panel.id)}<PanelCard {panel} />{/each}
+	</div>
+	<div
+		class="dock right"
+		style:bottom="{Math.max(100, bottomReserve)}px"
+		data-panel-dock="right"
+		style:top="{panelTop}px"
+		style:width="{layout.dockWidth('right')}px"
+	>
+		{#each right as panel (panel.id)}<PanelCard {panel} />{/each}
+	</div>
+	{#each floating as panel (panel.id)}<PanelCard {panel} floating />{/each}
+{/if}
+
+<style>
+	.panel-toolbar {
+		position: fixed;
+		z-index: 30;
+		left: 20px;
+		right: 20px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: 12px;
+		pointer-events: none;
+		height: 34px;
+	}
+	.panel-buttons {
+		display: flex;
+		gap: 6px;
+		align-items: center;
+		pointer-events: auto;
+	}
+	button {
+		border: 1px solid var(--line);
+		border-radius: 4px;
+		background: var(--paper);
+		color: var(--ink);
+		font: 12px/1.4 var(--font-display);
+		min-height: 32px;
+		padding: 6px 12px;
+		cursor: pointer;
+		box-shadow: var(--elev-1);
+	}
+	button[aria-pressed='true'] {
+		border-color: var(--accent);
+		background: var(--accent-soft);
+	}
+	button:focus-visible {
+		outline: 2px solid var(--focus-ring);
+		outline-offset: 2px;
+	}
+	button:hover {
+		border-color: var(--accent);
+	}
+	.reset-layout {
+		color: var(--text-secondary);
+		font-size: 11px;
+		padding: 6px 8px;
+		background: var(--panel);
+	}
+	.dock {
+		position: fixed;
+		z-index: 25;
+		bottom: 100px;
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		gap: 12px;
+		pointer-events: none;
+	}
+	.dock.left {
+		left: 20px;
+	}
+	.dock.right {
+		right: 20px;
+	}
+	.drawer {
+		position: fixed;
+		bottom: 88px;
+		left: 12px;
+		right: 12px;
+		z-index: 25;
+	}
+	.layout-error {
+		position: fixed;
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: 42;
+		max-width: 400px;
+		margin: 0;
+		padding: 8px 12px;
+		font: 12px/1.5 var(--font-display);
+		color: var(--ink);
+		background: var(--paper);
+		border: 1px solid var(--line);
+	}
+	@media (max-width: 960px) {
+		.panel-toolbar {
+			left: 12px;
+			right: 12px;
+			gap: 6px;
+		}
+		.panel-buttons {
+			gap: 4px;
+		}
+		button {
+			padding: 6px 8px;
+			font-size: 11px;
+		}
+		.reset-layout {
+			display: none;
+		}
+	}
+</style>

package/dist/components/PanelHost.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const PanelHost: import("svelte").Component<Record<string, never>, {}, "">;
+type PanelHost = ReturnType<typeof PanelHost>;
+export default PanelHost;

package/dist/components/PowerFlowDetails.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { getController } from '../context.svelte.js';
+	import { caseDeltas } from '../display.js';
+	import { fmt } from '../format.js';
+
+	const ctrl = getController();
+	const active = $derived(ctrl.activeSolvable);
+	const bus = $derived(ctrl.selectedBusData);
+	const branch = $derived(ctrl.selectedBranchData);
+	const voltage = $derived(active?.solution?.vm?.find((value) => value.bus === bus?.id)?.value);
+	const angle = $derived(active?.solution?.va.find((value) => value.bus === bus?.id)?.value);
+	const flow = $derived(active?.solution?.flows.find((value) => value.branch === branch?.id));
+	const demand = $derived.by(() => {
+		if (!bus || !active) return null;
+		const deltas = caseDeltas(active);
+		return bus.demand_mw + (deltas[bus.uid ?? bus.id] ?? deltas[bus.id] ?? 0);
+	});
+</script>
+
+{#if bus || branch}
+	<section class="equipment" aria-label="Power-flow equipment results">
+		{#if bus}
+			<h3>
+				Bus {bus.id}{#if bus.name}<span>{bus.name}</span>{/if}
+			</h3>
+			<dl>
+				{#if demand !== null}<div>
+						<dt>Demand</dt>
+						<dd>{fmt.format(demand)} MW</dd>
+					</div>{/if}
+				{#if voltage != null}<div>
+						<dt>Voltage</dt>
+						<dd>{voltage.toFixed(4)} pu</dd>
+					</div>{/if}
+				{#if angle != null}<div>
+						<dt>Voltage angle</dt>
+						<dd>{angle.toFixed(4)} rad</dd>
+					</div>{/if}
+			</dl>
+		{:else if branch}
+			<h3>Line {branch.id}<span>Bus {branch.from} to bus {branch.to}</span></h3>
+			<dl>
+				<div>
+					<dt>Capacity</dt>
+					<dd>{branch.rate_mw > 0 ? `${fmt.format(branch.rate_mw)} MVA` : 'Unlimited'}</dd>
+				</div>
+				{#if flow}
+					<div>
+						<dt>Active power</dt>
+						<dd>{fmt.format(flow.mw)} MW</dd>
+					</div>
+					{#if branch.rate_mw > 0}<div>
+							<dt>Loading</dt>
+							<dd>{fmt.format(flow.loading * 100)}%</dd>
+						</div>{/if}
+				{/if}
+			</dl>
+		{/if}
+	</section>
+{/if}
+
+<style>
+	.equipment {
+		border-top: 1px solid var(--line);
+		margin-top: 14px;
+		padding-top: 14px;
+	}
+	h3 {
+		margin: 0 0 12px;
+		font-size: 13px;
+		font-weight: 600;
+	}
+	h3 span {
+		display: block;
+		margin-top: 3px;
+		font-size: 11px;
+		font-weight: 400;
+		color: var(--text-secondary);
+	}
+	dl {
+		margin: 0;
+		display: grid;
+		gap: 6px;
+		font: 12px/1.5 var(--font-mono);
+	}
+	dl > div {
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+		gap: 12px;
+	}
+	dt {
+		color: var(--text-secondary);
+	}
+	dd {
+		margin: 0;
+		text-align: right;
+	}
+</style>

package/dist/components/PowerFlowDetails.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const PowerFlowDetails: import("svelte").Component<Record<string, never>, {}, "">;
+type PowerFlowDetails = ReturnType<typeof PowerFlowDetails>;
+export default PowerFlowDetails;

package/dist/components/RatingSlider.svelte

@@ -25,7 +25,7 @@
 		'The black tick marks the last committed rating change. Drag the knob to preview a new thermal rating; release to solve and move the tick to that point.';
 	const disabledTip = "this line's rating is synthesized; not adjustable";
 	const scoreTip =
-		'Gradient is the estimate of total cost change versus base before the solve finishes, from the engine preview at the committed point. Exact is the resolved OPF objective change.';
+		'Gradient estimates the declared objective change versus base before the solve finishes, from the engine preview at the committed point. Exact is the resolved OPF objective change.';
 </script>
 
 {#if ctrl.activeSolvable}
@@ -39,9 +39,7 @@
 		<div class="line-row mono">
 			{#if branch}
 				<span class="dim"
-					>line {branch.from}&#8201;&ndash;&#8201;{branch.to} &middot; {fmt.format(
-						branch.rate_mw
-					)} MW</span
+					>line {branch.from}&#8201;&ndash;&#8201;{branch.to}, {fmt.format(branch.rate_mw)} MW</span
 				>
 			{/if}
 			<span class="dim">
@@ -75,7 +73,7 @@
 		<div class="rating-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}
@@ -83,10 +81,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;

package/dist/components/SavedNetworkDetails.svelte

@@ -0,0 +1,214 @@
+<script lang="ts">
+	import { getAppState } from '../context.svelte.js';
+	import { fmt, formulationLabel, signed } from '../format.js';
+	import BusPicker from './BusPicker.svelte';
+	import ModelDetails from './ModelDetails.svelte';
+
+	const app = getAppState();
+	const saved = $derived(app.studyView);
+	const bus = $derived(saved?.network.buses.find((value) => value.id === app.selectedBus));
+	const branch = $derived(saved?.network.branches.find((value) => value.id === app.selectedBranch));
+	const lmp = $derived(saved?.solution?.lmp?.find((value) => value.bus === bus?.id)?.value);
+	const voltage = $derived(saved?.solution?.vm?.find((value) => value.bus === bus?.id)?.value);
+	const squaredVoltage = $derived(
+		saved?.solution?.w?.find((value) => value.bus === bus?.id)?.value
+	);
+	const angle = $derived(saved?.solution?.va?.find((value) => value.bus === bus?.id)?.value);
+	const flow = $derived(saved?.solution?.flows?.find((value) => value.branch === branch?.id));
+	const baseDemand = $derived(bus ? saved?.baseDemandMw?.[String(bus.id)] : undefined);
+	function live() {
+		app.studyView = null;
+		app.selectedBus = null;
+		app.selectedBranch = null;
+	}
+</script>
+
+{#if saved}
+	<section aria-label="Saved network details">
+		<h2>{saved.network.name}</h2>
+		<p class="state-label">{saved.label}<span>Saved state</span></p>
+		<dl>
+			<div>
+				<dt>Buses</dt>
+				<dd>{saved.network.buses.length.toLocaleString()}</dd>
+			</div>
+			<div>
+				<dt>Lines</dt>
+				<dd>{saved.network.branches.length.toLocaleString()}</dd>
+			</div>
+			<div>
+				<dt>Calculation</dt>
+				<dd>{formulationLabel(saved.formulation)}</dd>
+			</div>
+			<div>
+				<dt>Result</dt>
+				<dd>{saved.solution?.status ?? 'Not solved'}</dd>
+			</div>
+			{#if saved.solution?.objective != null}
+				<div>
+					<dt>OPF objective</dt>
+					<dd>{fmt.format(saved.solution.objective)}</dd>
+				</div>
+			{/if}
+		</dl>
+		<button class="live" onclick={live}>Return to live case</button>
+		<ModelDetails details={saved.network.model_details} />
+		<BusPicker inline />
+		{#if saved.solution}
+			<label class="map-values"
+				>{saved.network.coordinate_space === 'diagram' ? 'Diagram values' : 'Map values'}
+				<select bind:value={app.displayMode}>
+					{#if saved.solution.lmp?.length}<option value="price">LMP</option>{/if}
+					{#if saved.solution.va?.length}<option value="angle">Voltage angle</option>{/if}
+					{#if saved.solution.vm?.length || saved.solution.w?.length}<option value="voltage"
+							>Voltage magnitude</option
+						>{/if}
+				</select>
+			</label>
+		{/if}
+		{#if bus}
+			<div class="equipment">
+				<h3>
+					Bus {bus.id}{#if bus.name}<span>{bus.name}</span>{/if}
+				</h3>
+				<dl>
+					{#if baseDemand != null}<div>
+							<dt>Base demand</dt>
+							<dd>{fmt.format(baseDemand)} MW</dd>
+						</div>{/if}
+					<div>
+						<dt>Current demand</dt>
+						<dd>{fmt.format(bus.demand_mw)} MW</dd>
+					</div>
+					{#if baseDemand != null}<div>
+							<dt>Change</dt>
+							<dd>{signed(bus.demand_mw - baseDemand)} MW</dd>
+						</div>{/if}
+					{#if lmp != null}<div>
+							<dt>LMP</dt>
+							<dd>{fmt.format(lmp)}<small>objective units/MW</small></dd>
+						</div>{/if}
+					{#if voltage != null || squaredVoltage != null}<div>
+							<dt>Voltage</dt>
+							<dd>{(voltage ?? Math.sqrt(Math.max(0, squaredVoltage!))).toFixed(4)} pu</dd>
+						</div>{/if}
+					{#if angle != null}<div>
+							<dt>Voltage angle</dt>
+							<dd>{angle.toFixed(4)} rad</dd>
+						</div>{/if}
+				</dl>
+			</div>
+		{:else if branch}
+			<div class="equipment">
+				<h3>Line {branch.id}<span>Bus {branch.from} to bus {branch.to}</span></h3>
+				<dl>
+					<div>
+						<dt>Capacity</dt>
+						<dd>
+							{branch.rate_mw > 0
+								? `${fmt.format(branch.rate_mw)} ${saved.formulation === 'dcopf' ? 'MW' : 'MVA'}`
+								: 'Unlimited'}
+						</dd>
+					</div>
+					{#if flow}<div>
+							<dt>Active power</dt>
+							<dd>{fmt.format(flow.pf)} MW</dd>
+						</div>
+						<div>
+							<dt>Loading</dt>
+							<dd>{fmt.format(flow.loading * 100)}%</dd>
+						</div>{/if}
+				</dl>
+			</div>
+		{/if}
+	</section>
+{/if}
+
+<style>
+	h2 {
+		margin: 0 0 8px;
+		font-size: 15px;
+		font-weight: 600;
+	}
+	.state-label {
+		display: flex;
+		justify-content: space-between;
+		gap: 12px;
+		margin: 0 0 16px;
+		font-size: 12px;
+	}
+	.state-label span {
+		flex: none;
+		color: var(--text-secondary);
+		font-size: 11px;
+	}
+	dl {
+		margin: 0;
+		display: grid;
+		gap: 6px;
+		font: 12px/1.5 var(--font-mono);
+	}
+	dl > div {
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+		gap: 12px;
+	}
+	dt {
+		color: var(--text-secondary);
+	}
+	dd {
+		margin: 0;
+		text-align: right;
+	}
+	small {
+		display: block;
+		font-size: 10px;
+		color: var(--text-secondary);
+	}
+	.live {
+		margin: 16px 0;
+	}
+	button,
+	select {
+		border: 1px solid var(--line);
+		border-radius: 4px;
+		color: var(--ink);
+		background: var(--paper);
+		padding: 6px 8px;
+		font: 12px/1.4 var(--font-display);
+	}
+	button {
+		cursor: pointer;
+	}
+	button:focus-visible,
+	select:focus-visible {
+		outline: 2px solid var(--focus-ring);
+		outline-offset: 2px;
+	}
+	.map-values {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: 12px;
+		margin: 16px 0;
+		font-size: 12px;
+	}
+	.equipment {
+		border-top: 1px solid var(--line);
+		margin-top: 16px;
+		padding-top: 16px;
+	}
+	h3 {
+		margin: 0 0 12px;
+		font-size: 13px;
+		font-weight: 600;
+	}
+	h3 span {
+		display: block;
+		margin-top: 3px;
+		color: var(--text-secondary);
+		font-size: 11px;
+		font-weight: 400;
+	}
+</style>

package/dist/components/SavedNetworkDetails.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const SavedNetworkDetails: import("svelte").Component<Record<string, never>, {}, "">;
+type SavedNetworkDetails = ReturnType<typeof SavedNetworkDetails>;
+export default SavedNetworkDetails;

package/dist/components/SensitivityReadout.svelte

@@ -5,19 +5,24 @@
 
 	const app = getAppState();
 	const ctrl = getController();
-	const busUnitTitle =
-		'LMP is measured in $/MWh and demand is perturbed in MW, so dLMP/dd has units ($/MWh)/MW. ' +
-		'DC LMPs move only when a binding constraint changes, so most nudges in this slider range ' +
-		'shift prices very little unless the active set changes.';
-	const branchUnitTitle =
-		'LMP is measured in $/MWh and the rating is perturbed in MVA, so dLMP/dfmax has units ' +
-		"($/MWh)/MVA. The column is zero unless the line's limit is binding.";
+	const reportedUnits = $derived(
+		(ctrl.selectedSensitivity?.units ?? '(objective units/MW)/MW').replaceAll(
+			'objective_unit',
+			'objective units'
+		)
+	);
+	const busUnitTitle = $derived(
+		`LMP response to active demand, in ${reportedUnits}. The response is small while the active set stays unchanged.`
+	);
+	const branchUnitTitle = $derived(
+		`LMP response to the thermal rating, in ${reportedUnits}. The column is zero when the limit is inactive.`
+	);
 
-	// Branch mode: the selection is a line and the column is ∂LMP/∂rating; the
+	// Branch mode: the selection is a line and the column is price/rating; the
 	// legend and preview pipeline are identical (both columns are bus-keyed).
 	const branchMode = $derived(app.selectedBranch !== null);
 	const unitTitle = $derived(branchMode ? branchUnitTitle : busUnitTitle);
-	const units = $derived(branchMode ? '($/MWh)/MVA' : '($/MWh)/MW');
+	const previewUnits = $derived(app.previewPrices?.units ?? 'objective units/MW');
 
 	const previewStep = $derived(
 		branchMode
@@ -54,33 +59,36 @@
 		{#if ctrl.sensSummary?.flat}
 			<div class="legend flat" style:background={ctrl.flatSensBackground}></div>
 			<div class="legend-labels mono single">
-				<span>uniform {signedExp(ctrl.sensSummary.mean * previewStep)} $/MWh</span>
+				<span
+					>uniform {signedExp(ctrl.sensSummary.mean * previewStep)}
+					{previewUnits}</span
+				>
 			</div>
 		{:else if ctrl.previewScale}
 			<!-- The bounds are fixed for the whole drag (column scale × full slider
 			     deflection), so the ramp ends label the colors: full green/purple is
-			     the predicted ΔLMP at full deflection, and intensity grows with the
+			     the predicted LMP change at full deflection, and intensity grows with the
 			     step instead of renormalizing every frame. -->
 			<div class="legend" style:background={sensGradient}></div>
 			<div class="legend-labels mono">
 				<span>&minus;{ctrl.previewScale.toExponential(1)}</span>
-				<span>&Delta;LMP $/MWh</span>
+				<span>&Delta; LMP {previewUnits}</span>
 				<span>+{ctrl.previewScale.toExponential(1)}</span>
 			</div>
 		{/if}
 	{:else}
 		<p class="dim small sensitivity-copy" title={unitTitle}>
 			{#if branchMode}
-				LMP response per MVA of rating on line {branchLabel}.
+				LMP response to the rating on line {branchLabel}.
 			{:else}
-				LMP response per MW of demand at bus {app.selectedBus}.
+				LMP response to demand at bus {app.selectedBus}.
 			{/if}
 			<span class="hint-dot mono" title={unitTitle} aria-label={unitTitle}>i</span>
 		</p>
 		{#if ctrl.sensSummary?.flat}
 			<div class="legend flat" style:background={ctrl.flatSensBackground}></div>
 			<div class="legend-labels mono single">
-				<span>uniform {signedExp(ctrl.sensSummary.mean)} {units}</span>
+				<span>uniform {signedExp(ctrl.sensSummary.mean)} {reportedUnits}</span>
 			</div>
 		{:else if ctrl.sensSummary}
 			<div class="legend" style:background={sensGradient}></div>
@@ -93,7 +101,7 @@
 			<div class="legend" style:background="var(--line)" style:opacity="0.4"></div>
 			<div class="legend-labels mono single">
 				<span class="blink">
-					computing {#if branchMode}&part;LMP/&part;fmax{:else}&part;LMP/&part;d{/if}&hellip;
+					computing {#if branchMode}&part;value/&part;fmax{:else}&part;value/&part;d{/if}&hellip;
 				</span>
 			</div>
 		{/if}