matterviz 0.4.0 → 0.4.2

package/dist/convex-hull/ConvexHull4D.svelte.d.ts

@@ -3,6 +3,6 @@ import type { ConvexHullEntry, HighlightStyle } from './types';
 type $$ComponentProps = BaseConvexHullProps<ConvexHullEntry> & Hull3DProps & {
     highlight_style?: HighlightStyle;
 };
-declare const ConvexHull4D: import("svelte").Component<$$ComponentProps, {}, "temperature" | "fullscreen" | "show_hull_faces" | "hull_face_opacity" | "hull_face_color_mode" | "color_mode" | "color_scale" | "show_stable" | "show_unstable" | "show_stable_labels" | "show_unstable_labels" | "max_hull_dist_show_phases" | "max_hull_dist_show_labels" | "info_pane_open" | "legend_pane_open" | "wrapper" | "energy_source_mode" | "stable_entries" | "unstable_entries" | "phase_stats" | "highlighted_entries" | "selected_entry" | "gas_pressures">;
+declare const ConvexHull4D: import("svelte").Component<$$ComponentProps, {}, "fullscreen" | "wrapper" | "controls_open" | "color_scale" | "info_pane_open" | "temperature" | "show_hull_faces" | "hull_face_opacity" | "hull_face_color_mode" | "color_mode" | "show_stable" | "show_unstable" | "show_stable_labels" | "show_unstable_labels" | "max_hull_dist_show_phases" | "max_hull_dist_show_labels" | "hidden_categories" | "energy_source_mode" | "stable_entries" | "unstable_entries" | "phase_stats" | "highlighted_entries" | "selected_entry" | "gas_pressures">;
 type ConvexHull4D = ReturnType<typeof ConvexHull4D>;
 export default ConvexHull4D;

package/dist/convex-hull/ConvexHullChrome.svelte

