@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/components/graphs/matrix/Matrix.stories.svelte

@@ -1,142 +1,142 @@
 <script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Matrix from './Matrix.svelte';
-	import { backgroundColor } from '../../../tokens';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Matrix from './Matrix.svelte';
+  import { backgroundColor } from '../../../tokens';
 
-	const { Story } = defineMeta({
-		component: Matrix,
-		title: 'Design System/Graphs/Matrix',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: Matrix,
+    title: 'Design System/Graphs/Matrix',
+    tags: ['autodocs'],
+  });
 
-	// Create sample data for a confusion matrix
-	// Format: [row][col] where row = manual label, col = model prediction
-	const confusionMatrix = [
-		[
-			{ value: 2, row: 1, col: 0, backgroundColor: backgroundColor.danger }, // Top-left (Not TNTC/TNTC)
-			{ value: 123, row: 1, col: 1, backgroundColor: backgroundColor.success } // Top-right (Not TNTC/Not TNTC)
-		],
-		[
-			{ value: 27, row: 0, col: 1, backgroundColor: backgroundColor.success }, // Bottom-right (TNTC/Not TNTC)
-			{ value: 8, row: 0, col: 0, backgroundColor: backgroundColor.danger } // Bottom-left (TNTC/TNTC)
-		]
-	];
+  // Create sample data for a confusion matrix
+  // Format: [row][col] where row = manual label, col = model prediction
+  const confusionMatrix = [
+    [
+      { value: 2, row: 1, col: 0, backgroundColor: backgroundColor.danger }, // Top-left (Not TNTC/TNTC)
+      { value: 123, row: 1, col: 1, backgroundColor: backgroundColor.success }, // Top-right (Not TNTC/Not TNTC)
+    ],
+    [
+      { value: 27, row: 0, col: 1, backgroundColor: backgroundColor.success }, // Bottom-right (TNTC/Not TNTC)
+      { value: 8, row: 0, col: 0, backgroundColor: backgroundColor.danger }, // Bottom-left (TNTC/TNTC)
+    ],
+  ];
 
-	const rowLabels = ['TNTC', 'Not TNTC'];
-	const colLabels = ['TNTC', 'Not TNTC'];
+  const rowLabels = ['TNTC', 'Not TNTC'];
+  const colLabels = ['TNTC', 'Not TNTC'];
 
-	function handleCellClick(cell: any) {
-		console.log('Cell clicked:', cell);
-	}
+  function handleCellClick(cell: any) {
+    console.log('Cell clicked:', cell);
+  }
 
-	function handleCellHover(cell: any) {
-		console.log('Cell hover:', cell);
-	}
+  function handleCellHover(cell: any) {
+    console.log('Cell hover:', cell);
+  }
 
-	// Sample data with more categories
-	const multiclassMatrix = [
-		[
-			{ value: 45, row: 0, col: 0, backgroundColor: backgroundColor.success },
-			{ value: 12, row: 0, col: 1, backgroundColor: backgroundColor.neutral },
-			{ value: 3, row: 0, col: 2, backgroundColor: backgroundColor.neutral }
-		],
-		[
-			{ value: 8, row: 1, col: 0, backgroundColor: backgroundColor.neutral },
-			{ value: 78, row: 1, col: 1, backgroundColor: backgroundColor.success },
-			{ value: 5, row: 1, col: 2, backgroundColor: backgroundColor.neutral }
-		],
-		[
-			{ value: 2, row: 2, col: 0, backgroundColor: backgroundColor.neutral },
-			{ value: 6, row: 2, col: 1, backgroundColor: backgroundColor.neutral },
-			{ value: 52, row: 2, col: 2, backgroundColor: backgroundColor.success }
-		]
-	];
+  // Sample data with more categories
+  const multiclassMatrix = [
+    [
+      { value: 45, row: 0, col: 0, backgroundColor: backgroundColor.success },
+      { value: 12, row: 0, col: 1, backgroundColor: backgroundColor.neutral },
+      { value: 3, row: 0, col: 2, backgroundColor: backgroundColor.neutral },
+    ],
+    [
+      { value: 8, row: 1, col: 0, backgroundColor: backgroundColor.neutral },
+      { value: 78, row: 1, col: 1, backgroundColor: backgroundColor.success },
+      { value: 5, row: 1, col: 2, backgroundColor: backgroundColor.neutral },
+    ],
+    [
+      { value: 2, row: 2, col: 0, backgroundColor: backgroundColor.neutral },
+      { value: 6, row: 2, col: 1, backgroundColor: backgroundColor.neutral },
+      { value: 52, row: 2, col: 2, backgroundColor: backgroundColor.success },
+    ],
+  ];
 
