@dxos/plugin-explorer 0.8.0 → 0.8.1-main.013e445

package/dist/lib/browser/{ExplorerContainer-GJTCBEM4.mjs → ExplorerContainer-3FC557MG.mjs}

@@ -1,6 +1,6 @@
 import {
   Graph
-} from "./chunk-YQL7YE6N.mjs";
+} from "./chunk-X5CI43J6.mjs";
 
 // packages/plugins/experimental/plugin-explorer/src/components/ExplorerContainer.tsx
 import React from "react";
@@ -25,4 +25,4 @@ var ExplorerContainer_default = ExplorerContainer;
 export {
   ExplorerContainer_default as default
 };
-//# sourceMappingURL=ExplorerContainer-GJTCBEM4.mjs.map
+//# sourceMappingURL=ExplorerContainer-3FC557MG.mjs.map

package/dist/lib/browser/{chunk-S3QNIEBS.mjs → chunk-4OFGICWF.mjs}

@@ -1,3 +1,7 @@
+import {
+  SpaceGraphModel
+} from "./chunk-X5CI43J6.mjs";
+
 // packages/plugins/experimental/plugin-explorer/src/components/Chart/Chart.tsx
 import * as Plot from "@observablehq/plot";
 import React, { useEffect } from "react";
@@ -10820,13 +10824,248 @@ var Globe = ({ items = [], accessor, projection = "orthographic", options = defa
   });
 };
 
