@dxos/plugin-explorer 0.8.0 → 0.8.1-main.ae460ac

package/dist/lib/node/chunk-6GTOKVKH.cjs

@@ -0,0 +1,236 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var chunk_6GTOKVKH_exports = {};
+__export(chunk_6GTOKVKH_exports, {
+  Graph: () => Graph,
+  SpaceGraphModel: () => SpaceGraphModel
+});
+module.exports = __toCommonJS(chunk_6GTOKVKH_exports);
+var import_echo_schema = require("@dxos/echo-schema");
+var import_gem_spore = require("@dxos/gem-spore");
+var import_log = require("@dxos/log");
+var import_types = require("@dxos/plugin-space/types");
+var import_echo = require("@dxos/react-client/echo");
+var import_d3 = require("d3");
+var import_force_graph = __toESM(require("force-graph"));
+var import_react = __toESM(require("react"));
+var import_react_resize_detector = require("react-resize-detector");
+var import_plugin_search = require("@dxos/plugin-search");
+var import_react_ui = require("@dxos/react-ui");
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-explorer/src/components/Graph/graph-model.ts";
+var SpaceGraphModel = class extends import_gem_spore.GraphModel {
+  constructor(_options = {}) {
+    super();
+    this._options = _options;
+    this._graph = {
+      nodes: [],
+      links: []
+    };
+  }
+  get graph() {
+    return this._graph;
+  }
+  get objects() {
+    return this._objects ?? [];
+  }
+  // TODO(burdon): Alternative diagram types:
+  // - https://observablehq.com/@d3/radial-tree/2
+  // - https://observablehq.com/@d3/disjoint-force-directed-graph/2
+  // - https://observablehq.com/@mbostock/tadpoles
+  // - https://observablehq.com/@d3/psr-b1919-21
+  // - https://vasturiano.github.io/react-force-graph/example/basic (3D)
+  async open(space, objectId) {
+    if (!this._schemaSubscription) {
+      const schemaaQuery = space.db.schemaRegistry.query({});
+      const schemas = await schemaaQuery.run();
+      const onSchemaUpdate = ({ results }) => this._schema = results;
+      this._schemaSubscription = schemaaQuery.subscribe(onSchemaUpdate);
+      onSchemaUpdate({
+        results: schemas
+      });
+      this._objectsSubscription = space.db.query(import_echo.Filter.not(import_echo.Filter.or(import_echo.Filter.schema(import_echo_schema.StoredSchema), import_echo.Filter.schema(import_types.CollectionType)))).subscribe(({ objects }) => {
+        this._objects = objects;
+        const currentNodes = this._graph.nodes;
+        this._graph.nodes = [];
+        this._graph.links = [];
+        const addSchema = (typename) => {
+          const current = currentNodes.find((node) => node.id === typename);
+          if (typename) {
+            this._graph.nodes.push({
+              ...current,
+              id: typename,
+              type: "schema",
+              data: {
+                typename
+              }
+            });
+          }
+        };
+        space.db.graph.schemaRegistry.schemas.forEach((schema) => {
+          const typename = (0, import_echo_schema.getSchemaDXN)(schema)?.toTypename();
+          if (typename) {
+            addSchema(typename);
+          }
+        });
+        this._schema?.forEach((schema) => {
+          const typename = (0, import_echo_schema.getSchemaDXN)(schema)?.toTypename();
+          if (typename) {
+            addSchema(typename);
+          }
+        });
+        this._objects.forEach((object) => {
+          const schema = (0, import_echo_schema.getSchema)(object);
+          if (schema) {
+            const typename = (0, import_echo_schema.getSchemaDXN)(schema)?.toTypename();
+            if (typename) {
+              const current = currentNodes.find((node) => node.id === object.id);
+              this._graph.nodes.push({
+                ...current,
+                id: object.id,
+                type: "object",
+                data: {
+                  typename,
+                  object
+                }
+              });
+              const schemaNode = this._graph.nodes.find((node) => node.type === "schema" && node.data.typename === typename);
+              if (schemaNode) {
+                this._graph.links.push({
+                  id: `${object.id}-${schemaNode.id}`,
+                  source: object.id,
+                  target: schemaNode.id
+                });
+              } else {
+                import_log.log.info("schema node not found", {
+                  typename
+                }, {
+                  F: __dxlog_file,
+                  L: 147,
+                  S: this,
+                  C: (f, a) => f(...a)
+                });
+              }
+              import_echo_schema.AST.getPropertySignatures(schema.ast).forEach((prop) => {
+                if (!import_echo_schema.SchemaValidator.hasTypeAnnotation(schema, prop.name.toString(), import_echo_schema.ReferenceAnnotationId)) {
+                  return;
+                }
+                const value = object[String(prop.name)];
+                if (value) {
+                  const refs = Array.isArray(value) ? value : [
+                    value
+                  ];
+                  for (const ref of refs) {
+                    if (objects.findIndex((obj) => obj.id === ref.id) !== -1) {
+                      this._graph.links.push({
+                        id: `${object.id}-${String(prop.name)}-${ref.id}`,
+                        source: object.id,
+                        target: ref.id
+                      });
+                    }
+                  }
+                }
+              });
+            }
+          }
+        });
+        this.triggerUpdate();
+      }, {
+        fire: true
+      });
+    }
+    this.setSelected(objectId);
+    return this;
+  }
+  close() {
+    this._schemaSubscription?.();
+    this._schemaSubscription = void 0;
+    this._objectsSubscription?.();
+    this._objectsSubscription = void 0;
+    return this;
+  }
+};
+var Graph = ({ space, match }) => {
+  const { ref, width, height } = (0, import_react_resize_detector.useResizeDetector)({
+    refreshRate: 200
+  });
+  const rootRef = (0, import_react.useRef)(null);
+  const forceGraph = (0, import_react.useRef)();
+  const [model] = (0, import_react_ui.useAsyncState)(async () => space ? new SpaceGraphModel({
+    schema: true
+  }).open(space) : void 0, [
+    space
+  ]);
+  const filteredRef = (0, import_react.useRef)();
+  filteredRef.current = (0, import_plugin_search.filterObjectsSync)(model?.objects ?? [], match);
+  (0, import_react.useEffect)(() => {
+    if (rootRef.current) {
+      forceGraph.current = new import_force_graph.default(rootRef.current).nodeRelSize(6).nodeLabel((node) => {
+        if (node.type === "schema") {
+          return node.data.typename;
+        }
+        return node.id;
+      }).nodeAutoColorBy((node) => node.type === "schema" ? "schema" : node.data.typename).linkColor(() => "rgba(255,255,255,0.25)");
+    }
+    return () => {
+      forceGraph.current?.pauseAnimation().graphData({
+        nodes: [],
+        links: []
+      });
+      forceGraph.current = void 0;
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (forceGraph.current && width && height && model) {
+      forceGraph.current.pauseAnimation().width(width).height(height).onEngineStop(() => {
+        handleZoomToFit();
+      }).d3Force("link", (0, import_d3.forceLink)().distance(160).strength(0.5)).d3Force("charge", (0, import_d3.forceManyBody)().strength(-30)).graphData(model.graph).warmupTicks(100).cooldownTime(1e3).resumeAnimation();
+    }
+  }, [
+    model,
+    width,
+    height
+  ]);
+  const handleZoomToFit = () => {
+    forceGraph.current?.zoomToFit(400, 40);
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", {
+    ref,
+    className: "relative grow",
+    onClick: handleZoomToFit
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    ref: rootRef,
+    className: "absolute inset-0"
+  }));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Graph,
+  SpaceGraphModel
+});
+//# sourceMappingURL=chunk-6GTOKVKH.cjs.map

