@dxos/plugin-explorer 0.8.4-main.1da679c → 0.8.4-main.21d9917

package/dist/lib/browser/ExplorerContainer-BFAWRIAJ.mjs

@@ -0,0 +1,45 @@
+import {
+  useGraphModel
+} from "./chunk-BZMTFAP3.mjs";
+import {
+  D3ForceGraph
+} from "./chunk-MGBT2ZFU.mjs";
+import "./chunk-J5LGTIGS.mjs";
+
+// src/components/ExplorerContainer.tsx
+import React, { useCallback, useMemo, useState } from "react";
+import { QueryBuilder } from "@dxos/echo-query";
+import { useGlobalSearch } from "@dxos/plugin-search";
+import { getSpace } from "@dxos/react-client/echo";
+import { Toolbar } from "@dxos/react-ui";
+import { QueryEditor } from "@dxos/react-ui-components";
+import { Layout } from "@dxos/react-ui-mosaic";
+var ExplorerContainer = ({ role, subject: view }) => {
+  const space = getSpace(view);
+  const [filter, setFilter] = useState();
+  const model = useGraphModel(space, filter);
+  const { match } = useGlobalSearch();
+  const builder = useMemo(() => new QueryBuilder(), []);
+  const handleChange = useCallback((value) => {
+    setFilter(builder.build(value).filter);
+  }, []);
+  const showToolbar = role === "article";
+  if (!space || !model) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Layout.Main, {
+    role,
+    toolbar: showToolbar
+  }, showToolbar && /* @__PURE__ */ React.createElement(Toolbar.Root, null, /* @__PURE__ */ React.createElement(QueryEditor, {
+    db: space.db,
+    onChange: handleChange
+  })), /* @__PURE__ */ React.createElement(D3ForceGraph, {
+    model,
+    match
+  }));
+};
+var ExplorerContainer_default = ExplorerContainer;
+export {
+  ExplorerContainer_default as default
+};
+//# sourceMappingURL=ExplorerContainer-BFAWRIAJ.mjs.map

package/dist/lib/browser/ExplorerContainer-BFAWRIAJ.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/ExplorerContainer.tsx"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useCallback, useMemo, useState } from 'react';\n\nimport { type SurfaceComponentProps } from '@dxos/app-framework/react';\nimport { type Filter } from '@dxos/echo';\nimport { QueryBuilder } from '@dxos/echo-query';\nimport { useGlobalSearch } from '@dxos/plugin-search';\nimport { getSpace } from '@dxos/react-client/echo';\nimport { Toolbar } from '@dxos/react-ui';\nimport { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';\nimport { Layout } from '@dxos/react-ui-mosaic';\nimport { type View } from '@dxos/schema';\n\nimport { useGraphModel } from '../hooks';\n\nimport { D3ForceGraph } from './Graph';\n\nexport type ExplorerContainerProps = SurfaceComponentProps<View.View>;\n\nconst ExplorerContainer = ({ role, subject: view }: ExplorerContainerProps) => {\n  const space = getSpace(view);\n  const [filter, setFilter] = useState<Filter.Any>();\n  const model = useGraphModel(space, filter);\n  const { match } = useGlobalSearch();\n\n  const builder = useMemo(() => new QueryBuilder(), []);\n  const handleChange = useCallback<NonNullable<QueryEditorProps['onChange']>>((value) => {\n    setFilter(builder.build(value).filter);\n  }, []);\n\n  const showToolbar = role === 'article';\n\n  if (!space || !model) {\n    return null;\n  }\n\n  return (\n    <Layout.Main role={role} toolbar={showToolbar}>\n      {showToolbar && (\n        <Toolbar.Root>\n          <QueryEditor db={space.db} onChange={handleChange} />\n        </Toolbar.Root>\n      )}\n      <D3ForceGraph model={model} match={match} />\n    </Layout.Main>\n  );\n};\n\nexport default ExplorerContainer;\n"],
+  "mappings": ";;;;;;;;;AAIA,OAAOA,SAASC,aAAaC,SAASC,gBAAgB;AAItD,SAASC,oBAAoB;AAC7B,SAASC,uBAAuB;AAChC,SAASC,gBAAgB;AACzB,SAASC,eAAe;AACxB,SAASC,mBAA0C;AACnD,SAASC,cAAc;AASvB,IAAMC,oBAAoB,CAAC,EAAEC,MAAMC,SAASC,KAAI,MAA0B;AACxE,QAAMC,QAAQC,SAASF,IAAAA;AACvB,QAAM,CAACG,QAAQC,SAAAA,IAAaC,SAAAA;AAC5B,QAAMC,QAAQC,cAAcN,OAAOE,MAAAA;AACnC,QAAM,EAAEK,MAAK,IAAKC,gBAAAA;AAElB,QAAMC,UAAUC,QAAQ,MAAM,IAAIC,aAAAA,GAAgB,CAAA,CAAE;AACpD,QAAMC,eAAeC,YAAuD,CAACC,UAAAA;AAC3EX,cAAUM,QAAQM,MAAMD,KAAAA,EAAOZ,MAAM;EACvC,GAAG,CAAA,CAAE;AAEL,QAAMc,cAAcnB,SAAS;AAE7B,MAAI,CAACG,SAAS,CAACK,OAAO;AACpB,WAAO;EACT;AAEA,SACE,sBAAA,cAACY,OAAOC,MAAI;IAACrB;IAAYsB,SAASH;KAC/BA,eACC,sBAAA,cAACI,QAAQC,MAAI,MACX,sBAAA,cAACC,aAAAA;IAAYC,IAAIvB,MAAMuB;IAAIC,UAAUZ;OAGzC,sBAAA,cAACa,cAAAA;IAAapB;IAAcE;;AAGlC;AAEA,IAAA,4BAAeX;",
+  "names": ["React", "useCallback", "useMemo", "useState", "QueryBuilder", "useGlobalSearch", "getSpace", "Toolbar", "QueryEditor", "Layout", "ExplorerContainer", "role", "subject", "view", "space", "getSpace", "filter", "setFilter", "useState", "model", "useGraphModel", "match", "useGlobalSearch", "builder", "useMemo", "QueryBuilder", "handleChange", "useCallback", "value", "build", "showToolbar", "Layout", "Main", "toolbar", "Toolbar", "Root", "QueryEditor", "db", "onChange", "D3ForceGraph"]
+}