-	const multiclassLabels = ['Class A', 'Class B', 'Class C'];
+  const multiclassLabels = ['Class A', 'Class B', 'Class C'];
 
-	// Custom colored matrix
-	const customColorMatrix = [
-		[
-			{ value: 8, row: 0, col: 0, backgroundColor: 'rgba(200, 250, 205, 0.8)' }, // Custom green
-			{ value: 27, row: 0, col: 1, backgroundColor: 'rgba(255, 235, 235, 0.8)' } // Custom red tint
-		],
-		[
-			{ value: 2, row: 1, col: 0, backgroundColor: 'rgba(255, 235, 235, 0.8)' },
-			{ value: 123, row: 1, col: 1, backgroundColor: 'rgba(200, 250, 205, 0.8)' }
-		]
-	];
+  // Custom colored matrix
+  const customColorMatrix = [
+    [
+      { value: 8, row: 0, col: 0, backgroundColor: 'rgba(200, 250, 205, 0.8)' }, // Custom green
+      { value: 27, row: 0, col: 1, backgroundColor: 'rgba(255, 235, 235, 0.8)' }, // Custom red tint
+    ],
+    [
+      { value: 2, row: 1, col: 0, backgroundColor: 'rgba(255, 235, 235, 0.8)' },
+      { value: 123, row: 1, col: 1, backgroundColor: 'rgba(200, 250, 205, 0.8)' },
+    ],
+  ];
 </script>
 
 <Story name="TNTC Confusion Matrix" asChild>
-	<div class="h-[500px] w-full">
-		<Matrix
-			data={confusionMatrix}
-			{rowLabels}
-			{colLabels}
-			xAxisName="Model count"
-			yAxisName="Manual count"
-			onCellClick={handleCellClick}
-			onCellHover={handleCellHover}
-		/>
-	</div>
+  <div class="h-[500px] w-full">
+    <Matrix
+      data={confusionMatrix}
+      {rowLabels}
+      {colLabels}
+      xAxisName="Model count"
+      yAxisName="Manual count"
+      onCellClick={handleCellClick}
+      onCellHover={handleCellHover}
+    />
+  </div>
 </Story>
 
 <Story name="Multiple Classes" asChild>
-	<div class="h-[500px] w-full">
-		<Matrix
-			data={multiclassMatrix}
-			rowLabels={multiclassLabels}
-			colLabels={multiclassLabels}
-			invertYAxis={true}
-			xAxisName="Model count"
-			yAxisName="Manual count"
-		/>
-	</div>
+  <div class="h-[500px] w-full">
+    <Matrix
+      data={multiclassMatrix}
+      rowLabels={multiclassLabels}
+      colLabels={multiclassLabels}
+      invertYAxis={true}
+      xAxisName="Model count"
+      yAxisName="Manual count"
+    />
+  </div>
 </Story>
 
 <Story name="Non-Inverted Axis" asChild>
-	<div class="h-[500px] w-full">
-		<Matrix
-			data={confusionMatrix}
-			{rowLabels}
-			{colLabels}
-			invertYAxis={false}
-			xAxisName="Model count"
-			yAxisName="Manual count"
-		/>
-	</div>
+  <div class="h-[500px] w-full">
+    <Matrix
+      data={confusionMatrix}
+      {rowLabels}
+      {colLabels}
+      invertYAxis={false}
+      xAxisName="Model count"
+      yAxisName="Manual count"
+    />
+  </div>
 </Story>
 
 <Story name="Custom Colors" asChild>
