matterviz 0.3.6 → 0.4.0

package/dist/api/optimade.js

@@ -0,0 +1,141 @@
+// OPTIMADE API utilities for fetching structure data
+// Based on OPTIMADE 1.2.0 specification
+// CORS proxies for fallback reliability. Query-style proxies need the target URL
+// percent-encoded; path-suffix proxies need it verbatim (encoded can never succeed).
+const CORS_PROXIES = [
+    { prefix: `https://corsproxy.io/?`, encode: true },
+    { prefix: `https://api.allorigins.win/raw?url=`, encode: true },
+    { prefix: `https://cors-anywhere.herokuapp.com/`, encode: false },
+    { prefix: `https://thingproxy.freeboard.io/fetch/`, encode: false },
+    { prefix: `https://cors.bridged.cc/`, encode: false },
+];
+let cached_providers = null;
+let providers_cache_time = 0;
+const CACHE_DURATION = 5 * 60 * 1000;
+// Per-key timestamps: a shared one would let any resolution refresh every entry's TTL
+const resolved_provider_urls = {};
+const RESOLVED_URLS_CACHE_DURATION = 10 * 60 * 1000;
+async function fetch_with_cors_proxy(url) {
+    const headers = { Accept: `application/vnd.api+json`, 'User-Agent': `MatterViz/1.0` };
+    let direct;
+    try {
+        direct = await fetch(url, { headers });
+    }
+    catch {
+        // No response at all (network/CORS failure) — fall back to CORS proxies below
+    }
+    // A returned response means CORS succeeded. Surface a definitive HTTP error status
+    // directly (rather than masking a 404/500 behind callers' JSON.parse or the proxy
+    // fallback); only a thrown fetch (no response) warrants the proxies.
+    if (direct) {
+        if (direct.ok)
+            return direct;
+        throw new Error(`Request failed: ${direct.status} ${direct.statusText} for ${url}`);
+    }
+    for (const { prefix, encode } of CORS_PROXIES) {
+        try {
+            const response = await fetch(`${prefix}${encode ? encodeURIComponent(url) : url}`, {
+                headers,
+            });
+            if (response.ok)
+                return response;
+        }
+        catch {
+            // Try next proxy
+        }
+    }
+    throw new Error(`All CORS proxies failed for ${url}`);
+}
+async function resolve_provider_url(provider_base_url) {
+    const now = Date.now();
+    const cached = resolved_provider_urls[provider_base_url];
+    if (cached && now - cached.time < RESOLVED_URLS_CACHE_DURATION) {
+        return cached.url;
+    }
+    for (const endpoint of [`/links`, `/v1/links`]) {
+        try {
+            const response = await fetch_with_cors_proxy(`${provider_base_url}${endpoint}`);
+            const data = await response.json();
+            const self_link = data.data?.find((link) => link.type === `links` &&
+                link.attributes?.base_url &&
+                link.attributes.link_type === `child`);
+            const url = self_link?.attributes.base_url;
+            if (url) {
+                resolved_provider_urls[provider_base_url] = { url, time: now };
+                return url;
+            }
+        }
+        catch {
+            // Try next endpoint
+        }
+    }
+    resolved_provider_urls[provider_base_url] = { url: provider_base_url, time: now };
+    return provider_base_url;
+}
+export async function fetch_optimade_providers() {
+    const now = Date.now();
+    if (cached_providers && now - providers_cache_time < CACHE_DURATION) {
+        return cached_providers;
+    }
+    try {
+        const response = await fetch_with_cors_proxy(`https://providers.optimade.org/v1/links`);
+        const data = await response.json();
+        const providers = data.data
+            .filter((provider) => provider.attributes.base_url)
+            .map((provider) => ({
+            id: provider.id,
+            type: `links`,
+            attributes: {
+                name: provider.attributes.name,
+                description: provider.attributes.description,
+                base_url: provider.attributes.base_url,
+                homepage: provider.attributes.homepage,
+                version: provider.attributes.version,
+            },
+        }));
+        cached_providers = providers;
+        providers_cache_time = now;
+        return providers;
+    }
+    catch (error) {
+        console.warn(`Failed to fetch OPTIMADE providers:`, error);
+        throw error;
+    }
+}
+// URL encode/decode utilities for structure IDs with special characters
+export const encode_structure_id = (id) => encodeURIComponent(id).replaceAll('.', `%2E`).replaceAll('/', `%2F`);
+export const decode_structure_id = (encoded_id) => decodeURIComponent(encoded_id);
+export function detect_provider_from_slug(slug, providers) {
+    const decoded_slug = decode_structure_id(slug);
+    const prefix = decoded_slug.split(`-`)[0].toLowerCase();
+    return providers.find((provider) => provider.id === prefix)?.id ?? ``;
+}
+export async function fetch_optimade_structure(structure_id, provider, providers) {
+    const provider_config = providers.find((entry) => entry.id === provider);
+    if (!provider_config)
+        throw new Error(`Unknown provider: ${provider}`);
+    const base_url = await resolve_provider_url(provider_config.attributes.base_url);
+    const api_base = base_url.endsWith(`/v1`) ? base_url : `${base_url}/v1`;
+    const encoded_id = encode_structure_id(structure_id);
+    const response = await fetch_with_cors_proxy(`${api_base}/structures/${encoded_id}`);
+    const data = await response.json();
+    if (!data.data)
+        throw new Error(`Structure ${structure_id} not found`);
+    return Array.isArray(data.data) ? data.data[0] : data.data;
+}
+export async function fetch_suggested_structures(provider, providers, limit = 12) {
+    const provider_config = providers.find((entry) => entry.id === provider);
+    if (!provider_config)
+        throw new Error(`Unknown provider: ${provider}`);
+    try {
+        const base_url = await resolve_provider_url(provider_config.attributes.base_url);
+        const api_base = base_url.endsWith(`/v1`) ? base_url : `${base_url}/v1`;
+        const response = await fetch_with_cors_proxy(`${api_base}/structures?page_limit=${limit}&page_offset=0`);
+        const data = await response.json();
+        return Array.isArray(data.data) ? data.data : [];
+    }
+    catch (error) {
+        console.warn(`Failed to fetch suggested structures for ${provider}:`, error);
+        return [];
+    }
+}

