@reshape-biotech/design-system 2.4.2 → 2.5.2

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;