-	<div class="h-[500px] w-full">
-		<Matrix
-			data={customColorMatrix}
-			{rowLabels}
-			{colLabels}
-			invertYAxis={true}
-			xAxisName="Model count"
-			yAxisName="Manual count"
-		/>
-		<div class="mt-4 text-center text-sm">
-			<p>Using custom colors directly in the cell objects</p>
-		</div>
-	</div>
+  <div class="h-[500px] w-full">
+    <Matrix
+      data={customColorMatrix}
+      {rowLabels}
+      {colLabels}
+      invertYAxis={true}
+      xAxisName="Model count"
+      yAxisName="Manual count"
+    />
+    <div class="mt-4 text-center text-sm">
+      <p>Using custom colors directly in the cell objects</p>
+    </div>
+  </div>
 </Story>
 
 <Story name="Semantic Colors" asChild>
-	<div class="h-[500px] w-full">
-		<Matrix
-			data={confusionMatrix}
-			{rowLabels}
-			{colLabels}
-			invertYAxis={true}
-			xAxisName="Model count"
-			yAxisName="Manual count"
-		/>
-		<div class="mt-4 text-center text-sm">
-			<p>Using semantic colors from tokens:</p>
-			<p>Diagonal cells: backgroundColor.success</p>
-			<p>Off-diagonal cells: backgroundColor.neutral</p>
-		</div>
-	</div>
+  <div class="h-[500px] w-full">
+    <Matrix
+      data={confusionMatrix}
+      {rowLabels}
+      {colLabels}
+      invertYAxis={true}
+      xAxisName="Model count"
+      yAxisName="Manual count"
+    />
+    <div class="mt-4 text-center text-sm">
+      <p>Using semantic colors from tokens:</p>
+      <p>Diagonal cells: backgroundColor.success</p>
+      <p>Off-diagonal cells: backgroundColor.neutral</p>
+    </div>
+  </div>
 </Story>

package/dist/components/graphs/matrix/Matrix.svelte

@@ -1,149 +1,149 @@
 <script lang="ts" module>
-	export interface Cell {
-		value: number;
-		row: number;
-		col: number;
-		highlighted?: boolean;
-		backgroundColor?: string;
-		hideAxisNames?: boolean;
-	}
-
-	export type MatrixChartProps = {
-		/**
-		 * Matrix data as a 2D array (cells[row][col])
-		 */
-		data: Cell[][];
-		rowLabels: string[];
-		colLabels: string[];
-		onCellClick?: (cell: Cell) => void;
-		onCellHover?: (cell: Cell) => void;
-		invertYAxis?: boolean;
-		hideAxisNames?: boolean;
-	} & Omit<GenericChartProps, 'timeIndex'>;
+  export interface Cell {
+    value: number;
+    row: number;
+    col: number;
+    highlighted?: boolean;
+    backgroundColor?: string;
+    hideAxisNames?: boolean;
+  }
+
+  export type MatrixChartProps = {
+    /**
+     * Matrix data as a 2D array (cells[row][col])
+     */
+    data: Cell[][];
+    rowLabels: string[];
+    colLabels: string[];
+    onCellClick?: (cell: Cell) => void;
+    onCellHover?: (cell: Cell) => void;
+    invertYAxis?: boolean;
+    hideAxisNames?: boolean;
+  } & Omit<GenericChartProps, 'timeIndex'>;
 </script>
 
 <script lang="ts">
