matterviz 0.4.1 → 0.4.3

package/dist/settings.js

@@ -19,27 +19,138 @@ export const ATOM_COLOR_MODE_OPTIONS = [
     `custom`,
 ];
 const DISPLAY_CONFIG = {
-    x_grid: {
-        value: true,
-        description: `Show X-axis grid lines`,
+    x_grid: { value: true, description: `Show X-axis grid lines` },
+    y_grid: { value: true, description: `Show Y-axis grid lines` },
+    y2_grid: { value: false, description: `Show Y2-axis grid lines` },
+    x_zero_line: { value: true, description: `Show X-axis zero reference line` },
+    y_zero_line: { value: true, description: `Show Y-axis zero reference line` },
+};
+// Settings shared by the sunburst + treemap sections below so the two charts'
+// options can't drift; `node` names the chart's visual unit (arc/cell) and
+// `levels` its depth unit (rings/levels) in descriptions.
+const hierarchy_chart_settings = (node, levels, zoom_desc) => ({
+    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` },
     },
-    y_grid: {
-        value: true,
-        description: `Show Y-axis grid lines`,
+    max_depth: {
+        value: 0,
+        description: `Number of ${levels} shown below the current zoom root (0 = all)`,
+        minimum: 0,
+        maximum: 10,
     },
-    y2_grid: {
-        value: false,
-        description: `Show Y2-axis grid lines`,
+    min_fraction: {
+        value: 0,
+        description: `Group sibling ${node}s smaller than this fraction of the total into one 'Other' ${node === `arc` ? `slice` : `cell`} per parent (0 = off)`,
+        minimum: 0,
+        maximum: 0.2,
     },
-    x_zero_line: {
+    show_labels: {
         value: true,
-        description: `Show X-axis zero reference line`,
+        description: `Show labels on ${node}s large enough to fit them`,
+    },
+    label_text: {
+        value: `label`,
+        description: `What ${node} labels display (percent is of the root total, parent-percent of the parent node)`,
+        enum: {
+            label: `Label`,
+            value: `Value`,
+            percent: `Percent`,
+            'label+value': `Label + value`,
+            'label+percent': `Label + percent`,
+            'label+parent-percent': `Label + % of parent`,
+        },
     },
-    y_zero_line: {
+    zoom_on_click: { value: true, description: zoom_desc },
+    show_breadcrumbs: {
         value: true,
-        description: `Show Y-axis zero reference line`,
+        description: `Show a clickable ${node === `arc` ? `trail` : `pathbar`} of ancestors when zoomed into a subtree`,
     },
+});
+// Settings shared by the binary/ternary/quaternary convex hull sections below so
+// the three systems' options can't drift; only camera/threshold values differ.
+const convex_hull_settings = (system, values) => {
+    const dim = { binary: `2D`, ternary: `3D`, quaternary: `4D` }[system];
+    const hull = `${dim} convex hull`;
+    return {
+        camera_zoom: {
+            value: values.camera_zoom,
+            description: `Initial camera zoom for ${system} (${dim}) convex hull`,
+            minimum: 0.1,
+            maximum: values.camera_zoom_max,
+        },
+        camera_center_x: {
+            value: 0,
+            description: `Initial X center for ${system} (${dim}) convex hull`,
+        },
+        camera_center_y: {
+            value: values.camera_center_y,
+            description: `Initial Y center for ${system} (${dim}) convex hull`,
+        },
+        color_mode: {
+            value: `energy`,
+            description: `Color mode for ${hull} points`,
+            enum: { stability: `Stability`, energy: `Energy` },
+        },
+        color_scale: {
+            value: `interpolateViridis`,
+            description: `D3 interpolate color scale for ${hull} energy mode`,
+        },
+        show_stable: { value: true, description: `Show stable phases in ${hull}` },
+        show_unstable: { value: true, description: `Show unstable phases in ${hull}` },
+        show_stable_labels: {
+            value: true,
+            description: `Show labels for stable phases in ${hull}`,
+        },
+        show_unstable_labels: {
+            value: false,
+            description: `Show labels for unstable phases in ${hull}`,
+        },
+        max_hull_dist_show_phases: {
+            value: values.max_hull_dist_show_phases,
+            description: `Max eV/atom above hull for showing unstable entries in ${hull}`,
+            minimum: 0,
+            maximum: 2,
+        },
+        max_hull_dist_show_labels: {
+            value: 0.1,
+            description: `Max eV/atom above hull for labeling unstable entries in ${hull}`,
+            minimum: 0,
+            maximum: 2,
+        },
+        fullscreen: { value: false, description: `Start in fullscreen for ${hull}` },
+        info_pane_open: { value: false, description: `Info pane open by default for ${hull}` },
+        legend_pane_open: {
+            value: false,
+            description: `Legend pane open by default for ${hull}`,
+        },
+    };
 };
+// Hull-face settings shared by the 3D-capable hulls (ternary + quaternary)
+const hull_face_settings = (dim, values) => ({
+    show_hull_faces: { value: true, description: `Show hull faces in ${dim} convex hull` },
+    hull_face_color: {
+        value: `#4caf50`,
+        description: `Color for hull faces in ${dim} convex hull`,
+    },
+    hull_face_opacity: {
+        value: values.opacity,
+        description: `Opacity for hull faces in ${dim} convex hull (0-1)`,
+        minimum: 0,
+        maximum: 1,
+    },
+    hull_face_color_mode: {
+        value: values.color_mode,
+        description: `Coloring mode for hull faces: uniform (single color), formation_energy (by E_form), dominant_element (by element), or facet_index (categorical)`,
+        enum: {
+            uniform: `Uniform`,
+            formation_energy: `Formation energy`,
+            dominant_element: `Dominant element`,
+            facet_index: `Facet index`,
+        },
+    },
+});
 // Complete settings configuration with values, descriptions, and constraints
 export const SETTINGS_CONFIG = {
     // General display settings
@@ -92,10 +203,7 @@ export const SETTINGS_CONFIG = {
             value: false,
             description: `Render all atoms with the same size regardless of element`,
         },
-        show_atoms: {
-            value: true,
-            description: `Display atoms in the structure`,
-        },
+        show_atoms: { value: true, description: `Display atoms in the structure` },
         show_image_atoms: {
             value: true,
             description: `Show atoms on the edge of the cell that are not part of the primitive basis`,
@@ -126,17 +234,11 @@ export const SETTINGS_CONFIG = {
             description: `When to display bonds between atoms`,
             enum: SHOW_BONDS_ENUM,
         },
-        bond_color: {
-            value: `#666666`,
-            description: `Color for bonds (hex color code)`,
-        },
+        bond_color: { value: `#666666`, description: `Color for bonds (hex color code)` },
         bonding_strategy: {
             value: `electroneg_ratio`,
             description: `Method for determining bonds between atoms`,
-            enum: {
-                electroneg_ratio: `Electronegativity Ratio`,
-                solid_angle: `Solid Angle`,
-            },
+            enum: { electroneg_ratio: `Electronegativity Ratio`, solid_angle: `Solid Angle` },
         },
         show_polyhedra: {
             value: `crystals`,
@@ -160,11 +262,7 @@ export const SETTINGS_CONFIG = {
         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`,
-            },
+            enum: { vertex: `Vertex Atoms`, center: `Center Atom`, uniform: `Custom Color` },
         },
         polyhedra_color: {
             value: `#4a90d9`,
@@ -210,10 +308,7 @@ export const SETTINGS_CONFIG = {
         atom_color_scale_type: {
             value: `continuous`,
             description: `Color scale type for property-based coloring`,
-            enum: {
-                continuous: `Continuous Gradient`,
-                categorical: `Discrete Categories`,
-            },
+            enum: { continuous: `Continuous Gradient`, categorical: `Discrete Categories` },
         },
         // Camera & Controls
         show_gizmo: {
@@ -229,13 +324,10 @@ export const SETTINGS_CONFIG = {
         camera_projection: {
             value: `orthographic`,
             description: `Camera projection type`,
-            enum: {
-                perspective: `Perspective`,
-                orthographic: `Orthographic`,
-            },
+            enum: { perspective: `Perspective`, orthographic: `Orthographic` },
         },
         initial_zoom: {
-            value: 35,
+            value: 50,
             description: `Initial zoom level for orthographic projection (ignored for perspective)`,
             minimum: 0.1,
             maximum: 200,
@@ -295,24 +387,15 @@ export const SETTINGS_CONFIG = {
             maxItems: 3,
         },
         // Labels & Lighting
-        show_site_labels: {
-            value: false,
-            description: `Show element labels on atoms`,
-        },
-        show_site_indices: {
-            value: false,
-            description: `Show site index numbers on atoms`,
-        },
+        show_site_labels: { value: false, description: `Show element labels on atoms` },
+        show_site_indices: { value: false, description: `Show site index numbers on atoms` },
         site_label_size: {
             value: 1,
             description: `Font size for atom labels`,
             minimum: 0.5,
             maximum: 5,
         },
-        site_label_color: {
-            value: `#111111`,
-            description: `Text color for atom labels`,
-        },
+        site_label_color: { value: `#111111`, description: `Text color for atom labels` },
         site_label_bg_color: {
             value: `color-mix(in srgb, #000000 0%, transparent)`,
             description: `Background color for atom labels`,
@@ -347,7 +430,7 @@ export const SETTINGS_CONFIG = {
             description: `Per-key configuration for site vector layers. Keys map to site property names (e.g. force, magmom, force_DFT). Auto-populated when a structure with vector data loads.`,
         },
         vector_scale: {
-            value: 1.0,
+            value: 0.75,
             description: `Scale factor for site vector arrows`,
             minimum: 0.1,
             maximum: 10.0,
@@ -369,8 +452,8 @@ export const SETTINGS_CONFIG = {
             description: `Show all arrows at the same length (direction only). Useful for spin/magmom visualization where orientation matters but magnitude does not.`,
         },
         vector_uniform_thickness: {
-            value: false,
-            description: `Use the same shaft and head size for all arrows regardless of length. When off (default), thickness scales with arrow length.`,
+            value: true,
+            description: `Use the same shaft and head size for all arrows regardless of length. Negative radii are scaled by characteristic atom spacing.`,
         },
         vector_origin_gap: {
             value: 0,
@@ -379,31 +462,25 @@ export const SETTINGS_CONFIG = {
             maximum: 0.5,
         },
         vector_shaft_radius: {
-            value: -0.03,
-            description: `Radius of vector shaft (negative = relative to length, positive = absolute)`,
+            value: -0.01,
+            description: `Radius of vector shaft (negative = relative to length or atom spacing with uniform thickness, positive = absolute)`,
             minimum: -0.1,
             maximum: 0.1,
         },
         vector_arrow_head_radius: {
-            value: -0.06,
-            description: `Radius of vector arrow head (negative = relative to length, positive = absolute)`,
+            value: -0.04,
+            description: `Radius of vector arrow head (negative = relative to length or atom spacing with uniform thickness, positive = absolute)`,
             minimum: -0.2,
             maximum: 0.2,
         },
         vector_arrow_head_length: {
-            value: -0.15,
-            description: `Length of vector arrow head (negative = relative to length, positive = absolute)`,
+            value: -0.1,
+            description: `Length of vector arrow head (negative = relative to length or atom spacing with uniform thickness, positive = absolute)`,
             minimum: -0.5,
             maximum: 0.5,
         },
-        show_cell: {
-            value: false,
-            description: `Display system cell`,
-        },
-        show_cell_vectors: {
-            value: true,
-            description: `Display cell vectors`,
-        },
+        show_cell: { value: false, description: `Display system cell` },
+        show_cell_vectors: { value: true, description: `Display cell vectors` },
         cell_edge_opacity: {
             value: 0.3,
             description: `Opacity of cell edge lines`,
@@ -416,14 +493,8 @@ export const SETTINGS_CONFIG = {
             minimum: 0,
             maximum: 1,
         },
-        cell_edge_color: {
-            value: `#808080`,
-            description: `Color of cell edges`,
-        },
-        cell_surface_color: {
-            value: `#e0e0e0`,
-            description: `Color of cell surfaces`,
-        },
+        cell_edge_color: { value: `#808080`, description: `Color of cell edges` },
+        cell_surface_color: { value: `#e0e0e0`, description: `Color of cell surfaces` },
         cell_edge_width: {
             value: 1.5,
             description: `Width of cell edge lines`,
@@ -466,10 +537,7 @@ export const SETTINGS_CONFIG = {
                 'structure+histogram': `Structure + Histogram`,
             },
         },
-        show_controls: {
-            value: true,
-            description: `Show playback controls`,
-        },
+        show_controls: { value: true, description: `Show playback controls` },
         fullscreen_toggle: {
             value: true,
             description: `Show fullscreen toggle button (web-only, always false in other contexts)`,
@@ -484,11 +552,7 @@ export const SETTINGS_CONFIG = {
         layout: {
             value: `auto`,
             description: `Layout arrangement for trajectory viewer`,
-            enum: {
-                auto: `Auto`,
-                horizontal: `Horizontal`,
-                vertical: `Vertical`,
-            },
+            enum: { auto: `Auto`, horizontal: `Horizontal`, vertical: `Vertical` },
         },
         // File handling and loading
         allow_file_drop: {
@@ -552,10 +616,7 @@ export const SETTINGS_CONFIG = {
             value: false,
             description: `Use smooth interpolation between frames`,
         },
-        loop_playback: {
-            value: true,
-            description: `Loop trajectory playback`,
-        },
+        loop_playback: { value: true, description: `Loop trajectory playback` },
         pause_on_hover: {
             value: false,
             description: `Pause playback when hovering over controls`,
@@ -564,10 +625,7 @@ export const SETTINGS_CONFIG = {
             value: true,
             description: `Highlight current frame in timeline`,
         },
-        show_frame_info: {
-            value: true,
-            description: `Show frame information overlay`,
-        },
+        show_frame_info: { value: true, description: `Show frame information overlay` },
         // Performance
         max_frames_in_memory: {
             value: 1000,
@@ -591,25 +649,16 @@ export const SETTINGS_CONFIG = {
             minimum: 0,
             maximum: 100,
         },
-        cache_parsed_data: {
-            value: true,
-            description: `Cache parsed trajectory data`,
-        },
+        cache_parsed_data: { value: true, description: `Cache parsed trajectory data` },
     },
     // Histogram specific
     histogram: {
         mode: {
             value: `overlay`,
             description: `Histogram display mode. 'overlay' shows multiple histograms in the same plot, 'single' shows a single histogram`,
-            enum: {
-                overlay: `Overlay`,
-                single: `Single`,
-            },
-        },
-        show_legend: {
-            value: true,
-            description: `Show legend in histogram plots`,
+            enum: { overlay: `Overlay`, single: `Single` },
         },
+        show_legend: { value: true, description: `Show legend in histogram plots` },
         bin_count: {
             value: 100,
             description: `Number of bins for histogram plots`,
@@ -617,10 +666,7 @@ export const SETTINGS_CONFIG = {
             maximum: 1000,
         },
         bar: {
-            color: {
-                value: `#4A9EFF`,
-                description: `Histogram bar fill color`,
-            },
+            color: { value: `#4A9EFF`, description: `Histogram bar fill color` },
             opacity: {
                 value: 0.7,
                 description: `Histogram bar opacity`,
@@ -633,10 +679,7 @@ export const SETTINGS_CONFIG = {
                 minimum: 0,
                 maximum: 5,
             },
-            stroke_color: {
-                value: `#000000`,
-                description: `Histogram bar stroke color`,
-            },
+            stroke_color: { value: `#000000`, description: `Histogram bar stroke color` },
             stroke_opacity: {
                 value: 0.5,
                 description: `Histogram bar stroke opacity`,
@@ -649,10 +692,7 @@ export const SETTINGS_CONFIG = {
     // Bar plot specific
     bar: {
         bar: {
-            color: {
-                value: `#4A9EFF`,
-                description: `Bar plot fill color`,
-            },
+            color: { value: `#4A9EFF`, description: `Bar plot fill color` },
             opacity: {
                 value: 0.6,
                 description: `Bar plot opacity (overlay mode)`,
@@ -667,16 +707,8 @@ export const SETTINGS_CONFIG = {
             },
         },
         line: {
-            width: {
-                value: 2,
-                description: `Bar plot line width`,
-                minimum: 0.5,
-                maximum: 10,
-            },
-            color: {
-                value: `#4A9EFF`,
-                description: `Bar plot line color`,
-            },
+            width: { value: 2, description: `Bar plot line width`, minimum: 0.5, maximum: 10 },
+            color: { value: `#4A9EFF`, description: `Bar plot line color` },
         },
         display: DISPLAY_CONFIG,
     },
@@ -702,10 +734,7 @@ export const SETTINGS_CONFIG = {
             value: true,
             description: `Show outlier points beyond the whiskers`,
         },
-        show_mean: {
-            value: false,
-            description: `Show the mean marker inside each box`,
-        },
+        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`,
@@ -734,16 +763,8 @@ export const SETTINGS_CONFIG = {
             maximum: 1,
         },
         box: {
-            color: {
-                value: `#4A9EFF`,
-                description: `Box fill color`,
-            },
-            opacity: {
-                value: 0.6,
-                description: `Box fill opacity`,
-                minimum: 0,
-                maximum: 1,
-            },
+            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`,
@@ -751,7 +772,7 @@ export const SETTINGS_CONFIG = {
                 maximum: 5,
             },
             stroke_color: {
-                value: `#000000`,
+                value: `var(--text-color, black)`, // theme-responsive like axis/grid colors
                 description: `Box outline color`,
             },
             border_radius: {
@@ -762,14 +783,9 @@ export const SETTINGS_CONFIG = {
             },
         },
         whisker: {
-            width: {
-                value: 1,
-                description: `Whisker line width`,
-                minimum: 0.5,
-                maximum: 5,
-            },
+            width: { value: 1, description: `Whisker line width`, minimum: 0.5, maximum: 5 },
             color: {
-                value: `#000000`,
+                value: `var(--text-color, black)`, // theme-responsive like axis/grid colors
                 description: `Whisker line color`,
             },
             cap_fraction: {
@@ -780,14 +796,9 @@ export const SETTINGS_CONFIG = {
             },
         },
         median: {
-            width: {
-                value: 1.5,
-                description: `Median line width`,
-                minimum: 0.5,
-                maximum: 6,
-            },
+            width: { value: 1.5, description: `Median line width`, minimum: 0.5, maximum: 6 },
             color: {
-                value: `#000000`,
+                value: `var(--text-color, black)`, // theme-responsive like axis/grid colors
                 description: `Median line color`,
             },
         },
@@ -812,12 +823,7 @@ export const SETTINGS_CONFIG = {
             },
         },
         violin: {
-            opacity: {
-                value: 0.5,
-                description: `Violin fill opacity`,
-                minimum: 0,
-                maximum: 1,
-            },
+            opacity: { value: 0.5, description: `Violin fill opacity`, minimum: 0, maximum: 1 },
             stroke_width: {
                 value: 1,
                 description: `Violin outline width`,
@@ -857,10 +863,7 @@ export const SETTINGS_CONFIG = {
             minimum: 0.05,
             maximum: 1,
         },
-        show_node_labels: {
-            value: true,
-            description: `Show node labels next to each node`,
-        },
+        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`,
@@ -870,22 +873,12 @@ export const SETTINGS_CONFIG = {
     },
     // Sunburst chart specific
     sunburst: {
+        ...hierarchy_chart_settings(`arc`, `rings`, `Clicking a branch arc zooms into that subtree (center circle zooms out)`),
         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`,
@@ -898,16 +891,6 @@ export const SETTINGS_CONFIG = {
             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)`,
@@ -918,24 +901,27 @@ export const SETTINGS_CONFIG = {
                 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`,
-            },
+    },
+    // Treemap chart specific
+    treemap: {
+        ...hierarchy_chart_settings(`cell`, `levels`, `Clicking any cell zooms into it, plotly-style (the breadcrumb pathbar zooms out)`),
+        padding_inner: {
+            value: 0,
+            description: `Pixel gap between sibling cells (0 = cells share a single stroke divider; gaps > 0 show the parent's fill)`,
+            minimum: 0,
+            maximum: 10,
         },
-        zoom_on_click: {
-            value: true,
-            description: `Clicking a branch arc zooms into that subtree (center circle zooms out)`,
+        padding_top: {
+            value: 18,
+            description: `Pixel strip reserved at the top of branch cells for their label (0 = no headers)`,
+            minimum: 0,
+            maximum: 40,
         },
-        show_breadcrumbs: {
-            value: true,
-            description: `Show a clickable trail of ancestors when zoomed into a subtree`,
+        padding_outer: {
+            value: 3,
+            description: `Pixel inset of child cells within their parent's left/right/bottom edges, so parents visibly enclose their subtree (plotly marker.pad)`,
+            minimum: 0,
+            maximum: 10,
         },
     },
     // Composition specific
@@ -943,11 +929,7 @@ export const SETTINGS_CONFIG = {
         display_mode: {
             value: `pie`,
             description: `Display mode for composition data`,
-            enum: {
-                pie: `Pie`,
-                bubble: `Bubble`,
-                bar: `Bar`,
-            },
+            enum: { pie: `Pie`, bubble: `Bubble`, bar: `Bar` },
         },
         color_scheme: {
             value: `Vesta`,
@@ -969,30 +951,18 @@ export const SETTINGS_CONFIG = {
             description: `Default symbol type for scatter plots`,
             enum: Object.fromEntries(symbol_names.map((name) => [name, name])),
         },
-        show_legend: {
-            value: true,
-            description: `Show legend in scatter plots`,
-        },
-        show_points: {
-            value: true,
-            description: `Show points in scatter plots`,
-        },
-        show_lines: {
-            value: true,
-            description: `Show connecting lines in scatter plots`,
-        },
+        show_legend: { value: true, description: `Show legend in scatter plots` },
+        show_points: { value: true, description: `Show points in scatter plots` },
+        show_lines: { value: true, description: `Show connecting lines in scatter plots` },
         display: DISPLAY_CONFIG,
         point: {
             size: {
-                value: 4,
+                value: 3,
                 description: `Point size for scatter plots`,
                 minimum: 1,
                 maximum: 20,
             },
-            color: {
-                value: `#4A9EFF`,
-                description: `Default color for scatter plot points`,
-            },
+            color: { value: `#4A9EFF`, description: `Default color for scatter plot points` },
             opacity: {
                 value: 1,
                 description: `Opacity of scatter plot points`,
@@ -1023,10 +993,7 @@ export const SETTINGS_CONFIG = {
                 minimum: 0.5,
                 maximum: 10,
             },
-            color: {
-                value: `#4A9EFF`,
-                description: `Default color for scatter plot lines`,
-            },
+            color: { value: `#4A9EFF`, description: `Default color for scatter plot lines` },
             opacity: {
                 value: 1,
                 description: `Opacity of scatter plot lines`,
@@ -1047,52 +1014,22 @@ export const SETTINGS_CONFIG = {
             minimum: 0,
             maximum: 2000,
         },
-        enable_zoom: {
-            value: true,
-            description: `Enable zooming in plots`,
-        },
+        enable_zoom: { value: true, description: `Enable zooming in plots` },
         zoom_factor: {
             value: 1.5,
             description: `Zoom factor for plot interactions`,
             minimum: 1.1,
             maximum: 5.0,
         },
-        auto_fit_range: {
-            value: true,
-            description: `Automatically fit plot range to data`,
-        },
-        grid_lines: {
-            value: true,
-            description: `Show grid lines in plots`,
-        },
-        axis_labels: {
-            value: true,
-            description: `Show axis labels in plots`,
-        },
-        show_x_zero_line: {
-            value: true,
-            description: `Show X-axis zero reference line`,
-        },
-        show_y_zero_line: {
-            value: true,
-            description: `Show Y-axis zero reference line`,
-        },
-        show_x_grid: {
-            value: true,
-            description: `Show X-axis grid lines`,
-        },
-        show_x2_grid: {
-            value: false,
-            description: `Show secondary X-axis grid lines`,
-        },
-        show_y_grid: {
-            value: true,
-            description: `Show Y-axis grid lines`,
-        },
-        show_y2_grid: {
-            value: true,
-            description: `Show secondary Y-axis grid lines`,
-        },
+        auto_fit_range: { value: true, description: `Automatically fit plot range to data` },
+        grid_lines: { value: true, description: `Show grid lines in plots` },
+        axis_labels: { value: true, description: `Show axis labels in plots` },
+        show_x_zero_line: { value: true, description: `Show X-axis zero reference line` },
+        show_y_zero_line: { value: true, description: `Show Y-axis zero reference line` },
+        show_x_grid: { value: true, description: `Show X-axis grid lines` },
+        show_x2_grid: { value: false, description: `Show secondary X-axis grid lines` },
+        show_y_grid: { value: true, description: `Show Y-axis grid lines` },
+        show_y2_grid: { value: true, description: `Show secondary Y-axis grid lines` },
         x_format: {
             value: `.2~s`,
             description: `Number format for X-axis ticks (D3 format specifier)`,
@@ -1112,18 +1049,12 @@ export const SETTINGS_CONFIG = {
         x_scale_type: {
             value: `linear`,
             description: `Scale type for X-axis`,
-            enum: {
-                linear: `Linear`,
-                log: `Log`,
-            },
+            enum: { linear: `Linear`, log: `Log` },
         },
         y_scale_type: {
             value: `linear`,
             description: `Scale type for Y-axis`,
-            enum: {
-                linear: `Linear`,
-                log: `Log`,
-            },
+            enum: { linear: `Linear`, log: `Log` },
         },
         x_ticks: {
             value: 8,
@@ -1140,75 +1071,20 @@ export const SETTINGS_CONFIG = {
     },
     convex_hull: {
         // Convex hull defaults (binary/ternary/quaternary)
-        binary: {
-            camera_zoom: {
-                value: 1.0,
-                description: `Initial zoom for binary (2D) convex hull`,
-                minimum: 0.1,
-                maximum: 10,
-            },
-            camera_center_x: {
-                value: 0,
-                description: `Initial X center for binary (2D) convex hull`,
-            },
-            camera_center_y: {
-                value: 0,
-                description: `Initial Y center for binary (2D) convex hull`,
-            },
-            color_mode: {
-                value: `energy`,
-                description: `Color mode for 2D convex hull points`,
-                enum: {
-                    stability: `Stability`,
-                    energy: `Energy`,
-                },
-            },
-            color_scale: {
-                value: `interpolateViridis`,
-                description: `D3 interpolate color scale for 2D convex hull energy mode`,
-            },
-            show_stable: {
-                value: true,
-                description: `Show stable phases in 2D convex hull`,
-            },
-            show_unstable: {
-                value: true,
-                description: `Show unstable phases in 2D convex hull`,
-            },
-            show_stable_labels: {
-                value: true,
-                description: `Show labels for stable phases in 2D convex hull`,
-            },
-            show_unstable_labels: {
-                value: false,
-                description: `Show labels for unstable phases in 2D convex hull`,
-            },
-            max_hull_dist_show_phases: {
-                value: 0.1,
-                description: `Max eV/atom above hull for showing unstable entries in 2D convex hull`,
-                minimum: 0,
-                maximum: 2,
-            },
-            max_hull_dist_show_labels: {
-                value: 0.1,
-                description: `Max eV/atom above hull for labeling unstable entries in 2D convex hull`,
-                minimum: 0,
-                maximum: 2,
-            },
-            fullscreen: {
-                value: false,
-                description: `Start in fullscreen for 2D convex hull`,
-            },
-            info_pane_open: {
-                value: false,
-                description: `Info pane open by default for 2D convex hull`,
-            },
-            legend_pane_open: {
-                value: false,
-                description: `Legend pane open by default for 2D convex hull`,
-            },
-        },
+        binary: convex_hull_settings(`binary`, {
+            camera_zoom: 1.0,
+            camera_zoom_max: 10,
+            camera_center_y: 0,
+            max_hull_dist_show_phases: 0.1,
+        }),
         ternary: {
+            ...convex_hull_settings(`ternary`, {
+                camera_zoom: 1.5,
+                camera_zoom_max: 10,
+                camera_center_y: -50,
+                max_hull_dist_show_phases: 0.5,
+            }),
+            ...hull_face_settings(`3D`, { opacity: 0.3, color_mode: `uniform` }),
             camera_elevation: {
                 value: 45,
                 description: `Initial camera elevation (deg) for ternary (3D) convex hull`,
@@ -1221,98 +1097,15 @@ export const SETTINGS_CONFIG = {
                 minimum: -360,
                 maximum: 360,
             },
-            camera_zoom: {
-                value: 1.5,
-                description: `Initial camera zoom for ternary (3D) convex hull`,
-                minimum: 0.1,
-                maximum: 10,
-            },
-            camera_center_x: {
-                value: 0,
-                description: `Initial X center for ternary (3D) convex hull`,
-            },
-            camera_center_y: {
-                value: -50,
-                description: `Initial Y center for ternary (3D) convex hull`,
-            },
-            color_mode: {
-                value: `energy`,
-                description: `Color mode for 3D convex hull points`,
-                enum: {
-                    stability: `Stability`,
-                    energy: `Energy`,
-                },
-            },
-            color_scale: {
-                value: `interpolateViridis`,
-                description: `D3 interpolate color scale for 3D convex hull energy mode`,
-            },
-            show_stable: {
-                value: true,
-                description: `Show stable phases in 3D convex hull`,
-            },
-            show_unstable: {
-                value: true,
-                description: `Show unstable phases in 3D convex hull`,
-            },
-            show_stable_labels: {
-                value: true,
-                description: `Show labels for stable phases in 3D convex hull`,
-            },
-            show_unstable_labels: {
-                value: false,
-                description: `Show labels for unstable phases in 3D convex hull`,
-            },
-            max_hull_dist_show_phases: {
-                value: 0.5,
-                description: `Max eV/atom above hull for showing unstable entries in 3D convex hull`,
-                minimum: 0,
-                maximum: 2,
-            },
-            max_hull_dist_show_labels: {
-                value: 0.1,
-                description: `Max eV/atom above hull for labeling unstable entries in 3D convex hull`,
-                minimum: 0,
-                maximum: 2,
-            },
-            show_hull_faces: {
-                value: true,
-                description: `Render lower hull faces in 3D convex hull`,
-            },
-            hull_face_color: {
-                value: `#4caf50`,
-                description: `Color for lower hull faces in 3D convex hull`,
-            },
-            hull_face_opacity: {
-                value: 0.3,
-                description: `Opacity for hull faces in 3D convex hull (0-1)`,
-                minimum: 0,
-                maximum: 1,
-            },
-            hull_face_color_mode: {
-                value: `uniform`,
-                description: `Coloring mode for hull faces: uniform (single color), formation_energy (by E_form), dominant_element (by element), or facet_index (categorical)`,
-                enum: {
-                    uniform: `Uniform`,
-                    formation_energy: `Formation energy`,
-                    dominant_element: `Dominant element`,
-                    facet_index: `Facet index`,
-                },
-            },
-            fullscreen: {
-                value: false,
-                description: `Start in fullscreen for 3D convex hull`,
-            },
-            info_pane_open: {
-                value: false,
-                description: `Info pane open by default for 3D convex hull`,
-            },
-            legend_pane_open: {
-                value: false,
-                description: `Legend pane open by default for 3D convex hull`,
-            },
         },
         quaternary: {
+            ...convex_hull_settings(`quaternary`, {
+                camera_zoom: 1.4,
+                camera_zoom_max: 20,
+                camera_center_y: 20,
+                max_hull_dist_show_phases: 0.1,
+            }),
+            ...hull_face_settings(`4D`, { opacity: 0.03, color_mode: `dominant_element` }),
             camera_rotation_x: {
                 value: -0.6,
                 description: `Initial camera X rotation (rad) for quaternary (4D) convex hull`,
@@ -1325,96 +1118,6 @@ export const SETTINGS_CONFIG = {
                 minimum: -6.283,
                 maximum: 6.283,
             },
-            camera_zoom: {
-                value: 1.4,
-                description: `Initial camera zoom for quaternary (4D) convex hull`,
-                minimum: 0.1,
-                maximum: 20,
-            },
-            camera_center_x: {
-                value: 0,
-                description: `Initial X center for quaternary (4D) convex hull`,
-            },
-            camera_center_y: {
-                value: 20,
-                description: `Initial Y center for quaternary (4D) convex hull`,
-            },
-            color_mode: {
-                value: `energy`,
-                description: `Color mode for 4D convex hull points`,
-                enum: {
-                    stability: `Stability`,
-                    energy: `Energy`,
-                },
-            },
-            color_scale: {
-                value: `interpolateViridis`,
-                description: `D3 interpolate color scale for 4D convex hull energy mode`,
-            },
-            show_stable: {
-                value: true,
-                description: `Show stable phases in 4D convex hull`,
-            },
-            show_unstable: {
-                value: true,
-                description: `Show unstable phases in 4D convex hull`,
-            },
-            show_stable_labels: {
-                value: true,
-                description: `Show labels for stable phases in 4D convex hull`,
-            },
-            show_unstable_labels: {
-                value: false,
-                description: `Show labels for unstable phases in 4D convex hull`,
-            },
-            show_hull_faces: {
-                value: true,
-                description: `Show convex hull faces in 4D convex hull`,
-            },
-            hull_face_color: {
-                value: `#4caf50`,
-                description: `Color for hull faces in 4D convex hull`,
-            },
-            hull_face_opacity: {
-                value: 0.03,
-                description: `Opacity for hull faces in 4D convex hull (0-1)`,
-                minimum: 0,
-                maximum: 1,
-            },
-            hull_face_color_mode: {
-                value: `dominant_element`,
-                description: `Coloring mode for hull faces: uniform (single color), formation_energy (by E_form), dominant_element (by element), or facet_index (categorical)`,
-                enum: {
-                    uniform: `Uniform`,
-                    formation_energy: `Formation energy`,
-                    dominant_element: `Dominant element`,
-                    facet_index: `Facet index`,
-                },
-            },
-            max_hull_dist_show_phases: {
-                value: 0.1,
-                description: `Max eV/atom above hull for showing unstable entries in 4D convex hull`,
-                minimum: 0,
-                maximum: 2,
-            },
-            max_hull_dist_show_labels: {
-                value: 0.1,
-                description: `Max eV/atom above hull for labeling unstable entries in 4D convex hull`,
-                minimum: 0,
-                maximum: 2,
-            },
-            fullscreen: {
-                value: false,
-                description: `Start in fullscreen for 4D convex hull`,
-            },
-            info_pane_open: {
-                value: false,
-                description: `Info pane open by default for 4D convex hull`,
-            },
-            legend_pane_open: {
-                value: false,
-                description: `Legend pane open by default for 4D convex hull`,
-            },
         },
     },
 };
@@ -1448,5 +1151,6 @@ export const merge = (user) => ({
     box: merge_nested(DEFAULTS.box, user?.box),
     sankey: merge_nested(DEFAULTS.sankey, user?.sankey),
     sunburst: merge_nested(DEFAULTS.sunburst, user?.sunburst),
+    treemap: merge_nested(DEFAULTS.treemap, user?.treemap),
     convex_hull: merge_nested(DEFAULTS.convex_hull, user?.convex_hull),
 });