@reshape-biotech/design-system 2.7.31 → 2.7.32

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

@@ -9,16 +9,39 @@
     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: 2,
+        row: 1,
+        col: 0,
+        classificationLabel: 'False positive',
+        percent: 1.5,
+      },
+      {
+        value: 123,
+        row: 1,
+        col: 1,
+        classificationLabel: 'True negative',
+        percent: 92.2,
+      },
     ],
     [
-      { 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)
+      {
+        value: 27,
+        row: 0,
+        col: 1,
+        classificationLabel: 'True positive',
+        percent: 77.1,
+      },
+      {
+        value: 8,
+        row: 0,
+        col: 0,
+        classificationLabel: 'False negative',
+        percent: 0.5,
+      },
     ],
   ];
 
@@ -73,6 +96,7 @@
       data={confusionMatrix}
       {rowLabels}
       {colLabels}
+      invertYAxis
       xAxisName="Model count"
       yAxisName="Manual count"
       onCellClick={handleCellClick}
@@ -122,21 +146,3 @@
     </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>
-</Story>

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

@@ -6,12 +6,11 @@
     highlighted?: boolean;
     backgroundColor?: string;
     hideAxisNames?: boolean;
+    classificationLabel?: string;
+    percent?: number;
   }
 
   export type MatrixChartProps = {
-    /**
-     * Matrix data as a 2D array (cells[row][col])
-     */
     data: Cell[][];
     rowLabels: string[];
     colLabels: string[];
@@ -24,6 +23,7 @@
 
 <script lang="ts">
   import { backgroundColor } from '../../../tokens';
+  import { colors } from '../../../tokens/colors';
   import type { GenericChartProps } from '../chart/Chart.svelte';
 
   const {
@@ -44,18 +44,25 @@
   let container: HTMLElement | undefined = $state();
 
   function getCellWithColor(cell: Cell): Cell {
-    let defaultBackgroundColor: string;
+    if (cell.backgroundColor) {
+      return { ...cell };
+    }
+
+    let defaultBackgroundColor = backgroundColor.neutral;
 
-    if (data.length === 2 && data[0].length === 2) {
-      const isDiagonal = cell.row === cell.col;
-      defaultBackgroundColor = isDiagonal ? backgroundColor.success : backgroundColor.neutral;
-    } else {
-      defaultBackgroundColor = backgroundColor.neutral;
+    if (cell.percent !== undefined) {
+      const baseColor = colors.blue[5].default;
+      const minAlpha = Math.round(0.05 * 255);
+      const maxAlpha = Math.round(0.5 * 255);
+      const alphaRange = maxAlpha - minAlpha;
+      const alpha = Math.round(minAlpha + (cell.percent / 100) * alphaRange);
+      const alphaHex = alpha.toString(16).padStart(2, '0');
+      defaultBackgroundColor = `${baseColor}${alphaHex}`;
     }
 
     return {
       ...cell,
-      backgroundColor: cell.backgroundColor || defaultBackgroundColor,
+      backgroundColor: defaultBackgroundColor,
     };
   }
 
@@ -92,8 +99,7 @@
 
   <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-10 items-center self-end border-r">
+      <div class="mr-2 flex h-[calc(100%)] items-center self-end border-r">
         <div class="-rotate-90 transform whitespace-nowrap text-sm font-normal text-secondary">
           {yAxisName}
         </div>
@@ -101,14 +107,6 @@
     {/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-24 flex-col">
           {#each displayRowLabels as label}
@@ -124,7 +122,7 @@
           {#each displayData as row}
             {#each row as cell}
               <button
-                class="flex items-center justify-center border border-white"
+                class="m-0.5 flex flex-col items-center justify-center rounded-lg border border p-1 text-center"
                 style="background-color: {cell.backgroundColor};"
                 onclick={() => handleCellClick(cell)}
                 onmouseover={() => handleCellHover(cell)}
@@ -132,12 +130,32 @@
                 data-row={cell.row}
                 data-col={cell.col}
               >
-                <span class="text-base font-bold text-primary">{cell.value}</span>
+                <div class="flex flex-col gap-2">
+                  {#if cell.percent !== undefined}
+                    <p class="text-xl text-primary">
+                      {Math.round(cell.percent)}%
+                    </p>
+                  {/if}
+                  {#if cell.classificationLabel !== undefined}
+                    <span class="text-secondary">
+                      {cell.classificationLabel}
+                    </span>
+                  {:else}
+                    <span class="text-secondary">{cell.value}</span>
+                  {/if}
+                </div>
               </button>
             {/each}
           {/each}
         </div>
       </div>
+      <div class="ml-20 flex h-6 p-2">
+        {#each colLabels as label}
+          <div class="flex-1 pr-1 text-center text-sm text-secondary">
+            {label}
+          </div>
+        {/each}
+      </div>
     </div>
   </div>
 

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

@@ -5,11 +5,10 @@ export interface Cell {
     highlighted?: boolean;
     backgroundColor?: string;
     hideAxisNames?: boolean;
+    classificationLabel?: string;
+    percent?: number;
 }
 export type MatrixChartProps = {
-    /**
-     * Matrix data as a 2D array (cells[row][col])
-     */
     data: Cell[][];
     rowLabels: string[];
     colLabels: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshape-biotech/design-system",
-  "version": "2.7.31",
+  "version": "2.7.32",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -388,6 +388,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^3.0.0",
     "globals": "^15.0.0",
+    "jsdom": "^27.0.1",
     "luxon": "^3.5.0",
     "marked": "^15.0.0",
     "phosphor-svelte": "^3.0.1",