@dxos/plugin-explorer 0.9.1-main.c7dcc2e112 → 0.9.1-staging.ee54ba693a

package/src/components/Tree/Tree.tsx

@@ -1,81 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useMemo } from 'react';
-
-import { type ThemedClassName } from '@dxos/react-ui';
-
-import { type BundleEdge, HierarchicalEdgeBundling, RadialTree, TidyTree, type TreeLayoutSlots } from './layout';
-import { type TreeNode } from './types';
-
-export type LayoutVariant = 'tidy' | 'radial' | 'edge';
-
-export type TreeComponentProps = ThemedClassName<{
-  data: TreeNode;
-  /** Optional edges for the `edge` variant (hierarchical edge bundling). */
-  edges?: BundleEdge[];
-  variant?: LayoutVariant;
-  label?: (node: TreeNode) => string;
-  slots?: TreeLayoutSlots;
-  initialCollapsed?: Iterable<string>;
-  onNodeClick?: (node: TreeNode) => void;
-  onNodeHover?: (node: TreeNode | null, event?: MouseEvent) => void;
-}>;
-
-/**
- * Tree visualization wrapping the three layout variants.
- * - `tidy`   — horizontal tidy tree (collapsible)
- * - `radial` — radial tree         (collapsible)
- * - `edge`   — hierarchical edge bundling (`edges` connect leaves)
- */
-export const Tree = ({
-  classNames,
-  data,
-  edges,
-  variant = 'tidy',
-  label,
-  slots,
-  initialCollapsed,
-  onNodeClick,
-  onNodeHover,
-}: TreeComponentProps) => {
-  return useMemo(() => {
-    switch (variant) {
-      case 'tidy':
-        return (
-          <TidyTree
-            classNames={classNames}
-            data={data}
-            label={label}
-            slots={slots}
-            initialCollapsed={initialCollapsed}
-            onNodeClick={onNodeClick}
-          />
-        );
-      case 'radial':
-        return (
-          <RadialTree
-            classNames={classNames}
-            data={data}
-            label={label}
-            slots={slots}
-            initialCollapsed={initialCollapsed}
-            onNodeClick={onNodeClick}
-            onNodeHover={onNodeHover}
-          />
-        );
-      case 'edge':
-        return (
-          <HierarchicalEdgeBundling
-            classNames={classNames}
-            data={data}
-            edges={edges ?? []}
-            label={label}
-            slots={slots}
-            onNodeHover={onNodeHover}
-          />
-        );
-    }
-  }, [variant, classNames, data, edges, label, slots, initialCollapsed, onNodeClick, onNodeHover]);
-};

package/src/components/Tree/layout/HierarchicalEdgeBundling.tsx

