@tellegen/svelte 0.2.0 → 0.3.0

package/dist/TellegenProvider.svelte

@@ -9,6 +9,8 @@
 	} from './context.svelte.js';
 	import { createController } from './controller.svelte.js';
 	import { createAppState } from './state.svelte.js';
+	import { PanelLayout, setPanelLayout } from './panels.svelte.js';
+	import { NoticeCenter, setNoticeCenter } from './notices.svelte.js';
 
 	interface Props extends TellegenUiOptions {
 		children?: Snippet;
@@ -30,6 +32,8 @@
 	const app = createAppState();
 	const ctrl = createController(app, { apiBase: config.apiBase });
 
+	setPanelLayout(new PanelLayout());
+	setNoticeCenter(new NoticeCenter());
 	setUiConfig(config);
 	setAppState(app);
 	setController(ctrl);

package/dist/TellegenShell.svelte

@@ -1,18 +1,24 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import AppFooter from './components/AppFooter.svelte';
+	import NotificationCenter from './components/NotificationCenter.svelte';
 	import AppHeader from './components/AppHeader.svelte';
-	import BusPicker from './components/BusPicker.svelte';
 	import ControlPanel from './components/ControlPanel.svelte';
 	import DropZone from './components/DropZone.svelte';
 	import PlacementCue from './components/PlacementCue.svelte';
 	import RestoreDefaultsButton from './components/RestoreDefaultsButton.svelte';
 	import SolveCard from './components/SolveCard.svelte';
+	import PanelHost from './components/PanelHost.svelte';
+	import { PANEL_COMPACT_QUERY } from './panels.svelte.js';
 	import { getAppState, getController, getUiConfig } from './context.svelte.js';
 	import TellegenMap from './TellegenMap.svelte';
 
-	const FILE_DROP_QUERY = '(hover: hover) and (pointer: fine) and (min-width: 761px)';
-	const COMPACT_QUERY = '(max-width: 760px)';
+	// Gates the drag-and-drop affordance only. The upload button in the header
+	// is always rendered: a file picker works on every device, and the plain
+	// `hover`/`pointer` queries resolve false on a touchscreen laptop that also
+	// has a mouse, which hid the whole file flow there (#110). `any-*` match
+	// when at least one attached input can hover and point precisely.
+	const FILE_DROP_QUERY = '(any-hover: hover) and (any-pointer: fine)';
 
 	const app = getAppState();
 	const ctrl = getController();
@@ -21,6 +27,7 @@
 	let dragDepth = 0;
 
 	$effect(() => {
+		if (app.studyView) return;
 		let hasDisplayMode = false;
 		for (const option of ctrl.displayOptions) {
 			if (option.mode === app.displayMode) {
@@ -29,7 +36,7 @@
 			}
 		}
 		if (ctrl.displayOptions.length > 0 && !hasDisplayMode) {
-			app.displayMode = 'lmp';
+			app.displayMode = 'price';
 		}
 	});
 
@@ -52,7 +59,7 @@
 		syncFileDropUi();
 		query.addEventListener('change', syncFileDropUi);
 
-		const compact = window.matchMedia(COMPACT_QUERY);
+		const compact = window.matchMedia(PANEL_COMPACT_QUERY);
 		const syncCompact = () => {
 			app.compactLayout = compact.matches;
 			if (!compact.matches) app.sheetInset = 0;
@@ -60,8 +67,7 @@
 		syncCompact();
 		compact.addEventListener('change', syncCompact);
 
-		// The sheet sizes its snaps against the viewport and the map caps how far
-		// it lifts the basemap chrome, so both read one measurement taken here.
+		// Shared viewport measurements keep panel and map framing dimensions aligned.
 		const syncViewport = () => (app.viewportHeight = window.innerHeight);
 		syncViewport();
 		window.addEventListener('resize', syncViewport);
@@ -129,15 +135,15 @@
 	/>
 
 	<AppHeader />
+	<PanelHost />
+	<NotificationCenter />
 	<ControlPanel />
 	<SolveCard />
-	<!-- ControlPanel mounts the lookup and the footer inline when compact. -->
-	{#if !app.compactLayout}
-		<BusPicker />
+	{#if !app.studyView}
+		<DropZone />
+		<PlacementCue />
+		<RestoreDefaultsButton />
 	{/if}
-	<DropZone />
-	<PlacementCue />
-	<RestoreDefaultsButton />
 	{#if config.showFooter && !app.compactLayout}
 		<AppFooter />
 	{/if}

package/dist/api.d.ts

@@ -9,8 +9,15 @@ export interface TellegenApiClientOptions {
 export interface TellegenApiClient {
     getCases(): Promise<CaseSummary[]>;
     getNetwork(caseId: string): Promise<Network>;
-    getCaseNetworkJson(caseId: string, signal?: AbortSignal): Promise<string>;
+    getCaseModuleJson(caseId: string, signal?: AbortSignal): Promise<string>;
     getSolution(caseId: string): Promise<Solution>;
+    getSavedCase?(caseId: string): Promise<{
+        base_input: string;
+        input: string;
+        solution: string;
+        view: import('@tellegen/engine').StudyView;
+        display_solution: Solution;
+    }>;
     getSensitivity(caseId: string, bus: number, deltas?: DemandDeltas, signal?: AbortSignal): Promise<SensitivityColumn>;
     getBranchSensitivity(caseId: string, branch: number, deltas?: DemandDeltas, signal?: AbortSignal): Promise<SensitivityColumn>;
     /** Whether the server's compute endpoints (solve stream, sensitivities) are

package/dist/api.js

@@ -77,11 +77,12 @@ export function createApiClient(options = {}) {
     return {
         getCases: () => getJson(fetchImpl, apiPath(apiBase, '/cases')),
         getNetwork: (caseId) => getJson(fetchImpl, apiPath(apiBase, `/cases/${caseId}/network`)),
-        async getCaseNetworkJson(caseId, signal) {
+        async getCaseModuleJson(caseId, signal) {
             const url = apiPath(apiBase, `/cases/${caseId}/case`);
             const res = await checkedFetch(fetchImpl, url, signal);
             return res.text();
         },
+        getSavedCase: (caseId) => getJson(fetchImpl, apiPath(apiBase, `/cases/${caseId}/snapshot`)),
         getSolution: (caseId) => getJson(fetchImpl, apiPath(apiBase, `/cases/${caseId}/solution`)),
         getSensitivity(caseId, bus, deltas = {}, signal) {
             const d = encodeDeltas(deltas);
@@ -111,7 +112,10 @@ export function createApiClient(options = {}) {
                 finished = true;
                 es.close();
             };
-            es.addEventListener('solution', (e) => handlers.onsolution?.(JSON.parse(e.data)));
+            es.addEventListener('solution', (e) => {
+                const solution = JSON.parse(e.data);
+                handlers.onsolution?.(solution);
+            });
             es.addEventListener('sensitivity', (e) => handlers.onsensitivity?.(JSON.parse(e.data)));
             es.addEventListener('fail', (e) => {
                 finish();

package/dist/colors.d.ts

@@ -8,20 +8,20 @@ export interface SensitivityDomain {
     scale: number;
     flat: boolean;
 }
-export declare const lmpColor: (t: number) => RGBA;
-export declare const lmpGradient: string;
-/** Trimmed LMP color domain: 5th to 95th percentile, with a $1/MWh
- * minimum span. LMP distributions are heavy tailed (one binding line pins a
+export declare const priceColor: (t: number) => RGBA;
+export declare const priceGradient: string;
+/** Trimmed nodal value color domain: 5th to 95th percentile, with a one-unit
+ * minimum span. Nodal values are heavy tailed when one binding line pins a
  * handful of buses far from the pack) so min-max scaling compresses the pack
  * into a single hue, and a congestion-free case is one price plus solver
  * noise that an exact scale would stretch into fake structure. Values beyond
  * the domain clamp to the ramp ends. */
-export declare function lmpDomain(values: number[]): {
+export declare function priceDomain(values: number[]): {
     lo: number;
     hi: number;
 };
 /** Center a scalar display variable (bus voltage angle, |V|) on a symmetric domain
- * with a per-mode minimum span; LMP keeps its own robust quantile domain. Shared by
+ * with a per-mode minimum span; nodal values keep their own robust quantile domain. Shared by
  * the control panel readout and the map color scale. */
 export declare function scalarDomain(mode: DisplayMode, values: number[]): {
     lo: number;
@@ -33,7 +33,7 @@ export declare const sensGradient: string;
 export declare const sensNeutral: RGBA;
 export declare const busNeutral: RGBA;
 export declare function sensFlatColor(domain: Pick<SensitivityDomain, 'mean'>): RGBA;
-/** The fixed normalization for a slider drag: predicted ΔLMP divides by
+/** The fixed normalization for a slider drag: predicted nodal value change divides by
  * scale × maxAbsStep, so color intensity is linear in the step and saturates at
  * full deflection for the column's robust-max buses. A per-frame domain over
  * column × step would cancel the step exactly (sensitivityDomain is degree-1

package/dist/colors.js

@@ -19,25 +19,25 @@ function cssGradient(stops) {
     const parts = stops.map((s) => `rgb(${s[0]} ${s[1]} ${s[2]})`);
     return `linear-gradient(90deg, ${parts.join(', ')})`;
 }
-/** Sequential LMP ramp, cheap to expensive: pale straw darkening through
+/** Sequential nodal value ramp: pale straw darkening through
  * amber and rust to near-black maroon. Lightness falls monotonically, so the
  * ordering survives every kind of color vision deficiency. */
-const LMP_STOPS = [
+const PRICE_STOPS = [
     [246, 227, 180, 235],
     [236, 178, 66, 235],
     [212, 116, 34, 240],
     [160, 56, 21, 245],
     [84, 18, 7, 250]
 ];
-export const lmpColor = (t) => ramp(LMP_STOPS, t);
-export const lmpGradient = cssGradient(LMP_STOPS);
-/** Trimmed LMP color domain: 5th to 95th percentile, with a $1/MWh
- * minimum span. LMP distributions are heavy tailed (one binding line pins a
+export const priceColor = (t) => ramp(PRICE_STOPS, t);
+export const priceGradient = cssGradient(PRICE_STOPS);
+/** Trimmed nodal value color domain: 5th to 95th percentile, with a one-unit
+ * minimum span. Nodal values are heavy tailed when one binding line pins a
  * handful of buses far from the pack) so min-max scaling compresses the pack
  * into a single hue, and a congestion-free case is one price plus solver
  * noise that an exact scale would stretch into fake structure. Values beyond
  * the domain clamp to the ramp ends. */
-export function lmpDomain(values) {
+export function priceDomain(values) {
     if (values.length === 0)
         return { lo: 0, hi: 1 };
     const sorted = [...values].sort((a, b) => a - b);
@@ -49,11 +49,11 @@ export function lmpDomain(values) {
     return { lo: mid - span / 2, hi: mid + span / 2 };
 }
 /** Center a scalar display variable (bus voltage angle, |V|) on a symmetric domain
- * with a per-mode minimum span; LMP keeps its own robust quantile domain. Shared by
+ * with a per-mode minimum span; nodal values keep their own robust quantile domain. Shared by
  * the control panel readout and the map color scale. */
 export function scalarDomain(mode, values) {
-    if (mode === 'lmp')
-        return lmpDomain(values);
+    if (mode === 'price')
+        return priceDomain(values);
     if (values.length === 0)
         return { lo: 0, hi: 1 };
     const { min: rawLo, max: rawHi } = extent(values);
@@ -62,9 +62,9 @@ export function scalarDomain(mode, values) {
     const mid = (rawLo + rawHi) / 2;
     return { lo: mid - span / 2, hi: mid + span / 2 };
 }
-/** Diverging sensitivity ramp: green (price falls per MW of demand) through
+/** Diverging sensitivity ramp: green (nodal value falls per MW of demand) through
  * a paper-toned neutral to purple (price rises). The green/purple pair stays
- * legible under CVD and shares no hue with the warm LMP ramp, so the two
+ * legible under CVD and shares no hue with the warm nodal value ramp, so the two
  * modes cannot be confused. */
 const SENS_STOPS = [
     [27, 120, 55, 240],
@@ -84,7 +84,7 @@ export function sensFlatColor(domain) {
         return sensNeutral;
     return sensColor(domain.mean > 0 ? FLAT_SENSITIVITY_TINT : -FLAT_SENSITIVITY_TINT);
 }
-/** The fixed normalization for a slider drag: predicted ΔLMP divides by
+/** The fixed normalization for a slider drag: predicted nodal value change divides by
  * scale × maxAbsStep, so color intensity is linear in the step and saturates at
  * full deflection for the column's robust-max buses. A per-frame domain over
  * column × step would cancel the step exactly (sensitivityDomain is degree-1

package/dist/components/AppHeader.svelte

@@ -37,11 +37,16 @@
 		{#each app.cases as c (c.id)}
 			{@const [cname, cregion] = splitName(c.name)}
 			<div class="case-chip" class:active={app.activeCaseId === c.id}>
-				<button class="case-activate" onclick={() => ctrl.activateCase(c.id)}>
+				<button
+					class="case-activate"
+					disabled={!!c.unavailableReason}
+					title={c.unavailableReason ?? undefined}
+					onclick={() => ctrl.activateCase(c.id)}
+				>
 					<span class="cname"
 						>{cname}{#if c.perturbed}<i class="mark" title="demand perturbed"></i>{/if}</span
 					>
-					<span class="cregion mono">{cregion}</span>
+					<span class="cregion mono">{c.unavailableReason ? 'Unavailable' : cregion}</span>
 				</button>
 				<button
 					class="case-remove mono"
@@ -79,16 +84,18 @@
 				>
 			</div>
 		{/each}
-		{#if ctrl.showFileDropUi}
-			<button
-				class="ghost filedrop-ui"
-				title="parsed in your browser; the file never uploads"
-				onclick={() => fileInput?.click()}
+		<button
+			class="ghost filedrop-ui"
+			title="parsed in your browser; the file never uploads"
+			onclick={() => fileInput?.click()}
+		>
+			<span class="cname"
+				><span class="arrow">&#8675;</span>{ctrl.showFileDropUi
+					? 'drop a case file'
+					: 'open a case file'}</span
 			>
-				<span class="cname"><span class="arrow">&#8675;</span>drop a case file</span>
-				<span class="cregion mono">case + geo files</span>
-			</button>
-		{/if}
+			<span class="cregion mono">case + geo files</span>
+		</button>
 	</nav>
 	<span class="kicker mono">
 		<a href={config.orgHref} target="_blank" rel="noreferrer">{config.orgLabel}</a>
@@ -203,6 +210,11 @@
 		border: 0;
 	}
 
+	.case-activate:disabled {
+		color: var(--text-secondary);
+		cursor: not-allowed;
+	}
+
 	.case-remove {
 		position: absolute;
 		top: 1px;

package/dist/components/BindingLines.svelte

@@ -32,7 +32,7 @@
 	<div class="binding-lines">
 		<p
 			class="mono dim head"
-			title="lines loaded to their thermal rating; select one to see &part;LMP/&part;rating"
+			title="lines loaded to their thermal rating; select one to see LMP sensitivity to the rating"
 		>
 			binding lines
 		</p>
@@ -45,9 +45,7 @@
 						aria-pressed={app.selectedBranch === branch.id}
 						onclick={() => select(branch.id)}
 					>
-						line {branch.from}&#8201;&ndash;&#8201;{branch.to} &middot; {Math.round(
-							loading * 100
-						)}%
+						line {branch.from}&#8201;&ndash;&#8201;{branch.to}, {Math.round(loading * 100)}%
 					</button>
 				</li>
 			{/each}
@@ -93,8 +91,7 @@
 	li button.selected {
 		color: var(--text-accent);
 		background:
-			linear-gradient(90deg, rgba(177, 104, 27, 0.16), rgba(177, 104, 27, 0.05)),
-			var(--accent-soft);
+			linear-gradient(90deg, rgba(177, 104, 27, 0.16), rgba(177, 104, 27, 0.05)), var(--accent-soft);
 		box-shadow: inset 3px 0 0 var(--accent);
 		font-weight: 600;
 	}

package/dist/components/BusPicker.svelte

@@ -8,7 +8,9 @@
 	/** Render in the parent's flow instead of as a card floating over the map. */
 	let { inline = false }: { inline?: boolean } = $props();
 
-	const buses = $derived(app.active?.network?.buses ?? app.activeLocal?.view?.buses ?? []);
+	const buses = $derived(
+		app.studyView?.network.buses ?? app.active?.network?.buses ?? app.activeLocal?.view?.buses ?? []
+	);
 
 	let query = $state('');
 	let open = $state(false);
@@ -25,7 +27,11 @@
 	function commit(id: number) {
 		const caseId = app.activeCaseId;
 		const localId = app.activeLocalId;
-		if (caseId && app.active) ctrl.selectBus(caseId, id);
+		if (app.studyView) {
+			app.selectedBranch = null;
+			app.selectedBus = id;
+			void app.requestFrame({ caseId: app.studyView.caseId, busId: id });
+		} else if (caseId && app.active) ctrl.selectBus(caseId, id);
 		else if (localId && app.activeLocal) ctrl.selectLocalBus(localId, id);
 		query = '';
 		open = false;