matterviz 0.1.12 → 0.1.13

package/dist/plot/ScatterPlot.svelte

@@ -1,85 +1,82 @@
-<script lang="ts">import { DraggablePane, Line, symbol_names } from '..';
-import { luminance } from '../colors';
+<script lang="ts">import { luminance } from '../colors';
+import { format_value, symbol_names } from '../labels';
 import * as math from '../math';
-import { ColorBar, find_best_plot_area, PlotLegend, ScatterPlotControls, ScatterPoint, } from './';
+import { ColorBar, DEFAULT_GRID_STYLE, DEFAULT_MARKERS, find_best_plot_area, get_tick_label, Line, PlotLegend, ScatterPlotControls, ScatterPoint, } from './';
 import { DEFAULTS } from '../settings';
 import { extent } from 'd3-array';
 import { forceCollide, forceLink, forceSimulation } from 'd3-force';
 import { scaleLinear, scaleLog, scaleSequential, scaleSequentialLog, scaleTime, } from 'd3-scale';
 import * as d3_sc from 'd3-scale-chromatic';
 import { Tween } from 'svelte/motion';
-import { format_value } from './formatting';
+import { SvelteSet } from 'svelte/reactivity';
 import { get_relative_coords } from './interactions';
 import { calc_auto_padding } from './layout';
 import { generate_ticks, get_nice_data_range } from './scales';
-let { series = [], x_lim = [null, null], y_lim = [null, null], x_range, y_range, current_x_value = null, y2_lim = [null, null], y2_range, y2_label = ``, y2_label_shift = { y: 60 }, y2_tick_label_shift = { x: 8, y: 0 }, y2_unit = ``, y2_format = $bindable(``), y2_ticks = 5, y2_scale_type = `linear`, y2_grid = true, padding = {}, range_padding = 0.05, // Default padding factor
-x_label = ``, x_label_shift = { x: 0, y: -40 }, x_tick_label_shift = { x: 0, y: 20 }, y_label = ``, y_label_shift = { y: 12 }, y_tick_label_shift = { x: -8, y: 0 }, y_unit = ``, tooltip_point = $bindable(null), hovered = $bindable(false), markers = DEFAULTS.scatter.markers, x_format = $bindable(``), y_format = $bindable(``), tooltip, user_content, change = () => { }, x_ticks, y_ticks = 5, x_scale_type = `linear`, y_scale_type = `linear`, show_zero_lines = true, x_grid = true, y_grid = true, color_scale = {
+let { series = [], x_axis = $bindable({}), y_axis = $bindable({}), y2_axis = $bindable({}), display = $bindable(DEFAULTS.scatter.display), styles = $bindable({}), controls = $bindable({}), padding = {}, range_padding = 0.05, current_x_value = null, tooltip_point = $bindable(null), hovered = $bindable(false), tooltip, user_content, change = () => { }, color_scale = {
     type: `linear`,
     scheme: `interpolateViridis`,
     value_range: undefined,
-}, color_bar = {}, size_scale = { type: `linear`, radius_range: [2, 10], value_range: undefined }, label_placement_config = {}, hover_config = {}, legend = {}, point_tween, line_tween, point_events, on_point_click, on_point_hover, show_controls = true, controls_open = $bindable(false), plot_controls, 
-// Style control props
-point_size = $bindable(4), point_color = $bindable(`cornflowerblue`), point_opacity = $bindable(1), point_stroke_width = $bindable(1), point_stroke_color = $bindable(`#000000`), point_stroke_opacity = $bindable(1), line_width = $bindable(2), line_color = $bindable(`cornflowerblue`), line_opacity = $bindable(1), line_dash = $bindable(DEFAULTS.scatter.line_dash), show_points = $bindable(true), show_lines = $bindable(true), selected_series_idx = $bindable(0), color_axis_labels = true, controls_toggle_props, children, ...rest } = $props();
+}, color_bar = {}, size_scale = { type: `linear`, radius_range: [2, 10], value_range: undefined }, label_placement_config = {}, hover_config = {}, legend = {}, point_tween, line_tween, point_events, on_point_click, on_point_hover, selected_series_idx = $bindable(0), children, ...rest } = $props();
+// Initialize style overrides with defaults (runs once to avoid infinite loop)
+styles.point = { ...DEFAULTS.scatter.point, ...styles.point };
+styles.line = { ...DEFAULTS.scatter.line, ...styles.line };
+// Initialize default values
+x_axis = {
+    format: ``,
+    scale_type: `linear`,
+    label_shift: { x: 0, y: -40 },
+    tick_label_shift: { x: 0, y: 20 },
+    range: [null, null],
+    ...x_axis,
+};
+y_axis = {
+    format: ``,
+    scale_type: `linear`,
+    label_shift: { x: 0, y: 0 },
+    tick_label_shift: { x: -8, y: 0 },
+    range: [null, null],
+    ...y_axis,
+};
+y2_axis = {
+    format: ``,
+    scale_type: `linear`,
+    ticks: 5,
+    label_shift: { x: 0, y: 0 },
+    tick_label_shift: { x: 8, y: 0 },
+    range: [null, null],
+    ...y2_axis,
+};
+display = { ...DEFAULTS.scatter.display, ...display };
+styles = {
+    show_points: DEFAULTS.scatter.show_points,
+    show_lines: DEFAULTS.scatter.show_lines,
+    ...styles,
+};
+controls = { show: true, open: false, ...controls };
 let [width, height] = $state([0, 0]);
 let svg_element = $state(null); // Bind the SVG element
 let svg_bounding_box = $state(null); // Store SVG bounds during drag
 // Unique component ID to avoid clipPath conflicts between multiple instances
 let component_id = $state(`scatter-${crypto.randomUUID()}`);
 let clip_path_id = $derived(`plot-area-clip-${component_id}`);
-// Process series to ensure single visible series are always on y1 (left) axis.
-// This prevents the scenario where the left y-axis is empty while the right y-axis
-// has the only visible series, which would create a confusing plot layout.
-let processed_series = $derived.by(() => {
-    if (series.length === 0)
-        return [];
-    // Count visible series (filter out null/undefined series)
-    const visible_series = series.filter((s) => s && (s.visible ?? true));
-    // If only one series is visible, ensure it's on y1 axis
-    if (visible_series.length === 1) {
-        return series.map((s) => {
-            if (s && (s.visible ?? true) && s.y_axis === `y2`) {
-                // Reassign single visible series from y2 to y1
-                return { ...s, y_axis: `y1` };
-            }
-            return s;
-        });
-    }
-    // For multiple visible series, keep original assignments
-    return series;
-});
-// Stable ID assignment for series - computed once and cached
-let next_id = 0;
-const series_id_cache = new WeakMap();
-let series_with_ids = $derived.by(() => {
-    return processed_series.map((s) => {
-        if (!s || typeof s !== `object`)
-            return s;
-        if (`_id` in s && typeof s._id === `number`)
-            return s; // Already has stable ID
-        // Check cache first
-        if (series_id_cache.has(s)) {
-            return { ...s, _id: series_id_cache.get(s) };
-        }
-        // Assign and cache new stable ID
-        const new_id = next_id++;
-        series_id_cache.set(s, new_id);
-        return { ...s, _id: new_id };
-    });
-});
+// Assign stable IDs to series for keying
+let series_with_ids = $derived(series.map((s, idx) => {
+    if (!s || typeof s !== `object`)
+        return s;
+    // Use series.id if provided, otherwise fall back to index
+    // prevents re-mounts when series are reordered if stable IDs are provided
+    return { ...s, _id: s.id ?? idx };
+}));
 // State for rectangle zoom selection
 let drag_start_coords = $state(null);
 let drag_current_coords = $state(null);
-let initial_x_range = $state([0, 1]);
-let initial_y_range = $state([0, 1]);
-let initial_y2_range = $state([0, 1]);
-let current_x_range = $state([0, 1]);
-let current_y_range = $state([0, 1]);
-let current_y2_range = $state([0, 1]);
-let previous_series_visibility = $state(null); // State to store visibility before isolation
+// Zoom/pan state - single range state used for both initial and current
+let zoom_x_range = $state([0, 1]);
+let zoom_y_range = $state([0, 1]);
+let zoom_y2_range = $state([0, 1]);
+let previous_series_visibility = $state(null);
 // State to hold the calculated label positions after simulation
 let label_positions = $state({});
-// State for initial (non-responsive) legend placement
-let initial_legend_placement = $state(null);
 // State for legend dragging
 let legend_is_dragging = $state(false);
 let legend_drag_offset = $state({ x: 0, y: 0 });