package/dist/lib/node/chunk-6GTOKVKH.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/Graph/graph-model.ts", "../../../src/components/Graph/Graph.tsx"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type UnsubscribeCallback } from '@dxos/async';\nimport {\n  getSchema,\n  getSchemaDXN,\n  AST,\n  type EchoSchema,\n  ReferenceAnnotationId,\n  SchemaValidator,\n  StoredSchema,\n} from '@dxos/echo-schema';\nimport { type GraphData, GraphModel } from '@dxos/gem-spore';\nimport { log } from '@dxos/log';\nimport { CollectionType } from '@dxos/plugin-space/types';\nimport { Filter, type ReactiveEchoObject, type Space, type Subscription } from '@dxos/react-client/echo';\n\nexport type SpaceGraphModelOptions = {\n  schema?: boolean;\n};\n\n// TODO(burdon): Convert to common/graph.\n\ntype SchemaGraphNode = {\n  id: string;\n  type: 'schema';\n  data: { typename: string };\n};\n\ntype ObjectGraphNode = {\n  id: string;\n  type: 'object';\n  data: { typename: string; object: ReactiveEchoObject<any> };\n};\n\nexport type EchoGraphNode = SchemaGraphNode | ObjectGraphNode;\n\n/**\n * Converts ECHO objects to a graph.\n */\nexport class SpaceGraphModel extends GraphModel<EchoGraphNode> {\n  private readonly _graph: GraphData<EchoGraphNode> = {\n    nodes: [],\n    links: [],\n  };\n\n  private _schema?: EchoSchema[];\n  private _schemaSubscription?: UnsubscribeCallback;\n  private _objects?: ReactiveEchoObject<any>[];\n  private _objectsSubscription?: Subscription;\n\n  constructor(private readonly _options: SpaceGraphModelOptions = {}) {\n    super();\n  }\n\n  override get graph(): GraphData<EchoGraphNode> {\n    return this._graph;\n  }\n\n  get objects(): ReactiveEchoObject<any>[] {\n    return this._objects ?? [];\n  }\n\n  // TODO(burdon): Alternative diagram types:\n  // - https://observablehq.com/@d3/radial-tree/2\n  // - https://observablehq.com/@d3/disjoint-force-directed-graph/2\n  // - https://observablehq.com/@mbostock/tadpoles\n  // - https://observablehq.com/@d3/psr-b1919-21\n  // - https://vasturiano.github.io/react-force-graph/example/basic (3D)\n\n  async open(space: Space, objectId?: string) {\n    // TODO(burdon): Factor out graph builder to lib (use common/graph abstraction).\n    if (!this._schemaSubscription) {\n      // TODO(burdon): Normalize unsubscribe callbacks and merge handlers.\n      // TODO(burdon): Trigger initial subscription update.\n      // TODO(burdon): Normalize subscription cb for objects, schema, etc.\n\n      const schemaaQuery = space.db.schemaRegistry.query({});\n      const schemas = await schemaaQuery.run();\n      const onSchemaUpdate = ({ results }: { results: EchoSchema[] }) => (this._schema = results);\n      this._schemaSubscription = schemaaQuery.subscribe(onSchemaUpdate);\n      onSchemaUpdate({ results: schemas });\n\n      this._objectsSubscription = space.db\n        // TODO(burdon): ERROR: Cannot mix type and or filters.\n        .query(Filter.not(Filter.or(Filter.schema(StoredSchema), Filter.schema(CollectionType))))\n        .subscribe(\n          ({ objects }) => {\n            this._objects = objects;\n\n            // Merge with current nodes.\n            const currentNodes = this._graph.nodes;\n\n            this._graph.nodes = [];\n            this._graph.links = [];\n\n            const addSchema = (typename: string) => {\n              const current = currentNodes.find((node) => node.id === typename);\n              if (typename) {\n                this._graph.nodes.push({\n                  ...current,\n                  id: typename,\n                  type: 'schema',\n                  data: { typename },\n                });\n              }\n            };\n\n            // Runtime schema.\n            space.db.graph.schemaRegistry.schemas.forEach((schema) => {\n              const typename = getSchemaDXN(schema)?.toTypename();\n              if (typename) {\n                addSchema(typename);\n              }\n            });\n\n            // Database Schema.\n            this._schema?.forEach((schema) => {\n              const typename = getSchemaDXN(schema)?.toTypename();\n              if (typename) {\n                addSchema(typename);\n              }\n            });\n\n            // Database Objects.\n            this._objects.forEach((object) => {\n              const schema = getSchema(object);\n              if (schema) {\n                const typename = getSchemaDXN(schema)?.toTypename();\n                if (typename) {\n                  const current = currentNodes.find((node) => node.id === object.id);\n                  this._graph.nodes.push({ ...current, id: object.id, type: 'object', data: { typename, object } });\n\n                  // Link to schema.\n                  const schemaNode = this._graph.nodes.find(\n                    (node) => node.type === 'schema' && node.data.typename === typename,\n                  );\n                  if (schemaNode) {\n                    this._graph.links.push({\n                      id: `${object.id}-${schemaNode.id}`,\n                      source: object.id,\n                      target: schemaNode.id,\n                    });\n                  } else {\n                    log.info('schema node not found', { typename });\n                  }\n\n                  // Link ot refs.\n                  // TODO(burdon): This isn't working.\n                  AST.getPropertySignatures(schema.ast).forEach((prop) => {\n                    if (!SchemaValidator.hasTypeAnnotation(schema, prop.name.toString(), ReferenceAnnotationId)) {\n                      return;\n                    }\n\n                    const value = object[String(prop.name)];\n                    if (value) {\n                      const refs = Array.isArray(value) ? value : [value];\n                      for (const ref of refs) {\n                        if (objects.findIndex((obj) => obj.id === ref.id) !== -1) {\n                          this._graph.links.push({\n                            id: `${object.id}-${String(prop.name)}-${ref.id}`,\n                            source: object.id,\n                            target: ref.id,\n                          });\n                        }\n                      }\n                    }\n                  });\n                }\n              }\n            });\n\n            this.triggerUpdate();\n          },\n          { fire: true },\n        );\n    }\n\n    this.setSelected(objectId);\n    return this;\n  }\n\n  close() {\n    this._schemaSubscription?.();\n    this._schemaSubscription = undefined;\n    this._objectsSubscription?.();\n    this._objectsSubscription = undefined;\n\n    return this;\n  }\n}\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { forceLink, forceManyBody } from 'd3';\nimport ForceGraph from 'force-graph';\nimport React, { type FC, useEffect, useRef } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { type Space } from '@dxos/client/echo';\nimport { filterObjectsSync, type SearchResult } from '@dxos/plugin-search';\nimport { useAsyncState } from '@dxos/react-ui';\n\nimport { SpaceGraphModel } from './graph-model';\n\nexport type GraphProps = {\n  space: Space;\n  match?: RegExp;\n};\n\nexport const Graph: FC<GraphProps> = ({ space, match }) => {\n  const { ref, width, height } = useResizeDetector({ refreshRate: 200 });\n  const rootRef = useRef<HTMLDivElement>(null);\n  const forceGraph = useRef<ForceGraph>();\n\n  const [model] = useAsyncState(\n    async () => (space ? new SpaceGraphModel({ schema: true }).open(space) : undefined),\n    [space],\n  );\n\n  const filteredRef = useRef<SearchResult[]>();\n  filteredRef.current = filterObjectsSync(model?.objects ?? [], match);\n\n  useEffect(() => {\n    if (rootRef.current) {\n      // https://github.com/vasturiano/force-graph\n      forceGraph.current = new ForceGraph(rootRef.current)\n        .nodeRelSize(6)\n        .nodeLabel((node: any) => {\n          if (node.type === 'schema') {\n            return node.data.typename;\n          }\n\n          return node.id;\n        })\n        .nodeAutoColorBy((node: any) => (node.type === 'schema' ? 'schema' : node.data.typename))\n        .linkColor(() => 'rgba(255,255,255,0.25)');\n    }\n\n    return () => {\n      forceGraph.current?.pauseAnimation().graphData({ nodes: [], links: [] });\n      forceGraph.current = undefined;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (forceGraph.current && width && height && model) {\n      forceGraph.current\n        .pauseAnimation()\n        .width(width)\n        .height(height)\n        .onEngineStop(() => {\n          handleZoomToFit();\n        })\n\n        // https://github.com/vasturiano/force-graph?tab=readme-ov-file#force-engine-d3-force-configuration\n        // .d3Force('center', forceCenter().strength(0.9))\n        .d3Force('link', forceLink().distance(160).strength(0.5))\n        .d3Force('charge', forceManyBody().strength(-30))\n        // .d3AlphaDecay(0.0228)\n        // .d3VelocityDecay(0.4)\n\n        .graphData(model.graph)\n        .warmupTicks(100)\n        .cooldownTime(1000)\n        .resumeAnimation();\n    }\n  }, [model, width, height]);\n\n  const handleZoomToFit = () => {\n    forceGraph.current?.zoomToFit(400, 40);\n  };\n\n  return (\n    <div ref={ref} className='relative grow' onClick={handleZoomToFit}>\n      <div ref={rootRef} className='absolute inset-0' />\n    </div>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["SpaceGraphModel", "GraphModel", "constructor", "_options", "_graph", "nodes", "links", "graph", "objects", "_objects", "open", "space", "objectId", "_schemaSubscription", "schemaaQuery", "db", "schemaRegistry", "query", "schemas", "run", "onSchemaUpdate", "results", "_schema", "subscribe", "_objectsSubscription", "Filter", "not", "or", "schema", "StoredSchema", "CollectionType", "currentNodes", "addSchema", "typename", "current", "find", "node", "id", "push", "type", "data", "forEach", "getSchemaDXN", "toTypename", "object", "getSchema", "schemaNode", "source", "target", "log", "info", "AST", "getPropertySignatures", "ast", "prop", "SchemaValidator", "hasTypeAnnotation", "name", "toString", "ReferenceAnnotationId", "value", "String", "refs", "Array", "isArray", "ref", "findIndex", "obj", "triggerUpdate", "fire", "setSelected", "close", "undefined", "Graph", "match", "width", "height", "useResizeDetector", "refreshRate", "rootRef", "useRef", "forceGraph", "model", "useAsyncState", "filteredRef", "filterObjectsSync", "useEffect", "ForceGraph", "nodeRelSize", "nodeLabel", "nodeAutoColorBy", "linkColor", "pauseAnimation", "graphData", "onEngineStop", "handleZoomToFit", "d3Force", "forceLink", "distance", "strength", "forceManyBody", "warmupTicks", "cooldownTime", "resumeAnimation", "zoomToFit", "React", "div", "className", "onClick"]
+}

