matterviz 0.3.0 → 0.3.2

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, {}, "color_scale" | "controls_open" | "active_cell" | "selected_cells" | "pinned_cell">;
+type HeatmapMatrix = ReturnType<typeof HeatmapMatrix>;
+export default HeatmapMatrix;

package/dist/heatmap-matrix/HeatmapMatrixControls.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">import DraggablePane from '../overlays/DraggablePane.svelte';
+import { ELEMENT_ORDERINGS, ORDERING_LABELS, } 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(false), show_values = $bindable(false), show_row_summaries = $bindable(false), show_col_summaries = $bindable(false), theme = $bindable(`default`), export_formats = [`csv`, `json`], onexport, show_pane = true, pane_props = {}, toggle_props = {}, children, } = $props();
+function merge_styles(base_style, override_style) {
+    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(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,31 @@
+import DraggablePane from '../overlays/DraggablePane.svelte';
+import type { ComponentProps, Snippet } from 'svelte';
+import type { DomainMode, HeatmapExportFormat, LegendPosition, NormalizeMode, SymmetricMode } from './index';
+import { type ElementAxisOrderingKey } 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" | "controls_open" | "show_legend" | "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;
+    });
+}
+export function rows_to_csv(rows) {
+    if (!rows.length)
+        return ``;
+    const escape_csv_field = (value) => {
+        const field = String(value ?? ``);
+        if (!/[",\n\r]/.test(field))
+            return field;
+        return `"${field.replaceAll(`"`, `""`)}"`;
+    };
+    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}`;

package/dist/icons.d.ts

@@ -299,6 +299,14 @@ export declare const ICON_DATA: {
         readonly viewBox: "0 0 15 15";
         readonly path: "M4.854 2.146a.5.5 0 0 1 0 .708L3.707 4H9a4.5 4.5 0 1 1 0 9H5a.5.5 0 0 1 0-1h4a3.5 3.5 0 1 0 0-7H3.707l1.147 1.146a.5.5 0 1 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2a.5.5 0 0 1 .708 0";
     };
+    readonly Undo: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88c3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z";
+    };
+    readonly Redo: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5c1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z";
+    };
     readonly TwoColumns: {
         readonly viewBox: "0 0 24 24";
         readonly path: "M3 5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm6 0H5v14h4zm4 0a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2zm6 0h-4v14h4z";
@@ -446,5 +454,116 @@ export declare const ICON_DATA: {
         readonly viewBox: "0 0 24 24";
         readonly path: "M4 18q-1.25 0-2.125-.875T1 15V9q0-1.25.875-2.125T4 6h13.5q1.25 0 2.125.875T20.5 9v6q0 1.25-.875 2.125T17.5 18zm0-2h13.5q.425 0 .713-.288T18.5 15V9q0-.425-.288-.712T17.5 8H4q-.425 0-.712.288T3 9v6q0 .425.288.713T4 16m17.5-1.5v-5h.5q.425 0 .713.288T23 10.5v3q0 .425-.288.713T22 14.5zM4 14v-4q0-.425.288-.712T5 9h10q.425 0 .713.288T16 10v4q0 .425-.288.713T15 15H5q-.425 0-.712-.288T4 14";
     };
+    readonly Filter: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "M22 3H2l8 9.46V19l4 2v-8.54z";
+    };
+    readonly Eye: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "M12 9a3 3 0 1 0 0 6a3 3 0 0 0 0-6m0 8a5 5 0 1 1 0-10a5 5 0 0 1 0 10m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5";
+    };
+    readonly EyeOff: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "M11.83 9L15 12.16V12a3 3 0 0 0-3-3zm-4.3.8l1.55 1.55c-.05.21-.08.42-.08.65a3 3 0 0 0 3 3c.22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53a5 5 0 0 1-5-5c0-.79.2-1.53.53-2.2M2 4.27l2.28 2.28l.45.45C3.08 8.3 1.78 10 1 12c1.73 4.39 6 7.5 11 7.5c1.55 0 3.03-.3 4.38-.84l.43.42L19.73 22L21 20.73L3.27 3M12 7a5 5 0 0 1 5 5c0 .64-.13 1.26-.36 1.82l2.93 2.93c1.5-1.25 2.7-2.89 3.43-4.75c-1.73-4.39-6-7.5-11-7.5c-1.4 0-2.74.25-4 .7l2.17 2.15C10.74 7.13 11.35 7 12 7";
+    };
+    readonly Pin: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2z";
+    };
+    readonly Unpin: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "M2 5.27L3.28 4L20 20.72L18.73 22l-5.93-5.93V22h-1.6v-6H6v-2l2-2v-.73zM16 12l2 2v2h-.18L8 6.18V4H7V2h10v2h-1z";
+    };
+    readonly ArrowLeft: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "M20 11H7.83l5.59-5.59L12 4l-8 8l8 8l1.41-1.41L7.83 13H20z";
+    };
+    readonly ArrowRight: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z";
+    };
+    readonly ZoomIn: {
+        readonly viewBox: "0 0 24 24";
+        readonly stroke: "currentColor";
+        readonly path: "<g fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/><line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"/><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"/></g>";
+    };
+    readonly ZoomOut: {
+        readonly viewBox: "0 0 24 24";
+        readonly stroke: "currentColor";
+        readonly path: "<g fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"/></g>";
+    };
+    readonly Play: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "M8 5v14l11-7z";
+    };
+    readonly Pause: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "M6 19h4V5H6zm8-14v14h4V5z";
+    };
+    readonly ExternalLink: {
+        readonly viewBox: "0 0 24 24";
+        readonly stroke: "currentColor";
+        readonly path: "<g fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"/><polyline points=\"15 3 21 3 21 9\"/><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"/></g>";
+    };
+    readonly Sort: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "M3 18h6v-2H3zM3 6v2h18V6zm0 7h12v-2H3z";
+    };
+    readonly SortAsc: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "M3 18v-2h6v2zM3 13v-2h12v2zM3 8V6h13v2zM19 18V10h-2l3-5l3 5h-2v8z";
+    };
+    readonly SortDesc: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "M3 18v-2h6v2zM3 13v-2h12v2zM3 8V6h13v2zM19 6v8h-2l3 5l3-5h-2V6z";
+    };
+    readonly BrillouinZone: {
+        readonly viewBox: "0 0 24 24";
+        readonly stroke: "currentColor";
+        readonly path: "<g stroke-width=\"1.3\" fill=\"none\"><polygon points=\"12,1 22,7 22,17 12,23 2,17 2,7\"/><line x1=\"2\" y1=\"7\" x2=\"22\" y2=\"17\"/><line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"23\"/><line x1=\"22\" y1=\"7\" x2=\"2\" y2=\"17\"/></g>";
+    };
+    readonly BandStructure: {
+        readonly viewBox: "0 0 28 24";
+        readonly stroke: "currentColor";
+        readonly path: "<g stroke-width=\"1.3\" fill=\"none\" stroke-linecap=\"round\"><path d=\"M1 20c3-4 5-6 7-6s5 5 7 5 5-4 7-4\"/><path d=\"M1 17c2-3 5-5 7-3s5 4 7 3 5-5 7-3\"/><line x1=\"1\" y1=\"12\" x2=\"27\" y2=\"12\" stroke-dasharray=\"2 1.5\" opacity=\"0.2\"/><path d=\"M1 9c3 3 5 5 7 5s5-5 7-5 5 3 7 3\"/><path d=\"M1 6c2 2 5 4 7 2s5-3 7-2 5 4 7 2\"/><path d=\"M1 4c3 1 5 1 7 0s5-1 7 0 5 1 7 0\" opacity=\"0.5\"/><line x1=\"8\" y1=\"1\" x2=\"8\" y2=\"23\" stroke-dasharray=\"1.5 1.5\" opacity=\"0.2\"/><line x1=\"15\" y1=\"1\" x2=\"15\" y2=\"23\" stroke-dasharray=\"1.5 1.5\" opacity=\"0.2\"/><line x1=\"22\" y1=\"1\" x2=\"22\" y2=\"23\" stroke-dasharray=\"1.5 1.5\" opacity=\"0.2\"/></g>";
+    };
+    readonly DensityOfStates: {
+        readonly viewBox: "0 0 24 24";
+        readonly stroke: "currentColor";
+        readonly path: "<line x1=\"3\" y1=\"21\" x2=\"21\" y2=\"21\" stroke-width=\"0.7\" opacity=\"0.3\"/><path d=\"M3 21C3 21 4 21 5 11C6 21 7 21 9 21C9 21 10 21 11 15C12 21 13 21 14 21C14 21 15 21 16.5 6C18 21 19 21 21 21\" stroke-width=\"1.2\" fill=\"none\" stroke-linecap=\"round\"/><path d=\"M3 21C3 21 4 21 5 11C6 21 7 21 9 21C9 21 10 21 11 15C12 21 13 21 14 21C14 21 15 21 16.5 6C18 21 19 21 21 21Z\" fill=\"currentColor\" stroke=\"none\" opacity=\"0.12\"/>";
+    };
+    readonly BandsDOS: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "<path fill=\"currentColor\" d=\"M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2M4 4h10v16H4zm12 0h4v16h-4z\"/>";
+    };
+    readonly ThreePanels: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "<path fill=\"currentColor\" d=\"M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2M4 4h5v16H4zm7 0h9v8h-9zm0 10h9v6h-9z\"/>";
+    };
+    readonly FermiSurface: {
+        readonly viewBox: "0 0 24 24";
+        readonly stroke: "currentColor";
+        readonly path: "<g stroke-width=\"1.3\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"9\" opacity=\"0.3\"/><ellipse cx=\"12\" cy=\"12\" rx=\"9\" ry=\"4\"/><ellipse cx=\"12\" cy=\"12\" rx=\"4\" ry=\"9\"/><ellipse cx=\"12\" cy=\"12\" rx=\"6\" ry=\"7\" transform=\"rotate(45 12 12)\" opacity=\"0.5\"/></g>";
+    };
+    readonly ScatterPlot3D: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "<g stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"><line x1=\"3\" y1=\"21\" x2=\"3\" y2=\"5\"/><line x1=\"3\" y1=\"21\" x2=\"21\" y2=\"21\"/><line x1=\"3\" y1=\"21\" x2=\"9\" y2=\"15\"/></g><circle cx=\"11\" cy=\"11\" r=\"1.5\" fill=\"currentColor\"/><circle cx=\"16\" cy=\"15\" r=\"1.5\" fill=\"currentColor\"/><circle cx=\"8\" cy=\"16\" r=\"1.5\" fill=\"currentColor\"/><circle cx=\"15\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>";
+    };
+    readonly SpacegroupBarPlot: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "<rect x=\"2\" y=\"13\" width=\"3.5\" height=\"8\" fill=\"currentColor\"/><rect x=\"7\" y=\"7\" width=\"3.5\" height=\"14\" fill=\"currentColor\"/><rect x=\"12\" y=\"10\" width=\"3.5\" height=\"11\" fill=\"currentColor\"/><rect x=\"17\" y=\"5\" width=\"3.5\" height=\"16\" fill=\"currentColor\"/><path d=\"M21 2l1.5 2.5h-3z\" fill=\"currentColor\" opacity=\"0.5\"/>";
+    };
+    readonly HeatmapMatrix: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "<rect x=\"2\" y=\"2\" width=\"5.5\" height=\"5.5\" rx=\"0.8\" fill=\"currentColor\" opacity=\"0.9\"/><rect x=\"9.2\" y=\"2\" width=\"5.5\" height=\"5.5\" rx=\"0.8\" fill=\"currentColor\" opacity=\"0.4\"/><rect x=\"16.5\" y=\"2\" width=\"5.5\" height=\"5.5\" rx=\"0.8\" fill=\"currentColor\" opacity=\"0.15\"/><rect x=\"2\" y=\"9.2\" width=\"5.5\" height=\"5.5\" rx=\"0.8\" fill=\"currentColor\" opacity=\"0.5\"/><rect x=\"9.2\" y=\"9.2\" width=\"5.5\" height=\"5.5\" rx=\"0.8\" fill=\"currentColor\" opacity=\"0.8\"/><rect x=\"16.5\" y=\"9.2\" width=\"5.5\" height=\"5.5\" rx=\"0.8\" fill=\"currentColor\" opacity=\"0.35\"/><rect x=\"2\" y=\"16.5\" width=\"5.5\" height=\"5.5\" rx=\"0.8\" fill=\"currentColor\" opacity=\"0.2\"/><rect x=\"9.2\" y=\"16.5\" width=\"5.5\" height=\"5.5\" rx=\"0.8\" fill=\"currentColor\" opacity=\"0.65\"/><rect x=\"16.5\" y=\"16.5\" width=\"5.5\" height=\"5.5\" rx=\"0.8\" fill=\"currentColor\"/>";
+    };
+    readonly HeatmapTable: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "<rect x=\"2\" y=\"2\" width=\"20\" height=\"4\" rx=\"1\" fill=\"currentColor\" opacity=\"0.25\"/><rect x=\"2\" y=\"8\" width=\"9\" height=\"3.5\" rx=\"0.5\" fill=\"currentColor\" opacity=\"0.6\"/><rect x=\"13\" y=\"8\" width=\"9\" height=\"3.5\" rx=\"0.5\" fill=\"currentColor\" opacity=\"0.35\"/><rect x=\"2\" y=\"13.5\" width=\"9\" height=\"3.5\" rx=\"0.5\" fill=\"currentColor\" opacity=\"0.85\"/><rect x=\"13\" y=\"13.5\" width=\"9\" height=\"3.5\" rx=\"0.5\" fill=\"currentColor\" opacity=\"0.5\"/><rect x=\"2\" y=\"19\" width=\"9\" height=\"3.5\" rx=\"0.5\" fill=\"currentColor\" opacity=\"0.3\"/><rect x=\"13\" y=\"19\" width=\"9\" height=\"3.5\" rx=\"0.5\" fill=\"currentColor\" opacity=\"0.9\"/>";
+    };
+    readonly ColorBar: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "<rect x=\"6\" y=\"2\" width=\"5\" height=\"20\" rx=\"2.5\" fill=\"currentColor\" opacity=\"0.15\"/><rect x=\"6\" y=\"2\" width=\"5\" height=\"15\" rx=\"2.5\" fill=\"currentColor\" opacity=\"0.4\"/><rect x=\"6\" y=\"2\" width=\"5\" height=\"10\" rx=\"2.5\" fill=\"currentColor\" opacity=\"0.7\"/><rect x=\"6\" y=\"2\" width=\"5\" height=\"5\" rx=\"2.5\" fill=\"currentColor\"/><g stroke=\"currentColor\" stroke-width=\"1.2\" opacity=\"0.5\"><line x1=\"13\" y1=\"4\" x2=\"16\" y2=\"4\"/><line x1=\"13\" y1=\"12\" x2=\"16\" y2=\"12\"/><line x1=\"13\" y1=\"20\" x2=\"16\" y2=\"20\"/></g>";
+    };
 };
 export type IconName = keyof typeof ICON_DATA;