@tellegen/svelte 0.2.0 → 0.3.0

package/dist/components/ModelDetails.svelte

@@ -0,0 +1,230 @@
+<script lang="ts">
+  import type { ModelDetails as ModelDetailsRecord } from "@tellegen/engine";
+
+  let { details }: { details?: ModelDetailsRecord | null } = $props();
+  let open = $state(false);
+  let page = $state(0);
+  let search = $state("");
+  const pageSize = 20;
+  const method = $derived(
+    details?.method === "convex_quadratic_fit"
+      ? "Convex quadratic fit"
+      : details?.method === "exact"
+        ? "Source model"
+        : String(details?.method ?? "").replaceAll("_", " "),
+  );
+  const rows = $derived(
+    open
+      ? (details?.approximations.filter((row) =>
+          `${row.generator} ${row.bus}`.includes(search.trim()),
+        ) ?? [])
+      : [],
+  );
+  const pageCount = $derived(Math.max(1, Math.ceil(rows.length / pageSize)));
+  const currentPage = $derived(Math.min(page, pageCount - 1));
+  const number = (value: number) =>
+    value.toLocaleString(undefined, { maximumSignificantDigits: 4 });
+</script>
+
+{#if details}
+  <details class="model-details" bind:open>
+    <summary>Model details</summary>
+    {#if open}
+      <dl>
+        <div>
+          <dt>Method</dt>
+          <dd>{method}</dd>
+        </div>
+        <div>
+          <dt>Quantity</dt>
+          <dd>{details.quantity}</dd>
+        </div>
+        <div>
+          <dt>Approximated curves</dt>
+          <dd>{details.approximations.length.toLocaleString()}</dd>
+        </div>
+      </dl>
+      {#if details.approximations.length}
+        <label
+          >Find generator or bus<input
+            type="search"
+            value={search}
+            oninput={(event) => {
+              search = event.currentTarget.value;
+              page = 0;
+            }}
+          /></label
+        >
+        <div class="table-scroll">
+          <table>
+            <caption>Errors at source breakpoints ({details.units})</caption>
+            <thead
+              ><tr
+                ><th>Generator</th><th>Bus</th><th
+                  ><abbr title="Root mean square error">RMS</abbr></th
+                ><th>Maximum</th></tr
+              ></thead
+            >
+            <tbody
+              >{#each rows.slice(currentPage * pageSize, (currentPage + 1) * pageSize) as row (row.generator)}<tr
+                  ><th>{row.generator}</th><td>{row.bus}</td><td
+                    >{number(row.rms_breakpoint_error)}</td
+                  ><td>{number(row.max_breakpoint_error)}</td></tr
+                >{/each}</tbody
+            >
+          </table>
+        </div>
+        {#if !rows.length}<p>No matching generators.</p>{/if}
+        {#if pageCount > 1}<div class="pagination">
+            <button
+              disabled={currentPage === 0}
+              onclick={() => (page = currentPage - 1)}>Previous</button
+            ><span
+              >{currentPage * pageSize + 1}-{Math.min(
+                (currentPage + 1) * pageSize,
+                rows.length,
+              )} of {rows.length}</span
+            ><button
+              disabled={currentPage + 1 >= pageCount}
+              onclick={() => (page = currentPage + 1)}>Next</button
+            >
+          </div>{/if}
+      {/if}
+      <details class="references">
+        <summary>Source and model IDs</summary>
+        <dl>
+          <div>
+            <dt>Source</dt>
+            <dd><code>{details.source}</code></dd>
+          </div>
+          <div>
+            <dt>Model</dt>
+            <dd><code>{details.model}</code></dd>
+          </div>
+        </dl>
+      </details>
+    {/if}
+  </details>
+{/if}
+
+<style>
+  .model-details {
+    border-top: 1px solid var(--line);
+    padding: 12px 0;
+    font: 12px/1.45 var(--font-display);
+    color: var(--ink);
+  }
+  summary {
+    cursor: pointer;
+    font-weight: 400;
+  }
+  dl {
+    display: grid;
+    gap: 7px;
+    margin: 14px 0;
+  }
+  dl > div {
+    display: grid;
+    grid-template-columns: 110px minmax(0, 1fr);
+    gap: 10px;
+  }
+  dt {
+    color: var(--text-secondary);
+  }
+  dd {
+    margin: 0;
+  }
+  label {
+    display: grid;
+    gap: 6px;
+    margin: 12px 0;
+    font-size: 11px;
+  }
+  input {
+    min-width: 0;
+    width: 100%;
+    box-sizing: border-box;
+    background: var(--paper);
+    border: 1px solid var(--line);
+    padding: 6px 8px;
+    border-radius: 4px;
+    color: inherit;
+    font: inherit;
+  }
+  .table-scroll {
+    max-height: 250px;
+    overflow: auto;
+  }
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 10px;
+  }
+  caption {
+    text-align: left;
+    color: var(--text-secondary);
+    padding-bottom: 8px;
+  }
+  th,
+  td {
+    padding: 7px 4px;
+    text-align: right;
+    border-bottom: 1px solid var(--line);
+    font-variant-numeric: tabular-nums;
+  }
+  th:first-child {
+    text-align: left;
+  }
+  tbody th {
+    font-weight: 400;
+  }
+  thead th {
+    position: sticky;
+    top: 0;
+    background: var(--paper);
+    font-weight: 500;
+  }
+  abbr {
+    text-decoration-style: dotted;
+    text-underline-offset: 3px;
+  }
+  .pagination {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin: 10px 0;
+    font-size: 10px;
+    color: var(--text-secondary);
+  }
+  button {
+    padding: 4px 6px;
+    font: inherit;
+    border: 1px solid var(--line);
+    background: transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    color: inherit;
+  }
+  button:disabled {
+    opacity: 0.45;
+    cursor: default;
+  }
+  button:focus-visible,
+  input:focus-visible,
+  summary:focus-visible {
+    outline: 2px solid var(--focus-ring);
+    outline-offset: 2px;
+  }
+  .references {
+    margin-top: 12px;
+    font-size: 10px;
+  }
+  .references dl > div {
+    grid-template-columns: 42px minmax(0, 1fr);
+  }
+  code {
+    overflow-wrap: anywhere;
+    font: 10px/1.5 var(--font-mono);
+  }
+</style>

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

@@ -0,0 +1,7 @@
+import type { ModelDetails as ModelDetailsRecord } from "@tellegen/engine";
+type $$ComponentProps = {
+    details?: ModelDetailsRecord | null;
+};
+declare const ModelDetails: import("svelte").Component<$$ComponentProps, {}, "">;
+type ModelDetails = ReturnType<typeof ModelDetails>;
+export default ModelDetails;

package/dist/components/MulticonductorDetails.svelte

@@ -8,19 +8,35 @@
 		isPhaseTerminal,
 		phaseColor
 	} from '../multiconductor.js';
-	import type { DistAttachmentKind } from '@tellegen/engine';
+	import { getPanelLayout } from '../panels.svelte.js';
+	import { getNoticeCenter } from '../notices.svelte.js';
+	import { type DistAttachmentKind } from '@tellegen/engine';
 
 	const app = getAppState();
 	const ctrl = getController();
+	const notices = getNoticeCenter();
+	const panels = getPanelLayout();
+	function openResults() {
+		const panel = panels.panels.find((p) => p.id === 'studies');
+		if (panel) {
+			const network = panels.panels.find((p) => p.id === 'network');
+			if (network) panels.close(network);
+			panel.setOpen(true);
+			panels.activate(panel);
+			if (panels.compact) panels.drawer = panel.id;
+		}
+	}
 
 	const NEUTRAL_RGBA = [120, 114, 102, 255] as const;
-	const ATTACHMENT_LEGEND: DistAttachmentKind[] = [
-		'source',
-		'generator',
-		'ibr',
-		'load',
-		'shunt'
-	];
+
+	/** A cleared or unparsable number field is not a request for zero load;
+	 * only a finite value counts as an edit. */
+	function parseLoadInput(raw: string): number | null {
+		if (raw.trim() === '') return null;
+		const value = Number(raw);
+		return Number.isFinite(value) ? value : null;
+	}
+	const ATTACHMENT_LEGEND: DistAttachmentKind[] = ['source', 'generator', 'ibr', 'load', 'shunt'];
 
 	function terminalColor(t: string): string {
 		return rgbaCss(isPhaseTerminal(t) ? phaseColor(t) : [...NEUTRAL_RGBA]);
@@ -32,60 +48,76 @@
 	{@const s = mc.summary}
 	<h2>{mc.label} <span class="region mono">via {mc.fileName}</span></h2>
 	{#if s}
-		<p class="tag mono">multiconductor &#8901; viewing only</p>
-		<dl class="mono">
-			<div>
-				<dt>buses</dt>
-				<dd>{s.n_bus}</dd>
-			</div>
-			<div>
-				<dt>lines / switches / xfmrs</dt>
-				<dd>{s.n_line} / {s.n_switch} / {s.n_transformer}</dd>
-			</div>
-			<div>
-				<dt>load</dt>
-				<dd>{fmt.format(s.load_kw)} kW</dd>
-			</div>
-			<div>
-				<dt>gen capacity</dt>
-				<dd>{fmt.format(s.gen_kw)} kW</dd>
-			</div>
-			<div>
-				<dt>sources / loads / gens</dt>
-				<dd>{s.n_source} / {s.n_load} / {s.n_generator}</dd>
-			</div>
-			{#if s.n_ibr > 0 || s.n_shunt > 0 || (s.n_capacitor ?? 0) > 0}
+		<p class="tag mono">Multiconductor</p>
+		<details class="case-details">
+			<summary>{s.n_bus} buses, {s.n_edge} {s.n_edge === 1 ? 'branch' : 'branches'}</summary>
+			<dl class="mono">
 				<div>
-					<dt>IBRs / shunts / caps</dt>
-					<dd>{s.n_ibr} / {s.n_shunt} / {s.n_capacitor ?? 0}</dd>
+					<dt>buses</dt>
+					<dd>{s.n_bus}</dd>
 				</div>
-			{/if}
-		</dl>
-
-		{#if s.warnings.length > 0}
-			<ul class="warnings mono">
-				{#each s.warnings.slice(0, 4) as w, i (i)}
-					<li>{w}</li>
-				{/each}
-				{#if s.warnings.length > 4}
-					<li>+{s.warnings.length - 4} more</li>
+				<div>
+					<dt>Lines / switches / transformers</dt>
+					<dd>{s.n_line} / {s.n_switch} / {s.n_transformer}</dd>
+				</div>
+				<div>
+					<dt>load</dt>
+					<dd>{fmt.format(s.load_kw)} kW</dd>
+				</div>
+				<div>
+					<dt>Generation capacity</dt>
+					<dd>{fmt.format(s.gen_kw)} kW</dd>
+				</div>
+				<div>
+					<dt>sources / loads / gens</dt>
+					<dd>{s.n_source} / {s.n_load} / {s.n_generator}</dd>
+				</div>
+				{#if s.n_ibr > 0 || s.n_shunt > 0 || (s.n_capacitor ?? 0) > 0}
+					<div>
+						<dt>IBRs / shunts / caps</dt>
+						<dd>{s.n_ibr} / {s.n_shunt} / {s.n_capacitor ?? 0}</dd>
+					</div>
 				{/if}
-			</ul>
-		{/if}
-
-		{#if !mc.placed}
-			<p class="footnote mono">
-				{s.coords_kind === 'planar'
-					? 'coordinates are diagram-only: click the map to place the layout'
-					: 'no coordinates in this file: click the map to place the layout'}
-			</p>
-		{:else if mc.coordsKind === 'geographic'}
-			<p class="footnote mono">coordinates: geographic, from the case file</p>
-		{:else if mc.coordsKind === 'planar'}
-			<p class="footnote mono">coordinates: diagram layout fit where you placed it</p>
-		{:else}
-			<p class="footnote mono">coordinates: synthetic topology layout centered where you placed it</p>
-		{/if}
+			</dl>
+		</details>
+
+		<p class="footnote mono">
+			{mc.coordsKind === 'geographic'
+				? 'Geographic coordinates'
+				: mc.coordsKind === 'planar'
+					? 'Drawing coordinates'
+					: 'Generated diagram'}
+		</p>
+		<div class="calculation-actions">
+			{#if mc.solving}
+				<span role="status">Calculating...</span>{#if mc.solveAbort}<button
+						onclick={() => mc.solveAbort?.abort()}>Cancel</button
+					>{/if}
+			{:else}
+				<button
+					disabled={!mc.mcPfSupported}
+					onclick={() => {
+						void ctrl
+							.solveMultiCase(mc)
+							.then(openResults)
+							.catch(() => {});
+					}}>Solve AC power flow</button
+				>
+				{#if !mc.mcPfSupported}
+					<button
+						class="quiet"
+						onclick={() =>
+							notices.push({
+								kind: 'warning',
+								title: 'AC power flow unavailable',
+								details: mc.mcPfReason ?? 'This case cannot run AC power flow in this browser'
+							})}>Why unavailable</button
+					>
+				{/if}
+			{/if}
+		</div>
+		{#if mc.result}<p class="footnote">Converged, {mc.result.iterations} iterations</p>
+			<button class="reset mono" onclick={openResults}>View results in Studies</button>{/if}
 	{/if}
 
 	{#if mc.selectedBus}
@@ -115,17 +147,74 @@
 		{:else}
 			<p class="footnote mono">no attachments on this bus</p>
 		{/if}
+		{@const loadBranches = mc.mcLoadBranches.filter((load) => load.bus === b.id)}
+		{#if loadBranches.length > 0}
+			<div class="load-editor">
+				<h4>Load power</h4>
+				{#each loadBranches as load (`${load.load}:${load.branch}`)}
+					<div class="load-row">
+						<span class="mono"
+							>{load.load}{loadBranches.length > 1 ? ` · ${load.branch + 1}` : ''}</span
+						>
+						<label
+							>P kW<input
+								type="number"
+								step="any"
+								value={load.p_w / 1000}
+								onchange={(event) => {
+									const kw = parseLoadInput(event.currentTarget.value);
+									if (kw === null) {
+										event.currentTarget.value = String(load.p_w / 1000);
+										return;
+									}
+									ctrl.queueMultiLoadPower(mc, load.load, load.branch, kw * 1000, load.q_var);
+								}}
+							/></label
+						>
+						<label
+							>Q kvar<input
+								type="number"
+								step="any"
+								value={load.q_var / 1000}
+								onchange={(event) => {
+									const kvar = parseLoadInput(event.currentTarget.value);
+									if (kvar === null) {
+										event.currentTarget.value = String(load.q_var / 1000);
+										return;
+									}
+									ctrl.queueMultiLoadPower(mc, load.load, load.branch, load.p_w, kvar * 1000);
+								}}
+							/></label
+						>
+						<button
+							class="quiet"
+							disabled={load.p_w === load.base_p_w && load.q_var === load.base_q_var}
+							onclick={() =>
+								ctrl.queueMultiLoadPower(
+									mc,
+									load.load,
+									load.branch,
+									load.base_p_w,
+									load.base_q_var
+								)}>Reset</button
+						>
+					</div>
+				{/each}
+				<p class="footnote">Changes re-solve automatically using the retained factorization.</p>
+			</div>
+		{/if}
 	{:else if mc.selectedEdge}
 		{@const e = mc.selectedEdge}
 		<hr />
 		<h3 class="mono">
 			<i class="swatch" style={`--sc:${rgbaCss([...edgeColor(e.kind, e.closed)])}`}></i>
-			{e.kind} {e.from}&#8201;&ndash;&#8201;{e.to}
+			{e.kind}
+			{e.from}&#8201;&ndash;&#8201;{e.to}
 		</h3>
 		<dl class="mono">
 			<div>
 				<dt>phases</dt>
-				<dd>{e.n_phases}&#966; &#8901; {e.conductors.length} conductors</dd>
+				<dd>{e.n_phases}&#966; , {e.conductors.length} conductors</dd>
 			</div>
 			{#if e.kind === 'switch'}
 				<div>
@@ -156,22 +245,53 @@
 		</span>
 		<span class="legend-row">
 			{#each ATTACHMENT_LEGEND as kind (kind)}
-				<i class="swatch" style={`--sc:${rgbaCss([...attachmentColor(kind)])}`}></i>{attachmentGlyph(
-					kind
-				)}
+				<i class="swatch" style={`--sc:${rgbaCss([...attachmentColor(kind)])}`}
+				></i>{attachmentGlyph(kind)}
 			{/each}
 		</span>
 	</div>
 
-	{#if !mc.placed}
-		<button class="reset mono" onclick={() => ctrl.moveMultiCase(mc)}>place on map</button>
-	{:else}
-		<button class="reset mono" onclick={() => ctrl.moveMultiCase(mc)}>move layout</button>
-	{/if}
+	<button class="reset mono" onclick={() => app.requestFrame(mc.id)}>Fit case</button>
 	<button class="reset mono" onclick={() => ctrl.removeMultiCase(mc)}>remove</button>
 {/if}
 
 <style>
+	.case-details {
+		margin: 10px 0;
+		font-size: 12px;
+	}
+	.case-details summary {
+		cursor: pointer;
+		color: var(--text-secondary);
+	}
+	.case-details dl {
+		margin-top: 8px;
+	}
+	.calculation-actions {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+		align-items: center;
+		margin: 14px 0;
+	}
+	.calculation-actions button {
+		font: inherit;
+		padding: 7px 10px;
+		border: 1px solid var(--line);
+		border-radius: 3px;
+		background: var(--ink);
+		color: var(--paper);
+		cursor: pointer;
+	}
+	.calculation-actions button:disabled {
+		opacity: 0.5;
+		cursor: default;
+	}
+	.calculation-actions button.quiet {
+		background: transparent;
+		color: var(--ink);
+	}
+
 	h2 {
 		margin: 0 0 8px;
 		font-size: 16px;
@@ -261,6 +381,44 @@
 		letter-spacing: 0;
 	}
 
+	.load-editor {
+		margin-top: 14px;
+		padding-top: 10px;
+		border-top: 1px solid var(--line);
+	}
+
+	.load-editor h4 {
+		margin: 0 0 8px;
+		font-size: 11px;
+	}
+
+	.load-row {
+		display: grid;
+		grid-template-columns: minmax(70px, 1fr) 72px 72px auto;
+		gap: 6px;
+		align-items: end;
+		margin-bottom: 7px;
+	}
+
+	.load-row label {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		font-size: 9px;
+		color: var(--text-secondary);
+	}
+
+	.load-row input {
+		min-width: 0;
+		width: 100%;
+		box-sizing: border-box;
+		font: 10px var(--font-mono);
+	}
+
+	.load-row button {
+		font-size: 9px;
+	}
+
 	/* The global stylesheet's .legend is the 6px color-ramp strip; its height
 	 * leaks into a scoped .legend, so this container carries its own name. */
 	.mc-legend {
@@ -316,15 +474,6 @@
 		letter-spacing: 0;
 	}
 
-	.warnings {
-		margin: 8px 0 0;
-		padding: 0;
-		list-style: none;
-		font-size: 10.5px;
-		line-height: 1.5;
-		color: var(--text-accent);
-	}
-
 	hr {
 		border: 0;
 		border-top: 1px solid var(--line);

package/dist/components/NetworkStats.svelte

@@ -20,25 +20,27 @@
 			<dt>lines</dt>
 			<dd>{stats.branches}</dd>
 		</div>
-		<div>
-			<dt>binding lines</dt>
-			<dd>{stats.binding ?? '…'}</dd>
-		</div>
-		<div>
-			<dt>cost</dt>
-			<dd>
-				{#if stats.objective === null}
-					<span class="blink">solving&hellip;</span>
-				{:else}
-					{fmt.format(stats.objective)} $/h
-				{/if}
-			</dd>
-		</div>
-		{#if ctrl.isPerturbed(ctrl.activeSolvable) && deltaObjective !== null}
-			<div class="delta">
-				<dt>vs base</dt>
-				<dd>{signed(deltaObjective)} $/h</dd>
+		{#if ctrl.activeFormulation !== 'acpf'}
+			<div>
+				<dt>binding lines</dt>
+				<dd>{stats.binding ?? '...'}</dd>
+			</div>
+			<div>
+				<dt>OPF objective</dt>
+				<dd>
+					{#if stats.objective === null}
+						<span class="blink">solving...</span>
+					{:else}
+						{fmt.format(stats.objective)}
+					{/if}
+				</dd>
 			</div>
+			{#if ctrl.isPerturbed(ctrl.activeSolvable) && deltaObjective !== null}
+				<div class="delta">
+					<dt>vs base</dt>
+					<dd>{signed(deltaObjective)}</dd>
+				</div>
+			{/if}
 		{/if}
 	</dl>
 {/if}