@reshape-biotech/design-system 2.4.2 → 2.5.2

package/dist/components/graphs/line/LineChart.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+  import { textColor, borderColor, chartColor, boxShadow } from '../../../tokens';
+  import Chart from '../chart/Chart.svelte';
+  import type { EChartsOption } from 'echarts';
+  import * as echarts from 'echarts/core';
+  import { createTooltipFormatter } from '../utils/tooltipFormatter';
+  import { formattedDurationCompact } from '../utils/duration';
+  import type { LineChartProps } from './types';
+
+  let {
+    data,
+    xAxisName,
+    yAxisName,
+    withArea = false,
+    color = chartColor['accent'],
+    captureInterval,
+    additionalSeries,
+    graphic,
+    tooltipFormatter,
+    shouldDim = () => false,
+    ...props
+  }: LineChartProps = $props();
+
+  const formatTooltip = createTooltipFormatter({
+    yAxisName: yAxisName,
+    yAxisUnit: props.yAxisUnit,
+  });
+
+  const toFixedLocaleString = (
+    value?: number | undefined,
+    fractionDigits: number | undefined = 0,
+    locale: string | undefined = undefined
+  ): string =>
+    value?.toLocaleString(locale, {
+      minimumFractionDigits: fractionDigits,
+      maximumFractionDigits: fractionDigits,
+    }) ?? '';
+
+  const captureIntervals = captureInterval
+    ? Array(data.length)
+        .fill(null)
+        .map((_, timeIndex) => {
+          const seconds = timeIndex * captureInterval;
+          return formattedDurationCompact(seconds);
+        })
+    : undefined;
+
+  const seriesData = $derived.by(() => {
+    const mainSeries = {
+      type: 'line',
+      symbol: 'circle',
+      name: yAxisName,
+      symbolSize: 1,
+      data: data,
+      triggerLineEvent: true,
+      lineStyle: {
+        color: color,
+        opacity: shouldDim() ? 0.3 : 1,
+      },
+      itemStyle: {
+        color: color,
+        opacity: shouldDim() ? 0.3 : 1,
+      },
+      areaStyle: withArea
+        ? {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: echarts.color.modifyAlpha(color, 0.2),
+              },
+              {
+                offset: 1,
+                color: echarts.color.modifyAlpha(color, 0),
+              },
+            ]),
+          }
+        : undefined,
+    } as any;
+    return additionalSeries ? [mainSeries, ...additionalSeries] : mainSeries;
+  });
+
+  let options: EChartsOption = $derived({
+    grid: {
+      containLabel: true,
+      left: 0,
+      right: 16,
+      bottom: 16,
+      top: 16,
+    },
+    textStyle: {
+      color: textColor['secondary'],
+      fontFamily: 'af Another Sans',
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      axisLabel: {
+        fontSize: 11,
+      },
+      axisLine: {
+        onZero: false,
+        lineStyle: {
+          color: borderColor['axis'],
+        },
+      },
+      data: captureIntervals,
+      ...props.xAxisOptions,
+    } as any as EChartsOption['xAxis'],
+    yAxis: {
+      type: 'value',
+      alignTicks: true,
+      axisLabel: {
+        formatter: (value: any) => value.toLocaleString(),
+      } as any,
+      axisPointer: {
+        label: {
+          formatter: (value: any) => toFixedLocaleString(value.value, 2),
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: borderColor['input'],
+          type: 'dashed',
+        },
+      },
+      ...props.yAxisOptions,
+    },
+    selectedMode: 'multiple',
+    series: seriesData,
+    tooltip: {
+      axisPointer: {
+        type: 'line',
+        z: 0,
+        lineStyle: {
+          type: 'solid',
+          color: borderColor['axis'],
+        },
+      },
+      trigger: 'axis',
+      borderWidth: 0,
+      borderRadius: 6,
+      extraCssText: `box-shadow: ${boxShadow.menu}`,
+      formatter: tooltipFormatter || formatTooltip,
+    },
+    ...(graphic ? { graphic } : {}),
+  });
+</script>
+
+<Chart
+  {options}
+  {...{
+    ...props,
+    xAxisName,
+    yAxisName,
+  }}
+/>

package/dist/components/graphs/line/LineChart.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { LineChartProps } from './types';
+declare const LineChart: import("svelte").Component<LineChartProps, {}, "">;
+type LineChart = ReturnType<typeof LineChart>;
+export default LineChart;

package/dist/components/graphs/line/types.d.ts

@@ -0,0 +1,13 @@
+import type { EChartsOption } from 'echarts';
+import type { GenericChartProps } from '../chart/Chart.svelte';
+export interface LineChartProps extends GenericChartProps {
+    data: (number | null)[];
+    withArea?: boolean;
+    color?: string;
+    grid?: EChartsOption['grid'];
+    captureInterval?: number;
+    additionalSeries?: EChartsOption['series'][];
+    graphic?: EChartsOption['graphic'];
+    tooltipFormatter?: (params: any) => string;
+    shouldDim?: () => boolean;
+}

package/dist/components/graphs/line/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,142 @@
+<script module lang="ts">
+  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'],
+  });
+
+  // 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'];
+
+  function handleCellClick(cell: any) {
+    console.log('Cell clicked:', 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 },
+    ],
+  ];
+
+  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)' },
+    ],
+  ];
+</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>
+</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>
+</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>
+</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>
+</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.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Matrix from './Matrix.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Matrix: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Matrix = InstanceType<typeof Matrix>;
+export default Matrix;

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

@@ -0,0 +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'>;
+</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);
+    }
+  }
+</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-10 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-24 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>

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

@@ -0,0 +1,24 @@
+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'>;
+import type { GenericChartProps } from '../chart/Chart.svelte';
+declare const Matrix: import("svelte").Component<MatrixChartProps, {}, "">;
+type Matrix = ReturnType<typeof Matrix>;
+export default Matrix;

package/dist/components/graphs/matrix/index.d.ts

@@ -0,0 +1,3 @@
+import Matrix from './Matrix.svelte';
+export { Matrix };
+export default Matrix;

package/dist/components/graphs/matrix/index.js

@@ -0,0 +1,3 @@
+import Matrix from './Matrix.svelte';
+export { Matrix };
+export default Matrix;