matterviz 0.3.1 → 0.3.3

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

@@ -41,7 +41,7 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & BasePlotProps & PlotCon
     on_ref_line_hover?: (event: RefLineEvent | null) => void;
     on_series_toggle?: (series_idx: number) => void;
     data_loader?: DataLoaderFn;
-    on_axis_change?: (axis: `x` | `y` | `y2`, key: string, new_series: DataSeries[]) => void;
+    on_axis_change?: (axis: `x` | `x2` | `y` | `y2`, key: string, new_series: DataSeries[]) => void;
     on_error?: (error: AxisLoadError) => void;
     pan?: PanConfig;
 };

package/dist/plot/HistogramControls.svelte

@@ -1,12 +1,56 @@
-<script lang="ts">// NOTE: Axis config objects must be reassigned (not mutated) to trigger $bindable reactivity.
-import { SettingsSection } from '../layout';
-import { PlotControls } from './';
-import { DEFAULTS } from '../settings';
-let { series = [], bins = $bindable(DEFAULTS.histogram.bin_count), mode = $bindable(DEFAULTS.histogram.mode), bar = $bindable({}), show_legend = $bindable(DEFAULTS.histogram.show_legend), selected_property = $bindable(``), x_axis = $bindable({}), y_axis = $bindable({}), y2_axis = $bindable({}), display = $bindable({}), show_controls = $bindable(false), controls_open = $bindable(false), auto_y2_range = undefined, children, ...rest } = $props();
-bar = { ...DEFAULTS.histogram.bar, ...bar }; // Initialize bar styles with defaults (runs once)
-let has_multiple_series = $derived(series.filter(Boolean).length > 1);
-let visible_series = $derived(series.filter((srs) => srs && (srs.visible ?? true)));
-let series_options = $derived(visible_series.map((srs) => srs.label || `Series`));
+<script lang="ts">
+  // NOTE: Axis config objects must be reassigned (not mutated) to trigger $bindable reactivity.
+  import { SettingsSection } from '../layout'
+  import type { Vec2 } from '../math'
+  import type { BarStyle, DataSeries, PlotConfig } from './'
+  import { PlotControls } from './'
+  import type { PlotControlsProps } from './types'
+  import { DEFAULTS } from '../settings'
+  import type { Snippet } from 'svelte'
+
+  let {
+    series = [],
+    bins = $bindable(DEFAULTS.histogram.bin_count),
+    mode = $bindable(DEFAULTS.histogram.mode),
+    bar = $bindable({}),
+    show_legend = $bindable(DEFAULTS.histogram.show_legend),
+    selected_property = $bindable(``),
+    x_axis = $bindable({}),
+    x2_axis = $bindable({}),
+    y_axis = $bindable({}),
+    y2_axis = $bindable({}),
+    display = $bindable({}),
+    show_controls = $bindable(false),
+    controls_open = $bindable(false),
+    auto_x2_range = undefined,
+    auto_y2_range = undefined,
+    has_x2_points = false,
+    has_y2_points = false,
+    children,
+    ...rest
+  }: Omit<PlotControlsProps, `children` | `post_children`> & {
+    // Series data for multi-series controls
+    series?: readonly DataSeries[]
+    // Histogram-specific controls
+    bins?: number
+    mode?: `single` | `overlay`
+    bar?: BarStyle
+    show_legend?: boolean
+    selected_property?: string
+    show_controls?: boolean
+    controls_open?: boolean
+    auto_x2_range?: Vec2
+    auto_y2_range?: Vec2
+    has_x2_points?: boolean
+    has_y2_points?: boolean
+    children?: Snippet<[Required<PlotConfig>]>
+  } = $props()
+
+  bar = { ...DEFAULTS.histogram.bar, ...bar } // Initialize bar styles with defaults (runs once)
+
+  let has_multiple_series = $derived(series.filter(Boolean).length > 1)
+  let visible_series = $derived(series.filter((srs) => srs && (srs.visible ?? true)))
+  let series_options = $derived(visible_series.map((srs) => srs.label || `Series`))
 </script>
 
 <PlotControls
