@reshape-biotech/design-system 2.7.37 → 2.7.39

package/dist/components/graphs/scatterplot/Scatterplot.stories.svelte

@@ -10,12 +10,12 @@
   });
 
   const data: DataPoint[] = [
-    { value: [10.0, 8.04], metadata: { blip: '1', blop: 1, user_id: '1' } },
-    { value: [8.07, 6.95], metadata: { blip: '2', blop: 2, user_id: '2' } },
-    { value: [13.0, 7.58], metadata: { blip: '3', blop: 3, user_id: '3' } },
-    { value: [9.05, 8.81], metadata: { blip: '4', blop: 4, user_id: '4' } },
-    { value: [12.0, 8.33], metadata: { blip: '5', blop: 5, user_id: '5' } },
-    { value: [14.0, 7.66], metadata: { blip: '6', blop: 6, user_id: '6' } },
+    { value: [10, 8], metadata: { id: '1' } },
+    { value: [8, 7], metadata: { id: '2' } },
+    { value: [13, 8], metadata: { id: '3' } },
+    { value: [9, 9], metadata: { id: '4' } },
+    { value: [12, 8], metadata: { id: '5' } },
+    { value: [14, 8], metadata: { id: '6' } },
   ];
 
   const errorBarsData: DataPoint[] = data.map((d) => ({
@@ -28,78 +28,147 @@
     [12, 14],
   ];
 
-  function handleItemClick(params: echarts.ECElementEvent) {}
-
-  function handleMouseOver(params: echarts.ECElementEvent) {}
-
-  function handleMouseOut() {}
+  let tooltipState = $state({ visible: false, x: 0, y: 0, point: null as DataPoint | null });
 </script>
 
 <Story name="Base" asChild>
   <div class="h-[400px] w-full">
-    <Scatterplot
-      {data}
-      xAxisName="Manual count"
-      yAxisName="Analysis count"
-      onitemclick={handleItemClick}
-      onmouseover={handleMouseOver}
-      onmouseout={handleMouseOut}
-    />
+    <Scatterplot {data} xAxisName="X axis" yAxisName="Y axis" />
   </div>
 </Story>
 
-<Story name="With Line Data" asChild>
+<Story name="With reference line" asChild>
   <div class="h-[400px] w-full">
-    <Scatterplot
-      {data}
-      {lineData}
-      xAxisName="Manual count"
-      yAxisName="Analysis count"
-      onitemclick={handleItemClick}
-      onmouseover={handleMouseOver}
-      onmouseout={handleMouseOut}
-    />
+    <Scatterplot {data} {lineData} xAxisName="X axis" yAxisName="Y axis" />
   </div>
 </Story>
-<Story name="Error bars" asChild>
+
+<Story name="With error bars" asChild>
+  <div class="h-[400px] w-full">
+    <Scatterplot data={errorBarsData} {lineData} xAxisName="X axis" yAxisName="Y axis" />
+  </div>
+</Story>
+
+<Story name="With confidence band" asChild>
   <div class="h-[400px] w-full">
     <Scatterplot
       data={errorBarsData}
       {lineData}
-      xAxisName="Manual count"
-      yAxisName="Analysis count"
-      onitemclick={handleItemClick}
-      onmouseover={handleMouseOver}
-      onmouseout={handleMouseOut}
+      xAxisName="X axis"
+      yAxisName="Y axis"
+      showConfidenceBand
     />
   </div>
 </Story>
-<Story name="Error bars with confidence band" asChild>
+
+<Story name="With legend" asChild>
   <div class="h-[400px] w-full">
     <Scatterplot
-      data={errorBarsData}
+      {data}
       {lineData}
-      xAxisName="Manual count"
-      yAxisName="Analysis count"
+      xAxisName="X axis"
+      yAxisName="Y axis"
       showConfidenceBand
-      onitemclick={handleItemClick}
-      onmouseover={handleMouseOver}
-      onmouseout={handleMouseOut}
+      showLegend
     />
   </div>
 </Story>
-<Story name="Confidence band and legend" asChild>
+
+<Story name="With groups" asChild>
+  {@const data: DataPoint[] = [
+    { value: [8, 7], metadata: { id: 'A' } },
+    { value: [8, 10], metadata: { id: 'A' } },
+    { value: [15, 14], metadata: { id: 'B' } },
+    { value: [23, 21], metadata: { id: 'C' } },
+    { value: [23, 25], metadata: { id: 'C' } },
+    { value: [23, 22], metadata: { id: 'C' } },
+    { value: [35, 32], metadata: { id: 'D' } },
+    { value: [35, 39], metadata: { id: 'D' }, disagreement: true },
+    { value: [42, 41], metadata: { id: 'E' } },
+    { value: [42, 44], metadata: { id: 'E' } },
+    { value: [56, 58], metadata: { id: 'F' } },
+  ]}
+  {@const groups = [[0, 1], [2], [3, 4, 5], [6, 7], [8, 9], [10]]}
+  {@const lineData: [[number, number], [number, number]] = [[0, 0], [65, 65]]}
   <div class="h-[400px] w-full">
     <Scatterplot
       {data}
+      {groups}
       {lineData}
-      xAxisName="Manual count"
-      yAxisName="Analysis count"
+      xAxisName="X axis"
+      yAxisName="Y axis"
       showConfidenceBand
-      showLegend
-      onitemclick={handleItemClick}
-      onmouseover={handleMouseOver}
-      onmouseout={handleMouseOut}
-    />
+      onmouseover={(params) => {
+        tooltipState.visible = true;
+        tooltipState.x = (params.event?.event as MouseEvent)?.offsetX ?? 0;
+        tooltipState.y = (params.event?.event as MouseEvent)?.offsetY ?? 0;
+        tooltipState.point = params.data;
+      }}
+      onmouseout={() => {
+        tooltipState.visible = false;
+        tooltipState.point = null;
+      }}
+    >
+      {#if tooltipState.visible && tooltipState.point}
+        <div
+          class="pointer-events-none absolute z-50 rounded border bg-white p-2 text-xs shadow-lg"
+          style="left: {tooltipState.x + 10}px; top: {tooltipState.y + 10}px;"
+        >
+          <div class="font-medium">ID: {tooltipState.point.metadata.id}</div>
+          <div>X: {tooltipState.point.value[0]}</div>
+          <div>Y: {tooltipState.point.value[1]}</div>
+        </div>
+      {/if}
+    </Scatterplot>
+  </div>
+</Story>
+
+<Story name="Overlapping groups" asChild>
+  {@const data: DataPoint[] = [
+    { value: [12, 9], metadata: { id: 'A' } },
+    { value: [12, 15], metadata: { id: 'A' } },
+    { value: [12, 12], metadata: { id: 'B' } },
+    { value: [12, 18], metadata: { id: 'B' } },
+    { value: [12, 14], metadata: { id: 'B' } },
+    { value: [31, 27], metadata: { id: 'C' } },
+    { value: [31, 34], metadata: { id: 'C' } },
+    { value: [31, 30], metadata: { id: 'D' } },
+  ]}
+  {@const groups = [
+    [0, 1],
+    [2, 3, 4],
+    [5, 6],
+    [7],
+  ]}
+  {@const lineData: [[number, number], [number, number]] = [[0, 0], [40, 40]]}
+  <div class="h-[400px] w-full">
+    <Scatterplot
+      {data}
+      {groups}
+      {lineData}
+      xAxisName="X axis"
+      yAxisName="Y axis"
+      onmouseover={(params) => {
+        tooltipState.visible = true;
+        tooltipState.x = (params.event?.event as MouseEvent)?.offsetX ?? 0;
+        tooltipState.y = (params.event?.event as MouseEvent)?.offsetY ?? 0;
+        tooltipState.point = params.data;
+      }}
+      onmouseout={() => {
+        tooltipState.visible = false;
+        tooltipState.point = null;
+      }}
+    >
+      {#if tooltipState.visible && tooltipState.point}
+        <div
+          class="pointer-events-none absolute z-50 rounded border bg-white p-2 text-xs shadow-lg"
+          style="left: {tooltipState.x + 10}px; top: {tooltipState.y + 10}px;"
+        >
+          <div class="font-medium">ID: {tooltipState.point.metadata.id}</div>
+          <div>X: {tooltipState.point.value[0]}</div>
+          <div>Y: {tooltipState.point.value[1]}</div>
+        </div>
+      {/if}
+    </Scatterplot>
   </div>
 </Story>

package/dist/components/graphs/scatterplot/Scatterplot.svelte

@@ -16,7 +16,6 @@
   export type DataPoint = {
     value: [number, number];
     metadata: any;
-    error_value?: number;
     disagreement?: boolean | null;
     highlighted?: boolean | null;
   };
@@ -31,9 +30,15 @@
     type: 'point' | 'line' | 'area';
   };
 
+  type LineSegment = {
+    points: [number, number][];
+    disagreement?: boolean;
+  };
+
   type ScatterPlotProps = {
     data: DataPoint[];
     lineData?: [[number, number], [number, number]];
+    groups?: number[][];
     showConfidenceBand?: boolean;
     showLegend?: boolean;
     onitemclick?: (params: ScatterPlotEchartsEvent) => void;
@@ -58,10 +63,55 @@
       { label: 'Perfect agreement', color: backgroundColor['lilac-inverse'], type: 'line' },
     ],
     highlightIndex = null,
+    groups = [],
     children,
     ...props
   }: ScatterPlotProps = $props();
 
+  let hoveredGroupIndices = $state<number[] | null>(null);
+
+  const findGroupForIndex = (idx: number): number[] | null => {
+    if (groups.length === 0) return null;
+    return groups.find((g) => g.includes(idx)) ?? null;
+  };
+
+  const highlightedIndices = $derived.by((): number[] | null => {
+    if (hoveredGroupIndices !== null) return hoveredGroupIndices;
+    if (highlightIndex !== null) {
+      const group = findGroupForIndex(highlightIndex);
+      return group ?? [highlightIndex];
+    }
+    return null;
+  });
+
+  const groupLines = $derived.by((): LineSegment[] => {
+    if (groups.length === 0) return [];
+
+    return groups
+      .filter((g) => g.length > 1)
+      .map((groupIndices) => {
+        const points = groupIndices.map((i) => data[i]?.value).filter(Boolean) as [
+          number,
+          number,
+        ][];
+        const hasDisagreement = groupIndices.some((i) => data[i]?.disagreement);
+        return { points, disagreement: hasDisagreement };
+      });
+  });
+
+  const groupedDisagreement = $derived.by((): boolean[] => {
+    const result = data.map((d) => d.disagreement ?? false);
+    for (const groupIndices of groups) {
+      const hasDisagreement = groupIndices.some((i) => data[i]?.disagreement);
+      if (hasDisagreement) {
+        for (const i of groupIndices) {
+          result[i] = true;
+        }
+      }
+    }
+    return result;
+  });
+
   const displayedLegendItems: LegendItem[] = $derived([
     ...legendItems,
     ...(showConfidenceBand
@@ -82,75 +132,44 @@
   }
 
   function handleMouseOver(params: ScatterPlotEchartsEvent) {
+    const hoveredIdx = params.dataIndex;
+    if (hoveredIdx !== undefined && hoveredIdx >= 0) {
+      const group = findGroupForIndex(hoveredIdx);
+      hoveredGroupIndices = group ?? [hoveredIdx];
+    }
     onmouseover?.(params);
   }
 
   function handleMouseOut() {
+    hoveredGroupIndices = null;
     onmouseout?.();
   }
 
-  // from https://echarts.apache.org/examples/en/editor.html?c=custom-error-bar
-  function renderErrorBarItem(
-    params: CustomSeriesRenderItemParams,
-    api: CustomSeriesRenderItemAPI
-  ) {
+  function renderLineItem(params: CustomSeriesRenderItemParams, api: CustomSeriesRenderItemAPI) {
     const xValue = api.value(0) as number;
-    const yValue = api.value(1) as number;
-    const error = api.value(2) as number;
+    const yMin = api.value(1) as number;
+    const yMax = api.value(2) as number;
     const disagreement = api.value(3) as number;
 
-    const highPoint = api.coord([xValue, yValue + error]);
-    const lowPoint = api.coord([xValue, yValue - error]);
+    const topPoint = api.coord([xValue, yMax]);
+    const bottomPoint = api.coord([xValue, yMin]);
 
-    if (!highPoint || !lowPoint) {
+    if (!topPoint || !bottomPoint) {
       return undefined;
     }
 
-    // calculate a dynamic width for the caps based on the x-axis scale
-    const sizeValue = api.size?.([1, 0]);
-    const baseWidth = Array.isArray(sizeValue) ? sizeValue[0] : 10;
-    const halfWidth = Math.min((baseWidth ?? 10) * 1.5, 3);
-    const style = {
-      stroke: disagreement ? textColor['icon-tertiary'] : backgroundColor['blue-inverse'],
-    };
-
     return {
-      type: 'group' as const,
-      children: [
-        {
-          type: 'line' as const,
-          transition: 'shape' as const,
-          shape: {
-            x1: highPoint[0] - halfWidth,
-            y1: highPoint[1],
-            x2: highPoint[0] + halfWidth,
-            y2: highPoint[1],
-          },
-          style,
-        },
-        {
-          type: 'line' as const,
-          transition: 'shape' as const,
-          shape: {
-            x1: highPoint[0],
-            y1: highPoint[1],
-            x2: lowPoint[0],
-            y2: lowPoint[1],
-          },
-          style,
-        },
-        {
-          type: 'line' as const,
-          transition: 'shape' as const,
-          shape: {
-            x1: lowPoint[0] - halfWidth,
-            y1: lowPoint[1],
-            x2: lowPoint[0] + halfWidth,
-            y2: lowPoint[1],
-          },
-          style,
-        },
-      ],
+      type: 'line' as const,
+      shape: {
+        x1: topPoint[0],
+        y1: topPoint[1],
+        x2: bottomPoint[0],
+        y2: bottomPoint[1],
+      },
+      style: {
+        stroke: disagreement ? textColor['icon-tertiary'] : backgroundColor['blue-inverse'],
+        lineWidth: 1.5,
+      },
     };
   }
 
@@ -158,9 +177,6 @@
 
   function getChartOptions(): EChartsOption {
     const series: SeriesOption[] = [];
-    const errorBarData = data
-      .filter((d) => d.error_value != 0)
-      .map((d) => [...d.value, d.error_value, d.disagreement ? 1 : 0]);
 
     if (props.lineData && props.lineData.length > 0) {
       const extendedLineData = [
@@ -226,36 +242,32 @@
       type: 'scatter',
       itemStyle: {
         color: (params: any) =>
-          params?.data?.disagreement ? textColor['icon-tertiary'] : backgroundColor['blue-inverse'],
+          groupedDisagreement[params.dataIndex]
+            ? textColor['icon-tertiary']
+            : backgroundColor['blue-inverse'],
         opacity: 1,
       },
       emphasis: {
-        itemStyle: {
-          color: (params: any) => {
-            const point = params?.data as DataPoint;
-            return point?.disagreement
-              ? textColor['icon-tertiary']
-              : backgroundColor['blue-inverse'];
-          },
-          opacity: 1,
-        },
+        disabled: true,
       },
       animation: false,
     });
 
-    const p =
-      highlightIndex !== null && highlightIndex >= 0 && highlightIndex < data.length
-        ? data[highlightIndex]
-        : null;
+    const highlightPoints =
+      highlightedIndices !== null
+        ? highlightedIndices
+            .filter((i) => i >= 0 && i < data.length)
+            .map((i) => ({ point: data[i], index: i }))
+        : [];
     series.push({
       id: 'highlight-overlay',
       type: 'scatter',
-      data: [p],
+      data: highlightPoints.map((h) => h.point),
       symbolSize: 16,
       itemStyle: {
         color: (params: any) => {
-          const point = params?.data as DataPoint;
-          return point?.disagreement
+          const originalIndex = highlightPoints[params.dataIndex]?.index;
+          return groupedDisagreement[originalIndex]
             ? backgroundColor['neutral-hover']
             : backgroundColor['blue-hover'];
         },
@@ -264,16 +276,23 @@
       silent: true,
     });
 
-    if (errorBarData.length > 0) {
+    if (groupLines.length > 0) {
+      const linesData = groupLines.map((line) => {
+        const yValues = line.points.map((p: [number, number]) => p[1]);
+        const xValue = line.points[0][0];
+        return [xValue, Math.min(...yValues), Math.max(...yValues), line.disagreement ? 1 : 0];
+      });
+
       series.push({
         type: 'custom',
-        name: 'error',
+        name: 'lines',
         silent: true,
-        itemStyle: { borderWidth: 1.5 },
-        renderItem: renderErrorBarItem,
-        data: errorBarData,
+        renderItem: renderLineItem,
+        data: linesData,
+        z: -1,
       });
     }
+
     return {
       xAxis: {
         type: 'value',

package/dist/components/graphs/scatterplot/Scatterplot.svelte.d.ts

@@ -4,7 +4,6 @@ import type { Snippet } from 'svelte';
 export type DataPoint = {
     value: [number, number];
     metadata: any;
-    error_value?: number;
     disagreement?: boolean | null;
     highlighted?: boolean | null;
 };
@@ -19,6 +18,7 @@ type LegendItem = {
 type ScatterPlotProps = {
     data: DataPoint[];
     lineData?: [[number, number], [number, number]];
+    groups?: number[][];
     showConfidenceBand?: boolean;
     showLegend?: boolean;
     onitemclick?: (params: ScatterPlotEchartsEvent) => void;

package/dist/components/status-badge/StatusBadge.stories.svelte

@@ -486,6 +486,80 @@
   </div>
 </Story>
 
+<Story name="Init" asChild>
+  <p class="font-mono text-xs">Medium:</p>
+  <div class="flex flex-row gap-1">
+    <Tooltip>
+      {#snippet trigger()}
+        <StatusBadge type="init">
+          {#snippet icon()}
+            <Icon>
+              {#snippet children(props)}
+                <SpinnerGap {...props} />
+              {/snippet}
+            </Icon>
+          {/snippet}
+          {#snippet content()}
+            <div>Initializing</div>
+          {/snippet}
+        </StatusBadge>
+      {/snippet}
+      {#snippet content()}
+        <div class="flex flex-col text-left">
+          <p class="font-bold">Device initializing</p>
+          <p class="text-xs">Will be ready soon</p>
+        </div>
+      {/snippet}</Tooltip
+    >
+
+    <StatusBadge type="init">
+      {#snippet icon()}
+        <Icon>
+          {#snippet children(props)}
+            <SpinnerGap {...props} />
+          {/snippet}
+        </Icon>
+      {/snippet}
+    </StatusBadge>
+  </div>
+  <br />
+  <p class="font-mono text-xs">Small:</p>
+  <div class="flex flex-row gap-1">
+    <Tooltip>
+      {#snippet trigger()}
+        <StatusBadge type="init" size="sm">
+          {#snippet icon()}
+            <Icon>
+              {#snippet children(props)}
+                <SpinnerGap {...props} />
+              {/snippet}
+            </Icon>
+          {/snippet}
+          {#snippet content()}
+            <div>Initializing</div>
+          {/snippet}
+        </StatusBadge>
+      {/snippet}
+      {#snippet content()}
+        <div class="flex flex-col text-left">
+          <p class="font-bold">Device initializing</p>
+          <p class="text-xs">Will be ready soon</p>
+        </div>
+      {/snippet}</Tooltip
+    >
+
+    <StatusBadge type="init" size="sm">
+      {#snippet icon()}
+        <Icon>
+          {#snippet children(props)}
+            <SpinnerGap {...props} />
+          {/snippet}
+        </Icon>
+      {/snippet}
+    </StatusBadge>
+  </div>
+</Story>
+
 <Story name="Icon only" asChild>
   <StatusBadge type="neutral" iconOnly>
     {#snippet icon()}

package/dist/components/status-badge/StatusBadge.svelte

@@ -4,7 +4,7 @@
 
   interface Props {
     // we can add dynamic classes because they are safelisted in tailwind-safelist.txt
-    type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
+    type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error' | 'init';
     size?: 'md' | 'sm';
     content?: Snippet;
     progress?: Snippet;
@@ -145,6 +145,16 @@
     --tw-text-opacity: 1;
     color: rgb(235 70 71 / var(--tw-text-opacity, 1))
 }
+  .badge-init {
+    background-color: #ff7a001A
+}
+  .badge-init:hover {
+    background-color: #ff7a0040
+}
+  .badge-init .icon {
+    --tw-text-opacity: 1;
+    color: rgb(255 122 0 / var(--tw-text-opacity, 1))
+}
 
   :global(.badge > div) {
     display: flex;

package/dist/components/status-badge/StatusBadge.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 interface Props {
-    type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
+    type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error' | 'init';
     size?: 'md' | 'sm';
     content?: Snippet;
     progress?: Snippet;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshape-biotech/design-system",
-  "version": "2.7.37",
+  "version": "2.7.39",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",