matterviz 0.4.1 → 0.4.2

package/dist/plot/histogram/Histogram.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { AxisLoadError, BarStyle, DataLoaderFn, HistogramHandlerProps, PanConfig, RefLine, RefLineEvent } from '..';
+import type { MarginalsProp } from '../core/marginals';
 import type { BasePlotProps, DataSeries, LegendConfig, PlotConfig } from '../core/types';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
@@ -11,13 +12,11 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & BasePlotProps & PlotCon
     selected_property?: string;
     mode?: `single` | `overlay`;
     tooltip?: Snippet<[HistogramHandlerProps]>;
-    header_controls?: Snippet<[
-        {
-            height: number;
-            width: number;
-            fullscreen: boolean;
-        }
-    ]>;
+    header_controls?: Snippet<[{
+        height: number;
+        width: number;
+        fullscreen: boolean;
+    }]>;
     controls_extra?: Snippet<[Required<PlotConfig>]>;
     change?: (data: {
         value: number;
@@ -44,6 +43,7 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & BasePlotProps & PlotCon
     on_axis_change?: (axis: `x` | `x2` | `y` | `y2`, key: string, new_series: DataSeries[]) => void;
     on_error?: (error: AxisLoadError) => void;
     pan?: PanConfig;
+    marginals?: MarginalsProp;
 };
 declare const Histogram: import("svelte").Component<$$ComponentProps, {}, "mode" | "show_controls" | "fullscreen" | "series" | "bins" | "show_legend" | "selected_property" | "hovered" | "ref_lines" | "controls_open">;
 type Histogram = ReturnType<typeof Histogram>;

package/dist/plot/histogram/HistogramControls.svelte

@@ -74,20 +74,16 @@
     }}
   >
     <div class="pane-row">
