@dxos/plugin-explorer 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae

package/dist/lib/browser/{chunk-UCDNCIRV.mjs → chunk-6AZY4CDH.mjs}

@@ -1,5 +1,4 @@
 // src/components/Chart/Chart.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import * as Plot from "@observablehq/plot";
 import React, { useEffect } from "react";
 import { useResizeDetector } from "react-resize-detector";
@@ -17,49 +16,43 @@ var defaultOptions = {
   fillOpacity: 0.2
 };
 var Chart = ({ items = [], accessor, options = defaultOptions }) => {
-  var _effect = _useSignals();
-  try {
-    const { ref: containerRef, width = 0, height = 0 } = useResizeDetector({
-      refreshRate: 200
-    });
-    useEffect(() => {
-      if (!width || !height) {
-        return;
-      }
-      const plot3 = Plot.plot({
-        grid: true,
-        width,
-        height,
-        style: {
-          background: "transparent"
-        },
-        marks: [
-          Plot.frame(),
-          Plot.dot(items, {
-            x: createAdapter("x", accessor),
-            y: createAdapter("y", accessor),
-            ...options
-          })
-        ]
-      });
-      containerRef.current.append(plot3);
-      return () => plot3?.remove();
-    }, [
-      items,
+  const { ref: containerRef, width = 0, height = 0 } = useResizeDetector({
+    refreshRate: 200
+  });
+  useEffect(() => {
+    if (!width || !height) {
+      return;
+    }
+    const plot3 = Plot.plot({
+      grid: true,
       width,
-      height
-    ]);
-    return /* @__PURE__ */ React.createElement("div", {
-      ref: containerRef,
-      className: "grow"
+      height,
+      style: {
+        background: "transparent"
+      },
+      marks: [
+        Plot.frame(),
+        Plot.dot(items, {
+          x: createAdapter("x", accessor),
+          y: createAdapter("y", accessor),
+          ...options
+        })
+      ]
     });
-  } finally {
-    _effect.f();
-  }
+    containerRef.current.append(plot3);
+    return () => plot3?.remove();
+  }, [
+    items,
+    width,
+    height
+  ]);
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: containerRef,
+    className: "grow"
+  });
 };
 
 // src/components/Globe/Globe.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import * as Plot2 from "@observablehq/plot";
 import React2, { useEffect as useEffect2 } from "react";
 import { useResizeDetector as useResizeDetector2 } from "react-resize-detector";