@@ -1,335 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-// Copyright 2024 Observable, Inc.
-//
-
-import { cluster, curveBundle, hierarchy, lineRadial, select } from 'd3';
-import type { HierarchyNode } from 'd3-hierarchy';
-import React, { useEffect, useMemo, useRef } from 'react';
-
-import { type Obj } from '@dxos/echo';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/ui-theme';
-
-import { getNodeFillForObject } from '../../../util/node-color';
-import { type TreeNode } from '../types';
-import { type TreeLayoutSlots, defaultTreeLayoutSlots } from './slots';
-import { useContainerSize } from './useContainerSize';
-
-const TRANSITION_MS = 350;
-
-/** A directed edge between two leaves of the hierarchy, identified by node id. */
-export type BundleEdge = {
-  source: string;
-  target: string;
-  kind?: string;
-};
-
-export type HierarchicalEdgeBundlingProps = ThemedClassName<{
-  /** Hierarchical data; leaves are the connectable entities. */
-  data: TreeNode;
-  /** Edges between leaves (by id). Bundled through the hierarchy. */
-  edges?: BundleEdge[];
-  /** Label accessor for leaf nodes. */
-  label?: (d: TreeNode) => string;
-  /** Padding (in screen pixels) reserved around the radial layout. */
-  padding?: number;
-  /** Bundling tension; 0 = straight, 1 = maximally bundled. */
-  tension?: number;
-  /** Leaf node circle radius (matches the cluster layout's `r`). */
-  r?: number;
-  slots?: TreeLayoutSlots;
-  /**
-   * Called when the user hovers a leaf node (with the event so callers can dispatch
-   * `DxAnchorActivate` for previews). Receives `null` on leave.
-   */
-  onNodeHover?: (node: TreeNode | null, event?: MouseEvent) => void;
-}>;
-
-/**
- * Hierarchical edge bundling.
- * https://observablehq.com/@d3/hierarchical-edge-bundling?intent=fork
- *
- * Leaves are placed on a circle, grouped by their parent in the hierarchy.
- * Edges between leaves are drawn as bundled curves that route through their lowest common ancestor.
- */
-export const HierarchicalEdgeBundling = ({
-  classNames,
-  data,
-  edges = [],
-  label = (d) => d.label ?? d.id,
-  padding = 120,
-  tension = 0.85,
-  r = 4,
-  slots = defaultTreeLayoutSlots,
-  onNodeHover,
-}: HierarchicalEdgeBundlingProps) => {
-  const svgRef = useRef<SVGSVGElement | null>(null);
-  const { setRef, width, height } = useContainerSize();
-
-  const root = useMemo(() => buildBundleHierarchy(data, edges), [data, edges]);
-
-  // Stable hover ref so the effect doesn't rebind handlers on every render.
-  const handleHoverRef = useRef<(node: TreeNode | null, event?: MouseEvent) => void>(() => {});
-  handleHoverRef.current = (node, event) => onNodeHover?.(node, event);
-
-  useEffect(() => {
-    if (!svgRef.current || !width || !height) {
-      return;
-    }
-
-    const radius = Math.max(0, Math.min(width, height) / 2 - padding);
-    renderBundling(svgRef.current, root, {
-      radius,
-      r,
-      label,
-      slots,
-      tension,
-      onNodeHover: (n, e) => handleHoverRef.current(n, e),
-    });
-  }, [root, width, height, padding, tension, r, label, slots]);
-
-  return (
-    <div ref={setRef} className={mx('dx-expander relative', classNames)}>
-      {width > 0 && height > 0 && (
-        <svg
-          ref={svgRef}
-          xmlns='http://www.w3.org/2000/svg'
-          width={width}
-          height={height}
-          viewBox={`${-width / 2} ${-height / 2} ${width} ${height}`}
-        />
-      )}
-    </div>
-  );
-};
-
-type BundleHierarchy = HierarchyNode<TreeNode> & {
-  outgoing?: Array<[BundleHierarchy, BundleHierarchy, BundleEdge]>;
-  incoming?: Array<[BundleHierarchy, BundleHierarchy, BundleEdge]>;
-  pathEl?: SVGPathElement | null;
-  text?: SVGTextElement | null;
-  circle?: SVGCircleElement | null;
-};
-
-/**
- * Build the bundling hierarchy from data + edges.
- * Edges connect leaves (by id); the cluster layout places leaves on the circle.
- */
-const buildBundleHierarchy = (data: TreeNode, edges: BundleEdge[]): BundleHierarchy => {
-  const root = hierarchy<TreeNode>(data) as BundleHierarchy;
-  const byId = new Map<string, BundleHierarchy>();
-  for (const node of root.descendants() as BundleHierarchy[]) {
-    byId.set(node.data.id, node);
-    node.outgoing = [];
-    node.incoming = [];
-  }
-
-  for (const edge of edges) {
-    const source = byId.get(edge.source);
-    const target = byId.get(edge.target);
-    if (!source || !target || source === target) {
-      continue;
-    }
-    source.outgoing!.push([source, target, edge]);
-    target.incoming!.push([source, target, edge]);
-  }
-
-  return root;
-};
-
-type RenderOptions = {
-  radius: number;
-  r: number;
-  tension: number;
-  label: (d: TreeNode) => string;
-  slots: TreeLayoutSlots;
-  onNodeHover: (node: TreeNode | null, event?: MouseEvent) => void;
-};
-
-const renderBundling = (svgElement: SVGSVGElement, root: BundleHierarchy, options: RenderOptions) => {
-  const { radius, r, tension, label, slots, onNodeHover } = options;
-  const svg = select(svgElement);
-
-  // Degenerate root (no descendants yet): clear any previously rendered bundle so a stale
-  // graph doesn't linger after the hierarchy empties out, then no-op.
-  if (!root.children?.length) {
-    svg.selectAll('g.dx-bundle-root').remove();
-    return;
-  }
-
-  cluster<TreeNode>().size([2 * Math.PI, radius])(root);
-
-  const g = svg.selectAll<SVGGElement, null>('g.dx-bundle-root').data([null]).join('g').classed('dx-bundle-root', true);
-
-  const linksLayer = g
-    .selectAll<SVGGElement, null>('g.dx-bundle-links')
-    .data([null])
-    .join('g')
-    .classed('dx-bundle-links', true);
-
-  const nodesLayer = g
-    .selectAll<SVGGElement, null>('g.dx-bundle-nodes')
-    .data([null])
-    .join('g')
-    .classed('dx-bundle-nodes', true);
-
-  const line = lineRadial<any>()
-    .curve(curveBundle.beta(tension))
-    .radius((d: any) => d.y)
-    .angle((d: any) => d.x);
-
-  // Each edge: route through the lowest common ancestor via hierarchy.path().
-  const leaves = root.leaves() as BundleHierarchy[];
-  const flatEdges = leaves.flatMap((leaf) => leaf.outgoing ?? []);
-
-  const paths = linksLayer
-    .selectAll<SVGPathElement, any>('path')
-    .data(flatEdges, (d: any) => `${d[0].data.id}->${d[1].data.id}`)
-    .join(
-      (enter) =>
-        enter
-          .append('path')
-          .attr('class', slots.path ?? '')
-          .attr('fill', 'none')
-          .attr('opacity', 0),
-      (update) => update,
-      (exit) =>
-        exit
-          .each(function () {
-            select(this).interrupt();
-          })
-          .transition()
-          .duration(TRANSITION_MS)
-          .attr('opacity', 0)
-          .remove(),
-    );
-
-  paths
-    .each(function (d: any) {
-      d[0].pathEl = this;
-    })
-    .transition()
-    .duration(TRANSITION_MS)
-    .attr('opacity', 1)
-    .attr('d', ([s, t]) => line(s.path(t)));
-
-  // Render a circle + label per leaf along the perimeter (matches the cluster layout).
-  const labels = nodesLayer
-    .selectAll<SVGGElement, any>('g.dx-bundle-leaf')
-    .data(leaves, (d: any) => d.data.id)
-    .join(
-      (enter) => {
-        const ge = enter.append('g').classed('dx-bundle-leaf', true).attr('opacity', 0);
-        ge.append('circle').style('cursor', 'pointer');
-        ge.append('text').attr('dy', '0.32em').attr('paint-order', 'stroke').style('cursor', 'pointer');
-        return ge;
-      },
-      (update) => update,
-      (exit) =>
-        exit
-          .each(function () {
-            select(this).interrupt();
-          })
-          .transition()
-          .duration(TRANSITION_MS)
-          .attr('opacity', 0)
-          .remove(),
-    );
-
-  labels
-    .transition()
-    .duration(TRANSITION_MS)
-    .attr('opacity', 1)
-    .attr('transform', (d: any) => `rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0)`);
-
-  const onEnter = function (this: SVGElement, event: MouseEvent, d: BundleHierarchy) {
-    onNodeHover(d.data, event);
-    hover(linksLayer, leaves, d, true);
-  };
-  const onLeave = function (this: SVGElement, event: MouseEvent, d: BundleHierarchy) {
-    onNodeHover(null);
-    hover(linksLayer, leaves, d, false);
-  };
-
-  labels
-    .select<SVGCircleElement>('circle')
-    .attr('class', [slots.node ?? '', 'dx-leaf'].filter(Boolean).join(' '))
-    .attr('r', r)
-    .style('fill', (d: BundleHierarchy) => getNodeFillForObject(d.data.data as Obj.Unknown | undefined))
-    .each(function (d: BundleHierarchy) {
-      d.circle = this;
-    })
-    .on('pointerenter', onEnter)
-    .on('pointerleave', onLeave);
-
-  labels
-    .select<SVGTextElement>('text')
-    .attr('class', slots.text ?? '')
-    .attr('x', (d: any) => (d.x < Math.PI ? r + 4 : -(r + 4)))
-    .attr('text-anchor', (d: any) => (d.x < Math.PI ? 'start' : 'end'))
-    .attr('transform', (d: any) => (d.x >= Math.PI ? 'rotate(180)' : null))
-    .each(function (d: BundleHierarchy) {
-      d.text = this;
-    })
-    .text((d: any) => label(d.data))
-    .on('pointerenter', onEnter)
-    .on('pointerleave', onLeave);
-};
-
-const hover = (linksLayer: any, leaves: BundleHierarchy[], focused: BundleHierarchy, on: boolean) => {
-  const outgoing = new Set((focused.outgoing ?? []).map(([, t]) => t));
-  const incoming = new Set((focused.incoming ?? []).map(([s]) => s));
-
-  // Use D3 inline styles (highest specificity) so results are visible regardless of CSS cascade.
-  // Inline styles set to `null` are removed, restoring the element's default appearance.
-  (linksLayer.selectAll('path') as any)
-    .style('stroke', (d: any) => {
-      if (!on) {
-        return null;
-      }
-      if (d[0] === focused) {
-        return 'var(--color-orange-500)';
-      }
-      if (d[1] === focused) {
-        return 'var(--color-sky-500)';
-      }
-      return null;
-    })
-    .style('stroke-width', (d: any) => (on && (d[0] === focused || d[1] === focused) ? '1.5px' : null))
-    .style('opacity', (d: any) => (on && d[0] !== focused && d[1] !== focused ? '0.08' : null));
-
-  for (const leaf of leaves) {
-    const isOut = outgoing.has(leaf);
-    const isIn = incoming.has(leaf);
-    const isConnected = isOut || isIn;
-
-    if (leaf.text) {
-      select(leaf.text)
-        .style('fill', () => {
-          if (!on) {
-            return null;
-          }
-          if (leaf === focused) {
-            return 'var(--color-neutral-900)';
-          }
-          if (isOut) {
-            return 'var(--color-orange-500)';
-          }
-          if (isIn) {
-            return 'var(--color-sky-500)';
-          }
-          return null;
-        })
-        .style('font-weight', () => (on && leaf === focused ? '600' : null));
-    }
-    if (leaf.circle) {
-      select(leaf.circle)
-        .style('stroke', () => (on && isConnected ? 'var(--color-orange-400)' : null))
-        .style('stroke-width', () => (on && isConnected ? '2.5px' : null))
-        .style('opacity', () => (on && !isConnected && leaf !== focused ? '0.15' : null));
-    }
-  }
-};
-
-export default HierarchicalEdgeBundling;

