matterviz 0.3.2 → 0.3.4

package/dist/plot/ColorScaleSelect.svelte

@@ -1,7 +1,28 @@
-<script lang="ts">import { ColorBar } from './';
-import * as d3_sc from 'd3-scale-chromatic';
-import Select from 'svelte-multiselect';
-let { options = Object.keys(d3_sc).filter((key) => key.startsWith(`interpolate`)), value = $bindable(options[0]), selected = $bindable([]), minSelect = 1, placeholder = `Select a color scale`, colorbar = {}, ...rest } = $props();
+<script lang="ts">
+  import { ColorBar } from './'
+  import * as d3_sc from 'd3-scale-chromatic'
+  import type { ComponentProps } from 'svelte'
+  import Select from 'svelte-multiselect'
+  import type { D3InterpolateName } from '../colors'
+
+  let {
+    options = Object.keys(d3_sc).filter((key) =>
+      key.startsWith(`interpolate`)
+    ) as D3InterpolateName[],
+    value = $bindable(options[0]),
+    selected = $bindable([]),
+    minSelect = 1,
+    placeholder = `Select a color scale`,
+    colorbar = {},
+    ...rest
+  }: Omit<ComponentProps<typeof Select>, `options`> & {
+    options?: D3InterpolateName[]
+    value?: D3InterpolateName
+    selected?: D3InterpolateName[]
+    minSelect?: number
+    placeholder?: string
+    colorbar?: ComponentProps<typeof ColorBar>
+  } = $props()
 </script>
 
 <Select
