matterviz 0.1.5 → 0.1.7

package/dist/DraggablePanel.svelte

@@ -78,14 +78,32 @@ function handle_click_outside(event) {
     const is_inside_panel = panel_div &&
         (target === panel_div || panel_div.contains(target));
     if (!is_toggle_button && !is_inside_panel && !has_been_dragged &&
-        !currently_dragging) {
+        !currently_dragging)
         close_panel();
-    }
 }
 // Button click handler
-function handle_button_click(event, action) {
+const handle_button_click = (action) => (event) => {
     event.stopPropagation();
     action();
+};
+// Debounced resize handler for better performance
+let resize_timeout = $state(undefined);
+function handle_resize() {
+    if (!show || has_been_dragged || currently_dragging)
+        return;
+    if (resize_timeout)
+        clearTimeout(resize_timeout);
+    const current_timeout = setTimeout(() => {
+        if (resize_timeout !== current_timeout)
+            return;
+        if (show && toggle_panel_btn && !has_been_dragged && panel_div) {
+            const pos = calculate_position();
+            initial_position = pos;
+            panel_div.style.left = pos.left;
+            panel_div.style.top = pos.top;
+        }
+    }, 50); // Debounce resize events
+    resize_timeout = current_timeout;
 }
 // Position panel when shown
 $effect(() => {
@@ -97,20 +115,19 @@ $effect(() => {
                 left: pos.left,
                 top: pos.top,
                 right: `auto`,
-                bottom: `auto`,
             });
         }
     }
 });
 </script>
 
