matterviz 0.1.0

package/dist/BohrAtom.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">"use strict";
+let { symbol = ``, name = ``, shells, adapt_size = false, shell_width = 20, size = adapt_size ? (shells.length + 1) * 2 * shell_width + 50 : 270, base_fill = `white`, orbital_period = 3, nucleus_props = {}, shell_props = {}, electron_props = {}, highlight_shell = null, style = ``, number_electrons = false, electron_label_props = {}, ...rest } = $props();
+// Bohr atom electron orbital period is given by
+// T = (n^3 h^3) / (4pi^2 m K e^4 Z^2) = 1.52 * 10^-16 * n^3 / Z^2 s
+// with n the shell number, Z the atomic number, m the mass of the electron
+let _nucleus_props = $derived({
+    r: 20,
+    fill: `white`,
+    'fill-opacity': `0.3`,
+    ...nucleus_props,
+});
+let _shell_props = $derived({
+    stroke: `white`,
+    'stroke-width': 1,
+    fill: `none`,
+    ...shell_props,
+});
+let _electron_props = $derived({
+    r: 3,
+    stroke: `white`,
+    'stroke-width': 1,
+    fill: `blue`,
+    ...electron_props,
+});
+</script>
+
+<svg
+  fill={base_fill}
+  viewBox="-{size / 2}, -{size / 2}, {size}, {size}"
+  role="presentation"
+  {style}
+  {...rest}
+>
+  <!-- nucleus -->
+  <circle class="nucleus" {..._nucleus_props}>
+    {#if name}
+      <title>{name}</title>
+    {/if}
+  </circle>
+  {#if symbol}
+    <text>{symbol}</text>
+  {/if}
+
+  <!-- electron orbitals -->
+  {#each shells as electrons, shell_idx ([electrons, shell_idx])}
+    {@const n = shell_idx + 1}
+    {@const shell_radius = _nucleus_props.r + n * shell_width}
+    {@const active = n === highlight_shell}
+    <g class="shell" style:animation-duration="{orbital_period * n ** 1.5}s">
+      <circle
+        r={shell_radius}
+        {..._shell_props}
+        style:stroke-width={active ? 2 : 1}
+        style:stroke={active ? `yellow` : `white`}
+      />
+
+      <!-- electrons -->
+      {#each Array(electrons) as _, elec_idx (elec_idx)}
+        {@const elec_x = Math.cos((2 * Math.PI * elec_idx) / electrons) * shell_radius}
+        {@const elec_y = Math.sin((2 * Math.PI * elec_idx) / electrons) * shell_radius}
+        <circle class="electron" cx={elec_x} cy={elec_y} {..._electron_props}>
+          <title>Electron {elec_idx + 1}</title>
+        </circle>
+        {#if number_electrons}
+          <text
+            x={elec_x}
+            y={elec_y}
+            {...electron_label_props}
+            transform="rotate({(elec_idx * 360) / electrons} {elec_x} {elec_y})"
+          >
+            {#if typeof number_electrons === `function`}
+              {number_electrons(elec_idx)}
+            {:else if number_electrons === `hierarchical`}
+              {shell_idx + 1}.{elec_idx + 1}
+              <!-- {:else if [`sequential`, true].includes(number_electrons)} -->
+            {:else}
+              {@const nth_electron = shells.slice(0, shell_idx).reduce((a, b) => a + b, 0) +
+          elec_idx + 1}
+              {nth_electron}
+            {/if}
+          </text>
+        {/if}
+      {/each}
+    </g>
+  {/each}
+</svg>
+
+<style>
+  svg {
+    overflow: visible;
+    width: 100%;
+  }
+  g.shell {
+    animation: spin-right linear infinite;
+  }
+  text {
+    text-anchor: middle;
+    dominant-baseline: central;
+  }
+  @keyframes spin-right {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>

package/dist/BohrAtom.svelte.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    symbol?: string;
+    name?: string;
+    shells: number[];
+    adapt_size?: boolean;
+    shell_width?: number;
+    size?: number;
+    base_fill?: string;
+    orbital_period?: number;
+    nucleus_props?: Record<string, string | number>;
+    shell_props?: Record<string, string | number>;
+    electron_props?: Record<string, string | number>;
+    highlight_shell?: number | null;
+    style?: string;
+    number_electrons?: boolean | `hierarchical` | `sequential` | ((idx: number) => string);
+    electron_label_props?: Record<string, string | number>;
+    [key: string]: unknown;
+}
+declare const BohrAtom: import("svelte").Component<Props, {}, "">;
+type BohrAtom = ReturnType<typeof BohrAtom>;
+export default BohrAtom;

package/dist/ControlPanel.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">import { Icon } from './';
+let { controls_open = $bindable(false), show_controls = true, controls_content, toggle_button = {}, panel_props = {}, show_toggle_button = true, open_icon = `Cross`, closed_icon = `Settings`, toggle_controls_btn, controls, } = $props();
+function on_keydown(event) {
+    if (event.key === `Escape`)
+        controls_open = false;
+}
+function toggle_controls() {
+    controls_open = !controls_open;
+}
+</script>
+
+<svelte:window onkeydown={on_keydown} />
+
+{#if show_controls}
+  {#if show_toggle_button}
+    <button
+      bind:this={toggle_controls_btn}
+      onclick={toggle_controls}
+      aria-expanded={controls_open}
+      aria-controls="controls-panel"
+      title={toggle_button.title ?? (controls_open ? `Close controls` : `Open controls`)}
+      {...toggle_button}
+      class="controls-toggle {toggle_button.class ?? ``}"
+    >
+      <Icon
+        icon={controls_open ? open_icon : closed_icon}
+        style="width: 24px; height: 24px"
+      />
+    </button>
+  {/if}
+
+  <div
+    class:controls-open={controls_open}
+    bind:this={controls}
+    role="dialog"
+    {...panel_props}
+    class="controls {panel_props.class ?? ``}"
+  >
+    {#if controls_content}
+      {@render controls_content()}
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .controls-toggle {
+    background-color: transparent;
+    min-width: 28px;
+    height: 28px;
+    padding: 0.125rem 0.25rem;
+    font-size: 0.8rem;
+    box-sizing: border-box;
+  }
+  .controls-toggle:hover {
+    background-color: transparent !important;
+  }
+  .controls {
+    position: absolute;
+    left: unset;
+    background: transparent;
+    border: none;
+    display: grid;
+    gap: var(--controls-gap, 4pt);
+    text-align: var(--controls-text-align, left);
+    transition:
+      visibility var(--controls-transition-duration, 0.3s),
+      opacity var(--controls-transition-duration, 0.3s);
+    box-sizing: border-box;
+    top: var(--controls-top, 30pt);
+    right: var(--controls-right, 6pt);
+    background: var(--controls-bg, rgba(10, 10, 10, 0.95));
+    padding: var(--controls-padding, 6pt 9pt);
+    border-radius: var(--controls-border-radius, 3pt);
+    width: var(--controls-width, 20em);
+    max-width: var(--controls-max-width, 90cqw);
+    color: var(--controls-text-color);
+    overflow: auto;
+    max-height: var(--controls-max-height, calc(100vh - 3em));
+    visibility: hidden;
+    opacity: 0;
+    z-index: var(--controls-z-index, 1);
+    pointer-events: none;
+  }
+  .controls.controls-open {
+    visibility: visible !important;
+    opacity: 1 !important;
+    pointer-events: auto !important;
+  }
+  .controls :global(hr) {
+    border: none;
+    background: var(--controls-hr-bg, gray);
+    margin: var(--controls-hr-margin, 0);
+    height: var(--controls-hr-height, 0.5px);
+  }
+  .controls :global(label) {
+    display: flex;
+    align-items: center;
+    gap: var(--controls-label-gap, 2pt);
+  }
+  .controls :global(input[type='range']) {
+    margin-left: auto;
+    width: var(--controls-input-range-width, 100px);
+    flex-shrink: 0;
+  }
+  .controls :global(.slider-control input[type='range']) {
+    margin-left: 0;
+  }
+  .controls :global(input[type='number']) {
+    box-sizing: border-box;
+    text-align: center;
+    border-radius: var(--controls-input-num-border-radius, 3pt);
+    width: var(--controls-input-num-width, 2.2em);
+    border: var(--controls-input-num-border, none);
+    background: var(--controls-input-num-bg, rgba(255, 255, 255, 0.15));
+    margin-right: 3pt;
+    margin-left: var(--controls-input-num-margin-left, 6pt);
+    flex-shrink: 0;
+  }
+  .controls :global(input::-webkit-inner-spin-button) {
+    display: none;
+  }
+  .controls :global(button) {
+    width: max-content;
+    background-color: var(--controls-btn-bg, rgba(255, 255, 255, 0.2));
+  }
+  .controls :global(select) {
+    margin: var(--controls-select-margin, 0 0 0 5pt);
+    color: var(--controls-select-color, white);
+    background-color: var(--controls-select-bg, rgba(255, 255, 255, 0.1));
+  }
+  .controls :global(input[type='color']) {
+    width: var(--input-color-width, 40px);
+    height: var(--input-color-height, 16px);
+    margin: var(--input-color-margin, 0 0 0 5pt);
+    border: var(--input-color-border, 1px solid rgba(255, 255, 255, 0.05));
+    box-sizing: border-box;
+  }
+  .controls :global(.section-heading) {
+    margin: 8pt 0 2pt;
+    font-size: 0.9em;
+    color: var(--text-muted, #ccc);
+  }
+  .controls :global(.control-row) {
+    display: flex;
+    gap: 4pt;
+    align-items: flex-start;
+  }
+  .controls :global(.control-row label) {
+    min-width: 0;
+  }
+  .controls :global(.control-row label.compact) {
+    flex: 0 0 auto;
+    margin-right: 8pt;
+  }
+  .controls :global(.control-row label.slider-control) {
+    flex: 1;
+  }
+</style>

package/dist/ControlPanel.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { IconName } from './icons';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props {
+    controls_open?: boolean;
+    show_controls?: boolean;
+    controls_content?: Snippet<[]>;
+    toggle_button?: HTMLAttributes<HTMLButtonElement>;
+    panel_props?: HTMLAttributes<HTMLDivElement>;
+    show_toggle_button?: boolean;
+    open_icon?: IconName;
+    closed_icon?: IconName;
+    toggle_controls_btn?: HTMLButtonElement;
+    controls?: HTMLDivElement;
+}
+declare const ControlPanel: import("svelte").Component<Props, {}, "controls_open">;
+type ControlPanel = ReturnType<typeof ControlPanel>;
+export default ControlPanel;

package/dist/Icon.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">import { icon_data } from './icons';
+let { icon, ...rest } = $props();
+const data = $derived.by(() => {
+    if (!(icon in icon_data)) {
+        console.error(`Icon '${icon}' not found`);
+        return icon_data.Alert; // fallback
+    }
+    return icon_data[icon];
+});
+</script>
+
+<svg viewBox={data.viewBox} fill="currentColor" {...rest}>
+  <path d={data.path} />
+</svg>
+
+<style>
+  svg {
+    width: 1em;
+    height: 1em;
+    display: inline-block;
+    vertical-align: middle;
+  }
+</style>

package/dist/Icon.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type IconName } from './icons';
+interface Props {
+    icon: IconName;
+    [key: string]: unknown;
+}
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/InfoCard.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">import { format_num } from './';
+let { data = [], title = ``, fallback = ``, fmt = `.2f`, as = `section`, style = null, title_snippet, fallback_snippet, ...rest } = $props();
+// rename fmt as default_fmt internally
+let default_fmt = $derived(fmt);
+</script>
+
+<svelte:element this={as} class="info-card" {style} {...rest}>
+  {#if title || title_snippet}
+    <h2>
+      {#if title_snippet}{@render title_snippet()}{:else}
+        {@html title}
+      {/if}
+    </h2>
+  {/if}
+  {#each data.filter((itm) =>
+      (!(`condition` in itm) || itm?.condition) &&
+      ![undefined, null].includes(itm.value)
+    ) as
+    { title, value, unit, fmt = default_fmt, tooltip }
+    (title + value + unit + fmt)
+  }
+    <div>
+      <span class="title" {title}>
+        {@html title}
+      </span>
+      <strong title={tooltip ?? null}>
+        {@html typeof value == `number` ? format_num(value, fmt) : value}
+        {#if unit}
+          <small>{unit}</small>
+        {/if}
+      </strong>
+    </div>
+  {:else}
+    {#if fallback_snippet}{@render fallback_snippet()}{:else}
+      {fallback}
+    {/if}
+  {/each}
+</svelte:element>
+
+<style>
+  .info-card {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    box-sizing: border-box;
+    border-radius: var(--ic-radius, 3pt);
+    padding: var(--ic-padding, 10pt 12pt);
+    margin: var(--ic-margin, 1em 0);
+    gap: var(--ic-gap, 10pt 5%);
+    background-color: var(--ic-bg, rgba(255, 255, 255, 0.1));
+    font-size: var(--ic-font-size);
+    width: var(--ic-width);
+  }
+  h2 {
+    grid-column: 1 / -1;
+    margin: 0;
+    border-bottom: 1px solid var(--ic-title-border-color, rgba(255, 255, 255, 0.3));
+  }
+  div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    white-space: nowrap;
+    gap: var(--ic-value-gap);
+  }
+  div > span.title {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  strong {
+    font-weight: 600;
+    margin: var(--ic-value-margin);
+    background-color: var(--ic-value-bg, rgba(255, 255, 255, 0.1));
+    padding: var(--ic-value-padding, 0 4pt);
+    border-radius: var(--ic-value-radius, 3pt);
+  }
+  strong small {
+    font-weight: normal;
+  }
+</style>

package/dist/InfoCard.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { PropertyOrigin } from '../types';
+import type { Snippet } from 'svelte';
+interface Props {
+    data?: {
+        title: string;
+        value?: string | number | number[] | null | PropertyOrigin;
+        unit?: string;
+        fmt?: string;
+        condition?: boolean | number | null;
+        tooltip?: string;
+    }[];
+    title?: string;
+    fallback?: string;
+    fmt?: string;
+    as?: string;
+    style?: string | null;
+    title_snippet?: Snippet;
+    fallback_snippet?: Snippet;
+    [key: string]: unknown;
+}
+declare const InfoCard: import("svelte").Component<Props, {}, "">;
+type InfoCard = ReturnType<typeof InfoCard>;
+export default InfoCard;

package/dist/Nucleus.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">"use strict";
+let { protons, neutrons, size = 100, radius = $bindable(size / 2), proton_color = `cornflowerblue`, neutron_color = `orange`, stroke = ``, proton_label = ` P`, neutron_label = ` N`, text_color = `white`, symbol = ``, } = $props();
+$effect(() => {
+    radius = size / 2;
+});
+let proton_frac = $derived(protons / (protons + neutrons));
+let neutron_frac = $derived(1 - proton_frac);
+let proton_circ = $derived(Math.PI * radius * proton_frac);
+let dash_array = $derived(`0 ${Math.PI * radius - proton_circ} ${proton_circ}`);
+let text = $derived({
+    'dominant-baseline': `middle`,
+    'text-anchor': `middle`,
+    fill: text_color,
+});
+</script>
+
+<svg width="100%" height="100%" viewBox="0 0 {size} {size}">
+  <circle r={radius} cx={radius} cy={radius} fill={neutron_color} {stroke}>
+    <title>Neutrons: {neutrons}</title>
+  </circle>
+
+  <circle
+    r={radius / 2}
+    cx={radius}
+    cy={radius}
+    fill={neutron_color}
+    stroke={proton_color}
+    stroke-width={radius}
+    stroke-dasharray={dash_array}
+  >
+    <title>Protons: {protons}</title>
+  </circle>
+
+  <text
+    x={radius + (radius / 2) * Math.cos(Math.PI * -proton_frac)}
+    y={radius + (radius / 2) * Math.sin(Math.PI * -proton_frac)}
+    {...text}
+  >
+    {protons} {proton_label}
+  </text>
+
+  <text
+    x={radius + (radius / 2) * Math.cos(Math.PI * neutron_frac)}
+    y={radius + (radius / 2) * Math.sin(Math.PI * neutron_frac)}
+    {...text}
+  >
+    {neutrons} {neutron_label}
+  </text>
+
+  {#if symbol}
+    <text class="symbol" x={radius} y={radius} {...text}>
+      {symbol}
+    </text>
+  {/if}
+</svg>
+
+<style>
+  text {
+    font-size: 11pt;
+  }
+  text.symbol {
+    font-size: 15pt;
+  }
+</style>

package/dist/Nucleus.svelte.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    protons: number;
+    neutrons: number;
+    radius?: number;
+    size?: number;
+    proton_color?: string;
+    neutron_color?: string;
+    stroke?: string;
+    proton_label?: string;
+    neutron_label?: string;
+    text_color?: string;
+    symbol?: string;
+}
+declare const Nucleus: import("svelte").Component<Props, {}, "radius">;
+type Nucleus = ReturnType<typeof Nucleus>;
+export default Nucleus;

package/dist/Spinner.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">"use strict";
+let { text = `Loading...`, ...rest } = $props();
+</script>
+
+<div class="spinner-overlay" role="status" aria-live="polite" {...rest}>
+  <div class="spinner" aria-hidden="true"></div>
+  <p>{text}</p>
+</div>
+
+<style>
+  .spinner-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: var(--spinner-bg, rgba(255, 255, 255, 0.9));
+    color: var(--spinner-text-color, #333);
+    backdrop-filter: blur(4px);
+    z-index: var(--spinner-z-index, 10);
+  }
+  .spinner {
+    width: var(--spinner-size, 40px);
+    height: var(--spinner-size, 40px);
+    border: var(--spinner-border-width, 4px) solid var(--spinner-track-color, #f3f3f3);
+    border-top: var(--spinner-border-width, 4px) solid var(--spinner-color, #007acc);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 1rem;
+    box-sizing: border-box;
+  }
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>

package/dist/Spinner.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    text?: string;
+    [key: string]: unknown;
+}
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/api.d.ts

@@ -0,0 +1,6 @@
+export declare const mp_build_bucket = "https://materialsproject-build.s3.amazonaws.com/collections/2022-10-28";
+export declare function decompress(blob: ReadableStream<Uint8Array> | null): Promise<string>;
+export declare function fetch_zipped<T>(url: string, { unzip }?: {
+    unzip?: boolean | undefined;
+}): Promise<T | null>;
+export declare function download(data: string | Blob, filename: string, type: string): void;

package/dist/api.js

@@ -0,0 +1,30 @@
+// TODO update to get MP details pages working again
+export const mp_build_bucket = `https://materialsproject-build.s3.amazonaws.com/collections/2022-10-28`;
+export async function decompress(blob) {
+    const unzip = new DecompressionStream(`gzip`);
+    const stream = blob?.pipeThrough(unzip);
+    return await new Response(stream).text();
+}
+export async function fetch_zipped(url, { unzip = true } = {}) {
+    const response = await fetch(url);
+    if (!response.ok) {
+        console.error(`${response.status} ${response.statusText} for ${response.url}`);
+        return null;
+    }
+    if (!unzip)
+        return (await response.blob());
+    return JSON.parse(await decompress(response.body));
+}
+// Function to download data to a file
+export function download(data, filename, type) {
+    const file = new Blob([data], { type });
+    const link = document.createElement(`a`);
+    const url = URL.createObjectURL(file);
+    link.style.display = `none`;
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    URL.revokeObjectURL(url);
+}