@@ -14,12 +58,14 @@ let series_options = $derived(visible_series.map((srs) => srs.label || `Series`)
   bind:controls_open
   bind:display
   bind:x_axis
+  bind:x2_axis
   bind:y_axis
   bind:y2_axis
+  {auto_x2_range}
   {auto_y2_range}
   {...rest}
 >
-  {@render children?.({ x_axis, y_axis, y2_axis, display })}
+  {@render children?.({ x_axis, x2_axis, y_axis, y2_axis, display })}
   <SettingsSection
     title="Histogram"
     current_values={{ bins, mode, show_legend }}
@@ -113,8 +159,9 @@ let series_options = $derived(visible_series.map((srs) => srs.label || `Series`)
     data-testid="scale-type-section"
     current_values={{
       x_scale_type: x_axis.scale_type,
+      ...(has_x2_points ? { x2_scale_type: x2_axis.scale_type } : {}),
       y_scale_type: y_axis.scale_type,
-      y2_scale_type: y2_axis.scale_type,
+      ...(has_y2_points ? { y2_scale_type: y2_axis.scale_type } : {}),
     }}
     on_reset={() => {
       x_axis = {
@@ -125,9 +172,17 @@ let series_options = $derived(visible_series.map((srs) => srs.label || `Series`)
         ...y_axis,
         scale_type: DEFAULTS.plot.y_scale_type as `linear` | `log`,
       }
-      y2_axis = {
-        ...y2_axis,
-        scale_type: DEFAULTS.plot.y_scale_type as `linear` | `log`,
+      if (has_x2_points) {
+        x2_axis = {
+          ...x2_axis,
+          scale_type: DEFAULTS.plot.x_scale_type as `linear` | `log`,
+        }
+      }
+      if (has_y2_points) {
+        y2_axis = {
+          ...y2_axis,
+          scale_type: DEFAULTS.plot.y_scale_type as `linear` | `log`,
+        }
       }
     }}
     class="pane-grid"
@@ -137,13 +192,21 @@ let series_options = $derived(visible_series.map((srs) => srs.label || `Series`)
         <option value="linear">Linear</option>
         <option value="log">Log</option>
       </select></label>
+    {#if has_x2_points}
+      <label>X2: <select bind:value={x2_axis.scale_type}>
+          <option value="linear">Linear</option>
+          <option value="log">Log</option>
+        </select></label>
+    {/if}
     <label>Y: <select bind:value={y_axis.scale_type}>
         <option value="linear">Linear</option>
         <option value="log">Log</option>
       </select></label>
-    <label>Y2: <select bind:value={y2_axis.scale_type}>
-        <option value="linear">Linear</option>
-        <option value="log">Log</option>
-      </select></label>
+    {#if has_y2_points}
+      <label>Y2: <select bind:value={y2_axis.scale_type}>
+          <option value="linear">Linear</option>
+          <option value="log">Log</option>
+        </select></label>
+    {/if}
   </SettingsSection>
 </PlotControls>

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

@@ -1,3 +1,4 @@
+import type { Vec2 } from '../math';
 import type { BarStyle, DataSeries, PlotConfig } from './';
 import type { PlotControlsProps } from './types';
 import type { Snippet } from 'svelte';
@@ -10,9 +11,12 @@ type $$ComponentProps = Omit<PlotControlsProps, `children` | `post_children`> &
     selected_property?: string;
     show_controls?: boolean;
     controls_open?: boolean;
-    auto_y2_range?: [number, number];
+    auto_x2_range?: Vec2;
+    auto_y2_range?: Vec2;
+    has_x2_points?: boolean;
+    has_y2_points?: boolean;
     children?: Snippet<[Required<PlotConfig>]>;
 };
-declare const HistogramControls: import("svelte").Component<$$ComponentProps, {}, "display" | "mode" | "bins" | "show_legend" | "selected_property" | "show_controls" | "controls_open" | "x_axis" | "y_axis" | "bar" | "y2_axis">;
+declare const HistogramControls: import("svelte").Component<$$ComponentProps, {}, "display" | "mode" | "bins" | "show_legend" | "selected_property" | "show_controls" | "controls_open" | "x_axis" | "y_axis" | "bar" | "x2_axis" | "y2_axis">;
 type HistogramControls = ReturnType<typeof HistogramControls>;
 export default HistogramControls;

package/dist/plot/InteractiveAxisLabel.svelte

@@ -1,13 +1,36 @@
-<script lang="ts">import Spinner from '../feedback/Spinner.svelte';
-import PortalSelect from './PortalSelect.svelte';
-let { label = ``, options = undefined, selected_key = $bindable(), loading = $bindable(false), axis_type = `x`, color = $bindable(), on_select, ...rest } = $props();
-let is_interactive = $derived(Boolean(options?.length));
-const stop = (evt) => evt.stopPropagation();
-// Only stop propagation for keys the dropdown handles, allow Tab/Escape for navigation
-const stop_key = (evt) => {
-    if (![`Tab`, `Escape`].includes(evt.key))
-        evt.stopPropagation();
-};
+<script lang="ts">
+  import Spinner from '../feedback/Spinner.svelte'
+  import { sanitize_html } from '../sanitize'
+  import PortalSelect from './PortalSelect.svelte'
+  import type { AxisOption } from './types'
+
+  let {
+    label = ``,
+    options = undefined,
+    selected_key = $bindable(),
+    loading = $bindable(false),
+    axis_type = `x`,
+    color = $bindable(),
+    on_select,
+    ...rest
+  }: {
+    label?: string
+    options?: AxisOption[]
+    selected_key?: string
+    loading?: boolean
+    axis_type?: `x` | `x2` | `y` | `y2`
+    color?: string | null
+    on_select?: (key: string) => void
+    [key: string]: unknown
+  } = $props()
+
+  let is_interactive = $derived(Boolean(options?.length))
+
+  const stop = (evt: Event) => evt.stopPropagation()
+  // Only stop propagation for keys the dropdown handles, allow Tab/Escape for navigation
+  const stop_key = (evt: KeyboardEvent) => {
+    if (![`Tab`, `Escape`].includes(evt.key)) evt.stopPropagation()
+  }
 </script>
 
 <div
@@ -36,7 +59,7 @@ const stop_key = (evt) => {
       />
     {/if}
   {:else}
-    <span class="static-label">{@html label}</span>
+    <span class="static-label">{@html sanitize_html(label)}</span>
   {/if}
 </div>
 

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

@@ -4,7 +4,7 @@ type $$ComponentProps = {
     options?: AxisOption[];
     selected_key?: string;
     loading?: boolean;
-    axis_type?: `x` | `y` | `y2`;
+    axis_type?: `x` | `x2` | `y` | `y2`;
     color?: string | null;
     on_select?: (key: string) => void;
     [key: string]: unknown;

package/dist/plot/Line.svelte

@@ -1,36 +1,71 @@
-<script lang="ts">import { DEFAULTS } from '../settings';
-import { extent, min } from 'd3-array';
-import { interpolatePath } from 'd3-interpolate-path';
-import { curveMonotoneX, line } from 'd3-shape';
-import { untrack } from 'svelte';
-import { linear } from 'svelte/easing';
-import { Tween } from 'svelte/motion';
-let { points, origin = [0, 0], line_color = `rgba(255, 255, 255, 0.5)`, line_width = 2, area_color = `rgba(255, 255, 255, 0.1)`, area_stroke = null, line_tween = {}, line_dash = DEFAULTS.scatter.line.dash, ...rest } = $props();
-const lineGenerator = line()
+<script lang="ts">
+  import type { TweenedOptions } from './'
+  import { DEFAULTS } from '../settings'
+  import { extent, min } from 'd3-array'
+  import { interpolatePath } from 'd3-interpolate-path'
+  import { curveMonotoneX, line } from 'd3-shape'
+  import { untrack } from 'svelte'
+  import { linear } from 'svelte/easing'
+  import type { SVGAttributes } from 'svelte/elements'
+  import { Tween } from 'svelte/motion'
+
+  let {
+    points,
+    origin = [0, 0],
+    line_color = `rgba(255, 255, 255, 0.5)`,
+    line_width = 2,
+    area_color = `rgba(255, 255, 255, 0.1)`,
+    area_stroke = null,
+    line_tween = {},
+    line_dash = DEFAULTS.scatter.line.dash,
+    ...rest
+  }: Omit<SVGAttributes<SVGPathElement>, `origin` | `points`> & {
+    points: readonly [number, number][]
+    origin: [number, number]
+    line_color?: string
+    line_width?: number
+    area_color?: string
+    area_stroke?: string | null
+    line_tween?: TweenedOptions<string>
+    line_dash?: string
+  } = $props()
+
+  const lineGenerator = line()
     .x((point) => point[0])
     .y((point) => point[1])
-    .curve(curveMonotoneX);
-let [x_min, x_max] = $derived(extent(points.map((p) => p[0])));
-let line_path = $derived(lineGenerator(points) ?? ``);
-let ymin = $derived(origin[1] ?? min(points.map((p) => p[1])));
-// Guard against NaN/Infinity in area_path coords (can happen during scale transitions)
-let area_path = $derived(line_path && isFinite(x_min ?? NaN) && isFinite(x_max ?? NaN) &&
-    isFinite(ymin ?? NaN)
-    ? `${line_path}L${x_max},${ymin}L${x_min},${ymin}Z`
-    : ``);
-const default_tween = {
+    .curve(curveMonotoneX)
+
+  let [x_min, x_max] = $derived(extent(points.map((point) => point[0])))
+  let line_path = $derived(lineGenerator(points) ?? ``)
+  let ymin = $derived(origin[1] ?? min(points.map((point) => point[1])))
+  // Guard against NaN/Infinity in area_path coords (can happen during scale transitions)
+  let area_path = $derived(
+    line_path && isFinite(x_min ?? NaN) && isFinite(x_max ?? NaN) &&
+      isFinite(ymin ?? NaN)
+      ? `${line_path}L${x_max},${ymin}L${x_min},${ymin}Z`
+      : ``,
+  )
+
+  const default_tween = {
     duration: 300,
     easing: linear,
     interpolate: interpolatePath,
-};
-// Tween objects are stateful - create once, update target via effect
-// untrack() explicitly captures initial tween config (intentional - config set once at mount)
-const tweened_line = new Tween(``, untrack(() => ({ ...default_tween, ...line_tween })));
-const tweened_area = new Tween(``, untrack(() => ({ ...default_tween, ...line_tween })));
-$effect.pre(() => {
-    tweened_line.target = line_path;
-    tweened_area.target = area_path;
-});
+  }
+  // Tween objects are stateful - create once, update target via effect
+  // untrack() explicitly captures initial tween config (intentional - config set once at mount)
+  const tweened_line = new Tween(
+    ``,
+    untrack(() => ({ ...default_tween, ...line_tween })),
+  )
+  const tweened_area = new Tween(
+    ``,
+    untrack(() => ({ ...default_tween, ...line_tween })),
+  )
+
+  $effect.pre(() => {
+    tweened_line.target = line_path
+    tweened_area.target = area_path
+  })
 </script>
 
 <path