-<svelte:window onkeydown={on_keydown} />
+<svelte:window onkeydown={on_keydown} onresize={handle_resize} />
 <svelte:document onclick={handle_click_outside} />
 
 {#if show_panel}
   <button
     bind:this={toggle_panel_btn}
-    onclick={(event) => handle_button_click(event, custom_toggle || toggle_panel)}
+    onclick={handle_button_click(custom_toggle || toggle_panel)}
     aria-expanded={show}
     aria-controls="draggable-panel"
     {...toggle_props}
@@ -137,32 +154,30 @@ $effect(() => {
     {...panel_props}
     class="draggable-panel {show ? `panel-open` : ``} {panel_props.class ?? ``}"
   >
-    <div class="panel-header">
-      <div class="control-buttons">
-        {#if show_control_buttons}
-          <button
-            class="reset-button"
-            onclick={(event) => handle_button_click(event, reset_position)}
-            title="Reset panel position"
-            aria-label="Reset panel position"
-          >
-            <Icon icon="Reset" style="width: 1.25em; height: 1.25em" />
-          </button>
-          <button
-            class="close-button"
-            onclick={(event) => handle_button_click(event, close_panel)}
-            title="Close panel"
-            aria-label="Close panel"
-          >
-            <Icon icon="Cross" style="width: 1.25em; height: 1.25em" />
-          </button>
-        {/if}
-        <Icon
-          icon="DragIndicator"
-          class="drag-handle"
-          style="width: 1.25em; height: 1.25em"
-        />
-      </div>
+    <div class="control-buttons">
+      {#if show_control_buttons}
+        <button
+          class="reset-button"
+          onclick={handle_button_click(reset_position)}
+          title="Reset panel position"
+          aria-label="Reset panel position"
+        >
+          <Icon icon="Reset" style="width: 1.25em; height: 1.25em" />
+        </button>
+        <button
+          class="close-button"
+          onclick={handle_button_click(close_panel)}
+          title="Close panel"
+          aria-label="Close panel"
+        >
+          <Icon icon="Cross" style="width: 1.25em; height: 1.25em" />
+        </button>
+      {/if}
+      <Icon
+        icon="DragIndicator"
+        class="drag-handle"
+        style="width: 1.25em; height: 1.25em"
+      />
     </div>
 
     {@render children()}
@@ -178,7 +193,7 @@ $effect(() => {
     border-radius: var(--panel-toggle-border-radius, 3pt);
     background-color: transparent;
     transition: background-color 0.2s;
-    font-size: clamp(1em, 2cqw, 1.6em);
+    font-size: var(--panel-toggle-font-size, clamp(1.1em, calc(1cqw + 1cqh), 1.4em));
   }
   button.panel-toggle:hover {
     background-color: color-mix(in srgb, currentColor 8%, transparent);
@@ -190,7 +205,7 @@ $effect(() => {
     border-radius: 6px;
     padding: var(--panel-padding, 1ex);
     box-sizing: border-box;
-    z-index: 10;
+    z-index: var(--panel-z-index, 10);
     display: grid;
     gap: 4pt;
     text-align: left;
@@ -198,7 +213,8 @@ $effect(() => {
     transition: opacity 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
     width: 28em;
     max-width: 90cqw;
-    overflow: auto;
+    overflow-x: hidden;
+    overflow-y: auto;
     max-height: calc(100vh - 3em);
     pointer-events: auto;
   }
@@ -210,14 +226,14 @@ $effect(() => {
   }
   /* Panel content styling */
   .draggable-panel :global(h4) {
-    margin: 8pt 0 2pt;
-    font-size: 0.9em;
+    margin: 2pt 0;
+    font-size: 0.95em;
   }
   .draggable-panel :global(hr) {
     border: none;
     background: var(--panel-hr-bg, rgba(255, 255, 255, 0.1));
-    margin: 0;
-    height: 0.5px;
+    margin: 4pt 0;
+    height: 1px;
   }
   .draggable-panel :global(label) {
     display: flex;
@@ -227,6 +243,7 @@ $effect(() => {
   .draggable-panel :global(input[type='text']) {
     flex: 1;
     padding: 4px 6px;
+    margin: var(--panel-input-margin, 0 0 0 5pt);
   }
   .draggable-panel :global(input[type='text'].invalid) {
     border-color: var(--error-color, #ff6b6b);
@@ -237,11 +254,9 @@ $effect(() => {
     box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
   }
   .draggable-panel :global(input[type='range']) {
-    margin-left: auto;
+    margin-left: 4pt;
     width: 100px;
     flex-shrink: 0;
-  }
-  .draggable-panel :global(input[type='range']) {
     flex: 1;
     min-width: 60px;
   }
@@ -282,27 +297,28 @@ $effect(() => {
     gap: 8pt;
     align-items: center;
   }
-  .draggable-panel :global(.panel-row label.slider-control) {
+  .draggable-panel :global(.panel-grid) {
+    display: grid;
+    gap: 8pt;
+    align-items: center;
+  }
+  .draggable-panel :global(label:has(input[type='range'])) {
     flex: 1;
   }
-  /* Panel header styling */
-  .draggable-panel .panel-header {
+  .draggable-panel .control-buttons {
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    right: 5px;
-    height: 1.3em;
-    z-index: 10;
-    pointer-events: none; /* Allow events to pass through to children */
-  }
-  .draggable-panel .control-buttons {
-    display: flex;
+    position: sticky;
+    top: 0;
+    right: 0;
+    height: 0;
+    /* Cancel the 12 pt top/bottom padding without relying on width-based percentages */
     gap: 5px;
-    align-items: center;
-    pointer-events: auto; /* Re-enable pointer events for buttons */
+    padding: 12pt 3pt;
+    margin-bottom: calc(-2 * 12pt);
+    box-sizing: border-box;
+    justify-self: end;
   }
   .draggable-panel :global(.drag-handle) {
     width: 1.3em;

package/dist/FilePicker.svelte

@@ -0,0 +1,263 @@
+<script lang="ts">let { files, active_files = [], show_category_filters = false, category_labels = {}, on_drag_start, on_drag_end, 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)`,
+}, ...rest } = $props();
+let active_category_filter = $state(null);
+let active_type_filter = $state(null);
+// Helper function to get the base file type (removing .gz extension)
+const get_base_file_type = (filename) => {
+    // Use custom type mapper if provided
+    if (type_mapper)
+        return type_mapper(filename);
+    let base_name = filename.toLowerCase();
+    // Remove .gz extension if present
+    if (base_name.endsWith(`.gz`))
+        base_name = base_name.slice(0, -3);
+    return base_name.split(`.`).pop() || `file`;
+};
+// Filter files based on active filters
+let filtered_files = $derived(files.filter((file) => {
+    if (active_category_filter && file.category) {
+        return file.category === active_category_filter;
+    }
+    if (active_type_filter) {
+        const normalized_type = get_base_file_type(file.name);
+        return normalized_type === active_type_filter;
+    }
+    return true;
+}));
+const toggle_filter = (kind, filter) => {
+    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) => (event) => {
+    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.name),
+        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 for format filters
+let uniq_formats = $derived([...new Set(files.map((file) => get_base_file_type(file.name)))].sort());
+// Get unique category types for category filters
+let uniq_categories = $derived(show_category_filters
+    ? [...new Set(files.map((file) => file.category))].sort().filter(Boolean)
+    : []);
+export {};
+</script>
+
+<div class="file-picker" {...rest}>
+  <div class="legend">
+    {#if show_category_filters}
+      {#each 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"
+          title="Filter to show only {category}"
+        >
+          {(category && category_labels[category]) || category}
+        </span>
+      {/each}
+      {#if uniq_categories.length > 0 && uniq_formats.length > 0}&emsp;{/if}
+    {/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"
+        title="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
+        title="Clear all filters"
+        class="clear-filter"
+        onclick={() => {
+          active_category_filter = null
+          active_type_filter = null
+        }}
+      >
+        ✕
+      </button>
+    {/if}
+  </div>
+
+  {#each filtered_files as file (file.name)}
+    {@const base_type = get_base_file_type(file.name)}
+    {@const is_compressed = file.name.toLowerCase().endsWith(`.gz`)}
+    <div
+      class="file-item"
+      class:active={active_files.includes(file.name)}
+      class:compressed={is_compressed}
+      style:background-color={file_type_colors[base_type]?.replace(`0.8`, `0.08`)}
+      draggable="true"
+      ondragstart={handle_drag_start(file)}
+      ondragend={() => on_drag_end?.()}
+      role="button"
+      tabindex="0"
+      title="Drag this {base_type.toUpperCase()} file"
+    >
+      <div class="drag-handle">
+        <div class="drag-bar"></div>
+        <div class="drag-bar"></div>
+        <div class="drag-bar"></div>
+      </div>
+      <div class="file-name">
+        {file.name}{file.category ? `\u00A0${file.category}` : ``}
+        {#if is_compressed}<span class="compression-indicator">📦</span>{/if}
+      </div>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .file-picker {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5em;
+    flex: 1;
+    align-content: start;
+  }
+  .legend {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 0.8em;
+    font-size: 0.6em;
+    opacity: 0.8;
+    margin: 0 0 0.5em;
+  }
+  .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: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.3);
+  }
+  .legend-item.active {
+    opacity: 1;
+    background: rgba(255, 255, 255, 0.2);
+    border-color: 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-hover-bg);
+  }
+  .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 rgba(255, 255, 255, 0.2);
+    border-radius: 20px;
+    cursor: grab;
+    background: rgba(255, 255, 255, 0.1);
+    transition: all 0.2s ease;
+    gap: 0.5em;
+  }
+  .file-item.active {
+    border-color: var(--success-color, #00ff00);
+    background: rgba(0, 255, 0, 0.15);
+    box-shadow: 0 0 8px rgba(0, 255, 0, 0.3);
+  }
+  .file-item:active {
+    cursor: grabbing;
+  }
+  .file-item:hover {
+    border-color: var(--accent-color, #007acc);
+    background: rgba(0, 122, 204, 0.2);
+    filter: brightness(1.1);
+  }
+  .drag-handle {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    opacity: 0.6;
+  }
+  .drag-bar {
+    width: 12px;
+    height: 2px;
+    background: currentColor;
+    border-radius: 1px;
+  }
+  .file-name {
+    font-size: 0.7em;
+    line-height: 1.1;
+    white-space: pre-line;
+  }
+  .compression-indicator {
+    opacity: 0.7;
+    font-size: 0.8em;
+    margin-left: 0.2em;
+  }
+  .file-item.compressed {
+    border-style: dashed;
+    opacity: 0.9;
+  }
+  .file-item.compressed:hover {
+    opacity: 1;
+  }
+</style>

package/dist/FilePicker.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { FileInfo } from './';
+interface Props {
+    files: FileInfo[];
+    active_files?: string[];
+    show_category_filters?: boolean;
+    category_labels?: Record<string, string>;
+    on_drag_start?: (file: FileInfo, event: DragEvent) => void;
+    on_drag_end?: () => void;
+    type_mapper?: (filename: string) => string;
+    file_type_colors?: Record<string, string>;
+    [key: string]: unknown;
+}
+declare const FilePicker: import("svelte").Component<Props, {}, "">;
+type FilePicker = ReturnType<typeof FilePicker>;
+export default FilePicker;

package/dist/Icon.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { icon_data } from './icons';
 let { icon, ...rest } = $props();
-const data = $derived.by(() => {
+const { path, ...svg_props } = $derived.by(() => {
     if (!(icon in icon_data)) {
         console.error(`Icon '${icon}' not found`);
         return icon_data.Alert; // fallback
@@ -9,8 +9,12 @@ const data = $derived.by(() => {
 });
 </script>
 
-<svg viewBox={data.viewBox} fill="currentColor" {...rest}>
-  <path d={data.path} />
+<svg fill="currentColor" {...svg_props} {...rest}>
+  {#if path.trim().startsWith(`<`)}
+    {@html path}
+  {:else}
+    <path d={path} />
+  {/if}
 </svg>
 
 <style>

package/dist/SettingsSection.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">import { Icon } from './';
+let { title, current_values, children, on_reset = () => { }, ...rest } = $props();
+// Create a deep copy of current_values on mount to use as reference values
+function deep_copy(obj) {
+    if (obj === null || typeof obj !== `object`)
+        return obj;
+    if (obj instanceof Date)
+        return new Date(obj.getTime());
+    if (obj instanceof RegExp)
+        return new RegExp(obj);
+    if (Array.isArray(obj)) {
+        return obj.map((item) => typeof item === `object` && item !== null ? deep_copy(item) : item);
+    }
+    const copy = {};
+    for (const [key, value] of Object.entries(obj)) {
+        copy[key] = typeof value === `object` && value !== null
+            ? deep_copy(value)
+            : value;
+    }
+    return copy;
+}
+const reference_values = deep_copy(current_values);
+// Check if any values have changed from reference values
+let has_changes = $derived.by(() => {
+    for (const [key, reference_value] of Object.entries(reference_values)) {
+        const current_value = current_values[key];
+        // Deep comparison for arrays
+        if (Array.isArray(reference_value) && Array.isArray(current_value)) {
+            if (reference_value.length !== current_value.length)
+                return true;
+            if (reference_value.some((val, idx) => {
+                const curr_val = current_value[idx];
+                // Handle nested objects/arrays in arrays
+                if (typeof val === `object` && val !== null &&
+                    typeof curr_val === `object` && curr_val !== null)
+                    return JSON.stringify(val) !== JSON.stringify(curr_val); // Quick deep comparison fallback
+                return val !== curr_val;
+            })) {
+                return true;
+            }
+            continue;
+        }
+        // Handle undefined/null comparisons properly
+        if (reference_value === undefined && current_value === undefined)
+            continue;
+        if (reference_value === null && current_value === null)
+            continue;
+        // Basic comparison for primitives
+        if (current_value !== reference_value) {
+            return true;
+        }
+    }
+    return false;
+});
+function handle_reset(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    on_reset();
+}
+</script>
+
+<h4>
+  {title}
+
+  {#if has_changes}
+    <button
+      class="reset-button"
+      onclick={handle_reset}
+      title="Reset {title.toLowerCase()} to defaults"
+      aria-label="Reset {title.toLowerCase()} to defaults"
+    >
+      <Icon icon="Reset" style="width: 0.9em; height: 0.9em" />
+      Reset
+    </button>
+  {/if}
+</h4>
+<section {...rest}>
+  {@render children()}
+</section>
+
+<style>
+  h4 {
+    margin: 0;
+    position: relative;
+  }
+  .reset-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    gap: 2pt;
+    padding: var(--reset-btn-padding, 1pt 4pt);
+    font-size: 0.65em;
+    border-radius: var(--reset-btn-border-radius, 2pt);
+    background: var(--btn-bg, rgba(0, 0, 0, 0.1));
+    color: var(--text-color-muted, #6b7280);
+    border: 1px solid var(--border-color, #d1d5db);
+    cursor: pointer;
+    z-index: 5;
+    transition: all 0.15s ease;
+    box-shadow: none;
+    opacity: 0.7;
+  }
+  .reset-button:hover {
+    background: var(--btn-hover-bg, rgba(0, 0, 0, 0.2));
+    color: var(--text-color, #374151);
+    opacity: 1;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+  .reset-button.standalone {
+    position: absolute;
+    top: -8pt;
+    right: -8pt;
+  }
+</style>

package/dist/SettingsSection.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    current_values: Record<string, unknown>;
+    children: Snippet<[]>;
+    on_reset?: () => void;
+    [key: string]: unknown;
+}
+declare const SettingsSection: import("svelte").Component<Props, {}, "">;
+type SettingsSection = ReturnType<typeof SettingsSection>;
+export default SettingsSection;

package/dist/api/mp.d.ts

@@ -0,0 +1,6 @@
+export declare const mp_bucket = "https://materialsproject-build.s3.amazonaws.com/collections/2022-10-28";
+export declare function fetch_material_data<T extends Record<string, unknown>>(material_id: string, bucket?: string): Promise<{
+    summary: T | null;
+    similarity: T | null;
+    robocrys: T | null;
+}>;

package/dist/api/mp.js

@@ -0,0 +1,22 @@
+import { fetch_zipped } from '../io/fetch';
+// TODO update to get MP details pages working again
+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(material_id, bucket = mp_bucket) {
+    try {
+        const results = await Promise.allSettled([
+            fetch_zipped(`${bucket}/summary/${material_id}.json.gz`),
+            fetch_zipped(`${bucket}/similarity/${material_id}.json.gz`),
+            fetch_zipped(`${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 };
+    }
+}