-      <label>Bins:
-        <input
-          type="range"
-          min="5"
-          max="100"
-          step="5"
-          bind:value={bins}
-        />
+      <label
+        >Bins:
+        <input type="range" min="5" max="100" step="5" bind:value={bins} />
       </label>
       <input type="number" min="5" max="100" step="5" bind:value={bins} />
     </div>
     {#if has_multiple_series}
       <div class="pane-row">
-        <label>Mode:
+        <label
+          >Mode:
           <select bind:value={mode}>
             <option value="single">Single</option>
             <option value="overlay">Overlay</option>
@@ -96,7 +92,8 @@
       </div>
       {#if mode === `single`}
         <div class="pane-row">
-          <label>Property:
+          <label
+            >Property:
             <select bind:value={selected_property}>
               <option value="">All</option>
               {#each series_options as option (option)}
@@ -125,15 +122,18 @@
       {#if visible_series.length === 1}
         <label>Fill: <input type="color" bind:value={bar.color} /></label>
       {/if}
-      <label>Opacity:
+      <label
+        >Opacity:
         <input type="range" min="0" max="1" step="0.05" bind:value={bar.opacity} />
         <input type="number" min="0" max="1" step="0.05" bind:value={bar.opacity} />
       </label>
-      <label>Stroke Width:
+      <label
+        >Stroke Width:
         <input type="range" min="0" max="5" step="0.1" bind:value={bar.stroke_width} />
         <input type="number" min="0" max="5" step="0.1" bind:value={bar.stroke_width} />
       </label>
-      <label>Stroke Color:
+      <label
+        >Stroke Color:
         <input type="color" bind:value={bar.stroke_color} />
         <input
           type="range"
@@ -143,13 +143,7 @@
           bind:value={bar.stroke_opacity}
           title="Opacity"
         />
-        <input
-          type="number"
-          min="0"
-          max="1"
-          step="0.05"
-          bind:value={bar.stroke_opacity}
-        />
+        <input type="number" min="0" max="1" step="0.05" bind:value={bar.stroke_opacity} />
       </label>
     {/if}
   </SettingsSection>
@@ -188,25 +182,33 @@
     class="pane-grid"
     style="grid-template-columns: 1fr 1fr"
   >
-    <label>X: <select bind:value={x_axis.scale_type}>
+    <label
+      >X: <select bind:value={x_axis.scale_type}>
         <option value="linear">Linear</option>
         <option value="log">Log</option>
-      </select></label>
+      </select></label
+    >
     {#if has_x2_points}
-      <label>X2: <select bind:value={x2_axis.scale_type}>
+      <label
+        >X2: <select bind:value={x2_axis.scale_type}>
           <option value="linear">Linear</option>
           <option value="log">Log</option>
-        </select></label>
+        </select></label
+      >
     {/if}
-    <label>Y: <select bind:value={y_axis.scale_type}>
+    <label
+      >Y: <select bind:value={y_axis.scale_type}>
         <option value="linear">Linear</option>
         <option value="log">Log</option>
-      </select></label>
+      </select></label
+    >
     {#if has_y2_points}
-      <label>Y2: <select bind:value={y2_axis.scale_type}>
+      <label
+        >Y2: <select bind:value={y2_axis.scale_type}>
           <option value="linear">Linear</option>
           <option value="log">Log</option>
-        </select></label>
+        </select></label
+      >
     {/if}
   </SettingsSection>
 </PlotControls>

package/dist/plot/histogram/histogram.d.ts

@@ -0,0 +1,31 @@
+import type { Vec2 } from '../../math';
+import type { AxisConfig, DataSeries, ScaleType } from '../core/types';
+type RangeLimit = [number | null, number | null];
+type BinConfig = {
+    x_domain: Vec2;
+    x2_domain: Vec2;
+    bin_count: number;
+};
+export declare function log_safe_range(axis: Pick<AxisConfig, `range` | `scale_type`>): RangeLimit;
+export declare function compute_histogram_bins(entries: readonly {
+    series_data: DataSeries;
+    series_idx: number;
+}[], { x_domain, x2_domain, has_x2, bin_count, series_color, }: BinConfig & {
+    has_x2: boolean;
+    series_color: (series_data: DataSeries) => string;
+}): {
+    id: string | number;
+    series_idx: number;
+    label: string;
+    color: string;
+    bins: import("d3-array").Bin<number, number>[];
+    max_count: number;
+    x_axis: "x1" | "x2" | undefined;
+    y_axis: "y1" | "y2" | undefined;
+}[];
+export declare function compute_count_range(series_list: readonly DataSeries[], { x_domain, x2_domain, bin_count, scale_type, y_limit, range_padding, }: BinConfig & {
+    scale_type: ScaleType;
+    y_limit: RangeLimit;
+    range_padding: number;
+}): Vec2;
+export {};

package/dist/plot/histogram/histogram.js

@@ -0,0 +1,70 @@
+// Pure binning/range helpers extracted from Histogram.svelte (no reactivity, no pixel scales) so the numeric logic is unit-testable.
+import { bin, max } from 'd3-array';
+import { get_nice_data_range } from '../core/scales';
+import { get_scale_type_name } from '../core/types';
+// On a log axis any bound <= 0 is invalid, so treat it as unset (null): callers then fall back to
+// the positive count-based bound rather than pinning the log domain at <= 0 (a broken scale).
+export function log_safe_range(axis) {
+    const [lo, hi] = axis.range ?? [null, null];
+    if (get_scale_type_name(axis.scale_type ?? `linear`) !== `log`)
+        return [lo, hi];
+    // drop any bound <= 0 (guard the type first: `null <= 0` is true in JS)
+    const drop_non_positive = (bound) => typeof bound === `number` && bound <= 0 ? null : bound;
+    return [drop_non_positive(lo), drop_non_positive(hi)];
+}
+// Bin each selected series over the domain of the x-axis it renders on (d3 bin() drops
+// out-of-domain values). Pad-independent so the obstacle field can reuse it.
+export function compute_histogram_bins(entries, { x_domain, x2_domain, has_x2, bin_count, series_color, }) {
+    const hist_generator = bin().domain([x_domain[0], x_domain[1]]).thresholds(bin_count);
+    const x2_hist_generator = has_x2
+        ? bin().domain([x2_domain[0], x2_domain[1]]).thresholds(bin_count)
+        : null;
+    return entries.map(({ series_data, series_idx }) => {
+        const use_x2 = series_data.x_axis === `x2`;
+        const active_hist = use_x2 && x2_hist_generator ? x2_hist_generator : hist_generator;
+        const bins_arr = active_hist(series_data.y);
+        return {
+            id: series_data.id ?? series_idx,
+            series_idx,
+            label: series_data.label ?? `Series ${series_idx + 1}`,
+            color: series_color(series_data),
+            bins: bins_arr,
+            max_count: max(bins_arr, (data) => data.length) ?? 0,
+            x_axis: series_data.x_axis,
+            y_axis: series_data.y_axis,
+        };
+    });
+}
+// Compute a nice [min, max] count range for a set of series, binning each over its own x-domain.
+// On log count axes the lower bound sits just below the smallest non-empty bin so singleton tail
+// bins don't collapse to zero height; linear/arcsinh axes start from 0.
+export function compute_count_range(series_list, { x_domain, x2_domain, bin_count, scale_type, y_limit, range_padding, }) {
+    const type_name = get_scale_type_name(scale_type);
+    // no-data fallback: a positive floor on log (counts can't be <= 0), else 0
+    const empty_range = [type_name === `log` ? 1 : 0, 1];
+    if (series_list.length === 0)
+        return empty_range;
+    const counts = series_list.flatMap((srs) => {
+        const hist = bin()
+            .domain(srs.x_axis === `x2` ? x2_domain : x_domain)
+            .thresholds(bin_count);
+        return hist(srs.y)
+            .map((data) => data.length)
+            .filter((count) => count > 0);
+    });
+    const max_count = Math.max(0, ...counts);
+    if (max_count <= 0)
+        return empty_range;
+    const min_count = type_name === `log` ? Math.min(...counts) : 0;
+    const [y0, y1] = get_nice_data_range([
+        { x: min_count, y: 0 },
+        { x: max_count, y: 0 },
+    ], ({ x }) => x, y_limit, scale_type, range_padding, false);
+    // For log count axes, start just below the smallest non-empty bin so singleton tail bins
+    // don't collapse to zero height at the baseline. y_limit is pre-sanitized log-safe, so a null
+    // (incl. dropped non-positive) lower correctly falls back to the positive minimum.
+    if (type_name === `log`)
+        return [y_limit[0] ?? min_count / 1.1, y1];
+    // For linear/arcsinh, start from 0
+    return [Math.max(0, y0), y1];
+}

package/dist/plot/histogram/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Histogram } from './Histogram.svelte';
 export { default as HistogramControls } from './HistogramControls.svelte';
+export * from './histogram';

package/dist/plot/histogram/index.js

@@ -1,2 +1,3 @@
 export { default as Histogram } from './Histogram.svelte';
 export { default as HistogramControls } from './HistogramControls.svelte';
+export * from './histogram';

package/dist/plot/index.d.ts

@@ -6,3 +6,4 @@ export * from './sankey';
 export * from './scatter';
 export * from './scatter-3d';
 export * from './sunburst';
+export * from './treemap';

package/dist/plot/index.js

@@ -8,3 +8,4 @@ export * from './sankey';
 export * from './scatter';
 export * from './scatter-3d';
 export * from './sunburst';
+export * from './treemap';

package/dist/plot/sankey/Sankey.svelte

@@ -18,10 +18,14 @@
   } from '..'
   import { DEFAULT_SERIES_COLORS, PlotLegend, PlotTooltip, SankeyControls } from '..'
   import { closest_data_idx } from '../core/interactions'
-  import { compute_element_placement, constrain_tooltip_position, filter_padding } from '../core/layout'
+  import {
+    compute_element_placement,
+    constrain_tooltip_position,
+    filter_padding,
+  } from '../core/layout'
   import type { Sides } from '../core/layout'
   import { compute_sankey_layout } from './sankey'
-  import type { PositionedLink, PositionedNode} from './sankey'
+  import type { PositionedLink, PositionedNode } from './sankey'
   import { unique_id } from '../core/utils'
   import { DEFAULTS } from '../../settings'
   import { type Snippet, untrack } from 'svelte'
@@ -64,47 +68,44 @@
     header_controls,
     controls_extra,
     ...rest
-  }: HTMLAttributes<HTMLDivElement> & Omit<BasePlotProps, `change`> & {
-    data?: SankeyData<Metadata>
-    orientation?: SankeyOrientation
-    node_width?: number
-    node_padding?: number
-    node_align?: SankeyNodeAlign
-    iterations?: number
-    link_opacity?: number
-    link_color_mode?: SankeyLinkColorMode
-    show_node_labels?: boolean
-    node_label?: (node: PositionedNode) => string
-    value_format?: string
-    padding?: Sides
-    legend?: LegendConfig | null
-    show_legend?: boolean
-    tooltip?: Snippet<[SankeyHandlerProps<Metadata>]>
-    // Fully replace the default node rect / link ribbon. NOTE: this also replaces the
-    // built-in hover/focus/click + tooltip wiring, so re-implement any interactivity
-    // you need inside the snippet.
-    node_content?: Snippet<[{ node: PositionedNode; color: string }]>
-    link_content?: Snippet<[{ link: PositionedLink; color: string }]>
-    change?: (data: SankeyHandlerProps<Metadata> | null) => void
-    on_node_click?: (
-      data: SankeyNodeHandlerProps<Metadata> & { event: MouseEvent | KeyboardEvent },
-    ) => void
-    on_node_hover?: (
-      data:
-        | (SankeyNodeHandlerProps<Metadata> & { event: MouseEvent | FocusEvent })
-        | null,
-    ) => void
-    on_link_click?: (
-      data: SankeyLinkHandlerProps<Metadata> & { event: MouseEvent | KeyboardEvent },
-    ) => void
-    on_link_hover?: (
-      data:
-        | (SankeyLinkHandlerProps<Metadata> & { event: MouseEvent | FocusEvent })
-        | null,
-    ) => void
-    header_controls?: Snippet<[{ height: number; width: number; fullscreen: boolean }]>
-    controls_extra?: Snippet<[{ orientation: SankeyOrientation }]>
-  } = $props()
+  }: HTMLAttributes<HTMLDivElement> &
+    Omit<BasePlotProps, `change`> & {
+      data?: SankeyData<Metadata>
+      orientation?: SankeyOrientation
+      node_width?: number
+      node_padding?: number
+      node_align?: SankeyNodeAlign
+      iterations?: number
+      link_opacity?: number
+      link_color_mode?: SankeyLinkColorMode
+      show_node_labels?: boolean
+      node_label?: (node: PositionedNode) => string
+      value_format?: string
+      padding?: Sides
+      legend?: LegendConfig | null
+      show_legend?: boolean
+      tooltip?: Snippet<[SankeyHandlerProps<Metadata>]>
+      // Fully replace the default node rect / link ribbon. NOTE: this also replaces the
+      // built-in hover/focus/click + tooltip wiring, so re-implement any interactivity
+      // you need inside the snippet.
+      node_content?: Snippet<[{ node: PositionedNode; color: string }]>
+      link_content?: Snippet<[{ link: PositionedLink; color: string }]>
+      change?: (data: SankeyHandlerProps<Metadata> | null) => void
+      on_node_click?: (
+        data: SankeyNodeHandlerProps<Metadata> & { event: MouseEvent | KeyboardEvent },
+      ) => void
+      on_node_hover?: (
+        data: (SankeyNodeHandlerProps<Metadata> & { event: MouseEvent | FocusEvent }) | null,
+      ) => void
+      on_link_click?: (
+        data: SankeyLinkHandlerProps<Metadata> & { event: MouseEvent | KeyboardEvent },
+      ) => void
+      on_link_hover?: (
+        data: (SankeyLinkHandlerProps<Metadata> & { event: MouseEvent | FocusEvent }) | null,
+      ) => void
+      header_controls?: Snippet<[{ height: number; width: number; fullscreen: boolean }]>
+      controls_extra?: Snippet<[{ orientation: SankeyOrientation }]>
+    } = $props()
 
   let [width, height] = $state([0, 0])
   let wrapper: HTMLDivElement | undefined = $state()
@@ -126,8 +127,8 @@
 
   // Resolved node colors (per node_idx), explicit color or cycled palette
   let node_colors = $derived(
-    data.nodes.map((node, idx) =>
-      node.color ?? DEFAULT_SERIES_COLORS[idx % DEFAULT_SERIES_COLORS.length]
+    data.nodes.map(
+      (node, idx) => node.color ?? DEFAULT_SERIES_COLORS[idx % DEFAULT_SERIES_COLORS.length],
     ),
   )
 
@@ -160,9 +161,7 @@
   })
 
   // node_idx -> positioned node (array order is preserved by d3-sankey, but map is safer)
-  let node_by_idx = $derived(
-    new Map(layout.nodes.map((node) => [node.node_idx, node])),
-  )
+  let node_by_idx = $derived(new Map(layout.nodes.map((node) => [node.node_idx, node])))
 
   const node_id_at = (node_idx: number): string | number =>
     node_by_idx.get(node_idx)?.id ?? node_idx
@@ -220,7 +219,10 @@
 
   const link_stroke_opacity = (link: PositionedLink): number => {
     if (link_dim(link)) return link_opacity * 0.15
-    if (active) return active.links.has(link.link_idx) ? Math.min(1, link_opacity + 0.35) : link_opacity * 0.25
+    if (active)
+      return active.links.has(link.link_idx)
+        ? Math.min(1, link_opacity + 0.35)
+        : link_opacity * 0.25
     return link_opacity
   }
 
@@ -271,7 +273,8 @@
       hover_info = make_node_props(node)
       hover_pos = event_pos(event) ?? node_center(node)
       change(hover_info)
-      if (event) on_node_hover?.({ ...(hover_info as SankeyNodeHandlerProps<Metadata>), event })
+      if (event)
+        on_node_hover?.({ ...(hover_info as SankeyNodeHandlerProps<Metadata>), event })
     } else {
       hovered_node = null
       hover_info = null
@@ -288,7 +291,8 @@
       hover_info = make_link_props(link)
       hover_pos = event_pos(event) ?? { x: pad.l + link.mid.x, y: pad.t + link.mid.y }
       change(hover_info)
-      if (event) on_link_hover?.({ ...(hover_info as SankeyLinkHandlerProps<Metadata>), event })
+      if (event)
+        on_link_hover?.({ ...(hover_info as SankeyLinkHandlerProps<Metadata>), event })
     } else {
       hovered_link = null
       hover_info = null
@@ -299,12 +303,12 @@
 
   const link_from_event = (event: Event): PositionedLink | null => {
     const idx = closest_data_idx(event, `data-sankey-link-idx`, svg_element)
-    return idx == null ? null : layout.links[idx] ?? null
+    return idx == null ? null : (layout.links[idx] ?? null)
   }
 
   const node_from_event = (event: Event): PositionedNode | null => {
     const idx = closest_data_idx(event, `data-sankey-node-idx`, svg_element)
-    return idx == null ? null : node_by_idx.get(idx) ?? null
+    return idx == null ? null : (node_by_idx.get(idx) ?? null)
   }
 
   function handle_link_hover_event(event: MouseEvent | FocusEvent) {
@@ -364,7 +368,7 @@
         label: node.label ?? `${node.id ?? idx}`,
         visible: !muted_nodes.has(node.id ?? idx),
         display_style: { symbol_type: `Square` as const, symbol_color: node_colors[idx] },
-      }))
+      })),
   )
 
   function toggle_node(series_idx: number) {
@@ -409,7 +413,7 @@
   bind:clientWidth={width}
   bind:clientHeight={height}
   {...rest}
-  class="sankey {rest.class ?? ``}"
+  class={[`sankey`, rest.class]}
   class:fullscreen
 >
   {#if width && height}
@@ -517,7 +521,9 @@
                   rx="1"
                   role={on_node_click ? `button` : undefined}
                   tabindex={on_node_click ? 0 : undefined}
-                  aria-label={on_node_click ? `${node.label ?? node.id}: ${node.value}` : undefined}
+                  aria-label={on_node_click
+                    ? `${node.label ?? node.id}: ${node.value}`
+                    : undefined}
                   style:cursor={on_node_click ? `pointer` : `default`}
                 />
               {/if}
@@ -528,8 +534,8 @@
                   x={lbl.x}
                   y={lbl.y}
                   text-anchor={lbl.anchor}
-                  dominant-baseline={lbl.baseline}
-                >{node_text(node)}</text>
+                  dominant-baseline={lbl.baseline}>{node_text(node)}</text
+                >
               {/if}
             </g>
           {/each}
@@ -550,9 +556,10 @@
     )}
     <!-- Solid chip bg (PlotTooltip auto-contrasts text). Links use the source node
     color so gradient/static ribbons (url(...)/var(...)) still get a readable color. -->