package/dist/lib/browser/{chunk-VNOGW2JS.mjs → chunk-AGZAGILW.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,68 +10766,63 @@ 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/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 React3, { useContext, useEffect as useEffect3, useRef, useState } from "react";
 import { useAsyncState } from "@dxos/react-ui";
 import { SVG } from "@dxos/react-ui-graph";
 import { SpaceGraphModel } from "@dxos/schema";
@@ -10973,23 +10961,10 @@ var TidyTree = (s, data, options) => {
 var TidyTree_default = TidyTree;
 
 // src/components/Tree/types/tree.ts
-import { Schema } from "effect";
+import * as Schema from "effect/Schema";
 import { Key, Obj, 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 +10972,7 @@ var TreeNodeType = Schema.Struct({
     key: Schema.String,
     value: Schema.Any
   })),
-  ref: Schema.optional(Type.Ref(Type.Expando))
+  ref: Schema.optional(Type.Ref(TestSchema.Expando))
 }).pipe(Schema.mutable);
 var TreeType = Schema.Struct({
   root: Key.ObjectId,
@@ -11005,248 +10980,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 +11011,66 @@ 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) {
-        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] = 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);
       }
-    }, [
-      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__ */ React3.createElement("div", {
+    className: "grow",
+    onClick: () => onNodeClick?.()
+  }, /* @__PURE__ */ React3.createElement(SVG.Root, {
+    ref: context
+  }));
 };
 
 // src/components/index.ts
 import { lazy } from "react";
-var ExplorerContainer = lazy(() => import("./ExplorerContainer-7MTDS2TQ.mjs"));
+var ExplorerContainer = lazy(() => import("./ExplorerContainer-BFAWRIAJ.mjs"));
 
 export {
   Chart,
   Globe,
   defaultTreeLayoutSlots,
-  Tree2 as Tree,
+  Tree,
   ExplorerContainer
 };
-//# sourceMappingURL=chunk-VNOGW2JS.mjs.map
+//# sourceMappingURL=chunk-AGZAGILW.mjs.map