@reshape-biotech/design-system 2.6.4 → 2.6.5

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { backgroundColor } from '../../../tokens';
+  import { backgroundColor, textColor } from '../../../tokens';
   import Icon from '../../icons/Icon.svelte';
   import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
   import type {
@@ -11,7 +11,13 @@
   import Tooltip from '../../tooltip/Tooltip.svelte';
   import type { Snippet } from 'svelte';
 
-  export type DataPoint = { value: [number, number]; metadata: any; error_value?: number };
+  export type DataPoint = {
+    value: [number, number];
+    metadata: any;
+    error_value?: number;
+    disagreement?: boolean | null;
+    highlighted?: boolean | null;
+  };
 
   export type ScatterPlotEchartsEvent = echarts.ECElementEvent & {
     data: DataPoint;
@@ -29,6 +35,7 @@
     showConfidenceBand?: boolean;
     showLegend?: boolean;
     legendItems?: LegendItem[];
+    highlightIndex?: number | null;
     children?: Snippet;
   } & Omit<GenericChartProps, 'timeIndex'>;
 
@@ -46,6 +53,7 @@
       { label: 'Count', color: backgroundColor['blue-inverse'], type: 'point' },
       { label: 'Perfect agreement', color: backgroundColor['lilac-inverse'], type: 'line' },
     ],
+    highlightIndex = null,
     children,
     ...props
   }: ScatterPlotProps = $props();
@@ -85,6 +93,7 @@
     const xValue = api.value(0) as number;
     const yValue = api.value(1) as number;
     const error = 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]);
@@ -98,8 +107,7 @@
     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,
+      stroke: disagreement ? textColor['icon-tertiary'] : backgroundColor['blue-inverse'],
     };
 
     return {
@@ -148,7 +156,7 @@
     const series: SeriesOption[] = [];
     const errorBarData = data
       .filter((d) => d.error_value != 0)
-      .map((d) => [...d.value, d.error_value]);
+      .map((d) => [...d.value, d.error_value, d.disagreement ? 1 : 0]);
 
     if (props.lineData && props.lineData.length > 0) {
       const extendedLineData = [
@@ -170,7 +178,6 @@
           disabled: true,
         },
         silent: true,
-        zlevel: 0,
       });
 
       if (showConfidenceBand && props.lineData && props.lineData.length > 0) {
@@ -205,7 +212,6 @@
             disabled: true,
           },
           silent: true,
-          zlevel: 0,
         });
       }
     }
@@ -215,17 +221,43 @@
       data,
       type: 'scatter',
       itemStyle: {
-        color: backgroundColor['blue-inverse'],
-        opacity: 0.8,
+        color: (params: any) =>
+          params?.data?.disagreement ? textColor['icon-tertiary'] : backgroundColor['blue-inverse'],
+        opacity: 1,
       },
       emphasis: {
         itemStyle: {
-          color: backgroundColor['blue-inverse'],
+          color: (params: any) => {
+            const point = params?.data as DataPoint;
+            return point?.disagreement
+              ? textColor['icon-tertiary']
+              : backgroundColor['blue-inverse'];
+          },
           opacity: 1,
         },
       },
       animation: false,
-      zlevel: 1,
+    });
+
+    const p =
+      highlightIndex !== null && highlightIndex >= 0 && highlightIndex < data.length
+        ? data[highlightIndex]
+        : null;
+    series.push({
+      id: 'highlight-overlay',
+      type: 'scatter',
+      data: [p],
+      symbolSize: 16,
+      itemStyle: {
+        color: (params: any) => {
+          const point = params?.data as DataPoint;
+          return point?.disagreement
+            ? backgroundColor['neutral-hover']
+            : backgroundColor['blue-hover'];
+        },
+      },
+      z: -1,
+      silent: true,
     });
 
     if (errorBarData.length > 0) {
@@ -233,16 +265,11 @@
         type: 'custom',
         name: 'error',
         silent: true,
-        itemStyle: {
-          borderWidth: 1.5,
-          color: backgroundColor['blue-inverse'],
-        },
+        itemStyle: { borderWidth: 1.5 },
         renderItem: renderErrorBarItem,
         data: errorBarData,
-        zlevel: 0,
       });
     }
