@dxos/plugin-explorer 0.6.8-main.046e6cf

package/src/components/Graph/Graph.tsx

@@ -0,0 +1,151 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type FC, useEffect, useMemo, useRef, useState } from 'react';
+
+import { type Space } from '@dxos/client/echo';
+import { type EchoReactiveObject, getType } from '@dxos/echo-schema';
+import {
+  createSvgContext,
+  darkGridStyles,
+  defaultGridStyles,
+  Grid,
+  SVG,
+  SVGContextProvider,
+  Zoom,
+} from '@dxos/gem-core';
+import { Graph as GraphComponent, GraphForceProjector, type GraphLayoutNode, Markers } from '@dxos/gem-spore';
+import { filterObjectsSync, type SearchResult } from '@dxos/plugin-search';
+import { useThemeContext } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { type EchoGraphNode, SpaceGraphModel } from './graph-model';
+import { Tree } from '../Tree';
+
+type Slots = {
+  root?: { className?: string };
+  grid?: { className?: string };
+};
+
+const slots: Slots = {};
+
+const colors = [
+  '[&>circle]:!fill-black-300   [&>circle]:!stroke-black-600',
+  '[&>circle]:!fill-slate-300   [&>circle]:!stroke-slate-600',
+  '[&>circle]:!fill-green-300   [&>circle]:!stroke-green-600',
+  '[&>circle]:!fill-sky-300     [&>circle]:!stroke-sky-600',
+  '[&>circle]:!fill-cyan-300    [&>circle]:!stroke-cyan-600',
+  '[&>circle]:!fill-rose-300    [&>circle]:!stroke-rose-600',
+  '[&>circle]:!fill-purple-300  [&>circle]:!stroke-purple-600',
+  '[&>circle]:!fill-orange-300  [&>circle]:!stroke-orange-600',
+  '[&>circle]:!fill-teal-300    [&>circle]:!stroke-teal-600',
+  '[&>circle]:!fill-indigo-300  [&>circle]:!stroke-indigo-600',
+];
+
+export type GraphProps = {
+  space: Space;
+  match?: RegExp;
+};
+
+export const Graph: FC<GraphProps> = ({ space, match }) => {
+  const model = useMemo(() => (space ? new SpaceGraphModel({ schema: true }).open(space) : undefined), [space]);
+  const [selected, setSelected] = useState<string>();
+  const { themeMode } = useThemeContext();
+
+  const context = createSvgContext();
+  const projector = useMemo(
+    () =>
+      new GraphForceProjector<EchoGraphNode>(context, {
+        forces: {
+          manyBody: {
+            strength: -100,
+          },
+          link: {
+            distance: 180,
+          },
+          radial: {
+            radius: 200,
+            strength: 0.05,
+          },
+        },
+        attributes: {
+          radius: (node: GraphLayoutNode<EchoGraphNode>) => (node.data?.type === 'schema' ? 24 : 12),
+        },
+      }),
+    [],
+  );
+
+  const filteredRef = useRef<SearchResult[]>();
+  filteredRef.current = filterObjectsSync(model?.objects ?? [], match);
+  useEffect(() => {
+    void projector.start();
+  }, [match]);
+
+  const [colorMap] = useState(new Map<string, string>());
+
+  if (!model) {
+    return null;
+  }
+
+  if (selected) {
+    return <Tree space={space} selected={selected} variant='tidy' onNodeClick={() => setSelected(undefined)} />;
+  }
+
+  return (
+    <SVGContextProvider context={context}>
+      <SVG className={slots?.root?.className}>
+        <Markers arrowSize={6} />
+        <Grid className={slots?.grid?.className ?? themeMode === 'dark' ? darkGridStyles : defaultGridStyles} />
+        <Zoom extent={[1 / 2, 4]}>
+          <GraphComponent
+            model={model}
+            projector={projector}
+            drag
+            arrows
+            onSelect={(node) => setSelected(node?.data?.id)}
+            labels={{
+              text: (node: GraphLayoutNode<EchoReactiveObject<any>>) => {
+                if (filteredRef.current?.length && !filteredRef.current.some((object) => object.id === node.data?.id)) {
+                  return undefined;
+                }
+
+                // TODO(burdon): Use schema.
+                return node.data?.label ?? node.data?.title ?? node.data?.name ?? node.data?.id.slice(0, 8);
+              },
+            }}
+            attributes={{
+              node: (node: GraphLayoutNode<EchoReactiveObject<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 selected = filteredRef.current?.some((object) => object.id === node.data?.id);
+                return {
+                  class: mx(
+                    filteredRef.current?.length
+                      ? selected
+                        ? [className]
+                        : '[&>text]:!fill-neutral-300'
+                      : ['[&>text]:!fill-neutral-700', className],
+                  ),
+                };
+              },
+              link: () => ({
+                class: '[&>path]:!stroke-neutral-300',
+              }),
+            }}
+          />
+        </Zoom>
+      </SVG>
+    </SVGContextProvider>
+  );
+};

