@dxos/plugin-explorer 0.7.5-main.9d2a38b → 0.7.5-main.e94eead

package/dist/types/src/components/Tree/Tree.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { type Space } from '@dxos/client/echo';
 export type LayoutVariant = 'tidy' | 'radial' | 'edge';
 export type TreeLayoutSlots = {
@@ -23,5 +22,5 @@ export type TreeComponentProps<N = unknown> = {
     variant?: LayoutVariant;
     onNodeClick?: (node?: N) => void;
 };
-export declare const Tree: <N>({ space, selected, variant, onNodeClick }: TreeComponentProps<N>) => React.JSX.Element;
+export declare const Tree: <N>({ space, selected, variant, onNodeClick }: TreeComponentProps<N>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tree.d.ts.map

package/dist/types/src/components/Tree/Tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/Tree.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAY/C,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAGvD,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,MAAM,CAAC;IAE1B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,eAIpC,CAAC;AAQF,MAAM,MAAM,kBAAkB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC5C,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;CAClC,CAAC;AAGF,eAAO,MAAM,IAAI,GAAI,CAAC,6CAAuD,kBAAkB,CAAC,CAAC,CAAC,sBA6CjG,CAAC"}
+{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/Tree.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAa/C,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAGvD,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,MAAM,CAAC;IAE1B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,eAIpC,CAAC;AAQF,MAAM,MAAM,kBAAkB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC5C,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;CAClC,CAAC;AAGF,eAAO,MAAM,IAAI,GAAI,CAAC,6CAAuD,kBAAkB,CAAC,CAAC,CAAC,4CAiDjG,CAAC"}

package/dist/types/src/components/index.d.ts

@@ -1,7 +1,7 @@
 export declare const ExplorerContainer: import("react").LazyExoticComponent<({ view, role }: {
     view: import("../types").ViewType;
     role: string;
-}) => import("react").JSX.Element | null>;
+}) => import("react/jsx-runtime").JSX.Element | null>;
 export * from './Chart';
 export * from './Globe';
 export * from './Graph';

package/dist/types/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,iBAAiB;;;yCAA4C,CAAC;AAE3E,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,iBAAiB;;;qDAA4C,CAAC;AAE3E,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}

package/dist/types/src/meta.d.ts

@@ -6,5 +6,6 @@ export declare const meta: {
     icon: string;
     source: string;
     tags: string[];
+    screenshots: string[];
 };
 //# sourceMappingURL=meta.d.ts.map

package/dist/types/src/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/meta.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,eAAe,6BAA6B,CAAC;AAE1D,eAAO,MAAM,IAAI;;;;;;;CAOK,CAAC"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/meta.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,eAAe,6BAA6B,CAAC;AAE1D,eAAO,MAAM,IAAI;;;;;;;;CAQK,CAAC"}

package/dist/types/src/translations.d.ts

