@tetrascience-npm/tetrascience-react-ui 0.4.0-beta.8.1 → 0.4.0-beta.9.1

package/dist/index.d.ts

@@ -1056,6 +1056,293 @@ type HistogramProps = {
 };
 declare const Histogram: React$1.FC<HistogramProps>;
 
+/**
+ * A single data point in the scatter plot
+ */
+interface ScatterPoint {
+    /** Unique identifier for the point */
+    id: string | number;
+    /** X-axis value */
+    x: number;
+    /** Y-axis value */
+    y: number;
+    /** Optional label for the point */
+    label?: string;
+    /** Additional metadata for tooltips and styling */
+    metadata?: Record<string, unknown>;
+}
+/**
+ * Scale type for axes
+ */
+type ScaleType = "linear" | "log";
+/**
+ * Marker shape for scatter points
+ */
+type MarkerShape = "circle" | "square" | "diamond" | "cross" | "x" | "triangle-up" | "triangle-down" | "star";
+/**
+ * Selection mode for interactive selection
+ */
+type SelectionMode = "replace" | "add" | "remove" | "toggle";
+/**
+ * Color mapping configuration
+ */
+interface ColorMapping {
+    /** Type of mapping: data-driven or static */
+    type: "static" | "continuous" | "categorical";
+    /** Static color value (for type: "static") */
+    value?: string;
+    /** Data field to map (for type: "continuous" | "categorical") */
+    field?: string;
+    /** Color scale for continuous mapping */
+    colorScale?: string | Array<[number, string]>;
+    /** Discrete colors for categorical mapping */
+    categoryColors?: Record<string, string>;
+    /** Min/max values for continuous mapping (auto-calculated if not provided) */
+    min?: number;
+    max?: number;
+}
+/**
+ * Shape mapping configuration
+ */
+interface ShapeMapping {
+    /** Type of mapping: data-driven or static */
+    type: "static" | "categorical";
+    /** Static shape value (for type: "static") */
+    value?: MarkerShape;
+    /** Data field to map (for type: "categorical") */
+    field?: string;
+    /** Shape mapping for categorical values */
+    categoryShapes?: Record<string, MarkerShape>;
+}
+/**
+ * Size mapping configuration
+ */
+interface SizeMapping {
+    /** Type of mapping: data-driven or static */
+    type: "static" | "continuous" | "categorical";
+    /** Static size value (for type: "static") */
+    value?: number;
+    /** Data field to map (for type: "continuous" | "categorical") */
+    field?: string;
+    /** Size range for continuous mapping */
+    sizeRange?: [number, number];
+    /** Discrete sizes for categorical mapping */
+    categorySizes?: Record<string, number>;
+    /** Min/max values for continuous mapping (auto-calculated if not provided) */
+    min?: number;
+    max?: number;
+}
+/**
+ * Axis configuration
+ */
+interface AxisConfig {
+    /** Axis label */
+    title?: string;
+    /** Scale type (linear or log) */
+    scale?: ScaleType;
+    /** Fixed axis range [min, max] */
+    range?: [number, number];
+    /** Auto-range with optional padding percentage (0-1) */
+    autoRange?: boolean;
+    /** Padding percentage for auto-range (default: 0.1 = 10%) */
+    autoRangePadding?: number;
+}
+/**
+ * Tooltip configuration
+ */
+interface TooltipConfig {
+    /** Enable/disable tooltips */
+    enabled?: boolean;
+    /** Custom tooltip content function */
+    content?: (point: ScatterPoint) => string;
+    /** Fields to display in default tooltip */
+    fields?: string[];
+}
+/**
+ * Selection state
+ */
+interface SelectionState {
+    /** Array of selected point IDs */
+    selectedIds: Set<string | number>;
+}
+/**
+ * Downsampling configuration for performance optimization
+ */
+interface DownsamplingConfig {
+    /** Enable downsampling */
+    enabled: boolean;
+    /** Target number of points to display */
+    maxPoints?: number;
+    /** Downsampling strategy */
+    strategy?: "lttb";
+}
+/**
+ * Props for InteractiveScatter component
+ */
+interface InteractiveScatterProps {
+    /**
+     * Array of data points to plot
+     */
+    data: ScatterPoint[];
+    /**
+     * Chart title
+     */
+    title?: string;
+    /**
+     * X-axis configuration
+     */
+    xAxis?: AxisConfig;
+    /**
+     * Y-axis configuration
+     */
+    yAxis?: AxisConfig;
+    /**
+     * Color mapping configuration
+     */
+    colorMapping?: ColorMapping;
+    /**
+     * Shape mapping configuration
+     */
+    shapeMapping?: ShapeMapping;
+    /**
+     * Size mapping configuration
+     */
+    sizeMapping?: SizeMapping;
+    /**
+     * Tooltip configuration
+     */
+    tooltip?: TooltipConfig;
+    /**
+     * Enable click selection
+     * @default true
+     */
+    enableClickSelection?: boolean;
+    /**
+     * Enable box selection (drag to select rectangular region)
+     * @default true
+     */
+    enableBoxSelection?: boolean;
+    /**
+     * Enable lasso selection (freeform selection)
+     * @default true
+     */
+    enableLassoSelection?: boolean;
+    /**
+     * Controlled selection state.
+     * If provided, component operates in controlled mode.
+     */
+    selectedIds?: Set<string | number>;
+    /**
+     * Callback when selection changes
+     */
+    onSelectionChange?: (selectedIds: Set<string | number>, mode: SelectionMode) => void;
+    /**
+     * Callback when a point is clicked
+     */
+    onPointClick?: (point: ScatterPoint, event: MouseEvent) => void;
+    /**
+     * Downsampling configuration for large datasets
+     */
+    downsampling?: DownsamplingConfig;
+    /**
+     * Chart width in pixels
+     * @default 800
+     */
+    width?: number;
+    /**
+     * Chart height in pixels
+     * @default 600
+     */
+    height?: number;
+    /**
+     * Show the continuous color-scale bar when using a continuous `colorMapping`.
+     * Has no effect for categorical or static mappings.
+     * @default true
+     */
+    showColorBar?: boolean;
+    /**
+     * Custom CSS class name
+     */
+    className?: string;
+}
+/**
+ * Data format for selection propagation between components
+ */
+interface SelectionEvent {
+    /** Array of selected point IDs */
+    selectedIds: Set<string | number>;
+    /** Selection mode used */
+    mode: SelectionMode;
+    /** Source component identifier (optional) */
+    source?: string;
+}
+
+/**
+ * InteractiveScatter component for visualizing scatter plot data with advanced interactions.
+ *
+ * **Features:**
+ * - Data-driven and static styling (color, shape, size)
+ * - Interactive selection (click, box, lasso)
+ * - Keyboard modifiers for click-selection modes (Shift/Ctrl)
+ * - Customizable tooltips with rich content support
+ * - Axis customization (ranges, log/linear scales)
+ * - Performance optimizations for large datasets
+ * - Selection propagation via callbacks
+ *
+ * **Selection Modes (click selection only):**
+ * - Default click: Replace selection
+ * - Shift + click: Add to selection
+ * - Ctrl/Cmd + click: Remove from selection
+ * - Shift + Ctrl + click: Toggle selection
+ *
+ * Box/lasso selection always replaces the current selection because
+ * Plotly does not expose the original keyboard event for drag operations.
+ */
+declare const InteractiveScatter: React$1.FC<InteractiveScatterProps>;
+
+/**
+ * Default color scale for continuous color mapping
+ */
+declare const DEFAULT_COLOR_SCALE: Array<[number, string]>;
+/**
+ * Default category colors (cycle through these)
+ */
+declare const DEFAULT_CATEGORY_COLORS: string[];
+/**
+ * Default sizes
+ */
+declare const DEFAULT_MARKER_SIZE = 8;
+declare const DEFAULT_SIZE_RANGE: [number, number];
+/**
+ * Default downsampling configuration
+ */
+declare const DEFAULT_MAX_POINTS = 5000;
+/**
+ * Constants for plot layout
+ */
+declare const PLOT_CONSTANTS: {
+    MARGIN_LEFT: number;
+    MARGIN_RIGHT: number;
+    MARGIN_TOP: number;
+    MARGIN_BOTTOM: number;
+    TITLE_FONT_SIZE: number;
+    AXIS_TITLE_FONT_SIZE: number;
+    AXIS_TICK_FONT_SIZE: number;
+    LEGEND_FONT_SIZE: number;
+    FONT_FAMILY: string;
+    GRID_WIDTH: number;
+    AXIS_LINE_WIDTH: number;
+    AUTO_RANGE_PADDING: number;
+};
+/**
+ * Selection mode keyboard modifiers
+ */
+declare const SELECTION_MODIFIERS: {
+    readonly ADD: "shiftKey";
+    readonly REMOVE: "ctrlKey";
+    readonly TOGGLE: "both";
+};
+
 type MarkerSymbol = "circle" | "circle-open" | "circle-dot" | "circle-open-dot" | "square" | "square-open" | "square-dot" | "square-open-dot" | "diamond" | "diamond-open" | "diamond-dot" | "diamond-open-dot" | "cross" | "cross-open" | "cross-dot" | "cross-open-dot" | "x" | "x-open" | "x-dot" | "x-open-dot" | "triangle-up" | "triangle-up-open" | "triangle-up-dot" | "triangle-up-open-dot" | "triangle-down" | "triangle-down-open" | "triangle-down-dot" | "triangle-down-open-dot" | "triangle-left" | "triangle-left-open" | "triangle-left-dot" | "triangle-left-open-dot" | "triangle-right" | "triangle-right-open" | "triangle-right-dot" | "triangle-right-open-dot" | "triangle-ne" | "triangle-ne-open" | "triangle-ne-dot" | "triangle-ne-open-dot" | "triangle-se" | "triangle-se-open" | "triangle-se-dot" | "triangle-se-open-dot" | "triangle-sw" | "triangle-sw-open" | "triangle-sw-dot" | "triangle-sw-open-dot" | "triangle-nw" | "triangle-nw-open" | "triangle-nw-dot" | "triangle-nw-open-dot" | "pentagon" | "pentagon-open" | "pentagon-dot" | "pentagon-open-dot" | "hexagon" | "hexagon-open" | "hexagon-dot" | "hexagon-open-dot" | "hexagon2" | "hexagon2-open" | "hexagon2-dot" | "hexagon2-open-dot" | "octagon" | "octagon-open" | "octagon-dot" | "octagon-open-dot" | "star" | "star-open" | "star-dot" | "star-open-dot" | "hexagram" | "hexagram-open" | "hexagram-dot" | "hexagram-open-dot" | "star-triangle-up" | "star-triangle-up-open" | "star-triangle-up-dot" | "star-triangle-up-open-dot" | "star-triangle-down" | "star-triangle-down-open" | "star-triangle-down-dot" | "star-triangle-down-open-dot" | "star-square" | "star-square-open" | "star-square-dot" | "star-square-open-dot" | "star-diamond" | "star-diamond-open" | "star-diamond-dot" | "star-diamond-open-dot" | "diamond-tall" | "diamond-tall-open" | "diamond-tall-dot" | "diamond-tall-open-dot" | "diamond-wide" | "diamond-wide-open" | "diamond-wide-dot" | "diamond-wide-open-dot" | "hourglass" | "hourglass-open" | "bowtie" | "bowtie-open" | "circle-cross" | "circle-cross-open" | "circle-x" | "circle-x-open" | "square-cross" | "square-cross-open" | "square-x" | "square-x-open" | "diamond-cross" | "diamond-cross-open" | "diamond-x" | "diamond-x-open" | "cross-thin" | "cross-thin-open" | "x-thin" | "x-thin-open" | "asterisk" | "asterisk-open" | "hash" | "hash-open" | "hash-dot" | "hash-open-dot" | "y-up" | "y-up-open" | "y-down" | "y-down-open" | "y-left" | "y-left-open" | "y-right" | "y-right-open" | "line-ew" | "line-ew-open" | "line-ns" | "line-ns-open" | "line-ne" | "line-ne-open" | "line-nw" | "line-nw-open" | "arrow" | "arrow-open" | "arrow-wide" | "arrow-wide-open";
 interface LineDataSeries {
     x: number[];
@@ -1736,5 +2023,5 @@ interface ThemeProviderProps {
  */
 declare const ThemeProvider: React$1.FC<ThemeProviderProps>;
 
-export { AppHeader, AppLayout, AreaGraph, AssistantModal, Badge, BarGraph, Boxplot, Button, ButtonControl, ButtonControlGroup, CHART_COLORS, COLORS, Card, CardSidebar, Checkbox, Chromatogram, ChromatogramChart, CodeEditor, CodeScriptEditorButton, DotPlot, Dropdown, ErrorAlert, FormField, Heatmap, Histogram, Icon, IconName, Input, Label, LaunchContent, LineGraph, Main, MarkdownDisplay, Menu, MenuItem, Modal, Navbar, PieChart, PlateMap, PopConfirm, ProtocolConfiguration, ProtocolYamlCard, PythonEditorModal, ScatterGraph, SelectField, Sidebar, SupportiveText, TDPLink, Tab, TabGroup, Table, TableCell, TableHeaderCell, TdpNavigationContext, TdpNavigationProvider, TdpSearch, Textarea, ThemeProvider, Toast, ToastManager, Toggle, Tooltip, buildTdpUrl, defaultTheme, getTdpBaseUrlFromReferrer, navigateToTdpUrl, tdpPaths, useSearch, useTdpNavigation, useTdpNavigationContext };
-export type { AppHeaderProps, AppLayoutProps, AreaDataSeries, AreaGraphProps, AreaGraphVariant, AssistantModalProps, BadgeProps, BarDataSeries, BarGraphProps, BarGraphVariant, BaselineCorrectionMethod, BoundaryMarkerStyle, BoxDataSeries, BoxplotProps, ButtonControlGroupProps, ButtonControlProps, ButtonProps, CardProps, CardSidebarProps, CheckboxProps, ChromatogramChartProps, ChromatogramProps, ChromatogramSeries, CodeEditorProps, CodeScriptEditorButtonProps, ColorScale, ColorToken, DotPlotDataSeries, DotPlotProps, DotPlotVariant, DropdownOption, DropdownProps, ErrorAlertProps, FormFieldProps, HeatmapProps, HistogramDataSeries, HistogramProps, IconProps, IconsProps, InputProps, LabelProps, LaunchContentProps, LineDataSeries, LineGraphProps, LineGraphVariant, MainProps, MarkdownDisplayProps, MarkerSymbol, MenuItemProps, MenuProps, ModalProps, NavbarProps, PeakAnnotation, PeakData, PeakDetectionOptions, PieChartProps, PieDataSeries, PieTextInfo, PlateFormat, PlateMapProps, PopConfirmProps, ProtocolConfigurationProps, ProtocolYamlCardProps, PythonEditorModalProps, ScatterDataPoint, ScatterDataSeries, ScatterGraphProps, SearchResult, SelectFieldProps, SidebarProps, SupportiveTextProps, TDPLinkProps, TabGroupProps, TabProps, TabSize, TableCellProps, TableColumn, TableHeaderCellProps, TableProps, TdpFiltersRenderProps, TdpNavigationContextValue, TdpNavigationOptions, TdpNavigationProviderProps, TdpResultsRenderProps, TdpSearchBarRenderProps, TdpSearchColumn, TdpSearchConfig, TdpSearchFilter, TdpSearchProps, TdpSearchSort, TextareaProps, Theme, ThemeColors, ThemeProviderProps, ThemeRadius, ThemeSpacing, ToastContainerProps, ToastManagerProps, ToastProps, ToastType, ToggleProps, TooltipProps, UseSearchConfig, UseSearchResult, UseTdpNavigationOptions, UseTdpNavigationReturn, WellData };
+export { AppHeader, AppLayout, AreaGraph, AssistantModal, Badge, BarGraph, Boxplot, Button, ButtonControl, ButtonControlGroup, CHART_COLORS, COLORS, Card, CardSidebar, Checkbox, Chromatogram, ChromatogramChart, CodeEditor, CodeScriptEditorButton, DEFAULT_CATEGORY_COLORS, DEFAULT_COLOR_SCALE, DEFAULT_MARKER_SIZE, DEFAULT_MAX_POINTS, DEFAULT_SIZE_RANGE, DotPlot, Dropdown, ErrorAlert, FormField, Heatmap, Histogram, Icon, IconName, Input, InteractiveScatter, Label, LaunchContent, LineGraph, Main, MarkdownDisplay, Menu, MenuItem, Modal, Navbar, PLOT_CONSTANTS, PieChart, PlateMap, PopConfirm, ProtocolConfiguration, ProtocolYamlCard, PythonEditorModal, SELECTION_MODIFIERS, ScatterGraph, SelectField, Sidebar, SupportiveText, TDPLink, Tab, TabGroup, Table, TableCell, TableHeaderCell, TdpNavigationContext, TdpNavigationProvider, TdpSearch, Textarea, ThemeProvider, Toast, ToastManager, Toggle, Tooltip, buildTdpUrl, defaultTheme, getTdpBaseUrlFromReferrer, navigateToTdpUrl, tdpPaths, useSearch, useTdpNavigation, useTdpNavigationContext };
+export type { AppHeaderProps, AppLayoutProps, AreaDataSeries, AreaGraphProps, AreaGraphVariant, AssistantModalProps, AxisConfig, BadgeProps, BarDataSeries, BarGraphProps, BarGraphVariant, BaselineCorrectionMethod, BoundaryMarkerStyle, BoxDataSeries, BoxplotProps, ButtonControlGroupProps, ButtonControlProps, ButtonProps, CardProps, CardSidebarProps, CheckboxProps, ChromatogramChartProps, ChromatogramProps, ChromatogramSeries, CodeEditorProps, CodeScriptEditorButtonProps, ColorMapping, ColorScale, ColorToken, DotPlotDataSeries, DotPlotProps, DotPlotVariant, DownsamplingConfig, DropdownOption, DropdownProps, ErrorAlertProps, FormFieldProps, HeatmapProps, HistogramDataSeries, HistogramProps, IconProps, IconsProps, InputProps, InteractiveScatterProps, LabelProps, LaunchContentProps, LineDataSeries, LineGraphProps, LineGraphVariant, MainProps, MarkdownDisplayProps, MarkerShape, MarkerSymbol, MenuItemProps, MenuProps, ModalProps, NavbarProps, PeakAnnotation, PeakData, PeakDetectionOptions, PieChartProps, PieDataSeries, PieTextInfo, PlateFormat, PlateMapProps, PopConfirmProps, ProtocolConfigurationProps, ProtocolYamlCardProps, PythonEditorModalProps, ScaleType, ScatterDataPoint, ScatterDataSeries, ScatterGraphProps, ScatterPoint, SearchResult, SelectFieldProps, SelectionEvent, SelectionMode, SelectionState, ShapeMapping, SidebarProps, SizeMapping, SupportiveTextProps, TDPLinkProps, TabGroupProps, TabProps, TabSize, TableCellProps, TableColumn, TableHeaderCellProps, TableProps, TdpFiltersRenderProps, TdpNavigationContextValue, TdpNavigationOptions, TdpNavigationProviderProps, TdpResultsRenderProps, TdpSearchBarRenderProps, TdpSearchColumn, TdpSearchConfig, TdpSearchFilter, TdpSearchProps, TdpSearchSort, TextareaProps, Theme, ThemeColors, ThemeProviderProps, ThemeRadius, ThemeSpacing, ToastContainerProps, ToastManagerProps, ToastProps, ToastType, ToggleProps, TooltipConfig, TooltipProps, UseSearchConfig, UseSearchResult, UseTdpNavigationOptions, UseTdpNavigationReturn, WellData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tetrascience-npm/tetrascience-react-ui",
-  "version": "0.4.0-beta.8.1",
+  "version": "0.4.0-beta.9.1",
   "description": "TetraScience React UI",
   "type": "module",
   "author": "TetraScience",