matterviz 0.3.1 → 0.3.3

package/dist/convex-hull/ConvexHullControls.svelte

@@ -1,28 +1,119 @@
-<script lang="ts">import { format_num } from '../labels';
-import DraggablePane from '../overlays/DraggablePane.svelte';
-import { ColorScaleSelect } from '../plot';
-import { tooltip } from 'svelte-multiselect';
-import { HULL_FACE_COLOR_MODES } from './types';
-// Face color mode display labels and tooltips
-const FACE_COLOR_MODES = {
-    uniform: { label: `Uniform`, tip: `Single uniform color for all faces` },
-    formation_energy: {
+<script lang="ts">
+  import type { D3InterpolateName } from '../colors'
+  import { format_num } from '../labels'
+  import DraggablePane from '../overlays/DraggablePane.svelte'
+  import { sanitize_html } from '../sanitize'
+  import { ColorScaleSelect } from '../plot'
+  import type { ComponentProps } from 'svelte'
+  import { tooltip } from 'svelte-multiselect'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import type {
+    ConvexHullControlsType,
+    ConvexHullEntry,
+    HullFaceColorMode,
+  } from './types'
+  import { HULL_FACE_COLOR_MODES } from './types'
+
+  interface CameraState {
+    elevation?: number // Elevation angle in degrees (for ternary)
+    azimuth?: number // Azimuth angle in degrees (for ternary)
+    rotation_x?: number // X rotation in radians (for quaternary)
+    rotation_y?: number // Y rotation in radians (for quaternary)
+    zoom: number
+    center_x: number
+    center_y: number
+  }
+
+  // Face color mode display labels and tooltips
+  const FACE_COLOR_MODES: Record<HullFaceColorMode, { label: string; tip: string }> =
+    {
+      uniform: { label: `Uniform`, tip: `Single uniform color for all faces` },
+      formation_energy: {
         label: `Energy`,
         tip: `Color by average formation energy of face vertices`,
-    },
-    dominant_element: {
+      },
+      dominant_element: {
         label: `Element`,
         tip: `Color by element with highest concentration at face centroid`,
-    },
-    facet_index: { label: `Index`, tip: `Distinct categorical color per facet` },
-};
-let { color_mode = $bindable(`stability`), color_scale = $bindable(`interpolateViridis`), show_stable = $bindable(true), show_unstable = $bindable(true), show_stable_labels = $bindable(true), show_unstable_labels = $bindable(false), show_hull_faces = undefined, on_hull_faces_change, hull_face_color = `#0072B2`, on_hull_face_color_change, hull_face_opacity = $bindable(0.03), on_hull_face_opacity_change, hull_face_color_mode = `uniform`, on_hull_face_color_mode_change, max_hull_dist_show_phases = $bindable(0), max_hull_dist_show_labels = $bindable(0.1), max_hull_dist_in_data = 0.5, energy_source_mode = $bindable(`precomputed`), has_precomputed_hull = false, can_compute_hull = false, has_precomputed_e_form = false, can_compute_e_form = false, stable_entries, unstable_entries, camera, merged_controls, controls_open = $bindable(false), toggle_props = {}, pane_props = {}, ...rest } = $props();
-// Focus the multiselect input next to the "Color scale" label
-function focus_multiselect(evt) {
-    ;
-    evt.currentTarget.nextElementSibling
-        ?.querySelector(`input`)?.focus();
-}
+      },
+      facet_index: { label: `Index`, tip: `Distinct categorical color per facet` },
+    }
+
+  let {
+    color_mode = $bindable(`stability`),
+    color_scale = $bindable(`interpolateViridis`),
+    show_stable = $bindable(true),
+    show_unstable = $bindable(true),
+    show_stable_labels = $bindable(true),
+    show_unstable_labels = $bindable(false),
+    show_hull_faces = undefined,
+    on_hull_faces_change,
+    hull_face_color = `#0072B2`,
+    on_hull_face_color_change,
+    hull_face_opacity = $bindable(0.03),
+    on_hull_face_opacity_change,
+    hull_face_color_mode = `uniform` as HullFaceColorMode,
+    on_hull_face_color_mode_change,
+    max_hull_dist_show_phases = $bindable(0),
+    max_hull_dist_show_labels = $bindable(0.1),
+    max_hull_dist_in_data = 0.5,
+    energy_source_mode = $bindable(`precomputed`),
+    has_precomputed_hull = false,
+    can_compute_hull = false,
+    has_precomputed_e_form = false,
+    can_compute_e_form = false,
+    stable_entries,
+    unstable_entries,
+    camera,
+    merged_controls,
+    controls_open = $bindable(false),
+    toggle_props = {},
+    pane_props = {},
+    ...rest
+  }: Omit<HTMLAttributes<HTMLDivElement>, `onclose`> & {
+    // Display controls
+    color_mode?: `stability` | `energy`
+    color_scale?: D3InterpolateName
+    show_stable?: boolean
+    show_unstable?: boolean
+    show_stable_labels?: boolean
+    show_unstable_labels?: boolean
+    // 3D specific controls
+    show_hull_faces?: boolean
+    on_hull_faces_change?: (value: boolean) => void
+    hull_face_color?: string
+    on_hull_face_color_change?: (value: string) => void
+    hull_face_opacity?: number
+    on_hull_face_opacity_change?: (value: number) => void
+    hull_face_color_mode?: HullFaceColorMode
+    on_hull_face_color_mode_change?: (value: HullFaceColorMode) => void
+    energy_source_mode?: `precomputed` | `on-the-fly` // whether to read formation and above hull distance from entries or compute them on the fly
+    has_precomputed_hull?: boolean
+    can_compute_hull?: boolean
+    has_precomputed_e_form?: boolean
+    can_compute_e_form?: boolean
+    // Thresholds
+    max_hull_dist_show_phases?: number
+    max_hull_dist_show_labels?: number
+    max_hull_dist_in_data?: number
+    // Data for visualization
+    stable_entries: ConvexHullEntry[]
+    unstable_entries: ConvexHullEntry[]
+    // Camera state (optional - only used for 3D/4D diagrams)
+    camera?: CameraState
+    // Legend configuration
+    merged_controls: ConvexHullControlsType
+    // Pane state
+    controls_open?: boolean
+    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
+  } = $props()
+
+  // Focus the multiselect input next to the "Color scale" label
+  function focus_multiselect(evt: Event): void {
+    ;(evt.currentTarget as HTMLElement).nextElementSibling
+      ?.querySelector<HTMLInputElement>(`input`)?.focus()
+  }
 </script>
 
 <DraggablePane