package/src/components/Tree/layout/RadialTree.tsx

@@ -1,242 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-// Copyright 2024 Observable, Inc.
-//
-
-import { cluster as d3Cluster, linkRadial, select, tree as d3Tree } from 'd3';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-import { type Obj } from '@dxos/echo';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/ui-theme';
-
-import { getNodeFillForObject } from '../../../util/node-color';
-import { type TreeNode } from '../types';
-import { buildHierarchy, isCollapsed, isLeaf } from './hierarchy';
-import { type TreeLayoutSlots, defaultTreeLayoutSlots } from './slots';
-import { useContainerSize } from './useContainerSize';
-
-const TRANSITION_MS = 350;
-
-export type RadialTreeProps = ThemedClassName<{
-  data: TreeNode;
-  label?: (d: TreeNode) => string;
-  slots?: TreeLayoutSlots;
-  /** Node radius. */
-  r?: number;
-  /** Optional padding (in screen pixels) reserved around the radial layout. */
-  padding?: number;
-  /** Initial set of collapsed node ids. */
-  initialCollapsed?: Iterable<string>;
-  /**
-   * Use `d3.cluster` (all leaves equidistant from center) instead of `d3.tree`.
-   * Matches https://observablehq.com/@d3/radial-cluster.
-   */
-  cluster?: boolean;
-  /** Notified when the user clicks a node. */
-  onNodeClick?: (node: TreeNode) => void;
-  /**
-   * Notified on pointerenter (and `null` on pointerleave) for nodes. Used to wire previews
-   * (dispatch `DxAnchorActivate`). The event target on enter is the hovered circle — dispatch
-   * from it so the preview anchors there.
-   */
-  onNodeHover?: (node: TreeNode | null, event?: MouseEvent) => void;
-}>;
-
-/**
- * Radial tree layout based on the D3 reference component.
- * https://observablehq.com/@d3/radial-tree-component
- *
- * Click a node with children to toggle collapse / expand.
- */
-export const RadialTree = ({
-  classNames,
-  data,
-  label = (d) => d.label ?? d.id,
-  slots = defaultTreeLayoutSlots,
-  r = 4,
-  padding = 80,
-  initialCollapsed,
-  cluster = false,
-  onNodeClick,
-  onNodeHover,
-}: RadialTreeProps) => {
-  const svgRef = useRef<SVGSVGElement | null>(null);
-  const { setRef, width, height } = useContainerSize();
-
-  const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set(initialCollapsed ?? []));
-  const toggle = useCallback((id: string) => {
-    setCollapsed((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      return next;
-    });
-  }, []);
-
-  const handleClickRef = useRef<(node: TreeNode) => void>(() => {});
-  handleClickRef.current = (node: TreeNode) => {
-    onNodeClick?.(node);
-    if (node.children?.length) {
-      toggle(node.id);
-    }
-  };
-
-  const handleHoverRef = useRef<(node: TreeNode | null, event?: MouseEvent) => void>(() => {});
-  handleHoverRef.current = (node: TreeNode | null, event?: MouseEvent) => onNodeHover?.(node, event);
-
-  const root = useMemo(() => buildHierarchy(data, collapsed), [data, collapsed]);
-
-  useEffect(() => {
-    if (!svgRef.current || !width || !height) {
-      return;
-    }
-
-    const radius = Math.max(0, Math.min(width, height) / 2 - padding);
-    renderRadialTree(svgRef.current, root, {
-      radius,
-      r,
-      label,
-      slots,
-      collapsed,
-      cluster,
-      onNodeClick: (n) => handleClickRef.current(n),
-      onNodeHover: (n, e) => handleHoverRef.current(n, e),
-    });
-  }, [root, width, height, r, padding, label, slots, collapsed, cluster]);
-
-  return (
-    <div ref={setRef} className={mx('dx-expander relative', classNames)}>
-      {width > 0 && height > 0 && (
-        <svg
-          ref={svgRef}
-          xmlns='http://www.w3.org/2000/svg'
-          width={width}
-          height={height}
-          viewBox={`${-width / 2} ${-height / 2} ${width} ${height}`}
-        />
-      )}
-    </div>
-  );
-};
-
-type RenderOptions = {
-  radius: number;
-  r: number;
-  label: (d: TreeNode) => string;
-  slots: TreeLayoutSlots;
-  collapsed: Set<string>;
-  cluster: boolean;
-  onNodeClick: (node: TreeNode) => void;
-  onNodeHover: (node: TreeNode | null, event?: MouseEvent) => void;
-};
-
-const renderRadialTree = (svgElement: SVGSVGElement, root: any, options: RenderOptions) => {
-  const { radius, r, label, slots, collapsed, cluster, onNodeClick, onNodeHover } = options;
-  const svg = select(svgElement);
-
-  const layout = cluster ? d3Cluster<TreeNode>() : d3Tree<TreeNode>();
-  layout
-    .size([2 * Math.PI, radius])
-    .separation((a: any, b: any) => (a.parent === b.parent ? 1 : 2) / Math.max(1, a.depth))(root);
-
-  const g = svg.selectAll<SVGGElement, null>('g.dx-radial-root').data([null]).join('g').classed('dx-radial-root', true);
-
-  const linksLayer = g
-    .selectAll<SVGGElement, null>('g.dx-radial-links')
-    .data([null])
-    .join('g')
-    .classed('dx-radial-links', true);
-
-  const nodesLayer = g
-    .selectAll<SVGGElement, null>('g.dx-radial-nodes')
-    .data([null])
-    .join('g')
-    .classed('dx-radial-nodes', true);
-
-  const linkPath = linkRadial<any, any>()
-    .angle((d: any) => d.x)
-    .radius((d: any) => d.y);
-
-  linksLayer
-    .selectAll<SVGPathElement, any>('path')
-    .data(root.links(), (d: any) => `${d.source.data.id}->${d.target.data.id}`)
-    .join(
-      (enter) =>
-        enter
-          .append('path')
-          .attr('class', slots.path ?? '')
-          .attr('fill', 'none')
-          .attr('opacity', 0),
-      (update) => update,
-      (exit) => exit.transition().duration(TRANSITION_MS).attr('opacity', 0).remove(),
-    )
-    .transition()
-    .duration(TRANSITION_MS)
-    .attr('opacity', 1)
-    .attr('d', linkPath);
-
-  const node = nodesLayer
-    .selectAll<SVGGElement, any>('g.dx-radial-node')
-    .data(root.descendants(), (d: any) => d.data.id);
-
-  const nodeEnter = node
-    .enter()
-    .append('g')
-    .classed('dx-radial-node', true)
-    .attr('opacity', 0)
-    .attr('transform', (d: any) => `rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0)`)
-    .style('cursor', (d: any) => (d.data.children?.length ? 'pointer' : 'default'))
-    .on('click', (_, d: any) => onNodeClick(d.data));
-
-  nodeEnter
-    .append('circle')
-    .attr('r', r)
-    .on('pointerenter', (event: MouseEvent, d: any) => onNodeHover(d.data, event))
-    .on('pointerleave', (event: MouseEvent) => onNodeHover(null, event));
-
-  nodeEnter
-    .append('text')
-    .attr('dy', '0.32em')
-    .attr('paint-order', 'stroke')
-    .text((d: any) => label(d.data));
-
-  const nodeMerge = nodeEnter.merge(node as any);
-
-  nodeMerge
-    .transition()
-    .duration(TRANSITION_MS)
-    .attr('opacity', 1)
-    .attr('transform', (d: any) => `rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0)`);
-
-  nodeMerge
-    .select<SVGCircleElement>('circle')
-    .attr('class', (d: any) => {
-      const collapsedHere = isCollapsed(d.data, collapsed);
-      const leaf = isLeaf(d.data);
-      return [slots.node ?? '', collapsedHere ? 'dx-collapsed' : leaf ? 'dx-leaf' : 'dx-branch']
-        .filter(Boolean)
-        .join(' ');
-    })
-    .attr('r', r)
-    // Color leaves by typename so cluster matches the force / bundle / lattice variants.
-    // Branch nodes (groups, root) keep the default slot fill.
-    .style('fill', (d: any) => (isLeaf(d.data) ? getNodeFillForObject(d.data.data as Obj.Unknown | undefined) : null));
-
-  nodeMerge
-    .select<SVGTextElement>('text')
-    .attr('class', slots.text ?? '')
-    .attr('transform', (d: any) => (d.x >= Math.PI ? 'rotate(180)' : null))
-    // eslint-disable-next-line no-mixed-operators
-    .attr('x', (d: any) => (d.x < Math.PI === !d.children ? r + 4 : -(r + 4)))
-    // eslint-disable-next-line no-mixed-operators
-    .attr('text-anchor', (d: any) => (d.x < Math.PI === !d.children ? 'start' : 'end'))
-    .text((d: any) => label(d.data));
-
-  node.exit().transition().duration(TRANSITION_MS).attr('opacity', 0).remove();
-};
-
-export default RadialTree;