@@ -10773,70 +10766,238 @@ var defaultOptions2 = {
   fill: "#003300"
 };
 var Globe = ({ items = [], accessor, projection = "orthographic", options = defaultOptions2 }) => {
-  var _effect = _useSignals2();
-  try {
-    const { ref: containerRef, width = 0, height = 0 } = useResizeDetector2({
-      refreshRate: 200
-    });
-    const land = topojson.feature(countries_110m_default, countries_110m_default.objects.land);
-    useEffect2(() => {
-      if (!width || !height) {
-        return;
-      }
-      const plot3 = Plot2.plot({
-        // https://observablehq.com/plot/features/projections
-        projection: {
-          type: projection,
-          rotate: [
-            -100,
-            -20
-          ]
-        },
-        // projection: { type: 'equirectangular', rotate: [-140, -30] },
-        width,
-        height,
-        style: {
-          background: "transparent"
-        },
-        // TODO(burdon): Create simple wrapper for Plot with good defaults.
-        marks: [
-          Plot2.sphere({
-            fill: "lightblue",
-            fillOpacity: 0.5
-          }),
-          Plot2.geo(land, {
-            fill: "darkgreen",
-            fillOpacity: 0.5
-          }),
-          Plot2.graticule(),
-          Plot2.dot(items, {
-            x: createAdapter("lat", accessor),
-            y: createAdapter("lng", accessor),
-            ...options
-          })
+  const { ref: containerRef, width = 0, height = 0 } = useResizeDetector2({
+    refreshRate: 200
+  });
+  const land = topojson.feature(countries_110m_default, countries_110m_default.objects.land);
+  useEffect2(() => {
+    if (!width || !height) {
+      return;
+    }
+    const plot3 = Plot2.plot({
+      // https://observablehq.com/plot/features/projections
+      projection: {
+        type: projection,
+        rotate: [
+          -100,
+          -20
         ]
-      });
-      containerRef.current.append(plot3);
-      return () => plot3?.remove();
-    }, [
-      items,
+      },
+      // projection: { type: 'equirectangular', rotate: [-140, -30] },
       width,
-      height
-    ]);
-    return /* @__PURE__ */ React2.createElement("div", {
-      ref: containerRef,
-      className: "grow p-4"
+      height,
+      style: {
+        background: "transparent"
+      },
+      // TODO(burdon): Create simple wrapper for Plot with good defaults.
+      marks: [
+        Plot2.sphere({
+          fill: "lightblue",
+          fillOpacity: 0.5
+        }),
+        Plot2.geo(land, {
+          fill: "darkgreen",
+          fillOpacity: 0.5
+        }),
+        Plot2.graticule(),
+        Plot2.dot(items, {
+          x: createAdapter("lat", accessor),
+          y: createAdapter("lng", accessor),
+          ...options
+        })
+      ]
     });
-  } finally {
-    _effect.f();
+    containerRef.current.append(plot3);
+    return () => plot3?.remove();
+  }, [
+    items,
+    width,
+    height
+  ]);
+  return /* @__PURE__ */ React2.createElement("div", {
+    ref: containerRef,
+    className: "grow p-4"
+  });
+};
+
+// src/components/Graph/D3ForceGraph.tsx
+import React3, { useCallback, useEffect as useEffect3, useMemo, useRef } from "react";
+import { Obj } from "@dxos/echo";
+import { SelectionModel } from "@dxos/graph";
+import { GraphForceProjector, SVG } from "@dxos/react-ui-graph";
+import { getHashStyles } from "@dxos/ui-theme";
+import "@dxos/react-ui-graph/styles/graph.css";
+var D3ForceGraph = ({ classNames, model, selection: _selection, grid, drag, ...props }) => {
+  const context = useRef(null);
+  const projector = useMemo(() => {
+    if (context.current) {
+      return new GraphForceProjector(context.current, {
+        attributes: {
+          linkForce: (edge) => {
+            return edge.data?.object?.active !== false;
+          }
+        },
+        forces: {
+          point: {
+            strength: 0.01
+          }
+        }
+      });
+    }
+  }, [
+    context.current
+  ]);
+  const graph = useRef(null);
+  const selection = useMemo(() => _selection ?? new SelectionModel(), [
+    _selection
+  ]);
+  useEffect3(() => selection.subscribe(() => graph.current?.repaint()), [
+    selection
+  ]);
+  const handleSelect = useCallback((node) => {
+    if (selection.contains(node.id)) {
+      selection.remove(node.id);
+    } else {
+      selection.add(node.id);
+    }
+  }, [
+    selection
+  ]);
+  return /* @__PURE__ */ React3.createElement(SVG.Root, {
+    ref: context,
+    classNames,
+    ...props
+  }, /* @__PURE__ */ React3.createElement(SVG.Markers, null), grid && /* @__PURE__ */ React3.createElement(SVG.Grid, {
+    axis: true
+  }), /* @__PURE__ */ React3.createElement(SVG.Zoom, {
+    extent: [
+      1 / 2,
+      2
+    ]
+  }, /* @__PURE__ */ React3.createElement(SVG.Graph, {
+    drag,
+    ref: graph,
+    model,
+    projector,
+    labels: {
+      text: (node) => {
+        return node.data?.data.label ?? node.id;
+      }
+    },
+    attributes: {
+      node: (node) => {
+        const obj = node.data?.data.object;
+        return {
+          data: {
+            color: getHashStyles(obj && Obj.getTypename(obj))?.hue
+          },
+          classes: {
+            "dx-selected": selection.contains(node.id)
+          }
+        };
+      }
+    },
+    onSelect: handleSelect
+  })));
+};
+
+// src/components/Graph/ForceGraph.tsx
+import { forceLink, forceManyBody } from "d3";
+import NativeForceGraph from "force-graph";
+import React4, { useEffect as useEffect4, useRef as useRef2, useState } from "react";
+import { useResizeDetector as useResizeDetector3 } from "react-resize-detector";
+import { filterObjectsSync } from "@dxos/plugin-search";
+
+// src/components/Graph/adapter.ts
+var GraphAdapter = class {
+  graph;
+  _nodes = [];
+  _links = [];
+  constructor(graph) {
+    this.graph = graph;
+    this._nodes = graph.nodes.map((node) => ({
+      id: node.id,
+      type: node.type,
+      data: node.data
+    }));
+    const nodeIds = new Set(this._nodes.map((node) => node.id));
+    this._links = graph.edges.filter((edge) => nodeIds.has(edge.source) && nodeIds.has(edge.target)).map((edge) => ({
+      type: edge.type,
+      source: edge.source,
+      target: edge.target,
+      data: edge.data
+    }));
+  }
+  get nodes() {
+    return this._nodes;
+  }
+  get links() {
+    return this._links;
   }
 };
 
+// src/components/Graph/ForceGraph.tsx
+var ForceGraph = ({ model, match }) => {
+  const { ref, width, height } = useResizeDetector3({
+    refreshRate: 200
+  });
+  const rootRef = useRef2(null);
+  const forceGraph = useRef2(null);
+  const filteredRef = useRef2([]);
+  filteredRef.current = filterObjectsSync(model?.objects ?? [], match);
+  const [data, setData] = useState();
+  useEffect4(() => {
+    return model?.subscribe((model2) => {
+      setData(new GraphAdapter(model2.graph));
+    });
+  }, [
+    model
+  ]);
+  useEffect4(() => {
+    if (rootRef.current) {
+      forceGraph.current = new NativeForceGraph(rootRef.current).nodeRelSize(6).nodeLabel((node) => node.type === "schema" ? node.data.typename : node.data.label ?? node.id).nodeAutoColorBy((node) => node.type === "schema" ? "schema" : node.data.typename).linkAutoColorBy((link2) => link2.type);
+    }
+    return () => {
+      forceGraph.current?.pauseAnimation().graphData({
+        nodes: [],
+        links: []
+      });
+      forceGraph.current = null;
+    };
+  }, []);
+  useEffect4(() => {
+    if (!data || !width || !height || !forceGraph.current) {
+      return;
+    }
+    forceGraph.current.pauseAnimation().width(width).height(height).onEngineStop(() => {
+      handleZoomToFit();
+    }).onNodeClick((node) => {
+      forceGraph.current?.emitParticle(node);
+    }).d3Force("link", forceLink().distance(160).strength(0.5)).d3Force("charge", forceManyBody().strength(-30)).graphData(data).warmupTicks(100).cooldownTime(1e3).resumeAnimation();
+  }, [
+    data,
+    width,
+    height,
+    forceGraph.current
+  ]);
+  const handleZoomToFit = () => {
+    forceGraph.current?.zoomToFit(400, 40);
+  };
+  return /* @__PURE__ */ React4.createElement("div", {
+    ref,
+    className: "relative grow",
+    onClick: handleZoomToFit
+  }, /* @__PURE__ */ React4.createElement("div", {
+    ref: rootRef,
+    className: "absolute inset-0"
+  }));
+};
+
 // src/components/Tree/Tree.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
-import React3, { useEffect as useEffect3, useRef, useState } from "react";
+import { RegistryContext } from "@effect-atom/atom-react";
+import React5, { useContext, useEffect as useEffect5, useRef as useRef3, useState as useState2 } from "react";
 import { useAsyncState } from "@dxos/react-ui";
-import { SVG } from "@dxos/react-ui-graph";
+import { SVG as SVG2 } from "@dxos/react-ui-graph";
 import { SpaceGraphModel } from "@dxos/schema";
 
 // src/components/Tree/layout/HierarchicalEdgeBundling.ts
@@ -10974,22 +11135,9 @@ var TidyTree_default = TidyTree;
 
 // src/components/Tree/types/tree.ts
 import * as Schema from "effect/Schema";
-import { Key, Obj, Type } from "@dxos/echo";
+import { Key, Obj as Obj2, Ref, Type } from "@dxos/echo";
+import { TestSchema } from "@dxos/echo/testing";
 import { invariant } from "@dxos/invariant";
-function _define_property(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-explorer/src/components/Tree/types/tree.ts";
 var TreeNodeType = Schema.Struct({
   id: Key.ObjectId,
   children: Schema.mutable(Schema.Array(Key.ObjectId)),
@@ -10997,7 +11145,7 @@ var TreeNodeType = Schema.Struct({
     key: Schema.String,
     value: Schema.Any
   })),
-  ref: Schema.optional(Type.Ref(Type.Expando))
+  ref: Schema.optional(Ref.Ref(TestSchema.Expando))
 }).pipe(Schema.mutable);
 var TreeType = Schema.Struct({
   root: Key.ObjectId,
@@ -11005,248 +11153,10 @@ var TreeType = Schema.Struct({
     key: Key.ObjectId,
     value: TreeNodeType
   }))
-}).pipe(Type.Obj({
+}).pipe(Type.object({
   typename: "dxos.org/type/Tree",
   version: "0.1.0"
 }));
-var Tree = class _Tree {
-  get tree() {
-    return this._tree;
-  }
-  // TODO(burdon): Make reactive.
-  get size() {
-    return Object.keys(this._tree.nodes).length;
-  }
-  get root() {
-    return this.getNode(this._tree.root);
-  }
-  //
-  // Traversal
-  //
-  /**
-  * Recursively traverse the tree until the callback returns a value.
-  */
-  tranverse(callback, root = this._tree.root, depth = 0) {
-    const node = this._tree.nodes[root];
-    const result = callback(node, depth);
-    if (result !== void 0) {
-      return result;
-    }
-    for (const childId of node.children) {
-      const result2 = this.tranverse(callback, childId, depth + 1);
-      if (result2 !== void 0) {
-        return result2;
-      }
-    }
-  }
-  getNode(id) {
-    const node = this._tree.nodes[id];
-    invariant(node, void 0, {
-      F: __dxlog_file,
-      L: 98,
-      S: this,
-      A: [
-        "node",
-        ""
-      ]
-    });
-    return node;
-  }
-  /**
-  * Get the children of a node.
-  */
-  getChildNodes(node) {
-    return node.children.map((id) => this.getNode(id));
-  }
-  /**
-  * Get the parent of a node.
-  */
-  getParent(node) {
-    const parent = this.tranverse((n) => {
-      if (n.children.includes(node.id)) {
-        return n;
-      }
-    });
-    return parent ?? null;
-  }
-  /**
-  * Get the next node in the tree.
-  */
-  getNext(node, hierarchical = true) {
-    if (hierarchical && node.children.length) {
-      return this.getChildNodes(node)[0];
-    } else {
-      const parent = this.getParent(node);
-      if (parent) {
-        const idx = this.getChildNodes(parent).findIndex(({ id }) => id === node.id);
-        if (idx < parent.children.length - 1) {
-          return this.getNode(parent.children[idx + 1]);
-        } else {
-          return this.getNext(parent, false);
-        }
-      }
-    }
-  }
-  /**
-  * Get the previous node in the tree.
-  */
-  getPrevious(node, hierarchical = true) {
-    const parent = this.getParent(node);
-    const idx = this.getChildNodes(parent).findIndex(({ id }) => id === node.id);
-    if (idx === 0) {
-      if (hierarchical) {
-        return parent;
-      }
-    } else {
-      const previous = this.getNode(parent.children[idx - 1]);
-      if (hierarchical && previous.children.length) {
-        return this.getLastDescendent(previous);
-      }
-      return previous;
-    }
-  }
-  /**
-  * Get the last descendent of a node.
-  */
-  getLastDescendent(node) {
-    const children = this.getChildNodes(node);
-    const last = children.length ? children[children.length - 1] : void 0;
-    if (last) {
-      return this.getLastDescendent(last);
-    }
-    return node;
-  }
-  //
-  // Mutations
-  //
-  /**
-  * Clear tree.
-  */
-  clear() {
-    const root = this._tree.nodes[this._tree.root];
-    root.children.length = 0;
-    this._tree.nodes = {
-      [root.id]: root
-    };
-  }
-  /**
-  * Add node.
-  */
-  addNode(parent, node, index) {
-    if (!node) {
-      const id = Key.ObjectId.random();
-      node = {
-        id,
-        children: [],
-        data: {
-          text: ""
-        }
-      };
-    }
-    this._tree.nodes[node.id] = node;
-    parent.children.splice(index ?? parent.children.length, 0, node.id);
-    return node;
-  }
-  /**
-  * Delete node.
-  */
-  deleteNode(parent, id) {
-    const node = this._tree.nodes[id];
-    if (!node) {
-      return void 0;
-    }
-    delete this._tree.nodes[node.id];
-    const idx = parent.children.findIndex((child) => child === id);
-    if (idx !== -1) {
-      parent.children.splice(idx, 1);
-    }
-    return node;
-  }
-  /**
-  * Move child node.
-  */
-  moveNode(node, from, to) {
-    invariant(from >= 0 && from < node.children.length, void 0, {
-      F: __dxlog_file,
-      L: 228,
-      S: this,
-      A: [
-        "from >= 0 && from < node.children.length",
-        ""
-      ]
-    });
-    invariant(to >= 0 && to < node.children.length, void 0, {
-      F: __dxlog_file,
-      L: 229,
-      S: this,
-      A: [
-        "to >= 0 && to < node.children.length",
-        ""
-      ]
-    });
-    if (from === to) {
-      return null;
-    }
-    const child = node.children[from];
-    node.children.splice(from, 1);
-    node.children.splice(to, 0, child);
-    return this.getNode(child);
-  }
-  /**
-  * Indent node.
-  */
-  indentNode(node) {
-    const parent = this.getParent(node);
-    if (!parent) {
-      return;
-    }
-    const idx = parent.children.findIndex((child) => child === node.id);
-    if (idx < 1 || idx >= parent.children.length) {
-      return;
-    }
-    const previous = this.getNode(parent.children[idx - 1]);
-    parent.children.splice(idx, 1);
-    previous.children.push(node.id);
-  }
-  /**
-  * Unindent node.
-  */
-  unindentNode(node) {
-    const parent = this.getParent(node);
-    if (!parent) {
-      return;
-    }
-    const ancestor = this.getParent(parent);
-    if (!ancestor) {
-      return;
-    }
-    const nodeIdx = parent.children.findIndex((id) => id === node.id);
-    const [_, ...rest] = parent.children.splice(nodeIdx, parent.children.length - nodeIdx);
-    parent.children.splice(nodeIdx, parent.children.length - nodeIdx);
-    const parentIdx = this.getChildNodes(ancestor).findIndex((n) => n.id === parent.id);
-    ancestor.children.splice(parentIdx + 1, 0, node.id);
-    node.children.push(...rest);
-  }
-  constructor(tree3) {
-    _define_property(this, "_tree", void 0);
-    this._tree = tree3 ?? _Tree.create();
-  }
-};
-_define_property(Tree, "create", () => {
-  const id = Key.ObjectId.random();
-  return Obj.make(TreeType, {
-    root: id,
-    nodes: {
-      [id]: {
-        id,
-        children: [],
-        data: {
-          text: ""
-        }
-      }
-    }
-  });
-});
 
 // src/components/Tree/types/types.ts
 var mapGraphToTreeData = (model, maxDepth = 8) => {
@@ -11274,68 +11184,95 @@ var renderers = /* @__PURE__ */ new Map([
     HierarchicalEdgeBundling_default
   ]
 ]);
-var Tree2 = ({ space, selected, variant = "tidy", onNodeClick }) => {
-  var _effect = _useSignals3();
-  try {
-    const [model] = useAsyncState(async () => space ? new SpaceGraphModel().open(space) : void 0, [
-      space,
-      selected
-    ]);
-    const [tree3, setTree] = useState();
-    useEffect3(() => {
-      return model?.subscribe(() => {
-        const tree4 = mapGraphToTreeData(model);
-        setTree(tree4);
-      }, true);
-    }, [
-      model
-    ]);
-    const context = useRef(null);
-    useEffect3(() => {
-      if (context.current?.size) {
-        const { width, height } = context.current.size;
-        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.current.svg, tree3, options);
-        }
+var Tree = ({ space, selected, variant = "tidy", onNodeClick }) => {
+  const registry = useContext(RegistryContext);
+  const [model] = useAsyncState(async () => space ? new SpaceGraphModel(registry).open(space.db) : void 0, [
+    space,
+    selected,
+    registry
+  ]);
+  const [tree3, setTree] = useState2();
+  useEffect5(() => {
+    return model?.subscribe(() => {
+      const tree4 = mapGraphToTreeData(model);
+      setTree(tree4);
+    }, true);
+  }, [
+    model
+  ]);
+  const context = useRef3(null);
+  useEffect5(() => {
+    if (context.current?.size) {
+      const { width, height } = context.current.size;
+      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.current.svg, tree3, options);
       }
-    }, [
-      context.current,
-      tree3
-    ]);
-    return /* @__PURE__ */ React3.createElement("div", {
-      onClick: () => onNodeClick?.()
-    }, /* @__PURE__ */ React3.createElement(SVG.Root, {
-      ref: context
-    }));
-  } finally {
-    _effect.f();
-  }
+    }
+  }, [
+    context.current,
+    tree3
+  ]);
+  return /* @__PURE__ */ React5.createElement("div", {
+    className: "grow",
+    onClick: () => onNodeClick?.()
+  }, /* @__PURE__ */ React5.createElement(SVG2.Root, {
+    ref: context
+  }));
 };
 
-// src/components/index.ts
-import { lazy } from "react";
-var ExplorerContainer = lazy(() => import("./ExplorerContainer-S66JDOAF.mjs"));
+// src/hooks/useGraphModel.ts
+import { useEffect as useEffect6, useState as useState3 } from "react";
+import { Capabilities } from "@dxos/app-framework";
+import { useCapability } from "@dxos/app-framework/ui";
+import { SpaceGraphModel as SpaceGraphModel2 } from "@dxos/schema";
+var useGraphModel = (space, filter, options, queue) => {
+  const registry = useCapability(Capabilities.AtomRegistry);
+  const [model, setModel] = useState3(void 0);
+  useEffect6(() => {
+    if (!space) {
+      void model?.close();
+      setModel(void 0);
+      return;
+    }
+    if (!model || model.queue !== queue) {
+      const model2 = new SpaceGraphModel2(registry).setFilter(filter).setOptions(options);
+      void model2.open(space.db, queue);
+      setModel(model2);
+    } else {
+      model.setFilter(filter).setOptions(options);
+    }
+  }, [
+    space,
+    filter,
+    options,
+    queue,
+    registry
+  ]);
+  return model;
+};
 
 export {
   Chart,
   Globe,
+  D3ForceGraph,
+  ForceGraph,
   defaultTreeLayoutSlots,
-  Tree2 as Tree,
-  ExplorerContainer
+  Tree,
+  useGraphModel
 };
-//# sourceMappingURL=chunk-UCDNCIRV.mjs.map
+//# sourceMappingURL=chunk-6AZY4CDH.mjs.map