@@ -42,7 +133,7 @@ function focus_multiselect(evt) {
   {...rest}
 >
   <h4>
-    {@html merged_controls.title || `Convex Hull Controls`}
+    {@html sanitize_html(merged_controls.title || `Convex Hull Controls`)}
   </h4>
 
   <!-- Energy source selection (only if both options are available) -->
@@ -247,7 +338,7 @@ function focus_multiselect(evt) {
             value={hull_face_color}
             oninput={(e) => on_hull_face_color_change?.((e.target as HTMLInputElement).value)}
             {@attach tooltip({ content: `Set hull face color` })}
-            style="width: 40px; height: 28px"
+            style="width: 40px; height: 20px"
           />
         {/if}
         <input
@@ -390,9 +481,7 @@ function focus_multiselect(evt) {
     border: 1px solid var(--border-color, rgba(0, 0, 0, 0.2));
   }
   .toggle-btn.active, .toggle-btn:hover.active {
-    background: var(--accent-color, #1976d2);
-    color: white;
-    border-color: var(--accent-color, #1976d2);
+    background: light-dark(rgba(25, 118, 210, 0.15), rgba(100, 180, 255, 0.2));
   }
   .legend-items-container {
     display: flex;
@@ -441,7 +530,6 @@ function focus_multiselect(evt) {
     flex-wrap: wrap;
   }
   .face-mode-btn {
-    padding: 2px 6px;
     min-width: auto;
     flex: 0 1 auto;
   }
@@ -453,7 +541,6 @@ function focus_multiselect(evt) {
     margin-top: 12px;
   }
   .color-scale-row :global(.multiselect) {
-    font-size: 0.85em;
     --sms-min-height: 24px;
   }
 </style>

package/dist/convex-hull/ConvexHullInfoPane.svelte

@@ -1,6 +1,32 @@
-<script lang="ts">import DraggablePane from '../overlays/DraggablePane.svelte';
-import ConvexHullStats from './ConvexHullStats.svelte';
-let { phase_stats, stable_entries, unstable_entries, max_hull_dist_show_phases, max_hull_dist_show_labels, label_threshold, pane_open = $bindable(false), toggle_props = {}, pane_props = {}, ...rest } = $props();
+<script lang="ts">
+  import DraggablePane from '../overlays/DraggablePane.svelte'
+  import type { ComponentProps } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import ConvexHullStats from './ConvexHullStats.svelte'
+  import type { ConvexHullEntry, PhaseStats } from './types'
+
+  let {
+    phase_stats,
+    stable_entries,
+    unstable_entries,
+    max_hull_dist_show_phases,
+    max_hull_dist_show_labels,
+    label_threshold,
+    pane_open = $bindable(false),
+    toggle_props = {},
+    pane_props = {},
+    ...rest
+  }: Omit<HTMLAttributes<HTMLDivElement>, `onclose`> & {
+    phase_stats: PhaseStats | null
+    stable_entries: ConvexHullEntry[]
+    unstable_entries: ConvexHullEntry[]
+    max_hull_dist_show_phases: number
+    max_hull_dist_show_labels: number
+    label_threshold: number
+    pane_open?: boolean
+    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
+  } = $props()
 </script>
 
 <DraggablePane