package/src/components/Graph/graph-model.ts

@@ -0,0 +1,146 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import {
+  AST,
+  DynamicSchema,
+  getSchema,
+  getType,
+  ReferenceAnnotationId,
+  type S,
+  SchemaValidator,
+  StoredSchema,
+} from '@dxos/echo-schema';
+import { type GraphData, type GraphLink, GraphModel } from '@dxos/gem-spore';
+import { log } from '@dxos/log';
+import { CollectionType } from '@dxos/plugin-space/types';
+import { type EchoReactiveObject, type Space, type Subscription } from '@dxos/react-client/echo';
+
+export type SpaceGraphModelOptions = {
+  schema?: boolean;
+};
+
+export type EchoGraphNode = SchemaGraphNode | EchoObjectGraphNode;
+
+type EchoObjectGraphNode = {
+  id: string;
+  type: 'echo-object';
+  object: EchoReactiveObject<any>;
+};
+
+type SchemaGraphNode = {
+  id: string;
+  type: 'schema';
+  schema: S.Schema<any>;
+};
+
+/**
+ * Converts ECHO objects to a graph.
+ */
+export class SpaceGraphModel extends GraphModel<EchoGraphNode> {
+  private readonly _graph: GraphData<EchoGraphNode> = {
+    nodes: [],
+    links: [],
+  };
+
+  private _subscription?: Subscription;
+  private _objects?: EchoReactiveObject<any>[];
+
+  constructor(private readonly _options: SpaceGraphModelOptions = {}) {
+    super();
+  }
+
+  override get graph(): GraphData<EchoGraphNode> {
+    return this._graph;
+  }
+
+  get objects(): EchoReactiveObject<any>[] {
+    return this._objects ?? [];
+  }
+
+  open(space: Space, objectId?: string) {
+    if (!this._subscription) {
+      // TODO(burdon): Filter.
+      const query = space.db.query((object: EchoReactiveObject<any>) => !(object instanceof CollectionType));
+
+      this._subscription = query.subscribe(
+        ({ objects }) => {
+          this._objects = objects;
+          this._graph.nodes = objects.map((object) => {
+            if (object instanceof StoredSchema) {
+              const effectSchema = space.db.schema.getSchemaById(object.id)!;
+              return { type: 'schema', id: object.id, schema: effectSchema.schema };
+            }
+            return { type: 'echo-object', id: object.id, object };
+          });
+          this._graph.links = objects.reduce<GraphLink[]>((links, object) => {
+            const objectSchema = getSchema(object);
+            const typename = getType(object)?.objectId;
+            if (objectSchema == null || typename == null) {
+              log.info('no schema for object:', { id: object.id.slice(0, 8) });
+              return links;
+            }
+
+            if (!(objectSchema instanceof DynamicSchema)) {
+              const idx = objects.findIndex((obj) => obj.id === typename);
+              if (idx === -1) {
+                this._graph.nodes.push({
+                  id: typename,
+                  type: 'schema',
+                  schema: objectSchema,
+                });
+              }
+            }
+
+            // Link to schema.
+            if (this._options.schema) {
+              links.push({
+                id: `${object.id}-${typename}`,
+                source: object.id,
+                target: typename,
+              });
+            }
+
+            // Parse schema to follow referenced objects.
+            AST.getPropertySignatures(objectSchema.ast).forEach((prop) => {
+              if (!SchemaValidator.hasTypeAnnotation(objectSchema, prop.name.toString(), ReferenceAnnotationId)) {
+                return;
+              }
+              const value = object[String(prop.name)];
+              if (value) {
+                const refs = Array.isArray(value) ? value : [value];
+                for (const ref of refs) {
+                  if (objects.findIndex((obj) => obj.id === ref.id) !== -1) {
+                    links.push({
+                      id: `${object.id}-${String(prop.name)}-${ref.id}`,
+                      source: object.id,
+                      target: ref.id,
+                    });
+                  }
+                }
+              }
+            });
+
+            return links;
+          }, []);
+
+          this.triggerUpdate();
+        },
+        { fire: true },
+      );
+    }
+
+    this.setSelected(objectId);
+    return this;
+  }
+
+  close() {
+    if (this._subscription) {
+      this._subscription();
+      this._subscription = undefined;
+    }
+
+    return this;
+  }
+}