package/dist/lib/node/{chunk-VSACDC6F.cjs → chunk-CQYBCGC4.cjs}

@@ -26,13 +26,16 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var chunk_VSACDC6F_exports = {};
-__export(chunk_VSACDC6F_exports, {
+var chunk_CQYBCGC4_exports = {};
+__export(chunk_CQYBCGC4_exports, {
   Chart: () => Chart,
   ExplorerContainer: () => ExplorerContainer,
-  Globe: () => Globe
+  Globe: () => Globe,
+  Tree: () => Tree,
+  defaultTreeLayoutSlots: () => defaultTreeLayoutSlots
 });
-module.exports = __toCommonJS(chunk_VSACDC6F_exports);
+module.exports = __toCommonJS(chunk_CQYBCGC4_exports);
+var import_chunk_6GTOKVKH = require("./chunk-6GTOKVKH.cjs");
 var Plot = __toESM(require("@observablehq/plot"));
 var import_react = __toESM(require("react"));
 var import_react_resize_detector = require("react-resize-detector");
@@ -40,7 +43,14 @@ var Plot2 = __toESM(require("@observablehq/plot"));
 var import_react2 = __toESM(require("react"));
 var import_react_resize_detector2 = require("react-resize-detector");
 var topojson = __toESM(require("topojson-client"));
-var import_react3 = require("react");
+var import_react3 = __toESM(require("react"));
+var import_react_resize_detector3 = require("react-resize-detector");
+var import_gem_core = require("@dxos/gem-core");
+var import_react_ui = require("@dxos/react-ui");
+var d3 = __toESM(require("d3"));
+var d32 = __toESM(require("d3"));
+var d33 = __toESM(require("d3"));
+var import_react4 = require("react");
 var createAdapter = (prop, accessor) => accessor ? {
   transform: (values) => values.map((value) => accessor(value)[prop])
 } : prop;
@@ -10844,11 +10854,227 @@ var Globe = ({ items = [], accessor, projection = "orthographic", options = defa
     className: "grow p-4"
   });
 };
-var ExplorerContainer = (0, import_react3.lazy)(() => import("./ExplorerContainer-RJT54IOS.cjs"));
+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;
+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;
+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;
+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;
+};
+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] = (0, import_react_ui.useAsyncState)(async () => space ? new import_chunk_6GTOKVKH.SpaceGraphModel().open(space, selected) : void 0, [
+    space,
+    selected
+  ]);
+  const [tree3, setTree] = (0, import_react3.useState)();
+  (0, import_react3.useEffect)(() => {
+    return model?.subscribe(() => {
+      const tree4 = mapGraphToTreeData(model);
+      setTree(tree4);
+    }, true);
+  }, [
+    model
+  ]);
+  const context = (0, import_gem_core.createSvgContext)();
+  const { ref, width = 0, height = 0 } = (0, import_react_resize_detector3.useResizeDetector)();
+  (0, import_react3.useEffect)(() => {
+    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__ */ import_react3.default.createElement("div", {
+    ref,
+    className: "flex grow overflow-hidden",
+    onClick: () => onNodeClick?.()
+  }, /* @__PURE__ */ import_react3.default.createElement(import_gem_core.SVGRoot, {
+    context
+  }, /* @__PURE__ */ import_react3.default.createElement(import_gem_core.SVG, null)));
+};
+var ExplorerContainer = (0, import_react4.lazy)(() => import("./ExplorerContainer-SO5XAXFS.cjs"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Chart,
   ExplorerContainer,
-  Globe
+  Globe,
+  Tree,
+  defaultTreeLayoutSlots
 });
-//# sourceMappingURL=chunk-VSACDC6F.cjs.map
+//# sourceMappingURL=chunk-CQYBCGC4.cjs.map