@reshape-biotech/design-system 1.2.5 → 1.2.6

package/dist/components/icons/index.d.ts

@@ -1,10 +1,11 @@
 import type { IconComponentProps } from 'phosphor-svelte';
 import type { Component } from 'svelte';
-import type { textColor } from './../../tokens';
+import type { textColor, backgroundColor } from './../../tokens';
 export type PhosphorIconProps = Component<IconComponentProps, object, ''>;
-export type IconName = 'Aperture' | 'ArrowFatLineRight' | 'ArrowCounterClockwise' | 'ArrowRight' | 'ArrowUpRight' | 'ArrowUpLeft' | 'ArrowUUpLeft' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'BugBeetle' | 'Calendar' | 'CalendarBlank' | 'Camera' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'Database' | 'Dna' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'LineSegments' | 'List' | 'Link' | 'ListMagnifyingGlass' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'MicrosoftExcelLogo' | 'Moon' | 'Minus' | 'Palette' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Ruler' | 'Question' | 'SealCheck' | 'RadioButton' | 'SealQuestion' | 'SealWarning' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SignIn' | 'SignOut' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'Target' | 'TestTube' | 'Trash' | 'TrashSimple' | 'TreeStructure' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X';
+export type IconName = 'Aperture' | 'ArrowFatLineRight' | 'ArrowCounterClockwise' | 'ArrowRight' | 'ArrowUpRight' | 'ArrowUpLeft' | 'ArrowUUpLeft' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'BugBeetle' | 'Calendar' | 'CalendarBlank' | 'Camera' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'CursorClick' | 'Database' | 'Dna' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'LineSegments' | 'List' | 'Link' | 'ListMagnifyingGlass' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'MicrosoftExcelLogo' | 'Moon' | 'Minus' | 'Palette' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Ruler' | 'Question' | 'SealCheck' | 'RadioButton' | 'SealQuestion' | 'SealWarning' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SignIn' | 'SignOut' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'Target' | 'TestTube' | 'Trash' | 'TrashSimple' | 'TreeStructure' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X';
 export declare const iconMap: Record<IconName, PhosphorIconProps>;
 export declare function renderIcon(iconName: keyof typeof iconMap): PhosphorIconProps;
+export type BackgroundClass = `bg-${keyof typeof backgroundColor}`;
 export type IconColor = keyof typeof textColor;
 export type SupportedAnalysisModelIcons = 'pipeline_halos' | 'pipeline_large_colonies' | 'pipeline_microbial_colonies' | 'pipeline_small_colonies' | 'sgs_enteros' | 'general_germination_rate_with_tracking' | 'general_germination_rate_without_tracking' | 'pipeline_insects' | 'pipeline_colony_formation' | 'pipeline_radial_growth' | 'syngenta_health_score_crw' | 'pipeline_seed_germination' | 'syngenta_health_score_faw' | 'syngenta_health_score_sbl' | 'unilever_cfu_count_lowres';
 export type SupportedPrincipalIcons = 'user' | 'group' | 'organization';

package/dist/components/icons/index.js

@@ -34,6 +34,7 @@ import ClockCountdown from 'phosphor-svelte/lib/ClockCountdown';
 import Copy from 'phosphor-svelte/lib/Copy';
 import Crop from 'phosphor-svelte/lib/Crop';
 import Cube from 'phosphor-svelte/lib/Cube';
+import CursorClick from 'phosphor-svelte/lib/CursorClick';
 import Database from 'phosphor-svelte/lib/Database';
 import Dna from 'phosphor-svelte/lib/Dna';
 import DotsThree from 'phosphor-svelte/lib/DotsThree';
@@ -151,6 +152,7 @@ export const iconMap = {
     Copy,
     Crop,
     Cube,
+    CursorClick,
     Database,
     Dna,
     DotsThree,

package/dist/components/manual-cfu-counter/ManualCFUCounter.svelte

@@ -8,8 +8,8 @@
 
 	// Constants for the component
 	const BASE_IMAGE_SIZE = 464; // Base size, will be overriden by container dimensions
-	const BASE_MARKER_SIZE = 12; // Base size at zoom level 1
-	const BASE_MARKER_FONT_SIZE = 10; // Base font size at zoom level 1
+	const BASE_MARKER_SIZE = 8; // Base size at zoom level 1
+	const BASE_MARKER_FONT_SIZE = 8; // Base font size at zoom level 1
 	const MAX_ZOOM = 10;
 	const MIN_ZOOM = 1;
 	const ZOOM_STEP = 0.001;
@@ -37,7 +37,6 @@
 	let svgElement: SVGSVGElement;
 	let viewport: SVGGraphicsElement;
 	let dotsGroup: SVGElement;
-	let marksHistory: Array<Array<{ x: number; y: number }>> = $state([]);
 	let container: HTMLDivElement;
 
 	let containerW = BASE_IMAGE_SIZE;
@@ -245,7 +244,6 @@
 			panningState = null;
 			return;
 		}
