@reshape-biotech/design-system 2.4.2 → 2.5.2

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

@@ -0,0 +1,335 @@
+<script lang="ts">
+  import { backgroundColor } from '../../../tokens';
+  import Icon from '../../icons/Icon.svelte';
+  import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
+  import type {
+    EChartsOption,
+    SeriesOption,
+    CustomSeriesRenderItemAPI,
+    CustomSeriesRenderItemParams,
+  } from 'echarts';
+  import Tooltip from '../../tooltip/Tooltip.svelte';
+  import type { Snippet } from 'svelte';
+
+  export type DataPoint = { value: [number, number]; metadata: any; error_value?: number };
+
+  export type ScatterPlotEchartsEvent = echarts.ECElementEvent & {
+    data: DataPoint;
+  };
+
+  type LegendItem = {
+    label: string;
+    color: string;
+    type: 'point' | 'line' | 'area';
+  };
+
+  type ScatterPlotProps = {
+    data: DataPoint[];
+    lineData?: [[number, number], [number, number]];
+    showConfidenceBand?: boolean;
+    showLegend?: boolean;
+    legendItems?: LegendItem[];
+    children?: Snippet;
+  } & Omit<GenericChartProps, 'timeIndex'>;
+
+  const {
+    data,
+    xAxisName,
+    yAxisName,
+    loading = false,
+    showConfidenceBand = false,
+    onitemclick,
+    onmouseover,
+    onmouseout,
+    showLegend = false,
+    legendItems = [
+      { label: 'Count', color: backgroundColor['blue-inverse'], type: 'point' },
+      { label: 'Perfect agreement', color: backgroundColor['lilac-inverse'], type: 'line' },
+    ],
+    children,
+    ...props
+  }: ScatterPlotProps = $props();
+
+  const displayedLegendItems: LegendItem[] = $derived([
+    ...legendItems,
+    ...(showConfidenceBand
+      ? [
+          {
+            label: 'Error margin',
+            color: backgroundColor.lilac,
+            type: 'area' as const,
+          },
+        ]
+      : []),
+  ]);
+
+  let chartComponent: any;
+
+  function handleClick(params: ScatterPlotEchartsEvent) {
+    onitemclick?.(params);
+  }
+
+  function handleMouseOver(params: ScatterPlotEchartsEvent) {
+    onmouseover?.(params);
+  }
+
+  function handleMouseOut() {
+    onmouseout?.();
+  }
+
+  // from https://echarts.apache.org/examples/en/editor.html?c=custom-error-bar
+  function renderErrorBarItem(
+    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 highPoint = api.coord([xValue, yValue + error]);
+    const lowPoint = api.coord([xValue, yValue - error]);
+
+    if (!highPoint || !lowPoint) {
+      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: api.visual('color') as string,
+      fill: undefined,
+    };
+
+    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,
+        },
+      ],
+    };
+  }
+
+  const options = $derived(getChartOptions());
+
+  function getChartOptions(): EChartsOption {
+    const series: SeriesOption[] = [];
+    const errorBarData = data
+      .filter((d) => d.error_value != 0)
+      .map((d) => [...d.value, d.error_value]);
+
+    if (props.lineData && props.lineData.length > 0) {
+      const extendedLineData = [
+        props.lineData[0],
+        [
+          props.lineData[props.lineData.length - 1][0] + 10,
+          props.lineData[props.lineData.length - 1][1] + 10,
+        ],
+      ];
+      series.push({
+        type: 'line',
+        data: extendedLineData,
+        lineStyle: {
+          type: 'dashed',
+          color: backgroundColor['lilac-inverse'],
+        },
+        symbol: 'none',
+        emphasis: {
+          disabled: true,
+        },
+        silent: true,
+        zlevel: 0,
+      });
+
+      if (showConfidenceBand && props.lineData && props.lineData.length > 0) {
+        const lowerBandData = extendedLineData.map((point) => {
+          const yValue = point[1];
+          // 0-30 = ±3, 30+ = ±10%
+          return [point[0], yValue <= 30 ? yValue - 3 : yValue * 0.9];
+        });
+
+        const upperBandData = extendedLineData.map((point) => {
+          const yValue = point[1];
+          // 0-30 = ±3, 30+ = ±10%
+          return [point[0], yValue <= 30 ? yValue + 3 : yValue * 1.1];
+        });
+
+        series.push({
+          name: 'Confidence Band',
+          type: 'line',
+          data: [...upperBandData, ...lowerBandData.reverse()],
+          symbol: 'none',
+          areaStyle: {
+            color: backgroundColor.lilac,
+            opacity: 0.5,
+          },
+          lineStyle: {
+            opacity: 0,
+          },
+          tooltip: {
+            show: false,
+          },
+          emphasis: {
+            disabled: true,
+          },
+          silent: true,
+          zlevel: 0,
+        });
+      }
+    }
+
+    series.push({
+      symbolSize: 8,
+      data,
+      type: 'scatter',
+      itemStyle: {
+        color: backgroundColor['blue-inverse'],
+        opacity: 0.8,
+      },
+      emphasis: {
+        itemStyle: {
+          color: backgroundColor['blue-inverse'],
+          opacity: 1,
+        },
+      },
+      animation: false,
+      zlevel: 1,
+    });
+
+    if (errorBarData.length > 0) {
+      series.push({
+        type: 'custom',
+        name: 'error',
+        silent: true,
+        itemStyle: {
+          borderWidth: 1.5,
+          color: backgroundColor['blue-inverse'],
+        },
+        renderItem: renderErrorBarItem,
+        data: errorBarData,
+        zlevel: 0,
+      });
+    }
+
+    return {
+      xAxis: {
+        type: 'value',
+        name: xAxisName,
+        max: props.lineData
+          ? Math.ceil(props.lineData[props.lineData.length - 1][0] / 10) * 10
+          : undefined,
+        ...props.xAxisOptions,
+      },
+      yAxis: {
+        type: 'value',
+        name: yAxisName,
+        min: 0,
+        max: props.lineData
+          ? Math.ceil(props.lineData[props.lineData.length - 1][1] / 10) * 10
+          : undefined,
+        ...props.yAxisOptions,
+      },
+      animation: false,
+      tooltip: { show: false },
+      series,
+    };
+  }
+
+  $effect(() => {
+    if (chartComponent && data) {
+      chartComponent.updateOptions(options);
+    }
+  });
+</script>
+
+{#snippet confBandTooltip()}
+  <div class="flex flex-col text-left">
+    <div class="w-max">
+      ±3 <span class="text-sm text-secondary-inverse">colonies if count</span> ≤30
+    </div>
+    <div>
+      ±10% <span class="text-sm text-secondary-inverse">if count</span> >30
+    </div>
+  </div>
+{/snippet}
+
+<div class="relative h-full" role="presentation">
+  <Chart
+    bind:this={chartComponent}
+    {options}
+    renderer="svg"
+    onitemclick={(e) => handleClick(e as ScatterPlotEchartsEvent)}
+    onmouseover={(e) => handleMouseOver(e as ScatterPlotEchartsEvent)}
+    onmouseout={handleMouseOut}
+    {loading}
+    {xAxisName}
+    {yAxisName}
+  >
+    {@render children?.()}
+  </Chart>
+  {#if showLegend}
+    <div
+      class="absolute left-14 top-6 flex h-auto rounded-lg border bg-surface transition-all duration-200"
+    >
+      <div class="ml-1 flex flex-col justify-center p-2">
+        {#each displayedLegendItems as item}
+          <div class="flex items-center gap-2">
+            {#if item.type === 'point'}
+              <div class="h-2 w-2 rounded-full" style="background-color: {item.color}"></div>
+            {:else if item.type === 'line'}
+              <div
+                class="h-[1px] w-2 border border-dashed"
+                style="border-color: {item.color}"
+              ></div>
+            {:else if item.type === 'area'}
+              <div class="h-2 w-2" style="background-color: {item.color}"></div>
+            {/if}
+            <span class="text-sm text-secondary">{item.label}</span>
+            {#if item.label === 'Error margin'}
+              <Tooltip placement="right">
+                {#snippet trigger()}
+                  <Icon iconName="Info" color="icon-tertiary" />
+                {/snippet}
+                {#snippet content()}
+                  {@render confBandTooltip()}
+                {/snippet}
+              </Tooltip>
+            {/if}
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,26 @@
+import { type GenericChartProps } from '../chart/Chart.svelte';
+import type { Snippet } from 'svelte';
+export type DataPoint = {
+    value: [number, number];
+    metadata: any;
+    error_value?: number;
+};
+export type ScatterPlotEchartsEvent = echarts.ECElementEvent & {
+    data: DataPoint;
+};
+type LegendItem = {
+    label: string;
+    color: string;
+    type: 'point' | 'line' | 'area';
+};
+type ScatterPlotProps = {
+    data: DataPoint[];
+    lineData?: [[number, number], [number, number]];
+    showConfidenceBand?: boolean;
+    showLegend?: boolean;
+    legendItems?: LegendItem[];
+    children?: Snippet;
+} & Omit<GenericChartProps, 'timeIndex'>;
+declare const Scatterplot: import("svelte").Component<ScatterPlotProps, {}, "">;
+type Scatterplot = ReturnType<typeof Scatterplot>;
+export default Scatterplot;

package/dist/components/graphs/utils/duration.d.ts

@@ -0,0 +1 @@
+export declare function formattedDurationCompact(seconds: number): string;

package/dist/components/graphs/utils/duration.js

@@ -0,0 +1,33 @@
+import { Duration } from 'luxon';
+function secondsToDHM(seconds, roundnearest10 = true, formatDays = true) {
+    // Using Luxon
+    let minutes = Math.floor(seconds / 60);
+    if (roundnearest10) {
+        minutes = Math.ceil(minutes / 10) * 10;
+    }
+    let duration = Duration.fromObject({ minutes: minutes });
+    const units = ['hours', 'minutes'];
+    if (formatDays) {
+        units.unshift('days');
+    }
+    // @ts-ignore
+    duration = duration.shiftTo(...units);
+    return {
+        days: duration.days,
+        hours: duration.hours,
+        minutes: duration.minutes,
+    };
+}
+export function formattedDurationCompact(seconds) {
+    // Format duration to show in the compact format: 1d 2h 30m
+    // Hide days if duration is less than 24 hours
+    const totalHours = seconds / 3600;
+    const showDays = totalHours >= 24;
+    const { days, hours, minutes } = secondsToDHM(seconds, false, showDays);
+    if (showDays) {
+        return `${days}d ${hours}h ${minutes}m`;
+    }
+    else {
+        return `${hours}h ${minutes}m`;
+    }
+}

package/dist/components/graphs/utils/tooltipFormatter.d.ts

@@ -0,0 +1,15 @@
+import type { CallbackDataParams } from 'echarts/types/dist/shared';
+interface ExtendedCallbackDataParams extends CallbackDataParams {
+    prefix?: string;
+    textColor?: string;
+}
+interface TooltipFormatterConfig {
+    yAxisName?: string;
+    yAxisUnit?: string;
+    focusedSeriesAccessor?: () => string | undefined;
+    getSeriesColor?: (seriesName: string, seriesIndex: number) => string;
+    maxSeriesToShow?: number;
+}
+export declare function toFixedLocaleString(value: number | undefined | null, fractionDigits?: number, locale?: string | undefined): string;
+export declare const createTooltipFormatter: (config: TooltipFormatterConfig) => (params: ExtendedCallbackDataParams | ExtendedCallbackDataParams[]) => string;
+export {};

package/dist/components/graphs/utils/tooltipFormatter.js

@@ -0,0 +1,70 @@
+import { textColor } from '../../../tokens';
+export function toFixedLocaleString(value, fractionDigits = 0, locale = undefined) {
+    if (value === undefined || value === null) {
+        return '';
+    }
+    const formatted = value.toLocaleString(locale, {
+        minimumFractionDigits: fractionDigits,
+        maximumFractionDigits: fractionDigits,
+    });
+    const decimalPart = formatted.split('.')[1];
+    // preserve meaningful zeros like 5.04
+    if (decimalPart && decimalPart.split('').every((digit) => digit === '0')) {
+        return value.toLocaleString(locale, {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+        });
+    }
+    return formatted;
+}
+export const createTooltipFormatter = (config) => {
+    const { maxSeriesToShow = 10 } = config;
+    return (params) => {
+        if (typeof params !== 'object' || params === null) {
+            return '';
+        }
+        let paramArray = Array.isArray(params) ? params : [params];
+        if (paramArray.length === 0)
+            return '';
+        const currentFocusedSeries = config.focusedSeriesAccessor?.();
+        if (currentFocusedSeries !== undefined) {
+            paramArray = paramArray.filter((p) => currentFocusedSeries.includes(p.seriesName ?? ''));
+            if (paramArray.length === 0)
+                return '';
+        }
+        const firstParam = paramArray[0];
+        const categoryName = firstParam.name ?? ''; // X-axis value (category)
+        const unit = config.yAxisUnit ? ` (${config.yAxisUnit})` : '';
+        let tooltipContent = `<div class="font-medium mb-1 text-primary">${categoryName}</div>`;
+        const originalSeriesCount = paramArray.length;
+        let seriesToShow = paramArray;
+        if (originalSeriesCount > maxSeriesToShow) {
+            seriesToShow = paramArray.slice(0, maxSeriesToShow);
+        }
+        seriesToShow.forEach((p, index) => {
+            if (p.value == null || p.value === undefined)
+                return; // Skip null/undefined values
+            const seriesName = p.seriesName ?? config.yAxisName ?? ''; // Use series name or configured yAxisName
+            const value = p.value; // Assume number after null check
+            let color = p.color;
+            const prefix = p.prefix ?? '';
+            const textColorValue = p.textColor;
+            // Resolve color for multiline if needed and getter provided
+            if (!color && config.getSeriesColor && p.seriesName) {
+                color = config.getSeriesColor(p.seriesName, p.seriesIndex ?? index);
+            }
+            // Fallback color if still unresolved (should ideally not happen if configured correctly)
+            color = color || textColor['icon-blue'];
+            const marker = `<span class="size-2 rounded-sm" style="background-color:${color}"></span>`;
+            const formattedValue = toFixedLocaleString(value, 2);
+            const textColorClass = textColorValue ? `color: ${textColorValue}` : 'text-primary';
+            const valueString = `<span class="${textColorClass}">${prefix}${formattedValue}${unit}</span>`;
+            tooltipContent += `<div class="flex items-center justify-between gap-4"><span class="flex items-center gap-2">${marker}${seriesName}</span><span>${valueString}</span></div>`;
+        });
+        if (originalSeriesCount > maxSeriesToShow) {
+            const remainingCount = originalSeriesCount - maxSeriesToShow;
+            tooltipContent += `<div style="margin-top: 5px; font-style: italic;">... and ${remainingCount} more series</div>`;
+        }
+        return tooltipContent;
+    };
+};

package/dist/components/icon-button/IconButton.stories.svelte

@@ -0,0 +1,82 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import IconButton from '../icon-button/IconButton.svelte';
+  import { Icon } from '../icons';
+
+  const { Story } = defineMeta({
+    component: IconButton,
+    title: 'Design System/IconButton',
+    tags: ['autodocs'],
+  });
+</script>
+
+<Story name="Base" asChild>
+  <div class="flex flex-col gap-2">
+    <IconButton variant="primary">
+      <Icon iconName="Plus" />
+    </IconButton>
+    <IconButton variant="secondary">
+      <Icon iconName="Plus" />
+    </IconButton>
+    <IconButton variant="danger">
+      <Icon iconName="Plus" />
+    </IconButton>
+    <IconButton variant="transparent">
+      <Icon iconName="Plus" />
+    </IconButton>
+  </div>
+</Story>
+
+<Story name="Sizes" asChild>
+  <div class="flex flex-col gap-2">
+    <IconButton variant="secondary" size="xs">
+      <Icon iconName="Plus" />
+    </IconButton>
+    <IconButton variant="secondary" size="sm">
+      <Icon iconName="Plus" />
+    </IconButton>
+    <IconButton variant="secondary" size="md">
+      <Icon iconName="Plus" />
+    </IconButton>
+  </div>
+</Story>
+<Story name="Not rounded base" asChild>
+  <div class="flex flex-col gap-2">
+    <IconButton variant="primary" rounded={false}>
+      <Icon iconName="Plus" />
+    </IconButton>
+    <IconButton variant="secondary" rounded={false}>
+      <Icon iconName="Plus" />
+    </IconButton>
+    <IconButton variant="danger" rounded={false}>
+      <Icon iconName="Plus" />
+    </IconButton>
+    <IconButton variant="transparent" rounded={false}>
+      <Icon iconName="Plus" />
+    </IconButton>
+  </div>
+</Story>
+
+<Story name="Not rounded sizes" asChild>
+  <div class="flex flex-col gap-2">
+    <IconButton variant="secondary" size="xs" rounded={false}>
+      <Icon iconName="Plus" />
+    </IconButton>
+    <IconButton variant="secondary" size="sm" rounded={false}>
+      <Icon iconName="Plus" />
+    </IconButton>
+    <IconButton variant="secondary" size="md" rounded={false}>
+      <Icon iconName="Plus" />
+    </IconButton>
+  </div>
+</Story>
+<Story name="Disabled" asChild>
+  <IconButton disabled>
+    <Icon iconName="Plus" />
+  </IconButton>
+</Story>
+<Story name="Loading" asChild>
+  <IconButton loading>
+    <Icon iconName="Plus" />
+  </IconButton>
+</Story>

package/dist/components/icon-button/IconButton.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import IconButton from '../icon-button/IconButton.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 IconButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type IconButton = InstanceType<typeof IconButton>;
+export default IconButton;