matterviz 0.1.12 → 0.1.13

package/dist/plot/ScatterPlot.svelte.d.ts

@@ -1,81 +1,31 @@
-import { DraggablePane } from '..';
 import type { D3ColorSchemeName, D3InterpolateName } from '../colors';
-import type { DataSeries, HoverConfig, InternalPoint, LabelPlacementConfig, LegendConfig, Markers, PlotPoint, Point, ScaleType, ScatterTooltipProps, Sides, UserContentProps, XyObj } from './';
+import type { AxisConfig, ControlsConfig, DataSeries, DisplayConfig, HoverConfig, InternalPoint, LabelPlacementConfig, LegendConfig, PlotPoint, Point, ScaleType, ScatterTooltipProps, Sides, StyleOverrides, TweenedOptions, UserContentProps, XyObj } from './';
 import { ColorBar } from './';
 import type { ComponentProps, Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type TicksOption } from './scales';
-type LocalTweenedOptions<T> = {
-    duration?: number;
-    delay?: number;
-    easing?: (t: number) => number;
-    interpolate?: (a: T, b: T) => (t: number) => T;
-};
-interface Props extends HTMLAttributes<HTMLDivElement> {
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     series?: DataSeries[];
-    x_lim?: [number | null, number | null];
-    y_lim?: [number | null, number | null];
-    x_range?: [number | null, number | null];
-    y_range?: [number | null, number | null];
-    current_x_value?: number | null;
-    y2_lim?: [number | null, number | null];
-    y2_range?: [number | null, number | null];
-    y2_label?: string;
-    y2_label_shift?: {
-        x?: number;
-        y?: number;
-    };
-    y2_tick_label_shift?: {
-        x?: number;
-        y?: number;
-    };
-    y2_unit?: string;
-    y2_format?: string;
-    y2_ticks?: TicksOption;
-    y2_scale_type?: ScaleType;
-    y2_grid?: boolean | Record<string, unknown>;
+    x_axis?: AxisConfig;
+    y_axis?: AxisConfig;
+    y2_axis?: AxisConfig;
+    display?: DisplayConfig;
+    styles?: StyleOverrides;
+    controls?: ControlsConfig;
     padding?: Sides;
-    x_label?: string;
-    x_label_shift?: {
-        x?: number;
-        y?: number;
-    };
-    x_tick_label_shift?: {
-        x?: number;
-        y?: number;
-    };
-    y_label?: string;
-    y_label_shift?: {
-        x?: number;
-        y?: number;
-    };
-    y_tick_label_shift?: {
-        x?: number;
-        y?: number;
-    };
-    y_unit?: string;
+    range_padding?: number;
+    current_x_value?: number | null;
     tooltip_point?: InternalPoint | null;
     hovered?: boolean;
-    markers?: Markers;
-    x_format?: string;
-    y_format?: string;
     tooltip?: Snippet<[PlotPoint & ScatterTooltipProps]>;
     user_content?: Snippet<[UserContentProps]>;
     change?: (data: (Point & {
         series: DataSeries;
     }) | null) => void;
-    x_ticks?: TicksOption;
-    y_ticks?: TicksOption;
-    x_scale_type?: ScaleType;
-    y_scale_type?: ScaleType;
-    show_zero_lines?: boolean;
-    x_grid?: boolean | Record<string, unknown>;
-    y_grid?: boolean | Record<string, unknown>;
     color_scale?: {
         type?: ScaleType;
         scheme?: D3ColorSchemeName | D3InterpolateName;
         value_range?: [number, number];
-    };
+    } | D3InterpolateName;
     size_scale?: {
         type?: ScaleType;
         radius_range?: [number, number];
@@ -83,49 +33,27 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     };
     color_bar?: (ComponentProps<typeof ColorBar> & {
         margin?: number | Sides;
-        tween?: LocalTweenedOptions<XyObj>;
+        tween?: TweenedOptions<XyObj>;
     }) | null;
     label_placement_config?: Partial<LabelPlacementConfig>;
     hover_config?: Partial<HoverConfig>;
     legend?: LegendConfig | null;
-    point_tween?: LocalTweenedOptions<XyObj>;
-    line_tween?: LocalTweenedOptions<string>;
-    range_padding?: number;
+    point_tween?: TweenedOptions<XyObj>;
+    line_tween?: TweenedOptions<string>;
     point_events?: Record<string, (payload: {
         point: InternalPoint;
         event: Event;
     }) => void>;
