@tellegen/svelte 0.2.0 → 0.4.0

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}
@@ -103,7 +111,7 @@
 <style>
 	.chip {
 		font-family: var(--font-mono);
-		font-size: 11px;
+		font-size: 13px;
 		padding: 2px 8px;
 		border: 1px solid var(--accent);
 		color: var(--text-accent);
@@ -121,7 +129,7 @@
 	}
 
 	.sensitivity-copy {
-		font-size: 11.5px;
+		font-size: 13.5px;
 		line-height: 1.35;
 		white-space: nowrap;
 	}

package/dist/components/ShellEnvironment.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { PANEL_COMPACT_QUERY } from '../panels.svelte.js';
+	import { getAppState, getController } from '../context.svelte.js';
+
+	// Renderless. Keeps the shared app state in step with the environment: the
+	// pointer that gates the file drop affordance, the compact-layout media
+	// query, and the viewport height panel and map framing both read. The
+	// default shell renders it; a custom shell on `PanelHost` must too.
+
+	// 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();
+
+	onMount(() => {
+		const query = window.matchMedia(FILE_DROP_QUERY);
+		const syncFileDropUi = () => {
+			ctrl.showFileDropUi = query.matches;
+			if (!ctrl.showFileDropUi) app.dragOver = false;
+		};
+		syncFileDropUi();
+		query.addEventListener('change', syncFileDropUi);
+
+		const compact = window.matchMedia(PANEL_COMPACT_QUERY);
+		const syncCompact = () => {
+			app.compactLayout = compact.matches;
+			if (!compact.matches) app.sheetInset = 0;
+		};
+		syncCompact();
+		compact.addEventListener('change', syncCompact);
+
+		// Shared viewport measurements keep panel and map framing dimensions aligned.
+		const syncViewport = () => (app.viewportHeight = window.innerHeight);
+		syncViewport();
+		window.addEventListener('resize', syncViewport);
+		window.addEventListener('orientationchange', syncViewport);
+
+		return () => {
+			query.removeEventListener('change', syncFileDropUi);
+			compact.removeEventListener('change', syncCompact);
+			window.removeEventListener('resize', syncViewport);
+			window.removeEventListener('orientationchange', syncViewport);
+		};
+	});
+</script>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ShellEnvironment: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ShellEnvironment = InstanceType<typeof ShellEnvironment>;
+export default ShellEnvironment;

package/dist/components/SizeLegend.svelte

@@ -19,7 +19,7 @@
 		display: flex;
 		align-items: center;
 		gap: 12px;
-		font-size: 10px;
+		font-size: 12px;
 		color: var(--text-secondary);
 	}
 
