@tellegen/svelte 0.1.0

package/dist/components/MulticonductorDetails.svelte

@@ -0,0 +1,280 @@
+<script lang="ts">
+	import { getAppState, getController } from '../context.svelte.js';
+	import { fmt, rgbaCss } from '../format.js';
+	import {
+		attachmentColor,
+		attachmentGlyph,
+		isPhaseTerminal,
+		phaseColor
+	} from '../multiconductor.js';
+	import type { DistAttachmentKind } from '@tellegen/engine';
+
+	const app = getAppState();
+	const ctrl = getController();
+
+	const NEUTRAL_RGBA = [120, 114, 102, 255] as const;
+	const ATTACHMENT_LEGEND: DistAttachmentKind[] = [
+		'source',
+		'generator',
+		'ibr',
+		'load',
+		'shunt'
+	];
+
+	function terminalColor(t: string): string {
+		return rgbaCss(isPhaseTerminal(t) ? phaseColor(t) : [...NEUTRAL_RGBA]);
+	}
+</script>
+
+{#if app.activeMulti}
+	{@const mc = app.activeMulti}
+	{@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}
+				<div>
+					<dt>IBRs / shunts</dt>
+					<dd>{s.n_ibr} / {s.n_shunt}</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>
+				{/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}
+	{/if}
+
+	{#if mc.selectedBus}
+		{@const b = mc.selectedBus}
+		<hr />
+		<h3 class="mono">bus {b.id}</h3>
+		<div class="terminals">
+			{#each b.terminals as t (t)}
+				<span
+					class="term"
+					class:grounded={b.grounded.includes(t)}
+					style={`--tc:${terminalColor(t)}`}
+					title={b.grounded.includes(t) ? `terminal ${t} (grounded)` : `terminal ${t}`}
+				>
+					{t}{#if b.grounded.includes(t)}<span class="gnd" aria-hidden="true">&#9178;</span>{/if}
+				</span>
+			{/each}
+		</div>
+		{#if b.attachmentKinds.length > 0}
+			<div class="badges">
+				{#each b.attachmentKinds as kind (kind)}
+					<span class="badge" style={`--bc:${rgbaCss([...attachmentColor(kind)])}`}>
+						{attachmentGlyph(kind)}
+					</span>
+				{/each}
+			</div>
+		{:else}
+			<p class="footnote mono">no attachments on this bus</p>
+		{/if}
+	{:else if mc.placed}
+		<p class="footnote mono">select a bus to expand its terminals and conductors</p>
+	{/if}
+
+	<div class="legend mono">
+		<span class="legend-row">
+			<i class="swatch" style={`--sc:${rgbaCss([...phaseColor('1')])}`}></i>a
+			<i class="swatch" style={`--sc:${rgbaCss([...phaseColor('2')])}`}></i>b
+			<i class="swatch" style={`--sc:${rgbaCss([...phaseColor('3')])}`}></i>c
+			<i class="swatch" style={`--sc:${rgbaCss([...NEUTRAL_RGBA])}`}></i>n
+		</span>
+		<span class="legend-row">
+			{#each ATTACHMENT_LEGEND as kind (kind)}
+				<i class="swatch" style={`--sc:${rgbaCss([...attachmentColor(kind)])}`}></i>{attachmentGlyph(
+					kind
+				)}
+			{/each}
+		</span>
+	</div>
+
+	<p class="footnote mono">parsed in your browser by powerio (wasm); never uploaded</p>
+
+	{#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={() => ctrl.removeMultiCase(mc)}>remove</button>
+{/if}
+
+<style>
+	h2 {
+		margin: 0 0 8px;
+		font-size: 16px;
+		font-weight: 600;
+	}
+
+	h3 {
+		margin: 0 0 8px;
+		font-size: 12px;
+		font-weight: 600;
+	}
+
+	.tag {
+		margin: 0 0 10px;
+		font-size: 10px;
+		color: var(--text-secondary);
+		letter-spacing: 0;
+		text-transform: uppercase;
+	}
+
+	dl {
+		margin: 0;
+		font-size: 12.5px;
+	}
+
+	dl div {
+		display: flex;
+		justify-content: space-between;
+		padding: 3px 0;
+		gap: 12px;
+	}
+
+	dt {
+		color: var(--text-secondary);
+	}
+
+	dd {
+		margin: 0;
+		text-align: right;
+	}
+
+	.terminals {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 5px;
+	}
+
+	.term {
+		display: inline-flex;
+		align-items: center;
+		gap: 2px;
+		min-width: 18px;
+		height: 20px;
+		padding: 0 6px;
+		border-radius: 3px;
+		border: 1px solid color-mix(in srgb, var(--tc) 70%, #20242b);
+		background: color-mix(in srgb, var(--tc) 26%, transparent);
+		color: var(--ink);
+		font-family: var(--font-mono);
+		font-size: 11px;
+	}
+
+	.term.grounded {
+		border-style: dashed;
+	}
+
+	.gnd {
+		font-size: 12px;
+		color: var(--text-secondary);
+	}
+
+	.badges {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 5px;
+		margin-top: 8px;
+	}
+
+	.badge {
+		padding: 1px 6px;
+		border-radius: 3px;
+		background: var(--bc);
+		color: #fff;
+		font-size: 10px;
+		letter-spacing: 0;
+	}
+
+	.legend {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		margin-top: 12px;
+		font-size: 10px;
+		color: var(--text-secondary);
+	}
+
+	.legend-row {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		flex-wrap: wrap;
+	}
+
+	.swatch {
+		display: inline-block;
+		width: 10px;
+		height: 10px;
+		border-radius: 2px;
+		background: var(--sc);
+	}
+
+	.footnote {
+		margin: 8px 0 0;
+		font-size: 10px;
+		color: var(--text-tertiary);
+		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);
+		margin: 12px 0;
+	}
+</style>

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

@@ -0,0 +1,19 @@
+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 MulticonductorDetails: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MulticonductorDetails = InstanceType<typeof MulticonductorDetails>;
+export default MulticonductorDetails;
+//# sourceMappingURL=MulticonductorDetails.svelte.d.ts.map

package/dist/components/MulticonductorDetails.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MulticonductorDetails.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MulticonductorDetails.svelte.ts"],"names":[],"mappings":"AAyJA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,qBAAqB;;kBAA+E,CAAC;AACzF,KAAK,qBAAqB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC1E,eAAe,qBAAqB,CAAC"}

package/dist/components/NetworkStats.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { getAppState, getController } from '../context.svelte.js';
+	import { fmt, signed, splitName } from '../format.js';
+
+	const app = getAppState();
+	const ctrl = getController();
+</script>
+
+{#if ctrl.networkStats}
+	{@const stats = ctrl.networkStats}
+	{@const [cname, cregion] = splitName(app.active?.name ?? '')}
+	{@const deltaObjective = stats.deltaObjective}
+	<h2>{cname} <span class="region mono">{cregion}</span></h2>
+	<dl class="mono">
+		<div>
+			<dt>buses</dt>
+			<dd>{stats.buses}</dd>
+		</div>
+		<div>
+			<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>
+			</div>
+		{/if}
+	</dl>
+{/if}
+
+<style>
+	h2 {
+		margin: 0 0 12px;
+		font-size: 16px;
+		font-weight: 600;
+	}
+
+	dl {
+		margin: 0;
+		font-size: 12.5px;
+	}
+
+	dl div {
+		display: flex;
+		justify-content: space-between;
+		padding: 3px 0;
+	}
+
+	dl .delta dd {
+		color: var(--text-accent);
+	}
+
+	dt {
+		color: var(--text-secondary);
+	}
+
+	dd {
+		margin: 0;
+	}
+</style>

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

@@ -0,0 +1,19 @@
+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 NetworkStats: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NetworkStats = InstanceType<typeof NetworkStats>;
+export default NetworkStats;
+//# sourceMappingURL=NetworkStats.svelte.d.ts.map

package/dist/components/NetworkStats.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkStats.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/NetworkStats.svelte.ts"],"names":[],"mappings":"AAsDA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,YAAY;;kBAA+E,CAAC;AAChF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,eAAe,YAAY,CAAC"}

package/dist/components/PlacementCue.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { getAppState } from '../context.svelte.js';
+
+	const app = getAppState();
+</script>
+
+{#if app.placingId}
+	<div class="placement-cue mono">click the map to place the topology layout</div>
+{/if}
+
+<style>
+	.placement-cue {
+		position: absolute;
+		left: 50%;
+		bottom: 52px;
+		z-index: 14;
+		transform: translateX(-50%);
+		padding: 8px 12px;
+		background: var(--panel);
+		border: 1px solid var(--accent);
+		border-radius: 3px;
+		color: var(--text-accent);
+		font-size: 11px;
+		box-shadow: 0 4px 18px rgba(32, 36, 43, 0.1);
+		pointer-events: none;
+	}
+
+	@media (max-width: 420px) {
+		.placement-cue {
+			bottom: 38px;
+			width: calc(100% - 28px);
+			text-align: center;
+		}
+	}
+</style>

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

@@ -0,0 +1,19 @@
+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 PlacementCue: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PlacementCue = InstanceType<typeof PlacementCue>;
+export default PlacementCue;
+//# sourceMappingURL=PlacementCue.svelte.d.ts.map

package/dist/components/PlacementCue.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlacementCue.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/PlacementCue.svelte.ts"],"names":[],"mappings":"AAmBA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,YAAY;;kBAA+E,CAAC;AAChF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,eAAe,YAAY,CAAC"}