-    {@const tip_bg = hover_info.type === `node`
-    ? hover_info.color
-    : node_colors[hover_info.source_idx] ?? `rgba(0, 0, 0, 0.7)`}
+    {@const tip_bg =
+      hover_info.type === `node`
+        ? hover_info.color
+        : (node_colors[hover_info.source_idx] ?? `rgba(0, 0, 0, 0.7)`)}
     <PlotTooltip
       x={tip.x}
       y={tip.y}
@@ -563,13 +570,13 @@
       {#if tooltip}
         {@render tooltip(hover_info)}
       {:else if hover_info.type === `node`}
-        <strong>{hover_info.label ?? hover_info.id}</strong>: {
-          format_value(hover_info.value, value_format)
-        }
+        <strong>{hover_info.label ?? hover_info.id}</strong>: {format_value(
+          hover_info.value,
+          value_format,
+        )}
       {:else}
-        {hover_info.source_label ?? hover_info.source_idx} &rarr; {
-          hover_info.target_label ?? hover_info.target_idx
-        }: {format_value(hover_info.value, value_format)}
+        {hover_info.source_label ?? hover_info.source_idx} &rarr; {hover_info.target_label ??
+          hover_info.target_idx}: {format_value(hover_info.value, value_format)}
       {/if}
     </PlotTooltip>
   {/if}
@@ -583,7 +590,7 @@
       series_data={legend_data}
       on_toggle={legend?.on_toggle ?? toggle_node}
       on_item_hover={(item) =>
-      (hovered_node = item != null && item.series_idx >= 0 ? item.series_idx : null)}
+        (hovered_node = item != null && item.series_idx >= 0 ? item.series_idx : null)}
       style={`position: absolute; left: ${legend_left}px; top: ${legend_top}px; pointer-events: auto; ${
         legend?.style ?? ``
       }`}