@@ -14,7 +35,7 @@ let { options = Object.keys(d3_sc).filter((key) => key.startsWith(`interpolate`)
   liOptionStyle="padding: 3pt 6pt;"
   liSelectedStyle="width: 100%; background-color: transparent;"
   ulSelectedStyle="display: contents;"
-  inputStyle="min-width: 0;"
+  inputStyle="min-width: 0; width: 0; padding: 0; border: none; caret-color: transparent;"
   {...rest}
   style={`min-width: 0; ${rest.style ?? ``}`}
 >
@@ -26,7 +47,7 @@ let { options = Object.keys(d3_sc).filter((key) => key.startsWith(`interpolate`)
       tick_labels={0}
       title_side="left"
       wrapper_style="width: 100%;"
-      title_style="width: 6em; font-size: 1.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;"
+      title_style="width: 6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;"
       {...colorbar}
     />
   {/snippet}

package/dist/plot/ElementScatter.svelte

@@ -1,19 +1,40 @@
-<script lang="ts">import { element_data } from '../element';
-import { format_num } from '../labels';
-import { ScatterPlot } from './';
-import { selected } from '../state.svelte';
-let { y, x_axis = {}, y_axis = {}, y_unit = ``, tooltip_point = $bindable(null), hovered = $bindable(false), ...rest } = $props();
-// update tooltip on hover element tile
-$effect.pre(() => {
+<script lang="ts">
+  import { element_data } from '../element'
+  import { format_num } from '../labels'
+  import { sanitize_html } from '../sanitize'
+  import type { AxisConfig, InternalPoint } from './'
+  import { ScatterPlot } from './'
+  import { selected } from '../state.svelte'
+  import type { ComponentProps } from 'svelte'
+
+  let {
+    y,
+    x_axis = {},
+    y_axis = {},
+    y_unit = ``,
+    tooltip_point = $bindable(null),
+    hovered = $bindable(false),
+    ...rest
+  }: ComponentProps<typeof ScatterPlot> & {
+    y: number[] // array of length 118 (one value for each element)
+    x_axis?: AxisConfig
+    y_axis?: AxisConfig
+    y_unit?: string | null
+    tooltip_point?: InternalPoint | null
+    hovered?: boolean
+  } = $props()
+
+  // update tooltip on hover element tile
+  $effect.pre(() => {
     if (selected.element?.number && !hovered) {
-        tooltip_point = {
-            x: selected.element.number,
-            y: y[selected.element.number - 1],
-            series_idx: 0,
-            point_idx: selected.element.number - 1,
-        };
+      tooltip_point = {
+        x: selected.element.number,
+        y: y[selected.element.number - 1],
+        series_idx: 0,
+        point_idx: selected.element.number - 1,
+      }
     }
-});
+  })
 </script>
 
 <ScatterPlot
@@ -37,6 +58,6 @@ $effect.pre(() => {
   {#snippet tooltip({ x, y })}
     {@const elem = element_data[x - 1]}
     <strong>{elem ? `${x} ${elem.symbol} - ${elem.name}` : `Element ${x}`}</strong><br />
-    {@html y_axis.label || `Value`}: {format_num(y, y_axis.format ?? `~s`)}{y_unit ?? ``}
+    {@html sanitize_html(y_axis.label || `Value`)}: {format_num(y, y_axis.format ?? `~s`)}{y_unit ?? ``}
   {/snippet}
 </ScatterPlot>

package/dist/plot/FillArea.svelte

@@ -1,95 +1,123 @@
-<script lang="ts">// FillArea component for rendering fill-between regions in ScatterPlot
-// Supports gradients, hover/click interactions, and animated path transitions
-import { interpolatePath } from 'd3-interpolate-path';
-import { untrack } from 'svelte';
-import { Tween } from 'svelte/motion';
-let { region, region_idx, path, clip_path_id, x_scale_fn, y_scale_fn, hovered_region = null, on_click, on_hover, tween_options, } = $props();
-// Stable instance ID for gradient uniqueness (generated once per component instance)
-const instance_id = crypto.randomUUID().slice(0, 8);
-let gradient_id = $derived(`fill-gradient-${region.id ?? region_idx}-${instance_id}`);
-// Effective styling based on hover state
-let is_hovered = $derived(hovered_region === region_idx);
-let effective_opacity = $derived(is_hovered && region.hover_style?.fill_opacity != null
-    ? region.hover_style.fill_opacity
-    : region.fill_opacity ?? 0.3);
-let effective_fill = $derived(is_hovered && region.hover_style?.fill
-    ? region.hover_style.fill
-    : region.fill ?? `steelblue`);
-let path_fill = $derived(typeof effective_fill === `object` ? `url(#${gradient_id})` : effective_fill);
-let is_clickable = $derived(Boolean(on_click || region.on_click));
-let cursor_style = $derived(region.hover_style?.cursor ?? (is_clickable ? `pointer` : `default`));
-// Path animation using Tween - create once, update target via effect
-// untrack() explicitly captures initial values (intentional - config set once at mount)
-const tweened_path = new Tween(untrack(() => path), untrack(() => ({
-    duration: 300,
-    interpolate: interpolatePath,
-    ...tween_options,
-})));
-$effect.pre(() => {
-    tweened_path.target = path;
-});
-// Emit helpers - call both region-level and prop-level handlers when distinct
-const emit_hover = (evt) => {
-    region.on_hover?.(evt);
-    if (on_hover !== region.on_hover)
-        on_hover?.(evt);
-};
-const emit_click = (evt) => {
-    region.on_click?.(evt);
-    if (on_click !== region.on_click)
-        on_click?.(evt);
-};
-// Event handlers
-const handle_mouse_enter = (event) => emit_hover(construct_event(event));
-const handle_mouse_leave = () => emit_hover(null);
-const handle_mouse_move = (event) => is_hovered && emit_hover(construct_event(event));
-const handle_click = (event) => emit_click(construct_event(event));
-// Keyboard handler - creates event with default coordinates since no mouse position
-function handle_keydown(event) {
+<script lang="ts">
+  // FillArea component for rendering fill-between regions in ScatterPlot
+  // Supports gradients, hover/click interactions, and animated path transitions
+  import { interpolatePath } from 'd3-interpolate-path'
+  import { untrack } from 'svelte'
+  import { Tween } from 'svelte/motion'
+  import type {
+    FillGradient,
+    FillHandlerEvent,
+    FillRegion,
+    TweenedOptions,
+  } from './types'
+
+  let {
+    region,
+    region_idx,
+    path,
+    clip_path_id,
+    x_scale_fn,
+    y_scale_fn,
+    hovered_region = null,
+    on_click,
+    on_hover,
+    tween_options,
+  }: {
+    region: FillRegion
+    region_idx: number
+    path: string
+    clip_path_id: string
+    x_scale_fn: ((x: number) => number) & { invert?: (y: number) => number | Date }
+    y_scale_fn: ((y: number) => number) & { invert?: (y: number) => number }
+    hovered_region?: number | null
+    on_click?: (event: FillHandlerEvent) => void
+    on_hover?: (event: FillHandlerEvent | null) => void
+    tween_options?: TweenedOptions<string>
+  } = $props()
+
+  // Stable instance ID for gradient uniqueness (generated once per component instance)
+  const instance_id = crypto.randomUUID().slice(0, 8)
+  let gradient_id = $derived(
+    `fill-gradient-${region.id ?? region_idx}-${instance_id}`,
+  )
+
+  // Effective styling based on hover state
+  let is_hovered = $derived(hovered_region === region_idx)
+  let effective_opacity = $derived(
+    is_hovered && region.hover_style?.fill_opacity != null
+      ? region.hover_style.fill_opacity
+      : region.fill_opacity ?? 0.3,
+  )
+  let effective_fill = $derived(
+    is_hovered && region.hover_style?.fill
+      ? region.hover_style.fill
+      : region.fill ?? `steelblue`,
+  )
+  let path_fill = $derived(
+    typeof effective_fill === `object` ? `url(#${gradient_id})` : effective_fill,
+  )
+  let is_clickable = $derived(Boolean(on_click || region.on_click))
+  let cursor_style = $derived(
+    region.hover_style?.cursor ?? (is_clickable ? `pointer` : `default`),
+  )
+
+  // Path animation using Tween - create once, update target via effect
+  // untrack() explicitly captures initial values (intentional - config set once at mount)
+  const tweened_path = new Tween(
+    untrack(() => path),
+    untrack(() => ({
+      duration: 300,
+      interpolate: interpolatePath,
+      ...tween_options,
+    })),
+  )
+
+  $effect.pre(() => {
+    tweened_path.target = path
+  })
+
+  // Emit helpers - call both region-level and prop-level handlers when distinct
+  const emit_hover = (evt: FillHandlerEvent | null) => {
+    region.on_hover?.(evt)
+    if (on_hover !== region.on_hover) on_hover?.(evt)
+  }
+  const emit_click = (evt: FillHandlerEvent) => {
+    region.on_click?.(evt)
+    if (on_click !== region.on_click) on_click?.(evt)
+  }
+
+  // Event handlers
+  const handle_mouse_enter = (event: MouseEvent) => emit_hover(construct_event(event))
+  const handle_mouse_leave = () => emit_hover(null)
+  const handle_mouse_move = (event: MouseEvent) =>
+    is_hovered && emit_hover(construct_event(event))
+  const handle_click = (event: MouseEvent) => emit_click(construct_event(event))
+
+  // Keyboard handler - creates event with default coordinates since no mouse position
+  function handle_keydown(event: KeyboardEvent) {
     if (event.key === `Enter` || event.key === ` `) {
-        event.preventDefault();
-        if (!is_clickable)
-            return;
-        // For keyboard activation, use center of element or default coordinates
-        const target = event.currentTarget;
-        if (!(target instanceof SVGElement))
-            return;
-        const rect = target.ownerSVGElement?.getBoundingClientRect();
-        const element_rect = target.getBoundingClientRect();
-        // Use center of the fill region element
-        const px = element_rect
-            ? (element_rect.left + element_rect.right) / 2 - (rect?.left ?? 0)
-            : 0;
-        const py = element_rect
-            ? (element_rect.top + element_rect.bottom) / 2 - (rect?.top ?? 0)
-            : 0;
-        const raw_x = x_scale_fn.invert?.(px) ?? 0;
-        const data_x = raw_x instanceof Date ? raw_x.getTime() : raw_x;
-        const data_y = y_scale_fn.invert?.(py) ?? 0;
-        emit_click({
-            event,
-            region_idx,
-            region_id: region.id,
-            x: data_x,
-            y: data_y,
-            px,
-            py,
-            label: region.label,
-            metadata: region.metadata,
-        });
-    }
-}
-// Construct FillHandlerEvent from MouseEvent
-function construct_event(event) {
-    const current = event.currentTarget;
-    const rect = (current instanceof SVGElement ? current.ownerSVGElement : null)
-        ?.getBoundingClientRect();
-    const px = event.clientX - (rect?.left ?? 0);
-    const py = event.clientY - (rect?.top ?? 0);
-    const raw_x = x_scale_fn.invert?.(px) ?? 0;
-    const data_x = raw_x instanceof Date ? raw_x.getTime() : raw_x;
-    const data_y = y_scale_fn.invert?.(py) ?? 0;
-    return {
+      event.preventDefault()
+      if (!is_clickable) return
+
+      // For keyboard activation, use center of element or default coordinates
+      const target = event.currentTarget
+      if (!(target instanceof SVGElement)) return
+      const rect = target.ownerSVGElement?.getBoundingClientRect()
+      const element_rect = target.getBoundingClientRect()
+
+      // Use center of the fill region element
+      const px = element_rect
+        ? (element_rect.left + element_rect.right) / 2 - (rect?.left ?? 0)
+        : 0
+      const py = element_rect
+        ? (element_rect.top + element_rect.bottom) / 2 - (rect?.top ?? 0)
+        : 0
+
+      const raw_x = x_scale_fn.invert?.(px) ?? 0
+      const data_x = raw_x instanceof Date ? raw_x.getTime() : raw_x
+      const data_y = y_scale_fn.invert?.(py) ?? 0
+
+      emit_click({
         event,
         region_idx,
         region_id: region.id,
@@ -99,10 +127,39 @@ function construct_event(event) {
         py,
         label: region.label,
         metadata: region.metadata,
-    };
-}
-// Type guard for gradient fill
-const is_gradient = (fill) => typeof fill === `object` && fill !== null && `type` in fill;
+      })
+    }
+  }
+
+  // Construct FillHandlerEvent from MouseEvent
+  function construct_event(event: MouseEvent): FillHandlerEvent {
+    const current = event.currentTarget
+    const rect = (current instanceof SVGElement ? current.ownerSVGElement : null)
+      ?.getBoundingClientRect()
+    const px = event.clientX - (rect?.left ?? 0)
+    const py = event.clientY - (rect?.top ?? 0)
+    const raw_x = x_scale_fn.invert?.(px) ?? 0
+    const data_x = raw_x instanceof Date ? raw_x.getTime() : raw_x
+    const data_y = y_scale_fn.invert?.(py) ?? 0
+
+    return {
+      event,
+      region_idx,
+      region_id: region.id,
+      x: data_x,
+      y: data_y,
+      px,
+      py,
+      label: region.label,
+      metadata: region.metadata,
+    }
+  }
+
+  // Type guard for gradient fill
+  const is_gradient = (
+    fill: string | FillGradient | undefined,
+  ): fill is FillGradient =>
+    typeof fill === `object` && fill !== null && `type` in fill
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->