@dxos/plugin-explorer 0.8.4-main.9735255 → 0.8.4-main.abd8ff62ef

package/dist/lib/browser/{chunk-YNQF4CPY.mjs → chunk-HPIS2WXY.mjs}

@@ -1,7 +1,7 @@
 // src/meta.ts
 import { trim } from "@dxos/util";
 var meta = {
-  id: "dxos.org/plugin/explorer",
+  id: "org.dxos.plugin.explorer",
   name: "Explorer",
   description: trim`
     Interactive hypergraph visualization that reveals relationships between objects in your workspace.
@@ -21,4 +21,4 @@ var meta = {
 export {
   meta
 };
-//# sourceMappingURL=chunk-YNQF4CPY.mjs.map
+//# sourceMappingURL=chunk-HPIS2WXY.mjs.map

package/dist/lib/browser/{chunk-YNQF4CPY.mjs.map → chunk-HPIS2WXY.mjs.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Plugin } from '@dxos/app-framework';\nimport { trim } from '@dxos/util';\n\nexport const meta: Plugin.Meta = {\n  id: 'dxos.org/plugin/explorer',\n  name: 'Explorer',\n  description: trim`\n    Interactive hypergraph visualization that reveals relationships between objects in your workspace.\n    Navigate complex data structures and discover connections through a dynamic network view.\n  `,\n  icon: 'ph--graph--regular',\n  iconHue: 'green',\n  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-explorer',\n  tags: ['labs'],\n  screenshots: ['https://dxos.network/plugin-details-explorer-dark.png'],\n};\n"],
-  "mappings": ";AAKA,SAASA,YAAY;AAEd,IAAMC,OAAoB;EAC/BC,IAAI;EACJC,MAAM;EACNC,aAAaC;;;;EAIbC,MAAM;EACNC,SAAS;EACTC,QAAQ;EACRC,MAAM;IAAC;;EACPC,aAAa;IAAC;;AAChB;",
-  "names": ["trim", "meta", "id", "name", "description", "trim", "icon", "iconHue", "source", "tags", "screenshots"]
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Plugin } from '@dxos/app-framework';\nimport { trim } from '@dxos/util';\n\nexport const meta: Plugin.Meta = {\n  id: 'org.dxos.plugin.explorer',\n  name: 'Explorer',\n  description: trim`\n    Interactive hypergraph visualization that reveals relationships between objects in your workspace.\n    Navigate complex data structures and discover connections through a dynamic network view.\n  `,\n  icon: 'ph--graph--regular',\n  iconHue: 'green',\n  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-explorer',\n  tags: ['labs'],\n  screenshots: ['https://dxos.network/plugin-details-explorer-dark.png'],\n};\n"],
+  "mappings": ";AAKA,SAASA,YAAY;AAEd,IAAMC,OAAoB;EAC/BC,IAAI;EACJC,MAAM;EACNC,aAAaJ;;;;EAIbK,MAAM;EACNC,SAAS;EACTC,QAAQ;EACRC,MAAM;IAAC;;EACPC,aAAa;IAAC;;AAChB;",
+  "names": ["trim", "meta", "id", "name", "description", "icon", "iconHue", "source", "tags", "screenshots"]
 }

package/dist/lib/{node-esm/chunk-QLMTN2XI.mjs → browser/components/index.mjs}

@@ -1,4 +1,4 @@
-import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+import "../chunk-J5LGTIGS.mjs";
 
 // src/components/Chart/Chart.tsx
 import * as Plot from "@observablehq/plot";
@@ -10822,11 +10822,191 @@ var Globe = ({ items = [], accessor, projection = "orthographic", options = defa
   });
 };
 
+// src/components/Graph/D3ForceGraph.tsx
+import { Atom, useAtomValue } from "@effect-atom/atom-react";
+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 { composable, composableProps, getHashStyles } from "@dxos/ui-theme";
+import "@dxos/react-ui-graph/styles/graph.css";
+var EMPTY_ATOM = Atom.make({
+  nodes: [],
+  edges: []
+});
+var D3ForceGraph = composable(({ model, selection: _selection, grid, drag, ...props }, forwardedRef) => {
+  useAtomValue(model?.graphAtom ?? EMPTY_ATOM);
+  const svgRef = useRef(null);
+  const projector = useMemo(() => {
+    if (svgRef.current) {
+      return new GraphForceProjector(svgRef.current, {
+        attributes: {
+          linkForce: (edge) => {
+            return edge.data?.object?.active !== false;
+          }
+        },
+        forces: {
+          point: {
+            strength: 0.01
+          }
+        }
+      });
+    }
+  }, []);
+  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("div", {
+    ...composableProps(props, {
+      classNames: "dx-container"
+    }),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React3.createElement(SVG.Root, {
+    ref: svgRef
+  }, /* @__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 { RegistryContext } from "@effect-atom/atom-react";
-import React3, { useContext, useEffect as useEffect3, useRef, useState } from "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
@@ -10964,7 +11144,7 @@ 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";
 var TreeNodeType = Schema.Struct({
@@ -10974,7 +11154,7 @@ var TreeNodeType = Schema.Struct({
     key: Schema.String,
     value: Schema.Any
   })),
-  ref: Schema.optional(Type.Ref(TestSchema.Expando))
+  ref: Schema.optional(Ref.Ref(TestSchema.Expando))
 }).pipe(Schema.mutable);
 var TreeType = Schema.Struct({
   root: Key.ObjectId,
@@ -10983,7 +11163,7 @@ var TreeType = Schema.Struct({
     value: TreeNodeType
   }))
 }).pipe(Type.object({
-  typename: "dxos.org/type/Tree",
+  typename: "org.dxos.type.tree",
   version: "0.1.0"
 }));
 
@@ -11020,8 +11200,8 @@ var Tree = ({ space, selected, variant = "tidy", onNodeClick }) => {
     selected,
     registry
   ]);
-  const [tree3, setTree] = useState();
-  useEffect3(() => {
+  const [tree3, setTree] = useState2();
+  useEffect5(() => {
     return model?.subscribe(() => {
       const tree4 = mapGraphToTreeData(model);
       setTree(tree4);
@@ -11029,8 +11209,8 @@ var Tree = ({ space, selected, variant = "tidy", onNodeClick }) => {
   }, [
     model
   ]);
-  const context = useRef(null);
-  useEffect3(() => {
+  const context = useRef3(null);
+  useEffect5(() => {
     if (context.current?.size) {
       const { width, height } = context.current.size;
       const size = Math.min(width, height);
@@ -11056,23 +11236,19 @@ var Tree = ({ space, selected, variant = "tidy", onNodeClick }) => {
     context.current,
     tree3
   ]);
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React5.createElement("div", {
     className: "grow",
     onClick: () => onNodeClick?.()
-  }, /* @__PURE__ */ React3.createElement(SVG.Root, {
+  }, /* @__PURE__ */ React5.createElement(SVG2.Root, {
     ref: context
   }));
 };
-
-// src/components/index.ts
-import { lazy } from "react";
-var ExplorerContainer = lazy(() => import("./ExplorerContainer-YQ2KKBVS.mjs"));
-
 export {
   Chart,
+  D3ForceGraph,
+  ForceGraph,
   Globe,
-  defaultTreeLayoutSlots,
   Tree,
-  ExplorerContainer
+  defaultTreeLayoutSlots
 };
-//# sourceMappingURL=chunk-QLMTN2XI.mjs.map
+//# sourceMappingURL=index.mjs.map