matterviz 0.3.7 → 0.4.1

package/dist/settings.d.ts

@@ -1,9 +1,10 @@
 import type { ColorScaleType, D3InterpolateName } from './colors';
 import type { HullFaceColorMode } from './convex-hull/types';
 import type { D3SymbolName } from './labels';
-import type { Vec3 } from './math';
-import type { Orientation } from './plot';
+import type { Vec2, Vec3 } from './math';
+import type { BandwidthOption, Orientation, SankeyNodeAlign, SankeyOrientation, SunburstLabelRotation, SunburstLabelText, SunburstShape, SunburstValueMode, ViolinKind, ViolinSide, WhiskerMode } from './plot';
 import type { BondingStrategy } from './structure/bonding';
+import type { PolyhedraColorMode } from './structure/polyhedra';
 export interface SettingType<T = unknown> {
     value: T;
     description: string;
@@ -63,6 +64,31 @@ type SimpleLineStyleType = {
     width: SettingType<number>;
     color: SettingType<string>;
 };
+type BoxStyleType = {
+    color: SettingType<string>;
+    opacity: SettingType<number>;
+    stroke_width: SettingType<number>;
+    stroke_color: SettingType<string>;
+    border_radius: SettingType<number>;
+};
+type BoxWhiskerStyleType = {
+    width: SettingType<number>;
+    color: SettingType<string>;
+    cap_fraction: SettingType<number>;
+};
+type BoxLineStyleType = {
+    width: SettingType<number>;
+    color: SettingType<string>;
+};
+type BoxOutlierStyleType = {
+    radius: SettingType<number>;
+    opacity: SettingType<number>;
+    stroke_width: SettingType<number>;
+};
+type BoxViolinStyleType = {
+    opacity: SettingType<number>;
+    stroke_width: SettingType<number>;
+};
 type ConvexHullCommonType = {
     camera_zoom: SettingType<number>;
     camera_center_x: SettingType<number>;
@@ -105,6 +131,17 @@ export interface SettingsConfig {
         show_bonds: SettingType<ShowBonds>;
         bond_color: SettingType<string>;
         bonding_strategy: SettingType<BondingStrategy>;
+        show_polyhedra: SettingType<ShowBonds>;
+        polyhedra_opacity: SettingType<number>;
+        polyhedra_show_edges: SettingType<boolean>;
+        polyhedra_edge_color: SettingType<string>;
+        polyhedra_color_mode: SettingType<PolyhedraColorMode>;
+        polyhedra_color: SettingType<string>;
+        polyhedra_hide_center_atoms: SettingType<boolean>;
+        polyhedra_min_neighbors: SettingType<number>;
+        polyhedra_max_neighbors: SettingType<number>;
+        polyhedra_excluded_elements: SettingType<readonly string[]>;
+        polyhedra_included_elements: SettingType<readonly string[]>;
         atom_color_mode: SettingType<AtomColorMode>;
         atom_color_scale: SettingType<D3InterpolateName>;
         atom_color_scale_type: SettingType<ColorScaleType>;
@@ -154,7 +191,7 @@ export interface SettingsConfig {
     trajectory: {
         auto_play: SettingType<boolean>;
         fps: SettingType<number>;
-        fps_range: SettingType<[number, number]>;
+        fps_range: SettingType<Vec2>;
         display_mode: SettingType<`structure+scatter` | `structure` | `scatter` | `histogram` | `structure+histogram`>;
         show_controls: SettingType<boolean>;
         fullscreen_toggle: SettingType<boolean>;
@@ -226,6 +263,45 @@ export interface SettingsConfig {
         bar: SimpleBarStyleType;
         line: SimpleLineStyleType;
     };
+    box: {
+        whisker_mode: SettingType<WhiskerMode>;
+        box_width: SettingType<number>;
+        show_outliers: SettingType<boolean>;
+        show_mean: SettingType<boolean>;
+        kind: SettingType<ViolinKind>;
+        side: SettingType<ViolinSide>;
+        bandwidth: SettingType<Exclude<BandwidthOption, number>>;
+        violin_width: SettingType<number>;
+        violin_box_width: SettingType<number>;
+        box: BoxStyleType;
+        whisker: BoxWhiskerStyleType;
+        median: BoxLineStyleType;
+        outlier: BoxOutlierStyleType;
+        violin: BoxViolinStyleType;
+        display: DisplayConfigType;
+    };
+    sankey: {
+        orientation: SettingType<SankeyOrientation>;
+        node_align: SettingType<SankeyNodeAlign>;
+        node_width: SettingType<number>;
+        node_padding: SettingType<number>;
+        link_opacity: SettingType<number>;
+        show_node_labels: SettingType<boolean>;
+        iterations: SettingType<number>;
+    };
+    sunburst: {
+        shape: SettingType<SunburstShape>;
+        value_mode: SettingType<SunburstValueMode>;
+        max_depth: SettingType<number>;
+        inner_radius: SettingType<number>;
+        pad_angle: SettingType<number>;
+        min_fraction: SettingType<number>;
+        show_labels: SettingType<boolean>;
+        label_rotation: SettingType<SunburstLabelRotation>;
+        label_text: SettingType<SunburstLabelText>;
+        zoom_on_click: SettingType<boolean>;
+        show_breadcrumbs: SettingType<boolean>;
+    };
     composition: {
         display_mode: SettingType<`pie` | `bubble` | `bar`>;
         color_scheme: SettingType<string>;

package/dist/settings.js

@@ -3,6 +3,8 @@
 import { symbol_names } from './labels';
 import { merge_nested } from './utils';
 export const SHOW_BONDS_OPTIONS = [`never`, `always`, `crystals`, `molecules`];
+// Shared enum labels for never|always|crystals|molecules settings (bonds, polyhedra)
+const SHOW_BONDS_ENUM = Object.fromEntries(SHOW_BONDS_OPTIONS.map((key) => [key, key[0].toUpperCase() + key.slice(1)]));
 export const VECTOR_COLOR_MODES = [
     `auto`,
     `element`,
@@ -122,7 +124,7 @@ export const SETTINGS_CONFIG = {
         show_bonds: {
             value: `always`,
             description: `When to display bonds between atoms`,
-            enum: Object.fromEntries(SHOW_BONDS_OPTIONS.map((key) => [key, key[0].toUpperCase() + key.slice(1)])),
+            enum: SHOW_BONDS_ENUM,
         },
         bond_color: {
             value: `#666666`,
@@ -136,6 +138,62 @@ export const SETTINGS_CONFIG = {
                 solid_angle: `Solid Angle`,
             },
         },
+        show_polyhedra: {
+            value: `crystals`,
+            description: `When to render coordination polyhedra around cation-like centers`,
+            enum: SHOW_BONDS_ENUM,
+        },
+        polyhedra_opacity: {
+            value: 0.2,
+            description: `Opacity of coordination polyhedra faces`,
+            minimum: 0,
+            maximum: 1,
+        },
+        polyhedra_show_edges: {
+            value: true,
+            description: `Draw outlines along coordination polyhedra edges`,
+        },
+        polyhedra_edge_color: {
+            value: `#222222`,
+            description: `Color of coordination polyhedra edge lines`,
+        },
+        polyhedra_color_mode: {
+            value: `vertex`,
+            description: `Color polyhedra by the atoms at their corners, the center atom, or a single custom color`,
+            enum: {
+                vertex: `Vertex Atoms`,
+                center: `Center Atom`,
+                uniform: `Custom Color`,
+            },
+        },
+        polyhedra_color: {
+            value: `#4a90d9`,
+            description: `Custom polyhedra color (used when color mode is Custom Color)`,
+        },
+        polyhedra_hide_center_atoms: {
+            value: false,
+            description: `Hide the central atom of each rendered polyhedron`,
+        },
+        polyhedra_min_neighbors: {
+            value: 4,
+            description: `Minimum number of bonded neighbors (coordination number) to form a polyhedron`,
+            minimum: 4, // hulls of <4 points are degenerate and render nothing
+            maximum: 12,
+        },
+        polyhedra_max_neighbors: {
+            value: 8,
+            description: `Maximum number of bonded neighbors for a polyhedron (skips e.g. CN-12 cuboctahedra around large A-site cations)`,
+            minimum: 4,
+            maximum: 16,
+        },
+        polyhedra_excluded_elements: {
+            value: [],
+            description: `Elements excluded from acting as polyhedra centers`,
+        },
+        polyhedra_included_elements: {
+            value: [],
+            description: `Elements always allowed as polyhedra centers (overrides automatic hiding of spectator cations like alkali metals and the max neighbors cap)`,
+        },
         atom_color_mode: {
             value: `element`,
             description: `Property to use for atom coloring`,
@@ -622,6 +680,264 @@ export const SETTINGS_CONFIG = {
         },
         display: DISPLAY_CONFIG,
     },
+    // Box plot specific
+    box: {
+        whisker_mode: {
+            value: `tukey`,
+            description: `How whiskers are computed: 'tukey' (1.5*IQR), 'minmax' (data extremes), 'percentile' (5th/95th), or 'std' (mean ± std)`,
+            enum: {
+                tukey: `Tukey (1.5·IQR)`,
+                minmax: `Min/Max`,
+                percentile: `Percentile`,
+                std: `Std Dev`,
+            },
+        },
+        box_width: {
+            value: 0.8,
+            description: `Box width as a fraction of the category slot`,
+            minimum: 0.1,
+            maximum: 1,
+        },
+        show_outliers: {
+            value: true,
+            description: `Show outlier points beyond the whiskers`,
+        },
+        show_mean: {
+            value: false,
+            description: `Show the mean marker inside each box`,
+        },
+        kind: {
+            value: `box`,
+            description: `Glyph to draw per series: box, violin (KDE density), or both`,
+            enum: { box: `Box`, violin: `Violin`, 'violin+box': `Violin + Box` },
+        },
+        side: {
+            value: `both`,
+            description: `Which half of the slot a violin occupies (one-sided / split violins)`,
+            enum: { both: `Both`, positive: `Positive`, negative: `Negative` },
+        },
+        bandwidth: {
+            value: `silverman`,
+            description: `KDE bandwidth rule for violins`,
+            enum: { silverman: `Silverman`, scott: `Scott` },
+        },
+        violin_width: {
+            value: 0.9,
+            description: `Violin width as a fraction of the category slot`,
+            minimum: 0.1,
+            maximum: 1,
+        },
+        violin_box_width: {
+            value: 0.2,
+            description: `Inner box width (fraction of slot) when a box is drawn inside a violin`,
+            minimum: 0.05,
+            maximum: 1,
+        },
+        box: {
+            color: {
+                value: `#4A9EFF`,
+                description: `Box fill color`,
+            },
+            opacity: {
+                value: 0.6,
+                description: `Box fill opacity`,
+                minimum: 0,
+                maximum: 1,
+            },
+            stroke_width: {
+                value: 0.5,
+                description: `Box outline width`,
+                minimum: 0,
+                maximum: 5,
+            },
+            stroke_color: {
+                value: `#000000`,
+                description: `Box outline color`,
+            },
+            border_radius: {
+                value: 0,
+                description: `Corner radius for boxes (px)`,
+                minimum: 0,
+                maximum: 10,
+            },
+        },
+        whisker: {
+            width: {
+                value: 1,
+                description: `Whisker line width`,
+                minimum: 0.5,
+                maximum: 5,
+            },
+            color: {
+                value: `#000000`,
+                description: `Whisker line color`,
+            },
+            cap_fraction: {
+                value: 0.3,
+                description: `Whisker cap width as a fraction of the box width`,
+                minimum: 0,
+                maximum: 1,
+            },
+        },
+        median: {
+            width: {
+                value: 1.5,
+                description: `Median line width`,
+                minimum: 0.5,
+                maximum: 6,
+            },
+            color: {
+                value: `#000000`,
+                description: `Median line color`,
+            },
+        },
+        outlier: {
+            radius: {
+                value: 2.5,
+                description: `Outlier point radius (px)`,
+                minimum: 0.5,
+                maximum: 10,
+            },
+            opacity: {
+                value: 0.6,
+                description: `Outlier point opacity`,
+                minimum: 0,
+                maximum: 1,
+            },
+            stroke_width: {
+                value: 0,
+                description: `Outlier point stroke width`,
+                minimum: 0,
+                maximum: 3,
+            },
+        },
+        violin: {
+            opacity: {
+                value: 0.5,
+                description: `Violin fill opacity`,
+                minimum: 0,
+                maximum: 1,
+            },
+            stroke_width: {
+                value: 1,
+                description: `Violin outline width`,
+                minimum: 0,
+                maximum: 5,
+            },
+        },
+        display: DISPLAY_CONFIG,
+    },
+    // Sankey diagram specific
+    sankey: {
+        orientation: {
+            value: `horizontal`,
+            description: `Flow direction of the Sankey diagram`,
+            enum: { horizontal: `Horizontal`, vertical: `Vertical` },
+        },
+        node_align: {
+            value: `justify`,
+            description: `How nodes are aligned across columns (maps to d3-sankey alignment)`,
+            enum: { justify: `Justify`, left: `Left`, right: `Right`, center: `Center` },
+        },
+        node_width: {
+            value: 24,
+            description: `Node thickness in pixels`,
+            minimum: 4,
+            maximum: 60,
+        },
+        node_padding: {
+            value: 12,
+            description: `Vertical gap in pixels between nodes sharing a column`,
+            minimum: 0,
+            maximum: 40,
+        },
+        link_opacity: {
+            value: 0.5,
+            description: `Opacity of link ribbons`,
+            minimum: 0.05,
+            maximum: 1,
+        },
+        show_node_labels: {
+            value: true,
+            description: `Show node labels next to each node`,
+        },
+        iterations: {
+            value: 6,
+            description: `Number of d3-sankey relaxation iterations for node positioning`,
+            minimum: 0,
+            maximum: 64,
+        },
+    },
+    // Sunburst chart specific
+    sunburst: {
+        shape: {
+            value: `sunburst`,
+            description: `Chart geometry: polar rings (sunburst) or stacked rows (icicle)`,
+            enum: { sunburst: `Sunburst`, icicle: `Icicle` },
+        },
+        value_mode: {
+            value: `leaf-sum`,
+            description: `How node values are interpreted (plotly branchvalues semantics): leaf-sum ignores parent values, total treats every value as authoritative, remainder adds a node's own value on top of its children`,
+            enum: { 'leaf-sum': `Leaf sum`, total: `Total`, remainder: `Remainder` },
+        },
+        max_depth: {
+            value: 0,
+            description: `Number of rings shown below the current zoom root (0 = all)`,
+            minimum: 0,
+            maximum: 10,
+        },
+        inner_radius: {
+            value: 0.25,
+            description: `Center hole size as fraction of the outer radius`,
+            minimum: 0,
+            maximum: 0.8,
+        },
+        pad_angle: {
+            value: 0.1,
+            description: `Angular gap in degrees between sibling arcs`,
+            minimum: 0,
+            maximum: 4,
+        },
+        min_fraction: {
+            value: 0,
+            description: `Group sibling arcs smaller than this fraction of the total into one 'Other' slice per parent (0 = off)`,
+            minimum: 0,
+            maximum: 0.2,
+        },
+        show_labels: {
+            value: true,
+            description: `Show labels on arcs large enough to fit them`,
+        },
+        label_rotation: {
+            value: `auto`,
+            description: `Arc label orientation (auto picks radial/tangential per arc)`,
+            enum: {
+                auto: `Auto`,
+                radial: `Radial`,
+                tangential: `Tangential`,
+                horizontal: `Horizontal`,
+            },
+        },
+        label_text: {
+            value: `label`,
+            description: `What arc labels display (percent is of the root total)`,
+            enum: {
+                label: `Label`,
+                value: `Value`,
+                percent: `Percent`,
+                'label+value': `Label + value`,
+                'label+percent': `Label + percent`,
+            },
+        },
+        zoom_on_click: {
+            value: true,
+            description: `Clicking a branch arc zooms into that subtree (center circle zooms out)`,
+        },
+        show_breadcrumbs: {
+            value: true,
+            description: `Show a clickable trail of ancestors when zoomed into a subtree`,
+        },
+    },
     // Composition specific
     composition: {
         display_mode: {
@@ -1121,6 +1437,7 @@ export const DEFAULTS = extract_values(SETTINGS_CONFIG);
 export const merge = (user) => ({
     ...DEFAULTS,
     ...user,
+    symmetry: merge_nested(DEFAULTS.symmetry, user?.symmetry),
     structure: merge_nested(DEFAULTS.structure, user?.structure),
     trajectory: merge_nested(DEFAULTS.trajectory, user?.trajectory),
     composition: merge_nested(DEFAULTS.composition, user?.composition),
@@ -1128,5 +1445,8 @@ export const merge = (user) => ({
     scatter: merge_nested(DEFAULTS.scatter, user?.scatter),
     histogram: merge_nested(DEFAULTS.histogram, user?.histogram),
     bar: merge_nested(DEFAULTS.bar, user?.bar),
+    box: merge_nested(DEFAULTS.box, user?.box),
+    sankey: merge_nested(DEFAULTS.sankey, user?.sankey),
+    sunburst: merge_nested(DEFAULTS.sunburst, user?.sunburst),
     convex_hull: merge_nested(DEFAULTS.convex_hull, user?.convex_hull),
 });

package/dist/spectral/Bands.svelte

@@ -3,10 +3,11 @@
   import EmptyState from '../EmptyState.svelte'
   import { format_num } from '../labels'
   import { sanitize_html } from '../sanitize'
+  import { is_plain_object } from '../utils'
   import { SettingsSection } from '../layout'
   import type { Vec2 } from '../math'
-  import ScatterPlot from '../plot/ScatterPlot.svelte'
-  import type { AxisConfig, DataSeries, FillRegion } from '../plot/types'
+  import ScatterPlot from '../plot/scatter/ScatterPlot.svelte'
+  import type { AxisConfig, DataSeries, FillRegion } from '../plot/core/types'
   import * as helpers from './helpers'
   import type {
     BandsSpinMode,
@@ -32,6 +33,7 @@
     y_axis = $bindable({}),
     x_positions = $bindable(),
     reference_frequency = null,
+    highlighted_qpoint_index = null,
     ribbon_config = {},
     fermi_level = undefined,
     units = $bindable(`THz`),
@@ -45,8 +47,6 @@
     show_spin_control = true,
     show_annotation_controls = true,
     id = undefined,
-    class: class_name = undefined,
-    style = undefined,
     'data-testid': data_testid = undefined,
     ...rest
   }: ComponentProps<typeof ScatterPlot> & {
@@ -57,8 +57,10 @@
     path_mode?: PathMode
     band_type?: BandStructureType
     show_legend?: boolean
-    x_positions?: Record<string, [number, number]>
+    x_positions?: Record<string, Vec2>
     reference_frequency?: number | null
+    // Q-point index to highlight with a vertical line (synced from BZ k-path hover)
+    highlighted_qpoint_index?: number | null
     ribbon_config?: RibbonConfig | Record<string, RibbonConfig>
     fermi_level?: number // Fermi level for electronic bands (auto-detected if not provided)
     units?: FrequencyUnit // Phonon frequency display units (electronic always eV)
@@ -78,8 +80,6 @@
     show_spin_control?: boolean
     show_annotation_controls?: boolean
     id?: string
-    class?: string
-    style?: string
     'data-testid'?: string
   } = $props()
 
@@ -105,12 +105,12 @@
       }
     }
 
-    if (typeof line_kwargs === `object` && line_kwargs !== null) {
+    if (is_plain_object(line_kwargs)) {
       const mode_key = is_acoustic ? `acoustic` : `optical`
-      const mode_kwargs = (line_kwargs as Record<string, unknown>)[mode_key] as
-        | Record<string, unknown>
-        | undefined
-      const source = (mode_kwargs ?? line_kwargs) as Record<string, unknown>
+      const mode_kwargs = line_kwargs[mode_key]
+      const source: Record<string, unknown> = is_plain_object(mode_kwargs)
+        ? mode_kwargs
+        : line_kwargs
       return {
         stroke: (source.stroke as string) ?? defaults.stroke,
         stroke_width: (source.stroke_width as number) ?? defaults.stroke_width,
@@ -258,7 +258,8 @@
     const attrs: Record<string, Dom_attr_value> = {}
     for (const [attr_name, attr_value] of Object.entries(rest)) {
       if (
-        (attr_name === `role` || attr_name.startsWith(`aria-`)) &&
+        (attr_name === `class` || attr_name === `style` || attr_name === `role` ||
+          attr_name.startsWith(`aria-`)) &&
         is_dom_attr_value(attr_value)
       ) {
         attrs[attr_name] = attr_value
@@ -287,7 +288,7 @@
       x_positions = {}
       return
     }
-    const positions: Record<string, [number, number]> = {}
+    const positions: Record<string, Vec2> = {}
     let current_x = 0
 
     // Preserve physical path order using the first available structure
@@ -590,9 +591,9 @@
     const display_values = detected_band_type === `phonon`
       ? convert_band_values(all_freqs)
       : all_freqs
-    if (!display_values.length) return undefined
+    if (display_values.length === 0) return undefined
     const finite = display_values.filter(Number.isFinite)
-    if (!finite.length) return undefined
+    if (finite.length === 0) return undefined
     let min_val = Math.min(...finite), max_val = Math.max(...finite)
     if (
       // clamp phonon min to 0 if negatives are noise
@@ -617,22 +618,12 @@
   // Sync zoom changes from ScatterPlot back to parent via bindable y_axis
   // Also clears parent range when internal range becomes invalid (auto-range reset)
   $effect(() => {
-    const range = internal_y_axis.range
-    if (helpers.is_valid_range(range)) {
-      if (y_axis.range?.[0] !== range[0] || y_axis.range?.[1] !== range[1]) {
-        y_axis = { ...y_axis, range }
-      }
-      return
-    }
-    // Range became invalid - clear parent's range to propagate reset
-    if (`range` in y_axis) {
-      const { range: _omit, ...axis_without_range } = y_axis
-      y_axis = axis_without_range
-    }
+    const next = helpers.sync_axis_range(y_axis, internal_y_axis.range)
+    if (next !== y_axis) y_axis = next
   })
 
   let has_series = $derived(series_data.length > 0)
-  let is_strict_path_error = $derived(path_mode === `strict` && !!strict_path_error)
+  let is_strict_path_error = $derived(path_mode === `strict` && Boolean(strict_path_error))
 
   let imaginary_mode_region = $derived.by((): FillRegion[] => {
     if (
@@ -685,7 +676,7 @@
     )
     const occupied = all_energies.filter((energy) => energy <= effective_fermi_level)
     const unoccupied = all_energies.filter((energy) => energy > effective_fermi_level)
-    if (!occupied.length || !unoccupied.length) return null
+    if (occupied.length === 0 || unoccupied.length === 0) return null
     const vbm = Math.max(...occupied)
     const cbm = Math.min(...unoccupied)
     const gap = cbm - vbm
@@ -693,7 +684,7 @@
     return { vbm, cbm, gap }
   })
 
-  let empty_state_message = $derived.by(() => {
+  let empty_state_msg = $derived.by(() => {
     if (is_strict_path_error) {
       return strict_path_error ?? `Path mismatch in strict mode.`
     }
@@ -706,13 +697,18 @@
     return `No valid band structure data to display.`
   })
 
+  // X-position of the externally hovered q-point (from BZ k-path), for the highlight line
+  let highlight_x = $derived.by(() => {
+    if (highlighted_qpoint_index == null) return null
+    const bs = Object.values(band_structs_dict)[0]
+    return bs ? helpers.qpoint_x_position(bs, highlighted_qpoint_index, x_positions ?? {}) : null
+  })
+
   let display = $state({ x_grid: false, y_grid: true, y_zero_line: true })
 </script>
 {#if has_series && !is_strict_path_error}
   <ScatterPlot
     {id}
-    class={class_name}
-    {style}
     data-testid={data_testid}
     series={series_data}
     {fill_regions}
@@ -900,6 +896,23 @@
         />
       {/each}
 
+      <!-- Hovered q-point vertical line (synced from Brillouin zone k-path hover) -->
+      {#if highlight_x != null}
+        {@const hover_x = x_scale_fn(highlight_x)}
+        {#if Number.isFinite(hover_x)}
+          <line
+            x1={hover_x}
+            x2={hover_x}
+            y1={pad.t}
+            y2={height - pad.b}
+            stroke="var(--bands-hover-line-color, #ff6b35)"
+            stroke-width="var(--bands-hover-line-width, 2)"
+            opacity="var(--bands-hover-line-opacity, 0.85)"
+            pointer-events="none"
+          />
+        {/if}
+      {/if}
+
       <!-- Shared geometry for Fermi level and gap annotations -->
       {@const fermi_y = effective_fermi_level !== undefined
       ? y_scale_fn(effective_fermi_level)
@@ -1007,11 +1020,9 @@
 {:else}
   <EmptyState
     {id}
-    class={class_name}
-    {style}
     data-testid={data_testid}
     {...empty_state_attrs}
-    message={empty_state_message}
+    message={empty_state_msg}
   />
 {/if}