-
     return {
       xAxis: {
         type: 'value',

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

@@ -4,6 +4,8 @@ export type DataPoint = {
     value: [number, number];
     metadata: any;
     error_value?: number;
+    disagreement?: boolean | null;
+    highlighted?: boolean | null;
 };
 export type ScatterPlotEchartsEvent = echarts.ECElementEvent & {
     data: DataPoint;
@@ -19,6 +21,7 @@ type ScatterPlotProps = {
     showConfidenceBand?: boolean;
     showLegend?: boolean;
     legendItems?: LegendItem[];
+    highlightIndex?: number | null;
     children?: Snippet;
 } & Omit<GenericChartProps, 'timeIndex'>;
 declare const Scatterplot: import("svelte").Component<ScatterPlotProps, {}, "">;

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

@@ -8,6 +8,7 @@
     | 'secondary'
     | 'transparent'
     | 'outline'
+    | 'accent'
     | 'danger'
     | 'secondary-inverse'
     | 'transparent-inverse';
@@ -164,6 +165,14 @@
 }
   .color-secondary:hover {
     background-color: #12192A1A
+}
+  .color-accent {
+    background-color: #5750ee1A;
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+  .color-accent:hover {
+    background-color: #5750ee40
 }
   .color-transparent {
     background-color: transparent;

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
-type Variant = 'primary' | 'secondary' | 'transparent' | 'outline' | 'danger' | 'secondary-inverse' | 'transparent-inverse';
+type Variant = 'primary' | 'secondary' | 'transparent' | 'outline' | 'accent' | 'danger' | 'secondary-inverse' | 'transparent-inverse';
 interface Props extends HTMLButtonAttributes {
     variant?: Variant;
     type?: 'button' | 'submit' | 'reset' | null | undefined;

package/dist/components/icons/index.d.ts

@@ -4,7 +4,7 @@ import type { textColor, backgroundColor } from './../../tokens';
 export * from './custom';
 import type { CustomIconName } from './custom';
 export type PhosphorIconProps = Component<IconComponentProps, object, ''>;
-export type IconName = 'Aperture' | 'Archive' | 'ArrowFatLineRight' | 'ArrowCounterClockwise' | 'ArrowRight' | 'ArrowUpRight' | 'ArrowUpLeft' | 'ArrowUUpLeft' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'BugBeetle' | 'Calendar' | 'CalendarBlank' | 'Camera' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'CursorClick' | 'CraneTower' | 'Database' | 'Dna' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'EyeSlash' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'IntersectThree' | 'Lock' | 'LineSegments' | 'List' | 'Link' | 'ListMagnifyingGlass' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'MicrosoftExcelLogo' | 'Moon' | 'Minus' | 'Palette' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Ruler' | 'Question' | 'SealCheck' | 'RadioButton' | 'SealQuestion' | 'SealWarning' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SignIn' | 'SignOut' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'Target' | 'TestTube' | 'Trash' | 'TrashSimple' | 'TreeStructure' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X' | 'XCircle';
+export type IconName = 'Aperture' | 'Archive' | 'ArrowFatLineRight' | 'ArrowCounterClockwise' | 'ArrowRight' | 'ArrowUpRight' | 'ArrowUpLeft' | 'ArrowUUpLeft' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'BugBeetle' | 'Calendar' | 'CalendarBlank' | 'Camera' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'CursorClick' | 'CraneTower' | 'Database' | 'Dna' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'EyeSlash' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'IntersectThree' | 'Lock' | 'LineSegments' | 'List' | 'Link' | 'ListMagnifyingGlass' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'MicrosoftExcelLogo' | 'Moon' | 'Minus' | 'Palette' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Ruler' | 'Question' | 'SealCheck' | 'RadioButton' | 'SealQuestion' | 'SealWarning' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SignIn' | 'SignOut' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'Target' | 'TestTube' | 'Trash' | 'TrashSimple' | 'TreeStructure' | 'UserCircle' | 'UserPlus' | 'Users' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X' | 'XCircle';
 export type AllIconName = IconName | CustomIconName;
 export declare const iconMap: Record<IconName, PhosphorIconProps>;
 export declare function renderIcon(iconName: keyof typeof iconMap): PhosphorIconProps;

package/dist/components/icons/index.js

@@ -115,6 +115,7 @@ import TrashSimple from 'phosphor-svelte/lib/TrashSimple';
 import TreeStructure from 'phosphor-svelte/lib/TreeStructure';
 import UserCircle from 'phosphor-svelte/lib/UserCircle';
 import UserPlus from 'phosphor-svelte/lib/UserPlus';
+import Users from 'phosphor-svelte/lib/Users';
 import Video from 'phosphor-svelte/lib/Video';
 import Warning from 'phosphor-svelte/lib/Warning';
 import WarningCircle from 'phosphor-svelte/lib/WarningCircle';
@@ -240,6 +241,7 @@ export const iconMap = {
     TreeStructure,
     UserCircle,
     UserPlus,
+    Users,
     Video,
     Warning,
     WarningCircle,

package/package.json

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