package/dist/app.css

@@ -0,0 +1,244 @@
+/* CSS variables are unlayered so they're available to both layers and to
+   components that reference them via var(). Custom properties inherit
+   naturally regardless of layer ordering. */
+:root {
+  --theme-transition-duration: 0.3s;
+  --text-color: #eee;
+  --page-bg: #090019;
+  --max-text-width: 50em;
+
+  --sms-max-width: 20em;
+  --sms-min-height: 19pt;
+  --sms-text-color: var(--text-color);
+
+  /* Svelte MultiSelect */
+  --sms-options-bg: var(--page-bg);
+  --sms-active-color: light-dark(var(--accent-color), cornflowerblue);
+  --sms-li-active-bg: light-dark(rgba(100, 149, 237, 0.25), cornflowerblue);
+  --sms-selected-bg: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.15));
+  --border-radius: 3pt;
+
+  /* App-wide overlay stack: controls < fullscreen/nav < dialogs < floating options.
+     These must exceed Threlte HTML overlays, which use very high z-index values. */
+  --z-index-overlay-controls: 100000000;
+  --z-index-overlay-nav: 100000001;
+  --z-index-overlay-dialog: 100000002;
+  --z-index-overlay-options: 100000003;
+}
+
+/* App-shell styles: page layout, typography, headings, navigation.
+   These are only needed by the standalone matterviz demo site.
+   When embedded in a host framework (Dash/Mantine, React, etc.),
+   the host's unlayered CSS automatically takes precedence. */
+@layer matterviz-shell {
+  /* Targeted theme transitions for performance */
+  :where(body, main, button, a, code, kbd, pre, blockquote, textarea, table, input),
+  :where(select, label, .theme-control, .toc, svg, path, circle, rect, text),
+  :where(.info-pane, .pane-header, .pane-content, .close-button),
+  :where(nav > a),
+  :where(.theme-control, .theme-control label, .theme-control select) {
+    transition:
+      background-color var(--theme-transition-duration) ease,
+      color var(--theme-transition-duration) ease,
+      border-color var(--theme-transition-duration) ease,
+      fill var(--theme-transition-duration) ease,
+      stroke var(--theme-transition-duration) ease,
+      box-shadow var(--theme-transition-duration) ease;
+  }
+  body {
+    background: var(--page-bg);
+    padding: 5vh 3vw 3vh;
+    font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
+    margin: auto;
+    color: var(--text-color);
+    line-height: 1.5;
+    /* Sticky footer: footer stays at bottom when content is short */
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    box-sizing: border-box;
+  }
+  main {
+    margin: auto;
+    width: 100%;
+    max-width: var(--max-text-width);
+    container-type: inline-size;
+    flex: 1; /* Grow to fill available space (sticky footer) */
+  }
+  a {
+    color: var(--accent-color, cornflowerblue);
+    text-decoration: none;
+  }
+  a:hover {
+    color: var(--accent-hover-color, orange);
+  }
+  blockquote {
+    border-left: 3pt solid var(--accent-color, cornflowerblue);
+    padding: 3pt 7pt;
+    background: rgba(255, 255, 255, 0.2);
+    margin: 1em 0;
+  }
+  blockquote p:first-child {
+    margin-top: 0;
+  }
+  blockquote p:last-child {
+    margin-bottom: 0;
+  }
+  :where(h1, h2, h3, h4, h5, h6) {
+    scroll-margin-top: 100px;
+  }
+  :where(h1, h2, h3, h4, h5, h6):target {
+    color: var(--accent-color, cornflowerblue);
+  }
+  body main > :where(h1, h2, h3, h4, h5, h6) {
+    text-align: center;
+  }
+  /* style heading anchors added by heading_anchors attachment from svelte-multiselect */
+  :where(h2, h3, h4, h5, h6) a[aria-hidden='true'] {
+    transition: 0.3s;
+    margin-left: 4pt;
+    opacity: 0;
+  }
+  :where(h2, h3, h4, h5, h6):hover a[aria-hidden='true'] {
+    opacity: 1;
+  }
+  .full-bleed {
+    --margin: 5vw;
+    width: calc(100vw - 2 * var(--margin)) !important;
+    margin-left: calc(-50vw + 50% + var(--margin));
+    max-width: none !important;
+  }
+  .bleed-1400 {
+    --margin: 5vw;
+    width: min(1400px, calc(100vw - 2 * var(--margin))) !important;
+    margin-left: calc(-50vw + 50% + max(var(--margin), (100vw - 1400px) / 2));
+    max-width: none !important;
+  }
+  .copy-btn {
+    position: absolute;
+    top: 9pt;
+    right: 9pt;
+    background: var(--btn-bg);
+    color: var(--btn-color);
+  }
+}
+
+/* Component base styles: form controls, tables, code blocks.
+   MatterViz components (Structure, ConvexHull, plots, etc.) depend on
+   these for consistent appearance. Also layered so host frameworks
+   can override if needed, but these target elements that typically
+   only appear inside MatterViz component trees. */
+@layer matterviz-components {
+  button,
+  a.btn {
+    color: var(--text-color);
+    cursor: pointer;
+    border: none;
+    border-radius: var(--border-radius);
+    padding: 2pt 4pt;
+  }
+  button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  code,
+  kbd {
+    overflow-wrap: break-word;
+    padding: 1pt 3pt;
+    border-radius: var(--border-radius);
+    background-color: var(--code-bg);
+  }
+  kbd {
+    font-size: larger;
+  }
+  pre code {
+    background-color: transparent;
+    display: inline-block;
+    padding: 0;
+    width: 100%;
+  }
+  pre {
+    position: relative;
+    border-radius: var(--border-radius);
+    font-size: 0.95em;
+    background-color: var(--pre-bg);
+    padding: 1ex 1em;
+    overflow-x: auto;
+  }
+  textarea {
+    display: block;
+    width: 100%;
+    min-height: 100px;
+    box-sizing: border-box;
+    margin: 1em auto;
+  }
+  /* Theme-aware form controls (works consistently in notebooks and VSCode/Cursor webviews) */
+  :is(
+    input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']),
+    textarea,
+    select
+  ) {
+    background-color: var(--surface-bg);
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    padding: 2px 6px;
+  }
+  :is(
+    input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']),
+    textarea,
+    select
+  ):focus {
+    outline: none;
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 25%, transparent);
+  }
+  :is(input, textarea)::placeholder {
+    color: var(--text-color-muted);
+  }
+  select option {
+    background-color: var(--surface-bg);
+    color: var(--text-color);
+  }
+  /* Modern flat input styling — only reset border for non-text inputs */
+  input:is([type='checkbox'], [type='radio'], [type='range'], [type='color']) {
+    border: none;
+  }
+  input[type='number'] {
+    min-width: 40px;
+    width: auto;
+  }
+  input[type='color'] {
+    border: none;
+    padding: 0;
+    outline: none;
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    cursor: pointer;
+  }
+  input[type='color']::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+  input[type='color']::-webkit-color-swatch {
+    border: none;
+  }
+  table {
+    display: block;
+    max-width: 100%;
+    overflow: auto;
+    border-collapse: collapse;
+  }
+  table :is(td, th) {
+    border: 1px solid var(--border-color, gray);
+    padding: 3pt 12pt;
+  }
+  table.roomy :is(td, th) {
+    padding: 5pt 9pt;
+  }
+  tbody tr:nth-child(odd) {
+    background: color-mix(in hsl, var(--page-bg, black), var(--text-color) 2%);
+  }
+  :where(ul.selected > li button, button.remove-all) {
+    background-color: transparent !important;
+  }
+}