@@ -1,5 +1,18 @@
 declare const _default: {
     'en-US': {
+        [x: string]: {
+            'typename label': string;
+            'plugin name'?: undefined;
+            'object title label'?: undefined;
+            'object title placeholder'?: undefined;
+            'create object label'?: undefined;
+        } | {
+            'plugin name': string;
+            'object title label': string;
+            'object title placeholder': string;
+            'create object label': string;
+            'typename label'?: undefined;
+        };
         "dxos.org/plugin/explorer": {
             'plugin name': string;
             'object title label': string;

package/dist/types/src/translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":";;;;;;;;;;AAMA,wBAWE"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOA,wBAcE"}

package/dist/types/src/types/schema.d.ts

@@ -1,8 +1,8 @@
 import { S } from '@dxos/echo-schema';
-declare const ViewType_base: import("@dxos/echo-schema").TypedObjectPrototype<import("packages/core/echo/echo-schema/dist/types/src/object/common").TypedObjectFields<{
+declare const ViewType_base: import("@dxos/echo-schema").TypedObjectPrototype<import("@dxos/echo-schema").TypedObjectFields<{
     name: S.optional<typeof S.String>;
     type: typeof S.String;
-}, import("packages/core/echo/echo-schema/dist/types/src/object/common").TypedObjectOptions>, S.Struct.Encoded<{
+}, import("@dxos/echo-schema").TypedObjectOptions>, S.Struct.Encoded<{
     name: S.optional<typeof S.String>;
     type: typeof S.String;
 }>>;

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@dxos/plugin-explorer",
-  "version": "0.7.5-main.9d2a38b",
+  "version": "0.7.5-main.e94eead",
   "description": "Braneframe data visualization plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
   "sideEffects": true,
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/types/src/index.d.ts",
@@ -36,25 +37,26 @@
     "@observablehq/plot": "^0.6.11",
     "@preact/signals-core": "^1.6.0",
     "d3": "^7.9.0",
+    "force-graph": "1.49.3",
     "lodash.defaultsdeep": "^4.6.1",
     "lodash.get": "^4.4.2",
     "react-resize-detector": "^11.0.1",
     "topojson-client": "^3.1.0",
-    "@dxos/app-framework": "0.7.5-main.9d2a38b",
-    "@dxos/async": "0.7.5-main.9d2a38b",
-    "@dxos/client": "0.7.5-main.9d2a38b",
-    "@dxos/gem-core": "0.7.5-main.9d2a38b",
-    "@dxos/echo-schema": "0.7.5-main.9d2a38b",
-    "@dxos/gem-spore": "0.7.5-main.9d2a38b",
-    "@dxos/log": "0.7.5-main.9d2a38b",
-    "@dxos/plugin-client": "0.7.5-main.9d2a38b",
-    "@dxos/plugin-search": "0.7.5-main.9d2a38b",
-    "@dxos/plugin-graph": "0.7.5-main.9d2a38b",
-    "@dxos/plugin-space": "0.7.5-main.9d2a38b",
-    "@dxos/live-object": "0.7.5-main.9d2a38b",
-    "@dxos/util": "0.7.5-main.9d2a38b",
-    "@dxos/react-client": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui-stack": "0.7.5-main.9d2a38b"
+    "@dxos/echo-schema": "0.7.5-main.e94eead",
+    "@dxos/client": "0.7.5-main.e94eead",
+    "@dxos/app-framework": "0.7.5-main.e94eead",
+    "@dxos/gem-spore": "0.7.5-main.e94eead",
+    "@dxos/async": "0.7.5-main.e94eead",
+    "@dxos/live-object": "0.7.5-main.e94eead",
+    "@dxos/log": "0.7.5-main.e94eead",
+    "@dxos/plugin-client": "0.7.5-main.e94eead",
+    "@dxos/plugin-graph": "0.7.5-main.e94eead",
+    "@dxos/plugin-search": "0.7.5-main.e94eead",
+    "@dxos/gem-core": "0.7.5-main.e94eead",
+    "@dxos/plugin-space": "0.7.5-main.e94eead",
+    "@dxos/react-client": "0.7.5-main.e94eead",
+    "@dxos/react-ui-stack": "0.7.5-main.e94eead",
+    "@dxos/util": "0.7.5-main.e94eead"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -69,19 +71,19 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-generator": "0.7.5-main.9d2a38b",
-    "@dxos/plugin-outliner": "0.7.5-main.9d2a38b",
-    "@dxos/random": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui": "0.7.5-main.9d2a38b",
-    "@dxos/storybook-utils": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui-theme": "0.7.5-main.9d2a38b"
+    "@dxos/echo-generator": "0.7.5-main.e94eead",
+    "@dxos/plugin-outliner": "0.7.5-main.e94eead",
+    "@dxos/react-ui": "0.7.5-main.e94eead",
+    "@dxos/random": "0.7.5-main.e94eead",
+    "@dxos/storybook-utils": "0.7.5-main.e94eead",
+    "@dxos/react-ui-theme": "0.7.5-main.e94eead"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui-theme": "0.7.5-main.9d2a38b"
+    "@dxos/react-ui": "0.7.5-main.e94eead",
+    "@dxos/react-ui-theme": "0.7.5-main.e94eead"
   },
   "publishConfig": {
     "access": "public"

package/src/ExplorerPlugin.tsx

@@ -2,16 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import {
-  Capabilities,
-  contributes,
-  createIntent,
-  defineModule,
-  definePlugin,
-  Events,
-  oneOf,
-} from '@dxos/app-framework';
+import { Capabilities, contributes, createIntent, defineModule, definePlugin, Events } from '@dxos/app-framework';
 import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
+import { SpaceCapabilities } from '@dxos/plugin-space';
+import { defineObjectForm } from '@dxos/plugin-space/types';
 
 import { IntentResolver, ReactSurface } from './capabilities';
 import { EXPLORER_PLUGIN, meta } from './meta';
@@ -27,30 +21,41 @@ export const ExplorerPlugin = () =>
     }),
     defineModule({
       id: `${meta.id}/module/metadata`,
-      activatesOn: oneOf(Events.Startup, Events.SetupAppGraph),
+      activatesOn: Events.SetupMetadata,
       activate: () =>
         contributes(Capabilities.Metadata, {
           id: ViewType.typename,
           metadata: {
-            createObject: (props: { name?: string }) => createIntent(ExplorerAction.Create, props),
             placeholder: ['object title placeholder', { ns: EXPLORER_PLUGIN }],
             icon: 'ph--graph--regular',
           },
         }),
     }),
+    defineModule({
+      id: `${meta.id}/module/object-form`,
+      activatesOn: ClientEvents.SetupSchema,
+      activate: () =>
+        contributes(
+          SpaceCapabilities.ObjectForm,
+          defineObjectForm({
+            objectSchema: ViewType,
+            getIntent: () => createIntent(ExplorerAction.Create),
+          }),
+        ),
+    }),
     defineModule({
       id: `${meta.id}/module/schema`,
-      activatesOn: ClientEvents.SetupClient,
+      activatesOn: ClientEvents.SetupSchema,
       activate: () => contributes(ClientCapabilities.Schema, [ViewType]),
     }),
     defineModule({
       id: `${meta.id}/module/react-surface`,
-      activatesOn: Events.Startup,
+      activatesOn: Events.SetupReactSurface,
       activate: ReactSurface,
     }),
     defineModule({
       id: `${meta.id}/module/intent-resolver`,
-      activatesOn: Events.SetupIntents,
+      activatesOn: Events.SetupIntentResolver,
       activate: IntentResolver,
     }),
   ]);