package/src/components/Graph/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './graph-model';
+
+export * from './Graph';

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

@@ -0,0 +1,97 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React, { type FC, useEffect, useState } from 'react';
+
+import { range } from '@dxos/echo-generator';
+import { create } from '@dxos/echo-schema';
+import { TreeItemType, TreeType } from '@dxos/plugin-outliner/types';
+import { faker } from '@dxos/random';
+import { useClient } from '@dxos/react-client';
+import { ClientRepeater } from '@dxos/react-client/testing';
+import { withFullscreen, withTheme } from '@dxos/storybook-utils';
+
+import { Tree, type TreeComponentProps } from './Tree';
+
+// TODO(burdon): Storybook for Graph/Tree/Plot (generics); incl. GraphModel.
+// TODO(burdon): Type for all Explorer components (Space, Object, Query, etc.) incl.
+// TODO(burdon): Factor out to gem?
+
+faker.seed(1);
+
+const makeTreeItems = <T extends number>(count: T, items: TreeItemType[] = []) => {
+  return range(() => create(TreeItemType, { content: '', items }), count);
+};
+
+const Story: FC<{ type?: TreeComponentProps<any>['variant'] }> = ({ type } = {}) => {
+  const client = useClient();
+  const space = client.spaces.default;
+  const [object, setObject] = useState<TreeType>();
+  useEffect(() => {
+    setTimeout(() => {
+      const tree = create(TreeType, {
+        root: makeTreeItems(1, [
+          ...makeTreeItems(7),
+          ...makeTreeItems(1, [
+            ...makeTreeItems(1),
+            ...makeTreeItems(1, [
+              ...makeTreeItems(3),
+              ...makeTreeItems(1, makeTreeItems(2)),
+              ...makeTreeItems(2),
+              ...makeTreeItems(1, makeTreeItems(2)),
+              ...makeTreeItems(2),
+            ]),
+            ...makeTreeItems(1),
+          ]),
+          ...makeTreeItems(2),
+          ...makeTreeItems(1, [
+            ...makeTreeItems(1),
+            ...makeTreeItems(1, [...makeTreeItems(2), ...makeTreeItems(1, makeTreeItems(2))]),
+            ...makeTreeItems(1),
+          ]),
+          ...makeTreeItems(2),
+        ])[0],
+      });
+
+      space.db.add(tree);
+      setObject(tree);
+    });
+  }, []);
+
+  if (!object) {
+    return null;
+  }
+
+  return <Tree space={space} selected={object?.id} variant={type} />;
+};
+
+export default {
+  title: 'plugin-explorer/Tree',
+  component: Tree,
+  render: () => <ClientRepeater component={Story} types={[TreeType, TreeItemType]} createSpace />,
+  decorators: [withTheme, withFullscreen()],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Tidy = {
+  args: {
+    type: 'tidy',
+  },
+};
+
+export const Radial = {
+  args: {
+    type: 'radial',
+  },
+};
+
+export const Edge = {
+  args: {
+    type: 'edge',
+  },
+};

package/src/components/Tree/Tree.tsx

@@ -0,0 +1,109 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+
+import { type Space } from '@dxos/client/echo';
+import { createSvgContext, SVG, SVGContextProvider } from '@dxos/gem-core';
+
+import { HierarchicalEdgeBundling, RadialTree, TidyTree } from './layout';
+import { mapGraphToTreeData, type TreeNode } from './types';
+import { SpaceGraphModel } from '../Graph';
+
+// TODO(burdon): Create dge bundling graph using d3.hierarchy.
+// https://observablehq.com/@d3/hierarchical-edge-bundling?intent=fork
+
+type Renderer = (svg: SVGSVGElement, data: any, options: any) => void;
+
+export type LayoutVariant = 'tidy' | 'radial' | 'edge';
+
+// TODO(burdon): Remove slots?
+export type TreeLayoutSlots = {
+  node?: string;
+  path?: string;
+  text?: string;
+};
+
+export type TreeOptions = {
+  label: (d: any) => string;
+
+  slots?: TreeLayoutSlots;
+  radius?: number;
+
+  width: number;
+  height: number;
+  margin?: number;
+
+  padding?: number;
+  // Radius of nodes.
+  r?: number;
+};
+
+export const defaultTreeLayoutSlots: TreeLayoutSlots = {
+  node: 'fill-blue-600',
+  path: 'fill-none stroke-blue-400 stroke-[0.5px]',
+  text: 'stroke-[0.5px] stroke-neutral-700 text-xs', // TODO(burdon): Create box instead of halo.
+};
+
+const renderers = new Map<LayoutVariant, Renderer>([
+  ['tidy', TidyTree],
+  ['radial', RadialTree],
+  ['edge', HierarchicalEdgeBundling],
+]);
+
+export type TreeComponentProps<N = unknown> = {
+  space: Space;
+  selected?: string;
+  variant?: LayoutVariant;
+  onNodeClick?: (node?: N) => void;
+};
+
+// TODO(burdon): Label accessor.
+export const Tree = <N,>({ space, selected, variant = 'tidy', onNodeClick }: TreeComponentProps<N>) => {
+  const model = useMemo(() => (space ? new SpaceGraphModel().open(space, selected) : undefined), [space, selected]);
+  const [tree, setTree] = useState<TreeNode>();
+  useEffect(() => {
+    return model?.subscribe(() => {
+      const tree = mapGraphToTreeData(model);
+      setTree(tree);
+    }, true);
+  }, [model]);
+
+  const context = createSvgContext();
+  const { ref, width = 0, height = 0 } = useResizeDetector();
+
+  useEffect(() => {
+    if (width && height) {
+      const size = Math.min(width, height);
+      const radius = size * 0.4;
+      const options = {
+        // TODO(burdon): Type.
+        label: (d: any) => 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 (tree) {
+        const renderer = renderers.get(variant);
+        renderer?.(context.ref.current!, tree, options);
+      }
+    }
+  }, [tree, width, height]);
+
+  // TODO(burdon): Provider should expand.
+  return (
+    <div ref={ref} className='flex grow overflow-hidden' onClick={() => onNodeClick?.()}>
+      <SVGContextProvider context={context}>
+        <SVG />
+      </SVGContextProvider>
+    </div>
+  );
+};

package/src/components/Tree/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './Tree';

package/src/components/Tree/layout/HierarchicalEdgeBundling.ts

@@ -0,0 +1,164 @@
+//
+// Copyright 2023 DXOS.org
+// Copyright 2022 Observable, Inc.
+//
+
+import * as d3 from 'd3';
+import { type HierarchyNode } from 'd3-hierarchy';
+
+import { type TreeOptions } from '../Tree';
+import { type TreeNode } from '../types';
+
+// Create hierarchical ID.
+// eslint-disable-next-line unused-imports/no-unused-vars
+const getId = (node: HierarchyNode<TreeNode>): string =>
+  `${node.parent ? getId(node.parent) + '/' : ''}${node.data.id.slice(0, 4)}`;
+
+// https://github.com/d3/d3-hierarchy
+// https://observablehq.com/@d3/hierarchical-edge-bundling?intent=fork
+const HierarchicalEdgeBundling = (s: SVGSVGElement, data: TreeNode, options: TreeOptions) => {
+  const svg = d3.select(s);
+  svg.selectAll('*').remove();
+
+  const { radius = 600, padding = 100, slots } = options;
+
+  // https://d3js.org/d3-hierarchy/hierarchy
+  const root = d3.hierarchy(flatten(data));
+  // .sort((a, b) => d3.ascending(a.height, b.height) || d3.ascending(getName(a.data), getName(b.data)));
+
+  const tree = d3.cluster<TreeNode>().size([2 * Math.PI, radius - padding]);
+  const layout = tree(addLinks(root));
+
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  const node = svg
+    .append('g')
+    .selectAll()
+    .data(layout.leaves())
+    .join('g')
+    .attr('transform', (d) => `rotate(${d.x * (180 / Math.PI) - 90}) translate(${d.y},0)`)
+    .append('text')
+    .attr('class', slots?.text ?? '')
+    .attr('dy', '0.31em') // TODO(burdon): Based on font size.
+    .attr('x', (d) => (d.x < Math.PI ? 6 : -6))
+    .attr('text-anchor', (d) => (d.x < Math.PI ? 'start' : 'end'))
+    .attr('transform', (d) => (d.x >= Math.PI ? 'rotate(180)' : null))
+    // .text((d: any) => d.data.id)
+    // .each(function (d: any) {
+    //   d.text = this;
+    // })
+    // .on('mouseover', overed)
+    // .on('mouseout', outed)
+    .call(
+      (text) => text.text((d: any) => d.data.id.slice(0, 8)),
+      // .text((d: any) => `${getId(d)} [${[(d as any).outgoing?.length ?? 0]}]`),
+    );
+
+  // https://d3js.org/d3-shape/radial-line
+  const line = d3
+    .lineRadial()
+    .curve(d3.curveBundle.beta(0.85))
+    .radius((d: any) => d.y)
+    .angle((d: any) => d.x);
+
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  const links = svg
+    .append('g')
+    .selectAll()
+    .data(layout.leaves().flatMap((leaf: any) => leaf.outgoing))
+    .join('path')
+    .style('mix-blend-mode', 'multiply')
+    .attr('class', slots?.path ?? '')
+    .attr('d', ([i, o]) => {
+      return line(i.path(o));
+    })
+    .each(function (d) {
+      d.path = this;
+    });
+
+  // function overed(event: any, d: X) {
+  //   link.style('mix-blend-mode', null);
+  // d3.select(this).attr('font-weight', 'bold');
+  // d3.selectAll(d.incoming.map((d) => d.path))
+  //   .attr('stroke', color.in)
+  //   .raise();
+  // d3.selectAll((d as any).incoming.map(([d]) => d.text))
+  //   .attr('fill', color.in)
+  //   .attr('font-weight', 'bold');
+  // d3.selectAll(d.outgoing.map((d) => d.path))
+  //   .attr('stroke', color.out)
+  //   .raise();
+  // d3.selectAll(d.outgoing.map(([, d]) => d.text))
+  //   .attr('fill', color.out)
+  //   .attr('font-weight', 'bold');
+  // }
+
+  // function outed(event: any, d: HierarchyNode<Datum>) {
+  //   // @ts-ignore
+  //   d3.select(this).attr('font-weight', null);
+  //   d3.selectAll(d.incoming.map((d) => d.path)).attr('stroke', null);
+  //   d3.selectAll(d.incoming.map(([d]) => d.text))
+  //     .attr('fill', null)
+  //     .attr('font-weight', null);
+  //   d3.selectAll(d.outgoing.map((d) => d.path)).attr('stroke', null);
+  //   d3.selectAll(d.outgoing.map(([, d]) => d.text))
+  //     .attr('fill', null)
+  //     .attr('font-weight', null);
+  // }
+};
+
+// Monkey-patch with incoming/outgoing nodes.
+const addLinks = (root: HierarchyNode<TreeNode>) => {
+  // Map of nodes indexed by ID.
+  const nodes = new Map(root.descendants().map((d) => [d.data.id, d]));
+  const parents = root.descendants().reduce((map, d) => {
+    if (d.children?.length) {
+      map.set(d.data.id, d);
+    }
+    return map;
+  }, new Map<string, HierarchyNode<TreeNode>>());
+
+  for (const d of root.leaves()) {
+    // (d as any).incoming = [];
+
+    const parent = parents.get(d.data.id);
+    if (parent) {
+      // Skip the first node which is a placeholder created by flatten().
+      (d as any).outgoing =
+        parent.data.children?.slice(1).map((child) => {
+          return [d, nodes.get(child.id)!];
+        }) ?? [];
+    } else {
+      (d as any).outgoing = [];
+    }
+  }
+
+  // for (const d of root.leaves()) {
+  //   for (const [_, o] of (d as any).outgoing) {
+  //     o.incoming.push(o);
+  //   }
+  // }
+
+  return root;
+};
+
+/**
+ * We are using a hierarchy in order to group nodes by parent, but we want the parent
+ * nodes to be positioned at the first level along with all descendents.
+ * So we add a placeholder for all parents at the head of each group.
+ * @param node
+ */
+const flatten = (node: TreeNode) => {
+  const clone: TreeNode = {
+    id: node.id,
+  };
+
+  // TODO(burdon): NOTE: Should exclude schema (since requires a tree).
+  if (node.children?.length) {
+    const children = node.children.map((child) => flatten(child));
+    clone.children = [{ id: node.id }, ...children];
+  }
+
+  return clone;
+};
+
+export default HierarchicalEdgeBundling;