@selvajs/ui 6.6.0-beta.19 → 6.6.0-beta.20

package/dist/components/compute/AppLayout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { UISchema, SupportedTypes, ParameterPreset } from '@selvajs/schemas';
-	import type { SolveSettlement } from '@selvajs/solve/client';
+	import type { LiveSolveState, SolveSettlement } from '@selvajs/solve/client';
 	import type { ActionButton } from '../../types/actionButton';
 	import type { PresetLabels } from '../../types/presetLabels';
 	import { ChevronUp, Download, Ellipsis, Upload } from '@lucide/svelte';
@@ -35,13 +35,19 @@
 		meshes?: any[];
 		isSolving: boolean;
 		/**
-		 * `createSolvingIndicator(...).show`, not `isSolving`: drives the solving chip and the
-		 * viewer's progress bar, which would otherwise flash on every sub-second solve.
+		 * `createSolvingIndicator(...).show`, not `isSolving`: grows the action row's solve status,
+		 * which would otherwise flash on every sub-second solve.
 		 */
 		showSolvingIndicator?: boolean;
-		/** `createSolvingIndicator(...).slow`: the viewer dims its result as stale. */
+		/** `createSolvingIndicator(...).slow`: the solve status grows into a card with progress. */
 		solveIsSlow?: boolean;
-		/** `SolvingIndicator`'s `placement`; `inline` puts it in the action row. */
+		/** The session's live channel: step, count and bar for that card. */
+		live?: LiveSolveState;
+		/** Abort in that card. The host's `SolveMessages` should then take `progressShownByHost`. */
+		onabort?: () => void;
+		/** As passed to `createSolvingIndicator`. */
+		freezesDuringSolve?: boolean;
+		/** @deprecated Ignored: the solving status always sits in the action row. */
 		solvingIndicatorPlacement?: 'floating' | 'inline';
 		/** Rendered above the action row, for a host that keeps the solve's messages in the flow. */
 		solveMessages?: Snippet;
@@ -75,7 +81,9 @@
 		isSolving,
 		showSolvingIndicator = false,
 		solveIsSlow = false,
-		solvingIndicatorPlacement = 'floating',
+		live,
+		onabort,
+		freezesDuringSolve = false,
 		solveMessages,
 		hasPendingChanges = false,
 		hasNeverSolved = false,
@@ -100,8 +108,6 @@
 	let presets = $state<ParameterPresetManager | null>(null);
 	const hasMenu = $derived(showSaveButton || showLoadButton || panelActions.length > 0);
 	const resultIsStale = $derived(hasPendingChanges || hasNeverSolved);
