matterviz 0.3.5 → 0.3.6

package/dist/src/lib/plot/ScatterPlotControls.svelte

@@ -0,0 +1,306 @@
+<script lang="ts">
+  import { SettingsSection } from '$lib/layout'
+  import { PlotControls } from '$lib/plot'
+  import type {
+    DataSeries,
+    PlotConfig,
+    PlotControlsProps,
+    StyleOverrides,
+  } from '$lib/plot/types'
+  import { DEFAULTS } from '$lib/settings'
+  import type { Snippet } from 'svelte'
+  import { tooltip } from 'svelte-multiselect/attachments'
+
+  // Unique ID prefix to avoid conflicts when multiple instances on same page
+  const uid = crypto.randomUUID().slice(0, 8)
+
+  let {
+    series = [],
+    x_axis = $bindable({}),
+    x2_axis = $bindable({}),
+    y_axis = $bindable({}),
+    y2_axis = $bindable({}),
+    display = $bindable({}),
+    styles = $bindable({}),
+    selected_series_idx = $bindable(0),
+    on_touch,
+    children,
+    ...rest
+  }: Omit<PlotControlsProps, `children` | `post_children`> & {
+    series?: readonly DataSeries[]
+    styles?: StyleOverrides
+    selected_series_idx?: number
+    on_touch?: (key: string) => void
+    children?: Snippet<
+      [{ styles: StyleOverrides; selected_series_idx: number } & Required<PlotConfig>]
+    >
+  } = $props()
+
+  let non_null_series = $derived(series.filter((srs) => srs != null))
+  let visible_series = $derived(
+    non_null_series.filter((srs) => (srs.visible ?? true)),
+  )
+  let has_multiple_series = $derived(non_null_series.length > 1)
+
+  // Derive what marker types are present, and whether color/size are data-driven
+  const markers_include = (mode: string) =>
+    visible_series.some((srs) => (srs?.markers ?? `line+points`).includes(mode))
+  let has_any_lines = $derived(markers_include(`line`))
+  let has_any_points = $derived(markers_include(`points`))
+  let has_color_data = $derived(
+    visible_series.some((srs) => srs?.color_values?.some((val) => val != null)),
+  )
+  let has_size_data = $derived(
+    visible_series.some((srs) => srs?.size_values?.some((val) => val != null)),
+  )
+
+  $effect(() => { // Initialize show_points/show_lines from defaults
+    styles.show_points ??= DEFAULTS.scatter.show_points
+    styles.show_lines ??= DEFAULTS.scatter.show_lines
+  })
+
+  const touch = ({ target }: Event) => {
+    if (!(target instanceof Element)) return
+    const key = target.closest(`[data-key]`)?.getAttribute(`data-key`)
+    if (key) on_touch?.(key)
+  }
+</script>
+
+<PlotControls
+  bind:x_axis
+  bind:x2_axis
+  bind:y_axis
+  bind:y2_axis
+  bind:display
+  show_controls
+  {...rest}
+>
+  {@render children?.({
+      x_axis,
+      x2_axis,
+      y_axis,
+      y2_axis,
+      display,
+      styles,
+      selected_series_idx,
+    })}
+  {#if has_any_points || has_any_lines}
+    <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 has_any_points}
+        <label
+          {@attach tooltip({ content: `Toggle visibility of data points in the scatter plot` })}
+        >
+          <input type="checkbox" bind:checked={styles.show_points} /> Show points
+        </label>
+      {/if}
+      {#if has_any_lines}
+        <label
+          {@attach tooltip({ content: `Toggle visibility of connecting lines between data points` })}
+        >
+          <input type="checkbox" bind:checked={styles.show_lines} /> Show lines
+        </label>
+      {/if}
+    </SettingsSection>
+  {/if}
+
+  {#snippet post_children()}
+    <!-- Series Selection (for multi-series style controls) -->
+    {#if has_multiple_series}
+      <div class="pane-row">
+        <label for="{uid}-series">Series</label>
+        <select bind:value={selected_series_idx} id="{uid}-series">
+          {#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: only when points exist and are visible -->
+    {#if has_any_points && styles.show_points}
+      <SettingsSection
+        title="Point Style"
+        current_values={styles.point ?? {}}
+        on_reset={() => {
+          styles.point = { ...DEFAULTS.scatter.point }
+          Object.keys(DEFAULTS.scatter.point).forEach((key) => on_touch?.(`point.${key}`))
+        }}
+        oninput={touch}
+      >
+        {#if styles.point}
+          {#if !has_size_data}
+            <div class="pane-row" data-key="point.size">
+              <label for="{uid}-point-size">Size:</label>
+              <input
+                id="{uid}-point-size"
+                type="range"
+                min="1"
+                max="20"
+                step="0.5"
+                bind:value={styles.point.size}
+              />
+              <input
+                type="number"
+                min="1"
+                max="20"
+                step="0.5"
+                bind:value={styles.point.size}
+              />
+            </div>
+          {/if}
+          {#if !has_color_data}
+            <div class="pane-row" data-key="point.color">
+              <label for="{uid}-point-color">Color:</label>
+              <input
+                id="{uid}-point-color"
+                type="color"
+                bind:value={styles.point.color}
+              />
+            </div>
+          {/if}
+          <div class="pane-row" data-key="point.opacity">
+            <label for="{uid}-point-opacity">Opacity:</label>
+            <input
+              id="{uid}-point-opacity"
+              type="range"
+              min="0"
+              max="1"
+              step="0.05"
+              bind:value={styles.point.opacity}
+            />
+            <input
+              type="number"
+              min="0"
+              max="1"
+              step="0.05"
+              bind:value={styles.point.opacity}
+            />
+          </div>
+          <div class="pane-row" data-key="point.stroke_width">
+            <label for="{uid}-point-stroke-width">Stroke Width:</label>
+            <input
+              id="{uid}-point-stroke-width"
+              type="range"
+              min="0"
+              max="5"
+              step="0.1"
+              bind:value={styles.point.stroke_width}
+            />
+            <input
+              type="number"
+              min="0"
+              max="5"
+              step="0.1"
+              bind:value={styles.point.stroke_width}
+            />
+          </div>
+          <div class="pane-row" data-key="point.stroke_color">
+            <label for="{uid}-point-stroke-color">Stroke Color:</label>
+            <input
+              id="{uid}-point-stroke-color"
+              type="color"
+              bind:value={styles.point.stroke_color}
+            />
+          </div>
+          <div class="pane-row" data-key="point.stroke_opacity">
+            <label for="{uid}-point-stroke-opacity">Stroke Opacity:</label>
+            <input
+              id="{uid}-point-stroke-opacity"
+              type="range"
+              min="0"
+              max="1"
+              step="0.05"
+              bind:value={styles.point.stroke_opacity}
+            />
+            <input
+              type="number"
+              min="0"
+              max="1"
+              step="0.05"
+              bind:value={styles.point.stroke_opacity}
+            />
+          </div>
+        {/if}
+      </SettingsSection>
+    {/if}
+
+    <!-- Line Style Controls: only when lines exist and are visible -->
+    {#if has_any_lines && styles.show_lines}
+      <SettingsSection
+        title="Line Style"
+        current_values={styles.line ?? {}}
+        on_reset={() => {
+          styles.line = { ...DEFAULTS.scatter.line }
+          Object.keys(DEFAULTS.scatter.line).forEach((key) => on_touch?.(`line.${key}`))
+        }}
+        oninput={touch}
+      >
+        {#if styles.line}
+          <div class="pane-row" data-key="line.width">
+            <label for="{uid}-line-width">Width:</label>
+            <input
+              id="{uid}-line-width"
+              type="range"
+              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={styles.line.width}
+            />
+          </div>
+          {#if !has_color_data}
+            <div class="pane-row" data-key="line.color">
+              <label for="{uid}-line-color">Color:</label>
+              <input id="{uid}-line-color" type="color" bind:value={styles.line.color} />
+            </div>
+          {/if}
+          <div class="pane-row" data-key="line.opacity">
+            <label for="{uid}-line-opacity">Opacity:</label>
+            <input
+              id="{uid}-line-opacity"
+              type="range"
+              min="0"
+              max="1"
+              step="0.05"
+              bind:value={styles.line.opacity}
+            />
+            <input
+              type="number"
+              min="0"
+              max="1"
+              step="0.05"
+              bind:value={styles.line.opacity}
+            />
+          </div>
+          <div class="pane-row" data-key="line.dash">
+            <label for="{uid}-line-style">Style:</label>
+            <select id="{uid}-line-style" 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>
+        {/if}
+      </SettingsSection>
+    {/if}
+  {/snippet}
+</PlotControls>

package/dist/src/lib/plot/ScatterPoint.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+  import { type D3SymbolName, symbol_map } from '$lib/labels'
+  import type { HoverStyle, LabelStyle, Point } from '$lib/plot'
+  import type { Point2D } from '$lib/math'
+  import type { PointStyle } from '$lib/plot/types'
+  import { estimate_label_size, label_leader_segment } from '$lib/plot/utils/label-placement'
+  import { DEFAULTS } from '$lib/settings'
+  import * as d3_symbols from 'd3-shape'
+  import { symbol } from 'd3-shape'
+  import { cubicOut } from 'svelte/easing'
+  import type { SVGAttributes } from 'svelte/elements'
+  import { Tween, type TweenOptions } from 'svelte/motion'
+
+  let {
+    x,
+    y,
+    style = {},
+    hover = {},
+    label = {},
+    offset = { x: 0, y: 0 },
+    point_tween = $bindable({}),
+    origin = $bindable({ x: 0, y: 0 }),
+    is_hovered = false,
+    is_selected = false,
+    is_dimmed = false,
+    leader_line_threshold = 15,
+    ...rest
+  }: Omit<SVGAttributes<SVGGElement>, `style` | `offset` | `origin` | `transform`> & {
+    x: number
+    y: number
+    style?: PointStyle
+    hover?: HoverStyle
+    label?: LabelStyle
+    offset?: Point[`offset`]
+    point_tween?: TweenOptions<Point2D>
+    origin?: Point2D
+    is_hovered?: boolean
+    is_selected?: boolean
+    is_dimmed?: boolean
+    leader_line_threshold?: number
+  } = $props()
+
+  // get the SVG path data as 'd' attribute
+  function get_symbol_path(): string {
+    const symbol_key: D3SymbolName = style.symbol_type ?? DEFAULTS.scatter.symbol_type
+    const symbol_type = symbol_map[symbol_key] ?? d3_symbols.symbolCircle
+    const size = style.symbol_size ?? Math.PI * Math.pow(style.radius ?? 2, 2)
+    return symbol().type(symbol_type).size(size)() || ``
+  }
+
+  let marker_path = $derived.by(get_symbol_path)
+
+  const default_tween_props: TweenOptions<Point2D> = {
+    duration: 600,
+    easing: cubicOut,
+  }
+  // Single tween for {x, y} coordinates
+  const tweened_coords = new Tween(origin, { ...default_tween_props, ...point_tween })
+
+  $effect.pre(() => {
+    tweened_coords.target = { x: x + offset.x, y: y + offset.y }
+  })
+</script>
+
+<g
+  transform="translate({tweened_coords.current.x} {tweened_coords.current.y})"
+  style:--hover-scale={hover.scale ?? 1.5}
+  style:--hover-stroke={hover.stroke ?? `white`}
+  style:--hover-stroke-width="{hover.stroke_width ?? 0}px"
+  style:--hover-brightness={hover.brightness ?? 1.2}
+  {...rest}
+>
+  {#if is_selected}
+    <circle
+      r={(style.radius ?? 4) * 2.5}
+      class="effect-ring selected"
+      fill="var(--point-fill-color, {style.fill ?? `cornflowerblue`})"
+      stroke="var(--effect-ring-stroke, white)"
+      stroke-width="var(--effect-ring-stroke-width, 1)"
+    />
+  {:else if style.is_highlighted && style.highlight_effect?.match(/pulse|glow/)}
+    <circle
+      r={(style.radius ?? 4) * 2}
+      class="effect-ring {style.highlight_effect}"
+      fill={style.highlight_color ?? `#ff4444`}
+      stroke="var(--effect-ring-stroke, white)"
+      stroke-width="var(--effect-ring-stroke-width, 1)"
+    />
+  {/if}
+  <path
+    d={marker_path}
+    stroke={style.stroke ?? `transparent`}
+    stroke-width={style.stroke_width ?? 1}
+    fill-opacity={style.fill_opacity ?? 1}
+    stroke-opacity={style.stroke_opacity ?? 1}
+    fill="var(--point-fill-color, {style.fill ?? `black`})"
+    class="marker"
+    class:is-hovered={is_hovered && (hover.enabled ?? true)}
+    class:is-dimmed={is_dimmed}
+    style:cursor={style.cursor}
+  />
+  {#if label.text}
+    {@const offset_x = label.offset?.x ?? 10}
+    {@const offset_y = label.offset?.y ?? 0}
+    {@const displacement = Math.hypot(offset_x, offset_y)}
+    {@const leader_line = displacement > leader_line_threshold ? label_leader_segment({
+      point: { x: 0, y: 0 },
+      point_radius: style.radius ?? 3,
+      label_center: { x: offset_x, y: offset_y },
+      label_size: label.size ?? estimate_label_size(label.text, label.font_size),
+      min_length: 6,
+    }) : null}
+    {#if leader_line}
+      <line
+        x1={leader_line.x1}
+        y1={leader_line.y1}
+        x2={leader_line.x2}
+        y2={leader_line.y2}
+        class="leader-line"
+        stroke="var(--scatter-leader-line-color, #888)"
+        stroke-width="var(--scatter-leader-line-width, 0.8)"
+        stroke-dasharray="var(--scatter-leader-line-dash, 2 2)"
+        stroke-opacity="var(--scatter-leader-line-opacity, 0.6)"
+      />
+    {/if}
+    <text
+      x={offset_x}
+      y={offset_y}
+      text-anchor={label.auto_placement ? `middle` : undefined}
+      style:font-size={label.font_size ?? `10px`}
+      style:font-family={label.font_family ?? `sans-serif`}
+      fill="var(--scatter-point-label-fill, currentColor)"
+      dominant-baseline="middle"
+      class="label-text"
+    >
+      {label.text}
+    </text>
+  {/if}
+</g>
+
+<style>
+  .marker {
+    transition: var(--scatter-point-transition, all 0.2s);
+  }
+  .marker.is-hovered {
+    transform: scale(var(--hover-scale));
+    stroke: var(--hover-stroke);
+    stroke-width: var(--hover-stroke-width);
+    filter: brightness(var(--hover-brightness));
+  }
+  .marker.is-dimmed {
+    opacity: var(--scatter-point-dimmed-opacity, 0.25);
+  }
+  .effect-ring {
+    pointer-events: none;
+    animation: ring-pulse var(--effect-ring-duration, 1s) ease-in-out
+      var(--effect-ring-iterations, infinite);
+  }
+  .effect-ring.pulse {
+    --effect-ring-duration: 1.2s;
+  }
+  .effect-ring.glow {
+    --effect-ring-duration: 1.5s;
+    filter: blur(3px);
+  }
+  @keyframes ring-pulse {
+    0%, 100% {
+      opacity: 0.3;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.7;
+      transform: scale(1.2);
+    }
+  }
+  .label-text {
+    pointer-events: var(--scatter-point-label-pointer-events, none);
+  }
+  .leader-line {
+    pointer-events: none;
+  }
+</style>