@reshape-biotech/design-system 0.0.54 → 1.1.2

package/dist/components/graphs/scatterplot/Scatterplot.svelte

@@ -1,67 +1,334 @@
 <script lang="ts">
-	import { colors, textColor } from '../../../tokens';
-	import Chart from '../chart/Chart.svelte';
-	import type { EChartsOption } from 'echarts';
-
-	type Props = {
-		data: number[][];
-		lineData?: number[];
-		xAxis: string;
-		yAxis: string;
-		loading?: boolean;
-		xAxisOptions?: EChartsOption['xAxis'];
-		yAxisOptions?: EChartsOption['yAxis'];
-		onitemclick?: (params: echarts.ECElementEvent) => void;
-		onmouseover?: (params: echarts.ECElementEvent) => void;
-		onmouseout?: () => void;
+	import { backgroundColor } from '../../../tokens';
+	import Icon from '../../icons/Icon.svelte';
+	import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
+	import type {
+		EChartsOption,
+		SeriesOption,
+		CustomSeriesRenderItemAPI,
+		CustomSeriesRenderItemParams
+	} from 'echarts';
+	import Tooltip from '../../tooltip/Tooltip.svelte';
+	import type { Snippet } from 'svelte';
+
+	export type DataPoint = { value: [number, number]; metadata: any; error_value?: number };
+
+	export type ScatterPlotEchartsEvent = echarts.ECElementEvent & {
+		data: DataPoint;
+	};
+
+	type LegendItem = {
+		label: string;
+		color: string;
+		type: 'point' | 'line' | 'area';
 	};
 
+	type ScatterPlotProps = {
+		data: DataPoint[];
+		lineData?: [[number, number], [number, number]];
+		showConfidenceBand?: boolean;
+		showLegend?: boolean;
+		legendItems?: LegendItem[];
+		children?: Snippet;
+	} & Omit<GenericChartProps, 'timeIndex'>;
+
 	const {
 		data,
-		xAxis,
-		yAxis,
+		xAxisName,
+		yAxisName,
 		loading = false,
+		showConfidenceBand = false,
 		onitemclick,
 		onmouseover,
 		onmouseout,
+		showLegend = false,
+		legendItems = [
+			{ label: 'Count', color: backgroundColor['blue-inverse'], type: 'point' },
+			{ label: 'Perfect agreement', color: backgroundColor['lilac-inverse'], type: 'line' }
+		],
+		children,
 		...props
-	}: Props = $props();
+	}: ScatterPlotProps = $props();
+
+	const displayedLegendItems: LegendItem[] = $derived([
+		...legendItems,
+		...(showConfidenceBand
+			? [
+					{
+						label: 'Error margin',
+						color: backgroundColor.lilac,
+						type: 'area' as const
+					}
+				]
+			: [])
+	]);
 
