matterviz 0.3.1 → 0.3.3

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

@@ -51,7 +51,7 @@ declare function $$render<Metadata extends Record<string, unknown> = Record<stri
         height?: number;
     };
     exports: {};
-    bindings: "scene" | "camera" | "orbit_controls" | "hovered_point";
+    bindings: "camera" | "hovered_point" | "scene" | "orbit_controls";
     slots: {};
     events: {};
 };
@@ -59,7 +59,7 @@ declare class __sveltets_Render<Metadata extends Record<string, unknown> = Recor
     props(): ReturnType<typeof $$render<Metadata>>['props'];
     events(): ReturnType<typeof $$render<Metadata>>['events'];
     slots(): ReturnType<typeof $$render<Metadata>>['slots'];
-    bindings(): "scene" | "camera" | "orbit_controls" | "hovered_point";
+    bindings(): "camera" | "hovered_point" | "scene" | "orbit_controls";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/plot/ScatterPlotControls.svelte

@@ -1,46 +1,116 @@
-<script lang="ts">import { SettingsSection } from '../layout';
-import { PlotControls } from './';
-import { DEFAULTS } from '../settings';
-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({}), y_axis = $bindable({}), y2_axis = $bindable({}), display = $bindable({}), styles = $bindable({}), selected_series_idx = $bindable(0), on_touch, children, ...rest } = $props();
-let has_multiple_series = $derived(series.filter(Boolean).length > 1);
-$effect(() => {
-    styles.show_points ??= DEFAULTS.scatter.show_points;
-    styles.show_lines ??= DEFAULTS.scatter.show_lines;
-});
-const touch = ({ target }) => {
-    const key = target?.closest(`[data-key]`)?.getAttribute(`data-key`);
-    if (key)
-        on_touch?.(key);
-};
-</script>
+<script lang="ts">
+  import { SettingsSection } from '../layout'
+  import { PlotControls } from './'
+  import type {
+    DataSeries,
+    PlotConfig,
+    PlotControlsProps,
+    StyleOverrides,
+  } from './types'
+  import { DEFAULTS } from '../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)
 
-<PlotControls bind:x_axis bind:y_axis bind:y2_axis bind:display show_controls {...rest}>
-  {@render children?.({ x_axis, y_axis, y2_axis, display, styles, selected_series_idx })}
-  <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"
-  >
-    <label
-      {@attach tooltip({ content: `Toggle visibility of data points in the scatter plot` })}
+  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>]
     >
-      <input type="checkbox" bind:checked={styles.show_points} /> Show points
-    </label>
-    <label
-      {@attach tooltip({
-        content: `Toggle visibility of connecting lines between data points`,
-      })}
+  } = $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) => {
+    const key = (target as Element)?.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"
     >
-      <input type="checkbox" bind:checked={styles.show_lines} /> Show lines
-    </label>
-  </SettingsSection>
+      {#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) -->
@@ -59,8 +129,8 @@ const touch = ({ target }) => {
       </div>
     {/if}
 
-    <!-- Point Style Controls -->
-    {#if styles.show_points}
+    <!-- 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 ?? {}}
@@ -71,28 +141,36 @@ const touch = ({ target }) => {
         oninput={touch}
       >
         {#if styles.point}
-          <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>
-          <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 !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
@@ -159,8 +237,8 @@ const touch = ({ target }) => {
       </SettingsSection>
     {/if}
 
-    <!-- Line Style Controls -->
-    {#if styles.show_lines}
+    <!-- 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 ?? {}}
@@ -189,10 +267,12 @@ const touch = ({ target }) => {
               bind:value={styles.line.width}
             />
           </div>
-          <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 !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

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

@@ -12,6 +12,6 @@ type $$ComponentProps = Omit<PlotControlsProps, `children` | `post_children`> &
         } & Required<PlotConfig>
     ]>;
 };
-declare const ScatterPlotControls: import("svelte").Component<$$ComponentProps, {}, "display" | "x_axis" | "y_axis" | "y2_axis" | "selected_series_idx" | "styles">;
+declare const ScatterPlotControls: import("svelte").Component<$$ComponentProps, {}, "display" | "x_axis" | "y_axis" | "x2_axis" | "y2_axis" | "selected_series_idx" | "styles">;
 type ScatterPlotControls = ReturnType<typeof ScatterPlotControls>;
 export default ScatterPlotControls;

package/dist/plot/ScatterPoint.svelte

@@ -1,27 +1,61 @@
-<script lang="ts">import { symbol_map } from '../labels';
-import { DEFAULTS } from '../settings';
-import * as d3_symbols from 'd3-shape';
-import { symbol } from 'd3-shape';
-import { cubicOut } from 'svelte/easing';
-import { Tween } 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, ...rest } = $props();
-// get the SVG path data as 'd' attribute
-function get_symbol_path() {
-    const symbol_key = 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 = {
+<script lang="ts">
+  import { type D3SymbolName, symbol_map } from '../labels'
+  import type { HoverStyle, LabelStyle, Point } from './'
+  import type { PointStyle, TweenedOptions, XyObj } from './types'
+  import { DEFAULTS } from '../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 } 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,
+    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?: TweenedOptions<XyObj>
+    origin?: XyObj
+    is_hovered?: boolean
+    is_selected?: 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: TweenedOptions<XyObj> = {
     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 };
-});
+  }
+  // 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
@@ -61,11 +95,46 @@ $effect.pre(() => {
     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)}
+    {#if displacement > leader_line_threshold}
+      {@const marker_radius = style.radius ?? 3}
+      {@const angle = Math.atan2(offset_y, offset_x)}
+      {@const cos_a = Math.cos(angle)}
+      {@const sin_a = Math.sin(angle)}
+      {@const start_x = cos_a * (marker_radius + 2)}
+      {@const start_y = sin_a * (marker_radius + 2)}
+      {@const font_px = parseFloat(label.font_size ?? `10`) || 10}
+      {@const half_w = (label.text?.length ?? 1) * font_px * 0.2}
+      {@const half_h = font_px * 0.5}
+      {@const edge_dist = Math.min(
+        Math.abs(cos_a) > 0.01 ? half_w / Math.abs(cos_a) : Infinity,
+        Math.abs(sin_a) > 0.01 ? half_h / Math.abs(sin_a) : Infinity,
+      )}
+      {@const end_x = offset_x - cos_a * (edge_dist + 1)}
+      {@const end_y = offset_y - sin_a * (edge_dist + 1)}
+      {@const line_len = Math.hypot(end_x - start_x, end_y - start_y)}
+      {#if line_len > 6}
+      <line
+        x1={start_x}
+        y1={start_y}
+        x2={end_x}
+        y2={end_y}
+        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}
+    {/if}
     <text
-      x={label?.offset?.x ?? 10}
-      y={label?.offset?.y ?? 0}
-      style:font-size={label?.font_size ?? `10px`}
-      style:font-family={label?.font_family ?? `sans-serif`}
+      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"
@@ -110,4 +179,7 @@ $effect.pre(() => {
   .label-text {
     pointer-events: var(--scatter-point-label-pointer-events, none);
   }
+  .leader-line {
+    pointer-events: none;
+  }
 </style>

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

@@ -12,6 +12,7 @@ type $$ComponentProps = Omit<SVGAttributes<SVGGElement>, `style` | `offset` | `o
     origin?: XyObj;
     is_hovered?: boolean;
     is_selected?: boolean;
+    leader_line_threshold?: number;
 };
 declare const ScatterPoint: import("svelte").Component<$$ComponentProps, {}, "origin" | "point_tween">;
 type ScatterPoint = ReturnType<typeof ScatterPoint>;