-		saveCurrentState();
 		const pt = getSvgPoint(event);
 		marks.push({ x: pt.x, y: pt.y });
 
@@ -372,23 +370,17 @@
 		updateTransform();
 	}
 
-	function saveCurrentState() {
-		marksHistory.push([...marks]);
-	}
-
+	// Simplified undo function - just pop the last mark
 	function undo() {
-		if (marksHistory.length === 0) return;
-		const previousState = marksHistory.pop();
-		if (previousState) {
-			marks.splice(0, marks.length, ...previousState);
-			marks = marks;
-			renderMarkers();
-		}
+		if (marks.length === 0) return;
+
+		marks.pop();
+		marks = marks;
+		renderMarkers();
 	}
 
 	function reset() {
 		if (marks.length === 0) return;
-		saveCurrentState();
 
 		marks = [];
 		renderMarkers();
@@ -484,7 +476,7 @@
 				variant="transparent-inverse"
 				rounded={false}
 				onclick={undo}
-				disabled={marksHistory.length === 0 || disabled}
+				disabled={marks.length === 0 || disabled}
 				aria-label="Undo last mark"
 			>
 				<Icon iconName={'ArrowUUpLeft'} />

package/dist/components/multi-cfu-counter/MultiCFUCounter.stories.svelte

@@ -0,0 +1,215 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import MultiCFUCounter from './MultiCFUCounter.svelte';
+	const { Story } = defineMeta({
+		component: MultiCFUCounter,
+		title: 'Design System/MultiCFUCounter',
+		tags: ['autodocs'],
+		args: {
+			imageUrl: '/imgs/ris.jpg',
+			marks: [],
+			disabled: false,
+			hideMarkers: false
+		},
+		argTypes: {
+			imageUrl: {
+				control: 'text',
+				description: 'URL of the image to display'
+			},
+			marks: {
+				control: 'object',
+				description: 'Array of marker coordinates. Bindable for two-way data flow.'
+			},
+			onclick: {
+				action: 'clicked',
+				description: 'Event handler for when a marker is added'
+			},
+			disabled: {
+				control: 'boolean',
+				description: 'Disables interaction with the counter'
+			},
+			hideMarkers: {
+				control: 'boolean',
+				description: 'Hides the markers and prevents new ones from being added'
+			}
+		}
+	});
+
+	const largeImage = '/imgs/ris.jpg';
+
+	function handleUpdate(event: MouseEvent, marks: Array<{ x: number; y: number }>) {
+		console.log('Marker count:', marks.length);
+		console.log('Marker positions:', marks);
+	}
+</script>
+
+<script lang="ts">
+	let activeConfigIndex = $state(0);
+	let allMarksMultiConfig = $state([
+		// Yeast Count (config 0) - blue markers
+		{ x: 120, y: 150, configIndex: 0, color: 'icon-blue', id: 'yeast-1' },
+		{ x: 180, y: 220, configIndex: 0, color: 'icon-blue', id: 'yeast-2' },
+		{ x: 250, y: 180, configIndex: 0, color: 'icon-blue', id: 'yeast-3' },
+
+		// Mold Count (config 1) - orange markers
+		{ x: 320, y: 160, configIndex: 1, color: 'icon-orange', id: 'mold-1' },
+		{ x: 380, y: 240, configIndex: 1, color: 'icon-orange', id: 'mold-2' },
+
+		// Colony Type (config 2) - lime markers
+		{ x: 400, y: 120, configIndex: 2, color: 'icon-lime', id: 'type-1' }
+	]);
+
+	const configurations = [
+		{ name: 'Yeast Count', color: 'icon-blue', configIndex: 0 },
+		{ name: 'Mold Count', color: 'icon-orange', configIndex: 1 },
+		{ name: 'Colony Type', color: 'icon-lime', configIndex: 2 }
+	];
+
+	function handleMultiConfigUpdate(event: MouseEvent, marks: Array<{ x: number; y: number }>) {
+		console.log(`Configuration ${activeConfigIndex} updated:`, marks.length, 'marks');
+
+		allMarksMultiConfig = allMarksMultiConfig.filter(
+			(mark) => mark.configIndex !== activeConfigIndex
+		);
+
+		const newMarks = marks.map((mark, index) => ({
+			x: mark.x,
+			y: mark.y,
+			configIndex: activeConfigIndex,
+			color: configurations[activeConfigIndex].color,
+			id: `config-${activeConfigIndex}-${index + 1}`
+		}));
+
+		allMarksMultiConfig = [...allMarksMultiConfig, ...newMarks];
+	}
+
+	function switchConfiguration(configIndex: number) {
+		activeConfigIndex = configIndex;
+	}
+
+	const activeConfigMarks = $derived(
+		allMarksMultiConfig
+			.filter((mark) => mark.configIndex === activeConfigIndex)
+			.map((mark) => ({ x: mark.x, y: mark.y }))
+	);
+</script>
+
+<Story name="Default" asChild>
+	<div class="p-4">
+		<h3 class="mb-4 text-lg font-semibold">Manual CFU Counter</h3>
+		<p class="mb-4 text-sm text-secondary">
+			Click to add markers. Pan by clicking and dragging. Zoom with the mouse wheel.
+		</p>
+		<div class="h-[600px] rounded-lg border border-static p-4">
+			<MultiCFUCounter imageUrl={largeImage} onclick={handleUpdate} activeMarkerName="Yeast" />
+		</div>
+	</div>
+</Story>
+
+<Story name="Multi-Configuration Mode" asChild>
+	<div class="p-4">
+		<h3 class="mb-4 text-lg font-semibold">Multi-Configuration CFU Counter</h3>
+		<p class="mb-4 text-sm text-secondary">
+			This example demonstrates the multi-configuration mode used in assay analysis validation.
+			Switch between different configurations to count different types of objects with color-coded
+			markers.
+		</p>
+
+		<div class="mb-4 flex gap-2">
+			{#each configurations as config, index}
+				<button
+					class="flex items-center gap-2 rounded-lg border px-3 py-2 text-sm transition-colors"
+					class:border-interactive={activeConfigIndex === index}
+					class:bg-surface-secondary={activeConfigIndex === index}
+					class:border-neutral={activeConfigIndex !== index}
+					onclick={() => switchConfiguration(index)}
+				>
+					<div
+						class="h-3 w-3 rounded-full"
+						style="background-color: var(--text-{config.color})"
+					></div>
+					{config.name}
+					<span class="text-xs text-tertiary">
+						({allMarksMultiConfig.filter((m) => m.configIndex === index).length})
+					</span>
+				</button>
+			{/each}
+		</div>
+
+		<div class="mb-4 rounded-lg border border-neutral bg-surface-secondary p-3">
+			<div class="mb-2 flex items-center gap-2">
+				<div
+					class="h-4 w-4 rounded-full"
+					style="background-color: var(--text-{configurations[activeConfigIndex].color})"
+				></div>
+				<span class="font-medium">Active: {configurations[activeConfigIndex].name}</span>
+			</div>
+			<p class="text-sm text-secondary">
+				Click on the image to add markers for {configurations[
+					activeConfigIndex
+				].name.toLowerCase()}. Each configuration maintains its own set of markers with distinct
+				colors.
+			</p>
+		</div>
+
+		<div class="h-[600px] rounded-lg border border-static p-4">
+			<MultiCFUCounter
+				imageUrl={largeImage}
+				marks={activeConfigMarks}
+				allMarks={allMarksMultiConfig}
+				showMultiConfig={true}
+				activeMarkerColor={configurations[activeConfigIndex].color}
+				activeMarkerName={configurations[activeConfigIndex].name}
+				editableConfigIndex={activeConfigIndex}
+				onclick={handleMultiConfigUpdate}
+			/>
+		</div>
+
+		<div class="mt-4 grid grid-cols-3 gap-4">
+			{#each configurations as config, index}
+				<div class="rounded-lg border border-neutral bg-surface p-3">
+					<div class="mb-1 flex items-center gap-2">
+						<div
+							class="h-3 w-3 rounded-full"
+							style="background-color: var(--text-{config.color})"
+						></div>
+						<span class="text-sm font-medium">{config.name}</span>
+					</div>
+					<p class="text-lg font-bold">
+						{allMarksMultiConfig.filter((m) => m.configIndex === index).length}
+					</p>
+					<p class="text-xs text-tertiary">objects counted</p>
+				</div>
+			{/each}
+		</div>
+
+		<details class="mt-4 text-sm">
+			<summary>All Marks Data:</summary>
+			<pre class="mt-2 rounded bg-surface-secondary p-2 text-xs">{JSON.stringify(
+					allMarksMultiConfig,
+					null,
+					2
+				)}</pre>
+		</details>
+	</div>
+</Story>
+
+<Story name="Disabled" asChild>
+	<div class="p-4">
+		<h3 class="mb-4 text-lg font-semibold">Disabled Counter</h3>
+		<p class="mb-4 text-sm text-secondary">No interactions are possible in disabled mode.</p>
+		<div class="h-[600px] rounded-lg border border-static p-4">
+			<MultiCFUCounter
+				imageUrl={largeImage}
+				marks={activeConfigMarks}
+				allMarks={allMarksMultiConfig}
+				showMultiConfig={true}
+				activeMarkerColor={configurations[activeConfigIndex].color}
+				activeMarkerName={configurations[activeConfigIndex].name}
+				editableConfigIndex={activeConfigIndex}
+				onclick={handleMultiConfigUpdate}
+				disabled
+			/>
+		</div>
+	</div>
+</Story>

package/dist/components/multi-cfu-counter/MultiCFUCounter.stories.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const MultiCfuCounter: import("svelte").Component<Record<string, never>, {}, "">;
+type MultiCfuCounter = ReturnType<typeof MultiCfuCounter>;
+export default MultiCfuCounter;