-    on_point_click?: (payload: {
+    on_point_click?: (data: {
         point: InternalPoint;
         event: MouseEvent;
     }) => void;
-    on_point_hover?: (payload: {
+    on_point_hover?: (data: {
         point: InternalPoint | null;
         event?: MouseEvent;
     }) => void;
-    show_controls?: boolean;
-    controls_open?: boolean;
-    plot_controls?: Snippet<[]>;
-    point_size?: number;
-    point_color?: string;
-    point_opacity?: number;
-    point_stroke_width?: number;
-    point_stroke_color?: string;
-    point_stroke_opacity?: number;
-    line_width?: number;
-    line_color?: string;
-    line_opacity?: number;
-    line_dash?: string;
-    show_points?: boolean;
-    show_lines?: boolean;
     selected_series_idx?: number;
-    color_axis_labels?: boolean | {
-        y1?: string | null;
-        y2?: string | null;
-    };
-    controls_toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
-    children?: Snippet<[]>;
-}
-declare const ScatterPlot: import("svelte").Component<Props, {}, "x_format" | "y_format" | "y2_format" | "point_size" | "point_color" | "point_opacity" | "point_stroke_width" | "point_stroke_color" | "point_stroke_opacity" | "line_width" | "line_color" | "line_opacity" | "line_dash" | "show_points" | "show_lines" | "controls_open" | "hovered" | "tooltip_point" | "selected_series_idx">;
+};
+declare const ScatterPlot: import("svelte").Component<$$ComponentProps, {}, "display" | "controls" | "y_axis" | "y2_axis" | "x_axis" | "hovered" | "styles" | "tooltip_point" | "selected_series_idx">;
 type ScatterPlot = ReturnType<typeof ScatterPlot>;
 export default ScatterPlot;

package/dist/plot/ScatterPlotControls.svelte

@@ -1,291 +1,71 @@
-<script lang="ts">import { DraggablePane, SettingsSection } from '..';
-import { DEFAULTS, SETTINGS_CONFIG } from '../settings';
-import { format } from 'd3-format';
-import { timeFormat } from 'd3-time-format';
+<script lang="ts">import { SettingsSection } from '..';
+import { PlotControls } from './';
+import { DEFAULTS } from '../settings';
 import { tooltip } from 'svelte-multiselect/attachments';
-let { show_controls = $bindable(false), controls_open = $bindable(false), plot_controls, series = [], markers = $bindable(DEFAULTS.scatter.markers), show_zero_lines = $bindable(DEFAULTS.plot.show_zero_lines), x_grid = $bindable(DEFAULTS.plot.x_grid), y_grid = $bindable(DEFAULTS.plot.y_grid), y2_grid = $bindable(DEFAULTS.plot.y2_grid), has_y2_points = false, 
-// Range controls
-x_range = $bindable(undefined), y_range = $bindable(undefined), y2_range = $bindable(undefined), 
-// Auto-detected ranges for fallback when only one value is set
-auto_x_range = [0, 1], auto_y_range = [0, 1], auto_y2_range = [0, 1], 
-// Format controls
-x_format = $bindable(DEFAULTS.plot.x_format), y_format = $bindable(DEFAULTS.plot.y_format), y2_format = $bindable(DEFAULTS.plot.y2_format), 
-// Style controls
-point_size = $bindable(DEFAULTS.scatter.point_size), point_color = $bindable(DEFAULTS.scatter.point_color), point_opacity = $bindable(DEFAULTS.scatter.point_opacity), point_stroke_width = $bindable(DEFAULTS.scatter.point_stroke_width), point_stroke_color = $bindable(DEFAULTS.scatter.point_stroke_color), point_stroke_opacity = $bindable(DEFAULTS.scatter.point_stroke_opacity), line_width = $bindable(DEFAULTS.scatter.line_width), line_color = $bindable(DEFAULTS.scatter.line_color), line_opacity = $bindable(DEFAULTS.scatter.line_opacity), line_dash = $bindable(DEFAULTS.scatter.line_dash), show_points = $bindable(DEFAULTS.scatter.show_points), show_lines = $bindable(DEFAULTS.scatter.show_lines), selected_series_idx = $bindable(0), toggle_props = {}, pane_props = {}, } = $props();
+let { series = [], x_axis = $bindable({}), y_axis = $bindable({}), y2_axis = $bindable({}), display = $bindable({}), styles = $bindable({}), controls = $bindable({}), selected_series_idx = $bindable(0), ...rest } = $props();
 // Derived state
 let has_multiple_series = $derived(series.filter(Boolean).length > 1);
-// Generic helpers to eliminate ALL repetition
-const validate_format = (str) => {
-    if (!str)
-        return true;
-    try {
-        return str.startsWith(`%`)
-            ? timeFormat(str)(new Date()) || true
-            : format(str)(123.456) || true;
-    }
-    catch {
-        return false;
-    }
-};
-const format_input_handler = (type) => (event) => {
-    const input = event.target;
-    // Update local state
-    if (type === `x`)
-        x_format_input = input.value;
-    else if (type === `y`)
-        y_format_input = input.value;
-    else
-        y2_format_input = input.value;
-    // Validate and update prop
-    const is_valid = validate_format(input.value);
-    input.classList.toggle(`invalid`, !is_valid);
-    if (is_valid) {
-        if (type === `x`)
-            x_format = input.value;
-        else if (type === `y`)
-            y_format = input.value;
-        else
-            y2_format = input.value;
-    }
-};
-const range_complete = (axis) => {
-    const [min_el, max_el] = [`min`, `max`].map((b) => document.getElementById(`${axis}-range-${b}`));
-    if (!min_el || !max_el)
-        return;
-    const [min, max] = [min_el, max_el].map((el) => (el.classList.remove(`invalid`), el.value === `` ? null : +el.value));
-    const auto = { x: auto_x_range, y: auto_y_range, y2: auto_y2_range }[axis];
-    if (min !== null && max !== null && min >= max) {
-        ;
-        [min_el, max_el].forEach((el) => el.classList.add(`invalid`));
-        return;
-    }
-    const ranges = {
-        x: (r) => x_range = r,
-        y: (r) => y_range = r,
-        y2: (r) => y2_range = r,
-    };
-    ranges[axis](min === null && max === null ? undefined : [min ?? auto[0], max ?? auto[1]]);
-};
-const input_props = (axis, bound, range) => ({
-    id: `${axis}-range-${bound}`,
-    type: `number`,
-    value: range?.[bound === `min` ? 0 : 1] ?? ``,
-    placeholder: `auto`,
-    class: `range-input`,
-    onblur: () => range_complete(axis),
-    onkeydown: (e) => e.key === `Enter` && e.target.blur(),
-});
-// Ultra-minimal effects
-$effect(() => [[x_range, `x`], [y_range, `y`], [y2_range, `y2`]].forEach(([range, axis]) => {
-    if (!range) {
-        for (const bound of [`min`, `max`]) {
-            const el = document.getElementById(`${axis}-range-${bound}`);
-            if (el)
-                el.value = ``;
-        }
-    }
-}));
-$effect(() => {
-    show_points = markers?.includes(`points`) ?? false;
-    show_lines = markers?.includes(`line`) ?? false;
-    if (has_multiple_series && series[selected_series_idx]) {
-        const s = series[selected_series_idx];
-        const ps = Array.isArray(s.point_style) ? s.point_style[0] : s.point_style;
-        if (ps) {
-            point_size = ps.radius ?? 4;
-            point_color = ps.fill ?? `#4682b4`;
-            point_stroke_width = ps.stroke_width ?? 1;
-            point_stroke_color = ps.stroke ?? `#000`;
-            point_opacity = ps.fill_opacity ?? 1;
-        }
-        if (s.line_style) {
-            line_width = s.line_style.stroke_width ?? 2;
-            line_color = s.line_style.stroke ?? `#4682b4`;
-            line_dash = s.line_style.line_dash ?? DEFAULTS.scatter.line_dash;
-        }
-    }
-});
+// Initialize show_points/show_lines from defaults
 $effect(() => {
-    markers = show_points && show_lines
-        ? `line+points`
-        : show_points
-            ? `points`
-            : `line`;
+    styles.show_points ??= DEFAULTS.scatter.show_points;
+    styles.show_lines ??= DEFAULTS.scatter.show_lines;
 });
-// Local format state
-let x_format_input = $state(x_format);
-let y_format_input = $state(y_format);
-let y2_format_input = $state(y2_format);
 </script>
 
-{#if show_controls}
-  <DraggablePane
-    bind:show={controls_open}
-    closed_icon="Settings"
-    open_icon="Cross"
-    toggle_props={{
-      ...toggle_props,
-      class: `scatter-controls-toggle ${toggle_props?.class ?? ``}`,
-      title: `${controls_open ? `Close` : `Open`} scatter plot controls`,
-      style:
-        `position: absolute; top: var(--ctrl-btn-top, 1ex); right: var(--ctrl-btn-right, 1ex); background-color: transparent; ${
-          toggle_props?.style ?? ``
-        }`,
-    }}
-    pane_props={{
-      ...pane_props,
-      class: `scatter-controls-pane ${pane_props?.class ?? ``}`,
+<PlotControls bind:x_axis bind:y_axis bind:y2_axis bind:display {...rest}>
+  <!-- Add show_points and show_lines checkboxes to Display section by extending it -->
+  <!-- This is done via the Display section in PlotControls, but we need custom controls -->
+  <!-- For now, we'll add a separate section for markers -->
+  <SettingsSection
+    title="Markers"
+    current_values={{ show_points: styles.show_points, show_lines: styles.show_lines }}
+    on_reset={() => {
+      styles.show_points = DEFAULTS.scatter.show_points
+      styles.show_lines = DEFAULTS.scatter.show_lines
     }}
+    style="display: flex; flex-wrap: wrap; gap: 1ex"
   >
-    {#if plot_controls}
-      {@render plot_controls()}
-    {:else}
-      <SettingsSection
-        title="Display"
-        current_values={{ show_zero_lines, show_points, show_lines, x_grid, y_grid, y2_grid }}
-        on_reset={() => {
-          show_zero_lines = DEFAULTS.plot.show_zero_lines
-          show_points = DEFAULTS.scatter.show_points
-          show_lines = DEFAULTS.scatter.show_lines
-          x_grid = DEFAULTS.plot.x_grid
-          y_grid = DEFAULTS.plot.y_grid
-          y2_grid = DEFAULTS.plot.y2_grid
-        }}
-        style="display: flex; flex-wrap: wrap; gap: 1ex"
-      >
-        <label>
-          <input type="checkbox" bind:checked={show_zero_lines} /> Show zero lines
-        </label>
-        <label
-          {@attach tooltip({ content: `Toggle visibility of data points in the scatter plot` })}
-        >
-          <input type="checkbox" bind:checked={show_points} /> Show points
-        </label>
-        <label
-          {@attach tooltip({
-            content: `Toggle visibility of connecting lines between data points`,
-          })}
-        >
-          <input type="checkbox" bind:checked={show_lines} /> Show lines
-        </label>
-        <label
-          {@attach tooltip({ content: SETTINGS_CONFIG.plot.grid_lines.description })}
-        >
-          <input type="checkbox" bind:checked={x_grid as boolean} /> X-axis grid
-        </label>
-        <label
-          {@attach tooltip({ content: SETTINGS_CONFIG.plot.grid_lines.description })}
-        >
-          <input type="checkbox" bind:checked={y_grid as boolean} /> Y-axis grid
-        </label>
-        {#if has_y2_points}
-          <label>
-            <input type="checkbox" bind:checked={y2_grid as boolean} /> Y2-axis grid
-          </label>
-        {/if}
-      </SettingsSection>
+    <label
+      {@attach tooltip({ content: `Toggle visibility of data points in the scatter plot` })}
+    >
+      <input type="checkbox" bind:checked={styles.show_points} /> Show points
+    </label>
+    <label
+      {@attach tooltip({
+        content: `Toggle visibility of connecting lines between data points`,
+      })}
+    >
+      <input type="checkbox" bind:checked={styles.show_lines} /> Show lines
+    </label>
+  </SettingsSection>
 
-      <SettingsSection
-        title="Axis Range"
-        current_values={{ x_range, y_range, y2_range }}
-        on_reset={() => {
-          x_range = undefined
-          y_range = undefined
-          y2_range = undefined
-        }}
-        class="pane-grid"
-        style="grid-template-columns: repeat(4, max-content)"
-      >
-        <label for="x-range-min">X-axis:</label>
-        <input {...input_props(`x`, `min`, x_range)} />
-        &nbsp;to
-        <input {...input_props(`x`, `max`, x_range)} />
-        <label for="y-range-min">Y-axis:</label>
-        <input {...input_props(`y`, `min`, y_range)} />
-        &nbsp;to
-        <input {...input_props(`y`, `max`, y_range)} />
-        {#if has_y2_points}
-          <label for="y2-range-min">Y2-axis:</label>
-          <input {...input_props(`y2`, `min`, y2_range)} />
-          &nbsp;to
-          <input {...input_props(`y2`, `max`, y2_range)} />
-        {/if}
-      </SettingsSection>
+  {#snippet post_children()}
+    <!-- Series Selection (for multi-series style controls) -->
+    {#if has_multiple_series}
+      <div class="pane-row">
+        <label for="series-select">Series</label>
+        <select bind:value={selected_series_idx} id="series-select">
+          {#each series as srs, idx (idx)}
+            {#if srs}
+              <option value={idx}>
+                {srs.label ?? `Series ${idx + 1}`}
+              </option>
+            {/if}
+          {/each}
+        </select>
+      </div>
+    {/if}
 
+    <!-- Point Style Controls -->
+    {#if styles.show_points}
       <SettingsSection
-        title="Tick Format"
-        current_values={{ x_format, y_format, y2_format }}
+        title="Point Style"
+        current_values={styles.point ?? {}}
         on_reset={() => {
-          x_format = DEFAULTS.plot.x_format
-          y_format = DEFAULTS.plot.y_format
-          y2_format = DEFAULTS.plot.y2_format
+          styles.point = { ...DEFAULTS.scatter.point }
         }}
-        class="pane-grid"
-        style="grid-template-columns: auto 1fr"
       >
-        <label for="x-format">X-axis:</label>
-        <input
-          id="x-format"
-          type="text"
-          bind:value={x_format_input}
-          placeholder=".2f / .0% / %Y-%m-%d"
-          oninput={format_input_handler(`x`)}
-        />
-        <label for="y-format">Y-axis:</label>
-        <input
-          id="y-format"
-          type="text"
-          bind:value={y_format_input}
-          placeholder=".2f / .1e / .0%"
-          oninput={format_input_handler(`y`)}
-        />
-        {#if has_y2_points}
-          <label for="y2-format">Y2-axis:</label>
-          <input
-            id="y2-format"
-            type="text"
-            bind:value={y2_format_input}
-            placeholder=".2f / .1e / .0%"
-            oninput={format_input_handler(`y2`)}
-          />
-        {/if}
-      </SettingsSection>
-
-      <!-- Series Selection (for multi-series style controls) -->
-      {#if has_multiple_series}
-        <div class="pane-row">
-          <label for="series-select">Series</label>
-          <select bind:value={selected_series_idx} id="series-select">
-            {#each series.filter(Boolean) as series_data, idx (series_data.label ?? idx)}
-              <option value={idx}>
-                {series_data.label ?? `Series ${idx + 1}`}
-              </option>
-            {/each}
-          </select>
-        </div>
-      {/if}
-
-      <!-- Point Style Controls -->
-      {#if show_points}
-        <SettingsSection
-          title="Point Style"
-          current_values={{
-            point_size,
-            point_color,
-            point_opacity,
-            point_stroke_width,
-            point_stroke_color,
-            point_stroke_opacity,
-          }}
-          on_reset={() => {
-            point_size = DEFAULTS.scatter.point_size
-            point_color = DEFAULTS.scatter.point_color
-            point_opacity = DEFAULTS.scatter.point_opacity
-            point_stroke_width = DEFAULTS.scatter.point_stroke_width
-            point_stroke_color = DEFAULTS.scatter.point_stroke_color
-            point_stroke_opacity = DEFAULTS.scatter.point_stroke_opacity
-          }}
-        >
+        {#if styles.point}
           <div class="pane-row">
             <label for="point-size-range">Size:</label>
             <input
@@ -294,22 +74,34 @@ let y2_format_input = $state(y2_format);
               min="1"
               max="20"
               step="0.5"
-              bind:value={point_size}
+              bind:value={styles.point.size}
+            />
+            <input
+              type="number"
+              min="1"
+              max="20"
+              step="0.5"
+              bind:value={styles.point.size}
             />
-            <input type="number" min="1" max="20" step="0.5" bind:value={point_size} />
           </div>
           <div class="pane-row">
             <label for="point-color">Color:</label>
-            <input id="point-color" type="color" bind:value={point_color} />
+            <input id="point-color" type="color" bind:value={styles.point.color} />
             <input
               type="range"
               min="0"
               max="1"
               step="0.05"
-              bind:value={point_opacity}
+              bind:value={styles.point.opacity}
               title="Color opacity"
             />
-            <input type="number" min="0" max="1" step="0.05" bind:value={point_opacity} />
+            <input
+              type="number"
+              min="0"
+              max="1"
+              step="0.05"
+              bind:value={styles.point.opacity}
+            />
           </div>
           <div class="pane-row">
             <label for="point-stroke-width-range">Stroke Width:</label>
@@ -319,25 +111,29 @@ let y2_format_input = $state(y2_format);
               min="0"
               max="5"
               step="0.1"
-              bind:value={point_stroke_width}
+              bind:value={styles.point.stroke_width}
             />
             <input
               type="number"
               min="0"
               max="5"
               step="0.1"
-              bind:value={point_stroke_width}
+              bind:value={styles.point.stroke_width}
             />
           </div>
           <div class="pane-row">
             <label for="point-stroke-color">Stroke Color:</label>
-            <input id="point-stroke-color" type="color" bind:value={point_stroke_color} />
+            <input
+              id="point-stroke-color"
+              type="color"
+              bind:value={styles.point.stroke_color}
+            />
             <input
               type="range"
               min="0"
               max="1"
               step="0.05"
-              bind:value={point_stroke_opacity}
+              bind:value={styles.point.stroke_opacity}
               title="Stroke opacity"
             />
             <input
@@ -345,24 +141,23 @@ let y2_format_input = $state(y2_format);
               min="0"
               max="1"
               step="0.05"
-              bind:value={point_stroke_opacity}
+              bind:value={styles.point.stroke_opacity}
             />
           </div>
-        </SettingsSection>
-      {/if}
+        {/if}
+      </SettingsSection>
+    {/if}
 
-      <!-- Line Style Controls -->
-      {#if show_lines}
-        <SettingsSection
-          title="Line Style"
-          current_values={{ line_width, line_color, line_opacity, line_dash }}
-          on_reset={() => {
-            line_width = DEFAULTS.scatter.line_width
-            line_color = DEFAULTS.scatter.line_color
-            line_opacity = DEFAULTS.scatter.line_opacity
-            line_dash = DEFAULTS.scatter.line_dash
-          }}
-        >
+    <!-- Line Style Controls -->
+    {#if styles.show_lines}
+      <SettingsSection
+        title="Line Style"
+        current_values={styles.line ?? {}}
+        on_reset={() => {
+          styles.line = { ...DEFAULTS.scatter.line }
+        }}
+      >
+        {#if styles.line}
           <div class="pane-row">
             <label for="line-width-range">Line Width:</label>
             <input
@@ -371,19 +166,25 @@ let y2_format_input = $state(y2_format);
               min="0.5"
               max="10"
               step="0.5"
-              bind:value={line_width}
+              bind:value={styles.line.width}
+            />
+            <input
+              type="number"
+              min="0.5"
+              max="10"
+              step="0.5"
+              bind:value={styles.line.width}
             />
-            <input type="number" min="0.5" max="10" step="0.5" bind:value={line_width} />
           </div>
           <div class="pane-row">
             <label for="line-color">Line Color:</label>
-            <input id="line-color" type="color" bind:value={line_color} />
+            <input id="line-color" type="color" bind:value={styles.line.color} />
             <input
               type="range"
               min="0"
               max="1"
               step="0.05"
-              bind:value={line_opacity}
+              bind:value={styles.line.opacity}
               title="Line opacity"
             />
             <input
@@ -391,29 +192,20 @@ let y2_format_input = $state(y2_format);
               min="0"
               max="1"
               step="0.05"
-              bind:value={line_opacity}
+              bind:value={styles.line.opacity}
             />
           </div>
           <div class="pane-row">
             <label for="line-style-select">Line Style:</label>
-            <select
-              id="line-style-select"
-              value={line_dash ?? `solid`}
-              onchange={(event) => {
-                const target = event.currentTarget as HTMLSelectElement
-                line_dash = target.value === `solid`
-                  ? DEFAULTS.scatter.line_dash
-                  : target.value
-              }}
-            >
+            <select id="line-style-select" bind:value={styles.line.dash}>
               <option value="solid">Solid</option>
               <option value="4,4">Dashed</option>
               <option value="2,2">Dotted</option>
               <option value="8,4,2,4">Dash-dot</option>
             </select>
           </div>
-        </SettingsSection>
-      {/if}
+        {/if}
+      </SettingsSection>
     {/if}
-  </DraggablePane>
-{/if}
+  {/snippet}
+</PlotControls>