-	function handleClick(params: echarts.ECElementEvent) {
+	let chartComponent: any;
+
+	function handleClick(params: ScatterPlotEchartsEvent) {
 		onitemclick?.(params);
 	}
 
-	let options: EChartsOption = {
-		xAxis: {
-			type: 'value',
-			name: xAxis,
-			...props.xAxisOptions
-		},
-		yAxis: {
-			type: 'value',
-			name: yAxis,
-			...props.yAxisOptions
-		},
-		series: [
-			{
-				symbolSize: 8,
-				data,
-				type: 'scatter',
-				itemStyle: {
-					color: colors.blue[5].default
+	function handleMouseOver(params: ScatterPlotEchartsEvent) {
+		onmouseover?.(params);
+	}
+
+	function handleMouseOut() {
+		onmouseout?.();
+	}
+
+	// from https://echarts.apache.org/examples/en/editor.html?c=custom-error-bar
+	function renderErrorBarItem(
+		params: CustomSeriesRenderItemParams,
+		api: CustomSeriesRenderItemAPI
+	) {
+		const xValue = api.value(0) as number;
+		const yValue = api.value(1) as number;
+		const error = api.value(2) as number;
+
+		const highPoint = api.coord([xValue, yValue + error]);
+		const lowPoint = api.coord([xValue, yValue - error]);
+
+		if (!highPoint || !lowPoint) {
+			return undefined;
+		}
+
+		// calculate a dynamic width for the caps based on the x-axis scale
+		const sizeValue = api.size?.([1, 0]);
+		const baseWidth = Array.isArray(sizeValue) ? sizeValue[0] : 10;
+		const halfWidth = Math.min((baseWidth ?? 10) * 1.5, 3);
+		const style = {
+			stroke: api.visual('color') as string,
+			fill: undefined
+		};
+
+		return {
+			type: 'group' as const,
+			children: [
+				{
+					type: 'line' as const,
+					transition: 'shape' as const,
+					shape: {
+						x1: highPoint[0] - halfWidth,
+						y1: highPoint[1],
+						x2: highPoint[0] + halfWidth,
+						y2: highPoint[1]
+					},
+					style
+				},
+				{
+					type: 'line' as const,
+					transition: 'shape' as const,
+					shape: {
+						x1: highPoint[0],
+						y1: highPoint[1],
+						x2: lowPoint[0],
+						y2: lowPoint[1]
+					},
+					style
+				},
+				{
+					type: 'line' as const,
+					transition: 'shape' as const,
+					shape: {
+						x1: lowPoint[0] - halfWidth,
+						y1: lowPoint[1],
+						x2: lowPoint[0] + halfWidth,
+						y2: lowPoint[1]
+					},
+					style
 				}
-			},
-			{
+			]
+		};
+	}
+
+	const options = $derived(getChartOptions());
+
+	function getChartOptions(): EChartsOption {
+		const series: SeriesOption[] = [];
+		const errorBarData = data
+			.filter((d) => d.error_value != 0)
+			.map((d) => [...d.value, d.error_value]);
+
+		if (props.lineData && props.lineData.length > 0) {
+			const extendedLineData = [
+				props.lineData[0],
+				[
+					props.lineData[props.lineData.length - 1][0] + 10,
+					props.lineData[props.lineData.length - 1][1] + 10
+				]
+			];
+			series.push({
 				type: 'line',
-				data: props.lineData,
+				data: extendedLineData,
 				lineStyle: {
 					type: 'dashed',
-					color: colors.blue[6]
+					color: backgroundColor['lilac-inverse']
+				},
+				symbol: 'none',
+				emphasis: {
+					disabled: true
 				},
-				showSymbol: false
+				silent: true,
+				zlevel: 0
+			});
+
+			if (showConfidenceBand && props.lineData && props.lineData.length > 0) {
+				const lowerBandData = extendedLineData.map((point) => {
+					const yValue = point[1];
+					// 0-30 = ±3, 30+ = ±10%
+					return [point[0], yValue <= 30 ? yValue - 3 : yValue * 0.9];
+				});
+
+				const upperBandData = extendedLineData.map((point) => {
+					const yValue = point[1];
+					// 0-30 = ±3, 30+ = ±10%
+					return [point[0], yValue <= 30 ? yValue + 3 : yValue * 1.1];
+				});
+
+				series.push({
+					name: 'Confidence Band',
+					type: 'line',
+					data: [...upperBandData, ...lowerBandData.reverse()],
+					symbol: 'none',
+					areaStyle: {
+						color: backgroundColor.lilac,
+						opacity: 0.5
+					},
+					lineStyle: {
+						opacity: 0
+					},
+					tooltip: {
+						show: false
+					},
+					emphasis: {
+						disabled: true
+					},
+					silent: true,
+					zlevel: 0
+				});
 			}
-		]
-	};
+		}
+
+		series.push({
+			symbolSize: 8,
+			data,
+			type: 'scatter',
+			itemStyle: {
+				color: backgroundColor['blue-inverse'],
+				opacity: 0.8
+			},
+			emphasis: {
+				itemStyle: {
+					color: backgroundColor['blue-inverse'],
+					opacity: 1
+				}
+			},
+			animation: false,
+			zlevel: 1
+		});
+
+		if (errorBarData.length > 0) {
+			series.push({
+				type: 'custom',
+				name: 'error',
+				silent: true,
+				itemStyle: {
+					borderWidth: 1.5,
+					color: backgroundColor['blue-inverse']
+				},
+				renderItem: renderErrorBarItem,
+				data: errorBarData,
+				zlevel: 0
+			});
+		}
+
+		return {
+			xAxis: {
+				type: 'value',
+				name: xAxisName,
+				max: props.lineData
+					? Math.ceil(props.lineData[props.lineData.length - 1][0] / 10) * 10
+					: undefined,
+				...props.xAxisOptions
+			},
+			yAxis: {
+				type: 'value',
+				name: yAxisName,
+				min: 0,
+				max: props.lineData
+					? Math.ceil(props.lineData[props.lineData.length - 1][1] / 10) * 10
+					: undefined,
+				...props.yAxisOptions
+			},
+			animation: false,
+			tooltip: { show: false },
+			series
+		};
+	}
+
+	$effect(() => {
+		if (chartComponent && data) {
+			chartComponent.updateOptions(options);
+		}
+	});
 </script>
 
-<Chart {options} onitemclick={handleClick} {onmouseover} {onmouseout} {loading} />
+{#snippet confBandTooltip()}
+	<div class="flex flex-col text-left">
+		<div class="w-max">
+			±3 <span class="text-sm text-secondary-inverse">colonies if count</span> ≤30
+		</div>
+		<div>
+			±10% <span class="text-sm text-secondary-inverse">if count</span> >30
+		</div>
+	</div>
+{/snippet}
+
+<div class="relative h-full" role="presentation">
+	<Chart
+		bind:this={chartComponent}
+		{options}
+		onitemclick={(e) => handleClick(e as ScatterPlotEchartsEvent)}
+		onmouseover={(e) => handleMouseOver(e as ScatterPlotEchartsEvent)}
+		onmouseout={handleMouseOut}
+		{loading}
+		{xAxisName}
+		{yAxisName}
+	>
+		{@render children?.()}
+	</Chart>
+	{#if showLegend}
+		<div
+			class="absolute left-14 top-6 flex h-auto rounded-lg border bg-surface transition-all duration-200"
+		>
+			<div class="ml-1 flex flex-col justify-center p-2">
+				{#each displayedLegendItems as item}
+					<div class="flex items-center gap-2">
+						{#if item.type === 'point'}
+							<div class="h-2 w-2 rounded-full" style="background-color: {item.color}"></div>
+						{:else if item.type === 'line'}
+							<div
+								class="h-[1px] w-2 border border-dashed"
+								style="border-color: {item.color}"
+							></div>
+						{:else if item.type === 'area'}
+							<div class="h-2 w-2" style="background-color: {item.color}"></div>
+						{/if}
+						<span class="text-sm text-secondary">{item.label}</span>
+						{#if item.label === 'Error margin'}
+							<Tooltip placement="right">
+								{#snippet trigger()}
+									<Icon iconName="Info" color="icon-tertiary" />
+								{/snippet}
+								{#snippet content()}
+									{@render confBandTooltip()}
+								{/snippet}
+							</Tooltip>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+</div>

package/dist/components/graphs/scatterplot/Scatterplot.svelte.d.ts

@@ -1,16 +1,26 @@
-import type { EChartsOption } from 'echarts';
-type Props = {
-    data: number[][];
-    lineData?: number[];
-    xAxis: string;
-    yAxis: string;
-    loading?: boolean;
-    xAxisOptions?: EChartsOption['xAxis'];
-    yAxisOptions?: EChartsOption['yAxis'];
-    onitemclick?: (params: echarts.ECElementEvent) => void;
-    onmouseover?: (params: echarts.ECElementEvent) => void;
-    onmouseout?: () => void;
+import { type GenericChartProps } from '../chart/Chart.svelte';
+import type { Snippet } from 'svelte';
+export type DataPoint = {
+    value: [number, number];
+    metadata: any;
+    error_value?: number;
 };
-declare const Scatterplot: import("svelte").Component<Props, {}, "">;
+export type ScatterPlotEchartsEvent = echarts.ECElementEvent & {
+    data: DataPoint;
+};
+type LegendItem = {
+    label: string;
+    color: string;
+    type: 'point' | 'line' | 'area';
+};
+type ScatterPlotProps = {
+    data: DataPoint[];
+    lineData?: [[number, number], [number, number]];
+    showConfidenceBand?: boolean;
+    showLegend?: boolean;
+    legendItems?: LegendItem[];
+    children?: Snippet;
+} & Omit<GenericChartProps, 'timeIndex'>;
+declare const Scatterplot: import("svelte").Component<ScatterPlotProps, {}, "">;
 type Scatterplot = ReturnType<typeof Scatterplot>;
 export default Scatterplot;

package/dist/components/graphs/utils/tooltipFormatter.d.ts

@@ -0,0 +1,10 @@
+import type { CallbackDataParams } from 'echarts/types/dist/shared';
+interface TooltipFormatterConfig {
+    yAxisName?: string;
+    yAxisUnit?: string;
+    focusedSeriesAccessor?: () => string | undefined;
+    getSeriesColor?: (seriesName: string, seriesIndex: number) => string;
+    maxSeriesToShow?: number;
+}
+export declare const createTooltipFormatter: (config: TooltipFormatterConfig) => (params: CallbackDataParams | CallbackDataParams[]) => string;
+export {};

package/dist/components/graphs/utils/tooltipFormatter.js

@@ -0,0 +1,52 @@
+import { textColor } from '../../../tokens';
+const toFixedLocaleString = (value, fractionDigits = 0, locale = undefined) => value?.toLocaleString(locale, {
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits
+}) ?? '';
+export const createTooltipFormatter = (config) => {
+    const { maxSeriesToShow = 10 } = config;
+    return (params) => {
+        if (typeof params !== 'object' || params === null) {
+            return '';
+        }
+        let paramArray = Array.isArray(params) ? params : [params];
+        if (paramArray.length === 0)
+            return '';
+        const currentFocusedSeries = config.focusedSeriesAccessor?.();
+        if (currentFocusedSeries !== undefined) {
+            paramArray = paramArray.filter((p) => currentFocusedSeries.includes(p.seriesName ?? ''));
+            if (paramArray.length === 0)
+                return '';
+        }
+        const firstParam = paramArray[0];
+        const categoryName = firstParam.name ?? ''; // X-axis value (category)
+        const unit = config.yAxisUnit ?? '';
+        let tooltipContent = `<div style="font-weight:bold; margin-bottom: 5px;">${categoryName}</div>`;
+        const originalSeriesCount = paramArray.length;
+        let seriesToShow = paramArray;
+        if (originalSeriesCount > maxSeriesToShow) {
+            seriesToShow = paramArray.slice(0, maxSeriesToShow);
+        }
+        seriesToShow.forEach((p, index) => {
+            if (p.value == null || p.value === undefined)
+                return; // Skip null/undefined values
+            const seriesName = p.seriesName ?? config.yAxisName ?? ''; // Use series name or configured yAxisName
+            const value = p.value; // Assume number after null check
+            let color = p.color;
+            // Resolve color for multiline if needed and getter provided
+            if (!color && config.getSeriesColor && p.seriesName) {
+                color = config.getSeriesColor(p.seriesName, p.seriesIndex ?? index);
+            }
+            // Fallback color if still unresolved (should ideally not happen if configured correctly)
+            color = color || textColor['icon-blue'];
+            const marker = `<span style="display:inline-block;margin-right:5px;border-radius:2px;width:8px;height:8px;background-color:${color}; vertical-align: baseline;"></span>`;
+            const valueString = `<span style="font-weight:500;">${toFixedLocaleString(value, 2)} ${unit}</span>`;
+            tooltipContent += `<div>${marker}${seriesName}: ${valueString}</div>`;
+        });
+        if (originalSeriesCount > maxSeriesToShow) {
+            const remainingCount = originalSeriesCount - maxSeriesToShow;
+            tooltipContent += `<div style="margin-top: 5px; font-style: italic;">... and ${remainingCount} more series</div>`;
+        }
+        return tooltipContent;
+    };
+};

package/dist/components/icon-button/IconButton.stories.svelte

@@ -10,7 +10,7 @@
 	});
 </script>
 
-<Story name="Base">
+<Story name="Base" asChild>
 	<div class="flex flex-col gap-2">
 		<IconButton variant="primary">
 			<Icon iconName="Plus" />
@@ -27,7 +27,7 @@
 	</div>
 </Story>
 
-<Story name="Sizes">
+<Story name="Sizes" asChild>
 	<div class="flex flex-col gap-2">
 		<IconButton variant="secondary" size="xs">
 			<Icon iconName="Plus" />
@@ -40,7 +40,7 @@
 		</IconButton>
 	</div>
 </Story>
-<Story name="Not rounded base">
+<Story name="Not rounded base" asChild>
 	<div class="flex flex-col gap-2">
 		<IconButton variant="primary" rounded={false}>
 			<Icon iconName="Plus" />
@@ -57,7 +57,7 @@
 	</div>
 </Story>
 
-<Story name="Not rounded sizes">
+<Story name="Not rounded sizes" asChild>
 	<div class="flex flex-col gap-2">
 		<IconButton variant="secondary" size="xs" rounded={false}>
 			<Icon iconName="Plus" />
@@ -70,12 +70,12 @@
 		</IconButton>
 	</div>
 </Story>
-<Story name="Disabled">
+<Story name="Disabled" asChild>
 	<IconButton disabled>
 		<Icon iconName="Plus" />
 	</IconButton>
 </Story>
-<Story name="Loading">
+<Story name="Loading" asChild>
 	<IconButton loading>
 		<Icon iconName="Plus" />
 	</IconButton>

package/dist/components/icon-button/IconButton.svelte

@@ -1,20 +1,28 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { Spinner } from '../spinner/';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
 
-	type Variant = 'primary' | 'secondary' | 'transparent' | 'danger';
-	interface Props {
+	type Variant =
+		| 'primary'
+		| 'secondary'
+		| 'transparent'
+		| 'danger'
+		| 'secondary-inverse'
+		| 'transparent-inverse';
+
+	// Combine custom props with standard HTML button attributes,
+	// omitting ones we handle explicitly (like 'class', 'onclick')
+	interface Props extends HTMLButtonAttributes {
 		variant?: Variant;
 		type?: 'button' | 'submit' | 'reset' | null | undefined;
 		loading?: boolean;
-		disabled?: boolean;
 		size?: 'xs' | 'sm' | 'md' | 'lg';
 		children?: Snippet;
-		onclick?: (e: MouseEvent) => void;
-		tabindex?: number | undefined;
 		rounded?: boolean;
 	}
 
+	// Destructure only the component's specific props
 	let {
 		variant = 'transparent',
 		type = 'button',
@@ -24,7 +32,9 @@
 		children,
 		onclick,
 		tabindex,
-		rounded = true
+		rounded = true,
+		class: className,
+		...rest
 	}: Props = $props();
 
 	let sizeClass = $derived(`size-${size}`);
@@ -38,8 +48,9 @@
 		}}
 		{type}
 		{disabled}
-		class="{sizeClass} {variantClass} disabled"
+		class="{sizeClass} {variantClass} disabled {className}"
 		class:rounded
+		{...rest}
 	>
 		{#if loading}
 			<Spinner />
@@ -48,7 +59,15 @@
 		{/if}
 	</button>
 {:else}
-	<button {onclick} {type} {disabled} {tabindex} class="{sizeClass} {variantClass}" class:rounded>
+	<button
+		{onclick}
+		{type}
+		{disabled}
+		{tabindex}
+		class="{sizeClass} {variantClass} {className}"
+		class:rounded
+		{...rest}
+	>
 		{@render children?.()}
 	</button>
 {/if}
@@ -66,7 +85,7 @@
     border-radius: 9999px
 }
 	.disabled {
-    cursor: default
+    cursor: not-allowed
 }
 	.disabled:disabled {
     background-color: #12192a0d;
@@ -148,5 +167,27 @@
 	.color-danger:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(191 57 58 / var(--tw-bg-opacity, 1))
+}
+	.color-secondary-inverse {
+    background-color: #FFFFFF0D;
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+	.color-secondary-inverse:hover {
+    background-color: #FFFFFF26
+}
+
+	.color-transparent-inverse {
+    background-color: transparent;
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+
+	.color-transparent-inverse:hover {
+    background-color: #FFFFFF26
+}
+
+	.color-transparent-inverse:hover:disabled {
+    background-color: transparent
 }
 </style>

package/dist/components/icon-button/IconButton.svelte.d.ts

@@ -1,14 +1,12 @@
 import type { Snippet } from 'svelte';
-type Variant = 'primary' | 'secondary' | 'transparent' | 'danger';
-interface Props {
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type Variant = 'primary' | 'secondary' | 'transparent' | 'danger' | 'secondary-inverse' | 'transparent-inverse';
+interface Props extends HTMLButtonAttributes {
     variant?: Variant;
     type?: 'button' | 'submit' | 'reset' | null | undefined;
     loading?: boolean;
-    disabled?: boolean;
     size?: 'xs' | 'sm' | 'md' | 'lg';
     children?: Snippet;
-    onclick?: (e: MouseEvent) => void;
-    tabindex?: number | undefined;
     rounded?: boolean;
 }
 declare const IconButton: import("svelte").Component<Props, {}, "">;