@@ -663,7 +670,9 @@
   .sankey :global(.pane-toggle),
   .sankey .header-controls {
     opacity: 0;
-    transition: opacity 0.2s, background-color 0.2s;
+    transition:
+      opacity 0.2s,
+      background-color 0.2s;
   }
   .sankey:hover :global(.pane-toggle),
   .sankey:hover .header-controls,

package/dist/plot/sankey/Sankey.svelte.d.ts

@@ -51,7 +51,7 @@ declare function $$render<Metadata extends Record<string, unknown> = Record<stri
         }]>;
     };
     exports: {};
-    bindings: "data" | "orientation" | "show_controls" | "fullscreen" | "hovered" | "controls_open" | "node_align" | "node_width" | "node_padding" | "link_opacity" | "show_node_labels";
+    bindings: "orientation" | "show_controls" | "data" | "fullscreen" | "hovered" | "controls_open" | "node_align" | "node_width" | "node_padding" | "link_opacity" | "show_node_labels";
     slots: {};
     events: {};
 };
@@ -59,7 +59,7 @@ declare class __sveltets_Render<Metadata extends Record<string, unknown> = Recor
     props(): ReturnType<typeof $$render<Metadata>>['props'];
     events(): ReturnType<typeof $$render<Metadata>>['events'];
     slots(): ReturnType<typeof $$render<Metadata>>['slots'];
