matterviz 0.1.0

package/dist/periodic-table/PeriodicTable.svelte

@@ -0,0 +1,284 @@
+<script lang="ts">import { goto } from '$app/navigation';
+import { elem_symbols, ElementPhoto, ElementTile } from '..';
+import { is_color } from '../colors';
+import element_data from '../element/data';
+import * as d3_sc from 'd3-scale-chromatic';
+const default_f_block_inset_tiles = [
+    { name: `Lanthanides`, symbol: `La-Lu`, number: `57-71`, category: `lanthanide` },
+    { name: `Actinides`, symbol: `Ac-Lr`, number: `89-103`, category: `actinide` },
+];
+let { tile_props, show_photo = false, disabled = false, heatmap_values = [], links = null, log = false, color_scale = $bindable(`interpolateViridis`), active_element = $bindable(null), active_category = $bindable(null), gap = `0.3cqw`, inner_transition_metal_offset = 0.5, lanth_act_tiles = tile_props?.show_symbol == false
+    ? []
+    : [...default_f_block_inset_tiles], lanth_act_style = ``, color_scale_range = [null, null], color_overrides = {}, labels = {}, missing_color = `element-category`, split_layout = undefined, inset, bottom_left_inset, tooltip = false, children, ...rest } = $props();
+let heat_values = $derived.by(() => {
+    if (Array.isArray(heatmap_values)) {
+        if (heatmap_values.length > 118) {
+            console.error(`heatmap_values is an array of numbers/arrays, length should be 118 or less, one for ` +
+                `each element possibly omitting elements at the end, got ${heatmap_values.length}`);
+            return [];
+        }
+        else
+            return heatmap_values;
+    }
+    else if (typeof heatmap_values == `object`) {
+        const bad_keys = Object.keys(heatmap_values).filter((key) => !elem_symbols.includes(key));
+        if (bad_keys.length > 0) {
+            console.error(`heatmap_values is an object, keys should be element symbols, got ${bad_keys}`);
+            return [];
+        }
+        return elem_symbols.map((symbol) => heatmap_values[symbol] ?? 0);
+    }
+    return [];
+});
+let set_active_element = $derived((element) => () => {
+    if (disabled)
+        return;
+    active_element = element;
+});
+let window_width = $state(0);
+let tooltip_element = $state(null);
+let tooltip_pos = $state({ x: 0, y: 0 });
+let tooltip_visible = $state(false);
+function handle_key(event) {
+    if (disabled || !active_element)
+        return;
+    if (event.key == `Enter`)
+        return goto(active_element.name.toLowerCase());
+    if (![`ArrowUp`, `ArrowDown`, `ArrowLeft`, `ArrowRight`].includes(event.key)) {
+        return;
+    }
+    event.preventDefault(); // prevent scrolling the page
+    event.stopPropagation();
+    // change the active element in the periodic table with arrow keys
+    // TODO doesn't allow navigating to lanthanides and actinides yet
+    const { column, row } = active_element;
+    active_element = element_data.find((elem) => {
+        return {
+            ArrowUp: elem.column == column && elem.row == row - 1,
+            ArrowDown: elem.column == column && elem.row == row + 1,
+            ArrowLeft: elem.column == column - 1 && elem.row == row,
+            ArrowRight: elem.column == column + 1 && elem.row == row,
+        }[event.key];
+    }) ?? active_element;
+}
+function handle_tooltip_enter(element, event) {
+    if (tooltip === false || disabled)
+        return;
+    tooltip_element = element;
+    const target = event.currentTarget;
+    const rect = target.getBoundingClientRect();
+    const container_rect = target.closest(`.periodic-table`)?.getBoundingClientRect();
+    if (container_rect) {
+        tooltip_pos = {
+            x: rect.left - container_rect.left + rect.width / 2,
+            y: rect.bottom - container_rect.top + 8,
+        };
+    }
+    tooltip_visible = true;
+}
+function handle_tooltip_leave() {
+    tooltip_visible = false;
+    tooltip_element = null;
+}
+let color_scale_fn = $derived(typeof color_scale == `string` ? d3_sc[color_scale] : color_scale);
+let cs_min = $derived(color_scale_range[0] ??
+    (heat_values.length
+        ? Math.min(...heat_values.flat().filter((v) => typeof v === `number`))
+        : 0));
+let cs_max = $derived(color_scale_range[1] ??
+    (heat_values.length
+        ? Math.max(...heat_values.flat().filter((v) => typeof v === `number`))
+        : 1));
+let bg_color = $derived((value, element) => {
+    if (Array.isArray(value)) {
+        // For arrays, return the color of the first value (used as fallback)
+        return bg_color(value[0], element);
+    }
+    // If it's already a color string, return it directly
+    if (is_color(value))
+        return value;
+    // Return missing color for zero/invalid values or when no heatmap data
+    if (!value ||
+        value === 0 ||
+        (log && value <= 0) ||
+        !heat_values?.length ||
+        !color_scale_fn) {
+        // Use missing color for zero/missing values or when no heatmap data
+        if (missing_color === `element-category` && element) {
+            return `var(--${element.category.replaceAll(` `, `-`)}-bg-color)`;
+        }
+        return missing_color;
+    }
+    // map value to [0, 1] range
+    const span = cs_max - cs_min;
+    if (span === 0)
+        return color_scale_fn?.(0.5); // midpoint when all values equal
+    if (log)
+        value = Math.log(value - cs_min + 1) / Math.log(span + 1);
+    else
+        value = (value - cs_min) / span;
+    return color_scale_fn?.(value);
+});
+let bg_colors = $derived((value, element) => {
+    if (!Array.isArray(value))
+        return [];
+    return value.map((v) => {
+        // If it's already a color string, return it directly
+        if (is_color(v))
+            return v;
+        // Otherwise, map it through the color scale
+        return bg_color(v, element);
+    });
+});
+</script>
+
+<svelte:window bind:innerWidth={window_width} onkeydown={handle_key} />
+
+<div class="periodic-table-container" {...rest}>
+  <div class="periodic-table" style:gap>
+    {@render inset?.({ active_element })}
+    {#each element_data as element (element.number)}
+      {@const { column, row, category, name, symbol } = element}
+      {@const value = heat_values[element.number - 1]}
+      {@const active = active_category === category.replaceAll(` `, `-`) ||
+        active_element?.name === name}
+      {@const style = `grid-column: ${column}; grid-row: ${row};`}
+      <ElementTile
+        {element}
+        href={links
+        ? typeof links == `string`
+          ? `${element[links]}`.toLowerCase()
+          : links[symbol]
+        : null}
+        {style}
+        {value}
+        bg_color={color_overrides[symbol] ?? bg_color(value, element)}
+        bg_colors={Array.isArray(value) ? bg_colors(value, element) : []}
+        {active}
+        label={labels[symbol]}
+        {...tile_props}
+        onmouseenter={(event: MouseEvent) => {
+          set_active_element(element)()
+          handle_tooltip_enter(element, event)
+        }}
+        onmouseleave={() => {
+          set_active_element(null)()
+          handle_tooltip_leave()
+        }}
+        onfocus={set_active_element(element)}
+        onblur={set_active_element(null)}
+        {split_layout}
+      />
+    {/each}
+    <!-- show tile for lanthanides and actinides with text La-Lu and Ac-Lr respectively -->
+    {#each lanth_act_tiles || [] as lanth_act_element, idx (lanth_act_element.symbol)}
+      {@const style = `opacity: 0.8; grid-column: 3; grid-row: ${
+        6 + idx
+      }; ${lanth_act_style};`}
+      <ElementTile
+        element={lanth_act_element as unknown as ChemicalElement}
+        {style}
+        onmouseenter={() => (active_category = lanth_act_element.category)}
+        onmouseleave={() => (active_category = null)}
+        symbol_style="font-size: 30cqw;"
+      />
+    {/each}
+    {#if inner_transition_metal_offset}
+      <!-- provide vertical offset for lanthanides + actinides -->
+      <div class="spacer" style:aspect-ratio={1 / inner_transition_metal_offset}></div>
+    {/if}
+
+    {#if bottom_left_inset}
+      {@render bottom_left_inset({ active_element })}
+    {:else if show_photo && active_element}
+      <ElementPhoto element={active_element} style="grid-area: 9/1/span 2/span 2" />
+    {/if}
+
+    <!-- Tooltip -->
+    {#if tooltip_visible && tooltip_element && tooltip !== false}
+      {@const style = `left: ${tooltip_pos.x}px; top: ${tooltip_pos.y}px;`}
+      <div class="tooltip" {style}>
+        {#if typeof tooltip == `function`}
+          {@const tooltip_value = heat_values[tooltip_element.number - 1]}
+          {@render tooltip({
+          element: tooltip_element,
+          value: tooltip_value,
+          active:
+            active_category === tooltip_element.category.replaceAll(` `, `-`) ||
+            active_element?.name === tooltip_element.name,
+          bg_color: color_overrides[tooltip_element.symbol] ??
+            bg_color(tooltip_value, tooltip_element),
+          scale_context: { min: cs_min, max: cs_max, color_scale },
+        })}
+        {:else}
+          {tooltip_element.name}<br />
+          <small>{tooltip_element.symbol} • {tooltip_element.number}</small>
+          {#if Array.isArray(heat_values[tooltip_element.number - 1])}
+            <br />
+            <small>Values: {
+                (heat_values[tooltip_element.number - 1] as number[]).join(
+                  `, `,
+                )
+              }</small>
+          {/if}
+        {/if}
+      </div>
+    {/if}
+
+    {@render children?.()}
+  </div>
+</div>
+
+<style>
+  .periodic-table-container {
+    /* needed for gap: 0.3cqw; to work */
+    container-type: inline-size;
+
+    /* Default category colors - can be overridden by user */
+    --diatomic-nonmetal-bg-color: #ff8c00;
+    --noble-gas-bg-color: darkorchid;
+    --alkali-metal-bg-color: darkgreen;
+    --alkaline-earth-metal-bg-color: darkslateblue;
+    --metalloid-bg-color: darkgoldenrod;
+    --polyatomic-nonmetal-bg-color: brown;
+    --transition-metal-bg-color: #571e6c;
+    --post-transition-metal-bg-color: #938d4a;
+    --lanthanide-bg-color: #58748e;
+    --actinide-bg-color: cornflowerblue;
+    --experimental-bg-color: gray;
+  }
+  div.periodic-table {
+    display: grid;
+    grid-template-columns: repeat(18, 1fr);
+    position: relative;
+    container-type: inline-size;
+    gap: var(--ptable-gap, 0.3cqw);
+  }
+  div.spacer {
+    grid-row: 8;
+    aspect-ratio: var(--ptable-spacer-ratio, 2);
+  }
+  .tooltip {
+    position: absolute;
+    transform: translate(-50%, -10%);
+    background: var(--tooltip-bg, rgba(0, 0, 0, 0.8));
+    color: var(--tooltip-color, white);
+    padding: var(--tooltip-padding, 4px 6px);
+    border-radius: var(--tooltip-border-radius, 6px);
+    font-size: var(--tooltip-font-size, 14px);
+    text-align: var(--tooltip-text-align, center);
+    line-height: var(--tooltip-line-height, 1.2);
+  }
+  .tooltip::before {
+    content: '';
+    position: absolute;
+    top: -15%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 8px solid var(--tooltip-bg, rgba(0, 0, 0, 0.8));
+    box-sizing: border-box;
+    margin: 0 auto;
+  }
+</style>

package/dist/periodic-table/PeriodicTable.svelte.d.ts

@@ -0,0 +1,50 @@
+import type { Category, ChemicalElement } from '..';
+import { type ElementSymbol, ElementTile } from '..';
+import type { ComponentProps, Snippet } from 'svelte';
+import type { D3InterpolateName } from '../colors';
+import type { ScaleContext } from './index';
+interface Props {
+    tile_props?: Partial<ComponentProps<typeof ElementTile>>;
+    show_photo?: boolean;
+    disabled?: boolean;
+    heatmap_values?: Partial<Record<ElementSymbol, number | number[] | string | string[]>> | (number | number[] | string | string[])[];
+    links?: keyof ChemicalElement | Record<ElementSymbol, string> | null;
+    log?: boolean;
+    color_scale?: D3InterpolateName | ((num: number) => string);
+    active_element?: ChemicalElement | null;
+    active_category?: Category | null;
+    gap?: string;
+    inner_transition_metal_offset?: number;
+    lanth_act_tiles?: {
+        name: string;
+        symbol: string;
+        number: string;
+        category: Category;
+    }[];
+    lanth_act_style?: string;
+    color_scale_range?: [number | null, number | null];
+    color_overrides?: Partial<Record<ElementSymbol, string>>;
+    labels?: Partial<Record<ElementSymbol, string>>;
+    missing_color?: string;
+    split_layout?: `diagonal` | `horizontal` | `vertical` | `triangular` | `quadrant`;
+    inset?: Snippet<[{
+        active_element: ChemicalElement | null;
+    }]>;
+    bottom_left_inset?: Snippet<[{
+        active_element: ChemicalElement | null;
+    }]>;
+    tooltip?: Snippet<[
+        {
+            element: ChemicalElement;
+            value: number | number[] | string | string[];
+            active: boolean;
+            bg_color: string | null;
+            scale_context: ScaleContext;
+        }
+    ]> | boolean;
+    children?: Snippet;
+    [key: string]: unknown;
+}
+declare const PeriodicTable: import("svelte").Component<Props, {}, "color_scale" | "active_element" | "active_category">;
+type PeriodicTable = ReturnType<typeof PeriodicTable>;
+export default PeriodicTable;

package/dist/periodic-table/PropertySelect.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">import { heatmap_labels } from '../labels';
+import Select from 'svelte-multiselect';
+const options = Object.keys(heatmap_labels);
+let { value = $bindable(null), empty = false, selected = empty ? [] : [options[1]], minSelect = 0, id = null, key = $bindable(``), ...rest } = $props();
+$effect.pre(() => {
+    key = heatmap_labels[value ?? ``] ?? null;
+});
+</script>
+
+<Select
+  {id}
+  {options}
+  {selected}
+  maxSelect={1}
+  {minSelect}
+  bind:value
+  placeholder="Select a heat map"
+  inputStyle="padding: 3pt 6pt;"
+  {...rest}
+/>

package/dist/periodic-table/PropertySelect.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { ChemicalElement } from '..';
+interface Props {
+    value?: keyof ChemicalElement | null;
+    empty?: boolean;
+    selected?: string[];
+    minSelect?: number;
+    id?: string | null;
+    key?: string | null;
+    [key: string]: unknown;
+}
+declare const PropertySelect: import("svelte").Component<Props, {}, "key" | "value">;
+type PropertySelect = ReturnType<typeof PropertySelect>;
+export default PropertySelect;

package/dist/periodic-table/TableInset.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">let { style = null, tag = `aside`, children } = $props();
+export {};
+</script>
+
+<svelte:element this={tag} {style}>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  aside,
+  div {
+    display: grid;
+    box-sizing: border-box;
+    grid-row: var(--ptable-inset-row, 1 / span 3);
+    grid-column: var(--ptable-inset-col, 3 / span 10);
+    container-type: inline-size;
+  }
+</style>

package/dist/periodic-table/TableInset.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    style?: string | null;
+    tag?: string;
+    children?: Snippet;
+}
+declare const TableInset: import("svelte").Component<Props, {}, "">;
+type TableInset = ReturnType<typeof TableInset>;
+export default TableInset;

package/dist/periodic-table/index.d.ts

@@ -0,0 +1,9 @@
+import type { D3InterpolateName } from '../colors';
+export { default, default as PeriodicTable } from './PeriodicTable.svelte';
+export { default as PropertySelect } from './PropertySelect.svelte';
+export { default as TableInset } from './TableInset.svelte';
+export type ScaleContext = {
+    min: number;
+    max: number;
+    color_scale: D3InterpolateName | ((num: number) => string);
+};

package/dist/periodic-table/index.js

@@ -0,0 +1,3 @@
+export { default, default as PeriodicTable } from './PeriodicTable.svelte';
+export { default as PropertySelect } from './PropertySelect.svelte';
+export { default as TableInset } from './TableInset.svelte';