-	import { backgroundColor } from '../../../tokens';
-	import type { GenericChartProps } from '../chart/Chart.svelte';
-
-	const {
-		data,
-		rowLabels,
-		colLabels,
-		xAxisName,
-		yAxisName,
-		width = '100%',
-		height = '100%',
-		onCellClick,
-		onCellHover,
-		loading = false,
-		invertYAxis = false,
-		hideAxisNames = false
-	}: MatrixChartProps = $props();
-
-	let container: HTMLElement | undefined = $state();
-
-	function getCellWithColor(cell: Cell): Cell {
-		let defaultBackgroundColor: string;
-
-		if (data.length === 2 && data[0].length === 2) {
-			const isDiagonal = cell.row === cell.col;
-			defaultBackgroundColor = isDiagonal ? backgroundColor.success : backgroundColor.neutral;
-		} else {
-			defaultBackgroundColor = backgroundColor.neutral;
-		}
-
-		return {
-			...cell,
-			backgroundColor: cell.backgroundColor || defaultBackgroundColor
-		};
-	}
-
-	let displayData = $derived(
-		invertYAxis
-			? [...data].reverse().map((row) => row.map((cell) => getCellWithColor(cell)))
-			: data.map((row) => row.map((cell) => getCellWithColor(cell)))
-	);
-
-	let displayRowLabels = $derived(invertYAxis ? [...rowLabels].reverse() : rowLabels);
-
-	function handleCellClick(cell: Cell) {
-		if (onCellClick) {
-			onCellClick(cell);
-		}
-	}
-
-	function handleCellHover(cell: Cell) {
-		if (onCellHover) {
-			onCellHover(cell);
-		}
-	}
+  import { backgroundColor } from '../../../tokens';
+  import type { GenericChartProps } from '../chart/Chart.svelte';
+
+  const {
+    data,
+    rowLabels,
+    colLabels,
+    xAxisName,
+    yAxisName,
+    width = '100%',
+    height = '100%',
+    onCellClick,
+    onCellHover,
+    loading = false,
+    invertYAxis = false,
+    hideAxisNames = false,
+  }: MatrixChartProps = $props();
+
+  let container: HTMLElement | undefined = $state();
+
+  function getCellWithColor(cell: Cell): Cell {
+    let defaultBackgroundColor: string;
+
+    if (data.length === 2 && data[0].length === 2) {
+      const isDiagonal = cell.row === cell.col;
+      defaultBackgroundColor = isDiagonal ? backgroundColor.success : backgroundColor.neutral;
+    } else {
+      defaultBackgroundColor = backgroundColor.neutral;
+    }
+
+    return {
+      ...cell,
+      backgroundColor: cell.backgroundColor || defaultBackgroundColor,
+    };
+  }
+
+  let displayData = $derived(
+    invertYAxis
+      ? [...data].reverse().map((row) => row.map((cell) => getCellWithColor(cell)))
+      : data.map((row) => row.map((cell) => getCellWithColor(cell)))
+  );
+
+  let displayRowLabels = $derived(invertYAxis ? [...rowLabels].reverse() : rowLabels);
+
+  function handleCellClick(cell: Cell) {
+    if (onCellClick) {
+      onCellClick(cell);
+    }
+  }
+
+  function handleCellHover(cell: Cell) {
+    if (onCellHover) {
+      onCellHover(cell);
+    }
+  }
 </script>
 
 <div class="flex h-full w-full flex-col" style="width: {width}; height: {height};">
