matterviz 0.3.5 → 0.3.6

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

@@ -0,0 +1,293 @@
+<script lang="ts">
+  import { format_num, format_value } from '$lib/labels'
+  import type { BarHandlerProps, BarSeries, TickConfig } from '$lib/plot'
+  import { BarPlot } from '$lib/plot'
+  import type { CrystalSystem } from '$lib/symmetry'
+  import * as symmetry from '$lib/symmetry'
+  import * as spg from '$lib/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,
+    show_legend = false,
+    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)
+    }
+
+    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: [] })
+    }
+
+    for (const [sg, count] of histogram) {
+      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
+
+    // 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<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)
+      }
+    }
+
+    // Convert to BarSeries array, maintaining order of crystal systems
+    const result: BarSeries[] = []
+    for (const system of symmetry.CRYSTAL_SYSTEMS) {
+      const system_data = series_by_system.get(system)
+      if (system_data) {
+        const { x, y } = system_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: [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, // 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` },
+  )
+</script>
+
+{#snippet tooltip(info: BarHandlerProps)}
+  {@const { x: sg, y: count } = info}
+  {@const system = spg.spacegroup_to_crystal_sys(sg)}
+  Space Group: {format_value(sg, `.0f`)} ({spg.SPACEGROUP_NUM_TO_SYMBOL[sg]})<br />
+  {#if system}
+    Crystal System: {system}<br />
+  {/if}
+  Count: {format_value(count, `.0f`)}
+{/snippet}
+
+{#snippet user_content({ width, height, x_scale_fn, y_scale_fn, pad }: {
+  width: number
+  height: number
+  x_scale_fn: (x: number) => number
+  y_scale_fn: (y: number) => number
+  pad: { t: number; b: number; l: number; r: number }
+})}
+  <g class="crystal-system-overlays" pointer-events="none">
+    {#each crystal_system_regions as region (region.system)}
+      {#if orientation === `vertical`}
+        {@const x_start = x_scale_fn(region.sg_start - 0.5)}
+        {@const x_end = x_scale_fn(region.sg_end + 0.5)}
+        {@const x_center = (x_start + x_end) / 2}
+        {@const rect_width = x_end - x_start}
+        <!-- Background colored rectangle (vertical mode) -->
+        <rect
+          x={x_start}
+          y={pad.t}
+          width={rect_width}
+          height={height - pad.t - pad.b}
+          fill={region.color}
+          opacity="0.15"
+          stroke={region.color}
+          stroke-width="1"
+          stroke-opacity="0.3"
+        />
+        <!-- Crystal system label (rotated 90 degrees) at top edge -->
+        <text
+          x={x_center}
+          y={pad.t + 15}
+          text-anchor="start"
+          font-size="14"
+          fill="var(--text-color, black)"
+          opacity="0.6"
+          transform="rotate(90, {x_center}, {pad.t + 15})"
+        >
+          {region.system}
+        </text>
+        <!-- Count annotation at top -->
+        {#if show_counts && total_count > 0}
+          {@const y_offset = region.system === `triclinic` ? -20 : -5}
+          <text
+            x={x_center}
+            y={pad.t + y_offset}
+            text-anchor="middle"
+            font-size="12"
+            fill="var(--text-color, black)"
+          >
+            {format_num(region.count, `,~`)} ({
+              format_num(region.count / total_count, `.1~%`)
+            })
+          </text>
+        {/if}
+      {:else}
+        {@const y_start = y_scale_fn(region.sg_end + 0.5)}
+        {@const y_end = y_scale_fn(region.sg_start - 0.5)}
+        {@const y_center = (y_start + y_end) / 2}
+        {@const rect_height = y_end - y_start}
+        <!-- Background colored rectangle (horizontal mode) -->
+        <rect
+          x={pad.l}
+          y={y_start}
+          width={width - pad.l - pad.r}
+          height={rect_height}
+          fill={region.color}
+          opacity="0.15"
+          stroke={region.color}
+          stroke-width="1"
+          stroke-opacity="0.3"
+        />
+        <!-- Crystal system label (horizontal) at left edge -->
+        <text
+          x={width - pad.r - 8}
+          y={y_center}
+          text-anchor="end"
+          dominant-baseline="central"
+          font-size="14"
+          fill="var(--text-color, black)"
+          opacity="0.6"
+        >
+          {region.system}
+        </text>
+        <!-- Count annotation at right -->
+        {#if show_counts && total_count > 0}
+          <text
+            x={width - pad.r + 5}
+            y={y_center}
+            text-anchor="start"
+            dominant-baseline="central"
+            font-size="12"
+            fill="var(--text-color, black)"
+          >
+            {format_num(region.count, `,~`)} ({
+              format_num(region.count / total_count, `.1~%`)
+            })
+          </text>
+        {/if}
+      {/if}
+    {/each}
+  </g>
+{/snippet}
+
+<BarPlot
+  {...rest}
+  series={bar_series}
+  {orientation}
+  mode="overlay"
+  x_axis={x_axis_config}
+  y_axis={y_axis_config}
+  {show_legend}
+  show_controls={false}
+  {tooltip}
+  {user_content}
+/>

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

@@ -0,0 +1,197 @@
+<script lang="ts">
+  import type { Surface3DConfig } from '$lib/plot/types'
+  import { T } from '@threlte/core'
+  import * as THREE from 'three'
+
+  let {
+    config,
+    x_range = [0, 1],
+    y_range = [0, 1],
+    z_range = [0, 1],
+    scene_x = 10,
+    scene_y = 10,
+    scene_z = 5,
+  }: {
+    config: Surface3DConfig
+    x_range?: [number, number]
+    y_range?: [number, number]
+    z_range?: [number, number]
+    scene_x?: number
+    scene_y?: number
+    scene_z?: number
+  } = $props()
+
+  // Normalize value to scene coordinates (centered around 0)
+  const normalize = (
+    value: number,
+    [min_val, max_val]: [number, number],
+    scene_size: number,
+  ): number => ((value - min_val) / (max_val - min_val || 1) - 0.5) * scene_size
+
+  // Parse color to THREE.Color with fallback
+  function parse_color(color: string): THREE.Color {
+    try {
+      return new THREE.Color(color)
+    } catch {
+      return new THREE.Color(0x4488ff)
+    }
+  }
+
+  // Calculate vertex color based on config
+  function get_vertex_color(
+    x_val: number,
+    y_val: number,
+    z_val: number,
+  ): THREE.Color {
+    if (config.color_fn) return parse_color(config.color_fn(x_val, y_val, z_val))
+    if (config.color) return parse_color(config.color)
+    // Default: color by z value (blue to red gradient)
+    const z_norm = (z_val - z_range[0]) / (z_range[1] - z_range[0] || 1)
+    return new THREE.Color().setHSL(0.66 - z_norm * 0.66, 0.8, 0.5)
+  }
+
+  // Add vertex position (with Y/Z swap for Three.js) and color to arrays
+  function add_vertex(
+    positions: number[],
+    colors: number[],
+    x_val: number,
+    y_val: number,
+    z_val: number,
+  ): void {
+    positions.push(
+      normalize(x_val, x_range, scene_x),
+      normalize(z_val, z_range, scene_z), // user Z → Three.js Y (vertical)
+      normalize(y_val, y_range, scene_y), // user Y → Three.js Z (depth)
+    )
+    const color = get_vertex_color(x_val, y_val, z_val)
+    colors.push(color.r, color.g, color.b)
+  }
+
+  // Build geometry from positions/colors arrays with optional grid indices
+  function build_geometry(
+    positions: number[],
+    colors: number[],
+    res_a?: number,
+    res_b?: number,
+    triangles?: number[][],
+  ): THREE.BufferGeometry {
+    const geom = new THREE.BufferGeometry()
+    geom.setAttribute(`position`, new THREE.Float32BufferAttribute(positions, 3))
+    geom.setAttribute(`color`, new THREE.Float32BufferAttribute(colors, 3))
+    // Set indices: either from explicit triangles or generate grid
+    if (triangles?.length) {
+      geom.setIndex(triangles.flat())
+    } else if (res_a && res_b && res_a >= 2 && res_b >= 2) {
+      const indices: number[] = []
+      for (let ib = 0; ib < res_b - 1; ib++) {
+        for (let ia = 0; ia < res_a - 1; ia++) {
+          const tl = ib * res_a + ia
+          indices.push(tl, tl + res_a, tl + 1, tl + 1, tl + res_a, tl + res_a + 1)
+        }
+      }
+      geom.setIndex(indices)
+    }
+    geom.computeVertexNormals()
+    return geom
+  }
+
+  // Parse resolution config into [res_a, res_b]
+  const get_resolution = (): [number, number] =>
+    Array.isArray(config.resolution)
+      ? config.resolution
+      : [config.resolution ?? 20, config.resolution ?? 20]
+
+  function create_geometry(): THREE.BufferGeometry | null {
+    const [res_a, res_b] = get_resolution()
+    const positions: number[] = []
+    const colors: number[] = []
+
+    if (config.type === `grid` && config.z_fn) {
+      if (res_a < 2 || res_b < 2) return new THREE.BufferGeometry()
+      const [x0, x1] = config.x_range ?? x_range
+      const [y0, y1] = config.y_range ?? y_range
+      const x_step = (x1 - x0) / (res_a - 1)
+      const y_step = (y1 - y0) / (res_b - 1)
+      for (let ib = 0; ib < res_b; ib++) {
+        for (let ia = 0; ia < res_a; ia++) {
+          const x_val = x0 + ia * x_step
+          const y_val = y0 + ib * y_step
+          add_vertex(positions, colors, x_val, y_val, config.z_fn(x_val, y_val))
+        }
+      }
+      return build_geometry(positions, colors, res_a, res_b)
+    }
+
+    if (config.type === `parametric` && config.parametric_fn) {
+      if (res_a < 2 || res_b < 2) return new THREE.BufferGeometry()
+      const [u0, u1] = config.u_range ?? [0, 1]
+      const [v0, v1] = config.v_range ?? [0, 1]
+      const u_step = (u1 - u0) / (res_a - 1)
+      const v_step = (v1 - v0) / (res_b - 1)
+      for (let ib = 0; ib < res_b; ib++) {
+        for (let ia = 0; ia < res_a; ia++) {
+          const pt = config.parametric_fn(u0 + ia * u_step, v0 + ib * v_step)
+          add_vertex(positions, colors, pt.x, pt.y, pt.z)
+        }
+      }
+      return build_geometry(positions, colors, res_a, res_b)
+    }
+
+    if (config.type === `triangulated` && config.points?.length) {
+      for (const pt of config.points) {
+        add_vertex(positions, colors, pt.x, pt.y, pt.z)
+      }
+      return build_geometry(positions, colors, undefined, undefined, config.triangles)
+    }
+
+    return null
+  }
+
+  // Geometry with proper disposal on change/unmount
+  let geometry: THREE.BufferGeometry | null = $state(null)
+  let wireframe_geometry: THREE.WireframeGeometry | null = $state(null)
+
+  $effect(() => {
+    const new_geom = create_geometry()
+    const new_wireframe = new_geom ? new THREE.WireframeGeometry(new_geom) : null
+    geometry = new_geom
+    wireframe_geometry = new_wireframe
+    return () => {
+      new_geom?.dispose()
+      new_wireframe?.dispose()
+    }
+  })
+
+  // Material properties
+  let is_transparent = $derived((config.opacity ?? 1) < 1)
+  let material_props = $derived({
+    transparent: is_transparent,
+    opacity: config.opacity ?? 1,
+    side: (config.double_sided ?? is_transparent)
+      ? THREE.DoubleSide
+      : THREE.FrontSide,
+    vertexColors: true,
+    depthWrite: true,
+  })
+
+  let wireframe_props = $derived({
+    color: config.wireframe_color ?? `#333`,
+    linewidth: config.wireframe_width ?? 1,
+    transparent: true,
+    opacity: 0.5,
+  })
+</script>
+
+{#if geometry}
+  <T.Mesh>
+    <T is={geometry} />
+    <T.MeshStandardMaterial {...material_props} />
+  </T.Mesh>
+
+  {#if config.wireframe && wireframe_geometry}
+    <T.LineSegments>
+      <T is={wireframe_geometry} />
+      <T.LineBasicMaterial {...wireframe_props} />
+    </T.LineSegments>
+  {/if}
+{/if}

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

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import type { Vec2 } from '$lib/math'
+  import type { Sides } from '$lib/plot/layout'
+  import { get_scale_type_name, type ScaleType } from '$lib/plot'
+
+  let {
+    display,
+    x_scale_fn,
+    x2_scale_fn,
+    y_scale_fn,
+    y2_scale_fn,
+    x_range,
+    x2_range,
+    y_range,
+    y2_range,
+    x_scale_type,
+    x2_scale_type,
+    y_scale_type,
+    y2_scale_type,
+    x_is_time = false,
+    x2_is_time = false,
+    has_x2 = false,
+    has_y2 = false,
+    width,
+    height,
+    pad,
+  }: {
+    display: {
+      x_zero_line?: boolean
+      x2_zero_line?: boolean
+      y_zero_line?: boolean
+      y2_zero_line?: boolean
+    }
+    x_scale_fn: (val: number) => number
+    x2_scale_fn?: (val: number) => number
+    y_scale_fn: (val: number) => number
+    y2_scale_fn?: (val: number) => number
+    x_range: Vec2
+    x2_range?: Vec2
+    y_range: Vec2
+    y2_range?: Vec2
+    x_scale_type?: ScaleType
+    x2_scale_type?: ScaleType
+    y_scale_type?: ScaleType
+    y2_scale_type?: ScaleType
+    x_is_time?: boolean
+    x2_is_time?: boolean
+    has_x2?: boolean
+    has_y2?: boolean
+    width: number
+    height: number
+    pad: Required<Sides>
+  } = $props()
+
+  const spans_zero = (range: Vec2): boolean =>
+    Math.min(range[0], range[1]) <= 0 && Math.max(range[0], range[1]) >= 0
+</script>
+
+{#if display.x_zero_line && get_scale_type_name(x_scale_type) !== `log` &&
+    !x_is_time && spans_zero(x_range)}
+  {@const zero_x = x_scale_fn(0)}
+  {#if isFinite(zero_x)}
+    <line class="zero-line" x1={zero_x} x2={zero_x} y1={pad.t} y2={height - pad.b} />
+  {/if}
+{/if}
+
+{#if display.x2_zero_line && has_x2 && x2_scale_fn && x2_range &&
+    get_scale_type_name(x2_scale_type) !== `log` && !x2_is_time && spans_zero(x2_range)}
+  {@const zero_x2 = x2_scale_fn(0)}
+  {#if isFinite(zero_x2)}
+    <line class="zero-line" x1={zero_x2} x2={zero_x2} y1={pad.t} y2={height - pad.b} />
+  {/if}
+{/if}
+
+{#if display.y_zero_line && get_scale_type_name(y_scale_type) !== `log` &&
+    spans_zero(y_range)}
+  {@const zero_y = y_scale_fn(0)}
+  {#if isFinite(zero_y)}
+    <line class="zero-line" x1={pad.l} x2={width - pad.r} y1={zero_y} y2={zero_y} />
+  {/if}
+{/if}
+
+{#if display.y2_zero_line && has_y2 && y2_scale_fn && y2_range &&
+    get_scale_type_name(y2_scale_type) !== `log` && spans_zero(y2_range)}
+  {@const zero_y2 = y2_scale_fn(0)}
+  {#if isFinite(zero_y2)}
+    <line class="zero-line" x1={pad.l} x2={width - pad.r} y1={zero_y2} y2={zero_y2} />
+  {/if}
+{/if}
+
+<style>
+  .zero-line {
+    stroke: var(--plot-zero-line-color, light-dark(black, white));
+    stroke-width: var(--plot-zero-line-width, 1);
+    opacity: var(--plot-zero-line-opacity, 0.3);
+  }
+</style>

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { Point2D } from '$lib/math'
+
+  let { start, current }: { start: Point2D | null; current: Point2D | null } = $props()
+</script>
+
+{#if start && current && isFinite(start.x) && isFinite(start.y) &&
+    isFinite(current.x) && isFinite(current.y)}
+  {@const x = Math.min(start.x, current.x)}
+  {@const y = Math.min(start.y, current.y)}
+  {@const rect_width = Math.abs(start.x - current.x)}
+  {@const rect_height = Math.abs(start.y - current.y)}
+  <rect class="zoom-rect" {x} {y} width={rect_width} height={rect_height} />
+{/if}
+
+<style>
+  .zoom-rect {
+    fill: var(--plot-zoom-rect-fill, rgba(100, 100, 255, 0.2));
+    stroke: var(--plot-zoom-rect-stroke, rgba(100, 100, 255, 0.8));
+    stroke-width: var(--plot-zoom-rect-stroke-width, 1);
+    pointer-events: none;
+  }
+</style>