-	// With a Calculate button the button itself says it is solving.
-	const showSolvingChip = $derived(showSolvingIndicator && schema.instanceSolve !== false);
 
 	const shownTabs = $derived(
 		schema.layout.type === 'tabbed'
@@ -283,13 +289,18 @@
 			{oncalculate}
 			trailing={hasMenu ? actionsMenu : undefined}
 		/>
-	{:else if hasMenu || solvingIndicatorPlacement === 'inline'}
+	{:else}
 		<div class="mt-3 pb-3 pt-2 px-2 gap-2 flex items-center border-t border-border">
-			{#if solvingIndicatorPlacement === 'inline'}
-				<SolvingIndicator show={showSolvingChip} placement="inline" />
-			{/if}
+			<SolvingIndicator
+				{isSolving}
+				show={showSolvingIndicator}
+				slow={solveIsSlow}
+				{live}
+				{onabort}
+				{freezesDuringSolve}
+			/>
 			{#if hasMenu}
-				<div class="ml-auto">{@render actionsMenu()}</div>
+				{@render actionsMenu()}
 			{/if}
 		</div>
 	{/if}
@@ -340,8 +351,6 @@
 				<Viewer
 					{meshes}
 					bind:isFullscreen={isViewerFullscreen}
-					isSolving={showSolvingIndicator}
-					isSlow={solveIsSlow}
 					drawerOpen={drawer === 'full'}
 					{logoUrl}
 					{onViewerReady}
@@ -486,8 +495,6 @@
 						<Viewer
 							{meshes}
 							bind:isFullscreen={isViewerFullscreen}
-							isSolving={showSolvingIndicator}
-							isSlow={solveIsSlow}
 							{logoUrl}
 							{onViewerReady}
 							viewerConfig={{
@@ -548,10 +555,6 @@
 			{/if}
 		</div>
 	{/if}
-
-	{#if solvingIndicatorPlacement === 'floating'}
-		<SolvingIndicator show={showSolvingChip} />
-	{/if}
 </main>
 
 <!-- The save, load and validation dialogs; the footer's menu opens them. -->

package/dist/components/compute/AppLayout.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { UISchema, SupportedTypes, ParameterPreset } from '@selvajs/schemas';
-import type { SolveSettlement } from '@selvajs/solve/client';
+import type { LiveSolveState, SolveSettlement } from '@selvajs/solve/client';
 import type { ActionButton } from '../../types/actionButton';
 import type { PresetLabels } from '../../types/presetLabels';
 import type { ThreeViewer } from '@selvajs/visualization/render';
@@ -15,13 +15,19 @@ interface Props {
     meshes?: any[];
     isSolving: boolean;
     /**
-     * `createSolvingIndicator(...).show`, not `isSolving`: drives the solving chip and the
-     * viewer's progress bar, which would otherwise flash on every sub-second solve.
+     * `createSolvingIndicator(...).show`, not `isSolving`: grows the action row's solve status,
+     * which would otherwise flash on every sub-second solve.
      */
     showSolvingIndicator?: boolean;
-    /** `createSolvingIndicator(...).slow`: the viewer dims its result as stale. */
+    /** `createSolvingIndicator(...).slow`: the solve status grows into a card with progress. */
     solveIsSlow?: boolean;
-    /** `SolvingIndicator`'s `placement`; `inline` puts it in the action row. */
+    /** The session's live channel: step, count and bar for that card. */
+    live?: LiveSolveState;
+    /** Abort in that card. The host's `SolveMessages` should then take `progressShownByHost`. */
+    onabort?: () => void;
+    /** As passed to `createSolvingIndicator`. */
+    freezesDuringSolve?: boolean;
+    /** @deprecated Ignored: the solving status always sits in the action row. */
     solvingIndicatorPlacement?: 'floating' | 'inline';
     /** Rendered above the action row, for a host that keeps the solve's messages in the flow. */
     solveMessages?: Snippet;

package/dist/components/compute/ComputeApp.svelte

@@ -288,6 +288,8 @@
 					isSolving={session.isSolving}
 					showSolvingIndicator={solvingIndicator.show}
 					solveIsSlow={solvingIndicator.slow}
+					live={session.live}
+					onabort={() => session.abort()}
 					hasPendingChanges={session.hasPendingChanges}
 					hasNeverSolved={session.hasNeverSolved}
 					bind:isViewerFullscreen
@@ -318,4 +320,5 @@
 	onabort={() => session.abort()}
 	onconfirm={() => session.acknowledge()}
 	ondiscard={() => session.discard()}
+	progressShownByHost={schema?.instanceSolve !== false}
 />

package/dist/components/compute/SolveMessages.svelte

@@ -20,6 +20,7 @@
 	import IssueList, { type Issue } from '../primitives/IssueList.svelte';
 	import SeverityIcon from '../primitives/SeverityIcon.svelte';
 	import { getLocaleContext } from '../../i18n/localeContext.svelte.js';
+	import { createLiveProgress } from '../../compute/liveProgress.svelte.js';
 
 	interface Props {
 		/** What the running (or most recent) solve has said over the live channel. */
@@ -38,6 +39,11 @@
 		freezesDuringSolve?: boolean;
 		/** `floating` overlays the bottom centre; `inline` sits in the flow below the host's content. */
 		placement?: 'floating' | 'inline';
+		/**
+		 * The host shows progress and Abort itself (`AppLayout`'s solve status), so the live view
+		 * keeps only the messages that arrive mid-solve.
+		 */
+		progressShownByHost?: boolean;
 	}
 
 	let {
@@ -48,7 +54,8 @@
 		onconfirm,
 		ondiscard,
 		freezesDuringSolve = false,
-		placement = 'floating'
+		placement = 'floating',
+		progressShownByHost = false
 	}: Props = $props();
 
 	const locale = getLocaleContext();
@@ -56,50 +63,10 @@
 
 	const REMARK_LINGER_MS = 6000;
 
-	const progress = $derived([...live.progress.values()]);
-
-	// A report only arrives when a step starts, so a bar that just shows `fraction` stands still
-	// through the step and then jumps. When the plugin knows how long the step took last time, the
-	// bar runs linearly to where the step will end, over that time. Steps are weighted by time, so
-	// linear gives one steady speed across the solve; any easing curve visibly speeds up and
-	// crawls within each step. A slower run waits at the step's end; a faster one snaps ahead.
-	let bars = $state.raw<Record<string, { width: number; ms: number }>>({});
-	// Any live event re-runs the effect below. Only a source with a new report may re-snap;
-	// the rest keep easing where they are.
-	let seen = new Map<string, unknown>();
-	let targets: Record<string, { width: number; ms: number }> = {};
-	$effect(() => {
-		const snapped: Record<string, { width: number; ms: number }> = {};
-		const eased: Record<string, { width: number; ms: number }> = {};
-		const current = untrack(() => bars);
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity -- bookkeeping for this effect; reactive reads here would re-trigger it
-		const nextSeen = new Map<string, unknown>();
-		for (const p of progress) {
-			if (p.fraction === undefined) continue;
-			const key = p.source ?? '';
-			nextSeen.set(key, p);
-			if (seen.get(key) === p && current[key]) {
-				snapped[key] = current[key];
-				// This run's cleanup cancelled the frame that would have started the ease.
-				if (targets[key] && current[key] !== targets[key]) eased[key] = targets[key];
-				continue;
-			}
-			snapped[key] = { width: p.fraction, ms: 150 };
-			if (p.nextFraction !== undefined && p.stepMs !== undefined) {
-				eased[key] = { width: p.nextFraction, ms: p.stepMs };
-			}
-		}
-		seen = nextSeen;
-		targets = eased;
-		bars = snapped;
-		if (Object.keys(eased).length === 0) return;
-		// Two frames: the snapped width must be painted before the eased one is set, or the
-		// browser folds both into one style change and there is nothing to transition from.
-		let frame = requestAnimationFrame(() => {
-			frame = requestAnimationFrame(() => (bars = { ...snapped, ...eased }));
-		});
-		return () => cancelAnimationFrame(frame);
-	});
+	const liveProgress = createLiveProgress(() => live);
+	const progress = $derived(liveProgress.progress);
+	const bars = $derived(liveProgress.bars);
+	const headline = $derived(liveProgress.headline);
 	// Grasshopper's own complaints stay in the footer log; this panel shows what the author wrote.
 	const authored = $derived(diagnostics.filter((d) => d.isGate));
 
@@ -207,37 +174,11 @@
 		}))
 	);
 
-	// Steps a few milliseconds long would swap the headline faster than it can be read. Each one
-	// stays up for at least this long; steps that end sooner are skipped in the label but still
-	// count in the bar. The label and its step count move together so they never disagree.
-	const HEADLINE_MIN_MS = 200;
-	let headline = $state.raw<(typeof progress)[number] | undefined>(undefined);
-	let headlineAt = 0;
-	$effect(() => {
-		const next = progress[0];
-		const shown = untrack(() => headline);
-		if (next?.label === shown?.label && next?.done === shown?.done) {
-			headline = next;
-			return;
-		}
-		const show = () => {
-			headline = next;
-			headlineAt = performance.now();
-		};
-		const wait = HEADLINE_MIN_MS - (performance.now() - headlineAt);
-		if (!shown || wait <= 0) {
-			show();
-			return;
-		}
-		const timer = setTimeout(show, wait);
-		return () => clearTimeout(timer);
-	});
-
 	const visible = $derived(
 		view === 'review' || view === 'blocked'
 			? true
 			: view === 'live'
-				? revealed && (rows.length > 0 || progress.length > 0)
+				? revealed && (rows.length > 0 || (!progressShownByHost && progress.length > 0))
 				: rows.length > 0 && lingering
 	);
 
@@ -297,7 +238,7 @@
 		data-testid="solve-messages"
 		data-view={view}
 	>
-		{#if view === 'live'}
+		{#if view === 'live' && !progressShownByHost}
 			{@const head = headline ?? progress[0]}
 			<div>
 				<div>
@@ -402,7 +343,11 @@
 		{/if}
 
 		{#if rows.length > 0}
-			<div class="max-h-40 overflow-y-auto {view === 'live' ? 'mt-3 pt-3 border-t' : ''}">
+			<div
+				class="max-h-40 overflow-y-auto {view === 'live' && !progressShownByHost
+					? 'mt-3 pt-3 border-t'
+					: ''}"
+			>
 				<IssueList {issues} variant="plain" />
 			</div>
 		{/if}

package/dist/components/compute/SolveMessages.svelte.d.ts

@@ -17,6 +17,11 @@ interface Props {
     freezesDuringSolve?: boolean;
     /** `floating` overlays the bottom centre; `inline` sits in the flow below the host's content. */
     placement?: 'floating' | 'inline';
+    /**
+     * The host shows progress and Abort itself (`AppLayout`'s solve status), so the live view
+     * keeps only the messages that arrive mid-solve.
+     */
+    progressShownByHost?: boolean;
 }
 declare const SolveMessages: import("svelte").Component<Props, {}, "">;
 type SolveMessages = ReturnType<typeof SolveMessages>;

package/dist/components/preview/ChartOutput.svelte

@@ -6,6 +6,7 @@
 	import { loadScript } from '../../utils/loadScript.js';
 	import { getLocaleContext } from '../../i18n/localeContext.svelte.js';
 	import { formatMessage } from '../../i18n/messages.js';
+	import { upgradePlotlyFigure, type PlotlyFigure } from '../../features/chart/plotly-compat.js';
 
 	interface Props {
 		item: OutputChartLayoutItem;
@@ -17,19 +18,18 @@
 	const locale = getLocaleContext();
 	const t = $derived(locale.messages);
 
-	const MAP_TYPE_SET = new Set(['scattermap', 'scattermapbox', 'choropleth', 'scattergeo']);
-
-	type PlotlyTrace = Record<string, unknown>;
-	type PlotlyFigure = {
-		data: PlotlyTrace[];
-		layout: Record<string, unknown>;
-		config?: Record<string, unknown>;
-	};
+	const MAP_TYPE_SET = new Set([
+		'scattermap',
+		'choroplethmap',
+		'densitymap',
+		'choropleth',
+		'scattergeo'
+	]);
 
 	const figData = $derived.by(() => {
 		if (!value) return null;
 		try {
-			return JSON.parse(value) as PlotlyFigure;
+			return upgradePlotlyFigure(JSON.parse(value) as PlotlyFigure);
 		} catch {
 			return null;
 		}
@@ -47,9 +47,9 @@
 		if (window.Plotly) return window.Plotly;
 
 		// Pinned by hash: the plugin's web UI runs this on the origin that holds its bridge secret.
-		await loadScript('https://cdn.plot.ly/plotly-3.4.0.min.js', {
+		await loadScript('https://cdn.plot.ly/plotly-4.1.2.min.js', {
 			crossOrigin: 'anonymous',
-			integrity: 'sha384-pFOQ7loGBChmUyS4Tszy+he8OWeYkwTFjc2xii4aJUWWiGwf2u2OEc04T5iDRpMp'
+			integrity: 'sha384-hHv6D3tTUUBpp4tVv6t2Dc3oGuRhphmWOTKUR8jWyN0Pnon1g3iebKCNDNmKmxo8'
 		});
 		// @ts-expect-error — Plotly is loaded dynamically onto window
 		return window.Plotly;
@@ -113,8 +113,13 @@
 		return a === 255 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${(a / 255).toFixed(3)})`;
 	}
 
-	function getThemeColors(): { textColor: string; gridColor: string } {
-		if (!containerEl) return { textColor: '#333', gridColor: '#eee' };
+	function getThemeColors(): {
+		textColor: string;
+		gridColor: string;
+		fontFamily: string;
+		colorway: string[];
+	} {
+		if (!containerEl) return { textColor: '#333', gridColor: '#eee', fontFamily: '', colorway: [] };
 		const style = getComputedStyle(containerEl);
 		const textColor = toRgb(style.getPropertyValue('color').trim() || '#333');
 		const gridColor = toRgb(
@@ -122,7 +127,12 @@
 				style.getPropertyValue('--color-border')?.trim() ||
 				'rgba(128,128,128,0.2)'
 		);
-		return { textColor, gridColor };
+		// Figures that leave colours unset take Selva's chart palette rather than Plotly's.
+		const colorway = [1, 2, 3, 4, 5]
+			.map((i) => style.getPropertyValue(`--chart-${i}`).trim())
+			.filter(Boolean)
+			.map(toRgb);
+		return { textColor, gridColor, fontFamily: style.fontFamily, colorway };
 	}
 
 	async function renderChart() {
@@ -131,7 +141,7 @@
 		loading = true;
 		try {
 			const Plotly = await loadPlotly();
-			const { textColor, gridColor } = getThemeColors();
+			const { textColor, gridColor, fontFamily, colorway } = getThemeColors();
 			const isMapFigure = figData.data?.some((t) => MAP_TYPE_SET.has(t.type as string));
 
 			const {
@@ -151,7 +161,8 @@
 				...layoutRest,
 				autosize: true,
 				margin: { t: 24, r: 8, b: 40, l: 60, pad: 0 },
-				font: { color: textColor },
+				font: { color: textColor, ...(fontFamily ? { family: fontFamily } : {}) },
+				...(colorway.length && !layoutRest.colorway ? { colorway } : {}),
 				paper_bgcolor: layoutRest.paper_bgcolor ?? 'transparent',
 				plot_bgcolor: layoutRest.plot_bgcolor ?? 'transparent',
 				// Plotly's axis tick/label color doesn't inherit the top-level `font.color`, so this
@@ -166,12 +177,20 @@
 					: {})
 			};
 
-			Plotly.react(containerEl, figData.data, layout, {
-				responsive: true,
-				displayModeBar: 'hover',
-				displaylogo: false,
-				modeBarButtonsToRemove: ['sendDataToCloud', 'lasso2d', 'select2d'],
-				...figData.config
+			Plotly.react(containerEl, {
+				data: figData.data,
+				layout,
+				// Animated figures (e.g. Canopy's Animate) carry their frames here.
+				frames: figData.frames ?? [],
+				config: {
+					responsive: true,
+					displayModeBar: 'hover',
+					displaylogo: false,
+					// Plotly 4's "Share chart" button uploads the figure to Plotly's cloud.
+					showSendToCloud: false,
+					modeBarButtonsToRemove: ['sendDataToCloud', 'lasso2d', 'select2d'],
+					...figData.config
+				}
 			});
 		} catch (e) {
 			error = e instanceof Error ? e.message : t.chartRenderFailed;