matterviz 0.3.6 → 0.3.7

package/dist/heatmap-matrix/HeatmapMatrix.svelte.d.ts

@@ -0,0 +1,110 @@
+import type { D3InterpolateName } from '../colors';
+import type { AxisConfig } from '../plot';
+import { type ComponentProps, type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import HeatmapMatrixControls from './HeatmapMatrixControls.svelte';
+import type { AxisItem, CellContext, DomainMode, HeatmapExportFormat, HeatmapTooltipProp, LegendPosition, NormalizeMode, SymmetricMode } from './index';
+type CellValue = number | string | null;
+type SelectionMode = `single` | `multi` | `range`;
+type AxisOrderKey = `label` | `key` | `sort_value`;
+type AxisOrder = AxisOrderKey | ((a: AxisItem, b: AxisItem) => number);
+type CellPos = {
+    x_idx: number;
+    y_idx: number;
+};
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `onclick` | `ondblclick`> & {
+    x_items: AxisItem[];
+    y_items: AxisItem[];
+    values?: CellValue[][] | Record<string, Record<string, CellValue>>;
+    color_scale?: D3InterpolateName | ((val: number) => string);
+    color_scale_range?: [number | null, number | null];
+    color_overrides?: Record<string, string>;
+    missing_color?: string;
+    log?: boolean;
+    value_transform?: (value: number, ctx: {
+        x_item: AxisItem;
+        y_item: AxisItem;
+        x_idx: number;
+        y_idx: number;
+    }) => number | null;
+    normalize?: NormalizeMode;
+    domain_mode?: DomainMode;
+    quantile_clip?: [number, number];
+    show_legend?: boolean;
+    legend_position?: LegendPosition;
+    legend_label?: string;
+    legend_ticks?: number;
+    legend_format?: string;
+    active_cell?: {
+        x_idx: number;
+        y_idx: number;
+    } | null;
+    selected_cells?: CellPos[];
+    selection_mode?: SelectionMode;
+    pinned_cell?: CellPos | null;
+    tooltip_mode?: `hover` | `pinned` | `both`;
+    disabled?: boolean;
+    onclick?: (cell: CellContext) => void;
+    ondblclick?: (cell: CellContext) => void;
+    onselect?: (cells: CellPos[]) => void;
+    onpin?: (cell: CellPos | null) => void;
+    oncontextmenu?: (cell: CellContext, event: MouseEvent) => void;
+    enable_brush?: boolean;
+    onbrush?: (payload: {
+        x_range: [number, number];
+        y_range: [number, number];
+        cells: CellContext[];
+    }) => void;
+    tile_size?: string;
+    gap?: string;
+    hide_empty?: false | `compact` | `gaps`;
+    show_x_labels?: boolean;
+    show_y_labels?: boolean;
+    stagger_axis_labels?: boolean | `auto`;
+    symmetric?: SymmetricMode;
+    symmetric_label_position?: `diagonal` | `edge`;
+    label_style?: string;
+    x_order?: AxisOrder;
+    y_order?: AxisOrder;
+    highlight_x_keys?: string[];
+    highlight_y_keys?: string[];
+    search_query?: string;
+    sticky_x_labels?: boolean;
+    sticky_y_labels?: boolean;
+    virtualize?: boolean;
+    overscan?: number;
+    export_formats?: HeatmapExportFormat[];
+    onexport?: (format: HeatmapExportFormat, payload: unknown) => void;
+    show_gridlines?: boolean;
+    gridline_color?: string;
+    gridline_width?: string;
+    animate_updates?: boolean;
+    animation_duration?: string;
+    show_row_summaries?: boolean;
+    show_col_summaries?: boolean;
+    summary_fn?: (values: number[]) => number | null;
+    theme?: `default` | `light` | `dark` | `publication`;
+    show_controls?: boolean;
+    controls_open?: boolean;
+    controls_props?: Partial<ComponentProps<typeof HeatmapMatrixControls>>;
+    controls_children?: Snippet<[{
+        controls_open: boolean;
+    }]>;
+    show_values?: boolean | string;
+    x_axis?: AxisConfig;
+    y_axis?: AxisConfig;
+    tooltip?: HeatmapTooltipProp;
+    cell?: Snippet<[CellContext]>;
+    x_label_cell?: Snippet<[{
+        item: AxisItem;
+        idx: number;
+    }]>;
+    y_label_cell?: Snippet<[{
+        item: AxisItem;
+        idx: number;
+    }]>;
+    children?: Snippet;
+};
+declare const HeatmapMatrix: import("svelte").Component<$$ComponentProps, {}, "controls_open" | "color_scale" | "active_cell" | "selected_cells" | "pinned_cell">;
+type HeatmapMatrix = ReturnType<typeof HeatmapMatrix>;
+export default HeatmapMatrix;

package/dist/heatmap-matrix/HeatmapMatrixControls.svelte

@@ -0,0 +1,225 @@
+<script lang="ts">
+  import DraggablePane from '../overlays/DraggablePane.svelte'
+  import type { ComponentProps, Snippet } from 'svelte'
+  import {
+    ELEMENT_ORDERINGS,
+    ORDERING_LABELS,
+  } from './index'
+  import type { ElementAxisOrderingKey, DomainMode, HeatmapExportFormat, LegendPosition, NormalizeMode, SymmetricMode } from './index'
+
+  let {
+    ordering = $bindable(`atomic_number`),
+    orderings = ELEMENT_ORDERINGS,
+    controls_open = $bindable(false),
+    toggle_visible = $bindable(false),
+    normalize = $bindable(`linear`),
+    domain_mode = $bindable(`auto`),
+    show_legend = $bindable(false),
+    legend_position = $bindable(`bottom`),
+    search_query = $bindable(``),
+    symmetric = $bindable<SymmetricMode>(false),
+    show_values = $bindable<boolean | string>(false),
+    show_row_summaries = $bindable(false),
+    show_col_summaries = $bindable(false),
+    theme = $bindable<`default` | `light` | `dark` | `publication`>(`default`),
+    export_formats = [`csv`, `json`],
+    onexport,
+    show_pane = true,
+    pane_props = {},
+    toggle_props = {},
+    children,
+  }: {
+    ordering?: ElementAxisOrderingKey
+    orderings?: ElementAxisOrderingKey[]
+    controls_open?: boolean
+    toggle_visible?: boolean
+    normalize?: NormalizeMode
+    domain_mode?: DomainMode
+    show_legend?: boolean
+    legend_position?: LegendPosition
+    search_query?: string
+    symmetric?: SymmetricMode
+    show_values?: boolean | string
+    show_row_summaries?: boolean
+    show_col_summaries?: boolean
+    theme?: `default` | `light` | `dark` | `publication`
+    export_formats?: HeatmapExportFormat[]
+    onexport?: (format: HeatmapExportFormat) => void
+    show_pane?: boolean
+    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
+    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+    children?: Snippet<[{ controls_open: boolean }]>
+  } = $props()
+
+  function merge_styles(base_style: string, override_style: unknown): string {
+    const override_style_str = typeof override_style === `string`
+      ? override_style
+      : ``
+    return override_style_str ? `${base_style}; ${override_style_str}` : base_style
+  }
+
+  // Stash custom format string so toggling the checkbox preserves it
+  let stashed_format = $state<string | null>(null)
+
+  let show_toggle = $derived(controls_open || toggle_visible)
+  let default_toggle_style = $derived(
+    [
+      `position: absolute`,
+      `top: var(--heatmap-matrix-controls-toggle-top, 6px)`,
+      `right: var(--heatmap-matrix-controls-toggle-right, 6px)`,
+      `z-index: var(--heatmap-matrix-controls-toggle-z-index, 20)`,
+      `opacity: ${show_toggle ? `1` : `0`}`,
+      `pointer-events: ${show_toggle ? `auto` : `none`}`,
+      `transition: var(--heatmap-matrix-controls-toggle-transition, opacity 0.2s ease)`,
+    ].join(`; `),
+  )
+  const default_pane_style = [
+    `z-index: var(--heatmap-matrix-controls-pane-z-index, 25)`,
+    `min-width: var(--heatmap-matrix-controls-pane-min-width, 220px)`,
+  ].join(`; `)
+</script>
+
+<DraggablePane
+  bind:show={controls_open}
+  {show_pane}
+  pane_props={{
+    ...pane_props,
+    class: `heatmap-controls ${pane_props?.class ?? ``}`.trim(),
+    style: merge_styles(default_pane_style, pane_props?.style),
+  }}
+  toggle_props={{
+    ...toggle_props,
+    title: toggle_props.title ?? (controls_open ? `` : `Heatmap controls`),
+    class: `heatmap-matrix-controls-toggle ${toggle_props?.class ?? ``}`.trim(),
+    style: merge_styles(default_toggle_style, toggle_props?.style),
+  }}
+  closed_icon="Settings"
+  open_icon="Cross"
+>
+  <label>
+    Ordering
+    <select bind:value={ordering}>
+      {#each orderings as ord (ord)}
+        <option value={ord}>{ORDERING_LABELS[ord]}</option>
+      {/each}
+    </select>
+  </label>
+  <label>
+    Search
+    <input bind:value={search_query} placeholder="Filter labels/keys" />
+  </label>
+  <div class="pane-row">
+    <label>
+      Normalize
+      <select bind:value={normalize}>
+        <option value="linear">linear</option>
+        <option value="log">log</option>
+      </select>
+    </label>
+    <label>
+      Domain
+      <select bind:value={domain_mode}>
+        <option value="auto">auto</option>
+        <option value="robust">robust</option>
+        <option value="fixed">fixed</option>
+      </select>
+    </label>
+  </div>
+  <div class="pane-row">
+    <label>
+      <input type="checkbox" bind:checked={show_legend} />
+      Legend
+    </label>
+    {#if show_legend}
+      <label>
+        Position
+        <select bind:value={legend_position}>
+          <option value="right">right</option>
+          <option value="bottom">bottom</option>
+        </select>
+      </label>
+    {/if}
+  </div>
+  <div class="pane-row">
+    <label>
+      Symmetric
+      <select bind:value={symmetric}>
+        <option value={false}>off</option>
+        <option value="lower">lower</option>
+        <option value="upper">upper</option>
+      </select>
+    </label>
+    <label>
+      Theme
+      <select bind:value={theme}>
+        <option value="default">default</option>
+        <option value="light">light</option>
+        <option value="dark">dark</option>
+        <option value="publication">publication</option>
+      </select>
+    </label>
+  </div>
+  <div class="pane-row">
+    <label>
+      <input
+        type="checkbox"
+        checked={!!show_values}
+        onchange={(evt) => {
+          if (evt.currentTarget.checked) {
+            show_values = stashed_format || true
+          } else {
+            stashed_format = typeof show_values === `string` ? show_values : null
+            show_values = false
+          }
+        }}
+      />
+      Values
+    </label>
+    <label>
+      <input type="checkbox" bind:checked={show_row_summaries} />
+      Row sums
+    </label>
+    <label>
+      <input type="checkbox" bind:checked={show_col_summaries} />
+      Col sums
+    </label>
+  </div>
+  <div class="pane-row">
+    {#each export_formats as export_format (export_format)}
+      <button type="button" onclick={() => onexport?.(export_format)}>
+        Export {export_format.toUpperCase()}
+      </button>
+    {/each}
+  </div>
+  {@render children?.({ controls_open })}
+</DraggablePane>
+
+<style>
+  :global(.heatmap-controls) {
+    font-size: 0.85em;
+    max-width: 320px;
+  }
+  .pane-row {
+    display: flex;
+    gap: 10pt;
+    flex-wrap: wrap;
+  }
+  label {
+    display: flex;
+    align-items: center;
+    gap: 6pt;
+  }
+  select,
+  input:not([type]) {
+    height: 1.8em;
+    padding: 0 0.5em;
+    border-radius: var(--border-radius, 3pt);
+    border: 1px solid light-dark(#ccc, #555);
+    background: light-dark(white, #333);
+    color: inherit;
+    font: inherit;
+    box-sizing: border-box;
+    flex: 1;
+    min-width: 0;
+  }
+</style>

package/dist/heatmap-matrix/HeatmapMatrixControls.svelte.d.ts

@@ -0,0 +1,30 @@
+import DraggablePane from '../overlays/DraggablePane.svelte';
+import type { ComponentProps, Snippet } from 'svelte';
+import type { ElementAxisOrderingKey, DomainMode, HeatmapExportFormat, LegendPosition, NormalizeMode, SymmetricMode } from './index';
+type $$ComponentProps = {
+    ordering?: ElementAxisOrderingKey;
+    orderings?: ElementAxisOrderingKey[];
+    controls_open?: boolean;
+    toggle_visible?: boolean;
+    normalize?: NormalizeMode;
+    domain_mode?: DomainMode;
+    show_legend?: boolean;
+    legend_position?: LegendPosition;
+    search_query?: string;
+    symmetric?: SymmetricMode;
+    show_values?: boolean | string;
+    show_row_summaries?: boolean;
+    show_col_summaries?: boolean;
+    theme?: `default` | `light` | `dark` | `publication`;
+    export_formats?: HeatmapExportFormat[];
+    onexport?: (format: HeatmapExportFormat) => void;
+    show_pane?: boolean;
+    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
+    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
+    children?: Snippet<[{
+        controls_open: boolean;
+    }]>;
+};
+declare const HeatmapMatrixControls: import("svelte").Component<$$ComponentProps, {}, "normalize" | "theme" | "show_legend" | "controls_open" | "show_values" | "ordering" | "toggle_visible" | "domain_mode" | "legend_position" | "search_query" | "symmetric" | "show_row_summaries" | "show_col_summaries">;
+type HeatmapMatrixControls = ReturnType<typeof HeatmapMatrixControls>;
+export default HeatmapMatrixControls;

package/dist/heatmap-matrix/index.d.ts

@@ -0,0 +1,53 @@
+import type { ChemicalElement, ElementSymbol } from '../element';
+import type { Snippet } from 'svelte';
+export { COLOR_OVERRIDE_KEY_SEPARATOR, make_color_override_key } from './shared';
+export type AxisItem<T = Record<string, unknown>> = {
+    label: string;
+    key?: string;
+    sort_value?: number;
+    category?: string;
+    data?: T;
+};
+export type CellContext = {
+    x_item: AxisItem;
+    y_item: AxisItem;
+    x_idx: number;
+    y_idx: number;
+    value: number | string | null;
+    bg_color: string | null;
+};
+export declare const ORDERING_LABELS: {
+    readonly atomic_number: "Atomic Number";
+    readonly mendeleev_number: "Pettifor Chemical Similarity";
+    readonly alphabetical: "Alphabetical";
+    readonly atomic_mass: "Atomic Mass";
+    readonly electronegativity: "Pauling Electronegativity";
+    readonly first_ionization: "Ionization Energy";
+    readonly melting_point: "Melting Point";
+    readonly atomic_radius: "Atomic Radius";
+    readonly density: "Density";
+    readonly n_valence: "Valence Electrons";
+};
+export type ElementAxisOrderingKey = keyof typeof ORDERING_LABELS;
+export type ElementAxisOrdering = ElementAxisOrderingKey | ((a: ChemicalElement, b: ChemicalElement) => number);
+export type NormalizeMode = `linear` | `log` | ((value: number, min: number, max: number) => number);
+export type DomainMode = `auto` | `robust` | `fixed`;
+export type LegendPosition = `right` | `bottom`;
+export type SymmetricMode = boolean | `lower` | `upper`;
+export type HeatmapTooltipProp = Snippet<[CellContext]> | boolean;
+export type HeatmapSelection = {
+    x_idx: number;
+    y_idx: number;
+};
+export type HeatmapExportFormat = `csv` | `json`;
+export type HeatmapBrushPayload = {
+    x_range: [number, number];
+    y_range: [number, number];
+    cells: CellContext[];
+};
+export declare const ELEMENT_ORDERINGS: ElementAxisOrderingKey[];
+export declare function matrix_to_rows(x_items: AxisItem[], y_items: AxisItem[], values: (number | string | null)[][] | Record<string, Record<string, number | string | null>>): Record<string, number | string | null>[];
+export declare function rows_to_csv(rows: Record<string, number | string | null>[]): string;
+export declare function elements_to_axis(symbols?: ElementSymbol[], ordering?: ElementAxisOrdering): AxisItem<ChemicalElement>[];
+export { default as HeatmapMatrix } from './HeatmapMatrix.svelte';
+export { default as HeatmapMatrixControls } from './HeatmapMatrixControls.svelte';

package/dist/heatmap-matrix/index.js

@@ -0,0 +1,100 @@
+import { element_data } from '../element';
+export { COLOR_OVERRIDE_KEY_SEPARATOR, make_color_override_key } from './shared';
+// Human-readable labels for built-in orderings
+export const ORDERING_LABELS = {
+    atomic_number: `Atomic Number`,
+    mendeleev_number: `Pettifor Chemical Similarity`,
+    alphabetical: `Alphabetical`,
+    atomic_mass: `Atomic Mass`,
+    electronegativity: `Pauling Electronegativity`,
+    first_ionization: `Ionization Energy`,
+    melting_point: `Melting Point`,
+    atomic_radius: `Atomic Radius`,
+    density: `Density`,
+    n_valence: `Valence Electrons`,
+};
+// All built-in string ordering keys
+export const ELEMENT_ORDERINGS = Object.keys(ORDERING_LABELS);
+export function matrix_to_rows(x_items, y_items, values) {
+    const get_value = Array.isArray(values)
+        ? (x_idx, y_idx) => values[y_idx]?.[x_idx] ?? null
+        : (x_idx, y_idx) => {
+            const y_key = y_items[y_idx].key ?? y_items[y_idx].label;
+            const x_key = x_items[x_idx].key ?? x_items[x_idx].label;
+            return values[y_key]?.[x_key] ?? null;
+        };
+    return y_items.map((y_item, y_idx) => {
+        const row = {
+            y_key: y_item.key ?? y_item.label,
+        };
+        for (const [x_idx, x_item] of x_items.entries()) {
+            row[x_item.key ?? x_item.label] = get_value(x_idx, y_idx);
+        }
+        return row;
+    });
+}
+function escape_csv_field(value) {
+    const field = String(value ?? ``);
+    if (!/[",\n\r]/.test(field))
+        return field;
+    return `"${field.replaceAll(`"`, `""`)}"`;
+}
+export function rows_to_csv(rows) {
+    if (!rows.length)
+        return ``;
+    const headers = Object.keys(rows[0]);
+    const lines = [
+        headers.map((header) => escape_csv_field(header)).join(`,`),
+        ...rows.map((row) => headers.map((header) => escape_csv_field(row[header])).join(`,`)),
+    ];
+    return lines.join(`\n`);
+}
+// === Helpers ===
+// Map ordering keys to ChemicalElement property names where they differ
+const PROPERTY_MAP = {
+    atomic_number: `number`,
+    electronegativity: `electronegativity_pauling`,
+};
+// Convert element data to axis items with a given ordering.
+// Optionally filter to a subset of element symbols.
+export function elements_to_axis(symbols, ordering = `atomic_number`) {
+    let elements = [...element_data];
+    // Filter to subset if specified
+    if (symbols) {
+        const symbol_set = new Set(symbols);
+        elements = elements.filter((el) => symbol_set.has(el.symbol));
+    }
+    // Sort elements
+    if (typeof ordering === `function`) {
+        elements.sort(ordering);
+    }
+    else if (ordering === `alphabetical`) {
+        elements.sort((a, b) => a.symbol.localeCompare(b.symbol));
+    }
+    else {
+        // Sort by the named property, nulls/undefined last
+        const key = PROPERTY_MAP[ordering] ?? ordering;
+        elements.sort((a, b) => {
+            const val_a = (a[key] ?? null);
+            const val_b = (b[key] ?? null);
+            if (val_a === null && val_b === null)
+                return 0;
+            if (val_a === null)
+                return 1;
+            if (val_b === null)
+                return -1;
+            return val_a - val_b;
+        });
+    }
+    // Convert to AxisItem[]
+    return elements.map((el, idx) => ({
+        label: el.symbol,
+        key: el.symbol,
+        sort_value: idx,
+        category: el.category,
+        data: el,
+    }));
+}
+// === Component Exports ===
+export { default as HeatmapMatrix } from './HeatmapMatrix.svelte';
+export { default as HeatmapMatrixControls } from './HeatmapMatrixControls.svelte';

package/dist/heatmap-matrix/shared.d.ts

@@ -0,0 +1,2 @@
+export declare const COLOR_OVERRIDE_KEY_SEPARATOR = "\0";
+export declare const make_color_override_key: (x_key: string, y_key: string) => string;

package/dist/heatmap-matrix/shared.js

@@ -0,0 +1,4 @@
+// Shared helpers/constants used by HeatmapMatrix module pieces.
+// Key format for color_overrides lookups: `${x_key}\0${y_key}`.
+export const COLOR_OVERRIDE_KEY_SEPARATOR = `\0`;
+export const make_color_override_key = (x_key, y_key) => `${x_key}${COLOR_OVERRIDE_KEY_SEPARATOR}${y_key}`;