@reshape-biotech/design-system 1.2.4 → 1.2.6

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

@@ -1,19 +1,20 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { Button } from '../button';
-	import { textColor } from '../../tokens';
+	import { textColor, borderColor } from '../../tokens';
 	import { Icon } from '../icons';
 	import IconButton from '../icon-button/IconButton.svelte';
 	import Divider from '../divider/Divider.svelte';
 
 	// 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;
 	const MARKER_COLOR = textColor['icon-blue'] || '#2563eb';
+	const MARKER_BORDER_COLOR = borderColor['interactive'] || '#12192A1A';
 	const TEXT_COLOR = textColor['primary-inverse'];
 	const DRAG_THRESHOLD = 5;
 
@@ -36,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;
@@ -219,6 +219,9 @@
 			circle.setAttribute('r', String(adjustedMarkerSize));
 			circle.setAttribute('fill', MARKER_COLOR);
 			circle.setAttribute('class', 'drop-shadow-sm');
+			circle.setAttribute('opacity', '0.75');
+			circle.setAttribute('stroke', MARKER_BORDER_COLOR);
+			circle.setAttribute('stroke-width', String(1 / transform.scale));
 			group.appendChild(circle);
 
 			const text = document.createElementNS(svgns, 'text');
@@ -241,7 +244,6 @@
 			panningState = null;
 			return;
 		}
-		saveCurrentState();
 		const pt = getSvgPoint(event);
 		marks.push({ x: pt.x, y: pt.y });
 
@@ -368,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();
@@ -480,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;