@@ -110,16 +107,14 @@ const default_padding = { t: 5, b: 50, l: 50, r: 20 };
 let pad = $state({ ...default_padding, ...padding });
 // Update padding when format or ticks change, but prevent infinite loop
 $effect(() => {
-    const base_pad = { ...default_padding, ...padding };
     const new_pad = width && height && (y_tick_values.length || y2_tick_values.length)
         ? calc_auto_padding({
-            base_padding: base_pad,
-            y_ticks: y_tick_values,
-            y_format,
-            y2_ticks: y2_tick_values,
-            y2_format,
+            padding,
+            default_padding,
+            y_axis: { ...y_axis, tick_values: y_tick_values },
+            y2_axis: { ...y2_axis, tick_values: y2_tick_values },
         })
-        : base_pad;
+        : { ...default_padding, ...padding };
     // Only update if padding actually changed (prevents infinite loop)
     if (pad.t !== new_pad.t || pad.b !== new_pad.b || pad.l !== new_pad.l ||
         pad.r !== new_pad.r)
@@ -138,36 +133,36 @@ let plot_center_y = $derived(pad.t + (height - pad.b - pad.t) / 2);
 // Compute data color values for color scaling
 let all_color_values = $derived(series_with_ids.filter(Boolean).flatMap((srs) => srs.color_values?.filter(Boolean) || []));
 // Compute auto ranges based on data and limits
-let auto_x_range = $derived(get_nice_data_range(all_points, (point) => point.x, x_lim, x_scale_type, range_padding, x_format?.startsWith(`%`) || false));
-let auto_y_range = $derived(get_nice_data_range(y1_points, (point) => point.y, y_lim, y_scale_type, range_padding, false));
-let auto_y2_range = $derived(get_nice_data_range(y2_points, (point) => point.y, y2_lim, y2_scale_type, range_padding, false));
-// Store initial ranges and initialize current ranges
+let auto_x_range = $derived(get_nice_data_range(all_points, (point) => point.x, (x_axis.range ?? [null, null]), x_axis.scale_type, range_padding, x_axis.format?.startsWith(`%`) || false));
+let auto_y_range = $derived(get_nice_data_range(y1_points, (point) => point.y, (y_axis.range ?? [null, null]), y_axis.scale_type, range_padding, false));
+let auto_y2_range = $derived(get_nice_data_range(y2_points, (point) => point.y, (y2_axis.range ?? [null, null]), y2_axis.scale_type, range_padding, false));
+// Update zoom ranges when auto ranges or explicit ranges change
 $effect(() => {
-    const new_init_x = [
-        x_range?.[0] ?? auto_x_range[0],
-        x_range?.[1] ?? auto_x_range[1],
+    const new_x = [
+        x_axis.range?.[0] ?? auto_x_range[0],
+        x_axis.range?.[1] ?? auto_x_range[1],
     ];
-    const new_init_y = [
-        y_range?.[0] ?? auto_y_range[0],
-        y_range?.[1] ?? auto_y_range[1],
+    const new_y = [
+        y_axis.range?.[0] ?? auto_y_range[0],
+        y_axis.range?.[1] ?? auto_y_range[1],
     ];
-    const new_init_y2 = [
-        y2_range?.[0] ?? auto_y2_range[0],
-        y2_range?.[1] ?? auto_y2_range[1],
+    const new_y2 = [
+        y2_axis.range?.[0] ?? auto_y2_range[0],
+        y2_axis.range?.[1] ?? auto_y2_range[1],
     ];
-    // Only update if the initial range fundamentally changes
-    if (new_init_x[0] !== initial_x_range[0] || new_init_x[1] !== initial_x_range[1])
-        [initial_x_range, current_x_range] = [new_init_x, new_init_x];
-    if (new_init_y[0] !== initial_y_range[0] || new_init_y[1] !== initial_y_range[1])
-        [initial_y_range, current_y_range] = [new_init_y, new_init_y];
-    if (new_init_y2[0] !== initial_y2_range[0] || new_init_y2[1] !== initial_y2_range[1]) {
-        initial_y2_range = new_init_y2;
-        current_y2_range = new_init_y2;
+    if (new_x[0] !== zoom_x_range[0] || new_x[1] !== zoom_x_range[1]) {
+        zoom_x_range = new_x;
+    }
+    if (new_y[0] !== zoom_y_range[0] || new_y[1] !== zoom_y_range[1]) {
+        zoom_y_range = new_y;
+    }
+    if (new_y2[0] !== zoom_y2_range[0] || new_y2[1] !== zoom_y2_range[1]) {
+        zoom_y2_range = new_y2;
     }
 });
-let [x_min, x_max] = $derived(current_x_range); // Use current range for scales/axes
-let [y_min, y_max] = $derived(current_y_range); // Use current range for scales/axes
-let [y2_min, y2_max] = $derived(current_y2_range); // Use current range for scales/axes
+let [x_min, x_max] = $derived(zoom_x_range);
+let [y_min, y_max] = $derived(zoom_y_range);
+let [y2_min, y2_max] = $derived(zoom_y2_range);
 // Create auto color range
 let auto_color_range = $derived(
 // Ensure we only calculate extent on actual numbers, filtering out nulls/undefined
@@ -175,25 +170,25 @@ all_color_values.length > 0
     ? extent(all_color_values.filter((val) => typeof val === `number`))
     : [0, 1]);
 // Create scale functions
-let x_scale_fn = $derived(x_format?.startsWith(`%`)
+let x_scale_fn = $derived(x_axis.format?.startsWith(`%`)
     ? scaleTime()
         .domain([new Date(x_min), new Date(x_max)])
         .range([pad.l, width - pad.r])
-    : x_scale_type === `log`
+    : x_axis.scale_type === `log`
         ? scaleLog()
             .domain([x_min, x_max])
             .range([pad.l, width - pad.r])
         : scaleLinear()
             .domain([x_min, x_max])
             .range([pad.l, width - pad.r]));
-let y_scale_fn = $derived(y_scale_type === `log`
+let y_scale_fn = $derived(y_axis.scale_type === `log`
     ? scaleLog()
         .domain([y_min, y_max])
         .range([height - pad.b, pad.t])
     : scaleLinear()
         .domain([y_min, y_max])
         .range([height - pad.b, pad.t]));
-let y2_scale_fn = $derived(y2_scale_type === `log`
+let y2_scale_fn = $derived(y2_axis.scale_type === `log`
     ? scaleLog()
         .domain([y2_min, y2_max])
         .range([height - pad.b, pad.t])
@@ -231,13 +226,16 @@ let size_scale_fn = $derived.by(() => {
 });
 // Color scale function
 let color_scale_fn = $derived.by(() => {
-    const color_func_name = color_scale.scheme;
+    const color_func_name = (typeof color_scale === `string`
+        ? color_scale
+        : color_scale.scheme);
     const interpolator = typeof d3_sc[color_func_name] === `function`
         ? d3_sc[color_func_name]
         : d3_sc.interpolateViridis;
-    const [min_val, max_val] = color_scale.value_range ??
+    const [min_val, max_val] = (typeof color_scale === `string` ? undefined : color_scale.value_range) ??
         auto_color_range;
-    return color_scale.type === `log`
+    const scale_type = typeof color_scale === `string` ? undefined : color_scale.type;
+    return scale_type === `log`
         ? scaleSequentialLog(interpolator).domain([
             Math.max(min_val, math.LOG_EPS),
             Math.max(max_val, min_val * 1.1),
@@ -248,21 +246,10 @@ let color_scale_fn = $derived.by(() => {
 let filtered_series = $derived(series_with_ids
     .map((data_series, series_idx) => {
     if (!(data_series?.visible ?? true)) {
-        return {
-            ...data_series,
-            visible: false,
-            filtered_data: [],
-        };
+        return { ...data_series, visible: false, filtered_data: [] };
     }
-    if (!data_series) {
-        // Return empty data consistent with DataSeries structure
-        return {
-            x: [],
-            y: [],
-            visible: true, // Assume visible if undefined but we somehow process it
-            filtered_data: [],
-            _id: next_id++,
-        };
+    if (!data_series) { // Return empty data consistent with DataSeries structure
+        return { x: [], y: [], visible: true, filtered_data: [], _id: series_idx };
     }
     const { x: xs, y: ys, color_values, size_values, ...rest } = data_series;
     // Process points internally, adding properties beyond the base Point type
@@ -309,43 +296,6 @@ let filtered_series = $derived(series_with_ids
 })
     // Filter series end up completely empty after point filtering
     .filter((series_data) => series_data.filtered_data.length > 0));
-// Determine axis colors based on visible series
-let axis_colors = $derived.by(() => {
-    // Handle explicit color overrides
-    if (typeof color_axis_labels === `object`) {
-        return { y1: color_axis_labels.y1 ?? null, y2: color_axis_labels.y2 ?? null };
-    }
-    // Check if axis coloring is disabled
-    if (!color_axis_labels)
-        return { y1: null, y2: null };
-    const visible_series = filtered_series.filter((s) => s.visible !== false);
-    // Only apply axis colors if not using a color scale and both y axes are populated
-    const is_using_color_scale = all_color_values.length > 0;
-    const both_axes_populated = y1_points.length > 0 && y2_points.length > 0;
-    if (is_using_color_scale || !both_axes_populated)
-        return { y1: null, y2: null };
-    // Count series by axis and get their colors
-    const y1_series = visible_series.filter((s) => (s.y_axis ?? `y1`) === `y1`);
-    const y2_series = visible_series.filter((s) => s.y_axis === `y2`);
-    // Helper to get series color
-    const get_series_color = (series) => {
-        // Check line color first, then point color
-        if (series.line_style?.stroke)
-            return series.line_style.stroke;
-        const first_point_style = Array.isArray(series.point_style)
-            ? series.point_style[0]
-            : series.point_style;
-        if (first_point_style?.fill)
-            return first_point_style.fill;
-        if (first_point_style?.stroke)
-            return first_point_style.stroke;
-        return null; // No color found
-    };
-    return {
-        y1: y1_series.length === 1 ? get_series_color(y1_series[0]) : null,
-        y2: y2_series.length >= 1 ? get_series_color(y2_series[0]) : null,
-    };
-});
 // Collect all plot points for legend placement calculation
 let plot_points_for_placement = $derived.by(() => {
     if (!width || !height || !filtered_series)
@@ -355,7 +305,7 @@ let plot_points_for_placement = $derived.by(() => {
         if (!series_data?.filtered_data)
             continue;
         for (const point of series_data.filtered_data) {
-            const point_x_coord = x_format?.startsWith(`%`)
+            const point_x_coord = x_axis.format?.startsWith(`%`)
                 ? x_scale_fn(new Date(point.x))
                 : x_scale_fn(point.x);
             const point_y_coord = (series_data.y_axis === `y2` ? y2_scale_fn : y_scale_fn)(point.y);
@@ -368,23 +318,25 @@ let plot_points_for_placement = $derived.by(() => {
 });
 // Prepare data needed for the legend component
 let legend_data = $derived.by(() => {
-    return series_with_ids.map((data_series, series_idx) => {
+    const items = series_with_ids.map((data_series, series_idx) => {
         const is_visible = data_series?.visible ?? true;
-        // Prefer top-level label, fallback to metadata label, then default
-        const label = data_series?.label ??
+        // Prefer top-level label, fallback to metadata label
+        const explicit_label = data_series?.label ??
             (typeof data_series?.metadata === `object` &&
                 data_series.metadata !== null &&
                 `label` in data_series.metadata &&
                 typeof data_series.metadata.label === `string`
                 ? data_series.metadata.label
-                : null) ??
-            `Series ${series_idx + 1}`;
+                : null);
+        // Use explicit label or generate default
+        const label = explicit_label ?? `Series ${series_idx + 1}`;
+        const has_explicit_label = explicit_label != null;
         const display_style = {
             symbol_type: DEFAULTS.scatter.symbol_type,
             symbol_color: `black`, // Default marker color
             line_color: `black`, // Default line color
         };
-        const series_markers = (data_series?.markers ?? markers) ?? ``;
+        const series_markers = data_series?.markers ?? DEFAULT_MARKERS;
         // Check point_style (could be object or array)
         const first_point_style = Array.isArray(data_series?.point_style)
             ? data_series.point_style[0] // Handle potential undefined
@@ -394,10 +346,9 @@ let legend_data = $derived.by(() => {
                 // Assign shape only if it's one of the allowed types, else default to DEFAULTS.scatter.symbol_type
                 let final_shape = DEFAULTS.scatter.symbol_type;
                 if (Array.isArray(symbol_names) &&
-                    typeof first_point_style.shape === `string` &&
-                    symbol_names.includes(first_point_style.shape)) {
-                    final_shape = first_point_style.shape;
-                }
+                    typeof first_point_style.symbol_type === `string` &&
+                    symbol_names.includes(first_point_style.symbol_type))
+                    final_shape = first_point_style.symbol_type;
                 display_style.symbol_type = final_shape;
                 display_style.symbol_color = first_point_style.fill ??
                     display_style.symbol_color; // Use default if nullish
@@ -406,9 +357,8 @@ let legend_data = $derived.by(() => {
                     if (!display_style.symbol_color ||
                         display_style.symbol_color === `none` ||
                         display_style.symbol_color.startsWith(`rgba(`, 0) // Check if transparent
-                    ) {
+                    )
                         display_style.symbol_color = first_point_style.stroke;
-                    }
                 }
             }
             // else: keep default display_style.symbol_type/color if no point_style
@@ -422,10 +372,17 @@ let legend_data = $derived.by(() => {
         if (series_markers?.includes(`line`)) {
             // Prefer explicit line stroke
             let legend_line_color = data_series?.line_style?.stroke;
-            if (!legend_line_color) { // If no explicit stroke, inherit a reasonable point color even when points aren't shown
-                // Order of preference: point fill -> point stroke -> symbol_color -> black
-                legend_line_color = first_point_style?.fill || first_point_style?.stroke ||
-                    display_style.symbol_color || `black`;
+            if (!legend_line_color) {
+                // Try color scale if available
+                const first_cv = Array.isArray(data_series?.color_values)
+                    ? data_series.color_values.find((v) => v != null)
+                    : undefined;
+                legend_line_color =
+                    (first_cv != null ? color_scale_fn(first_cv) : undefined) ||
+                        first_point_style?.fill ||
+                        first_point_style?.stroke ||
+                        display_style.symbol_color ||
+                        `black`;
             }
             display_style.line_color = legend_line_color;
             display_style.line_dash = data_series?.line_style?.line_dash;
@@ -440,8 +397,17 @@ let legend_data = $derived.by(() => {
             label,
             visible: is_visible,
             display_style,
+            has_explicit_label,
         };
     });
+    // Deduplicate by label - keep first occurrence of each unique label
+    const seen_labels = new SvelteSet();
+    return items.filter((item) => {
+        if (seen_labels.has(item.label))
+            return false;
+        seen_labels.add(item.label);
+        return true;
+    });
 });
 // Calculate best legend placement using new simple system
 let legend_placement = $derived.by(() => {
@@ -479,19 +445,15 @@ let color_bar_placement = $derived.by(() => {
         legend_size: estimated_size,
     });
 });
-// Use responsive or fixed initial placement
+// Active legend placement (null if user set explicit position)
 let active_legend_placement = $derived.by(() => {
     if (!legend_placement)
         return null;
-    // Skip auto-placement if user set explicit position
+    // Skip auto-placement if user set explicit position in style
     const style = legend?.wrapper_style ?? ``;
     if (/(^|[;{]\s*)(top|bottom|left|right)\s*:|position\s*:\s*absolute/.test(style))
         return null;
-    // Responsive mode: always use current best placement
-    if (legend?.responsive)
-        return legend_placement;
-    // Fixed mode: use initial placement (set in effect below)
-    return initial_legend_placement ?? legend_placement;
+    return legend_placement;
 });
 // Initialize tweened values for color bar position
 const tweened_colorbar_coords = new Tween({ x: 0, y: 0 }, {
@@ -504,18 +466,12 @@ const tweened_legend_coords = new Tween({ x: 0, y: 0 }, { duration: 400, ...(leg
 $effect(() => {
     if (!width || !height)
         return;
-    // Store initial placement for non-responsive mode
-    if (legend_placement && !initial_legend_placement && !legend?.responsive) {
-        initial_legend_placement = legend_placement;
-    }
-    // Update color bar
     if (color_bar_placement) {
         tweened_colorbar_coords.set({
             x: color_bar_placement.x,
             y: color_bar_placement.y,
         });
     }
-    // Update legend (unless manually positioned)
     if (legend_manual_position && !legend_is_dragging) {
         tweened_legend_coords.set(legend_manual_position);
     }
@@ -530,26 +486,28 @@ $effect(() => {
 let x_tick_values = $derived.by(() => {
     if (!width || !height)
         return [];
-    // Use a numeric scale for tick generation to satisfy typings;
-    // time formatting is handled via the format option inside generate_ticks
-    const x_scale_for_ticks = x_scale_type === `log`
-        ? scaleLog().domain([x_min, x_max])
-        : scaleLinear().domain([x_min, x_max]);
-    return generate_ticks([x_min, x_max], x_scale_type, x_ticks, x_scale_for_ticks, {
-        format: x_format,
+    // Choose appropriate scale for tick generation
+    // Time scales (format starts with %) use scaleTime for better tick placement
+    const x_scale_for_ticks = x_axis.format?.startsWith(`%`)
+        ? scaleTime().domain([new Date(x_min), new Date(x_max)])
+        : x_axis.scale_type === `log`
+            ? scaleLog().domain([x_min, x_max])
+            : scaleLinear().domain([x_min, x_max]);
+    return generate_ticks([x_min, x_max], x_axis.scale_type, x_axis.ticks, x_scale_for_ticks, {
+        format: x_axis.format,
     });
 });
 let y_tick_values = $derived.by(() => {
     if (!width || !height)
         return [];
-    return generate_ticks([y_min, y_max], y_scale_type, y_ticks, y_scale_fn, {
+    return generate_ticks([y_min, y_max], y_axis.scale_type, y_axis.ticks, y_scale_fn, {
         default_count: 5,
     });
 });
 let y2_tick_values = $derived.by(() => {
     if (!width || !height || y2_points.length === 0)
         return [];
-    return generate_ticks([y2_min, y2_max], y2_scale_type, y2_ticks, y2_scale_fn, {
+    return generate_ticks([y2_min, y2_max], y2_axis.scale_type, y2_axis.ticks, y2_scale_fn, {
         default_count: 5,
     });
 });
@@ -614,15 +572,14 @@ const on_window_mouse_up = (_evt) => {
             dy > min_zoom_size &&
             next_x_range[0] !== next_x_range[1] &&
             next_y_range[0] !== next_y_range[1]) {
-            current_x_range = next_x_range;
-            current_y_range = next_y_range;
+            zoom_x_range = next_x_range;
+            zoom_y_range = next_y_range;
         }
-        // If the box is too small, we just reset without zooming (effectively ignoring the drag)
     }
     // Reset states and remove listeners
     drag_start_coords = null;
     drag_current_coords = null;
-    svg_bounding_box = null; // Clear stored bounds
+    svg_bounding_box = null;
     window.removeEventListener(`mousemove`, on_window_mouse_move);
     window.removeEventListener(`mouseup`, on_window_mouse_up);
     document.body.style.cursor = `default`;
@@ -632,25 +589,31 @@ function handle_mouse_down(evt) {
     if (!coords || !svg_element)
         return;
     drag_start_coords = coords;
-    drag_current_coords = coords; // Initialize current coords
-    svg_bounding_box = svg_element.getBoundingClientRect(); // Store bounds on drag start
-    // Add listeners to window
+    drag_current_coords = coords;
+    svg_bounding_box = svg_element.getBoundingClientRect();
     window.addEventListener(`mousemove`, on_window_mouse_move);
     window.addEventListener(`mouseup`, on_window_mouse_up);
-    // Prevent text selection during drag
     evt.preventDefault();
 }
 function handle_mouse_leave() {
-    // Reset drag state if mouse leaves plot area
     hovered = false;
     tooltip_point = null;
-    on_point_hover?.({ point: null });
+    on_point_hover?.({ point: null, event: undefined });
 }
 function handle_double_click() {
-    // Reset zoom/pan to initial ranges
-    current_x_range = [...initial_x_range];
-    current_y_range = [...initial_y_range];
-    current_y2_range = [...initial_y2_range];
+    // Reset zoom to auto ranges
+    zoom_x_range = [
+        x_axis.range?.[0] ?? auto_x_range[0],
+        x_axis.range?.[1] ?? auto_x_range[1],
+    ];
+    zoom_y_range = [
+        y_axis.range?.[0] ?? auto_y_range[0],
+        y_axis.range?.[1] ?? auto_y_range[1],
+    ];
+    zoom_y2_range = [
+        y2_axis.range?.[0] ?? auto_y2_range[0],
+        y2_axis.range?.[1] ?? auto_y2_range[1],
+    ];
 }
 // tooltip logic: find closest point and update tooltip state
 function update_tooltip_point(x_rel, y_rel, evt) {
@@ -667,7 +630,7 @@ function update_tooltip_point(x_rel, y_rel, evt) {
             continue;
         for (const point of series_data.filtered_data) {
             // Calculate screen coordinates of the point
-            const point_cx = x_format?.startsWith(`%`)
+            const point_cx = x_axis.format?.startsWith(`%`)
                 ? x_scale_fn(new Date(point.x))
                 : x_scale_fn(point.x);
             const point_cy = (series_data.y_axis === `y2` ? y2_scale_fn : y_scale_fn)(point.y);
@@ -722,109 +685,81 @@ let actual_label_config = $derived({
 $effect(() => {
     if (!width || !height)
         return;
-    // 1. Collect nodes for simulation (only those with auto_placement)
-    const nodes_to_simulate = [];
+    // Collect auto-placed labels and their anchors
+    const label_nodes = [];
     const anchor_nodes = [];
     const links = [];
-    filtered_series.forEach((series_data) => {
-        series_data.filtered_data.forEach((point) => {
-            if (point.point_label?.auto_placement && point.point_label.text) {
-                const anchor_x = x_format?.startsWith(`%`)
-                    ? x_scale_fn(new Date(point.x))
-                    : x_scale_fn(point.x);
-                const anchor_y = y_scale_fn(point.y);
-                const id = `${point.series_idx}-${point.point_idx}`;
-                // Estimate label size (simple approximation)
-                const label_width = point.point_label.text.length * 6 + 10; // Approx 6px per char + padding
-                const label_height = 14; // Approx font height + padding
-                const label_node = {
-                    id,
-                    anchor_x,
-                    anchor_y,
-                    point_node: point,
-                    label_width,
-                    label_height,
-                    x: anchor_x + (point.point_label.offset?.x ?? 5), // Start at default offset
-                    y: anchor_y + (point.point_label.offset?.y ?? 0),
-                };
-                nodes_to_simulate.push(label_node);
-                // Create a fixed anchor node for the link force
-                const fixed_anchor_id = `anchor-${id}`;
-                // Get the radius for the point, default if not specified
-                const point_radius = point.point_style?.radius ?? 3; // Default radius 3
-                anchor_nodes.push({
-                    id: fixed_anchor_id,
-                    fx: anchor_x,
-                    fy: anchor_y,
-                    point_radius,
-                });
-                // Link label to its fixed anchor
-                links.push({ source: id, target: fixed_anchor_id });
-            }
-        });
-    });
-    if (nodes_to_simulate.length === 0) {
+    for (const series_data of filtered_series) {
+        for (const point of series_data.filtered_data) {
+            if (!point.point_label?.auto_placement || !point.point_label.text)
+                continue;
+            const anchor_x = x_axis.format?.startsWith(`%`)
+                ? x_scale_fn(new Date(point.x))
+                : x_scale_fn(point.x);
+            const anchor_y = (series_data.y_axis === `y2` ? y2_scale_fn : y_scale_fn)(point.y);
+            const id = `${point.series_idx}-${point.point_idx}`;
+            const anchor_id = `anchor-${id}`;
+            label_nodes.push({
+                id,
+                anchor_x,
+                anchor_y,
+                point_node: point,
+                label_width: point.point_label.text.length * 6 + 10,
+                label_height: 14,
+                x: anchor_x + (point.point_label.offset?.x ?? 5),
+                y: anchor_y + (point.point_label.offset?.y ?? 0),
+            });
+            anchor_nodes.push({
+                id: anchor_id,
+                fx: anchor_x,
+                fy: anchor_y,
+                point_radius: point.point_style?.radius ?? 3,
+            });
+            links.push({ source: id, target: anchor_id });
+        }
+    }
+    if (label_nodes.length === 0) {
         label_positions = {};
-        return; // No labels to place
+        return;
     }
-    // Combine nodes for the simulation
-    const all_simulation_nodes = [
-        ...nodes_to_simulate,
-        ...anchor_nodes,
-    ];
-    // 2. Setup and run the simulation
-    const simulation = forceSimulation(all_simulation_nodes)
+    // Run force simulation
+    forceSimulation([...label_nodes, ...anchor_nodes])
         .force(`link`, forceLink(links)
         .id((d) => d.id)
         .distance(actual_label_config.link_distance)
-        .strength(actual_label_config.link_strength)) // Cast d to ensure id exists
-        .force(`collide`, forceCollide()
-        .radius((d_node) => {
-        const node_as_label = d_node;
-        const node_as_anchor = d_node; // Use defined AnchorNode type
-        if (node_as_label.label_width) {
-            const size = Math.max(node_as_label.label_width, node_as_label.label_height) / 2;
-            // Check if it's a LabelNode via a unique property
-            // Collision radius based on label dimensions
-            return size + 2; // +2 buffer
-        }
-        else if (node_as_anchor.point_radius !== undefined) {
-            // Check if it's our AnchorNode
-            // Collision radius based on the point's visual radius
-            return node_as_anchor.point_radius + 2; // +2 buffer
-        }
-        return 0; // Should not happen if nodes are constructed correctly
-    })
-        .strength(actual_label_config.collision_strength))
-        .stop();
-    // Run simulation for a fixed number of ticks
-    simulation.tick(actual_label_config.placement_ticks);
-    // 3. Store the final positions, applying link_distance_range constraint
-    nodes_to_simulate.forEach((node) => {
+        .strength(actual_label_config.link_strength))
+        .force(`collide`, forceCollide().radius((node) => {
+        const label = node;
+        const anchor = node;
+        return label.label_width
+            ? Math.max(label.label_width, label.label_height) / 2 + 2
+            : (anchor.point_radius ?? 0) + 2;
+    }).strength(actual_label_config.collision_strength))
+        .stop()
+        .tick(actual_label_config.placement_ticks);
+    // Apply distance constraints and store final positions
+    const [min_dist, max_dist] = actual_label_config.link_distance_range ??
+        [null, null];
+    for (const node of label_nodes) {
         let final_x = node.x;
         let final_y = node.y;
-        const dist_range = actual_label_config.link_distance_range;
-        if (dist_range) {
-            const [min_dist, max_dist] = dist_range;
+        if (min_dist || max_dist) {
             const dx = final_x - node.anchor_x;
             const dy = final_y - node.anchor_y;
-            const dist_sq = dx * dx + dy * dy;
-            const current_dist = Math.sqrt(dist_sq);
-            if (max_dist && current_dist > max_dist) {
-                // Clamp to max distance
-                const scale_factor = max_dist / current_dist;
-                final_x = node.anchor_x + dx * scale_factor;
-                final_y = node.anchor_y + dy * scale_factor;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+            if (max_dist && dist > max_dist) {
+                const scale = max_dist / dist;
+                final_x = node.anchor_x + dx * scale;
+                final_y = node.anchor_y + dy * scale;
             }
-            else if (min_dist && current_dist < min_dist && current_dist > 0) {
-                // Clamp to min distance (if not directly at anchor point)
-                const scale_factor = min_dist / current_dist;
-                final_x = node.anchor_x + dx * scale_factor;
-                final_y = node.anchor_y + dy * scale_factor;
+            else if (min_dist && dist > 0 && dist < min_dist) {
+                const scale = min_dist / dist;
+                final_x = node.anchor_x + dx * scale;
+                final_y = node.anchor_y + dy * scale;
             }
         }
         label_positions[node.id] = { x: final_x, y: final_y };
-    });
+    }
 });
 // Helper function to check if two series have compatible units
 function have_compatible_units(series1, series2) {
@@ -842,10 +777,15 @@ function toggle_series_visibility(series_idx) {
     const toggled_series = series[series_idx];
     const new_visibility = !(toggled_series.visible ?? true);
     const target_axis = toggled_series.y_axis ?? `y1`;
+    const toggled_label = toggled_series.label;
     // Only create new objects for series that need to change to preserve series IDs
     series = series.map((s, idx) => {
-        if (idx === series_idx) {
-            // Toggle the clicked series
+        // Toggle all series with the same label (for grouped series like band structures)
+        if (toggled_label && s.label === toggled_label) {
+            return { ...s, visible: new_visibility };
+        }
+        // Also toggle the specific series if it has no label
+        if (idx === series_idx && !toggled_label) {
             return { ...s, visible: new_visibility };
         }
         // If we're showing a series, hide incompatible series on same axis
@@ -863,11 +803,20 @@ function toggle_series_visibility(series_idx) {
 }
 // Function to handle double-click on legend item
 function handle_legend_double_click(double_clicked_idx) {
-    const current_visibility = processed_series.map((s) => s?.visible ?? true);
-    const visible_count = current_visibility.filter((v) => v).length;
-    const is_currently_isolated = visible_count === 1 &&
-        current_visibility[double_clicked_idx];
-    if (is_currently_isolated && previous_series_visibility) {
+    const double_clicked_series = series[double_clicked_idx];
+    const double_clicked_label = double_clicked_series?.label;
+    const current_visibility = series.map((s) => s?.visible ?? true);
+    const visible_count = current_visibility.filter((visible) => visible).length;
+    // Check if the group is currently isolated (all series with this label visible, others hidden)
+    const group_is_isolated = series.every((srs, idx) => {
+        // For unlabeled series, use index comparison; for labeled, use label comparison
+        const is_in_group = double_clicked_label
+            ? srs.label === double_clicked_label
+            : idx === double_clicked_idx;
+        const is_visible = srs?.visible ?? true;
+        return is_in_group ? is_visible : !is_visible;
+    });
+    if (group_is_isolated && previous_series_visibility) {
         // Restore previous visibility state
         // Only create new objects for series whose visibility actually changes
         series = series.map((s, idx) => {
@@ -881,14 +830,18 @@ function handle_legend_double_click(double_clicked_idx) {
         previous_series_visibility = null; // Clear memory
     }
     else {
-        // Isolate the double-clicked series
+        // Isolate the double-clicked series group
         // Only store previous state if we are actually isolating (more than one series visible)
         if (visible_count > 1) {
             previous_series_visibility = [...current_visibility]; // Store current state
         }
         // Only create new objects for series whose visibility needs to change
         series = series.map((s, idx) => {
-            const target_visibility = idx === double_clicked_idx;
+            // For unlabeled series, use index comparison; for labeled, use label comparison
+            const is_in_group = double_clicked_label
+                ? s.label === double_clicked_label
+                : idx === double_clicked_idx;
+            const target_visibility = is_in_group;
             const current_visibility = s?.visible ?? true;
             if (current_visibility !== target_visibility) {
                 return { ...s, visible: target_visibility };
@@ -928,7 +881,7 @@ function handle_legend_drag_end(_event) {
 }
 function get_screen_coords(point, series) {
     // convert data coordinates to potentially non-finite screen coordinates
-    const screen_x = x_format?.startsWith(`%`)
+    const screen_x = x_axis.format?.startsWith(`%`)
         ? x_scale_fn(new Date(point.x))
         : x_scale_fn(point.x);
     const y_val = point.y;
@@ -936,19 +889,19 @@ function get_screen_coords(point, series) {
     const use_y2 = series?.y_axis === `y2`;
     const y_scale = use_y2 ? y2_scale_fn : y_scale_fn;
     const min_domain_y = use_y2
-        ? y2_scale_type === `log` ? y_scale.domain()[0] : -Infinity
-        : y_scale_type === `log`
+        ? y2_axis.scale_type === `log` ? y_scale.domain()[0] : -Infinity
+        : y_axis.scale_type === `log`
             ? y_scale.domain()[0]
             : -Infinity;
     const safe_y_val = use_y2
-        ? y2_scale_type === `log` ? Math.max(y_val, min_domain_y) : y_val
-        : y_scale_type === `log`
+        ? y2_axis.scale_type === `log` ? Math.max(y_val, min_domain_y) : y_val
+        : y_axis.scale_type === `log`
             ? Math.max(y_val, min_domain_y)
             : y_val;
     const screen_y = y_scale(safe_y_val); // This might be non-finite
     return [screen_x, screen_y];
 }
-let using_controls = $derived(show_controls);
+let using_controls = $derived(controls.show);
 let has_multiple_series = $derived(series_with_ids.filter(Boolean).length > 1);
 </script>
 
@@ -978,43 +931,242 @@ let has_multiple_series = $derived(series_with_ids.filter(Boolean).length > 1);
         width,
         x_scale_fn,
         y_scale_fn,
-        x_min,
-        x_max,
-        y_min,
-        y_max,
+        y2_scale_fn,
         pad,
+        x_range: [x_min, x_max],
+        y_range: [y_min, y_max],
+        y2_range: [y2_min, y2_max],
       })}
+      <g class="x-axis">
+        {#if width > 0 && height > 0}
+          {#each x_tick_values as tick (tick)}
+            {@const tick_pos_raw = x_axis.format?.startsWith(`%`)
+          ? x_scale_fn(new Date(tick))
+          : x_scale_fn(tick)}
+            {#if isFinite(tick_pos_raw)}
+              // Check if tick position is finite
+              {@const tick_pos = tick_pos_raw}
+              {#if tick_pos >= pad.l && tick_pos <= width - pad.r}
+                <g class="tick" transform="translate({tick_pos}, {height - pad.b})">
+                  {#if display.x_grid}
+                    <line
+                      y1={-(height - pad.b - pad.t)}
+                      y2="0"
+                      {...DEFAULT_GRID_STYLE}
+                      {...(x_axis.grid_style ?? {})}
+                    />
+                  {/if}
 
-      <!-- Guide lines -->
-      <!-- Zero lines -->
-      {#if show_zero_lines}
-        {#if x_min <= 0 && x_max >= 0}
-          {@const zero_x_pos = x_format?.startsWith(`%`)
-        ? x_scale_fn(new Date(0))
-        : x_scale_fn(0)}
-          {#if isFinite(zero_x_pos)}
-            <line
-              y1={pad.t}
-              y2={height - pad.b}
-              x1={zero_x_pos}
-              x2={zero_x_pos}
-              stroke="gray"
-              stroke-width="0.5"
-            />
+                  {#if tick >= x_min && tick <= x_max}
+                    {@const { x, y } = x_axis.tick_label_shift ?? { x: 0, y: 20 }}
+                    {@const custom_label = get_tick_label(tick, x_axis.ticks)}
+                    <text {x} {y}>
+                      {custom_label ?? format_value(tick, x_axis.format ?? ``)}
+                    </text>
+                  {/if}
+                </g>
+              {/if}
+            {/if}
+          {/each}
+        {/if}
+
+        <!-- Current frame indicator -->
+        {#if current_x_value !== null && current_x_value !== undefined}
+          {@const current_pos_raw = x_axis.format?.startsWith(`%`)
+          ? x_scale_fn(new Date(current_x_value))
+          : x_scale_fn(current_x_value)}
+          {#if isFinite(current_pos_raw)}
+            {@const current_pos = current_pos_raw}
+            {#if current_pos >= pad.l && current_pos <= width - pad.r}
+              {@const active_tick_height = 7}
+              <rect
+                x={current_pos - 1.5}
+                y={height - pad.b - active_tick_height / 2}
+                width="3"
+                height={active_tick_height}
+                fill="var(--scatter-current-frame-color, #ff6b35)"
+                stroke="white"
+                stroke-width="1"
+                class="current-frame-indicator"
+              />
+            {/if}
           {/if}
         {/if}
-        {#if y_scale_type === `linear` && y_min < 0 && y_max > 0}
-          {@const zero_y_pos = y_scale_fn(0)}
-          {#if isFinite(zero_y_pos)}
-            <line
-              x1={pad.l}
-              x2={width - pad.r}
-              y1={zero_y_pos}
-              y2={zero_y_pos}
-              stroke="gray"
-              stroke-width="0.5"
-            />
+
+        {#if x_axis.label}
+          <foreignObject
+            x={width / 2 + (x_axis.label_shift?.x ?? 0) - 100}
+            y={height - pad.b - (x_axis.label_shift?.y ?? -40) - 10}
+            width="200"
+            height="20"
+          >
+            <div class="axis-label x-label">
+              {@html x_axis.label ?? ``}
+            </div>
+          </foreignObject>
+        {/if}
+      </g>
+
+      <g class="y-axis">
+        {#if width > 0 && height > 0}
+          {#each y_tick_values as tick, idx (tick)}
+            {@const tick_pos_raw = y_scale_fn(tick)}
+            {#if isFinite(tick_pos_raw)}
+              // Check if tick position is finite
+              {@const tick_pos = tick_pos_raw}
+              {#if tick_pos >= pad.t && tick_pos <= height - pad.b}
+                <g class="tick" transform="translate({pad.l}, {tick_pos})">
+                  {#if display.y_grid}
+                    <line
+                      x1="0"
+                      x2={width - pad.l - pad.r}
+                      {...DEFAULT_GRID_STYLE}
+                      {...(y_axis.grid_style ?? {})}
+                    />
+                  {/if}
+
+                  {#if tick >= y_min && tick <= y_max}
+                    {@const { x, y } = y_axis.tick_label_shift ?? { x: -8, y: 0 }}
+                    {@const custom_label = get_tick_label(tick, y_axis.ticks)}
+                    <text {x} {y} text-anchor="end" fill={y_axis.color}>
+                      {custom_label ?? format_value(tick, y_axis.format ?? ``)}
+                      {#if y_axis.unit && idx === 0}
+                        &zwnj;&ensp;{y_axis.unit}
+                      {/if}
+                    </text>
+                  {/if}
+                </g>
+              {/if}
+            {/if}
+          {/each}
+        {/if}
+
+        {#if height > 0 && y_axis.label}
+          <foreignObject
+            x={-100}
+            y={-10}
+            width="200"
+            height="20"
+            transform="rotate(-90, {(y_axis.label_shift?.y ?? 12)}, {pad.t +
+              (height - pad.t - pad.b) / 2 +
+              ((y_axis.label_shift?.x ?? 0))}) translate({(y_axis.label_shift?.y ?? 12)}, {pad.t +
+              (height - pad.t - pad.b) / 2 +
+              ((y_axis.label_shift?.x ?? 0))})"
+          >
+            <div class="axis-label y-label" style:color={y_axis.color}>
+              {@html y_axis.label ?? ``}
+            </div>
+          </foreignObject>
+        {/if}
+      </g>
+
+      <!-- Y2-axis (Right) -->
+      {#if y2_points.length > 0}
+        <g class="y2-axis">
+          {#if width > 0 && height > 0}
+            {#each y2_tick_values as tick, idx (tick)}
+              {@const tick_pos_raw = y2_scale_fn(tick)}
+              {#if isFinite(tick_pos_raw)}
+                // Check if tick position is finite
+                {@const tick_pos = tick_pos_raw}
+                {#if tick_pos >= pad.t && tick_pos <= height - pad.b}
+                  <g class="tick" transform="translate({width - pad.r}, {tick_pos})">
+                    {#if display.y2_grid}
+                      <line
+                        x1={-(width - pad.l - pad.r)}
+                        x2="0"
+                        {...DEFAULT_GRID_STYLE}
+                        {...(y2_axis.grid_style ?? {})}
+                      />
+                    {/if}
+
+                    {#if tick >= y2_min && tick <= y2_max}
+                      {@const { x, y } = y2_axis.tick_label_shift ?? { x: 8, y: 0 }}
+                      {@const custom_label = get_tick_label(tick, y2_axis.ticks)}
+                      <text {x} {y} text-anchor="start" fill={y2_axis.color}>
+                        {custom_label ?? format_value(tick, y2_axis.format ?? ``)}
+                        {#if y2_axis.unit && idx === 0}
+                          &zwnj;&ensp;{y2_axis.unit}
+                        {/if}
+                      </text>
+                    {/if}
+                  </g>
+                {/if}
+              {/if}
+            {/each}
+          {/if}
+
+          {#if height > 0 && y2_axis.label}
+            <foreignObject
+              x={-100}
+              y={-10}
+              width="200"
+              height="20"
+              transform="rotate(-90, {width - pad.r + ((y2_axis.label_shift?.y ?? 0))}, {pad.t +
+                (height - pad.t - pad.b) / 2 +
+                ((y2_axis.label_shift?.x ?? 0))}) translate({width -
+                pad.r +
+                ((y2_axis.label_shift?.y ?? 0))}, {pad.t +
+                (height - pad.t - pad.b) / 2 +
+                ((y2_axis.label_shift?.x ?? 0))})"
+            >
+              <div class="axis-label y2-label" style:color={y2_axis.color}>
+                {@html y2_axis.label ?? ``}
+              </div>
+            </foreignObject>
           {/if}
+        </g>
+      {/if}
+
+      <!-- Tooltip rendered inside overlay (moved outside SVG for stacking above colorbar) -->
+
+      <!-- Zoom Selection Rectangle -->
+      {#if drag_start_coords && drag_current_coords}
+        {@const x = Math.min(drag_start_coords.x, drag_current_coords.x)}
+        {@const y = Math.min(drag_start_coords.y, drag_current_coords.y)}
+        {@const rect_width = Math.abs(drag_start_coords.x - drag_current_coords.x)}
+        {@const rect_height = Math.abs(drag_start_coords.y - drag_current_coords.y)}
+        <rect class="zoom-rect" {x} {y} width={rect_width} height={rect_height} />
+      {/if}
+
+      <!-- Zero lines -->
+      {#if display.x_zero_line && x_axis.scale_type === `linear` &&
+        !x_axis.format?.startsWith(`%`) && x_min <= 0 && x_max >= 0}
+        {@const zero_x_pos = x_scale_fn(0)}
+        {#if isFinite(zero_x_pos)}
+          <line
+            class="zero-line"
+            x1={zero_x_pos}
+            x2={zero_x_pos}
+            y1={pad.t}
+            y2={height - pad.b}
+          />
+        {/if}
+      {/if}
+      {#if display.y_zero_line && y_axis.scale_type === `linear` && y_min <= 0 &&
+        y_max >= 0}
+        {@const zero_y_pos = y_scale_fn(0)}
+        {#if isFinite(zero_y_pos)}
+          <line
+            class="zero-line"
+            x1={pad.l}
+            x2={width - pad.r}
+            y1={zero_y_pos}
+            y2={zero_y_pos}
+          />
+        {/if}
+      {/if}
+      {#if display.y_zero_line && y2_points.length > 0 &&
+        y2_axis.scale_type === `linear` && y2_min <= 0 && y2_max >= 0}
+        {@const zero_y2_pos = y2_scale_fn(0)}
+        {#if isFinite(zero_y2_pos)}
+          <line
+            class="zero-line"
+            x1={pad.l}
+            x2={width - pad.r}
+            y1={zero_y2_pos}
+            y2={zero_y2_pos}
+          />
         {/if}
       {/if}
 
@@ -1030,9 +1182,9 @@ let has_multiple_series = $derived(series_with_ids.filter(Boolean).length > 1);
       </defs>
 
       <!-- Lines -->
-      {#if markers?.includes(`line`) && show_lines}
+      {#if styles.show_lines}
         {#each filtered_series ?? [] as series_data (series_data._id)}
-          {@const series_markers = series_data.markers ?? markers}
+          {@const series_markers = series_data.markers ?? DEFAULT_MARKERS}
           <g data-series-id={series_data._id} clip-path="url(#{clip_path_id})">
             {#if series_markers?.includes(`line`)}
               {@const all_line_points = series_data.x.map((x, idx) => ({
@@ -1048,13 +1200,13 @@ let has_multiple_series = $derived(series_with_ids.filter(Boolean).length > 1);
               <Line
                 points={finite_screen_points}
                 origin={[
-                  x_format?.startsWith(`%`)
+                  x_axis.format?.startsWith(`%`)
                     ? x_scale_fn(new Date(x_min))
                     : x_scale_fn(x_min),
                   series_data.y_axis === `y2` ? y2_scale_fn(y2_min) : y_scale_fn(y_min),
                 ]}
                 line_color={apply_line_controls
-                ? line_color ?? `cornflowerblue`
+                ? styles.line?.color ?? `cornflowerblue`
                 : series_data.line_style?.stroke ??
                   (Array.isArray(series_data.point_style)
                     ? series_data.point_style[0]?.fill
@@ -1063,9 +1215,11 @@ let has_multiple_series = $derived(series_with_ids.filter(Boolean).length > 1);
                     ? color_scale_fn(series_data.color_values[0])
                     : `cornflowerblue`)}
                 line_width={apply_line_controls
-                ? line_width ?? 2
+                ? styles.line?.width ?? 2
                 : series_data.line_style?.stroke_width ?? 2}
-                line_dash={apply_line_controls ? line_dash : series_data.line_style?.line_dash}
+                line_dash={apply_line_controls
+                ? styles.line?.dash
+                : series_data.line_style?.line_dash}
                 area_color="transparent"
                 {line_tween}
               />
@@ -1075,9 +1229,9 @@ let has_multiple_series = $derived(series_with_ids.filter(Boolean).length > 1);
       {/if}
 
       <!-- Points -->
-      {#if markers?.includes(`points`) && show_points}
+      {#if styles.show_points}
         {#each filtered_series ?? [] as series_data (series_data._id)}
-          {@const series_markers = series_data.markers ?? markers}
+          {@const series_markers = series_data.markers ?? DEFAULT_MARKERS}
           <g data-series-id={series_data._id}>
             {#if series_markers?.includes(`points`)}
               {#each series_data.filtered_data as
@@ -1092,7 +1246,7 @@ let has_multiple_series = $derived(series_with_ids.filter(Boolean).length > 1);
             ...label_style,
             offset: {
               x: calculated_label_pos.x -
-                (x_format?.startsWith(`%`)
+                (x_axis.format?.startsWith(`%`)
                   ? x_scale_fn(new Date(point.x))
                   : x_scale_fn(point.x)),
               y: calculated_label_pos.y - (series_data.y_axis === `y2`
@@ -1118,26 +1272,26 @@ let has_multiple_series = $derived(series_with_ids.filter(Boolean).length > 1);
                   style={{
                     ...point.point_style,
                     radius: apply_controls
-                      ? point_size ?? (point.size_value != null
+                      ? styles.point?.size ?? (point.size_value != null
                         ? size_scale_fn(point.size_value)
                         : point.point_style?.radius ?? 4)
                       : point.size_value != null
                       ? size_scale_fn(point.size_value)
                       : point.point_style?.radius ?? 4,
                     stroke_width: apply_controls
-                      ? point_stroke_width ??
+                      ? styles.point?.stroke_width ??
                         point.point_style?.stroke_width ?? 1
                       : point.point_style?.stroke_width ?? 1,
                     stroke: apply_controls
-                      ? point_stroke_color ??
+                      ? styles.point?.stroke_color ??
                         point.point_style?.stroke ?? `#000`
                       : point.point_style?.stroke ?? `#000`,
                     stroke_opacity: apply_controls
-                      ? point_stroke_opacity ??
+                      ? styles.point?.stroke_opacity ??
                         point.point_style?.stroke_opacity ?? 1
                       : point.point_style?.stroke_opacity ?? 1,
                     fill_opacity: apply_controls
-                      ? point_opacity ??
+                      ? styles.point?.opacity ??
                         point.point_style?.fill_opacity ?? 1
                       : point.point_style?.fill_opacity ?? 1,
                     cursor: on_point_click ? `pointer` : undefined,
@@ -1150,7 +1304,7 @@ let has_multiple_series = $derived(series_with_ids.filter(Boolean).length > 1);
                   --point-fill-color={point.color_value != null
                   ? color_scale_fn(point.color_value)
                   : apply_controls
-                  ? point_color ?? point.point_style?.fill ??
+                  ? styles.point?.color ?? point.point_style?.fill ??
                     `cornflowerblue`
                   : point.point_style?.fill ?? `cornflowerblue`}
                   {...point_events &&
@@ -1166,188 +1320,6 @@ let has_multiple_series = $derived(series_with_ids.filter(Boolean).length > 1);
           </g>
         {/each}
       {/if}
-
-      <g class="x-axis">
-        {#if width > 0 && height > 0}
-          {#each x_tick_values as tick (tick)}
-            {@const tick_pos_raw = x_format?.startsWith(`%`)
-          ? x_scale_fn(new Date(tick))
-          : x_scale_fn(tick)}
-            {#if isFinite(tick_pos_raw)}
-              // Check if tick position is finite
-              {@const tick_pos = tick_pos_raw}
-              {#if tick_pos >= pad.l && tick_pos <= width - pad.r}
-                <g class="tick" transform="translate({tick_pos}, {height - pad.b})">
-                  {#if x_grid}
-                    <line
-                      y1={-(height - pad.b - pad.t)}
-                      y2="0"
-                      {...typeof x_grid === `object` ? x_grid : {}}
-                    />
-                  {/if}
-
-                  {#if tick >= x_min && tick <= x_max}
-                    {@const { x, y } = x_tick_label_shift}
-                    <text {x} {y}>{format_value(tick, x_format)}</text>
-                  {/if}
-                </g>
-              {/if}
-            {/if}
-          {/each}
-        {/if}
-
-        <!-- Current frame indicator -->
-        {#if current_x_value !== null && current_x_value !== undefined}
-          {@const current_pos_raw = x_format?.startsWith(`%`)
-          ? x_scale_fn(new Date(current_x_value))
-          : x_scale_fn(current_x_value)}
-          {#if isFinite(current_pos_raw)}
-            {@const current_pos = current_pos_raw}
-            {#if current_pos >= pad.l && current_pos <= width - pad.r}
-              {@const active_tick_height = 7}
-              <rect
-                x={current_pos - 1.5}
-                y={height - pad.b - active_tick_height / 2}
-                width="3"
-                height={active_tick_height}
-                fill="var(--scatter-current-frame-color, #ff6b35)"
-                stroke="white"
-                stroke-width="0.5"
-                class="current-frame-indicator"
-              />
-            {/if}
-          {/if}
-        {/if}
-
-        <foreignObject
-          x={width / 2 + (x_label_shift.x ?? 0) - 100}
-          y={height - pad.b - (x_label_shift.y ?? 0) - 10}
-          width="200"
-          height="20"
-        >
-          <div class="axis-label x-label">
-            {@html x_label ?? ``}
-          </div>
-        </foreignObject>
-      </g>
-
-      <g class="y-axis">
-        {#if width > 0 && height > 0}
-          {#each y_tick_values as tick, idx (tick)}
-            {@const tick_pos_raw = y_scale_fn(tick)}
-            {#if isFinite(tick_pos_raw)}
-              // Check if tick position is finite
-              {@const tick_pos = tick_pos_raw}
-              {#if tick_pos >= pad.t && tick_pos <= height - pad.b}
-                <g class="tick" transform="translate({pad.l}, {tick_pos})">
-                  {#if y_grid}
-                    <line
-                      x1="0"
-                      x2={width - pad.l - pad.r}
-                      {...typeof y_grid === `object` ? y_grid : {}}
-                    />
-                  {/if}
-
-                  {#if tick >= y_min && tick <= y_max}
-                    {@const { x, y } = y_tick_label_shift}
-                    <text {x} {y} text-anchor="end" fill={axis_colors.y1 || undefined}>
-                      {format_value(tick, y_format)}
-                      {#if y_unit && idx === 0}
-                        &zwnj;&ensp;{y_unit}
-                      {/if}
-                    </text>
-                  {/if}
-                </g>
-              {/if}
-            {/if}
-          {/each}
-        {/if}
-
-        {#if height > 0}
-          <foreignObject
-            x={-100}
-            y={-10}
-            width="200"
-            height="20"
-            transform="rotate(-90, {y_label_shift.y ?? 20}, {pad.t +
-              (height - pad.t - pad.b) / 2 +
-              (y_label_shift.x ?? 0)}) translate({y_label_shift.y ?? 20}, {pad.t +
-              (height - pad.t - pad.b) / 2 +
-              (y_label_shift.x ?? 0)})"
-          >
-            <div class="axis-label y-label" style:color={axis_colors.y1 || undefined}>
-              {@html y_label ?? ``}
-            </div>
-          </foreignObject>
-        {/if}
-      </g>
-
-      <!-- Y2-axis (Right) -->
-      {#if y2_points.length > 0}
-        <g class="y2-axis">
-          {#if width > 0 && height > 0}
-            {#each y2_tick_values as tick, idx (tick)}
-              {@const tick_pos_raw = y2_scale_fn(tick)}
-              {#if isFinite(tick_pos_raw)}
-                // Check if tick position is finite
-                {@const tick_pos = tick_pos_raw}
-                {#if tick_pos >= pad.t && tick_pos <= height - pad.b}
-                  <g class="tick" transform="translate({width - pad.r}, {tick_pos})">
-                    {#if y2_grid}
-                      <line
-                        x1={-(width - pad.l - pad.r)}
-                        x2="0"
-                        {...typeof y2_grid === `object` ? y2_grid : {}}
-                      />
-                    {/if}
-
-                    {#if tick >= y2_min && tick <= y2_max}
-                      {@const { x, y } = y2_tick_label_shift}
-                      <text {x} {y} text-anchor="start" fill={axis_colors.y2}>
-                        {format_value(tick, y2_format)}
-                        {#if y2_unit && idx === 0}
-                          &zwnj;&ensp;{y2_unit}
-                        {/if}
-                      </text>
-                    {/if}
-                  </g>
-                {/if}
-              {/if}
-            {/each}
-          {/if}
-
-          {#if height > 0 && y2_label}
-            <foreignObject
-              x={-100}
-              y={-10}
-              width="200"
-              height="20"
-              transform="rotate(-90, {width - pad.r + (y2_label_shift.y ?? 0)}, {pad.t +
-                (height - pad.t - pad.b) / 2 +
-                (y2_label_shift.x ?? 0)}) translate({width -
-                pad.r +
-                (y2_label_shift.y ?? 0)}, {pad.t +
-                (height - pad.t - pad.b) / 2 +
-                (y2_label_shift.x ?? 0)})"
-            >
-              <div class="axis-label y2-label" style:color={axis_colors.y2}>
-                {@html y2_label ?? ``}
-              </div>
-            </foreignObject>
-          {/if}
-        </g>
-      {/if}
-
-      <!-- Tooltip rendered inside overlay (moved outside SVG for stacking above colorbar) -->
-
-      <!-- Zoom Selection Rectangle -->
-      {#if drag_start_coords && drag_current_coords}
-        {@const x = Math.min(drag_start_coords.x, drag_current_coords.x)}
-        {@const y = Math.min(drag_start_coords.y, drag_current_coords.y)}
-        {@const rect_width = Math.abs(drag_start_coords.x - drag_current_coords.x)}
-        {@const rect_height = Math.abs(drag_start_coords.y - drag_current_coords.y)}
-        <rect class="zoom-rect" {x} {y} width={rect_width} height={rect_height} />
-      {/if}
     </svg>
 
     <!-- Tooltip overlay above all plot overlays (legend, colorbar) -->
@@ -1355,7 +1327,7 @@ let has_multiple_series = $derived(series_with_ids.filter(Boolean).length > 1);
       {@const { x, y, metadata, color_value, point_label, point_style, series_idx } =
       tooltip_point}
       {@const hovered_series = series_with_ids[series_idx]}
-      {@const series_markers = hovered_series?.markers ?? markers}
+      {@const series_markers = hovered_series?.markers ?? DEFAULT_MARKERS}
       {@const is_transparent_or_none = (color: string | undefined | null): boolean =>
       !color || color === `none` || color === `transparent` ||
       (color.startsWith(`rgba(`) && color.endsWith(`, 0)`))}
@@ -1390,10 +1362,13 @@ let has_multiple_series = $derived(series_with_ids.filter(Boolean).length > 1);
       }
       return `rgba(0, 0, 0, 0.7)`
     })()}
-      {@const cx = x_format?.startsWith(`%`) ? x_scale_fn(new Date(x)) : x_scale_fn(x)}
+      {@const cx = x_axis.format?.startsWith(`%`) ? x_scale_fn(new Date(x)) : x_scale_fn(x)}
       {@const cy = (hovered_series?.y_axis === `y2` ? y2_scale_fn : y_scale_fn)(y)}
-      {@const x_formatted = format_value(x, x_format)}
-      {@const y_formatted = format_value(y, y_format)}
+      {@const x_formatted = format_value(x, x_axis.format || `.3~s`)}
+      {@const y_formatted = format_value(
+      y,
+      (hovered_series?.y_axis === `y2` ? y2_axis.format : y_axis.format) || `.3~s`,
+    )}
       {@const label = point_label?.text ?? null}
       {@const tooltip_lum = luminance(tooltip_bg_color ?? `rgba(0, 0, 0, 0.7)`)}
       {@const tooltip_text_color = tooltip_lum > 0.5 ? `#000000` : `#ffffff`}
@@ -1412,41 +1387,22 @@ let has_multiple_series = $derived(series_with_ids.filter(Boolean).length > 1);
       </div>
     {/if}
 
-    <!-- Control Pane positioned in top-right corner -->
-    {#if show_controls}
+    <!-- Control Pane -->
+    {#if controls.show}
       <ScatterPlotControls
-        toggle_props={controls_toggle_props}
-        bind:show_controls
-        bind:controls_open
-        bind:markers
-        bind:show_zero_lines
-        bind:x_grid
-        bind:y_grid
-        bind:y2_grid
-        bind:x_range
-        bind:y_range
-        bind:y2_range
+        toggle_props={controls.toggle_props}
+        pane_props={controls.pane_props}
+        bind:x_axis
+        bind:y_axis
+        bind:y2_axis
+        bind:display
+        bind:styles
+        bind:controls
         {auto_x_range}
         {auto_y_range}
         {auto_y2_range}
-        bind:point_size
-        bind:point_color
-        bind:point_opacity
-        bind:point_stroke_width
-        bind:point_stroke_color
-        bind:point_stroke_opacity
-        bind:line_width
-        bind:line_color
-        bind:line_opacity
-        bind:line_dash
-        bind:show_points
-        bind:show_lines
         bind:selected_series_idx
-        bind:x_format
-        bind:y_format
-        bind:y2_format
         series={series_with_ids}
-        {plot_controls}
         has_y2_points={y2_points.length > 0}
       />
     {/if}
@@ -1454,15 +1410,17 @@ let has_multiple_series = $derived(series_with_ids.filter(Boolean).length > 1);
     <!-- Color Bar -->
     {#if color_bar && all_color_values.length > 0 && color_bar_placement}
       {@const color_domain = [
-      color_scale.value_range?.[0] ?? auto_color_range[0],
-      color_scale.value_range?.[1] ?? auto_color_range[1],
+      (typeof color_scale === `string` ? undefined : color_scale.value_range)?.[0] ??
+        auto_color_range[0],
+      (typeof color_scale === `string` ? undefined : color_scale.value_range)?.[1] ??
+        auto_color_range[1],
     ] as [number, number]}
       <ColorBar
         tick_labels={4}
         tick_side="primary"
         {color_scale_fn}
         color_scale_domain={color_domain}
-        scale_type={color_scale.type}
+        scale_type={typeof color_scale === `string` ? undefined : color_scale.type}
         range={color_domain?.every((val) => val != null) ? color_domain : undefined}
         wrapper_style={`
           position: absolute;
@@ -1519,15 +1477,16 @@ let has_multiple_series = $derived(series_with_ids.filter(Boolean).length > 1);
 <style>
   div.scatter {
     position: relative; /* Needed for absolute positioning of children like ColorBar */
-    width: 100%;
-    height: 100%;
-    min-height: var(--scatter-min-height, 100px);
+    width: var(--scatter-width, 100%);
+    height: var(--scatter-height, 100%);
+    min-height: var(--scatter-min-height, 350px);
     container-type: size; /* enable cqh for panes */
     container-name: scatter-plot;
     z-index: var(--scatter-z-index);
   }
   svg {
     width: 100%;
+    height: 100%;
     fill: var(--text-color);
     font-weight: var(--scatter-font-weight);
     overflow: visible;
@@ -1588,4 +1547,10 @@ let has_multiple_series = $derived(series_with_ids.filter(Boolean).length > 1);
     stroke-width: var(--scatter-zoom-rect-stroke-width, 1);
     pointer-events: none; /* Prevent rect from interfering with mouse events */
   }
+  .zero-line {
+    stroke: var(--scatter-zero-line-color, light-dark(black, white));
+    stroke-width: var(--scatter-zero-line-width, 1);
+    stroke-dasharray: none;
+    opacity: var(--scatter-zero-line-opacity, 0.3);
+  }
 </style>