package/src/capabilities/intent-resolver.ts

@@ -10,7 +10,10 @@ import { ExplorerAction, ViewType } from '../types';
 export default () =>
   contributes(
     Capabilities.IntentResolver,
-    createResolver(ExplorerAction.Create, ({ name }) => ({
-      data: { object: create(ViewType, { name, type: '' }) },
-    })),
+    createResolver({
+      intent: ExplorerAction.Create,
+      resolve: ({ name }) => ({
+        data: { object: create(ViewType, { name, type: '' }) },
+      }),
+    }),
   );

package/src/components/Graph/Graph.tsx

@@ -2,9 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
+import { forceLink, forceManyBody } from 'd3';
+import ForceGraph from 'force-graph';
 import React, { type FC, useEffect, useMemo, useRef, useState } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
 
-import { type ReactiveEchoObject, type Space, getType } from '@dxos/client/echo';
+import { getTypename, type ReactiveEchoObject, type Space } from '@dxos/client/echo';
 import { createSvgContext, defaultGridStyles, Grid, SVG, SVGRoot, Zoom } from '@dxos/gem-core';
 import {
   defaultStyles,
@@ -14,9 +17,8 @@ import {
   Markers,
 } from '@dxos/gem-spore';
 import { filterObjectsSync, type SearchResult } from '@dxos/plugin-search';
-import { useThemeContext } from '@dxos/react-ui';
+import { useAsyncState, useThemeContext } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-
 import '@dxos/gem-spore/styles';
 
 import { type EchoGraphNode, SpaceGraphModel } from './graph-model';
@@ -45,12 +47,18 @@ const colors = [
 export type GraphProps = {
   space: Space;
   match?: RegExp;
+  grid?: boolean;
+  svg?: boolean;
 };
 
-export const Graph: FC<GraphProps> = ({ space, match }) => {
-  const model = useMemo(() => (space ? new SpaceGraphModel({ schema: true }).open(space) : undefined), [space]);
-  const [selected, setSelected] = useState<string>();
+export const Graph: FC<GraphProps> = ({ space, match, grid, svg }) => {
   const { themeMode } = useThemeContext();
+  const [selected, setSelected] = useState<string>();
+
+  const [model] = useAsyncState(
+    async () => (space ? new SpaceGraphModel({ schema: true }).open(space) : undefined),
+    [space],
+  );
 
   const context = createSvgContext();
   const projector = useMemo(
@@ -61,15 +69,15 @@ export const Graph: FC<GraphProps> = ({ space, match }) => {
             strength: -100,
           },
           link: {
-            distance: 180,
+            distance: 100,
           },
           radial: {
-            radius: 200,
+            radius: 150,
             strength: 0.05,
           },
         },
         attributes: {
-          radius: (node: GraphLayoutNode<EchoGraphNode>) => (node.data?.type === 'schema' ? 24 : 12),
+          radius: (node: GraphLayoutNode<EchoGraphNode>) => (node.data?.type === 'schema' ? 12 : 8),
         },
       }),
     [],
@@ -83,8 +91,68 @@ export const Graph: FC<GraphProps> = ({ space, match }) => {
 
   const [colorMap] = useState(new Map<string, string>());
 
-  if (!model) {
-    return null;
+  // https://github.com/vasturiano/force-graph
+  const { ref, width, height } = useResizeDetector();
+  const rootRef = useRef<HTMLDivElement>(null);
+  const forceGraph = useRef<ForceGraph>();
+
+  useEffect(() => {
+    if (rootRef.current) {
+      forceGraph.current = new ForceGraph(rootRef.current)
+        .nodeRelSize(6)
+        .nodeLabel((node: any) => {
+          if (node.type === 'schema') {
+            return node.data.typename;
+          }
+
+          return node.id;
+        })
+        .nodeAutoColorBy((node: any) => (node.type === 'schema' ? 'schema' : node.data.typename))
+        .linkColor(() => 'rgba(255,255,255,0.25)');
+    }
+
+    return () => {
+      forceGraph.current?.pauseAnimation().graphData({ nodes: [], links: [] });
+      forceGraph.current = undefined;
+    };
+  }, []);
+
+  // Update.
+  useEffect(() => {
+    if (forceGraph.current && width && height && model) {
+      forceGraph.current
+        .pauseAnimation()
+        .width(width)
+        .height(height)
+        .onEngineStop(() => {
+          forceGraph.current?.zoomToFit(400, 40);
+        })
+
+        // https://github.com/vasturiano/force-graph?tab=readme-ov-file#force-engine-d3-force-configuration
+        // .d3Force('center', forceCenter().strength(0.9))
+        .d3Force('link', forceLink().distance(160).strength(0.5))
+        .d3Force('charge', forceManyBody().strength(-30))
+        // .d3AlphaDecay(0.0228)
+        // .d3VelocityDecay(0.4)
+        .warmupTicks(100)
+        // .cooldownTime(1000)
+
+        //
+        .graphData(model.graph)
+        .resumeAnimation();
+    }
+  }, [model, width, height]);
+
+  const handleZoomToFit = () => {
+    forceGraph.current?.zoomToFit(400, 40);
+  };
+
+  if (!svg) {
+    return (
+      <div ref={ref} className='relative grow' onClick={handleZoomToFit}>
+        <div ref={rootRef} className='absolute inset-0' />
+      </div>
+    );
   }
 
   if (selected) {
@@ -95,7 +163,7 @@ export const Graph: FC<GraphProps> = ({ space, match }) => {
     <SVGRoot context={context}>
       <SVG className={mx(defaultStyles, slots?.root?.className)}>
         <Markers arrowSize={6} />
-        <Grid className={slots?.grid?.className ?? defaultGridStyles(themeMode)} />
+        {grid && <Grid className={slots?.grid?.className ?? defaultGridStyles(themeMode)} />}
         <Zoom extent={[1 / 2, 4]}>
           <GraphComponent
             model={model}
@@ -117,29 +185,27 @@ export const Graph: FC<GraphProps> = ({ space, match }) => {
               node: (node: GraphLayoutNode<ReactiveEchoObject<any>>) => {
                 let className: string | undefined;
                 if (node.data) {
-                  const typename = getType(node.data)?.objectId;
-                  if (typename) {
-                    className = colorMap.get(typename);
-                    if (!className) {
-                      className = colors[colorMap.size % colors.length];
-                      colorMap.set(typename, className);
+                  const { object } = node.data;
+                  if (object) {
+                    const typename = getTypename(object);
+                    if (typename) {
+                      className = colorMap.get(typename);
+                      if (!className) {
+                        className = colors[colorMap.size % colors.length];
+                        colorMap.set(typename, className);
+                      }
                     }
                   }
                 }
 
                 const selected = filteredRef.current?.some((object) => object.id === node.data?.id);
+                const blur = !selected && !!filteredRef.current?.length;
                 return {
-                  class: mx(
-                    filteredRef.current?.length
-                      ? selected
-                        ? [className]
-                        : '[&>text]:!fill-neutral-300'
-                      : ['[&>text]:!fill-neutral-700', className],
-                  ),
+                  class: mx(className, blur && 'opacity-70'),
                 };
               },
               link: () => ({
-                class: '[&>path]:!stroke-neutral-300',
+                class: '[&>path]:!stroke-neutral-300 dark:[&>path]:!stroke-neutral-700',
               }),
             }}
           />