@@ -0,0 +1,264 @@
+<script lang="ts">
+  import type { ShowControlsState } from '../controls'
+  // Shared ConvexHull3D/4D chrome: control-buttons toolbar (reset, info pane, fullscreen,
+  // legend controls) plus the hover tooltip, copy feedback, drag overlay and structure
+  // popup driven by the shared canvas-interactions scaffold
+  import { ClickFeedback, DragOverlay } from '../feedback'
+  import Icon from '../Icon.svelte'
+  import { FullscreenButton, type FullscreenToggleProp } from '../layout'
+  import { PlotTooltip } from '../plot'
+  import type { ComponentProps, Snippet } from 'svelte'
+  import type { create_canvas_interactions } from './canvas-interactions.svelte'
+  import ConvexHullControls from './ConvexHullControls.svelte'
+  import ConvexHullInfoPane from './ConvexHullInfoPane.svelte'
+  import ConvexHullTooltip from './ConvexHullTooltip.svelte'
+  import type { create_hull_data_pipeline } from './hull-state.svelte'
+  import type { ConvexHullTooltipProp } from './index'
+  import { CONVEX_HULL_STYLE } from './index'
+  import StructurePopup from './StructurePopup.svelte'
+  import type { ConvexHullEntry, HighlightStyle, HullFaceColorMode } from './types'
+  import { MAGNETIC_ORDERING_CATEGORY } from './types'
+
+  type ControlsProps = ComponentProps<typeof ConvexHullControls>
+
+  let {
+    interactions, // canvas-interactions scaffold: hover/drag/popup/copy-feedback state
+    hull_data, // hull-state pipeline: energy-mode flags, polymorph stats, thresholds
+    controls_config,
+    reset_all,
+    reset_title,
+    enable_info_pane = true,
+    phase_stats,
+    label_threshold,
+    fullscreen = false,
+    fullscreen_toggle = true,
+    wrapper = undefined,
+    camera,
+    merged_controls,
+    stable_entries,
+    unstable_entries,
+    get_point_color,
+    merged_highlight_style,
+    is_highlighted,
+    tooltip = undefined,
+    selected_entry,
+    show_hull_faces = $bindable(),
+    hull_face_color = $bindable(),
+    hull_face_opacity = $bindable(),
+    hull_face_color_mode = $bindable(),
+    info_pane_open = $bindable(false),
+    controls_open = $bindable(false),
+    color_mode = $bindable(`stability`),
+    color_scale = $bindable(`interpolateViridis`),
+    show_stable = $bindable(true),
+    show_unstable = $bindable(true),
+    entry_category = MAGNETIC_ORDERING_CATEGORY,
+    hidden_categories = $bindable([]),
+    show_stable_labels = $bindable(true),
+    show_unstable_labels = $bindable(false),
+    max_hull_dist_show_phases = $bindable(0),
+    max_hull_dist_show_labels = $bindable(0.1),
+    energy_source_mode = $bindable(`precomputed`),
+  }: Pick<
+    ControlsProps,
+    | `camera`
+    | `merged_controls`
+    | `stable_entries`
+    | `unstable_entries`
+    | `color_mode`
+    | `color_scale`
+    | `show_stable`
+    | `show_unstable`
+    | `entry_category`
+    | `hidden_categories`
+    | `show_stable_labels`
+    | `show_unstable_labels`
+    | `max_hull_dist_show_phases`
+    | `max_hull_dist_show_labels`
+    | `energy_source_mode`
+    | `controls_open`
+    | `show_hull_faces`
+    | `hull_face_color`
+    | `hull_face_opacity`
+    | `hull_face_color_mode`
+  > &
+    Pick<ComponentProps<typeof ConvexHullInfoPane>, `phase_stats` | `label_threshold`> & {
+      interactions: ReturnType<typeof create_canvas_interactions>
+      hull_data: ReturnType<typeof create_hull_data_pipeline<ConvexHullEntry>>
+      controls_config: ShowControlsState
+      reset_all: () => void
+      reset_title: string
+      enable_info_pane?: boolean
+      fullscreen?: boolean
+      fullscreen_toggle?: FullscreenToggleProp
+      wrapper?: HTMLDivElement
+      get_point_color: (entry: ConvexHullEntry) => string
+      merged_highlight_style: HighlightStyle
+      is_highlighted: (entry: ConvexHullEntry) => boolean
+      tooltip?: ConvexHullTooltipProp<ConvexHullEntry>
+      selected_entry: ConvexHullEntry | null
+      info_pane_open?: boolean
+    } = $props()
+</script>
+
+<!-- Control buttons (top-right corner) -->
+{#if controls_config.mode !== `never`}
+  <section class="control-buttons {controls_config.class}">
+    {#if controls_config.visible(`reset`)}
+      <button type="button" onclick={reset_all} title={reset_title} class="reset-camera-btn">
+        <Icon icon="Reset" />
+      </button>
+    {/if}
+
+    {#if enable_info_pane && phase_stats && controls_config.visible(`info-pane`)}
+      <ConvexHullInfoPane
+        bind:pane_open={info_pane_open}
+        {phase_stats}
+        {stable_entries}
+        {unstable_entries}
+        {show_stable}
+        {show_unstable}
+        {entry_category}
+        {hidden_categories}
+        {max_hull_dist_show_phases}
+        {max_hull_dist_show_labels}
+        {label_threshold}
+        toggle_props={{ class: `info-btn` }}
+      />
+    {/if}
+
+    {#if fullscreen_toggle && controls_config.visible(`fullscreen`)}
+      <FullscreenButton {fullscreen} toggle={fullscreen_toggle} {wrapper} />
+    {/if}
+
+    <!-- Legend controls pane -->
+    {#if controls_config.visible(`controls`)}
+      <ConvexHullControls
+        bind:controls_open
+        bind:color_mode
+        bind:color_scale
+        bind:show_stable
+        bind:show_unstable
+        {entry_category}
+        bind:hidden_categories
+        bind:show_stable_labels
+        bind:show_unstable_labels
+        bind:max_hull_dist_show_phases
+        bind:max_hull_dist_show_labels
+        max_hull_dist_in_data={hull_data.max_hull_dist_in_data}
+        {stable_entries}
+        {unstable_entries}
+        {camera}
+        {merged_controls}
+        toggle_props={{ class: `legend-controls-btn` }}
+        {show_hull_faces}
+        on_hull_faces_change={(value: boolean) => (show_hull_faces = value)}
+        {hull_face_color}
+        on_hull_face_color_change={(value: string) => (hull_face_color = value)}
+        {hull_face_opacity}
+        on_hull_face_opacity_change={(value: number) => (hull_face_opacity = value)}
+        {hull_face_color_mode}
+        on_hull_face_color_mode_change={(value: HullFaceColorMode) =>
+          (hull_face_color_mode = value)}
+        bind:energy_source_mode
+        has_precomputed_e_form={hull_data.has_precomputed_e_form}
+        can_compute_e_form={hull_data.can_compute_e_form}
+        has_precomputed_hull={hull_data.has_precomputed_hull}
+        can_compute_hull={hull_data.can_compute_hull}
+      />
+    {/if}
+  </section>
+{/if}
+
+<!-- Hover tooltip -->
+{#if interactions.hover_data}
+  {@const { entry, position } = interactions.hover_data}
+  {@const entry_highlight = is_highlighted(entry) ? merged_highlight_style : undefined}
+  {@const tooltip_style = `z-index: ${CONVEX_HULL_STYLE.z_index.tooltip}; backdrop-filter: blur(4px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);`}
+  <PlotTooltip
+    x={position.x}
+    y={position.y}
+    offset={{ x: 10, y: -10 }}
+    bg_color={get_point_color(entry)}
+    fixed
+    style={tooltip_style}
+  >
+    <ConvexHullTooltip
+      {entry}
+      polymorph_stats_map={hull_data.polymorph_stats_map}
+      highlight_style={entry_highlight}
+      {entry_category}
+      {tooltip}
+    />
+  </PlotTooltip>
+{/if}
+
+<!-- Copy-to-clipboard feedback (double-click on point) -->
+<ClickFeedback
+  bind:visible={interactions.copy_feedback.visible}
+  position={interactions.copy_feedback.position}
+/>
+
+<!-- z-index 1: above auto-stacked siblings after the chrome (3D gizmo, gas controls), below z-2 sliders -->
+<DragOverlay
+  visible={interactions.drag_over}
+  message="Drop JSON file to load phase diagram data"
+  style="z-index: 1"
+/>
+
+{#if interactions.modal_open && interactions.selected_structure}
+  <StructurePopup
+    structure={interactions.selected_structure}
+    place_right={interactions.modal_place_right}
+    stats={{
+      id: selected_entry?.entry_id,
+      e_above_hull: selected_entry?.e_above_hull,
+      e_form: selected_entry?.e_form_per_atom,
+    }}
+    onclose={interactions.close_structure_popup}
+  />
+{/if}
+
+<style>
+  .control-buttons {
+    position: absolute;
+    top: 1ex;
+    right: 1ex;
+    display: flex;
+    gap: 8px;
+    transition: opacity 0.2s ease-in-out;
+  }
+  .control-buttons.hover-visible {
+    opacity: 0;
+    pointer-events: none;
+  }
+  :global(.convex-hull-3d:hover) > .control-buttons.hover-visible,
+  :global(.convex-hull-3d:focus-within) > .control-buttons.hover-visible,
+  :global(.convex-hull-4d:hover) > .control-buttons.hover-visible,
+  :global(.convex-hull-4d:focus-within) > .control-buttons.hover-visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .control-buttons.always-visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .control-buttons :global(.draggable-pane) {
+    z-index: 1001 !important;
+  }
+  .control-buttons :global(button) {
+    background: transparent;
+    border: none;
+    padding: 4px;
+    cursor: pointer;
+    border-radius: 3px;
+    color: var(--text-color, currentColor);
+    transition: background-color 0.2s;
+    display: flex;
+    font-size: var(--ctrl-btn-icon-size, clamp(0.7rem, 2cqmin, 0.85rem));
+  }
+  .control-buttons :global(button):hover {
+    background-color: color-mix(in srgb, currentColor 8%, transparent);
+  }
+</style>

package/dist/convex-hull/ConvexHullChrome.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { ShowControlsState } from '../controls';
+import { type FullscreenToggleProp } from '../layout';
+import type { ComponentProps } from 'svelte';
+import type { create_canvas_interactions } from './canvas-interactions.svelte';
+import ConvexHullControls from './ConvexHullControls.svelte';
+import ConvexHullInfoPane from './ConvexHullInfoPane.svelte';
+import type { create_hull_data_pipeline } from './hull-state.svelte';
+import type { ConvexHullTooltipProp } from './index';
+import type { ConvexHullEntry, HighlightStyle } from './types';
+type ControlsProps = ComponentProps<typeof ConvexHullControls>;
+type $$ComponentProps = Pick<ControlsProps, `camera` | `merged_controls` | `stable_entries` | `unstable_entries` | `color_mode` | `color_scale` | `show_stable` | `show_unstable` | `entry_category` | `hidden_categories` | `show_stable_labels` | `show_unstable_labels` | `max_hull_dist_show_phases` | `max_hull_dist_show_labels` | `energy_source_mode` | `controls_open` | `show_hull_faces` | `hull_face_color` | `hull_face_opacity` | `hull_face_color_mode`> & Pick<ComponentProps<typeof ConvexHullInfoPane>, `phase_stats` | `label_threshold`> & {
+    interactions: ReturnType<typeof create_canvas_interactions>;
+    hull_data: ReturnType<typeof create_hull_data_pipeline<ConvexHullEntry>>;
+    controls_config: ShowControlsState;
+    reset_all: () => void;
+    reset_title: string;
+    enable_info_pane?: boolean;
+    fullscreen?: boolean;
+    fullscreen_toggle?: FullscreenToggleProp;
+    wrapper?: HTMLDivElement;
+    get_point_color: (entry: ConvexHullEntry) => string;
+    merged_highlight_style: HighlightStyle;
+    is_highlighted: (entry: ConvexHullEntry) => boolean;
+    tooltip?: ConvexHullTooltipProp<ConvexHullEntry>;
+    selected_entry: ConvexHullEntry | null;
+    info_pane_open?: boolean;
+};
+declare const ConvexHullChrome: import("svelte").Component<$$ComponentProps, {}, "controls_open" | "color_scale" | "info_pane_open" | "show_hull_faces" | "hull_face_color" | "hull_face_opacity" | "hull_face_color_mode" | "color_mode" | "show_stable" | "show_unstable" | "show_stable_labels" | "show_unstable_labels" | "max_hull_dist_show_phases" | "max_hull_dist_show_labels" | "hidden_categories" | "energy_source_mode">;
+type ConvexHullChrome = ReturnType<typeof ConvexHullChrome>;
+export default ConvexHullChrome;

package/dist/convex-hull/ConvexHullControls.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { PaneProps, PaneToggleProps } from '../overlays'
   import type { D3InterpolateName } from '../colors'
   import { format_num } from '../labels'
   import DraggablePane from '../overlays/DraggablePane.svelte'
@@ -7,12 +8,14 @@
   import type { ComponentProps } from 'svelte'
   import { tooltip } from 'svelte-multiselect/attachments'
   import type { HTMLAttributes } from 'svelte/elements'
+  import { get_entry_category, marker_path_data } from './helpers'
   import type {
     ConvexHullControlsType,
     ConvexHullEntry,
+    EntryCategoryConfig,
     HullFaceColorMode,
   } from './types'
-  import { HULL_FACE_COLOR_MODES } from './types'
+  import { HULL_FACE_COLOR_MODES, MAGNETIC_ORDERING_CATEGORY } from './types'
 
   interface CameraState {
     elevation?: number // Elevation angle in degrees (for ternary)
@@ -25,25 +28,26 @@
   }
 
   // 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: {
-        label: `Element`,
-        tip: `Color by element with highest concentration at face centroid`,
-      },
-      facet_index: { label: `Index`, tip: `Distinct categorical color per facet` },
-    }
+  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: {
+      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),
+    entry_category = MAGNETIC_ORDERING_CATEGORY,
+    hidden_categories = $bindable([]),
     show_stable_labels = $bindable(true),
     show_unstable_labels = $bindable(false),
     show_hull_faces = undefined,
@@ -76,6 +80,9 @@
     color_scale?: D3InterpolateName
     show_stable?: boolean
     show_unstable?: boolean
+    // Categorical classification rendered as filter toggles (null disables the row)
+    entry_category?: EntryCategoryConfig | null
+    hidden_categories?: string[]
     show_stable_labels?: boolean
     show_unstable_labels?: boolean
     // 3D specific controls
@@ -105,16 +112,41 @@
     merged_controls: ConvexHullControlsType
     // Pane state
     controls_open?: boolean
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
+    toggle_props?: PaneToggleProps
+    pane_props?: PaneProps
   } = $props()
 
   // Focus the multiselect input next to the "Color scale" label
-  function focus_multiselect(
-    evt: Event & { currentTarget: HTMLElement },
-  ): void {
+  function focus_multiselect(evt: Event & { currentTarget: HTMLElement }): void {
     evt.currentTarget.nextElementSibling?.querySelector<HTMLInputElement>(`input`)?.focus()
   }
+
+  // Category filters: only show category values present in the (threshold-filtered) data
+  const category_counts = $derived.by(() => {
+    const counts: Record<string, number> = {}
+    for (const entry of [...stable_entries, ...unstable_entries]) {
+      const value = get_entry_category(entry, entry_category)
+      if (value) counts[value] = (counts[value] ?? 0) + 1
+    }
+    return counts
+  })
+  const category_values_in_data = $derived(
+    Object.keys(entry_category?.markers ?? {}).filter(
+      (value) => (category_counts[value] ?? 0) > 0,
+    ),
+  )
+  const toggle_category = (value: string) => {
+    hidden_categories = hidden_categories.includes(value)
+      ? hidden_categories.filter((hidden) => hidden !== value)
+      : [...hidden_categories, value]
+  }
+  const SWATCH_RADIUS = 4.4 // marker swatch radius, sized to fit the 12x12 viewBox
+  // Keyboard activation for legend toggles (preventDefault stops Space scrolling the page)
+  const legend_keydown = (action: () => void) => (evt: KeyboardEvent) => {
+    if (![`Enter`, ` `].includes(evt.key)) return
+    evt.preventDefault()
+    action()
+  }
 </script>
 
 <DraggablePane
@@ -138,13 +170,12 @@
   </h4>
 
   <!-- Energy source selection (only if both options are available) -->
-  {#if has_precomputed_e_form && has_precomputed_hull && can_compute_e_form &&
-      can_compute_hull}
+  {#if has_precomputed_e_form && has_precomputed_hull && can_compute_e_form && can_compute_hull}
     <div class="control-row">
       <span class="control-label">Energy source</span>
       <button
         class="toggle-btn {energy_source_mode === `precomputed` ? `active` : ``}"
-        onclick={() => energy_source_mode = `precomputed`}
+        onclick={() => (energy_source_mode = `precomputed`)}
         {@attach tooltip({
           allow_html: true,
           content: `Use precomputed formation energies (E<sub>form</sub>)`,
@@ -154,11 +185,10 @@
       </button>
       <button
         class="toggle-btn {energy_source_mode === `on-the-fly` ? `active` : ``}"
-        onclick={() => energy_source_mode = `on-the-fly`}
+        onclick={() => (energy_source_mode = `on-the-fly`)}
         {@attach tooltip({
           allow_html: true,
-          content:
-            `Compute formation energies and hull distances on the fly. Note: Missing pure-element reference entries default to E<sub>form</sub> = 0 eV/atom if not provided explicitly.`,
+          content: `Compute formation energies and hull distances on the fly. Note: Missing pure-element reference entries default to E<sub>form</sub> = 0 eV/atom if not provided explicitly.`,
         })}
       >
         On the fly
@@ -171,14 +201,14 @@
     <span class="control-label">Color mode</span>
     <button
       class="toggle-btn {color_mode === `stability` ? `active` : ``}"
-      onclick={() => color_mode = `stability`}
+      onclick={() => (color_mode = `stability`)}
       {@attach tooltip({ content: `Color points by stable/unstable` })}
     >
       Stability
     </button>
     <button
       class="toggle-btn {color_mode === `energy` ? `active` : ``}"
-      onclick={() => color_mode = `energy`}
+      onclick={() => (color_mode = `energy`)}
       {@attach tooltip({ content: `Color points by energy above hull` })}
     >
       Energy
@@ -218,33 +248,31 @@
       <div class="legend-items-container">
         <div
           class="legend-item clickable {show_stable ? `active` : `inactive`}"
-          onclick={() => show_stable = !show_stable}
-          onkeydown={(evt) =>
-          [`Enter`, ` `].includes(evt.key) && (show_stable = !show_stable)}
+          onclick={() => (show_stable = !show_stable)}
+          onkeydown={legend_keydown(() => (show_stable = !show_stable))}
           role="button"
           tabindex="0"
+          aria-pressed={show_stable}
           {@attach tooltip({ content: `Toggle visibility of stable points` })}
         >
           <div class="marker stable"></div>
-          <span>Stable{
-              merged_controls.show_counts ? ` (${stable_entries.length})` : ``
-            }</span>
+          <span>Stable{merged_controls.show_counts ? ` (${stable_entries.length})` : ``}</span>
         </div>
         <div
           class="legend-item clickable {show_unstable ? `active` : `inactive`}"
-          onclick={() => show_unstable = !show_unstable}
-          onkeydown={(evt) =>
-          [`Enter`, ` `].includes(evt.key) && (show_unstable = !show_unstable)}
+          onclick={() => (show_unstable = !show_unstable)}
+          onkeydown={legend_keydown(() => (show_unstable = !show_unstable))}
           role="button"
           tabindex="0"
+          aria-pressed={show_unstable}
           {@attach tooltip({ content: `Toggle visibility of above-hull points` })}
         >
           <div class="marker unstable"></div>
-          <span>Above hull{
-              merged_controls.show_counts
+          <span
+            >Above hull{merged_controls.show_counts
               ? ` (${show_unstable ? unstable_entries.length : 0}/${unstable_entries.length})`
-              : ``
-            }</span>
+              : ``}</span
+          >
         </div>
       </div>
     </div>
@@ -259,8 +287,8 @@
         }}
         role="button"
         tabindex="0"
-        style="cursor: pointer"
-      >Color scale</span>
+        style="cursor: pointer">Color scale</span
+      >
       <ColorScaleSelect
         bind:value={color_scale}
         selected={[color_scale]}
@@ -270,6 +298,43 @@
     </div>
   {/if}
 
+  <!-- Category filters (only when entries carry recognized category data,
+    e.g. magnetic orderings with the default MAGNETIC_ORDERING_CATEGORY) -->
+  {#if entry_category && category_values_in_data.length > 0}
+    <div class="control-row">
+      <span class="control-label">{entry_category.label}</span>
+      <div class="legend-items-container category-filters">
+        {#each category_values_in_data as value (value)}
+          {@const hidden = hidden_categories.includes(value)}
+          {@const count = category_counts[value] ?? 0}
+          {@const long_name = entry_category.labels?.[value]}
+          <div
+            class="legend-item clickable {hidden ? `inactive` : `active`}"
+            onclick={() => toggle_category(value)}
+            onkeydown={legend_keydown(() => toggle_category(value))}
+            role="button"
+            tabindex="0"
+            aria-pressed={!hidden}
+            {@attach tooltip({
+              content: `Toggle visibility of ${
+                long_name ? `${long_name.toLowerCase()} (${value})` : value
+              } entries`,
+            })}
+          >
+            <svg viewBox="-6 -6 12 12" width="12" height="12" aria-hidden="true">
+              <path d={marker_path_data(SWATCH_RADIUS, entry_category.markers[value]) ?? ``} />
+            </svg>
+            <span
+              >{value}{merged_controls.show_counts
+                ? ` (${hidden ? `0/${count}` : count})`
+                : ``}</span
+            >
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+
   {#if merged_controls.show_label_controls}
     <div class="control-row">
       <span class="control-label">Labels</span>
@@ -300,8 +365,10 @@
       >
         <span class="control-label">Label threshold</span>
         <label style="display: flex; align-items: center; gap: 4px; flex: 1">
-          <span style="white-space: nowrap">{max_hull_dist_show_labels.toFixed(2)}
-            eV/atom</span>
+          <span style="white-space: nowrap"
+            >{max_hull_dist_show_labels.toFixed(2)}
+            eV/atom</span
+          >
           <input
             type="range"
             min="0"
@@ -349,9 +416,9 @@
           class="threshold-slider"
           style="flex: 1; min-width: 80px"
         />
-        <span style="font-size: 0.9em; min-width: 2em; text-align: right">{
-          format_num(hull_face_opacity, `.1%`)
-        }</span>
+        <span style="font-size: 0.9em; min-width: 2em; text-align: right"
+          >{format_num(hull_face_opacity, `.1%`)}</span
+        >
       </div>
     </div>
 
@@ -379,7 +446,9 @@
         <!-- Ternary camera controls (elevation/azimuth) -->
         <label
           class="angle-input"
-          {@attach tooltip({ content: `Elevation angle (0° = look down z-axis, 90° = side view, 180° = look up z-axis)` })}
+          {@attach tooltip({
+            content: `Elevation angle (0° = look down z-axis, 90° = side view, 180° = look up z-axis)`,
+          })}
         >
           <span>Elev</span>
           <input
@@ -469,7 +538,8 @@
   button {
     border: 1px solid var(--border-color, rgba(0, 0, 0, 0.2));
   }
-  .toggle-btn.active, .toggle-btn:hover.active {
+  .toggle-btn.active,
+  .toggle-btn:hover.active {
     background: light-dark(rgba(25, 118, 210, 0.15), rgba(100, 180, 255, 0.2));
   }
   .legend-items-container {
@@ -490,6 +560,15 @@
   .legend-item.inactive {
     opacity: 0.5;
   }
+  .category-filters {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .legend-item svg {
+    margin-right: 4px;
+    flex-shrink: 0;
+    fill: currentColor;
+  }
   .marker {
     width: 12px;
     height: 12px;

package/dist/convex-hull/ConvexHullControls.svelte.d.ts

@@ -1,8 +1,7 @@
+import type { PaneProps, PaneToggleProps } from '../overlays';
 import type { D3InterpolateName } from '../colors';
-import DraggablePane from '../overlays/DraggablePane.svelte';
-import type { ComponentProps } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { ConvexHullControlsType, ConvexHullEntry, HullFaceColorMode } from './types';
+import type { ConvexHullControlsType, ConvexHullEntry, EntryCategoryConfig, HullFaceColorMode } from './types';
 interface CameraState {
     elevation?: number;
     azimuth?: number;
@@ -17,6 +16,8 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `onclose`> & {
     color_scale?: D3InterpolateName;
     show_stable?: boolean;
     show_unstable?: boolean;
+    entry_category?: EntryCategoryConfig | null;
+    hidden_categories?: string[];
     show_stable_labels?: boolean;
     show_unstable_labels?: boolean;
     show_hull_faces?: boolean;
@@ -40,9 +41,9 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `onclose`> & {
     camera?: CameraState;
     merged_controls: ConvexHullControlsType;
     controls_open?: boolean;
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
+    toggle_props?: PaneToggleProps;
+    pane_props?: PaneProps;
 };
-declare const ConvexHullControls: import("svelte").Component<$$ComponentProps, {}, "controls_open" | "hull_face_opacity" | "color_mode" | "color_scale" | "show_stable" | "show_unstable" | "show_stable_labels" | "show_unstable_labels" | "max_hull_dist_show_phases" | "max_hull_dist_show_labels" | "energy_source_mode">;
+declare const ConvexHullControls: import("svelte").Component<$$ComponentProps, {}, "controls_open" | "color_scale" | "hull_face_opacity" | "color_mode" | "show_stable" | "show_unstable" | "show_stable_labels" | "show_unstable_labels" | "max_hull_dist_show_phases" | "max_hull_dist_show_labels" | "hidden_categories" | "energy_source_mode">;
 type ConvexHullControls = ReturnType<typeof ConvexHullControls>;
 export default ConvexHullControls;