@dxos/plugin-explorer 0.8.4-main.2e9d522 → 0.8.4-main.406dc2a

package/src/components/Graph/ForceGraph.stories.tsx

@@ -2,24 +2,24 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
 
-import { type Meta } from '@storybook/react-vite';
-import React, { useEffect, useState } from 'react';
-
-import { Obj } from '@dxos/echo';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
+import { useAsyncEffect } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
 import { DataType } from '@dxos/schema';
 import { type ValueGenerator } from '@dxos/schema/testing';
-import { withLayout, withTheme, render } from '@dxos/storybook-utils';
+import { render } from '@dxos/storybook-utils';
+
+import { useGraphModel } from '../../hooks';
+import { Graph } from '../../types';
 
 import { ForceGraph } from './ForceGraph';
 import { generate } from './testing';
-import { useGraphModel } from '../../hooks';
-import { ViewType } from '../../types';
 
 const generator = faker as any as ValueGenerator;
 
@@ -28,11 +28,13 @@ faker.seed(1);
 const DefaultStory = () => {
   const client = useClient();
   const [space, setSpace] = useState<Space>();
-  const [view, setView] = useState<ViewType>();
-  useEffect(() => {
+  const [view, setView] = useState<DataType.View>();
+
+  useAsyncEffect(async () => {
     const space = client.spaces.default;
     void generate(space, generator);
-    const view = space.db.add(Obj.make(ViewType, { name: '', type: '' }));
+    const { view } = await Graph.makeView({ client, space, name: 'Test', typename: Graph.Graph.typename });
+    space.db.add(view);
     setSpace(space);
     setView(view);
   }, []);
@@ -45,20 +47,31 @@ const DefaultStory = () => {
   return <ForceGraph model={model} />;
 };
 
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-explorer/ForceGraph',
   component: ForceGraph,
   render: render(DefaultStory),
   decorators: [
+    withTheme,
     withClientProvider({
       createSpace: true,
-      types: [ViewType, DataType.HasRelationship, DataType.Organization, DataType.Project, DataType.Person],
+      types: [
+        Graph.Graph,
+        DataType.View,
+        DataType.HasRelationship,
+        DataType.Organization,
+        DataType.Project,
+        DataType.Person,
+      ],
     }),
-    withTheme,
-    withLayout({ fullscreen: true }),
   ],
-};
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof ForceGraph>;
 
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Graph/ForceGraph.tsx

@@ -7,7 +7,7 @@ import NativeForceGraph from 'force-graph';
 import React, { type FC, useEffect, useRef, useState } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
-import { filterObjectsSync, type SearchResult } from '@dxos/plugin-search';
+import { type SearchResult, filterObjectsSync } from '@dxos/plugin-search';
 import { type SpaceGraphModel } from '@dxos/schema';
 
 import { GraphAdapter } from './adapter';
@@ -20,9 +20,9 @@ export type ForceGraphProps = {
 export const ForceGraph: FC<ForceGraphProps> = ({ model, match }) => {
   const { ref, width, height } = useResizeDetector({ refreshRate: 200 });
   const rootRef = useRef<HTMLDivElement>(null);
-  const forceGraph = useRef<NativeForceGraph>();
+  const forceGraph = useRef<NativeForceGraph>(null);
 
-  const filteredRef = useRef<SearchResult[]>();
+  const filteredRef = useRef<SearchResult[]>([]);
   filteredRef.current = filterObjectsSync(model?.objects ?? [], match);
 
   const [data, setData] = useState<GraphAdapter>();
@@ -48,7 +48,7 @@ export const ForceGraph: FC<ForceGraphProps> = ({ model, match }) => {
 
     return () => {
       forceGraph.current?.pauseAnimation().graphData({ nodes: [], links: [] });
-      forceGraph.current = undefined;
+      forceGraph.current = null;
     };
   }, []);
 

package/src/components/Graph/testing.ts

@@ -3,9 +3,9 @@
 //
 
 import { type Space } from '@dxos/client/echo';
-import { Query, Relation, type Obj } from '@dxos/echo';
+import { type Obj, Query, Relation } from '@dxos/echo';
 import { DataType } from '@dxos/schema';
-import { createObjectFactory, type ValueGenerator, type TypeSpec } from '@dxos/schema/testing';
+import { type TypeSpec, type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
 import { range } from '@dxos/util';
 
 const getObject = (objects: Obj.Any[]) => objects[Math.floor(Math.random() * objects.length)];

package/src/components/Tree/Tree.stories.tsx

@@ -2,25 +2,25 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
-import React, { type FC, useEffect, useState } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useEffect, useState } from 'react';
 
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
 import { type ClientRepeatedComponentProps, ClientRepeater } from '@dxos/react-client/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { Tree, type TreeComponentProps } from './Tree';
-import { TreeType, Tree as TreeModel } from './types';
+import { Tree as TreeModel, TreeType } from './types';
 
 // TODO(burdon): Storybook for Graph/Tree/Plot (generics); incl. GraphModel.
 // TODO(burdon): Type for all Explorer components (Space, Object, Query, etc.) incl.
 
 faker.seed(1);
 
-const Story: FC<ClientRepeatedComponentProps & { type?: TreeComponentProps<any>['variant'] }> = ({ type }) => {
+type ComponentProps = ClientRepeatedComponentProps & { type?: TreeComponentProps<any>['variant'] };
+
+const Component = ({ type }: ComponentProps) => {
   const client = useClient();
   const space = client.spaces.default;
   const [object, setObject] = useState<TreeType>();
@@ -38,32 +38,38 @@ const Story: FC<ClientRepeatedComponentProps & { type?: TreeComponentProps<any>[
   return <Tree space={space} selected={object?.id} variant={type} />;
 };
 
-export const Tidy = {
+const DefaultStory = () => {
+  return <ClientRepeater component={Component} types={[TreeType]} createSpace />;
+};
+
+const meta = {
+  title: 'plugins/plugin-explorer/Tree',
+  component: Tree as any,
+  render: DefaultStory,
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Tidy: Story = {
   args: {
     type: 'tidy',
   },
 };
 
-export const Radial = {
+export const Radial: Story = {
   args: {
     type: 'radial',
   },
 };
 
-export const Edge = {
+export const Edge: Story = {
   args: {
     type: 'edge',
   },
 };
-
-const meta: Meta = {
-  title: 'plugins/plugin-explorer/Tree',
-  component: Tree,
-  render: () => <ClientRepeater component={Story} types={[TreeType]} createSpace />,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;

package/src/components/Tree/Tree.tsx

@@ -10,7 +10,7 @@ import { SVG, type SVGContext } from '@dxos/react-ui-graph';
 import { SpaceGraphModel } from '@dxos/schema';
 
 import { HierarchicalEdgeBundling, RadialTree, TidyTree } from './layout';
-import { mapGraphToTreeData, type TreeNode } from './types';
+import { type TreeNode, mapGraphToTreeData } from './types';
 
 // TODO(burdon): Create dge bundling graph using d3.hierarchy.
 // https://observablehq.com/@d3/hierarchical-edge-bundling?intent=fork
@@ -75,8 +75,8 @@ export const Tree = <N,>({ space, selected, variant = 'tidy', onNodeClick }: Tre
   const context = useRef<SVGContext>(null);
 
   useEffect(() => {
-    if (context.current) {
-      const { width, height } = context.current.size!;
+    if (context.current?.size) {
+      const { width, height } = context.current.size;
       const size = Math.min(width, height);
       const radius = size * 0.4;
       const options = {

package/src/components/Tree/types/tree.test.ts

@@ -8,9 +8,10 @@ import { Obj, Ref } from '@dxos/echo';
 import { faker } from '@dxos/random';
 import { DataType } from '@dxos/schema';
 
-import { type Tree } from './tree';
 import { createTree } from '../testing';
 
+import { type Tree } from './tree';
+
 faker.seed(0);
 
 const print = (tree: Tree) => {

package/src/components/Tree/types/tree.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
 import { Key, Obj, Type } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';

package/src/hooks/useGraphModel.ts

@@ -4,7 +4,7 @@
 
 import { useEffect, useState } from 'react';
 
-import { type Filter, type Space } from '@dxos/client/echo';
+import { type Filter, type Queue, type Space } from '@dxos/client/echo';
 import { SpaceGraphModel, type SpaceGraphModelOptions } from '@dxos/schema';
 
 // TODO(burdon): Factor out.
@@ -12,6 +12,7 @@ export const useGraphModel = (
   space: Space | undefined,
   filter?: Filter.Any | undefined,
   options?: SpaceGraphModelOptions,
+  queue?: Queue,
 ): SpaceGraphModel | undefined => {
   const [model, setModel] = useState<SpaceGraphModel | undefined>(undefined);
   useEffect(() => {
@@ -22,14 +23,14 @@ export const useGraphModel = (
     }
 
     // TODO(burdon): Does this need to be a dependency?
-    if (!model) {
+    if (!model || model.queue !== queue) {
       const model = new SpaceGraphModel().setFilter(filter).setOptions(options);
-      void model.open(space);
+      void model.open(space, queue);
       setModel(model);
     } else {
       model.setFilter(filter).setOptions(options);
     }
-  }, [space, filter, options]);
+  }, [space, filter, options, queue]);
 
   return model;
 };

package/src/meta.ts

@@ -4,10 +4,8 @@
 
 import { type PluginMeta } from '@dxos/app-framework';
 
-export const EXPLORER_PLUGIN = 'dxos.org/plugin/explorer';
-
 export const meta: PluginMeta = {
-  id: EXPLORER_PLUGIN,
+  id: 'dxos.org/plugin/explorer',
   name: 'Explorer',
   description: 'Install this plugin to view a hypergraph of all objects inside of your Space.',
   icon: 'ph--graph--regular',

package/src/translations.ts

@@ -3,14 +3,15 @@
 //
 
 import { type Resource } from '@dxos/react-ui';
+import { translations as componentsTranslations } from '@dxos/react-ui-components';
 
 import { meta } from './meta';
-import { ViewType } from './types';
+import { Graph } from './types';
 
 export const translations = [
   {
     'en-US': {
-      [ViewType.typename]: {
+      [Graph.Graph.typename]: {
         'typename label': 'Explorer',
         'typename label_zero': 'Explorers',
         'typename label_one': 'Explorer',
@@ -25,4 +26,5 @@ export const translations = [
       },
     },
   },
+  ...componentsTranslations,
 ] as const satisfies Resource[];

package/src/types/ExplorerAction.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { SpaceSchema } from '@dxos/react-client/echo';
+import { DataType, TypenameAnnotationId } from '@dxos/schema';
+
+import { meta } from '../meta';
+
+const EXPLORER_ACTION = `${meta.id}/action`;
+
+export const GraphProps = Schema.Struct({
+  name: Schema.optional(Schema.String),
+  typename: Schema.String.annotations({
+    [TypenameAnnotationId]: ['used-static', 'dynamic'],
+    title: 'Select graph record type',
+  }),
+});
+
+export class CreateGraph extends Schema.TaggedClass<CreateGraph>()(`${EXPLORER_ACTION}/create-graph`, {
+  input: Schema.Struct({
+    space: SpaceSchema,
+  }).pipe(Schema.extend(GraphProps)),
+  output: Schema.Struct({
+    object: DataType.View,
+  }),
+}) {}

package/src/types/Graph.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { Filter, Obj, Query, QueryAST, Type } from '@dxos/echo';
+import { LabelAnnotation, ViewAnnotation } from '@dxos/echo/internal';
+import { type CreateViewFromSpaceProps, createViewFromSpace } from '@dxos/schema';
+
+export const Graph = Schema.Struct({
+  name: Schema.optional(Schema.String),
+  query: Schema.Struct({
+    raw: Schema.optional(Schema.String),
+    ast: QueryAST.Query,
+  }).pipe(Schema.mutable),
+}).pipe(
+  Type.Obj({
+    typename: 'dxos.org/type/Graph',
+    version: '0.1.0',
+  }),
+  LabelAnnotation.set(['name']),
+  ViewAnnotation.set(true),
+);
+
+export type Graph = Schema.Schema.Type<typeof Graph>;
+
+/**
+ * Make a graph object.
+ */
+export const make = (
+  props: Obj.MakeProps<typeof Graph> = { query: { raw: '', ast: Query.select(Filter.nothing()).ast } },
+) => Obj.make(Graph, props);
+
+type MakeViewProps = Omit<CreateViewFromSpaceProps, 'presentation'> & {
+  presentation?: Omit<Obj.MakeProps<typeof Graph>, 'name'>;
+};
+
+/**
+ * Make a graph as a view of a data set.
+ */
+export const makeView = async ({ presentation, ...props }: MakeViewProps) => {
+  const graph = make(presentation);
+  return createViewFromSpace({ ...props, presentation: graph });
+};

package/src/types/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './schema';
-export * from './types';
+export * as ExplorerAction from './ExplorerAction';
+export * as Graph from './Graph';

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

@@ -1,37 +0,0 @@
-import {
-  useGraphModel
-} from "./chunk-OAOY7SHY.mjs";
-import {
-  D3ForceGraph
-} from "./chunk-J2BBZOSF.mjs";
-
-// src/components/ExplorerContainer.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import React from "react";
-import { useGlobalSearch } from "@dxos/plugin-search";
-import { getSpace } from "@dxos/react-client/echo";
-import { StackItem } from "@dxos/react-ui-stack";
-var ExplorerContainer = ({ role, view }) => {
-  var _effect = _useSignals();
-  try {
-    const space = getSpace(view);
-    const model = useGraphModel(space);
-    const { match } = useGlobalSearch();
-    if (!space || !model) {
-      return null;
-    }
-    return /* @__PURE__ */ React.createElement(StackItem.Content, {
-      size: role === "section" ? "square" : "intrinsic"
-    }, /* @__PURE__ */ React.createElement(D3ForceGraph, {
-      model,
-      match
-    }));
-  } finally {
-    _effect.f();
-  }
-};
-var ExplorerContainer_default = ExplorerContainer;
-export {
-  ExplorerContainer_default as default
-};
-//# sourceMappingURL=ExplorerContainer-OGHSHZD5.mjs.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/ExplorerContainer.tsx"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React from 'react';\n\nimport { useGlobalSearch } from '@dxos/plugin-search';\nimport { getSpace } from '@dxos/react-client/echo';\nimport { StackItem } from '@dxos/react-ui-stack';\n\nimport { D3ForceGraph } from './Graph';\nimport { useGraphModel } from '../hooks';\nimport { type ViewType } from '../types';\n\ntype ExplorerContainerProps = {\n  role: string;\n  view: ViewType;\n};\n\nconst ExplorerContainer = ({ role, view }: ExplorerContainerProps) => {\n  const space = getSpace(view);\n  const model = useGraphModel(space);\n  const { match } = useGlobalSearch();\n\n  if (!space || !model) {\n    return null;\n  }\n\n  return (\n    <StackItem.Content size={role === 'section' ? 'square' : 'intrinsic'}>\n      <D3ForceGraph model={model} match={match} />\n    </StackItem.Content>\n  );\n};\n\nexport default ExplorerContainer;\n"],
-  "mappings": ";;;;;;;;;AAIA,OAAOA,WAAW;AAElB,SAASC,uBAAuB;AAChC,SAASC,gBAAgB;AACzB,SAASC,iBAAiB;AAW1B,IAAMC,oBAAoB,CAAC,EAAEC,MAAMC,KAAI,MAA0B;;;AAC/D,UAAMC,QAAQC,SAASF,IAAAA;AACvB,UAAMG,QAAQC,cAAcH,KAAAA;AAC5B,UAAM,EAAEI,MAAK,IAAKC,gBAAAA;AAElB,QAAI,CAACL,SAAS,CAACE,OAAO;AACpB,aAAO;IACT;AAEA,WACE,sBAAA,cAACI,UAAUC,SAAO;MAACC,MAAMV,SAAS,YAAY,WAAW;OACvD,sBAAA,cAACW,cAAAA;MAAaP;MAAcE;;;;;AAGlC;AAEA,IAAA,4BAAeP;",
-  "names": ["React", "useGlobalSearch", "getSpace", "StackItem", "ExplorerContainer", "role", "view", "space", "getSpace", "model", "useGraphModel", "match", "useGlobalSearch", "StackItem", "Content", "size", "D3ForceGraph"]
-}

package/dist/lib/browser/chunk-EF4BFHTI.mjs

@@ -1,38 +0,0 @@
-import {
-  EXPLORER_PLUGIN
-} from "./chunk-UL5EDJPE.mjs";
-
-// src/types/schema.ts
-import { Schema } from "effect";
-import { TypedObject } from "@dxos/echo-schema";
-var ViewType = class extends TypedObject({
-  typename: "dxos.org/type/ExplorerView",
-  version: "0.1.0"
-})({
-  name: Schema.optional(Schema.String),
-  type: Schema.String
-}) {
-};
-
-// src/types/types.ts
-import { Schema as Schema2 } from "effect";
-(function(ExplorerAction2) {
-  const EXPLORER_ACTION = `${EXPLORER_PLUGIN}/action`;
-  class Create extends Schema2.TaggedClass()(`${EXPLORER_ACTION}/create`, {
-    input: Schema2.Struct({
-      name: Schema2.optional(Schema2.String)
-    }),
-    output: Schema2.Struct({
-      object: ViewType
-    })
-  }) {
-  }
-  ExplorerAction2.Create = Create;
-})(ExplorerAction || (ExplorerAction = {}));
-var ExplorerAction;
-
-export {
-  ViewType,
-  ExplorerAction
-};
-//# sourceMappingURL=chunk-EF4BFHTI.mjs.map

package/dist/lib/browser/chunk-EF4BFHTI.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/schema.ts", "../../../src/types/types.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { Schema } from 'effect';\n\nimport { TypedObject } from '@dxos/echo-schema';\n\n// TODO(burdon): Clashes with sdk/view.\nexport class ViewType extends TypedObject({\n  typename: 'dxos.org/type/ExplorerView',\n  version: '0.1.0',\n})({\n  name: Schema.optional(Schema.String),\n  type: Schema.String,\n}) {}\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { Schema } from 'effect';\n\nimport { ViewType } from './schema';\nimport { EXPLORER_PLUGIN } from '../meta';\n\nexport namespace ExplorerAction {\n  const EXPLORER_ACTION = `${EXPLORER_PLUGIN}/action`;\n\n  export class Create extends Schema.TaggedClass<Create>()(`${EXPLORER_ACTION}/create`, {\n    input: Schema.Struct({\n      name: Schema.optional(Schema.String),\n    }),\n    output: Schema.Struct({\n      object: ViewType,\n    }),\n  }) {}\n}\n"],
-  "mappings": ";;;;;AAIA,SAASA,cAAc;AAEvB,SAASC,mBAAmB;AAGrB,IAAMC,WAAN,cAAuBC,YAAY;EACxCC,UAAU;EACVC,SAAS;AACX,CAAA,EAAG;EACDC,MAAMC,OAAOC,SAASD,OAAOE,MAAM;EACnCC,MAAMH,OAAOE;AACf,CAAA,EAAA;AAAI;;;ACXJ,SAASE,UAAAA,eAAc;UAKNC,iBAAAA;AACf,QAAMC,kBAAkB,GAAGC,eAAAA;EAEpB,MAAMC,eAAeC,QAAOC,YAAW,EAAW,GAAGJ,eAAAA,WAA0B;IACpFK,OAAOF,QAAOG,OAAO;MACnBC,MAAMJ,QAAOK,SAASL,QAAOM,MAAM;IACrC,CAAA;IACAC,QAAQP,QAAOG,OAAO;MACpBK,QAAQC;IACV,CAAA;EACF,CAAA,EAAA;EAAI;kBAPSV,SAAAA;AAQf,GAXiBH,mBAAAA,iBAAAA,CAAAA,EAAAA;;",
-  "names": ["Schema", "TypedObject", "ViewType", "TypedObject", "typename", "version", "name", "Schema", "optional", "String", "type", "Schema", "ExplorerAction", "EXPLORER_ACTION", "EXPLORER_PLUGIN", "Create", "Schema", "TaggedClass", "input", "Struct", "name", "optional", "String", "output", "object", "ViewType"]
-}

package/dist/lib/browser/chunk-J2BBZOSF.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/Graph/D3ForceGraph.tsx", "../../../src/components/Graph/ForceGraph.tsx", "../../../src/components/Graph/adapter.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type FC, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport { Obj } from '@dxos/echo';\nimport { SelectionModel } from '@dxos/graph';\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport {\n  type GraphController,\n  GraphForceProjector,\n  type GraphLayoutNode,\n  type GraphProps,\n  SVG,\n  type SVGContext,\n} from '@dxos/react-ui-graph';\nimport { getHashColor } from '@dxos/react-ui-theme';\nimport { type SpaceGraphNode, type SpaceGraphModel, type SpaceGraphEdge } from '@dxos/schema';\n\nimport '@dxos/react-ui-graph/styles/graph.css';\n\nexport type D3ForceGraphProps = ThemedClassName<\n  {\n    model?: SpaceGraphModel;\n    match?: RegExp;\n    selection?: SelectionModel;\n    grid?: boolean;\n  } & Pick<GraphProps, 'drag'>\n>;\n\nexport const D3ForceGraph: FC<D3ForceGraphProps> = ({ classNames, model, selection: _selection, grid, ...props }) => {\n  const context = useRef<SVGContext>(null);\n  const projector = useMemo<GraphForceProjector | undefined>(() => {\n    if (context.current) {\n      return new GraphForceProjector(context.current, {\n        attributes: {\n          linkForce: (edge) => {\n            // TODO(burdon): Check type (currently assumes Employee property).\n            // Edge shouldn't contribute to force if it's not active.\n            return edge.data?.object?.active !== false;\n          },\n        },\n        forces: {\n          point: {\n            strength: 0.01,\n          },\n        },\n      });\n    }\n  }, [context.current]);\n\n  const graph = useRef<GraphController>(null);\n  const selection = useMemo(() => _selection ?? new SelectionModel(), [_selection]);\n  useEffect(() => graph.current?.repaint(), [selection.selected.value]);\n\n  const handleSelect = useCallback<NonNullable<GraphProps['onSelect']>>(\n    (node) => {\n      if (selection.contains(node.id)) {\n        selection.remove(node.id);\n      } else {\n        selection.add(node.id);\n      }\n    },\n    [selection],\n  );\n\n  return (\n    <SVG.Root ref={context} classNames={classNames}>\n      <SVG.Markers />\n      {grid && <SVG.Grid axis />}\n      <SVG.Zoom extent={[1 / 2, 2]}>\n        <SVG.Graph<SpaceGraphNode, SpaceGraphEdge>\n          {...props}\n          ref={graph}\n          model={model}\n          projector={projector}\n          labels={{\n            text: (node) => {\n              return node.data?.data.label ?? node.id;\n            },\n          }}\n          attributes={{\n            node: (node: GraphLayoutNode<SpaceGraphNode>) => {\n              const obj = node.data?.data.object;\n              return {\n                data: {\n                  color: getHashColor(obj && Obj.getTypename(obj))?.color,\n                },\n                classes: {\n                  'dx-selected': selection.contains(node.id),\n                },\n              };\n            },\n          }}\n          onSelect={handleSelect}\n        />\n      </SVG.Zoom>\n    </SVG.Root>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { forceLink, forceManyBody } from 'd3';\nimport NativeForceGraph from 'force-graph';\nimport React, { type FC, useEffect, useRef, useState } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { filterObjectsSync, type SearchResult } from '@dxos/plugin-search';\nimport { type SpaceGraphModel } from '@dxos/schema';\n\nimport { GraphAdapter } from './adapter';\n\nexport type ForceGraphProps = {\n  model?: SpaceGraphModel;\n  match?: RegExp;\n};\n\nexport const ForceGraph: FC<ForceGraphProps> = ({ model, match }) => {\n  const { ref, width, height } = useResizeDetector({ refreshRate: 200 });\n  const rootRef = useRef<HTMLDivElement>(null);\n  const forceGraph = useRef<NativeForceGraph>();\n\n  const filteredRef = useRef<SearchResult[]>();\n  filteredRef.current = filterObjectsSync(model?.objects ?? [], match);\n\n  const [data, setData] = useState<GraphAdapter>();\n  useEffect(() => {\n    return model?.subscribe((model) => {\n      setData(new GraphAdapter(model.graph));\n    });\n  }, [model]);\n\n  useEffect(() => {\n    if (rootRef.current) {\n      // https://github.com/vasturiano/force-graph\n      // https://github.com/vasturiano/3d-force-graph\n      forceGraph.current = new NativeForceGraph(rootRef.current)\n        // https://github.com/vasturiano/force-graph?tab=readme-ov-file#node-styling\n        .nodeRelSize(6)\n        .nodeLabel((node: any) => (node.type === 'schema' ? node.data.typename : (node.data.label ?? node.id)))\n        .nodeAutoColorBy((node: any) => (node.type === 'schema' ? 'schema' : node.data.typename))\n\n        // https://github.com/vasturiano/force-graph?tab=readme-ov-file#link-styling\n        .linkAutoColorBy((link: any) => link.type);\n    }\n\n    return () => {\n      forceGraph.current?.pauseAnimation().graphData({ nodes: [], links: [] });\n      forceGraph.current = undefined;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!data || !width || !height || !forceGraph.current) {\n      return;\n    }\n\n    // https://github.com/vasturiano/force-graph?tab=readme-ov-file#container-layout\n    forceGraph.current\n      .pauseAnimation()\n      .width(width)\n      .height(height)\n      .onEngineStop(() => {\n        handleZoomToFit();\n      })\n      .onNodeClick((node: any) => {\n        forceGraph.current?.emitParticle(node);\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\n      .graphData(data)\n      .warmupTicks(100)\n      .cooldownTime(1_000)\n      .resumeAnimation();\n  }, [data, width, height, forceGraph.current]);\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", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Graph } from '@dxos/graph';\n\nexport type GraphNode = {\n  id?: string;\n};\n\nexport type GraphLink = {\n  source?: string;\n  target?: string;\n};\n\nexport type GraphData = {\n  nodes: GraphNode[];\n  links: GraphLink[];\n};\n\n/**\n * Map common graph to force-graph format.\n */\nexport class GraphAdapter implements GraphData {\n  private readonly _nodes: GraphNode[] = [];\n  private readonly _links: GraphLink[] = [];\n\n  constructor(private readonly graph: Graph) {\n    this._nodes = graph.nodes.map((node) => ({\n      id: node.id,\n      type: node.type,\n      data: node.data,\n    }));\n\n    this._links = graph.edges.map((edge) => ({\n      type: edge.type,\n      source: edge.source,\n      target: edge.target,\n      data: edge.data,\n    }));\n  }\n\n  get nodes() {\n    return this._nodes;\n  }\n\n  get links() {\n    return this._links;\n  }\n}\n"],
-  "mappings": "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",
-  "names": ["React", "useCallback", "useEffect", "useMemo", "useRef", "Obj", "SelectionModel", "GraphForceProjector", "SVG", "getHashColor", "D3ForceGraph", "classNames", "model", "selection", "_selection", "grid", "props", "context", "useRef", "projector", "useMemo", "current", "GraphForceProjector", "attributes", "linkForce", "edge", "data", "object", "active", "forces", "point", "strength", "graph", "SelectionModel", "useEffect", "repaint", "selected", "value", "handleSelect", "useCallback", "node", "contains", "id", "remove", "add", "SVG", "Root", "ref", "Markers", "Grid", "axis", "Zoom", "extent", "Graph", "labels", "text", "label", "obj", "color", "getHashColor", "Obj", "getTypename", "classes", "onSelect", "forceLink", "forceManyBody", "NativeForceGraph", "React", "useEffect", "useRef", "useState", "useResizeDetector", "filterObjectsSync", "GraphAdapter", "graph", "_nodes", "_links", "nodes", "map", "node", "id", "type", "data", "edges", "edge", "source", "target", "links", "ForceGraph", "model", "match", "ref", "width", "height", "useResizeDetector", "refreshRate", "rootRef", "useRef", "forceGraph", "filteredRef", "current", "filterObjectsSync", "objects", "data", "setData", "useState", "useEffect", "subscribe", "GraphAdapter", "graph", "NativeForceGraph", "nodeRelSize", "nodeLabel", "node", "type", "typename", "label", "id", "nodeAutoColorBy", "linkAutoColorBy", "link", "pauseAnimation", "graphData", "nodes", "links", "undefined", "onEngineStop", "handleZoomToFit", "onNodeClick", "emitParticle", "d3Force", "forceLink", "distance", "strength", "forceManyBody", "warmupTicks", "cooldownTime", "resumeAnimation", "zoomToFit", "React", "div", "className", "onClick"]
-}

package/dist/lib/browser/chunk-OAOY7SHY.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/hooks/useGraphModel.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { useEffect, useState } from 'react';\n\nimport { type Filter, type Space } from '@dxos/client/echo';\nimport { SpaceGraphModel, type SpaceGraphModelOptions } from '@dxos/schema';\n\n// TODO(burdon): Factor out.\nexport const useGraphModel = (\n  space: Space | undefined,\n  filter?: Filter.Any | undefined,\n  options?: SpaceGraphModelOptions,\n): SpaceGraphModel | undefined => {\n  const [model, setModel] = useState<SpaceGraphModel | undefined>(undefined);\n  useEffect(() => {\n    if (!space) {\n      void model?.close();\n      setModel(undefined);\n      return;\n    }\n\n    // TODO(burdon): Does this need to be a dependency?\n    if (!model) {\n      const model = new SpaceGraphModel().setFilter(filter).setOptions(options);\n      void model.open(space);\n      setModel(model);\n    } else {\n      model.setFilter(filter).setOptions(options);\n    }\n  }, [space, filter, options]);\n\n  return model;\n};\n"],
-  "mappings": ";AAIA,SAASA,WAAWC,gBAAgB;AAGpC,SAASC,uBAAoD;AAGtD,IAAMC,gBAAgB,CAC3BC,OACAC,QACAC,YAAAA;AAEA,QAAM,CAACC,OAAOC,QAAAA,IAAYC,SAAsCC,MAAAA;AAChEC,YAAU,MAAA;AACR,QAAI,CAACP,OAAO;AACV,WAAKG,OAAOK,MAAAA;AACZJ,eAASE,MAAAA;AACT;IACF;AAGA,QAAI,CAACH,OAAO;AACV,YAAMA,SAAQ,IAAIM,gBAAAA,EAAkBC,UAAUT,MAAAA,EAAQU,WAAWT,OAAAA;AACjE,WAAKC,OAAMS,KAAKZ,KAAAA;AAChBI,eAASD,MAAAA;IACX,OAAO;AACLA,YAAMO,UAAUT,MAAAA,EAAQU,WAAWT,OAAAA;IACrC;EACF,GAAG;IAACF;IAAOC;IAAQC;GAAQ;AAE3B,SAAOC;AACT;",
-  "names": ["useEffect", "useState", "SpaceGraphModel", "useGraphModel", "space", "filter", "options", "model", "setModel", "useState", "undefined", "useEffect", "close", "SpaceGraphModel", "setFilter", "setOptions", "open"]
-}

package/dist/lib/browser/chunk-UL5EDJPE.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const EXPLORER_PLUGIN = 'dxos.org/plugin/explorer';\n\nexport const meta: PluginMeta = {\n  id: EXPLORER_PLUGIN,\n  name: 'Explorer',\n  description: 'Install this plugin to view a hypergraph of all objects inside of your Space.',\n  icon: 'ph--graph--regular',\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": ";AAMO,IAAMA,kBAAkB;AAExB,IAAMC,OAAmB;EAC9BC,IAAIF;EACJG,MAAM;EACNC,aAAa;EACbC,MAAM;EACNC,QAAQ;EACRC,MAAM;IAAC;;EACPC,aAAa;IAAC;;AAChB;",
-  "names": ["EXPLORER_PLUGIN", "meta", "id", "name", "description", "icon", "source", "tags", "screenshots"]
-}

package/dist/lib/browser/intent-resolver-XH2UO2FM.mjs

@@ -1,24 +0,0 @@
-import {
-  ExplorerAction,
-  ViewType
-} from "./chunk-EF4BFHTI.mjs";
-import "./chunk-UL5EDJPE.mjs";
-
-// src/capabilities/intent-resolver.ts
-import { contributes, Capabilities, createResolver } from "@dxos/app-framework";
-import { Obj } from "@dxos/echo";
-var intent_resolver_default = () => contributes(Capabilities.IntentResolver, createResolver({
-  intent: ExplorerAction.Create,
-  resolve: ({ name }) => ({
-    data: {
-      object: Obj.make(ViewType, {
-        name,
-        type: ""
-      })
-    }
-  })
-}));
-export {
-  intent_resolver_default as default
-};
-//# sourceMappingURL=intent-resolver-XH2UO2FM.mjs.map

package/dist/lib/browser/intent-resolver-XH2UO2FM.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/capabilities/intent-resolver.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { contributes, Capabilities, createResolver } from '@dxos/app-framework';\nimport { Obj } from '@dxos/echo';\n\nimport { ExplorerAction, ViewType } from '../types';\n\nexport default () =>\n  contributes(\n    Capabilities.IntentResolver,\n    createResolver({\n      intent: ExplorerAction.Create,\n      resolve: ({ name }) => ({\n        data: { object: Obj.make(ViewType, { name, type: '' }) },\n      }),\n    }),\n  );\n"],
-  "mappings": ";;;;;;;AAIA,SAASA,aAAaC,cAAcC,sBAAsB;AAC1D,SAASC,WAAW;AAIpB,IAAA,0BAAe,MACbC,YACEC,aAAaC,gBACbC,eAAe;EACbC,QAAQC,eAAeC;EACvBC,SAAS,CAAC,EAAEC,KAAI,OAAQ;IACtBC,MAAM;MAAEC,QAAQC,IAAIC,KAAKC,UAAU;QAAEL;QAAMM,MAAM;MAAG,CAAA;IAAG;EACzD;AACF,CAAA,CAAA;",
-  "names": ["contributes", "Capabilities", "createResolver", "Obj", "contributes", "Capabilities", "IntentResolver", "createResolver", "intent", "ExplorerAction", "Create", "resolve", "name", "data", "object", "Obj", "make", "ViewType", "type"]
-}

package/dist/lib/browser/react-surface-65VQ42HX.mjs

@@ -1,31 +0,0 @@
-import {
-  ExplorerContainer
-} from "./chunk-PVFZFKQ6.mjs";
-import "./chunk-J2BBZOSF.mjs";
-import {
-  ViewType
-} from "./chunk-EF4BFHTI.mjs";
-import {
-  EXPLORER_PLUGIN
-} from "./chunk-UL5EDJPE.mjs";
-
-// src/capabilities/react-surface.tsx
-import React from "react";
-import { Capabilities, contributes, createSurface } from "@dxos/app-framework";
-import { Obj } from "@dxos/echo";
-var react_surface_default = () => contributes(Capabilities.ReactSurface, createSurface({
-  id: `${EXPLORER_PLUGIN}/article`,
-  role: [
-    "article",
-    "section"
-  ],
-  filter: (data) => Obj.instanceOf(ViewType, data.subject),
-  component: ({ data, role }) => /* @__PURE__ */ React.createElement(ExplorerContainer, {
-    view: data.subject,
-    role
-  })
-}));
-export {
-  react_surface_default as default
-};
-//# sourceMappingURL=react-surface-65VQ42HX.mjs.map