@@ -38,7 +38,7 @@
 
 	.caption {
 		margin-left: auto;
-		font-size: 9.5px;
+		font-size: 12px;
 	}
 
 	@media (max-width: 760px) {

package/dist/components/SolveCard.svelte

@@ -1,56 +1,63 @@
 <script lang="ts">
-	import { getController } from '../context.svelte.js';
+	import { getAppState, getController } from '../context.svelte.js';
 	import { formulationLabel, solveMetaLabel } from '../format.js';
 	import Sparkline from '../Sparkline.svelte';
+	import PanelFrame from './PanelFrame.svelte';
+	let open = $state(true);
 
 	const ctrl = getController();
+	const app = getAppState();
+	const saved = $derived(app.studyView);
 	const active = $derived(ctrl.activeSolvable);
-	const iterations = $derived(active?.iterations ?? []);
+	const iterations = $derived(
+		saved
+			? Array.isArray(saved.solution?.iterations)
+				? saved.solution.iterations
+				: []
+			: (active?.iterations ?? [])
+	);
 </script>
 
-{#if active && (active.solving || active.solveMs != null)}
-	<div class="solvecard">
-		<div class="solvecard-head mono">
-			<span><b>OPF solve</b></span>
+{#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>
+			{: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}
+			{/if}
 		</div>
-		{#if iterations.length > 1}
-			{#key iterations}
-				<Sparkline {iterations} />
-			{/key}
-		{/if}
-		<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}
-	</div>
+	</PanelFrame>
 {/if}
 
 <style>
+	.solve-label {
+		font-size: 13px;
+		margin-bottom: 8px;
+	}
 	.solvecard {
-		position: absolute;
-		top: 76px;
-		right: 20px;
-		z-index: 10;
-		width: 300px;
 		padding: 13px 15px 11px;
-		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.3s ease-out both;
-	}
-
-	.solvecard-head {
-		font-size: 10.5px;
-		margin-bottom: 6px;
-		white-space: nowrap;
 	}
 
 	.solve-meta {
@@ -58,7 +65,7 @@
 		align-items: center;
 		flex-wrap: wrap;
 		gap: 10px 14px;
-		font-size: 10px;
+		font-size: 12px;
 		margin-top: 6px;
 	}
 
@@ -68,18 +75,8 @@
 
 	.fallback-reason {
 		margin: 6px 0 0;
-		font-size: 10px;
+		font-size: 12px;
 		line-height: 1.35;
 		overflow-wrap: anywhere;
 	}
-
-	@media (max-width: 760px) {
-		.solvecard {
-			/* just clear of the header's case tabs */
-			top: 108px;
-			left: auto;
-			right: 10px;
-			width: min(300px, calc(100% - 20px));
-		}
-	}
 </style>

package/dist/components/TopMovers.svelte

@@ -3,15 +3,20 @@
 	import { signedExp } from '../format.js';
 
 	const ctrl = getController();
-	const unitTitle =
-		'LMP is measured in $/MWh and demand is perturbed in MW, so dLMP/dd has units ($/MWh)/MW.';
+	const units = $derived(
+		(ctrl.selectedSensitivity?.units ?? '(objective units/MW)/MW').replaceAll(
+			'objective_unit',
+			'objective units'
+		)
+	);
+	const unitTitle = $derived(`LMP response per MW of demand, in ${units}.`);
 </script>
 
 <div class="movers-block">
 	{#if !ctrl.previewing && ctrl.topMovers.length > 0}
 		<table class="mono">
 			<caption class="mono dim" title={unitTitle}>
-				largest &Delta;LMP per MW demand <span class="unit">($/MWh)/MW</span>
+				largest LMP response <span class="unit">{units}</span>
 			</caption>
 			<tbody>
 				{#each ctrl.topMovers as mover (mover.bus)}
@@ -41,7 +46,7 @@
 
 	caption {
 		text-align: left;
-		font-size: 10.5px;
+		font-size: 12.5px;
 		margin-bottom: 4px;
 	}
 

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

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const TopMovers: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type TopMovers = InstanceType<typeof TopMovers>;
+declare const TopMovers: import("svelte").Component<Record<string, never>, {}, "">;
+type TopMovers = ReturnType<typeof TopMovers>;
 export default TopMovers;

package/dist/components.d.ts

@@ -1,4 +1,8 @@
+export { default as ModelDetails } from './components/ModelDetails.svelte';
 export { default as AppFooter } from './components/AppFooter.svelte';
+export { default as NotificationCenter } from './components/NotificationCenter.svelte';
+export { default as PanelHost } from './components/PanelHost.svelte';
+export { default as ShellEnvironment } from './components/ShellEnvironment.svelte';
 export { default as AppHeader } from './components/AppHeader.svelte';
 export { default as BusPicker } from './components/BusPicker.svelte';
 export { default as ControlPanel } from './components/ControlPanel.svelte';
@@ -16,3 +20,4 @@ export { default as SizeLegend } from './components/SizeLegend.svelte';
 export { default as SolveCard } from './components/SolveCard.svelte';
 export { default as TopMovers } from './components/TopMovers.svelte';
 export { default as Sparkline } from './Sparkline.svelte';
+export { default as McResults } from './components/McResults.svelte';

package/dist/components.js

@@ -1,4 +1,8 @@
+export { default as ModelDetails } from './components/ModelDetails.svelte';
 export { default as AppFooter } from './components/AppFooter.svelte';
+export { default as NotificationCenter } from './components/NotificationCenter.svelte';
+export { default as PanelHost } from './components/PanelHost.svelte';
+export { default as ShellEnvironment } from './components/ShellEnvironment.svelte';
 export { default as AppHeader } from './components/AppHeader.svelte';
 export { default as BusPicker } from './components/BusPicker.svelte';
 export { default as ControlPanel } from './components/ControlPanel.svelte';
@@ -16,3 +20,4 @@ export { default as SizeLegend } from './components/SizeLegend.svelte';
 export { default as SolveCard } from './components/SolveCard.svelte';
 export { default as TopMovers } from './components/TopMovers.svelte';
 export { default as Sparkline } from './Sparkline.svelte';
+export { default as McResults } from './components/McResults.svelte';

package/dist/context.svelte.d.ts

@@ -1,12 +1,19 @@
 import type { AppState } from './state.svelte.js';
 import type { Controller } from './controller.svelte.js';
 export interface TellegenUiConfig {
-    apiBase: string;
+    /** Backend base path; `null` for a host with no backend at all. */
+    apiBase: string | null;
     loadDefaultCases: boolean;
     docsHref: string;
     orgHref: string;
     orgLabel: string;
     showFooter: boolean;
+    /** `'dark'` sets `data-theme="dark"` on the document root while the
+     * provider is mounted, which switches the `styles.css` tokens. */
+    theme: 'light' | 'dark';
+    /** CARTO basemap key for the default shell's map, trimmed; empty for
+     * none. See `TellegenMap`'s `cartoApiKey`. */
+    cartoApiKey: string;
 }
 export type TellegenUiOptions = Partial<TellegenUiConfig>;
 export declare const DEFAULT_TELLEGEN_UI_CONFIG: TellegenUiConfig;

package/dist/context.svelte.js

@@ -1,4 +1,5 @@
 import { getContext, setContext } from 'svelte';
+import { normalizeCartoApiKey } from './basemap.js';
 const APP = Symbol('tellegen.app');
 const CTRL = Symbol('tellegen.controller');
 const CONFIG = Symbol('tellegen.config');
@@ -8,16 +9,20 @@ export const DEFAULT_TELLEGEN_UI_CONFIG = {
     docsHref: 'https://eigenergy.github.io/tellegen/',
     orgHref: 'https://github.com/eigenergy',
     orgLabel: 'eigenergy group @ michigan ece',
-    showFooter: true
+    showFooter: true,
+    theme: 'light',
+    cartoApiKey: ''
 };
 export function resolveTellegenUiConfig(options = {}) {
     return {
-        apiBase: options.apiBase ?? DEFAULT_TELLEGEN_UI_CONFIG.apiBase,
+        apiBase: options.apiBase === undefined ? DEFAULT_TELLEGEN_UI_CONFIG.apiBase : options.apiBase,
         loadDefaultCases: options.loadDefaultCases ?? DEFAULT_TELLEGEN_UI_CONFIG.loadDefaultCases,
         docsHref: options.docsHref ?? DEFAULT_TELLEGEN_UI_CONFIG.docsHref,
         orgHref: options.orgHref ?? DEFAULT_TELLEGEN_UI_CONFIG.orgHref,
         orgLabel: options.orgLabel ?? DEFAULT_TELLEGEN_UI_CONFIG.orgLabel,
-        showFooter: options.showFooter ?? DEFAULT_TELLEGEN_UI_CONFIG.showFooter
+        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
     };
 }
 export const setAppState = (a) => setContext(APP, a);