matterviz 0.3.2 → 0.3.3

package/dist/isosurface/slice.js

@@ -74,9 +74,7 @@ export function sample_hkl_slice(volume, miller_indices, distance, n_points) {
     const unit_normal = math.normalize_vec3(plane_normal);
     // In-plane basis vectors
     const [u_vec, v_vec] = math.compute_in_plane_basis(unit_normal);
-    // Compute lattice inverse for Cartesian → fractional conversion.
-    // lattice rows are vectors [a, b, c], so cart = lattice^T * frac → frac = inv(lattice^T) * cart
-    const lattice_inv = math.matrix_inverse_3x3(math.transpose_3x3_matrix(lattice));
+    const cart_to_frac = math.create_cart_to_frac(lattice);
     // Project all 8 unit cell corners onto the (u, v) plane to find sampling bounds.
     // Corners are at fractional coords (0 or 1) for each axis.
     let u_min = Infinity;
@@ -86,9 +84,9 @@ export function sample_hkl_slice(volume, miller_indices, distance, n_points) {
     let normal_min = Infinity;
     let normal_max = -Infinity;
     for (let ci = 0; ci < 8; ci++) {
-        const fi = (ci & 1) ? 1 : 0;
-        const fj = (ci & 2) ? 1 : 0;
-        const fk = (ci & 4) ? 1 : 0;
+        const fi = ci & 1 ? 1 : 0;
+        const fj = ci & 2 ? 1 : 0;
+        const fk = ci & 4 ? 1 : 0;
         // Corner in Cartesian: frac * lattice
         const corner = [
             fi * lattice[0][0] + fj * lattice[1][0] + fk * lattice[2][0],
@@ -129,10 +127,7 @@ export function sample_hkl_slice(volume, miller_indices, distance, n_points) {
             const px = d_cartesian * unit_normal[0] + u_val * u_vec[0] + v_val * v_vec[0];
             const py = d_cartesian * unit_normal[1] + u_val * u_vec[1] + v_val * v_vec[1];
             const pz = d_cartesian * unit_normal[2] + u_val * u_vec[2] + v_val * v_vec[2];
-            // Convert to fractional coordinates: frac = lattice_inv * p
-            const fx = lattice_inv[0][0] * px + lattice_inv[0][1] * py + lattice_inv[0][2] * pz;
-            const fy = lattice_inv[1][0] * px + lattice_inv[1][1] * py + lattice_inv[1][2] * pz;
-            const fz = lattice_inv[2][0] * px + lattice_inv[2][1] * py + lattice_inv[2][2] * pz;
+            const [fx, fy, fz] = cart_to_frac([px, py, pz]);
             const val = trilinear_interpolate(grid, fx, fy, fz, periodic);
             data[row * width + col] = val;
             if (val < data_min)

package/dist/isosurface/types.d.ts

@@ -45,7 +45,7 @@ export declare function pad_periodic_grid(grid: number[][][], dims: Vec3, pad_fr
     dims: Vec3;
     offset: Vec3;
 };
-export declare function downsample_grid(grid: number[][][], dims: Vec3): {
+export declare function downsample_grid(grid: number[][][], dims: Vec3, max_points?: number): {
     grid: number[][][];
     dims: Vec3;
     factor: number;
@@ -53,3 +53,4 @@ export declare function downsample_grid(grid: number[][][], dims: Vec3): {
 export declare const DEFAULT_ISOSURFACE_SETTINGS: IsosurfaceSettings;
 export declare function auto_isosurface_settings(data_range: DataRange): IsosurfaceSettings;
 export declare function generate_layers(data_range: DataRange, n_layers: number): IsosurfaceLayer[];
+export declare function tile_volumetric_data(volume: VolumetricData, scaling: Vec3): VolumetricData;

package/dist/isosurface/types.js

@@ -1,3 +1,4 @@
+import { scale_lattice_matrix } from '../math';
 // Categorical palette for auto-coloring isosurface layers (Tailwind-inspired)
 export const LAYER_COLORS = [
     `#3b82f6`, // blue
@@ -15,8 +16,7 @@ export function grid_data_range(grid) {
     if (!grid.length || !grid[0]?.length || !grid[0][0]?.length) {
         return { min: 0, max: 0, abs_max: 0, mean: 0 };
     }
-    let min_val = Infinity;
-    let max_val = -Infinity;
+    let [min_val, max_val] = [Infinity, -Infinity];
     let sum = 0;
     let count = 0;
     for (const plane of grid) {
@@ -71,35 +71,41 @@ export function pad_periodic_grid(grid, dims, pad_fraction) {
 // Max total grid points before downsampling is applied for isosurface extraction.
 // 500K balances visual quality with interactive performance (<200ms marching cubes).
 const MAX_GRID_POINTS = 500_000;
-// Downsample a 3D volumetric grid to keep total point count under MAX_GRID_POINTS.
+// Downsample a 3D volumetric grid to keep total point count under a budget.
 // Uses block averaging to preserve data fidelity while reducing grid dimensions.
 // Returns original grid/dims if already within budget.
-export function downsample_grid(grid, dims) {
+export function downsample_grid(grid, dims, max_points = MAX_GRID_POINTS) {
     const [nx, ny, nz] = dims;
     const total = nx * ny * nz;
-    if (total <= MAX_GRID_POINTS)
+    if (total <= max_points)
         return { grid, dims, factor: 1 };
+    // Floor at 1 to avoid Infinity in cbrt(total/0)
+    max_points = Math.max(1, max_points);
     // Increase factor until the clamped output fits within budget.
     // A single cbrt step can overshoot for anisotropic grids where max(2,...)
     // clamping prevents a small axis from shrinking below 2.
     // clamp_dim: returns 1 for single-cell axes, otherwise clamps to [2, src]
     const clamp_dim = (src, fac) => Math.min(src, Math.max(2, Math.ceil(src / fac)));
-    let factor = Math.ceil(Math.cbrt(total / MAX_GRID_POINTS));
+    let factor = Math.ceil(Math.cbrt(total / max_points));
     let new_nx = clamp_dim(nx, factor);
     let new_ny = clamp_dim(ny, factor);
     let new_nz = clamp_dim(nz, factor);
-    while (new_nx * new_ny * new_nz > MAX_GRID_POINTS) {
+    while (new_nx * new_ny * new_nz > max_points) {
         factor++;
+        const prev_total = new_nx * new_ny * new_nz;
         new_nx = clamp_dim(nx, factor);
         new_ny = clamp_dim(ny, factor);
         new_nz = clamp_dim(nz, factor);
+        // dims hit their floor (2 per axis or 1 for single-cell) — stop to avoid infinite loop
+        if (new_nx * new_ny * new_nz === prev_total)
+            break;
     }
     // Proportional partitioning: evenly divides [0, n) into new_n non-empty blocks.
     // Unlike fixed-stride (ix * factor), this is safe when max(2,...) clamping
     // produces more output cells than ceil(n/factor) would — no empty blocks.
     const partition = (n_out, n_src) => Array.from({ length: n_out }, (_, idx) => [
-        Math.round(idx * n_src / n_out),
-        Math.round((idx + 1) * n_src / n_out),
+        Math.round((idx * n_src) / n_out),
+        Math.round(((idx + 1) * n_src) / n_out),
     ]);
     const x_ranges = partition(new_nx, nx);
     const y_ranges = partition(new_ny, ny);
@@ -149,9 +155,7 @@ export function auto_isosurface_settings(data_range) {
     return {
         ...DEFAULT_ISOSURFACE_SETTINGS,
         // Fall back to default isovalue for all-zero grids to keep controls usable
-        isovalue: data_range.abs_max > 0
-            ? data_range.abs_max * 0.2
-            : DEFAULT_ISOSURFACE_SETTINGS.isovalue,
+        isovalue: data_range.abs_max > 0 ? data_range.abs_max * 0.2 : DEFAULT_ISOSURFACE_SETTINGS.isovalue,
         show_negative: has_negatives,
     };
 }
@@ -176,3 +180,48 @@ export function generate_layers(data_range, n_layers) {
         };
     });
 }
+// Tile (repeat) volumetric data to fill a supercell.
+// Pre-downsamples the source grid when the tiled result would exceed MAX_GRID_POINTS
+// to avoid large temporary allocations. Returns the original volume unchanged for
+// [1,1,1] scaling.
+export function tile_volumetric_data(volume, scaling) {
+    const [sx, sy, sz] = scaling;
+    if (sx === 1 && sy === 1 && sz === 1)
+        return volume;
+    const total_cells = sx * sy * sz;
+    let src_grid = volume.grid;
+    let [nx, ny, nz] = volume.grid_dims;
+    // Pre-downsample source grid so the tiled result stays within budget.
+    // Clamp budget to 8 (minimum downsample output = 2^3) to prevent infinite
+    // loops in downsample_grid when total_cells is very large.
+    if (nx * ny * nz * total_cells > MAX_GRID_POINTS) {
+        const budget = Math.max(8, Math.floor(MAX_GRID_POINTS / total_cells));
+        const ds = downsample_grid(src_grid, [nx, ny, nz], budget);
+        src_grid = ds.grid;
+        [nx, ny, nz] = ds.dims;
+    }
+    const new_nx = nx * sx;
+    const new_ny = ny * sy;
+    const new_nz = nz * sz;
+    const new_grid = new Array(new_nx);
+    for (let ix = 0; ix < new_nx; ix++) {
+        const plane = new Array(new_ny);
+        const src_x = ix % nx;
+        for (let iy = 0; iy < new_ny; iy++) {
+            const row = new Array(new_nz);
+            const src_y = iy % ny;
+            const src_row = src_grid[src_x][src_y];
+            for (let iz = 0; iz < new_nz; iz++) {
+                row[iz] = src_row[iz % nz];
+            }
+            plane[iy] = row;
+        }
+        new_grid[ix] = plane;
+    }
+    return {
+        ...volume,
+        grid: new_grid,
+        grid_dims: [new_nx, new_ny, new_nz],
+        lattice: scale_lattice_matrix(volume.lattice, scaling),
+    };
+}

package/dist/labels.js

@@ -10,9 +10,13 @@ function name_for_symbol(sym) {
     }
     return null;
 }
-export const symbol_names = ([...new Set([...d3_symbols.symbolsFill, ...d3_symbols.symbolsStroke])]
-    .map(name_for_symbol).filter((n) => n !== null));
-export const symbol_map = Object.fromEntries(// Symbol lookup from d3-shape
+export const symbol_names = [
+    ...new Set([...d3_symbols.symbolsFill, ...d3_symbols.symbolsStroke]),
+]
+    .map(name_for_symbol)
+    .filter((n) => n !== null);
+export const symbol_map = Object.fromEntries(
+// Symbol lookup from d3-shape
 symbol_names.map((name) => [name, d3_symbols[`symbol${name}`]]));
 // Format a value for display with optional time formatting
 export function format_value(value, formatter) {
@@ -74,8 +78,7 @@ export const ELEM_HEATMAP_KEYS = [
     `melting_point`,
     `first_ionization`,
 ];
-export const ELEM_HEATMAP_LABELS = Object
-    .fromEntries(ELEM_HEATMAP_KEYS.map((key) => {
+export const ELEM_HEATMAP_LABELS = Object.fromEntries(ELEM_HEATMAP_KEYS.map((key) => {
     const [label, unit] = ELEM_PROPERTY_LABELS[key] ?? [];
     if (!label)
         throw `Unexpected missing label ${label}`;
@@ -142,7 +145,7 @@ export function format_fractional(value) {
             return glyph;
     }
     for (const [target, glyph] of FRACTION_GLYPHS) {
-        if (target !== 0 && Math.abs((1 - x) - target) < eps)
+        if (target !== 0 && Math.abs(1 - x - target) < eps)
             return glyph;
     }
     return format_num(value, `.4~`);
@@ -154,7 +157,7 @@ export function parse_si_float(value) {
     // Remove whitespace and commas
     const cleaned = value.trim().replace(/(\d),(\d)/g, `$1$2`);
     // Check if the value is a SI-formatted number (e.g. "1.23k", "4.56M", "789µ", "12n")
-    const match = cleaned.match(/^([-+]?\d*\.?\d+)\s*([yzafpnµmkMGTPEZY])?$/i);
+    const match = /^([-+]?\d*\.?\d+)\s*([yzafpnµmkMGTPEZY])?$/i.exec(cleaned);
     if (match) {
         const [, num_part, suffix] = match;
         let multiplier = 1;
@@ -197,7 +200,7 @@ export const ELEMENT_CATEGORIES = [
     `post-transition metal`,
     `transition metal`,
 ];
-// deno-fmt-ignore-next-line
+// oxfmt-ignore
 export const ELEM_SYMBOLS = [`H`, `He`, `Li`, `Be`, `B`, `C`, `N`, `O`, `F`, `Ne`, `Na`, `Mg`, `Al`, `Si`, `P`, `S`, `Cl`, `Ar`, `K`, `Ca`, `Sc`, `Ti`, `V`, `Cr`, `Mn`, `Fe`, `Co`, `Ni`, `Cu`, `Zn`, `Ga`, `Ge`, `As`, `Se`, `Br`, `Kr`, `Rb`, `Sr`, `Y`, `Zr`, `Nb`, `Mo`, `Tc`, `Ru`, `Rh`, `Pd`, `Ag`, `Cd`, `In`, `Sn`, `Sb`, `Te`, `I`, `Xe`, `Cs`, `Ba`, `La`, `Ce`, `Pr`, `Nd`, `Pm`, `Sm`, `Eu`, `Gd`, `Tb`, `Dy`, `Ho`, `Er`, `Tm`, `Yb`, `Lu`, `Hf`, `Ta`, `W`, `Re`, `Os`, `Ir`, `Pt`, `Au`, `Hg`, `Tl`, `Pb`, `Bi`, `Po`, `At`, `Rn`, `Fr`, `Ra`, `Ac`, `Th`, `Pa`, `U`, `Np`, `Pu`, `Am`, `Cm`, `Bk`, `Cf`, `Es`, `Fm`, `Md`, `No`, `Lr`, `Rf`, `Db`, `Sg`, `Bh`, `Hs`, `Mt`, `Ds`, `Rg`, `Cn`, `Nh`, `Fl`, `Mc`, `Lv`, `Ts`, `Og`];
 export const SUPERSCRIPT_MAP = {
     '0': `⁰`,

package/dist/layout/FullscreenToggle.svelte

@@ -1,5 +1,14 @@
-<script lang="ts">import Icon from '../Icon.svelte';
-let { fullscreen = $bindable(false), class: className, ...rest } = $props();
+<script lang="ts">
+  import Icon from '../Icon.svelte'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+
+  let {
+    fullscreen = $bindable(false),
+    class: className,
+    ...rest
+  }: HTMLButtonAttributes & {
+    fullscreen?: boolean
+  } = $props()
 </script>
 
 <button

package/dist/layout/InfoCard.svelte

@@ -1,13 +1,45 @@
-<script lang="ts">import { format_num } from '../labels';
-let { data = [], title = ``, fallback = ``, fmt = `.2f`, as = `section`, title_snippet, fallback_snippet, ...rest } = $props();
-let default_fmt = $derived(fmt); // rename fmt to default_fmt for internal use
+<script lang="ts">
+  import { format_num } from '../labels'
+  import { sanitize_html } from '../sanitize'
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  interface Props<T extends keyof HTMLElementTagNameMap = `section`>
+    extends HTMLAttributes<HTMLElementTagNameMap[T]> {
+    data?: {
+      title: string
+      value?: string | number | number[] | null
+      unit?: string
+      fmt?: string
+      condition?: boolean | number | null
+      tooltip?: string
+    }[]
+    title?: string
+    fallback?: string
+    fmt?: string
+    as?: T
+    title_snippet?: Snippet
+    fallback_snippet?: Snippet
+  }
+  let {
+    data = [],
+    title = ``,
+    fallback = ``,
+    fmt = `.2f`,
+    as = `section`,
+    title_snippet,
+    fallback_snippet,
+    ...rest
+  }: Props = $props()
+
+  let default_fmt = $derived(fmt) // rename fmt to default_fmt for internal use
 </script>
 
 <svelte:element this={as} {...rest} class="info-card {rest.class ?? ``}">
   {#if title || title_snippet}
     <h2>
       {#if title_snippet}{@render title_snippet()}{:else}
-        {@html title}
+        {@html sanitize_html(title)}
       {/if}
     </h2>
   {/if}
@@ -20,10 +52,10 @@ let default_fmt = $derived(fmt); // rename fmt to default_fmt for internal use
   }
     <div>
       <span class="title" {title}>
-        {@html title}
+        {@html sanitize_html(title)}
       </span>
       <strong title={tooltip ?? null}>
-        {@html typeof value == `number` ? format_num(value, fmt) : value}
+        {@html sanitize_html(typeof value == `number` ? format_num(value, fmt) : value)}
         {#if unit}
           <small>{unit}</small>
         {/if}

package/dist/layout/InfoTag.svelte

@@ -1,33 +1,64 @@
-<script lang="ts">import Icon from '../Icon.svelte';
-import { tooltip } from 'svelte-multiselect';
-let { label, value, copy_value, title, variant = `default`, size = `md`, removable = false, disabled = false, onclick, onremove, children, ...rest } = $props();
-let just_copied = $state(false);
-async function copy_to_clipboard() {
-    const to_copy = copy_value ?? value;
-    if (to_copy === undefined)
-        return;
-    await navigator.clipboard.writeText(String(to_copy));
-    just_copied = true;
-    setTimeout(() => (just_copied = false), 1000);
-}
-function handle_click(event) {
-    if (disabled)
-        return;
-    if (onclick)
-        onclick(event);
-    else
-        void copy_to_clipboard();
-}
-function handle_keydown(event) {
-    if (disabled || (event.key !== `Enter` && event.key !== ` `))
-        return;
-    event.preventDefault();
-    event.currentTarget?.click();
-}
-function handle_remove(event) {
-    event.stopPropagation();
-    onremove?.();
-}
+<script lang="ts">
+  import Icon from '../Icon.svelte'
+  import { sanitize_html } from '../sanitize'
+  import type { Snippet } from 'svelte'
+  import { tooltip } from 'svelte-multiselect'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import type { InfoTagSize, InfoTagVariant } from './index'
+
+  let {
+    label,
+    value,
+    copy_value,
+    title,
+    variant = `default`,
+    size = `md`,
+    removable = false,
+    disabled = false,
+    onclick,
+    onremove,
+    children,
+    ...rest
+  }: {
+    label: string // Label text (supports HTML)
+    value: string | number | undefined // Value to display (supports HTML)
+    copy_value?: string | number // Value to copy to clipboard (defaults to value)
+    title?: string // Tooltip text
+    variant?: InfoTagVariant // Visual variant for semantic meaning
+    size?: InfoTagSize // Size variant
+    removable?: boolean // Show remove/close button
+    disabled?: boolean // Disable interactions
+    onclick?: (event: MouseEvent) => void // Custom click handler (overrides copy-to-clipboard default)
+    onremove?: () => void // Callback when remove button is clicked
+    children?: Snippet<[]> // Additional content to render inside the tag
+  } & Omit<HTMLAttributes<HTMLSpanElement>, `onclick` | `onkeydown`> = $props()
+
+  let just_copied = $state(false)
+
+  async function copy_to_clipboard(): Promise<void> {
+    const to_copy = copy_value ?? value
+    if (to_copy === undefined) return
+    await navigator.clipboard.writeText(String(to_copy))
+    just_copied = true
+    setTimeout(() => (just_copied = false), 1000)
+  }
+
+  function handle_click(event: MouseEvent): void {
+    if (disabled) return
+    if (onclick) onclick(event)
+    else void copy_to_clipboard()
+  }
+
+  function handle_keydown(event: KeyboardEvent): void {
+    if (disabled || (event.key !== `Enter` && event.key !== ` `)) return
+    event.preventDefault()
+    ;(event.currentTarget as HTMLElement)?.click()
+  }
+
+  function handle_remove(event: MouseEvent): void {
+    event.stopPropagation()
+    onremove?.()
+  }
 </script>
 
 <span
@@ -42,8 +73,8 @@ function handle_remove(event) {
   aria-disabled={disabled}
   {...rest}
 >
-  {@html label}
-  <em>{@html value}</em>
+  {@html sanitize_html(label)}
+  <em>{@html sanitize_html(value)}</em>
   {#if just_copied}
     <Icon
       icon="Check"

package/dist/layout/PropertyFilter.svelte

@@ -1,50 +1,95 @@
-<script lang="ts">import Icon from '../Icon.svelte';
-import { Histogram } from '../plot';
-let { label, min_value = $bindable(), max_value = $bindable(), placeholders = {}, title, histogram_data, histogram_height = 30, histogram_color = `rgba(0, 0, 0, 0.2)`, histogram_position = `top`, log = false, disabled = false, unit, show_clear_button = true, onchange, onclear, ...rest } = $props();
-let show_histogram = $derived(histogram_position !== `none` && histogram_data?.length);
-// Active when either bound is set (undefined = unbounded)
-let active = $derived(min_value !== undefined || max_value !== undefined);
-let plain_label = $derived(label.replace(/<[^>]*>/g, ``));
-let filtered_data = $derived.by(() => {
-    if (!histogram_data)
-        return [];
+<script lang="ts">
+  import Icon from '../Icon.svelte'
+  import { sanitize_html } from '../sanitize'
+  import type { AxisConfig, DataSeries } from '../plot'
+  import { Histogram } from '../plot'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let {
+    label,
+    min_value = $bindable(),
+    max_value = $bindable(),
+    placeholders = {},
+    title,
+    histogram_data,
+    histogram_height = 30,
+    histogram_color = `rgba(0, 0, 0, 0.2)`,
+    histogram_position = `top`,
+    log = false,
+    disabled = false,
+    unit,
+    show_clear_button = true,
+    onchange,
+    onclear,
+    ...rest
+  }: {
+    label: string // Label text (supports HTML)
+    min_value?: number // Minimum value for filtering (undefined = unbounded)
+    max_value?: number // Maximum value for filtering (undefined = unbounded)
+    placeholders?: { min?: string; max?: string } // Placeholder text for min/max inputs
+    title?: string // Tooltip title for the label
+    histogram_data?: number[] // Data array for histogram visualization
+    histogram_height?: number // Height of histogram in pixels
+    histogram_color?: string // Color for histogram bars (unfilled data)
+    histogram_position?: `top` | `bottom` | `none` // Position of histogram relative to inputs, or 'none' to hide
+    log?: boolean // Use logarithmic scale for histogram y-axis
+    disabled?: boolean // Disable all inputs
+    unit?: string // Unit label to display after inputs
+    show_clear_button?: boolean // Show clear button when filters are active
+    onchange?: (min: number | undefined, max: number | undefined) => void // Callback when filter values change
+    onclear?: () => void // Callback when clear button is clicked (fires before onchange)
+  } & HTMLAttributes<HTMLDivElement> = $props()
+
+  let show_histogram = $derived(
+    histogram_position !== `none` && histogram_data?.length,
+  )
+
+  // Active when either bound is set (undefined = unbounded)
+  let active = $derived(min_value !== undefined || max_value !== undefined)
+  let plain_label = $derived(label.replace(/<[^>]*>/g, ``))
+
+  let filtered_data = $derived.by(() => {
+    if (!histogram_data) return []
     // undefined means unbounded (-Infinity for min, +Infinity for max)
-    const min = min_value ?? -Infinity;
-    const max = max_value ?? Infinity;
-    return histogram_data.filter((val) => val >= min && val <= max);
-});
-function onkeydown(event) {
+    const min = min_value ?? -Infinity
+    const max = max_value ?? Infinity
+    return histogram_data.filter((val) => val >= min && val <= max)
+  })
+
+  function onkeydown(event: KeyboardEvent): void {
     if (event.key === `Enter`) {
-        event.preventDefault();
-        event.target.blur();
-    }
-    else if (event.key === `Escape` && active) {
-        event.preventDefault();
-        clear_filter();
+      event.preventDefault()
+      ;(event.target as HTMLInputElement).blur()
+    } else if (event.key === `Escape` && active) {
+      event.preventDefault()
+      clear_filter()
     }
-}
-function clear_filter() {
-    min_value = max_value = undefined;
-    onclear?.();
-    onchange?.(undefined, undefined);
-}
-const axis_config = {
+  }
+
+  function clear_filter(): void {
+    min_value = max_value = undefined
+    onclear?.()
+    onchange?.(undefined, undefined)
+  }
+
+  const axis_config: AxisConfig = {
     ticks: 0,
     label: ``,
     grid_style: { style: `opacity: 0` },
     tick: { label: { inside: true } },
     color: `color-mix(in srgb, currentColor 60%, transparent)`,
-};
-// x: [] satisfies DataSeries type requirement; Histogram bins on y values only
-const series = $derived([
+  }
+
+  // x: [] satisfies DataSeries type requirement; Histogram bins on y values only
+  const series: DataSeries[] = $derived([
     { y: histogram_data ?? [], color: histogram_color, label: `All`, x: [] },
     {
-        y: filtered_data,
-        color: `var(--accent-color, #228be6)`,
-        label: `Filtered`,
-        x: [],
+      y: filtered_data,
+      color: `var(--accent-color, #228be6)`,
+      label: `Filtered`,
+      x: [],
     },
-]);
+  ])
 </script>
 
 {#snippet histogram_snippet()}
@@ -76,7 +121,7 @@ const series = $derived([
     {@render histogram_snippet()}
   {/if}
   <div class="filter-row">
-    <span {title} class="filter-label">{@html label}</span>
+    <span {title} class="filter-label">{@html sanitize_html(label)}</span>
     <div class="filter-inputs">
       <input
         bind:value={min_value}