-	{#if xAxisName && !hideAxisNames}
-		<!-- 80px is the width of the yAxisName, 72px is the width of the yAxisName, 72px is the yLabels -->
-		<div class="flex w-[calc(100%-72px-72px)] items-center self-end text-center">
-			<div class="mb-2 inline-block w-full border-b pb-3 text-sm font-normal text-secondary">
-				{xAxisName}
-			</div>
-		</div>
-	{/if}
-
-	<div class="flex h-full flex-1 flex-row overflow-hidden">
-		{#if yAxisName && !hideAxisNames}
-			<!-- 26px is the height of the xAxisName -->
-			<div class="mr-2 flex h-[calc(100%-26px)] w-12 items-center self-end border-r">
-				<div class="-rotate-90 transform whitespace-nowrap text-sm font-normal text-secondary">
-					{yAxisName}
-				</div>
-			</div>
-		{/if}
-
-		<div bind:this={container} class="relative flex flex-1 flex-col">
-			<div class="ml-20 flex h-6">
-				{#each colLabels as label}
-					<div class="flex-1 pr-1 text-center text-sm text-secondary">
-						{label}
-					</div>
-				{/each}
-			</div>
-
-			<div class="flex flex-1">
-				<div class="flex w-20 flex-col">
-					{#each displayRowLabels as label}
-						<div class="flex flex-1 items-center justify-end pr-2 text-sm text-secondary">
-							{label}
-						</div>
-					{/each}
-				</div>
-				<div
-					class="grid flex-1"
-					style="grid-template-columns: repeat({colLabels.length}, 1fr); grid-template-rows: repeat({rowLabels.length}, 1fr);"
-				>
-					{#each displayData as row}
-						{#each row as cell}
-							<button
-								class="flex items-center justify-center border border-white"
-								style="background-color: {cell.backgroundColor};"
-								onclick={() => handleCellClick(cell)}
-								onmouseover={() => handleCellHover(cell)}
-								onfocus={() => handleCellHover(cell)}
-								data-row={cell.row}
-								data-col={cell.col}
-							>
-								<span class="text-base font-bold text-primary">{cell.value}</span>
-							</button>
-						{/each}
-					{/each}
-				</div>
-			</div>
-		</div>
-	</div>
-
-	{#if loading}
-		<div class="absolute inset-0 flex items-center justify-center bg-white bg-opacity-70">
-			<div class="text-lg">Loading...</div>
-		</div>
-	{/if}
+  {#if xAxisName && !hideAxisNames}
+    <!-- 80px is the width of the yAxisName, 72px is the width of the yAxisName, 72px is the yLabels -->
+    <div class="flex w-[calc(100%-72px-72px)] items-center self-end text-center">
+      <div class="mb-2 inline-block w-full border-b pb-3 text-sm font-normal text-secondary">
+        {xAxisName}
+      </div>
+    </div>
+  {/if}
+
+  <div class="flex h-full flex-1 flex-row overflow-hidden">
+    {#if yAxisName && !hideAxisNames}
+      <!-- 26px is the height of the xAxisName -->
+      <div class="mr-2 flex h-[calc(100%-26px)] w-12 items-center self-end border-r">
+        <div class="-rotate-90 transform whitespace-nowrap text-sm font-normal text-secondary">
+          {yAxisName}
+        </div>
+      </div>
+    {/if}
+
+    <div bind:this={container} class="relative flex flex-1 flex-col">
+      <div class="ml-20 flex h-6">
+        {#each colLabels as label}
+          <div class="flex-1 pr-1 text-center text-sm text-secondary">
+            {label}
+          </div>
+        {/each}
+      </div>
+
+      <div class="flex flex-1">
+        <div class="flex w-20 flex-col">
+          {#each displayRowLabels as label}
+            <div class="flex flex-1 items-center justify-end pr-2 text-sm text-secondary">
+              {label}
+            </div>
+          {/each}
+        </div>
+        <div
+          class="grid flex-1"
+          style="grid-template-columns: repeat({colLabels.length}, 1fr); grid-template-rows: repeat({rowLabels.length}, 1fr);"
+        >
+          {#each displayData as row}
+            {#each row as cell}
+              <button
+                class="flex items-center justify-center border border-white"
+                style="background-color: {cell.backgroundColor};"
+                onclick={() => handleCellClick(cell)}
+                onmouseover={() => handleCellHover(cell)}
+                onfocus={() => handleCellHover(cell)}
+                data-row={cell.row}
+                data-col={cell.col}
+              >
+                <span class="text-base font-bold text-primary">{cell.value}</span>
+              </button>
+            {/each}
+          {/each}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  {#if loading}
+    <div class="absolute inset-0 flex items-center justify-center bg-white bg-opacity-70">
+      <div class="text-lg">Loading...</div>
+    </div>
+  {/if}
 </div>