@tellegen/svelte 0.4.3 → 0.4.5

package/dist/state.svelte.js

@@ -1,4 +1,8 @@
 import { DEFAULT_FORMULATION } from '@tellegen/engine';
+import { DiagnosticLog, errorEntry } from './log.svelte.js';
+import { graphInputs } from './diagram/graph-inputs.js';
+import { buildSearchIndex } from './diagram/search.js';
+import { snapshotFromMcPf } from './diagram/snapshot.js';
 /** A case is perturbed when any committed demand or rating delta is nonzero. Shared
  * by both solvable case classes so the "perturbed" rule stays single-sourced. */
 const hasPerturbation = (edits) => Object.values(edits).some((mw) => mw !== 0);
@@ -40,6 +44,8 @@ export class LocalCase {
     solving = $state(false);
     solveMs = $state(null);
     solveBackend = $state(null);
+    /** Short solver-specific diagnostic shown beside the elapsed time. */
+    solveDetail = $state(null);
     solveFallbackReason = $state(null);
     /** Monotone token: only the latest solve may write this case. */
     solveSeq = 0;
@@ -92,6 +98,8 @@ export class CaseState {
     solving = $state(false);
     solveMs = $state(null);
     solveBackend = $state(null);
+    /** Short solver-specific diagnostic shown beside the elapsed time. */
+    solveDetail = $state(null);
     solveFallbackReason = $state(null);
     /** Monotone token: only the latest solve may write this case. */
     solveSeq = 0;
@@ -158,6 +166,31 @@ export class MulticonductorCase {
     /** The selected edge id, whose conductor pairing expands in the panel;
      * mutually exclusive with selectedBusId. */
     selectedEdgeId = $state(null);
+    /** What the pointer is over in any linked view (schematic, profile, tables); highlighted in
+     * the others. Transient: never saved or put in links. */
+    hovered = $state(null);
+    /** Bumped to ask the views to bring the current selection into view again (an issue clicked
+     * that is already selected). */
+    revealSeq = $state(0);
+    /** The full operating point read for whole-network views (overview, schematic); null until read,
+     * and cleared when a large case's operating point changes. */
+    overviewResult = $state.raw(null);
+    overviewLoading = $state(false);
+    /** The graph's buses and branches as the overview and the diagram read them: rebuilt when the
+     * graph is replaced, never after a solve. Both views read this one copy. */
+    overviewInputs = $derived(this.graph ? graphInputs(this.graph) : null);
+    /** Search over the graph's buses and branches, rebuilt with `overviewInputs`. */
+    overviewSearch = $derived(this.overviewInputs ? buildSearchIndex(this.overviewInputs.entities) : null);
+    /** `overviewResult` projected onto the graph, built once per operating point and shared by the
+     * overview and the diagram; null while there is none. */
+    overviewSnapshot = $derived(this.overviewResult && this.overviewInputs
+        ? snapshotFromMcPf(this.overviewResult, this.overviewInputs.buses, this.overviewInputs.branches)
+        : null);
+    /** Show this case as a schematic instead of the map. */
+    schematic = $state(false);
+    /** The diagram's last geographic view as a map camera, for the map to continue from when the
+     * diagram closes. Plain, not reactive: it is read once, on close. */
+    lastGeoView = null;
     constructor(init) {
         this.id = init.id;
         this.label = init.label;
@@ -200,6 +233,9 @@ export class MulticonductorCase {
 }
 export class AppState {
     camera = $state.raw(null);
+    /** Set when a view hands its camera to the map it returns to (the diagram closing from
+     * geographic positions): the re-created map starts at `camera` instead of framing the case. */
+    cameraHandoff = false;
     cameraRequest = $state.raw(null);
     cameraSeq = $state(0);
     diagramCamera = $state.raw(null);
@@ -213,7 +249,11 @@ export class AppState {
             throw new Error('Invalid saved drawing view');
         }
         this.settleFrame();
-        this.diagramCameraRequest = { caseId, center: [...snapshot.center], scale: snapshot.scale };
+        this.diagramCameraRequest = {
+            caseId,
+            center: [...snapshot.center],
+            scale: snapshot.scale
+        };
         this.diagramCameraSeq++;
     }
     requestCamera(snapshot) {
@@ -262,16 +302,28 @@ export class AppState {
     /** Technical detail behind the current `error`, when the message itself is
      * written for people; notices keep it in their disclosure. Every write to
      * `error` clears it, as it clears `errorRetry`. */
-    errorDetail = $state(null);
+    #errorDetail = $state(null);
+    /** Every error and engine finding of this session, structured; see `DiagnosticLog`. */
+    log = new DiagnosticLog();
     get error() {
         return this.#error;
     }
     set error(message) {
         this.#error = message;
-        if (message)
+        if (message) {
             this.errorRevision++;
+            this.log.record(errorEntry(message));
+        }
         this.errorRetry = null;
-        this.errorDetail = null;
+        this.#errorDetail = null;
+    }
+    get errorDetail() {
+        return this.#errorDetail;
+    }
+    set errorDetail(detail) {
+        this.#errorDetail = detail;
+        if (detail && this.#error)
+            this.log.record(errorEntry(this.#error, detail), { repeat: false });
     }
     /** Case files parsed in the browser via the powerio wasm module. */
     localCases = $state.raw([]);

package/dist/transformer-icon.d.ts

@@ -1,15 +1,24 @@
-/** The IEC two-winding transformer symbol as a deck.gl icon: two overlapping
- * circles, rasterized once to a data URL. Drawn white on transparent with
- * `mask: true`, so the layer's getColor tints it. */
-export interface TransformerIcon {
-    url: string;
-    width: number;
-    height: number;
-    anchorX: number;
-    anchorY: number;
-    mask: true;
-}
+/** The IEC two-winding transformer symbol as a prepacked deck.gl icon atlas:
+ * two overlapping circles on a canvas that deck.gl uploads as a texture.
+ * Nothing is fetched, so the symbol needs no `data:` in a CSP's connect-src.
+ * Drawn white on transparent with `mask: true`, so the layer's getColor tints
+ * it. */
+/** The icon name for the layer's getIcon. */
+export declare const TRANSFORMER_ICON = "transformer";
+/** The atlas holds the one symbol, anchored at its center. */
+export declare const transformerIconMapping: {
+    transformer: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        anchorX: number;
+        anchorY: number;
+        mask: boolean;
+    };
+};
 /** Rasterize the glyph lazily; layers only build client-side, after the map
  * modules load, so document is always available here. The 128 px backing keeps
- * a ~16 px on-screen symbol crisp on 2x/3x displays. */
-export declare function transformerIcon(): TransformerIcon;
+ * a ~16 px on-screen symbol crisp on 2x/3x displays. Every call returns the
+ * same canvas, so deck.gl's prop diff keeps the texture it made from it. */
+export declare function transformerIconAtlas(): HTMLCanvasElement;

package/dist/transformer-icon.js

@@ -1,15 +1,32 @@
-/** The IEC two-winding transformer symbol as a deck.gl icon: two overlapping
- * circles, rasterized once to a data URL. Drawn white on transparent with
- * `mask: true`, so the layer's getColor tints it. */
+/** The IEC two-winding transformer symbol as a prepacked deck.gl icon atlas:
+ * two overlapping circles on a canvas that deck.gl uploads as a texture.
+ * Nothing is fetched, so the symbol needs no `data:` in a CSP's connect-src.
+ * Drawn white on transparent with `mask: true`, so the layer's getColor tints
+ * it. */
 const SIZE = 128;
 const RADIUS = 34;
 const OFFSET = 17;
 const STROKE = 9;
+/** The icon name for the layer's getIcon. */
+export const TRANSFORMER_ICON = 'transformer';
+/** The atlas holds the one symbol, anchored at its center. */
+export const transformerIconMapping = {
+    [TRANSFORMER_ICON]: {
+        x: 0,
+        y: 0,
+        width: SIZE,
+        height: SIZE,
+        anchorX: SIZE / 2,
+        anchorY: SIZE / 2,
+        mask: true
+    }
+};
 let cached = null;
 /** Rasterize the glyph lazily; layers only build client-side, after the map
  * modules load, so document is always available here. The 128 px backing keeps
- * a ~16 px on-screen symbol crisp on 2x/3x displays. */
-export function transformerIcon() {
+ * a ~16 px on-screen symbol crisp on 2x/3x displays. Every call returns the
+ * same canvas, so deck.gl's prop diff keeps the texture it made from it. */
+export function transformerIconAtlas() {
     if (cached)
         return cached;
     const canvas = document.createElement('canvas');
@@ -23,13 +40,6 @@ export function transformerIcon() {
         ctx.arc(SIZE / 2 + dx, SIZE / 2, RADIUS, 0, 2 * Math.PI);
         ctx.stroke();
     }
-    cached = {
-        url: canvas.toDataURL(),
-        width: SIZE,
-        height: SIZE,
-        anchorX: SIZE / 2,
-        anchorY: SIZE / 2,
-        mask: true
-    };
+    cached = canvas;
     return cached;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellegen/svelte",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "Svelte components for tellegen power system maps, local case files, and browser solves.",
   "keywords": [
     "svelte",
@@ -67,7 +67,7 @@
     "pack:dry-run": "npm pack --dry-run --cache ../../node_modules/.cache/npm-pack"
   },
   "dependencies": {
-    "@tellegen/engine": "^0.4.1"
+    "@tellegen/engine": "^0.4.6"
   },
   "peerDependencies": {
     "@deck.gl/core": "^9.4.0",