matterviz 0.3.7 → 0.4.1

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, {}, "temperature" | "fullscreen" | "wrapper" | "controls_open" | "color_scale" | "info_pane_open" | "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,268 @@
+<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} 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: clamp(0.85em, 2cqmin, 1.3em);
+  }
+  .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)
@@ -44,6 +47,8 @@
     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 +81,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,8 +113,8 @@
     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
@@ -115,6 +123,33 @@
   ): 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
@@ -219,10 +254,10 @@
         <div
           class="legend-item clickable {show_stable ? `active` : `inactive`}"
           onclick={() => show_stable = !show_stable}
-          onkeydown={(evt) =>
-          [`Enter`, ` `].includes(evt.key) && (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>
@@ -233,10 +268,10 @@
         <div
           class="legend-item clickable {show_unstable ? `active` : `inactive`}"
           onclick={() => show_unstable = !show_unstable}
-          onkeydown={(evt) =>
-          [`Enter`, ` `].includes(evt.key) && (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>
@@ -270,6 +305,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>
@@ -490,6 +562,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;

package/dist/convex-hull/ConvexHullInfoPane.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
+  import type { PaneProps, PaneToggleProps } from '../overlays'
   import InfoPaneCards from '../overlays/InfoPaneCards.svelte'
   import DraggablePane from '../overlays/DraggablePane.svelte'
   import { format_num } from '../labels'
   import type { ComponentProps } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
   import ConvexHullStats from './ConvexHullStats.svelte'
-  import type { ConvexHullEntry, PhaseStats } from './types'
+  import { visible_entries as filter_visible } from './helpers'
+  import type { ConvexHullEntry, EntryCategoryConfig, PhaseStats } from './types'
+  import { MAGNETIC_ORDERING_CATEGORY } from './types'
 
   const usage_tips = [
     { label: `Single click`, value: `Select point`, key: `tip-click` },
@@ -25,6 +28,8 @@
     unstable_entries,
     show_stable = true,
     show_unstable = true,
+    entry_category = MAGNETIC_ORDERING_CATEGORY,
+    hidden_categories = [],
     max_hull_dist_show_phases,
     max_hull_dist_show_labels,
     label_threshold,
@@ -38,23 +43,29 @@
     unstable_entries: ConvexHullEntry[]
     show_stable?: boolean
     show_unstable?: boolean
+    entry_category?: EntryCategoryConfig | null
+    hidden_categories?: string[]
     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`]
+    toggle_props?: PaneToggleProps
+    pane_props?: PaneProps
   } = $props()
 
+  // Show flags true: filter_visible only applies the category filter here
+  const count_visible = (entries: ConvexHullEntry[], shown: boolean): number =>
+    shown ? filter_visible(entries, true, true, entry_category, hidden_categories).length : 0
+
   let settings_rows = $derived([
     {
       label: `Visible stable`,
-      value: `${show_stable ? stable_entries.length : 0} / ${stable_entries.length}`,
+      value: `${count_visible(stable_entries, show_stable)} / ${stable_entries.length}`,
       key: `hull-visible-stable`,
     },
     {
       label: `Visible unstable`,
-      value: `${show_unstable ? unstable_entries.length : 0} / ${unstable_entries.length}`,
+      value: `${count_visible(unstable_entries, show_unstable)} / ${unstable_entries.length}`,
       key: `hull-visible-unstable`,
     },
     {
@@ -111,6 +122,8 @@
     {unstable_entries}
     {show_stable}
     {show_unstable}
+    {entry_category}
+    {hidden_categories}
     style="padding: 3pt; background: var(--pane-bg); --hull-stats-table-height: 30rem"
   />
 

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

@@ -1,19 +1,20 @@
-import DraggablePane from '../overlays/DraggablePane.svelte';
-import type { ComponentProps } from 'svelte';
+import type { PaneProps, PaneToggleProps } from '../overlays';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { ConvexHullEntry, PhaseStats } from './types';
+import type { ConvexHullEntry, EntryCategoryConfig, PhaseStats } from './types';
 type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `onclose`> & {
     phase_stats: PhaseStats | null;
     stable_entries: ConvexHullEntry[];
     unstable_entries: ConvexHullEntry[];
     show_stable?: boolean;
     show_unstable?: boolean;
+    entry_category?: EntryCategoryConfig | null;
+    hidden_categories?: string[];
     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`];
+    toggle_props?: PaneToggleProps;
+    pane_props?: PaneProps;
 };
 declare const ConvexHullInfoPane: import("svelte").Component<$$ComponentProps, {}, "pane_open">;
 type ConvexHullInfoPane = ReturnType<typeof ConvexHullInfoPane>;