matterviz 0.1.0

package/dist/plot/ScatterPoint.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">import { symbol_map } from './';
+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, origin = { x: 0, y: 0 }, is_hovered = false, ...rest } = $props();
+// get the SVG path data as 'd' attribute
+function get_symbol_path() {
+    const symbol_type = symbol_map[style.symbol_type ?? `Circle`] ??
+        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 = {
+    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}
+>
+  <path
+    d={marker_path}
+    stroke={style.stroke ?? `transparent`}
+    stroke-width={style.stroke_width ?? 1}
+    style:fill-opacity={style.fill_opacity}
+    style:stroke-opacity={style.stroke_opacity}
+    style:fill="var(--point-fill-color, {style.fill ?? `black`})"
+    class="marker"
+    class:is-hovered={is_hovered && (hover.enabled ?? true)}
+  />
+  {#if label.text}
+    <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`}
+      style: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));
+  }
+  .label-text {
+    pointer-events: var(--scatter-point-label-pointer-events, none);
+  }
+</style>

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

@@ -0,0 +1,17 @@
+import type { HoverStyle, LabelStyle, Point, PointStyle, XyObj } from './';
+import { type TweenedOptions } from 'svelte/motion';
+interface Props {
+    x: number;
+    y: number;
+    style?: PointStyle;
+    hover?: HoverStyle;
+    label?: LabelStyle;
+    offset?: Point[`offset`];
+    point_tween?: TweenedOptions<XyObj>;
+    origin?: XyObj;
+    is_hovered?: boolean;
+    [key: string]: unknown;
+}
+declare const ScatterPoint: import("svelte").Component<Props, {}, "">;
+type ScatterPoint = ReturnType<typeof ScatterPoint>;
+export default ScatterPoint;

package/dist/plot/index.d.ts

@@ -0,0 +1,168 @@
+import type { SimulationNodeDatum } from 'd3-force';
+import type { SymbolType } from 'd3-shape';
+import * as d3_symbols from 'd3-shape';
+import type { ComponentProps } from 'svelte';
+import { type TweenedOptions } from 'svelte/motion';
+import type ColorBar from './ColorBar.svelte';
+import PlotLegend from './PlotLegend.svelte';
+export { default as ColorBar } from './ColorBar.svelte';
+export { default as ColorScaleSelect } from './ColorScaleSelect.svelte';
+export { default as ElementScatter } from './ElementScatter.svelte';
+export { default as Line } from './Line.svelte';
+export { default as PlotLegend } from './PlotLegend.svelte';
+export { default as ScatterPlot } from './ScatterPlot.svelte';
+export { default as ScatterPlotControls } from './ScatterPlotControls.svelte';
+export { default as ScatterPoint } from './ScatterPoint.svelte';
+export type XyObj = {
+    x: number;
+    y: number;
+};
+export type Sides = {
+    t?: number;
+    b?: number;
+    l?: number;
+    r?: number;
+};
+export type D3Symbol = keyof typeof d3_symbols & `symbol${Capitalize<string>}`;
+export type D3SymbolName = Exclude<D3Symbol extends `symbol${infer Name}` ? Name : never, ``>;
+export declare const symbol_names: D3SymbolName[];
+export declare const symbol_map: Record<D3SymbolName, SymbolType>;
+export declare const line_types: readonly ["solid", "dashed", "dotted"];
+export type LineType = (typeof line_types)[number];
+export type Point = {
+    x: number;
+    y: number;
+    metadata?: {
+        [key: string]: unknown;
+    };
+    offset?: XyObj;
+};
+export interface PointStyle {
+    fill?: string;
+    radius?: number;
+    stroke?: string;
+    stroke_width?: number;
+    stroke_opacity?: number;
+    fill_opacity?: number;
+    symbol_type?: D3SymbolName;
+    symbol_size?: number | null;
+    shape?: string;
+}
+export interface HoverStyle {
+    enabled?: boolean;
+    scale?: number;
+    stroke?: string;
+    stroke_width?: number;
+    brightness?: number;
+}
+export interface LabelStyle {
+    text?: string;
+    offset?: XyObj;
+    font_size?: string;
+    font_family?: string;
+    auto_placement?: boolean;
+}
+export interface PlotPoint extends Point {
+    color_value?: number | null;
+    metadata?: Record<string, unknown>;
+    point_style?: PointStyle;
+    point_hover?: HoverStyle;
+    point_label?: LabelStyle;
+    point_offset?: XyObj;
+    point_tween?: TweenedOptions<XyObj>;
+}
+export interface DataSeries {
+    x: readonly number[];
+    y: readonly number[];
+    markers?: `line` | `points` | `line+points`;
+    y_axis?: `y1` | `y2`;
+    color_values?: (number | null)[] | null;
+    size_values?: readonly (number | null)[] | null;
+    metadata?: Record<string, unknown>[] | Record<string, unknown>;
+    point_style?: PointStyle[] | PointStyle;
+    point_hover?: HoverStyle[] | HoverStyle;
+    point_label?: LabelStyle[] | LabelStyle;
+    point_offset?: XyObj[] | XyObj;
+    point_tween?: TweenedOptions<XyObj>;
+    visible?: boolean;
+    label?: string;
+    unit?: string;
+    line_style?: {
+        stroke?: string;
+        stroke_width?: number;
+        line_dash?: string;
+    };
+}
+export interface InternalPoint extends PlotPoint {
+    series_idx: number;
+    point_idx: number;
+    size_value?: number | null;
+}
+export type TooltipProps = {
+    x: number;
+    y: number;
+    cx: number;
+    cy: number;
+    x_formatted: string;
+    y_formatted: string;
+    metadata?: Record<string, unknown>;
+    color_value?: number | null;
+    label?: string | null;
+};
+export type TimeInterval = `day` | `month` | `year`;
+export type ScaleType = `linear` | `log`;
+export type QuadrantCounts = {
+    top_left: number;
+    top_right: number;
+    bottom_left: number;
+    bottom_right: number;
+};
+export interface LabelNode extends SimulationNodeDatum {
+    id: string;
+    anchor_x: number;
+    anchor_y: number;
+    point_node: InternalPoint;
+    label_width: number;
+    label_height: number;
+}
+export interface LabelPlacementConfig {
+    collision_strength: number;
+    link_strength: number;
+    link_distance: number;
+    placement_ticks: number;
+    link_distance_range?: [number | null, number | null];
+}
+export type HoverConfig = {
+    threshold_px: number;
+};
+export interface AnchorNode extends SimulationNodeDatum {
+    id: string;
+    fx: number;
+    fy: number;
+    point_radius: number;
+    show_color_bar?: boolean;
+    color_bar?: ComponentProps<typeof ColorBar> | null;
+    label_placement_config?: Partial<LabelPlacementConfig>;
+}
+export type LegendConfig = Omit<ComponentProps<typeof PlotLegend>, `series_data` | `on_toggle` | `on_drag_start` | `on_drag` | `on_drag_end`> & {
+    margin?: number | Sides;
+    tween?: TweenedOptions<XyObj>;
+    responsive?: boolean;
+    draggable?: boolean;
+};
+export declare const cells_3x3: readonly ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"];
+export declare const corner_cells: readonly ["top-left", "top-right", "bottom-left", "bottom-right"];
+export type Cell3x3 = (typeof cells_3x3)[number];
+export type Corner = (typeof corner_cells)[number];
+export interface LegendItem {
+    label: string;
+    visible: boolean;
+    series_idx: number;
+    display_style: {
+        symbol_type?: D3SymbolName;
+        symbol_color?: string;
+        line_color?: string;
+        line_dash?: string;
+    };
+}
+export declare const LOG_MIN_EPS = 1e-9;

package/dist/plot/index.js

@@ -0,0 +1,46 @@
+import * as d3_symbols from 'd3-shape';
+import {} from 'svelte/motion';
+import PlotLegend from './PlotLegend.svelte';
+export { default as ColorBar } from './ColorBar.svelte';
+export { default as ColorScaleSelect } from './ColorScaleSelect.svelte';
+export { default as ElementScatter } from './ElementScatter.svelte';
+export { default as Line } from './Line.svelte';
+export { default as PlotLegend } from './PlotLegend.svelte';
+export { default as ScatterPlot } from './ScatterPlot.svelte';
+export { default as ScatterPlotControls } from './ScatterPlotControls.svelte';
+export { default as ScatterPoint } from './ScatterPoint.svelte';
+export const symbol_names = [
+    ...d3_symbols.symbolsFill,
+    ...d3_symbols.symbolsStroke,
+].map((sym) => {
+    // Attempt to find the key associated with this symbol function object
+    for (const key in d3_symbols) {
+        if (Object.prototype.hasOwnProperty.call(d3_symbols, key) &&
+            d3_symbols[key] === sym) {
+            if (key.match(/symbol[A-Z]/))
+                return key.substring(6);
+        }
+    }
+});
+export const symbol_map = Object.fromEntries(symbol_names.map((name) => [name, d3_symbols[`symbol${name}`]]));
+export const line_types = [`solid`, `dashed`, `dotted`];
+// Define grid cell identifiers
+export const cells_3x3 = [
+    `top-left`,
+    `top-center`,
+    `top-right`,
+    `middle-left`,
+    `middle-center`,
+    `middle-right`,
+    `bottom-left`,
+    `bottom-center`,
+    `bottom-right`,
+];
+export const corner_cells = [
+    `top-left`,
+    `top-right`,
+    `bottom-left`,
+    `bottom-right`,
+];
+// Small value to substitute for non-positive minimum in log scales
+export const LOG_MIN_EPS = 1e-9;

package/dist/state.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Category, ChemicalElement } from './';
+import { default_category_colors, default_element_colors } from './colors';
+export declare const selected: {
+    category: Category | null;
+    element: ChemicalElement | null;
+    last_element: ChemicalElement | null;
+    heatmap_key: keyof ChemicalElement | null;
+};
+export declare const colors: {
+    category: typeof default_category_colors;
+    element: typeof default_element_colors;
+};

package/dist/state.svelte.js

@@ -0,0 +1,11 @@
+import { default_category_colors, default_element_colors } from './colors';
+export const selected = $state({
+    category: null,
+    element: null,
+    last_element: null,
+    heatmap_key: null,
+});
+export const colors = $state({
+    category: { ...default_category_colors },
+    element: { ...default_element_colors },
+});

package/dist/structure/Bond.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">import { T } from '@threlte/core';
+import { CanvasTexture, Euler, Quaternion } from 'three';
+let { from = [0, 0, 0], to, offset = 0, thickness = 0.5, color = `white`, from_color, to_color, } = $props();
+const from_vec = new Vector3(...from);
+const to_vec = new Vector3(...to);
+const { position, rotation, height } = calc_bond(from_vec, to_vec, offset, thickness);
+// Create gradient texture when both colors are provided
+let gradient_texture = $derived.by(() => {
+    if (!from_color || !to_color)
+        return null;
+    // Create a canvas for the gradient
+    const canvas = document.createElement(`canvas`);
+    canvas.width = 1;
+    canvas.height = 256;
+    const ctx = canvas.getContext(`2d`);
+    // Create linear gradient along Y axis (cylinder height)
+    const gradient = ctx.createLinearGradient(0, 0, 0, 256);
+    gradient.addColorStop(0, to_color);
+    gradient.addColorStop(1, from_color);
+    // Fill the canvas with the gradient
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, 1, 256);
+    // Create texture from canvas
+    const texture = new CanvasTexture(canvas);
+    texture.needsUpdate = true;
+    return texture;
+});
+function calc_bond(from_vec, to_vec, offset, thickness) {
+    // find the axis of the the box
+    const delta_vec = to_vec.clone().sub(from_vec);
+    // length of the bond
+    const height = delta_vec.length();
+    // calculate position
+    let position;
+    if (offset === 0) {
+        position = from_vec.clone().add(delta_vec.multiplyScalar(0.5)).toArray();
+    }
+    else {
+        const offset_vec = new Vector3()
+            .crossVectors(delta_vec, new Vector3(1, 0, 0))
+            .normalize();
+        position = from_vec
+            .clone()
+            .add(delta_vec.multiplyScalar(0.5))
+            .add(offset_vec.multiplyScalar(offset * thickness * 2))
+            .toArray();
+    }
+    // calculate rotation
+    const quaternion = new Quaternion().setFromUnitVectors(new Vector3(0, 1, 0), delta_vec.normalize());
+    const rotation = new Euler().setFromQuaternion(quaternion).toArray();
+    // return results
+    return { height, position, rotation };
+}
+</script>
+
+{#if gradient_texture}
+  <!-- Use gradient material for bonds with two colors -->
+  <T.Mesh {position} {rotation} scale={[thickness, height, thickness]}>
+    <T.CylinderGeometry args={[thickness, thickness, 1, 16]} />
+    <T.MeshStandardMaterial map={gradient_texture} />
+  </T.Mesh>
+{:else}
+  <!-- Fallback to solid color -->
+  <T.Mesh {position} {rotation} scale={[thickness, height, thickness]}>
+    <T.CylinderGeometry args={[thickness, thickness, 1, 16]} />
+    <T.MeshStandardMaterial {color} />
+  </T.Mesh>
+{/if}

package/dist/structure/Bond.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Vector3 } from '..';
+interface Props {
+    from?: Vector3;
+    to: Vector3;
+    offset?: number;
+    thickness?: number;
+    color?: string;
+    from_color?: string;
+    to_color?: string;
+}
+declare const Bond: import("svelte").Component<Props, {}, "">;
+type Bond = ReturnType<typeof Bond>;
+export default Bond;

package/dist/structure/Lattice.svelte

@@ -0,0 +1,115 @@
+<!-- Export default values for use in other components -->
+<script lang="ts">import { add, scale } from '..';
+import { T } from '@threlte/core';
+import { BoxGeometry, EdgesGeometry, Euler, Matrix4, Quaternion, Vector3, } from 'three';
+import { CELL_DEFAULTS } from './index';
+let { matrix = undefined, cell_edge_color = CELL_DEFAULTS.color, cell_surface_color = CELL_DEFAULTS.color, cell_line_width = CELL_DEFAULTS.line_width, cell_edge_opacity = CELL_DEFAULTS.edge_opacity, cell_surface_opacity = CELL_DEFAULTS.surface_opacity, show_vectors = true, vector_colors = [`red`, `green`, `blue`], vector_origin = [-1, -1, -1], } = $props();
+let lattice_center = $derived(matrix ? scale(add(...matrix), 0.5) : [0, 0, 0]);
+// Extract line segments from EdgesGeometry for cylinder-based thick lines
+function get_edge_segments(edges_geometry) {
+    const positions = edges_geometry.getAttribute(`position`).array;
+    const segments = [];
+    for (let idx = 0; idx < positions.length; idx += 6) {
+        const start = new Vector3(positions[idx], positions[idx + 1], positions[idx + 2]);
+        const end = new Vector3(positions[idx + 3], positions[idx + 4], positions[idx + 5]);
+        segments.push([start, end]);
+    }
+    return segments;
+}
+// Calculate cylinder transform for a line segment
+function get_cylinder_transform(start, end) {
+    const direction = end.clone().sub(start);
+    const length = direction.length();
+    const center = start.clone().add(end).multiplyScalar(0.5);
+    // Calculate rotation to align cylinder with the line
+    const quaternion = new Quaternion().setFromUnitVectors(new Vector3(0, 1, 0), // cylinder default orientation
+    direction.normalize());
+    const euler = new Euler().setFromQuaternion(quaternion);
+    return {
+        position: center.toArray(),
+        rotation: euler.toArray().slice(0, 3),
+        length,
+    };
+}
+</script>
+
+{#if matrix}
+  {#key matrix}
+    {@const shear_matrix = new Matrix4().makeBasis(
+    new Vector3(...matrix[0]),
+    new Vector3(...matrix[1]),
+    new Vector3(...matrix[2]),
+  )}
+    {@const box_geometry = new BoxGeometry(1, 1, 1).applyMatrix4(shear_matrix)}
+
+    <!-- Render wireframe edges if edge opacity > 0 -->
+    {#if cell_edge_opacity > 0}
+      {@const edges_geometry = new EdgesGeometry(box_geometry)}
+      {@const edge_segments = get_edge_segments(edges_geometry)}
+
+      <!-- Use cylinders for thick wireframe lines -->
+      <T.Group position={lattice_center}>
+        {#each edge_segments as [start, end], idx (idx)}
+          {@const { position, rotation, length } = get_cylinder_transform(start, end)}
+          <T.Mesh {position} {rotation}>
+            <T.CylinderGeometry
+              args={[cell_line_width * 0.01, cell_line_width * 0.01, length, 8]}
+            />
+            <T.MeshStandardMaterial
+              color={cell_edge_color}
+              opacity={cell_edge_opacity}
+              transparent
+            />
+          </T.Mesh>
+        {/each}
+      </T.Group>
+    {/if}
+
+    <!-- Render transparent surfaces if surface opacity > 0 -->
+    {#if cell_surface_opacity > 0}
+      <T.Mesh geometry={box_geometry} position={lattice_center}>
+        <T.MeshStandardMaterial
+          color={cell_surface_color}
+          opacity={cell_surface_opacity}
+          transparent
+        />
+      </T.Mesh>
+    {/if}
+
+    <!-- NOTE below is an untested fix for the lattice vectors being much too small when deployed even though they look correct in local dev -->
+
+    {#if show_vectors}
+      <T.Group position={vector_origin}>
+        {#each matrix as vec, idx (vec)}
+          {@const vector_length = Math.sqrt(vec[0] ** 2 + vec[1] ** 2 + vec[2] ** 2)}
+          {@const shaft_length = vector_length * 0.85}
+          <!-- Shaft goes to 85% of vector length -->
+          {@const tip_start_position = scale(vec, 0.85) as Vec3}
+          <!-- Calculate rotation to align with vector direction -->
+          {@const quaternion = new Quaternion().setFromUnitVectors(
+      new Vector3(0, 1, 0), // Default up direction for cylinder/cone
+      new Vector3(...vec).normalize(),
+    )}
+          {@const rotation = new Euler()
+      .setFromQuaternion(quaternion)
+      .toArray()
+      .slice(0, 3) as Vec3}
+
+          <!-- Arrow shaft - position at center of shaft length -->
+          {@const shaft_center = scale(vec, 0.425) as Vec3}
+          <!-- Center at 42.5% = half of 85% -->
+          <T.Mesh position={shaft_center} {rotation}>
+            <T.CylinderGeometry args={[0.05, 0.05, shaft_length, 16]} />
+            <T.MeshStandardMaterial color={vector_colors[idx]} />
+          </T.Mesh>
+
+          <!-- Arrow tip -->
+          <T.Mesh position={tip_start_position} {rotation}>
+            <T.ConeGeometry args={[0.15, vector_length * 0.15, 16]} />
+            <T.MeshStandardMaterial color={vector_colors[idx]} />
+          </T.Mesh>
+        {/each}
+      </T.Group>
+    {/if}
+  {/key}
+{/if}

package/dist/structure/Lattice.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Matrix3x3, Vec3 } from '../math';
+interface Props {
+    matrix?: Matrix3x3 | undefined;
+    cell_edge_color?: string;
+    cell_surface_color?: string;
+    cell_line_width?: number;
+    cell_edge_opacity?: number;
+    cell_surface_opacity?: number;
+    show_vectors?: boolean;
+    vector_colors?: [string, string, string];
+    vector_origin?: Vec3;
+}
+declare const Lattice: import("svelte").Component<Props, {}, "">;
+type Lattice = ReturnType<typeof Lattice>;
+export default Lattice;