@tellegen/svelte 0.4.0 → 0.4.2

package/dist/components/RatingSlider.svelte

@@ -22,34 +22,33 @@
 	const neutralPos = $derived(thumbAlignedPos(neutralFrac));
 	const fillLo = $derived(valFrac < neutralFrac ? valPos : neutralPos);
 	const fillHi = $derived(valFrac < neutralFrac ? neutralPos : valPos);
-	const sliderTip =
-		'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 sliderTip = 'Drag to preview, release to solve. The tick marks the committed rating.';
+	const disabledTip = 'Synthesized rating; not adjustable';
 	const scoreTip =
-		'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.';
+		'Gradient: first-order estimate from the committed point. Exact: solved objective change.';
 </script>
 
 {#if ctrl.activeSolvable}
 	{@const c = ctrl.activeSolvable}
 	{@const branch = ctrl.selectedBranchData}
 	<div class="slider-block">
-		<div class="slider-head mono">
-			<span>&Delta; rating</span>
-			<span class="val">{signed(ctrl.ratingSliderValue)} MW</span>
+		<div class="slider-head">
+			<span>Rating change</span>
+			<span class="val mono">{signed(ctrl.ratingSliderValue)} MW</span>
 		</div>
-		<div class="line-row mono">
+		<div class="line-row">
 			{#if branch}
 				<span class="dim"
-					>line {branch.from}&#8201;&ndash;&#8201;{branch.to}, {fmt.format(branch.rate_mw)} MW</span
+					>Line <span class="mono"
+						>{branch.from}&#8201;&ndash;&#8201;{branch.to}, {fmt.format(branch.rate_mw)} MW</span
+					></span
 				>
 			{/if}
-			<span class="dim">
-				{#if bounds.disabled}
-					not adjustable
-				{:else}
-					{fmt.format(bounds.min)} to +{fmt.format(bounds.max)} MW
-				{/if}
-			</span>
+			{#if bounds.disabled}
+				<span class="dim">Not adjustable</span>
+			{:else}
+				<span class="mono dim">{fmt.format(bounds.min)} to +{fmt.format(bounds.max)} MW</span>
+			{/if}
 		</div>
 		<div
 			class="slider-track"
@@ -63,7 +62,7 @@
 				step="any"
 				disabled={bounds.disabled}
 				bind:value={ctrl.ratingSliderCurrent, ctrl.setRatingPreview}
-				aria-label="rating delta at selected line"
+				aria-label="Rating delta at selected line"
 				onpointerdown={() => ctrl.setRatingPreview(ctrl.ratingSliderValue)}
 				onkeydown={(e) => {
 					const next = sliderKeyValue(e.key, ctrl.ratingSliderValue, bounds.min, bounds.max);
@@ -80,18 +79,18 @@
 			/>
 		</div>
 		<div class="rating-feedback" class:idle={!ctrl.previewing && !ctrl.isPerturbed(c)}>
-			<p class="pred mono dim" aria-hidden={!(ctrl.predictedDeltaObj !== null && ctrl.previewing)}>
+			<p class="pred dim" aria-hidden={!(ctrl.predictedDeltaObj !== null && ctrl.previewing)}>
 				{#if ctrl.predictedDeltaObj !== null && ctrl.previewing}
-					predicted &Delta;objective {signed(ctrl.predictedDeltaObj)}
+					Predicted objective change <span class="mono">{signed(ctrl.predictedDeltaObj)}</span>
 				{:else}
 					&nbsp;
 				{/if}
 			</p>
-			<p class="score mono" aria-hidden={!(ctrl.gradientScore && ctrl.isPerturbed(c))}>
+			<p class="score" aria-hidden={!(ctrl.gradientScore && ctrl.isPerturbed(c))}>
 				{#if ctrl.gradientScore && ctrl.isPerturbed(c)}
 					<span title={scoreTip}>
-						gradient {signed(ctrl.gradientScore.pred)}, exact {signed(ctrl.gradientScore.exact)} objective
-						units
+						Gradient <span class="mono">{signed(ctrl.gradientScore.pred)}</span>, exact
+						<span class="mono">{signed(ctrl.gradientScore.exact)}</span> objective units
 					</span>
 				{:else}
 					&nbsp;
@@ -99,7 +98,7 @@
 			</p>
 			<div class="reset-row">
 				{#if ctrl.isPerturbed(c)}
-					<button class="reset mono" onclick={() => ctrl.resetCase(c)}>reset rating</button>
+					<button class="reset" onclick={() => ctrl.resetCase(c)}>Reset rating</button>
 				{/if}
 			</div>
 		</div>

package/dist/components/RestoreDefaultsButton.svelte

@@ -6,9 +6,7 @@
 </script>
 
 {#if config.loadDefaultCases && ctrl.casesLoaded && ctrl.hiddenDefaults.size > 0}
-	<button class="restore-defaults mono" onclick={ctrl.restoreDefaultCases}>
-		&#8634; restore default cases
-	</button>
+	<button class="restore-defaults" onclick={ctrl.restoreDefaultCases}>Restore default cases</button>
 {/if}
 
 <style>
@@ -22,6 +20,7 @@
 		border: 1px solid var(--line);
 		border-radius: 3px;
 		color: var(--text-secondary);
+		font-family: inherit;
 		font-size: 11px;
 		cursor: pointer;
 		box-shadow: var(--elev-1);

package/dist/components/SensitivityReadout.svelte

@@ -11,17 +11,11 @@
 			'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.`
-	);
+	const unitTitle = $derived(`Units: ${reportedUnits}`);
 
 	// 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 previewUnits = $derived(app.previewPrices?.units ?? 'objective units/MW');
 
 	const previewStep = $derived(
@@ -42,25 +36,22 @@
 	<span class="chip">
 		{ctrl.previewing ? 'LMP preview' : branchMode ? '∂LMP/∂rating' : '∂LMP/∂d'}
 	</span>
-	<span class="mono dim">
-		{#if branchMode}line {branchLabel}{:else}bus {app.selectedBus}{/if}
+	<span class="dim">
+		{#if branchMode}Line <span class="mono">{branchLabel}</span>{:else}Bus
+			<span class="mono">{app.selectedBus}</span>{/if}
 	</span>
-	<button class="mono" onclick={ctrl.clearSelection}
-		><span class="key-hint">esc&nbsp;</span>clear</button
-	>
+	<button onclick={ctrl.clearSelection} aria-keyshortcuts="Escape" title="Esc">Clear</button>
 </div>
 <div class="sensitivity-readout" aria-live="polite">
 	{#if ctrl.previewing}
 		<p class="dim small">
-			{ctrl.activeSolvable?.solving
-				? 'Exact solve running; the map keeps the LMP preview.'
-				: 'First order LMP preview. Release for the exact solve.'}
+			{ctrl.activeSolvable?.solving ? 'Solving…' : 'First-order preview. Release to solve.'}
 		</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 * previewStep)}
+					>Uniform {signedExp(ctrl.sensSummary.mean * previewStep)}
 					{previewUnits}</span
 				>
 			</div>
@@ -88,7 +79,7 @@
 		{#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)} {reportedUnits}</span>
+				<span>Uniform {signedExp(ctrl.sensSummary.mean)} {reportedUnits}</span>
 			</div>
 		{:else if ctrl.sensSummary}
 			<div class="legend" style:background={sensGradient}></div>
@@ -100,9 +91,7 @@
 		{:else if app.sensitivityLoading}
 			<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;value/&part;fmax{:else}&part;value/&part;d{/if}&hellip;
-				</span>
+				<span class="blink">Computing&hellip;</span>
 			</div>
 		{/if}
 	{/if}
@@ -133,11 +122,4 @@
 		line-height: 1.35;
 		white-space: nowrap;
 	}
-
-	/* No Esc key to name on a touch device. */
-	@media (hover: none), (pointer: coarse) {
-		.key-hint {
-			display: none;
-		}
-	}
 </style>

package/dist/components/SolveCard.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getAppState, getController } from '../context.svelte.js';
-	import { formulationLabel, solveMetaLabel } from '../format.js';
+	import { formulationLabel } from '../format.js';
 	import Sparkline from '../Sparkline.svelte';
 	import PanelFrame from './PanelFrame.svelte';
 	let open = $state(true);
@@ -16,67 +16,101 @@
 				: []
 			: (active?.iterations ?? [])
 	);
+	/** Named only when a server took part; the browser engine is the default. */
+	const server = $derived(
+		active?.solveBackend === 'rust-server'
+			? 'Server'
+			: active?.solveBackend === 'clarabel-wasm-server-sensitivity'
+				? 'Server price sensitivity'
+				: null
+	);
 </script>
 
 {#if saved || (active && (active.solving || active.solveMs != null))}
 	<PanelFrame id="solver" title="Solver" side="right" order={10} width={320} bind:open>
 		<div class="solvecard">
-			<div class="solve-label mono">
-				{saved ? 'Saved result' : active?.formulation === 'acpf' ? 'Power flow' : 'OPF solve'}
-			</div>
 			{#if iterations.length > 1}
 				{#key iterations}
 					<Sparkline {iterations} />
 				{/key}
 			{/if}
 			{#if saved}
-				<div class="solve-meta mono dim">
-					<span class="solve-formulation">{formulationLabel(saved.formulation)}</span>
-					<span>{saved.solution?.status ?? 'Not solved'}</span>
-					<span>Saved state: {saved.label}</span>
-				</div>
+				<dl>
+					<div>
+						<dt>Calculation</dt>
+						<dd>{formulationLabel(saved.formulation)}</dd>
+					</div>
+					<div>
+						<dt>Result</dt>
+						<dd>{saved.solution?.status ?? 'Not solved'}</dd>
+					</div>
+					<div>
+						<dt>Saved state</dt>
+						<dd>{saved.label}</dd>
+					</div>
+				</dl>
 			{:else if active}
-				<div class="solve-meta mono dim">
-					<span class="solve-formulation">{formulationLabel(active.formulation)}</span>
-					<span>{solveMetaLabel(active)}</span>
-					{#if active.solveMs != null}<span>{active.solveMs} ms</span>{/if}
-				</div>
-				{#if active.solveBackend === 'rust-server' && active.solveFallbackReason}
-					<p class="fallback-reason mono dim" title={active.solveFallbackReason}>
-						fallback: {active.solveFallbackReason}
-					</p>
-				{/if}
+				<dl>
+					<div>
+						<dt>Calculation</dt>
+						<dd>{formulationLabel(active.formulation)}</dd>
+					</div>
+					{#if iterations.length > 1}
+						<div>
+							<dt>Iterations</dt>
+							<dd class="mono">{iterations.length}</dd>
+						</div>
+					{/if}
+					{#if server}
+						<div>
+							<dt>Solver</dt>
+							<dd>{server}</dd>
+						</div>
+					{/if}
+					{#if active.solveMs != null}
+						<div>
+							<dt>Time</dt>
+							<dd class="mono">{active.solveMs} ms</dd>
+						</div>
+					{/if}
+					{#if active.solveBackend === 'rust-server' && active.solveFallbackReason}
+						<div>
+							<dt>Fallback</dt>
+							<dd title={active.solveFallbackReason}>{active.solveFallbackReason}</dd>
+						</div>
+					{/if}
+				</dl>
 			{/if}
 		</div>
 	</PanelFrame>
 {/if}
 
 <style>
-	.solve-label {
-		font-size: 13px;
-		margin-bottom: 8px;
-	}
 	.solvecard {
 		padding: 13px 15px 11px;
 	}
 
-	.solve-meta {
-		display: flex;
-		align-items: center;
-		flex-wrap: wrap;
-		gap: 10px 14px;
+	dl {
+		margin: 6px 0 0;
 		font-size: 12px;
-		margin-top: 6px;
 	}
 
-	.solve-formulation {
-		color: var(--text-accent);
+	dl div {
+		display: flex;
+		justify-content: space-between;
+		gap: 12px;
+		padding: 2px 0;
 	}
 
-	.fallback-reason {
-		margin: 6px 0 0;
-		font-size: 12px;
-		line-height: 1.35;
+	dt {
+		flex: none;
+		color: var(--text-secondary);
+	}
+
+	dd {
+		min-width: 0;
+		margin: 0;
+		text-align: right;
 		overflow-wrap: anywhere;
 	}
 </style>

package/dist/components/TopMovers.svelte

@@ -14,15 +14,15 @@
 
 <div class="movers-block">
 	{#if !ctrl.previewing && ctrl.topMovers.length > 0}
-		<table class="mono">
-			<caption class="mono dim" title={unitTitle}>
-				largest LMP response <span class="unit">{units}</span>
+		<table>
+			<caption class="dim" title={unitTitle}>
+				Largest LMP response <span class="mono unit">{units}</span>
 			</caption>
 			<tbody>
 				{#each ctrl.topMovers as mover (mover.bus)}
 					<tr>
-						<td>bus {mover.bus}</td>
-						<td class:pos={mover.value > 0} class:neg={mover.value < 0}>
+						<td>Bus <span class="mono">{mover.bus}</span></td>
+						<td class="mono" class:pos={mover.value > 0} class:neg={mover.value < 0}>
 							{signedExp(mover.value)}
 						</td>
 					</tr>

package/dist/context.svelte.d.ts

@@ -9,15 +9,19 @@ export interface TellegenUiConfig {
     orgLabel: string;
     showFooter: boolean;
     /** `'dark'` sets `data-theme="dark"` on the document root while the
-     * provider is mounted, which switches the `styles.css` tokens. */
+     * provider is mounted, which switches the `styles.css` tokens. The
+     * provider keeps it in step with its prop. */
     theme: 'light' | 'dark';
     /** CARTO basemap key for the default shell's map, trimmed; empty for
-     * none. See `TellegenMap`'s `cartoApiKey`. */
+     * none. See `TellegenMap`'s `cartoApiKey`. The provider keeps it in step
+     * with its prop. */
     cartoApiKey: string;
 }
 export type TellegenUiOptions = Partial<TellegenUiConfig>;
 export declare const DEFAULT_TELLEGEN_UI_CONFIG: TellegenUiConfig;
 export declare function resolveTellegenUiConfig(options?: TellegenUiOptions): TellegenUiConfig;
+export declare const resolveTheme: (theme: TellegenUiOptions["theme"]) => TellegenUiConfig["theme"];
+export declare const resolveCartoApiKey: (key: TellegenUiOptions["cartoApiKey"]) => string;
 export declare const setAppState: (a: AppState) => AppState;
 export declare const setController: (c: Controller) => Controller;
 export declare const setUiConfig: (config: TellegenUiConfig) => TellegenUiConfig;

package/dist/context.svelte.js

@@ -21,10 +21,12 @@ export function resolveTellegenUiConfig(options = {}) {
         orgHref: options.orgHref ?? DEFAULT_TELLEGEN_UI_CONFIG.orgHref,
         orgLabel: options.orgLabel ?? DEFAULT_TELLEGEN_UI_CONFIG.orgLabel,
         showFooter: options.showFooter ?? DEFAULT_TELLEGEN_UI_CONFIG.showFooter,
-        theme: options.theme ?? DEFAULT_TELLEGEN_UI_CONFIG.theme,
-        cartoApiKey: normalizeCartoApiKey(options.cartoApiKey) ?? DEFAULT_TELLEGEN_UI_CONFIG.cartoApiKey
+        theme: resolveTheme(options.theme),
+        cartoApiKey: resolveCartoApiKey(options.cartoApiKey)
     };
 }
+export const resolveTheme = (theme) => theme ?? DEFAULT_TELLEGEN_UI_CONFIG.theme;
+export const resolveCartoApiKey = (key) => normalizeCartoApiKey(key) ?? DEFAULT_TELLEGEN_UI_CONFIG.cartoApiKey;
 export const setAppState = (a) => setContext(APP, a);
 export const setController = (c) => setContext(CTRL, c);
 export const setUiConfig = (config) => setContext(CONFIG, config);

package/dist/controller.svelte.d.ts

@@ -83,6 +83,7 @@ export declare class Controller {
     localSeq: number;
     loading: Promise<void> | null;
     private readonly dropBatchGate;
+    disposed: boolean;
     nearbyRangeAnchor: DemandRangeAnchor | null;
     hiddenDefaults: Set<string>;
     casesLoaded: boolean;
@@ -129,6 +130,12 @@ export declare class Controller {
     maybeStartLocalSolve(id: string): void;
     getStudy(c: SolvableCase, studyInputJson: string): Promise<BrowserStudy | null>;
     browserSensitivity(c: SolvableCase, studyInputJson: string, target: SensTarget): Promise<SensitivityColumn | null>;
+    /** Release every engine handle this controller holds: each case's browser
+     * Study, including one still being built, and each multiconductor
+     * session, with their pending edits and in-flight requests.
+     * `TellegenProvider` calls it when it unmounts; the controller builds no
+     * Study and keeps no new session afterwards. */
+    dispose(): void;
     disposeStudy(c: SolvableCase): void;
     acceptSensitivity(c: SolvableCase, col: SensitivityColumn | null, target: SensTarget | null, sensitivitySeq?: number): void;
     finishSolve(c: SolvableCase, seq: number, target: SensTarget | null): void;

package/dist/controller.svelte.js

@@ -19,10 +19,9 @@ function localHasBus(c, busId) {
 }
 /** Terminal copy when nothing can solve. Two facts decide the wording: whether
  * this browser's engine failure is known permanent, and that the server
- * declines compute. Server compute exists in the codebase but ships disabled;
- * interest routes to email until it is offered. */
-const WASM_REQUIRED_NOTICE = 'this browser cannot run the WebAssembly engine that solves locally, and server side compute is disabled in this demo. it may be offered later; to express interest, email Samuel Talkington at talks@umich.edu';
-const COMPUTE_OFF_NOTICE = 'solving in this browser did not complete, and server side compute is disabled in this demo. retry to run the browser engine again, or email Samuel Talkington at talks@umich.edu to express interest in server compute';
+ * declines compute. */
+const WASM_REQUIRED_NOTICE = 'This browser cannot run the WebAssembly engine, and server compute is disabled';
+const COMPUTE_OFF_NOTICE = 'The browser solve did not complete, and server compute is disabled. Retry to run it again';
 /** Upper bound on waiting for a camera fly-to before the sensitivity solve
  * starts anyway: a missing map or a cue that never appears must not stall the
  * selection. */
@@ -107,6 +106,8 @@ export class Controller {
     // File reads and worker messages retain whole buffers. Admit one validated
     // batch at a time so repeated drops cannot multiply the aggregate byte cap.
     dropBatchGate = new DropBatchGate();
+    // Set by dispose(). Not $state; nothing renders it.
+    disposed = false;
     nearbyRangeAnchor = $state(null);
     // Default cases the user has closed; drives the restore affordance. Seeded in load().
     hiddenDefaults = $state(new Set());
@@ -268,6 +269,9 @@ export class Controller {
     // under that formulation. Returns null when the sens module can't load; the caller then
     // falls back to the server, surfacing solveFallbackReason.
     async getStudy(c, studyInputJson) {
+        // A disposed controller builds nothing that would outlive it.
+        if (this.disposed)
+            return null;
         const latched = this.studyUnavailable.get(c);
         if (latched) {
             c.solveFallbackReason ??= latched;
@@ -347,6 +351,28 @@ export class Controller {
         const study = await this.getStudy(c, studyInputJson);
         return study ? study.sensitivity(c.id, this.caseDeltas(c), this.caseRatings(c), target) : null;
     }
+    /** Release every engine handle this controller holds: each case's browser
+     * Study, including one still being built, and each multiconductor
+     * session, with their pending edits and in-flight requests.
+     * `TellegenProvider` calls it when it unmounts; the controller builds no
+     * Study and keeps no new session afterwards. */
+    dispose() {
+        if (this.disposed)
+            return;
+        this.disposed = true;
+        this.abort?.abort();
+        this.abort = null;
+        for (const c of [...this.app.cases, ...this.app.localCases])
+            this.disposeStudy(c);
+        for (const c of this.app.multiCases) {
+            c.solveAbort?.abort();
+            if (c.mcEditTimer !== null)
+                clearTimeout(c.mcEditTimer);
+            c.mcEditTimer = null;
+            c.mcSession?.free();
+            c.mcSession = null;
+        }
+    }
     // Release a case's Study (if any) when the case is removed.
     disposeStudy(c) {
         const cached = this.caseStudies.get(c);
@@ -487,7 +513,7 @@ export class Controller {
             return null;
         const domain = scalarDomain(this.activeDisplay.mode, values);
         const { min, max } = extent(values);
-        const flatThreshold = this.activeDisplay.mode === 'price' ? 1 : 1e-5;
+        const flatThreshold = this.activeDisplay.mode === 'price' || this.activeDisplay.mode === 'demand' ? 1 : 1e-5;
         return {
             lo: { value: domain.lo, clamped: min < domain.lo - flatThreshold / 20 },
             hi: { value: domain.hi, clamped: max > domain.hi + flatThreshold / 20 },
@@ -1740,7 +1766,9 @@ export class Controller {
         if (FORMULATIONS.find((f) => f.id === next)?.disabled)
             return;
         c.formulation = next;
-        this.app.displayMode = next === 'acpf' ? 'voltage' : 'price';
+        // Demand does not depend on the calculation, so a demand colouring stays.
+        if (this.app.displayMode !== 'demand')
+            this.app.displayMode = next === 'acpf' ? 'voltage' : 'price';
         this.bumpRevision(c);
         // The committed point carries over (same demand), but the model and its solution do
         // not; drop the Study and the cached solutions so they rebuild under `next`.
@@ -2142,7 +2170,7 @@ export class Controller {
     }
     /** Compute terminal quantities only for the retained input and current case revision. */
     solveMultiCase = async (c, options = {}, signal) => {
-        if (signal?.aborted)
+        if (signal?.aborted || this.disposed)
             throw new DOMException('Calculation cancelled', 'AbortError');
         if (c.solving)
             throw new Error('A calculation is already running for this case');
@@ -2185,7 +2213,8 @@ export class Controller {
                     snapshot?.result ?? (await this.mcTransport.solveMcModule(input, options, abort.signal));
                 result = summarizeMcPfResult(fullResult);
             }
-            if (abort.signal.aborted)
+            // dispose() aborts too; a session that arrives after it is freed below.
+            if (abort.signal.aborted || this.disposed)
                 throw new DOMException('Calculation cancelled', 'AbortError');
             if (seq !== c.solveSeq ||
                 (retainedAtStart ? retainedAtStart !== c.mcSession : input !== c.moduleJson) ||

package/dist/display.d.ts

@@ -12,8 +12,9 @@ export type DisplayOption = {
 };
 /** Variables present in the current result. Power flow has no LMP values. */
 export declare function displayMetaFor(c: SolvableCase | null): DisplayOption[];
-/** Bus LMPs, voltage angles in radians, or voltage magnitudes in per unit.
- * SOCWR supplies squared voltages, which are converted to magnitudes here. */
+/** Bus LMPs, voltage angles in radians, voltage magnitudes in per unit, or
+ * demand in MW with the case's committed changes. SOCWR supplies squared
+ * voltages, which are converted to magnitudes here. */
 export declare function displaySeriesFor(c: SolvableCase | null, mode: DisplayMode): {
     bus: number;
     value: number;

package/dist/display.js

@@ -1,5 +1,4 @@
-import { priceGradient } from './colors.js';
-import { priceCopy } from './format.js';
+import { demandGradient, priceGradient } from './colors.js';
 import { CaseState } from './state.svelte.js';
 /** Variables present in the current result. Power flow has no LMP values. */
 export function displayMetaFor(c) {
@@ -11,7 +10,9 @@ export function displayMetaFor(c) {
             mode: 'price',
             label: 'LMP',
             unit: 'objective units/MW',
-            copy: priceCopy(c.formulation),
+            copy: c.formulation === 'socwr'
+                ? 'Locational marginal price, SOCWR relaxation'
+                : 'Locational marginal price',
             gradient: priceGradient
         });
     }
@@ -20,29 +21,45 @@ export function displayMetaFor(c) {
             mode: 'voltage',
             label: '|V|',
             unit: 'pu',
-            copy: c.formulation === 'socwr'
-                ? 'SOCWR voltage magnitude from the current relaxed solution.'
-                : 'Bus voltage magnitude from the current power-flow result.',
+            copy: c.formulation === 'socwr' ? 'Voltage magnitude, SOCWR relaxation' : 'Voltage magnitude',
             gradient: priceGradient
         });
     }
     if (c.solution.va.length > 0) {
         options.push({
             mode: 'angle',
-            label: 'angle',
+            label: 'Angle',
             unit: 'rad',
-            copy: 'Bus voltage angle from the current result.',
+            copy: 'Voltage angle',
             gradient: priceGradient
         });
     }
+    // Last, so a mode the result cannot show still falls back to a result variable.
+    if (c.network?.buses.length) {
+        options.push({
+            mode: 'demand',
+            label: 'Demand',
+            unit: 'MW',
+            copy: 'Demand, square-root scale',
+            gradient: demandGradient
+        });
+    }
     return options;
 }
-/** Bus LMPs, voltage angles in radians, or voltage magnitudes in per unit.
- * SOCWR supplies squared voltages, which are converted to magnitudes here. */
+/** Bus LMPs, voltage angles in radians, voltage magnitudes in per unit, or
+ * demand in MW with the case's committed changes. SOCWR supplies squared
+ * voltages, which are converted to magnitudes here. */
 export function displaySeriesFor(c, mode) {
     const sol = c?.solution;
-    if (!sol)
+    if (!c || !sol)
         return [];
+    if (mode === 'demand') {
+        const deltas = caseDeltas(c);
+        return (c.network?.buses ?? []).map((b) => ({
+            bus: b.id,
+            value: b.demand_mw + (deltas[b.id] ?? 0)
+        }));
+    }
     if (mode === 'angle')
         return sol.va;
     if (mode === 'voltage') {

package/dist/format.d.ts

@@ -1,19 +1,11 @@
-import type { SolveIteration } from './api.js';
 import type { RGBA } from './colors.js';
-import type { DisplayMode, SolveBackend } from './state.svelte.js';
+import type { DisplayMode } from './state.svelte.js';
 import { type Formulation } from '@tellegen/engine';
 export { errorText } from '@tellegen/engine';
 /** The short menu label for a formulation tag (e.g. `acopf` -> `AC OPF`). */
 export declare function formulationLabel(id: Formulation): string;
 export declare function formulationHint(id: Formulation): string;
-export declare function priceCopy(id: Formulation): string;
 export declare function splitName(name: string): [string, string];
-/** Structural shape `solveMetaLabel` needs, satisfied by `CaseState` and `LocalCase`. */
-type SolveMeta = {
-    iterations?: SolveIteration[];
-    solveBackend: SolveBackend | null;
-};
-export declare function solveMetaLabel(c: SolveMeta): string;
 export declare const INFEASIBLE_DISPATCH = "No feasible dispatch: demand cannot be served within line and generator limits";
 /** The message for a local case whose browser solve failed, and the
  * technical detail to disclose behind it. An infeasible DC OPF means the

package/dist/format.js

@@ -9,23 +9,10 @@ export function formulationLabel(id) {
 export function formulationHint(id) {
     return FORMULATIONS.find((f) => f.id === id)?.hint ?? id;
 }
-export function priceCopy(id) {
-    const definition = 'Locational marginal price (LMP): the change in the OPF objective for an additional MW at a bus, in objective units/MW.';
-    return id === 'socwr'
-        ? `${definition} Prices come from the SOCWR relaxation. Select a bus to see their sensitivity.`
-        : `${definition} Select a bus to see its demand sensitivity.`;
-}
 export function splitName(name) {
     const m = name.match(/^(.*?)\s*\((.*)\)$/);
     return m ? [m[1], m[2]] : [name, ''];
 }
-export function solveMetaLabel(c) {
-    if ((c.iterations ?? []).length > 1)
-        return `${c.iterations?.length} iterations`;
-    if (c.solveBackend === 'clarabel-wasm-server-sensitivity')
-        return 'server price sensitivity';
-    return c.solveBackend === 'rust-server' ? 'server solve' : 'browser solve';
-}
 export const INFEASIBLE_DISPATCH = 'No feasible dispatch: demand cannot be served within line and generator limits';
 /** The message for a local case whose browser solve failed, and the
  * technical detail to disclose behind it. An infeasible DC OPF means the
@@ -59,4 +46,4 @@ export function extent(values) {
 export const fmt = new Intl.NumberFormat('en-US', { maximumFractionDigits: 1 });
 export const signed = (v) => `${v < 0 ? '−' : '+'}${fmt.format(Math.abs(v))}`;
 export const signedExp = (v) => `${v < 0 ? '−' : '+'}${Math.abs(v).toExponential(2)}`;
-export const displayFmt = (mode, value) => mode === 'price' ? fmt.format(value) : value.toFixed(3);
+export const displayFmt = (mode, value) => mode === 'price' || mode === 'demand' ? fmt.format(value) : value.toFixed(3);