+// packages/plugins/experimental/plugin-explorer/src/components/Tree/Tree.tsx
+import React3, { useEffect as useEffect3, useState } from "react";
+import { useResizeDetector as useResizeDetector3 } from "react-resize-detector";
+import { createSvgContext, SVG, SVGRoot } from "@dxos/gem-core";
+import { useAsyncState } from "@dxos/react-ui";
+
+// packages/plugins/experimental/plugin-explorer/src/components/Tree/layout/HierarchicalEdgeBundling.ts
+import * as d3 from "d3";
+var HierarchicalEdgeBundling = (s, data, options) => {
+  const svg = d3.select(s);
+  svg.selectAll("*").remove();
+  const { radius = 600, padding = 100, slots } = options;
+  const root = d3.hierarchy(flatten(data));
+  const tree3 = d3.cluster().size([
+    2 * Math.PI,
+    radius - padding
+  ]);
+  const layout = tree3(addLinks(root));
+  const node = svg.append("g").selectAll().data(layout.leaves()).join("g").attr("transform", (d) => `rotate(${d.x * (180 / Math.PI) - 90}) translate(${d.y},0)`).append("text").attr("class", slots?.text ?? "").attr("dy", "0.31em").attr("x", (d) => d.x < Math.PI ? 6 : -6).attr("text-anchor", (d) => d.x < Math.PI ? "start" : "end").attr("transform", (d) => d.x >= Math.PI ? "rotate(180)" : null).call((text) => text.text((d) => d.data.id.slice(0, 8)));
+  const line = d3.lineRadial().curve(d3.curveBundle.beta(0.85)).radius((d) => d.y).angle((d) => d.x);
+  const links = svg.append("g").selectAll().data(layout.leaves().flatMap((leaf) => leaf.outgoing)).join("path").style("mix-blend-mode", "multiply").attr("class", slots?.path ?? "").attr("d", ([i, o]) => {
+    return line(i.path(o));
+  }).each(function(d) {
+    d.path = this;
+  });
+};
+var addLinks = (root) => {
+  const nodes = new Map(root.descendants().map((d) => [
+    d.data.id,
+    d
+  ]));
+  const parents = root.descendants().reduce((map, d) => {
+    if (d.children?.length) {
+      map.set(d.data.id, d);
+    }
+    return map;
+  }, /* @__PURE__ */ new Map());
+  for (const d of root.leaves()) {
+    const parent = parents.get(d.data.id);
+    if (parent) {
+      d.outgoing = parent.data.children?.slice(1).map((child) => {
+        return [
+          d,
+          nodes.get(child.id)
+        ];
+      }) ?? [];
+    } else {
+      d.outgoing = [];
+    }
+  }
+  return root;
+};
+var flatten = (node) => {
+  const clone = {
+    id: node.id
+  };
+  if (node.children?.length) {
+    const children = node.children.map((child) => flatten(child));
+    clone.children = [
+      {
+        id: node.id
+      },
+      ...children
+    ];
+  }
+  return clone;
+};
+var HierarchicalEdgeBundling_default = HierarchicalEdgeBundling;
+
+// packages/plugins/experimental/plugin-explorer/src/components/Tree/layout/RadialTree.ts
+import * as d32 from "d3";
+var RadialTree = (s, data, options) => {
+  const svg = d32.select(s);
+  svg.selectAll("*").remove();
+  const { label, radius = 400, r = 4, slots } = options;
+  const arc = 2 * Math.PI;
+  const root = d32.hierarchy(data);
+  const descendants = root.descendants();
+  const getLabel = label === null ? null : descendants.map((d) => label(d.data));
+  const layout = d32.tree().size([
+    arc,
+    radius
+  ]).separation((a, b) => (a.parent === b.parent ? 1 : 2) / a.depth);
+  layout(root);
+  svg.append("g").selectAll("path").data(root.links()).join("path").attr("class", slots?.path ?? "").attr("d", d32.linkRadial().angle((d) => d.x + Math.PI / 2).radius((d) => d.y));
+  const node = svg.append("g").selectAll("a").data(root.descendants()).join("a").attr("transform", (d) => `rotate(${d.x * 180 / Math.PI}) translate(${d.y},0)`);
+  node.append("circle").attr("class", slots?.node ?? "").attr("r", r);
+  if (getLabel) {
+    node.append("text").attr("transform", (d) => `rotate(${d.x >= Math.PI ? 180 : 0})`).attr("dy", "0.32em").attr("x", (d) => d.x < Math.PI === !d.children ? 6 : -6).attr("text-anchor", (d) => d.x < Math.PI === !d.children ? "start" : "end").attr("class", slots?.text ?? "").text((d, i) => getLabel[i]);
+  }
+  return svg.node();
+};
+var RadialTree_default = RadialTree;
+
+// packages/plugins/experimental/plugin-explorer/src/components/Tree/layout/TidyTree.ts
+import * as d33 from "d3";
+var TidyTree = (s, data, options) => {
+  const svg = d33.select(s);
+  svg.selectAll("*").remove();
+  const { label, width, height, r = 4, padding = 4, margin = 60, slots } = options;
+  const root = d33.hierarchy(data);
+  const descendants = root.descendants();
+  const getLabel = label == null ? null : descendants.map((d) => label(d.data));
+  const dx = 16;
+  const dy = width / (root.height + padding);
+  const layout = d33.tree().nodeSize([
+    dx,
+    dy
+  ]);
+  layout(root);
+  let x0 = Infinity;
+  let x1 = -x0;
+  let y0 = Infinity;
+  let y1 = -y0;
+  root.each((d) => {
+    if (d.x > x1) {
+      x1 = d.x;
+    }
+    if (d.x < x0) {
+      x0 = d.x;
+    }
+    if (d.y > y1) {
+      y1 = d.y;
+    }
+    if (d.y < y0) {
+      y0 = d.y;
+    }
+  });
+  const sx = Math.min(2, Math.max(1, (height - margin * 2) / (x1 - x0)));
+  const oy = -(width - (y1 - y0)) / 2;
+  svg.append("g").selectAll("path").data(root.links()).join("path").attr("class", slots?.path ?? "").attr("d", d33.link(d33.curveBumpX).x((d) => d.y + oy).y((d) => d.x * sx));
+  const node = svg.append("g").selectAll("a").data(root.descendants()).join("a").attr("transform", (d) => `translate(${d.y + oy},${d.x * sx})`);
+  node.append("circle").attr("class", slots?.node ?? "").attr("r", r);
+  if (getLabel) {
+    node.append("text").attr("dy", "0.32em").attr("x", (d) => d.children ? -6 : 6).attr("text-anchor", (d) => d.children ? "end" : "start").attr("class", slots?.text ?? "").text((d, i) => getLabel[i]);
+  }
+};
+var TidyTree_default = TidyTree;
+
+// packages/plugins/experimental/plugin-explorer/src/components/Tree/types.ts
+var mapGraphToTreeData = (model, maxDepth = 8) => {
+  const mapNode = (node, depth = 0) => {
+    const treeNode = {
+      id: model.idAccessor(node),
+      label: model.idAccessor(node).slice(0, 8)
+    };
+    const links = model.graph.links.filter((link2) => link2.source === treeNode.id);
+    if (depth < maxDepth) {
+      treeNode.children = links.map((link2) => mapNode(model.graph.nodes.find((node2) => model.idAccessor(node2) === link2.target), depth + 1));
+    }
+    return treeNode;
+  };
+  let data;
+  if (model.selected) {
+    const node = model.graph.nodes.find((node2) => model.idAccessor(node2) === model.selected);
+    if (node) {
+      data = mapNode(node);
+    }
+  }
+  return data;
+};
+
+// packages/plugins/experimental/plugin-explorer/src/components/Tree/Tree.tsx
+var defaultTreeLayoutSlots = {
+  node: "fill-blue-600",
+  path: "fill-none stroke-blue-400 stroke-[0.5px]",
+  text: "stroke-[0.5px] stroke-neutral-700 text-xs"
+};
+var renderers = /* @__PURE__ */ new Map([
+  [
+    "tidy",
+    TidyTree_default
+  ],
+  [
+    "radial",
+    RadialTree_default
+  ],
+  [
+    "edge",
+    HierarchicalEdgeBundling_default
+  ]
+]);
+var Tree = ({ space, selected, variant = "tidy", onNodeClick }) => {
+  const [model] = useAsyncState(async () => space ? new SpaceGraphModel().open(space, selected) : void 0, [
+    space,
+    selected
+  ]);
+  const [tree3, setTree] = useState();
+  useEffect3(() => {
+    return model?.subscribe(() => {
+      const tree4 = mapGraphToTreeData(model);
+      setTree(tree4);
+    }, true);
+  }, [
+    model
+  ]);
+  const context = createSvgContext();
+  const { ref, width = 0, height = 0 } = useResizeDetector3();
+  useEffect3(() => {
+    if (width && height) {
+      const size = Math.min(width, height);
+      const radius = size * 0.4;
+      const options = {
+        // TODO(burdon): Type.
+        label: (d) => d.label ?? d.id,
+        width,
+        height,
+        radius,
+        marginLeft: (width - radius * 2) / 2,
+        marginRight: (width - radius * 2) / 2,
+        marginTop: (height - radius * 2) / 2,
+        marginBottom: (height - radius * 2) / 2,
+        slots: defaultTreeLayoutSlots
+      };
+      if (tree3) {
+        const renderer = renderers.get(variant);
+        renderer?.(context.ref.current, tree3, options);
+      }
+    }
+  }, [
+    tree3,
+    width,
+    height
+  ]);
+  return /* @__PURE__ */ React3.createElement("div", {
+    ref,
+    className: "flex grow overflow-hidden",
+    onClick: () => onNodeClick?.()
+  }, /* @__PURE__ */ React3.createElement(SVGRoot, {
+    context
+  }, /* @__PURE__ */ React3.createElement(SVG, null)));
+};
+
 // packages/plugins/experimental/plugin-explorer/src/components/index.ts
 import { lazy } from "react";
-var ExplorerContainer = lazy(() => import("./ExplorerContainer-GJTCBEM4.mjs"));
+var ExplorerContainer = lazy(() => import("./ExplorerContainer-3FC557MG.mjs"));
 
 export {
   Chart,
   Globe,
+  defaultTreeLayoutSlots,
+  Tree,
   ExplorerContainer
 };
-//# sourceMappingURL=chunk-S3QNIEBS.mjs.map
+//# sourceMappingURL=chunk-4OFGICWF.mjs.map