@tellegen/svelte 0.2.0 → 0.4.0

package/dist/components/PanelHost.svelte

@@ -0,0 +1,237 @@
+<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';
+
+	// The dock insets come from `--tellegen-dock-left/right/bottom` on an
+	// ancestor (defaults 20px, 20px, 100px), so a custom shell with its own
+	// rail or status bar can move the docks without restyling them.
+	let { showToolbar = true }: { showToolbar?: boolean } = $props();
+
+	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()}
+/>
+{#if showToolbar}
+	<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}
+{#if layout.storageError}<p class="layout-error" role="status" style:top="{panelTop}px">
+		{layout.storageError}
+	</p>{/if}
+<!-- The docks and the drawer take focus (tabindex -1) when a closed panel has
+	 no toolbar button or opener to hand it back to. The drawer stays rendered,
+	 at zero height, while no panel is open in it. -->
+{#if layout.compact}
+	<div
+		class="drawer"
+		data-panel-drawer
+		role="region"
+		aria-label="Panels"
+		tabindex="-1"
+		style:bottom="{bottomReserve}px"
+		style:height="{drawer ? drawerHeight : 0}px"
+	>
+		{#if drawer}<PanelCard panel={drawer} mobile />{/if}
+	</div>
+{:else}
+	<div
+		class="dock left"
+		style:bottom="max(var(--tellegen-dock-bottom, 100px), {bottomReserve}px)"
+		data-panel-dock="left"
+		role="region"
+		aria-label="Left panels"
+		tabindex="-1"
+		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="max(var(--tellegen-dock-bottom, 100px), {bottomReserve}px)"
+		data-panel-dock="right"
+		role="region"
+		aria-label="Right panels"
+		tabindex="-1"
+		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: var(--tellegen-dock-left, 20px);
+		right: var(--tellegen-dock-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: var(--tellegen-dock-bottom, 100px);
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		gap: 12px;
+		pointer-events: none;
+	}
+	.dock.left {
+		left: var(--tellegen-dock-left, 20px);
+	}
+	.dock.right {
+		right: var(--tellegen-dock-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: var(--tellegen-dock-left, 12px);
+			right: var(--tellegen-dock-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,6 @@
+type $$ComponentProps = {
+    showToolbar?: boolean;
+};
+declare const PanelHost: import("svelte").Component<$$ComponentProps, {}, "">;
+type PanelHost = ReturnType<typeof PanelHost>;
+export default PanelHost;

package/dist/components/PlacementCue.svelte

@@ -21,7 +21,7 @@
 		border-radius: 3px;
 		color: var(--text-accent);
 		font-size: 11px;
-		box-shadow: 0 4px 18px rgba(32, 36, 43, 0.1);
+		box-shadow: var(--elev-cue);
 		pointer-events: none;
 	}
 

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: 13px;
+		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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getController } from '../context.svelte.js';
 	import { fmt, signed } from '../format.js';
+	import { sliderKeyValue } from '../slider.js';
 
 	const ctrl = getController();
 
@@ -25,7 +26,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 +40,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">
@@ -66,7 +65,15 @@
 				bind:value={ctrl.ratingSliderCurrent, ctrl.setRatingPreview}
 				aria-label="rating delta at selected line"
 				onpointerdown={() => ctrl.setRatingPreview(ctrl.ratingSliderValue)}
-				onkeydown={() => ctrl.setRatingPreview(ctrl.ratingSliderValue)}
+				onkeydown={(e) => {
+					const next = sliderKeyValue(e.key, ctrl.ratingSliderValue, bounds.min, bounds.max);
+					if (next === null) {
+						ctrl.setRatingPreview(ctrl.ratingSliderValue);
+						return;
+					}
+					e.preventDefault();
+					ctrl.setRatingPreview(next);
+				}}
 				onpointerup={(e) => ctrl.finishRatingInput(Number(e.currentTarget.value))}
 				onkeyup={(e) => ctrl.finishRatingInput(Number(e.currentTarget.value))}
 				onchange={(e) => ctrl.finishRatingInput(Number(e.currentTarget.value))}
@@ -75,7 +82,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 +90,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;
@@ -109,7 +114,7 @@
 	.slider-head {
 		display: flex;
 		justify-content: space-between;
-		font-size: 11.5px;
+		font-size: 13.5px;
 		color: var(--text-secondary);
 		margin-bottom: 4px;
 	}
@@ -124,7 +129,7 @@
 		justify-content: space-between;
 		gap: 8px;
 		margin: 6px 0 7px;
-		font-size: 10.5px;
+		font-size: 12.5px;
 	}
 
 	.slider-track {
@@ -240,13 +245,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;
 	}

package/dist/components/RestoreDefaultsButton.svelte

@@ -24,7 +24,7 @@
 		color: var(--text-secondary);
 		font-size: 11px;
 		cursor: pointer;
-		box-shadow: 0 2px 10px rgba(32, 36, 43, 0.1);
+		box-shadow: var(--elev-1);
 	}
 
 	.restore-defaults:hover {

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: 13px;
+	}
+	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: 12px;
+		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: 13px;
+		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;