matterviz 0.3.5 → 0.3.6

package/dist/src/lib/FilePicker.svelte

@@ -0,0 +1,360 @@
+<script lang="ts">
+  import type { FileInfo } from '$lib/io'
+  import { tooltip } from 'svelte-multiselect/attachments'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  // Delay for distinguishing click from double-click (ms)
+  const CLICK_DELAY = 250
+
+  let {
+    files = [],
+    active_files = [],
+    show_category_filters = false,
+    layout = `wrap`,
+    on_drag_start,
+    on_drag_end,
+    on_click,
+    on_dblclick,
+    type_mapper,
+    file_type_colors = {
+      cif: `rgba(100, 149, 237, 0.8)`,
+      xyz: `rgba(50, 205, 50, 0.8)`,
+      extxyz: `rgba(50, 205, 50, 0.8)`,
+      poscar: `rgba(255, 140, 0, 0.8)`,
+      json: `rgba(138, 43, 226, 0.8)`,
+      traj: `rgba(255, 192, 203, 0.8)`,
+      hdf5: `rgba(255, 69, 0, 0.8)`,
+      gz: `rgba(169, 169, 169, 0.8)`,
+      md: `rgba(255, 215, 0, 0.8)`,
+      yaml: `rgba(255, 0, 255, 0.8)`,
+      xdatcar: `rgba(255, 215, 0, 0.8)`,
+      tdb: `rgba(0, 188, 212, 0.8)`,
+      chgcar: `rgba(59, 130, 246, 0.8)`,
+      parchg: `rgba(99, 102, 241, 0.8)`,
+      locpot: `rgba(245, 158, 11, 0.8)`,
+      elfcar: `rgba(16, 185, 129, 0.8)`,
+      cube: `rgba(168, 85, 247, 0.8)`,
+    },
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> & {
+    files?: FileInfo[]
+    active_files?: string[]
+    show_category_filters?: boolean
+    layout?: `wrap` | `vertical`
+    on_drag_start?: (file: FileInfo, event: DragEvent) => void
+    on_drag_end?: () => void
+    on_click?: (file: FileInfo, event: MouseEvent | KeyboardEvent) => void
+    on_dblclick?: (file: FileInfo, event: MouseEvent) => void
+    type_mapper?: (file: FileInfo) => string
+    file_type_colors?: Record<string, string>
+  } = $props()
+
+  let active_category_filter = $state<string | null>(null)
+  let active_type_filter = $state<string | null>(null)
+  type FilterKind = `category` | `type`
+
+  // Timer for distinguishing click from double-click (per-component state)
+  let click_timer: ReturnType<typeof setTimeout> | null = null
+  let click_timer_file: string | null = null
+
+  const clear_click_timer = () => {
+    if (click_timer) clearTimeout(click_timer)
+    click_timer = null
+    click_timer_file = null
+  }
+
+  // Helper function to get the base file type (removing .gz extension)
+  const get_base_file_type = (file: FileInfo): string => {
+    if (type_mapper) return type_mapper(file)
+    if (file.type) return file.type.toLowerCase()
+
+    let base_name = file.name.toLowerCase()
+    if (base_name.endsWith(`.gz`)) base_name = base_name.slice(0, -3)
+    return base_name.split(`.`).pop() || `file`
+  }
+
+  // Helper function to create normalized category identifier for filtering
+  const get_category_id = (file: FileInfo): string => {
+    if (!file.category) return `(uncategorized)`
+    return `${file.category_icon ?? ``} ${file.category}`.trim()
+  }
+
+  // Filter files based on active filters
+  let filtered_files = $derived(
+    files.filter((file) => {
+      if (active_category_filter) {
+        return get_category_id(file) === active_category_filter
+      }
+      if (active_type_filter) {
+        const normalized_type = get_base_file_type(file)
+        return normalized_type === active_type_filter
+      }
+      return true
+    }),
+  )
+
+  const toggle_filter = (kind: FilterKind, filter: string) => {
+    if (kind === `category`) {
+      active_category_filter = active_category_filter === filter ? null : filter
+      active_type_filter = null
+    } else {
+      active_type_filter = active_type_filter === filter ? null : filter
+      active_category_filter = null
+    }
+  }
+
+  const handle_drag_start = (file: FileInfo) => (event: DragEvent) => {
+    const file_url = file.url || file.name // Get the URL to drag (falling back to name)
+
+    const payload = JSON.stringify({
+      name: file.name,
+      url: file_url,
+      type: file.type || get_base_file_type(file),
+      category: file.category,
+    })
+    // Set file data as JSON for applications that can handle it
+    event.dataTransfer?.setData(`application/json`, payload)
+
+    // Also set plain text as fallback for external applications
+    event.dataTransfer?.setData(`text/plain`, file_url)
+
+    on_drag_start?.(file, event)
+  }
+
+  // Get unique file types/categories for format/category filters
+  let uniq_formats = $derived([...new Set(files.map(get_base_file_type))].sort())
+  let uniq_categories = $derived(
+    [...new Set(files.map(get_category_id))].filter(Boolean).sort(),
+  )
+</script>
+
+<div class="file-picker" class:vertical={layout === `vertical`} {...rest}>
+  <div class="legend">
+    {#each show_category_filters ? uniq_categories : [] as category (category)}
+      {@const is_active = active_category_filter === category}
+      <span
+        class="legend-item"
+        class:active={is_active}
+        onclick={() => category && toggle_filter(`category`, category)}
+        onkeydown={(evt) =>
+        (evt.key === `Enter` || evt.key === ` `) &&
+        category &&
+        toggle_filter(`category`, category)}
+        role="button"
+        tabindex="0"
+        aria-pressed={is_active}
+        {@attach tooltip({ content: `Filter to show only ${category}` })}
+      >
+        {category}
+      </span>
+    {/each}
+    {#if show_category_filters && uniq_categories.length > 0 &&
+        uniq_formats.length > 0}
+      <span class="divider"></span>
+    {/if}
+
+    {#each uniq_formats as format (format)}
+      {@const is_active = active_type_filter === format}
+      <span
+        class="legend-item format-item"
+        class:active={is_active}
+        onclick={() => toggle_filter(`type`, format)}
+        onkeydown={(evt) =>
+        (evt.key === `Enter` || evt.key === ` `) && toggle_filter(`type`, format)}
+        role="button"
+        tabindex="0"
+        {@attach tooltip({ content: `Filter to show only ${format.toUpperCase()} files` })}
+      >
+        <span
+          class="format-circle"
+          style:background-color={file_type_colors[format]}
+        ></span> {format.toUpperCase()}
+      </span>
+    {/each}
+
+    {#if active_category_filter || active_type_filter}
+      <button
+        {@attach tooltip({ content: `Clear all filters` })}
+        class="clear-filter"
+        onclick={() => [active_category_filter, active_type_filter] = [null, null]}
+      >
+        ✕
+      </button>
+    {/if}
+  </div>
+
+  {#each filtered_files as file (file.name)}
+    {@const base_type = get_base_file_type(file)}
+    <div
+      class="file-item"
+      class:active={active_files.includes(file.name)}
+      style:background-color={file_type_colors[base_type]?.replace(`0.8`, `0.08`)}
+      draggable="true"
+      ondragstart={handle_drag_start(file)}
+      ondragend={() => on_drag_end?.()}
+      onclick={(event) => {
+        clear_click_timer()
+        if (on_dblclick) {
+          // Delay click to allow double-click to cancel it
+          const target_file = file.name
+          click_timer_file = target_file
+          click_timer = setTimeout(() => {
+            if (click_timer_file === target_file) {
+              clear_click_timer()
+              on_click?.(file, event)
+            }
+          }, CLICK_DELAY)
+        } else {
+          on_click?.(file, event)
+        }
+      }}
+      ondblclick={(event) => {
+        clear_click_timer()
+        on_dblclick?.(file, event)
+      }}
+      onkeydown={(event) => {
+        if ([`Enter`, ` `].includes(event.key)) {
+          event.preventDefault()
+          clear_click_timer()
+          on_click?.(file, event)
+        }
+      }}
+      role="button"
+      tabindex="0"
+      title={on_click
+      ? `Click to load or drag this ${base_type.toUpperCase()} file`
+      : `Drag this ${base_type.toUpperCase()} file`}
+    >
+      {#if file.label}
+        <span
+          class="file-type-badge"
+          style:background-color={file_type_colors[base_type] ?? `rgba(128,128,128,0.8)`}
+        >{base_type.toUpperCase()}</span>
+      {/if}
+      <div class="file-name">
+        {file.category ? `${file.category_icon} ` : ``}{file.label ?? file.name}
+      </div>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .file-picker {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5em;
+    flex: 1;
+    align-content: start;
+  }
+  .file-picker.vertical {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: 2px;
+    overflow-y: auto;
+  }
+  .file-picker.vertical .file-item {
+    border-radius: 4px;
+    padding: 3px 8px;
+  }
+  .file-picker.vertical .legend {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    margin-bottom: 0.3em;
+  }
+  .legend {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 2pt 5pt;
+    font-size: 0.6em;
+    opacity: 0.8;
+    margin: 0 0 0.5em;
+  }
+  .divider {
+    width: 1px;
+    align-self: stretch;
+    background: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
+    margin-inline: 0.3em;
+  }
+  .legend-item {
+    cursor: pointer;
+    padding: 0.2em 0.4em;
+    border-radius: 3px;
+    transition: all 0.2s ease;
+    border: 1px solid transparent;
+  }
+  .legend-item:hover {
+    opacity: 1;
+    background: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1));
+    border-color: light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.3));
+  }
+  .legend-item.active {
+    opacity: 1;
+    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2));
+    border-color: light-dark(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.5));
+    font-weight: bold;
+  }
+  .clear-filter {
+    background-color: var(--btn-bg);
+    border-radius: 50%;
+    display: flex;
+    place-content: center;
+  }
+  .clear-filter:hover {
+    background-color: var(--btn-bg-hover);
+  }
+  .format-item {
+    display: flex;
+    align-items: center;
+    gap: 0.3em;
+  }
+  .format-circle {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    display: inline-block;
+  }
+  .file-item {
+    display: flex;
+    align-items: center;
+    padding: 4pt 8pt;
+    border: 1px solid light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.2));
+    border-radius: 20px;
+    cursor: grab;
+    background: light-dark(rgba(0, 0, 0, 0.02), rgba(255, 255, 255, 0.1));
+    transition: all 0.2s ease;
+    gap: 4pt;
+    &:has(.file-type-badge) {
+      padding-left: 3pt;
+    }
+  }
+  .file-item.active {
+    border-color: var(--success-color, #00ff00);
+    background: light-dark(rgba(0, 255, 0, 0.12), rgba(0, 255, 0, 0.2));
+    box-shadow: 0 0 8px light-dark(rgba(0, 255, 0, 0.25), rgba(0, 255, 0, 0.35));
+  }
+  .file-item:active {
+    cursor: grabbing;
+  }
+  .file-item:hover {
+    border-color: var(--accent-color, #007acc);
+    background: light-dark(rgba(0, 122, 204, 0.15), rgba(0, 122, 204, 0.25));
+    filter: brightness(1.1);
+  }
+  .file-type-badge {
+    font-size: 0.5em;
+    font-weight: 700;
+    letter-spacing: 0.03em;
+    padding: 1px 5px;
+    border-radius: 10px;
+    color: white;
+    white-space: nowrap;
+    line-height: 1.4;
+  }
+  .file-name {
+    font-size: 0.7em;
+    line-height: 1.1;
+    white-space: pre-line;
+  }
+</style>

package/dist/src/lib/MillerIndexInput.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  // Compact single-field input for Miller indices (hkl).
+  // Accepts "001", "111", "-101", "1 0 1", "10, 0, 1" and emits a Vec3 tuple.
+  import type { Vec3 } from '$lib/math'
+
+  let { value = $bindable([0, 0, 1]) }: { value?: Vec3 } = $props()
+
+  // Format: compact "001" for single-digit, spaced "10 0 1" for multi-digit
+  let hkl_text = $derived(
+    value.every((component) => Math.abs(component) < 10) ? value.join(``) : value.join(` `),
+  )
+
+  // Parse hkl string: supports compact "001"/"-101" and spaced/comma "10, 0, 1"
+  function parse_hkl(input: string): Vec3 | null {
+    // Try spaced/comma format first (handles multi-digit)
+    const spaced = input.trim().split(/[,\s]+/)
+    if (spaced.length === 3) {
+      const nums = spaced.map(Number)
+      if (nums.every((num) => !isNaN(num))) return nums as Vec3
+    }
+    // Fall back to compact single-digit format: "001", "-101"
+    const compact = input.replace(/\s+/g, ``)
+    const match = compact.match(/^(-?\d)(-?\d)(-?\d)$/)
+    if (match) return [Number(match[1]), Number(match[2]), Number(match[3])] as Vec3
+    return null
+  }
+
+  function oninput(event: Event & { currentTarget: HTMLInputElement }) {
+    const parsed = parse_hkl(event.currentTarget.value)
+    if (parsed) value = parsed
+  }
+</script>
+
+<label class="miller-input">
+  <span>hkl</span>
+  <input
+    type="text"
+    value={hkl_text}
+    {oninput}
+    placeholder="001"
+    maxlength="12"
+    title="Miller indices (e.g. 001, -101, or 10 0 1)"
+  />
+</label>
+
+<style>
+  .miller-input {
+    display: flex;
+    align-items: center;
+    gap: 0.3em;
+    span {
+      font-weight: 600;
+      font-size: 0.85em;
+    }
+    input {
+      width: 4em;
+      padding: 0.15em 0.3em;
+      border: 1px solid var(--border-color, #ccc);
+      border-radius: 4px;
+      font-family: monospace;
+      font-size: 0.9em;
+      text-align: center;
+      box-sizing: border-box;
+    }
+  }
+</style>

package/dist/src/lib/api/mp.ts

@@ -0,0 +1,26 @@
+import { fetch_zipped } from '$lib/io/fetch'
+
+// Materials Project S3 bucket for pre-computed data (may be outdated)
+export const mp_bucket = `https://materialsproject-build.s3.amazonaws.com/collections/2022-10-28`
+
+// Fetch all material data in parallel
+export async function fetch_material_data<T extends Record<string, unknown>>(
+  material_id: string,
+  bucket: string = mp_bucket,
+): Promise<{ summary: T | null; similarity: T | null; robocrys: T | null }> {
+  try {
+    const results = await Promise.allSettled([
+      fetch_zipped<T>(`${bucket}/summary/${material_id}.json.gz`),
+      fetch_zipped<T>(`${bucket}/similarity/${material_id}.json.gz`),
+      fetch_zipped<T>(`${bucket}/robocrys/${material_id}.json.gz`),
+    ])
+    return {
+      summary: results[0].status === `fulfilled` ? results[0].value : null,
+      similarity: results[1].status === `fulfilled` ? results[1].value : null,
+      robocrys: results[2].status === `fulfilled` ? results[2].value : null,
+    }
+  } catch (err) {
+    console.error(`Failed to fetch material data:`, err)
+    return { summary: null, similarity: null, robocrys: null }
+  }
+}

package/dist/src/lib/api/optimade.ts

@@ -0,0 +1,204 @@
+// OPTIMADE API utilities for fetching structure data
+// Based on OPTIMADE 1.2.0 specification
+
+export interface OptimadeStructure {
+  id: string
+  type: `structures`
+  attributes: {
+    chemical_formula_descriptive?: string
+    chemical_formula_reduced?: string
+    chemical_formula_anonymous?: string
+    dimension_types?: number[]
+    nperiodic_dimensions?: number
+    lattice_vectors?: number[][]
+    cartesian_site_positions?: number[][]
+    species_at_sites?: string[]
+    species?: {
+      name: string
+      chemical_symbols?: string[]
+      concentration?: number[]
+      mass?: number[]
+      original_name?: string
+    }[]
+    n_sites?: number
+    last_modified?: string
+    immutable_id?: string
+    [key: string]: unknown
+  }
+  relationships?: Record<string, unknown>
+  links?: Record<string, unknown>
+}
+
+export interface OptimadeProvider {
+  id: string
+  type: `links`
+  attributes: {
+    name: string
+    description?: string
+    base_url: string
+    homepage?: string
+    version?: string
+    [key: string]: unknown
+  }
+}
+
+// Multiple CORS proxies for fallback reliability
+const CORS_PROXIES = [
+  `https://corsproxy.io/?`,
+  `https://api.allorigins.win/raw?url=`,
+  `https://cors-anywhere.herokuapp.com/`,
+  `https://thingproxy.freeboard.io/fetch/`,
+  `https://cors.bridged.cc/`,
+]
+
+let cached_providers: OptimadeProvider[] | null = null
+let providers_cache_time = 0
+const CACHE_DURATION = 5 * 60 * 1000
+
+const resolved_provider_urls: Record<string, string> = {}
+let resolved_urls_cache_time = 0
+const RESOLVED_URLS_CACHE_DURATION = 10 * 60 * 1000
+
+async function fetch_with_cors_proxy(url: string): Promise<Response> {
+  try {
+    const direct_response = await fetch(url, {
+      headers: { Accept: `application/vnd.api+json`, 'User-Agent': `MatterViz/1.0` },
+    })
+    if (direct_response.ok) return direct_response
+  } catch {
+    // Direct access failed, will try CORS proxies
+  }
+
+  for (const proxy of CORS_PROXIES) {
+    try {
+      const response = await fetch(`${proxy}${encodeURIComponent(url)}`, {
+        headers: { Accept: `application/vnd.api+json`, 'User-Agent': `MatterViz/1.0` },
+      })
+      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: string): Promise<string> {
+  const now = Date.now()
+  if (
+    resolved_provider_urls[provider_base_url] &&
+    now - resolved_urls_cache_time < RESOLVED_URLS_CACHE_DURATION
+  ) {
+    return resolved_provider_urls[provider_base_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: { type: string; attributes?: { base_url?: string; link_type?: string } }) =>
+          link.type === `links` &&
+          link.attributes?.base_url &&
+          link.attributes.link_type === `child`,
+      )
+
+      if (self_link?.attributes.base_url) {
+        resolved_provider_urls[provider_base_url] = self_link.attributes.base_url
+        resolved_urls_cache_time = now
+        return self_link.attributes.base_url
+      }
+    } catch {
+      // Try next endpoint
+    }
+  }
+
+  resolved_provider_urls[provider_base_url] = provider_base_url
+  resolved_urls_cache_time = now
+  return provider_base_url
+}
+
+export async function fetch_optimade_providers(): Promise<OptimadeProvider[]> {
+  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: { data: OptimadeProvider[] } = await response.json()
+    const providers = data.data
+      .filter((provider) => provider.attributes.base_url)
+      .map((provider) => ({
+        id: provider.id,
+        type: `links` as const,
+        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: string) =>
+  encodeURIComponent(id).replace(/\./g, `%2E`).replace(/\//g, `%2F`)
+
+export const decode_structure_id = (encoded_id: string) => decodeURIComponent(encoded_id)
+
+export function detect_provider_from_slug(slug: string, providers: OptimadeProvider[]) {
+  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: string,
+  provider: string,
+  providers: OptimadeProvider[],
+): Promise<OptimadeStructure | null> {
+  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: string,
+  providers: OptimadeProvider[],
+  limit: number = 12,
+): Promise<OptimadeStructure[]> {
+  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 []
+  }
+}