-    bindings(): "data" | "orientation" | "show_controls" | "fullscreen" | "hovered" | "controls_open" | "node_align" | "node_width" | "node_padding" | "link_opacity" | "show_node_labels";
+    bindings(): "orientation" | "show_controls" | "data" | "fullscreen" | "hovered" | "controls_open" | "node_align" | "node_width" | "node_padding" | "link_opacity" | "show_node_labels";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/plot/sankey/SankeyControls.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { SettingsSection } from '../../layout'
+  import { NumberRangeInput, SettingsSection } from '../../layout'
   import type { SankeyNodeAlign, SankeyOrientation } from '..'
   import ControlPane from '../core/components/ControlPane.svelte'
   import { DEFAULTS } from '../../settings'
@@ -74,21 +74,27 @@
           <option value="center">Center</option>
         </select>
       </label>
-      <label style="flex: 1 1 100%">
-        Node width:
-        <input type="range" min="4" max="60" step="1" bind:value={node_width} />
-        <input type="number" min="4" max="60" step="1" bind:value={node_width} />
-      </label>
-      <label style="flex: 1 1 100%">
-        Node padding:
-        <input type="range" min="0" max="40" step="1" bind:value={node_padding} />
-        <input type="number" min="0" max="40" step="1" bind:value={node_padding} />
-      </label>
-      <label style="flex: 1 1 100%">
-        Link opacity:
-        <input type="range" min="0.05" max="1" step="0.05" bind:value={link_opacity} />
-        <input type="number" min="0.05" max="1" step="0.05" bind:value={link_opacity} />
-      </label>
+      <NumberRangeInput
+        min={4}
+        max={60}
+        step={1}
+        bind:value={node_width}
+        style="flex: 1 1 100%">Node width:</NumberRangeInput
+      >
+      <NumberRangeInput
+        min={0}
+        max={40}
+        step={1}
+        bind:value={node_padding}
+        style="flex: 1 1 100%">Node padding:</NumberRangeInput
+      >
+      <NumberRangeInput
+        min={0.05}
+        max={1}
+        step={0.05}
+        bind:value={link_opacity}
+        style="flex: 1 1 100%">Link opacity:</NumberRangeInput
+      >
       <label style="flex: 1 1 100%">
         <input type="checkbox" bind:checked={show_node_labels} />
         Show node labels