matterviz 0.3.2 → 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: "hovered_point" | "scene" | "camera" | "orbit_controls";
+    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(): "hovered_point" | "scene" | "camera" | "orbit_controls";
+    bindings(): "camera" | "hovered_point" | "scene" | "orbit_controls";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/plot/ScatterPlotControls.svelte

@@ -1,28 +1,68 @@
-<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({}), x2_axis = $bindable({}), y_axis = $bindable({}), y2_axis = $bindable({}), display = $bindable({}), styles = $bindable({}), selected_series_idx = $bindable(0), on_touch, children, ...rest } = $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) => 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(() => {
-    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 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)
+
+  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) => {
+    const key = (target as Element)?.closest(`[data-key]`)?.getAttribute(`data-key`)
+    if (key) on_touch?.(key)
+  }
 </script>
 
 <PlotControls

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" | "x2_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>;

package/dist/plot/SpacegroupBarPlot.svelte

@@ -1,112 +1,169 @@
-<script lang="ts">import { format_num, format_value } from '../labels';
-import { BarPlot } from './';
-import * as symmetry from '../symmetry';
-import * as spg from '../symmetry/spacegroups';
-import { SvelteMap } from 'svelte/reactivity';
-// Merge tick config with default rotation, preserving user overrides
-const with_rotation = (tick, default_rot) => ({
+<script lang="ts">
+  import { format_num, format_value } from '../labels'
+  import type { BarHandlerProps, BarSeries, TickConfig } from './'
+  import { BarPlot } from './'
+  import type { CrystalSystem } from '../symmetry'
+  import * as symmetry from '../symmetry'
+  import * as spg from '../symmetry/spacegroups'
+  import type { ComponentProps } from 'svelte'
+  import { SvelteMap } from 'svelte/reactivity'
+
+  // Merge tick config with default rotation, preserving user overrides
+  const with_rotation = (
+    tick: TickConfig | undefined,
+    default_rot: number,
+  ): TickConfig => ({
     ...tick,
     label: { ...tick?.label, rotation: tick?.label?.rotation ?? default_rot },
-});
-const MAX_SPACEGROUP = 230;
-let { data, show_counts = true, orientation = `vertical`, x_axis = {}, y_axis = {}, ...rest } = $props();
-// Normalize input data to space group numbers
-const normalized_data = $derived(data.map(spg.normalize_spacegroup).filter((sg) => sg !== null));
-// Compute histogram of space group numbers
-const histogram = $derived.by(() => {
-    const hist = new SvelteMap();
+  })
+
+  const MAX_SPACEGROUP = 230
+  let {
+    data,
+    show_counts = true,
+    orientation = `vertical`,
+    x_axis = {},
+    y_axis = {},
+    ...rest
+  }: ComponentProps<typeof BarPlot> & {
+    data: (number | string)[]
+    show_counts?: boolean
+  } = $props()
+
+  // Normalize input data to space group numbers
+  const normalized_data = $derived(
+    data.map(spg.normalize_spacegroup).filter((sg): sg is number => sg !== null),
+  )
+
+  // Compute histogram of space group numbers
+  const histogram = $derived.by(() => {
+    const hist = new SvelteMap<number, number>()
+
     // Count occurrences
     for (const sg of normalized_data) {
-        hist.set(sg, (hist.get(sg) ?? 0) + 1);
+      hist.set(sg, (hist.get(sg) ?? 0) + 1)
     }
-    return hist;
-});
-// Group counts by crystal system
-const crystal_system_stats = $derived.by(() => {
-    const stats = new SvelteMap();
+
+    return hist
+  })
+
+  // Group counts by crystal system
+  const crystal_system_stats = $derived.by(() => {
+    const stats = new SvelteMap<
+      CrystalSystem,
+      { count: number; spacegroups: number[] }
+    >()
+
     for (const system of symmetry.CRYSTAL_SYSTEMS) {
-        stats.set(system, { count: 0, spacegroups: [] });
+      stats.set(system, { count: 0, spacegroups: [] })
     }
+
     for (const [sg, count] of histogram) {
-        const system = spg.spacegroup_to_crystal_sys(sg);
-        if (system) {
-            const stat = stats.get(system);
-            stat.count += count;
-            stat.spacegroups.push(sg);
-        }
+      const system = spg.spacegroup_to_crystal_sys(sg)
+      if (!system) continue
+      const stat = stats.get(system)
+      if (!stat) continue
+      stat.count += count
+      stat.spacegroups.push(sg)
     }
-    return stats;
-});
-// Create sorted list of space groups for x-axis
-const sorted_spacegroups = $derived(Array.from(histogram.keys()).sort((a, b) => a - b));
-// Smart tick selection: thin out ticks for dense data
-const x_axis_ticks = $derived.by(() => {
-    const non_zero_count = sorted_spacegroups.filter((sg) => (histogram.get(sg) ?? 0) > 0).length;
+
+    return stats
+  })
+
+  // Create sorted list of space groups for x-axis
+  const sorted_spacegroups = $derived(
+    Array.from(histogram.keys()).sort((a, b) => a - b),
+  )
+
+  // Smart tick selection: thin out ticks for dense data
+  const x_axis_ticks = $derived.by(() => {
+    const non_zero_count = sorted_spacegroups.filter(
+      (sg) => (histogram.get(sg) ?? 0) > 0,
+    ).length
+
     // If data is dense (>40 space groups with data), show only multiples of 5
     return non_zero_count > 40
-        ? sorted_spacegroups.filter((sg) => sg % 5 === 0)
-        : sorted_spacegroups;
-});
-// Build BarSeries - one series per crystal system for proper coloring
-const bar_series = $derived.by(() => {
-    const series_by_system = new SvelteMap();
+      ? sorted_spacegroups.filter((sg) => sg % 5 === 0)
+      : sorted_spacegroups
+  })
+
+  // Build BarSeries - one series per crystal system for proper coloring
+  const bar_series = $derived.by<BarSeries[]>(() => {
+    const series_by_system = new SvelteMap<
+      CrystalSystem,
+      { x: number[]; y: number[] }
+    >()
+
     // Group data by crystal system
     for (const sg of sorted_spacegroups) {
-        const system = spg.spacegroup_to_crystal_sys(sg);
-        if (system) {
-            let series = series_by_system.get(system);
-            if (!series) {
-                series = { x: [], y: [] };
-                series_by_system.set(system, series);
-            }
-            series.x.push(sg);
-            series.y.push(histogram.get(sg) ?? 0);
+      const system = spg.spacegroup_to_crystal_sys(sg)
+      if (system) {
+        let series = series_by_system.get(system)
+        if (!series) {
+          series = { x: [], y: [] }
+          series_by_system.set(system, series)
         }
+        series.x.push(sg)
+        series.y.push(histogram.get(sg) ?? 0)
+      }
     }
+
     // Convert to BarSeries array, maintaining order of crystal systems
-    const result = [];
+    const result: BarSeries[] = []
     for (const system of symmetry.CRYSTAL_SYSTEMS) {
-        const data = series_by_system.get(system);
-        if (data) {
-            const { x, y } = data;
-            const color = symmetry.CRYSTAL_SYSTEM_COLORS[system];
-            result.push({ x, y, color, label: system, bar_width: 0.9, visible: true });
-        }
+      const data = series_by_system.get(system)
+      if (data) {
+        const { x, y } = data
+        const color = symmetry.CRYSTAL_SYSTEM_COLORS[system]
+        result.push({ x, y, color, label: system, bar_width: 0.9, visible: true })
+      }
     }
-    return result;
-});
-// Always show full space group range (1-230)
-const x_range = [0.5, MAX_SPACEGROUP + 0.5];
-// Calculate crystal system region boundaries using full theoretical ranges
-const crystal_system_regions = $derived.by(() => {
-    const [range_min, range_max] = x_range;
+    return result
+  })
+
+  // Always show full space group range (1-230)
+  const x_range: [number, number] = [0.5, MAX_SPACEGROUP + 0.5]
+
+  // Calculate crystal system region boundaries using full theoretical ranges
+  const crystal_system_regions = $derived.by(() => {
+    const [range_min, range_max] = x_range
+
     return symmetry.CRYSTAL_SYSTEMS.map((system) => {
-        const [sg_start, sg_end] = symmetry.CRYSTAL_SYSTEM_RANGES[system];
-        const stats = crystal_system_stats.get(system);
-        const count = stats?.count ?? 0;
-        const color = symmetry.CRYSTAL_SYSTEM_COLORS[system];
-        return { system, sg_start, sg_end, count, color };
-    }).filter((region) => region.sg_end >= range_min && region.sg_start <= range_max);
-});
-const total_count = $derived(normalized_data.length);
-// Build axis configurations based on orientation
-const x_axis_config = $derived(orientation === `horizontal` ? { ...x_axis, label: x_axis.label ?? `Counts` } : {
-    ...x_axis,
-    label: x_axis.label ?? `International Spacegroup Number`,
-    range: x_range,
-    ticks: x_axis_ticks,
-    tick: with_rotation(x_axis.tick, 90), // Rotate ticks 90° to avoid overlap
-    label_shift: { x: 0, y: 20, ...x_axis.label_shift }, // Move label down for rotated ticks
-});
-const y_axis_config = $derived(orientation === `horizontal`
-    ? {
+      const [sg_start, sg_end] = symmetry.CRYSTAL_SYSTEM_RANGES[system]
+      const stats = crystal_system_stats.get(system)
+      const count = stats?.count ?? 0
+      const color = symmetry.CRYSTAL_SYSTEM_COLORS[system]
+      return { system, sg_start, sg_end, count, color }
+    }).filter(
+      (region) => region.sg_end >= range_min && region.sg_start <= range_max, // Only visible systems
+    )
+  })
+
+  const total_count = $derived(normalized_data.length)
+
+  // Build axis configurations based on orientation
+  const x_axis_config = $derived(
+    orientation === `horizontal` ? { ...x_axis, label: x_axis.label ?? `Counts` } : {
+      ...x_axis,
+      label: x_axis.label ?? `International Spacegroup Number`,
+      range: x_range,
+      ticks: x_axis_ticks,
+      tick: with_rotation(x_axis.tick, 90), // Rotate ticks 90° to avoid overlap
+      label_shift: { x: 0, y: 20, ...x_axis.label_shift }, // Move label down for rotated ticks
+    },
+  )
+
+  const y_axis_config = $derived(
+    orientation === `horizontal`
+      ? {
         ...y_axis,
         label: y_axis.label ?? `International Spacegroup Number`,
         range: x_range,
         ticks: x_axis_ticks,
         tick: with_rotation(y_axis.tick, 0),
-    }
-    : { ...y_axis, label: y_axis.label ?? `Counts` });
+      }
+      : { ...y_axis, label: y_axis.label ?? `Counts` },
+  )
 </script>
 
 {#snippet tooltip(info: BarHandlerProps)}