matterviz 0.4.2 → 0.4.3

package/dist/plot/treemap/Treemap.svelte

@@ -26,6 +26,7 @@
     hierarchy_legend_items,
     is_activation_key,
     node_handler_props,
+    observe_height,
     pointer_pos,
     prune_muted_ids,
     safe_hierarchy_layout,
@@ -42,6 +43,15 @@
   import type { Rect, Sides } from '../core/layout'
   import { arrow_nav_target } from '../sunburst/render'
   import type { PositionedArc } from '../sunburst/sunburst'
+  import {
+    normalize_treemap_label_lines,
+    place_treemap_label,
+    safe_font_size,
+    type TreemapLabelFit,
+    type TreemapLabelFormatter,
+    type TreemapLabelLine,
+    type TreemapLabelPlacement,
+  } from './labels'
   import type { TreemapNode, TreemapNodeHandlerProps } from './treemap'
   import { lerp_rects, tile_rects } from './treemap'
   import { DEFAULTS } from '../../settings'
@@ -52,12 +62,16 @@
   import { Tween, type TweenOptions } from 'svelte/motion'
   import { SvelteSet } from 'svelte/reactivity'
 
-  const DEFAULT_PADDING: Required<Sides> = { t: 10, b: 10, l: 10, r: 10 }
+  // no outer inset by default: cells tile flush with the container (pass
+  // `padding` to reserve chart-edge space, e.g. for host-drawn annotations)
+  const DEFAULT_PADDING: Required<Sides> = { t: 0, b: 0, l: 0, r: 0 }
 
   let {
     data = $bindable([]),
     value_mode = $bindable(DEFAULTS.treemap.value_mode),
-    sort = `none`,
+    // descending (unlike Sunburst's input-order default): squarified tiling
+    // reads best with the largest cell top-left and smallest bottom-right
+    sort = `descending`,
     level_lighten = 0,
     min_fraction = $bindable(DEFAULTS.treemap.min_fraction),
     other_label = `Other`,
@@ -67,6 +81,11 @@
     padding_outer = $bindable(DEFAULTS.treemap.padding_outer),
     show_labels = $bindable(DEFAULTS.treemap.show_labels),
     label_text = $bindable(DEFAULTS.treemap.label_text),
+    label_formatter,
+    label_fit = `shrink`,
+    label_min_font_size = 6,
+    label_max_font_size,
+    parent_label_font_size = 14,
     zoom_on_click = $bindable(DEFAULTS.treemap.zoom_on_click),
     zoom_root_id = $bindable(null),
     show_breadcrumbs = $bindable(DEFAULTS.treemap.show_breadcrumbs),
@@ -102,7 +121,7 @@
     Omit<BasePlotProps, `change`> & {
       data?: TreemapNode<Metadata> | TreemapNode<Metadata>[]
       value_mode?: SunburstValueMode
-      sort?: SunburstSort
+      sort?: SunburstSort // default 'descending' (largest top-left); 'none' keeps input order
       level_lighten?: number
       // Aggregate sibling cells below this fraction of the total into one 'Other'
       // cell per parent (only when >= 2 qualify); 0 disables
@@ -114,6 +133,13 @@
       padding_outer?: number // px inset of children within their parent (plotly marker.pad)
       show_labels?: boolean
       label_text?: SunburstLabelText // what labels display (plotly textinfo equivalent)
+      // Structured multiline labels. Unlike cell_content, this keeps built-in
+      // hover/focus/click and tooltip behavior on the underlying cell.
+      label_formatter?: TreemapLabelFormatter<Metadata>
+      label_fit?: TreemapLabelFit // shrink-to-fit (default), hide, or clip at max size
+      label_min_font_size?: number // px floor used by shrink mode
+      label_max_font_size?: number // px ceiling for leaf/cutoff labels
+      parent_label_font_size?: number // px size/ceiling for branch header labels
       zoom_on_click?: boolean
       zoom_root_id?: string | number | null // id of the cell the view is rooted on
       show_breadcrumbs?: boolean // clickable ancestor trail when zoomed
@@ -167,9 +193,9 @@
   let pad = $derived(filter_padding(padding, DEFAULT_PADDING))
   let inner_width = $derived(Math.max(0, width - pad.l - pad.r))
   let avail_height = $derived(Math.max(0, height - pad.t - pad.b))
-  // measured height of the bottom colorbar, reserved from the chart so it never
-  // overlaps the cells; reset to 0 when hidden (effect below); capped at half the
-  // area so a bad measurement can't collapse the chart
+  // measured height of the bottom colorbar (via observe_height, which resets it
+  // to 0 on unmount), reserved from the chart so it never overlaps the cells;
+  // capped at half the area so a bad measurement can't collapse the chart
   let colorbar_height = $state(0)
   let colorbar_reserve = $derived(
     colorbar_height > 0 ? Math.min(colorbar_height + 16, avail_height / 2) : 0,
@@ -289,11 +315,6 @@
   )
   const cell_color = (arc: PositionedArc<Metadata>): string =>
     metric?.colors[arc.node_idx] ?? arc.color
-  // release the colorbar's reserved chart space when it's not rendered
-  $effect(() => {
-    if (!metric || colorbar == null) colorbar_height = 0
-  })
-
   // Hovered cell + its ancestors/descendants stay fully opaque, others dim
   let cell_dim = $derived(compute_node_dim(layout.arcs, muted_ids, hovered_idx))
 
@@ -424,6 +445,12 @@
   let cells_clickable = $derived(Boolean(on_node_click) || zoom_on_click)
 
   let label_font = $derived(svg_label_font(svg_element))
+  // leading "<n>px" of the CSS font shorthand (e.g. "11px sans-serif")
+  let label_font_size = $derived.by(() => {
+    const leading_num = Number(label_font.match(/^[\d.]+/)?.[0])
+    return safe_font_size(leading_num, 11)
+  })
+  let resolved_parent_label_font_size = $derived(safe_font_size(parent_label_font_size, 14))
   const cached_text_width = make_cached_text_width()
 
   // Per-cell label text, measured width, fill/label colors and aria string -
@@ -440,38 +467,95 @@
   )
 
   const LABEL_MARGIN = 6 // px clearance between label text and cell edges
-  // Label text + placement for a cell; null = no variant fits, hide the label.
+  const label_clip_id = (idx: number) => `treemap-label-clip-${uid}-${idx}`
+  const font_for_line = (line: TreemapLabelLine, font_size: number): string => {
+    const sized_font = label_font.replace(/(?:\d+(?:\.\d+)?|\.\d+)px/, `${font_size}px`)
+    return line.font_weight == null ? sized_font : `${line.font_weight} ${sized_font}`
+  }
+  const measure_label_line = (line: TreemapLabelLine, font_size: number): number => {
+    const measured_width = cached_text_width(line.text, font_for_line(line, font_size))
+    // Canvas text metrics can be unavailable during SSR and in lightweight DOM
+    // environments. A conservative fallback keeps fitting deterministic there.
+    return measured_width > 0 ? measured_width : line.text.length * font_size * 0.6
+  }
+
+  // Formatter output is layout-independent, so resolve it once per node instead
+  // of on every frame of a zoom tween. Without a formatter, fit modes use the
+  // richest built-in variant (compound text when configured).
+  // The depth-0 root never renders a cell, so the formatter is never invoked
+  // for it (for array data it's synthetic and e.g. carries no metadata).
+  let label_lines = $derived(
+    layout.arcs.map((arc, idx) =>
+      arc.depth === 0
+        ? []
+        : normalize_treemap_label_lines(
+            label_formatter ? label_formatter(arc) : cell_info[idx].variants[0]?.text,
+          ),
+    ),
+  )
+
+  // Label text + placement for a cell; null means hide the label.
   // Branch cells label their header strip (top-left); leaves (and branches at the
   // depth cutoff, which render as plain cells) center their label, rotating 90°
-  // in thin-but-tall cells like the icicle shape does. Richest label variant
-  // that fits wins: extended -> label -> label_short.
-  function label_attrs(
+  // in thin-but-tall cells like the icicle shape does.
+  function place_label(
     arc: PositionedArc<Metadata>,
     rect: Rect,
-  ): { x: number; y: number; text: string; transform?: string; header: boolean } | null {
-    const { variants } = cell_info[arc.node_idx]
-    const { x, y, width: cell_w, height: cell_h } = rect
+  ): TreemapLabelPlacement | null {
     // Branches with visible children only ever label their header strip: a
     // centered label would paint over the descendant cells that cover the rest
     // of the cell, so when the strip is missing/too thin the label is dropped
     const has_visible_children = !arc.is_leaf && arc.depth < depth_cutoff
-    if (has_visible_children) {
-      if (padding_top < 12) return null
-      const fitting = variants.find((entry) => entry.width <= cell_w - 2 * LABEL_MARGIN)
-      if (!fitting) return null
-      return { x: x + LABEL_MARGIN, y: y + padding_top / 2, text: fitting.text, header: true }
-    }
-    const fits = (text_w: number, along: number, across: number) =>
-      text_w <= along - 2 * LABEL_MARGIN && across >= 12
-    const [cx, cy] = [x + cell_w / 2, y + cell_h / 2]
-    for (const { text, width: text_w } of variants) {
-      if (fits(text_w, cell_w, cell_h)) return { x: cx, y: cy, text, header: false }
-      if (fits(text_w, cell_h, cell_w)) {
-        return { x: cx, y: cy, text, transform: `rotate(-90, ${cx}, ${cy})`, header: false }
+
+    const place = (lines: TreemapLabelLine[]) =>
+      place_treemap_label({
+        rect,
+        lines,
+        header: has_visible_children,
+        fit: label_fit,
+        min_font_size: label_min_font_size,
+        max_font_size: has_visible_children
+          ? resolved_parent_label_font_size
+          : (label_max_font_size ?? label_font_size),
+        padding_top,
+        margin: LABEL_MARGIN,
+        measure_line: (line, font_size) =>
+          measure_label_line(
+            has_visible_children && line.font_weight == null
+              ? { ...line, font_weight: 600 }
+              : line,
+            font_size,
+          ),
+      })
+
+    if (!label_formatter && label_fit === `hide`) {
+      for (const { text } of cell_info[arc.node_idx].variants) {
+        const placement = place([{ text }])
+        if (placement) return placement
       }
+      return null
+    }
+    return place(label_lines[arc.node_idx])
+  }
+
+  // hide mode never overflows (unfitting labels return null), so clipPaths are
+  // only rendered/applied for the shrink/clip modes (with or without formatter)
+  let clip_labels = $derived(label_fit !== `hide`)
+  const label_clip_rect = (rect: Rect, header: boolean): Rect => {
+    const inset = 1
+    const clip_height = header ? Math.min(rect.height, padding_top) : rect.height
+    return {
+      x: rect.x + inset,
+      y: rect.y + inset,
+      width: Math.max(0, rect.width - 2 * inset),
+      height: Math.max(0, clip_height - 2 * inset),
     }
-    return null
   }
+  // Defs and visible text share these placements, avoiding duplicate text
+  // measurement and fitting work on every frame of a zoom tween.
+  let label_placements = $derived(
+    new Map(visible_idxs.map((idx) => [idx, place_label(layout.arcs[idx], rects[idx])])),
+  )
 
   // Legend: one item per depth-1 category, toggling mutes (dims) rather than removes.
   let depth1_arcs = $derived(layout.arcs.filter((arc) => arc.depth === 1))
@@ -591,6 +675,16 @@
         <pattern id={hatch_pattern_id} patternUnits="userSpaceOnUse" width="8" height="8">
           <path class="hatch-pattern-line" d="M-1,1 l2,-2 M0,8 l8,-8 M7,9 l2,-2" />
         </pattern>
+        {#if show_labels && !cell_content && clip_labels}
+          {#each visible_idxs as idx (idx)}
+            {@const label = label_placements.get(idx)}
+            {#if label}
+              <clipPath id={label_clip_id(idx)}>
+                <rect {...label_clip_rect(rects[idx], label.header)} />
+              </clipPath>
+            {/if}
+          {/each}
+        {/if}
       </defs>
       <!-- Hover/click delegation sits on the chart group (not the cells group) so
       labels - which carry the same data-treemap-node-idx and are selectable text -
@@ -650,21 +744,39 @@
         {#if show_labels && !cell_content}
           <g class="cell-labels">
             {#each visible_idxs as idx (idx)}
-              {@const lbl = label_attrs(layout.arcs[idx], rects[idx])}
+              {@const lbl = label_placements.get(idx)}
               {#if lbl}
-                <text
-                  class="cell-label"
-                  class:header={lbl.header}
-                  data-treemap-node-idx={idx}
-                  x={lbl.x}
-                  y={lbl.y}
-                  transform={lbl.transform}
-                  fill={cell_info[idx].label_fill}
-                  fill-opacity={cell_dim[idx].label_opacity}
-                  style:cursor={cells_clickable ? `pointer` : `text`}
-                >
-                  {lbl.text}
-                </text>
+                <!-- Keep the clip on this untransformed wrapper. Applying it to
+                rotated text rotates the clipping region and crops the wrong area. -->
+                <g clip-path={clip_labels ? `url(#${label_clip_id(idx)})` : undefined}>
+                  <text
+                    class="cell-label"
+                    class:header={lbl.header}
+                    data-treemap-node-idx={idx}
+                    x={lbl.x}
+                    y={lbl.lines[0].y}
+                    dominant-baseline={lbl.dominant_baseline}
+                    transform={lbl.transform}
+                    fill={cell_info[idx].label_fill}
+                    fill-opacity={cell_dim[idx].label_opacity}
+                    font-size={lbl.font_size}
+                    style:cursor={cells_clickable ? `pointer` : `text`}
+                  >
+                    {#each lbl.lines as line}
+                      <tspan
+                        class={line.class}
+                        x={lbl.x}
+                        y={line.y}
+                        font-size={lbl.font_size * (line.font_scale ?? 1)}
+                        font-weight={line.font_weight}
+                        opacity={line.opacity}
+                        fill={line.fill}
+                      >
+                        {line.text}
+                      </tspan>
+                    {/each}
+                  </text>
+                </g>
               {/if}
             {/each}
           </g>
@@ -716,17 +828,19 @@
   {/if}
 
   {#if metric && colorbar != null}
-    <div
-      bind:clientHeight={colorbar_height}
-      style="position: absolute; bottom: var(--treemap-colorbar-bottom, 8px); left: 50%; transform: translateX(-50%); width: var(--treemap-colorbar-width, 40%); min-width: 120px; pointer-events: auto;"
-    >
-      <ColorBar
-        {color_scale}
-        range={metric.range}
-        {...colorbar}
-        wrapper_style={`width: 100%; ${colorbar?.wrapper_style ?? ``}`}
-      />
-    </div>
+    <!-- positioning + height measurement live on ColorBar's own root (via rest
+    props + attachment) instead of an extra wrapper div -->
+    <ColorBar
+      {color_scale}
+      range={metric.range}
+      {...colorbar}
+      wrapper_style="{colorbar?.orientation === `vertical`
+        ? `--cbar-height: var(--treemap-colorbar-height, 150px);`
+        : ``} {colorbar?.wrapper_style ?? ``}"
+      style="position: absolute; bottom: var(--treemap-colorbar-bottom, 8px); left: 50%; transform: translateX(-50%); width: var(--treemap-colorbar-width, 40%); min-width: 120px; pointer-events: auto; {colorbar?.style ??
+        ``}"
+      {@attach observe_height((px) => (colorbar_height = px))}
+    />
   {/if}
 
   {@render children?.({ height, width, fullscreen })}
@@ -745,7 +859,9 @@
     flex: var(--treemap-flex, 1 1 auto);
     display: var(--treemap-display, flex);
     flex-direction: column;
-    background: var(--treemap-bg, var(--plot-bg));
+    /* no bg shading by default: the cells are the chart; set --treemap-bg to
+    add a panel background */
+    background: var(--treemap-bg, transparent);
     border-radius: var(--treemap-border-radius, var(--border-radius, 3pt));
   }
   .treemap.fullscreen {
@@ -787,7 +903,7 @@
     background: var(--treemap-btn-bg, light-dark(#e3e6ea, #33383f));
     color: inherit;
     border: none;
-    padding: 2px 14px 2px 12px;
+    padding: var(--treemap-breadcrumbs-padding, 0 14px 0 12px);
     cursor: pointer;
     font: inherit;
     clip-path: polygon(
@@ -894,7 +1010,6 @@
   }
   .cell-label {
     text-anchor: middle;
-    dominant-baseline: central;
     /* selectable so labels can be copied; clicks/hover still reach the underlying
     cell via data-treemap-node-idx + delegation on the chart group */
     -webkit-user-select: text;

package/dist/plot/treemap/Treemap.svelte.d.ts

@@ -4,6 +4,7 @@ import type { BasePlotProps, LegendConfig, SunburstLabelText, SunburstSort, Sunb
 import { ColorBar } from '..';
 import type { Rect, Sides } from '../core/layout';
 import type { PositionedArc } from '../sunburst/sunburst';
+import { type TreemapLabelFit, type TreemapLabelFormatter } from './labels';
 import type { TreemapNode, TreemapNodeHandlerProps } from './treemap';
 import type { ComponentProps, Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
@@ -22,6 +23,11 @@ declare function $$render<Metadata extends Record<string, unknown> = Record<stri
         padding_outer?: number;
         show_labels?: boolean;
         label_text?: SunburstLabelText;
+        label_formatter?: TreemapLabelFormatter<Metadata>;
+        label_fit?: TreemapLabelFit;
+        label_min_font_size?: number;
+        label_max_font_size?: number;
+        parent_label_font_size?: number;
         zoom_on_click?: boolean;
         zoom_root_id?: string | number | null;
         show_breadcrumbs?: boolean;

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

@@ -1,3 +1,4 @@
 export * from './treemap';
+export type { TreemapLabelFit, TreemapLabelFormatter, TreemapLabelLine } from './labels';
 export { default as Treemap } from './Treemap.svelte';
 export { default as TreemapControls } from '../core/components/HierarchyControls.svelte';

package/dist/plot/treemap/labels.d.ts

@@ -0,0 +1,38 @@
+import type { Rect } from '../core/layout';
+import type { TreemapArc } from './treemap';
+export type TreemapLabelFit = `hide` | `shrink` | `clip`;
+export interface TreemapLabelLine {
+    text: string;
+    class?: string;
+    font_scale?: number;
+    font_weight?: string | number;
+    opacity?: number;
+    fill?: string;
+}
+type TreemapLabelContent = string | TreemapLabelLine | null | undefined;
+export type TreemapLabelFormatter<Metadata extends Record<string, unknown> = Record<string, unknown>> = (arc: TreemapArc<Metadata>) => TreemapLabelContent | readonly TreemapLabelContent[];
+export interface TreemapLabelPlacement {
+    x: number;
+    lines: (TreemapLabelLine & {
+        y: number;
+    })[];
+    font_size: number;
+    header: boolean;
+    dominant_baseline: `central`;
+    transform?: string;
+}
+interface TreemapLabelPlacementOptions {
+    rect: Rect;
+    lines: readonly TreemapLabelLine[];
+    header: boolean;
+    fit: TreemapLabelFit;
+    min_font_size: number;
+    max_font_size: number;
+    padding_top: number;
+    margin: number;
+    measure_line: (line: TreemapLabelLine, font_size: number) => number;
+}
+export declare const safe_font_size: (font_size: number, fallback: number) => number;
+export declare function normalize_treemap_label_lines(content: ReturnType<TreemapLabelFormatter>): TreemapLabelLine[];
+export declare function place_treemap_label({ rect, lines, header, fit, min_font_size, max_font_size, padding_top, margin, measure_line, }: TreemapLabelPlacementOptions): TreemapLabelPlacement | null;
+export {};

package/dist/plot/treemap/labels.js

@@ -0,0 +1,80 @@
+const LINE_HEIGHT = 1.1;
+const MIN_FONT_SIZE = 0.5;
+const MIN_FONT_SCALE = 0.05;
+// Coerce a user-provided font size to a usable px value (0.5px floor guards
+// against zero/negative sizes; non-finite input falls back)
+export const safe_font_size = (font_size, fallback) => Number.isFinite(font_size) ? Math.max(MIN_FONT_SIZE, font_size) : fallback;
+export function normalize_treemap_label_lines(content) {
+    if (content == null)
+        return [];
+    const lines = Array.isArray(content) ? content : [content];
+    return lines.flatMap((line) => {
+        const normalized = typeof line === `string` ? { text: line } : line;
+        return normalized?.text ? [{ ...normalized }] : [];
+    });
+}
+const line_scale = (line) => Number.isFinite(line.font_scale) ? Math.max(MIN_FONT_SCALE, line.font_scale ?? 1) : 1;
+function block_metrics(lines, font_size, measure_line) {
+    let width = 0;
+    let height = 0;
+    for (const line of lines) {
+        const line_font_size = font_size * line_scale(line);
+        width = Math.max(width, measure_line(line, line_font_size));
+        height += line_font_size * LINE_HEIGHT;
+    }
+    return { width, height };
+}
+export function place_treemap_label({ rect, lines, header, fit, min_font_size, max_font_size, padding_top, margin, measure_line, }) {
+    if (lines.length === 0)
+        return null;
+    const safe_max_font_size = safe_font_size(max_font_size, 11);
+    const safe_min_font_size = Math.min(safe_max_font_size, safe_font_size(min_font_size, MIN_FONT_SIZE));
+    const header_height = Math.min(rect.height, padding_top);
+    const available_width = Math.max(0, rect.width - 2 * margin);
+    const label_height = header ? header_height : rect.height;
+    const available_height = Math.max(0, label_height - 2 * (header ? 1 : margin));
+    // Single guard for all degenerate geometry (zero/negative/NaN rects, missing
+    // header strips, margin-swallowed slivers): negated > 0 so NaN also bails
+    // instead of emitting NaN SVG coordinates, same idiom as tile_rects.
+    if (!(available_width > 0) || !(available_height > 0))
+        return null;
+    const max_metrics = block_metrics(lines, safe_max_font_size, measure_line);
+    const fit_ratio = (block_width, block_height) => block_width > 0 && block_height > 0
+        ? Math.min(1, available_width / block_width, available_height / block_height)
+        : 0;
+    const horizontal_ratio = fit_ratio(max_metrics.width, max_metrics.height);
+    // rotated 90°: the block's width runs along the cell's height (swapped args)
+    const vertical_ratio = header ? 0 : fit_ratio(max_metrics.height, max_metrics.width);
+    const rotated = vertical_ratio > horizontal_ratio;
+    const best_ratio = Math.max(horizontal_ratio, vertical_ratio);
+    if (fit === `hide` && best_ratio < 1)
+        return null;
+    const font_size = fit === `shrink`
+        ? Math.max(safe_min_font_size, safe_max_font_size * best_ratio)
+        : safe_max_font_size;
+    // text metrics scale linearly with font size, so the block height at the
+    // final size derives from the max-size measurement — no re-measuring (which
+    // would miss the width cache on every frame of a zoom tween in shrink mode,
+    // since the fitted size varies continuously with the animated rect)
+    const block_height = max_metrics.height * (font_size / safe_max_font_size);
+    const center_x = rect.x + rect.width / 2;
+    const center_y = rect.y + label_height / 2;
+    const x = header ? rect.x + margin : center_x;
+    let line_top = center_y - block_height / 2;
+    const placed_lines = lines.map((line) => {
+        const font_scale = line_scale(line);
+        const line_height = font_size * font_scale * LINE_HEIGHT;
+        line_top += line_height / 2;
+        const y = line_top;
+        line_top += line_height / 2;
+        return { ...line, font_scale, y };
+    });
+    return {
+        x,
+        lines: placed_lines,
+        font_size,
+        header,
+        dominant_baseline: `central`,
+        ...(rotated ? { transform: `rotate(-90, ${center_x}, ${center_y})` } : {}),
+    };
+}

package/dist/plot/treemap/treemap.d.ts

@@ -1,9 +1,11 @@
 import type { Rect } from '../core/layout';
-import type { PositionedArc, SunburstLayoutOptions, SunburstNode, SunburstNodeHandlerProps } from '../sunburst/sunburst';
+import type { PositionedArc, SunburstLayoutOptions, SunburstNode, SunburstNodeHandlerProps, SunburstSort } from '../sunburst/sunburst';
 export type TreemapNode<Metadata = Record<string, unknown>> = SunburstNode<Metadata>;
 export type TreemapArc<Metadata = Record<string, unknown>> = PositionedArc<Metadata>;
 export type TreemapNodeHandlerProps<Metadata = Record<string, unknown>> = SunburstNodeHandlerProps<Metadata>;
-export type TreemapLayoutOptions = SunburstLayoutOptions;
+export interface TreemapLayoutOptions extends Omit<SunburstLayoutOptions, `sort`> {
+    sort?: SunburstSort;
+}
 export interface TilePadding {
     padding_inner: number;
     padding_top: number;

package/dist/plot/treemap/treemap.js

@@ -92,8 +92,11 @@ export function lerp_rects(prev, next, t) {
 // re-tiles without recomputing tree semantics).
 export function compute_treemap_layout(data, size, opts = {}) {
     // padding fallbacks derive from DEFAULTS.treemap to prevent drift with the component
-    const { padding_inner = DEFAULTS.treemap.padding_inner, padding_top = DEFAULTS.treemap.padding_top, padding_outer = DEFAULTS.treemap.padding_outer, ...tree_opts } = opts;
-    const { arcs, root, max_depth } = compute_sunburst_layout(data, tree_opts);
+    const { padding_inner = DEFAULTS.treemap.padding_inner, padding_top = DEFAULTS.treemap.padding_top, padding_outer = DEFAULTS.treemap.padding_outer, 
+    // descending (matching the Treemap component): squarified tiling reads best
+    // with the largest cell top-left and smallest bottom-right
+    sort = `descending`, ...tree_opts } = opts;
+    const { arcs, root, max_depth } = compute_sunburst_layout(data, { sort, ...tree_opts });
     const rects = tile_rects(arcs, 0, size, { padding_inner, padding_top, padding_outer });
     return { arcs, rects, root, max_depth };
 }

package/dist/rdf/RdfPlot.svelte

@@ -21,7 +21,7 @@
     y_axis = {},
     cutoff = 15,
     n_bins = 75,
-    pbc = [true, true, true],
+    pbc,
     enable_drop = false,
     on_file_drop,
     loading = $bindable(false),
@@ -87,41 +87,23 @@
   }
 
   const entries = $derived.by(() => {
-    const result: RdfEntry[] = []
+    const result: RdfEntry[] = patterns
+      ? Array.isArray(patterns)
+        ? [...patterns]
+        : [patterns]
+      : []
 
-    // Add patterns
-    if (patterns) {
-      if (Array.isArray(patterns)) result.push(...patterns)
-      else result.push(patterns)
-    }
-
-    // Add structures
-    const struct_list: { struct: Crystal; label: string }[] = []
-    if (structures) {
-      if (Array.isArray(structures)) {
-        structures.forEach((struct, idx) =>
-          struct_list.push({
-            struct,
-            label: format_structure_label(struct, `Crystal ${idx + 1}`),
-          }),
-        )
-      } else if (is_crystal(structures)) {
-        struct_list.push({
-          struct: structures,
-          label: format_structure_label(structures, ``),
-        })
-      } else {
-        Object.entries(structures).forEach(([label, struct]) =>
-          struct_list.push({ struct, label: format_structure_label(struct, label) }),
-        )
-      }
-    }
-    drag_dropped.forEach((struct, idx) =>
-      struct_list.push({
-        struct,
-        label: format_structure_label(struct, `Dropped ${idx + 1}`),
-      }),
-    )
+    // Normalize structures prop (single, array, or dict) plus dropped files to labeled list
+    const struct_list = [
+      ...(!structures
+        ? []
+        : Array.isArray(structures)
+          ? structures.map((struct, idx) => ({ struct, base: `Crystal ${idx + 1}` }))
+          : is_crystal(structures)
+            ? [{ struct: structures, base: `` }]
+            : Object.entries(structures).map(([base, struct]) => ({ struct, base }))),
+      ...drag_dropped.map((struct, idx) => ({ struct, base: `Dropped ${idx + 1}` })),
+    ].map(({ struct, base }) => ({ struct, label: format_structure_label(struct, base) }))
 
     for (const { struct, label } of struct_list) {
       if (mode === `element_pairs`) {