@dxos/plugin-explorer 0.8.4-main.7996785055 → 0.8.4-main.8baae0fced

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

@@ -1,83 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useState } from 'react';
-
-import { Type } from '@dxos/echo';
-import { View } 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 { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
-import { ViewModel } from '@dxos/schema';
-import { type ValueGenerator } from '@dxos/schema/testing';
-import { withRegistry } from '@dxos/storybook-utils';
-import { HasRelationship, Organization, Person, Pipeline } from '@dxos/types';
-
-import { useGraphModel } from '../../hooks';
-import { Graph } from '../../types';
-
-import { D3ForceGraph } from './D3ForceGraph';
-import { generate } from './testing';
-
-const generator = faker as any as ValueGenerator;
-
-faker.seed(1);
-
-const DefaultStory = () => {
-  const client = useClient();
-  const [space, setSpace] = useState<Space>();
-  const [graph, setGraph] = useState<Graph.Graph>();
-
-  useAsyncEffect(async () => {
-    const space = client.spaces.get()[0];
-    void generate(space, generator);
-    const { view } = await ViewModel.makeFromDatabase({ db: space.db, typename: Type.getTypename(Graph.Graph) });
-    const graph = Graph.make({ name: 'Test', view });
-    space.db.add(graph);
-    setSpace(space);
-    setGraph(graph);
-  }, [client]);
-
-  const model = useGraphModel(space);
-  if (!model || !space || !graph) {
-    return <Loading data={{ model: !!model, space: !!space, graph: !!graph }} />;
-  }
-
-  return <D3ForceGraph model={model} />;
-};
-
-const meta = {
-  title: 'plugins/plugin-explorer/components/D3ForceGraph',
-  component: D3ForceGraph,
-  render: DefaultStory,
-  decorators: [
-    withRegistry,
-    withTheme(),
-    withLayout(),
-    withClientProvider({
-      createSpace: true,
-      types: [
-        Graph.Graph,
-        View.View,
-        Organization.Organization,
-        Pipeline.Pipeline,
-        Person.Person,
-        HasRelationship.HasRelationship,
-      ],
-    }),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof D3ForceGraph>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/src/components/Graph/D3ForceGraph.tsx

@@ -1,109 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { Atom, useAtomValue } from '@effect-atom/atom-react';
-import React, { type ComponentPropsWithoutRef, useCallback, useEffect, useMemo, useRef } from 'react';
-
-import { Obj } from '@dxos/echo';
-import { SelectionModel } from '@dxos/graph';
-import {
-  type GraphController,
-  GraphForceProjector,
-  type GraphLayoutNode,
-  type GraphProps,
-  SVG,
-  type SVGContext,
-} from '@dxos/react-ui-graph';
-import { type SpaceGraphEdge, type SpaceGraphModel, type SpaceGraphNode } from '@dxos/schema';
-import { composable, composableProps, getHashStyles } from '@dxos/ui-theme';
-
-import '@dxos/react-ui-graph/styles/graph.css';
-
-export type D3ForceGraphProps = {
-  model?: SpaceGraphModel;
-  match?: RegExp;
-  selection?: SelectionModel;
-  grid?: boolean;
-} & Pick<GraphProps, 'drag'> &
-  ComponentPropsWithoutRef<'div'>;
-
-const EMPTY_ATOM = Atom.make<{ nodes: SpaceGraphNode[]; edges: SpaceGraphEdge[] }>({ nodes: [], edges: [] });
-
-export const D3ForceGraph = composable<HTMLDivElement, D3ForceGraphProps>(
-  ({ model, selection: _selection, grid, drag, ...props }, forwardedRef) => {
-    // TODO(wittjosiah): This should go into Graph.tsx but for some reason doesn't work.
-    useAtomValue(model?.graphAtom ?? EMPTY_ATOM);
-
-    const svgRef = useRef<SVGContext>(null);
-    const projector = useMemo<GraphForceProjector | undefined>(() => {
-      if (svgRef.current) {
-        return new GraphForceProjector(svgRef.current, {
-          attributes: {
-            linkForce: (edge) => {
-              // TODO(burdon): Check type (currently assumes Employee property).
-              // Edge shouldn't contribute to force if it's not active.
-              return edge.data?.object?.active !== false;
-            },
-          },
-          forces: {
-            point: {
-              strength: 0.01,
-            },
-          },
-        });
-      }
-    }, []);
-
-    const graph = useRef<GraphController>(null);
-    const selection = useMemo(() => _selection ?? new SelectionModel(), [_selection]);
-    useEffect(() => selection.subscribe(() => graph.current?.repaint()), [selection]);
-
-    const handleSelect = useCallback<NonNullable<GraphProps['onSelect']>>(
-      (node) => {
-        if (selection.contains(node.id)) {
-          selection.remove(node.id);
-        } else {
-          selection.add(node.id);
-        }
-      },
-      [selection],
-    );
-
-    return (
-      <div {...composableProps(props, { role: 'none', classNames: 'dx-container' })} ref={forwardedRef}>
-        <SVG.Root ref={svgRef}>
-          <SVG.Markers />
-          {grid && <SVG.Grid axis />}
-          <SVG.Zoom extent={[1 / 2, 2]}>
-            <SVG.Graph<SpaceGraphNode, SpaceGraphEdge>
-              drag={drag}
-              ref={graph}
-              model={model}
-              projector={projector}
-              labels={{
-                text: (node) => {
-                  return node.data?.data.label ?? node.id;
-                },
-              }}
-              attributes={{
-                node: (node: GraphLayoutNode<SpaceGraphNode>) => {
-                  const obj = node.data?.data.object;
-                  return {
-                    data: {
-                      color: getHashStyles(obj && Obj.getTypename(obj))?.hue,
-                    },
-                    classes: {
-                      'dx-selected': selection.contains(node.id),
-                    },
-                  };
-                },
-              }}
-              onSelect={handleSelect}
-            />
-          </SVG.Zoom>
-        </SVG.Root>
-      </div>
-    );
-  },
-);

package/src/components/Graph/testing.ts

@@ -1,58 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Space } from '@dxos/client/echo';
-import { type Obj, Query, Relation } from '@dxos/echo';
-import { type TypeSpec, type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
-import { HasRelationship, Organization, Person, Pipeline } from '@dxos/types';
-import { range } from '@dxos/util';
-
-const getObject = (objects: Obj.Unknown[]) => objects[Math.floor(Math.random() * objects.length)];
-
-const defaultTypes: TypeSpec[] = [
-  { type: Organization.Organization, count: 5 },
-  { type: Pipeline.Pipeline, count: 5 },
-  { type: Person.Person, count: 10 },
-];
-
-export type GenerateOptions = {
-  spec?: TypeSpec[];
-  relations?: {
-    count: number;
-    kind: string;
-  };
-};
-
-const defaultRelations: GenerateOptions['relations'] = {
-  kind: 'friend',
-  count: 10,
-};
-
-/**
- * @deprecated Use @dxos/schema.
- */
-export const generate = async (
-  space: Space,
-  generator: ValueGenerator,
-  { spec = defaultTypes, relations = defaultRelations }: GenerateOptions = {},
-) => {
-  const createObjects = createObjectFactory(space.db, generator);
-  await createObjects(spec);
-
-  // Add relations between objects.
-  const contacts = await space.db.query(Query.type(Person.Person)).run();
-  for (const _ of range(relations.count)) {
-    const source = getObject(contacts);
-    const target = getObject(contacts);
-    if (source.id !== target.id) {
-      space.db.add(
-        Relation.make(HasRelationship.HasRelationship, {
-          [Relation.Source]: source,
-          [Relation.Target]: target,
-          kind: relations.kind,
-        }),
-      );
-    }
-  }
-};

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

@@ -1,162 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-// Copyright 2022 Observable, Inc.
-//
-
-import { cluster, curveBundle, hierarchy, lineRadial, select } 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 = select(s);
-  svg.selectAll('*').remove();
-
-  const { radius = 600, padding = 100, slots } = options;
-
-  // https://d3js.org/d3-hierarchy/hierarchy
-  const root = hierarchy(flatten(data));
-  // .sort((a, b) => ascending(a.height, b.height) || ascending(getName(a.data), getName(b.data)));
-
-  const tree = 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 = lineRadial()
-    .curve(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);
-  // select(this).attr('font-weight', 'bold');
-  // selectAll(d.incoming.map((d) => d.path))
-  //   .attr('stroke', color.in)
-  //   .raise();
-  // selectAll((d as any).incoming.map(([d]) => d.text))
-  //   .attr('fill', color.in)
-  //   .attr('font-weight', 'bold');
-  // selectAll(d.outgoing.map((d) => d.path))
-  //   .attr('stroke', color.out)
-  //   .raise();
-  // selectAll(d.outgoing.map(([, d]) => d.text))
-  //   .attr('fill', color.out)
-  //   .attr('font-weight', 'bold');
-  // }
-
-  // function outed(event: any, d: HierarchyNode<Datum>) {
-  //   // @ts-ignore
-  //   select(this).attr('font-weight', null);
-  //   selectAll(d.incoming.map((d) => d.path)).attr('stroke', null);
-  //   selectAll(d.incoming.map(([d]) => d.text))
-  //     .attr('fill', null)
-  //     .attr('font-weight', null);
-  //   selectAll(d.outgoing.map((d) => d.path)).attr('stroke', null);
-  //   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;

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

@@ -1,94 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-// Copyright 2022 Observable, Inc.
-//
-
-import { hierarchy, linkRadial, select, tree } from 'd3';
-
-import { type TreeOptions } from '../Tree';
-
-// Released under the ISC license.
-// https://observablehq.com/@d3/radial-tree
-// https://observablehq.com/@d3/tree
-const RadialTree = (s: SVGSVGElement, data: any, options: TreeOptions) => {
-  const svg = select(s);
-  svg.selectAll('*').remove();
-
-  const {
-    label, // given a node d, returns the display name
-    radius = 400,
-    r = 4, // radius of nodes
-    slots,
-  } = options;
-
-  const arc = 2 * Math.PI;
-
-  const root = hierarchy(data);
-
-  // Sort the nodes.
-  // if (sort) {
-  //   root.sort(sort);
-  // }
-
-  // Compute labels and titles.
-  const descendants = root.descendants();
-  const getLabel = label === null ? null : descendants.map((d) => label(d.data));
-
-  // Compute the layout.
-  const layout = tree()
-    .size([arc, radius])
-    .separation((a: any, b: any) => (a.parent === b.parent ? 1 : 2) / a.depth);
-  layout(root);
-
-  // Links.
-  svg
-    .append('g')
-    .selectAll('path')
-    .data(root.links())
-    .join('path')
-    .attr('class', slots?.path ?? '')
-    .attr(
-      'd',
-      linkRadial()
-        .angle((d: any) => d.x + Math.PI / 2)
-        .radius((d: any) => d.y) as any,
-    );
-
-  // Nodes.
-  const node = svg
-    .append('g')
-    .selectAll('a')
-    .data(root.descendants())
-    .join('a')
-    // .attr('xlink:href', link == null ? null : (d) => link(d.data, d))
-    // .attr('target', link == null ? null : linkTarget)
-    .attr('transform', (d: any) => `rotate(${(d.x * 180) / Math.PI}) translate(${d.y},0)`);
-
-  node
-    .append('circle')
-    .attr('class', slots?.node ?? '')
-    .attr('r', r);
-
-  // if (title != null) {
-  //   node.append('title').text((d) => title(d.data, d));
-  // }
-
-  // Text.
-  if (getLabel) {
-    node
-      .append('text')
-      .attr('transform', (d: any) => `rotate(${d.x >= Math.PI ? 180 : 0})`)
-      .attr('dy', '0.32em')
-      // eslint-disable-next-line no-mixed-operators
-      .attr('x', (d: any) => (d.x < Math.PI === !d.children ? 6 : -6))
-      // eslint-disable-next-line no-mixed-operators
-      .attr('text-anchor', (d: any) => (d.x < Math.PI === !d.children ? 'start' : 'end'))
-      // .attr('paint-order', 'stroke')
-      .attr('class', slots?.text ?? '')
-      .text((d, i) => getLabel[i]);
-  }
-
-  return svg.node();
-};
-
-export default RadialTree;

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

@@ -1,101 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-// Copyright 2021 Observable, Inc.
-//
-
-import { curveBumpX, hierarchy, link, select, tree } from 'd3';
-
-import { type TreeOptions } from '../Tree';
-
-// Released under the ISC license.
-// https://observablehq.com/@d3/tree
-const TidyTree = (s: SVGSVGElement, data: any, options: TreeOptions) => {
-  const svg = select(s);
-  svg.selectAll('*').remove();
-
-  const { label, width, height, r = 4, padding = 4, margin = 60, slots } = options;
-
-  const root = hierarchy(data);
-
-  // Compute labels and titles.
-  const descendants = root.descendants();
-  const getLabel = label == null ? null : descendants.map((d) => label(d.data));
-
-  // Compute the layout.
-  const dx = 16;
-  const dy = width / (root.height + padding);
-  const layout = tree().nodeSize([dx, dy]);
-  layout(root);
-
-  // Center the tree.
-  let x0 = Infinity;
-  let x1 = -x0;
-  let y0 = Infinity;
-  let y1 = -y0;
-  root.each((d: any) => {
-    if (d.x > x1) {
-      x1 = d.x;
-    }
-    if (d.x < x0) {
-      x0 = d.x;
-    }
-    if (d.y > y1) {
-      y1 = d.y;
-    }
-    if (d.y < y0) {
-      y0 = d.y;
-    }
-  });
-
-  // TODO(burdon): Option to expand.
-  // NOTE: x and y are flipped.
-  const sx = Math.min(2, Math.max(1, (height - margin * 2) / (x1 - x0)));
-  const oy = -(width - (y1 - y0)) / 2;
-
-  // Links.
-  svg
-    .append('g')
-    .selectAll('path')
-    .data(root.links())
-    .join('path')
-    .attr('class', slots?.path ?? '')
-    .attr(
-      'd',
-      link(curveBumpX)
-        .x((d: any) => d.y + oy)
-        .y((d: any) => d.x * sx) as any,
-    );
-
-  // Nodes.
-  const node = svg
-    .append('g')
-    .selectAll('a')
-    .data(root.descendants())
-    .join('a')
-    // .attr('xlink:href', link == null ? null : (d) => link(d.data, d))
-    // .attr('target', link == null ? null : linkTarget)
-    .attr('transform', (d: any) => `translate(${d.y + oy},${d.x * sx})`);
-
-  node
-    .append('circle')
-    .attr('class', slots?.node ?? '')
-    .attr('r', r);
-
-  // if (title != null) {
-  //   node.append('title').text((d) => title(d.data, d));
-  // }
-
-  if (getLabel) {
-    node
-      .append('text')
-
-      .attr('dy', '0.32em')
-      .attr('x', (d) => (d.children ? -6 : 6))
-      .attr('text-anchor', (d) => (d.children ? 'end' : 'start'))
-      // .attr('paint-order', 'stroke')
-      .attr('class', slots?.text ?? '')
-      .text((d, i) => getLabel[i]);
-  }
-};
-
-export default TidyTree;

package/src/components/Tree/testing/index.ts

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

package/src/containers/ExplorerContainer/ExplorerContainer.tsx

@@ -1,53 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useCallback, useMemo, useState } from 'react';
-
-import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
-import { type Filter } from '@dxos/echo';
-import { type View } from '@dxos/echo';
-import { QueryBuilder } from '@dxos/echo-query';
-import { useGlobalSearch } from '@dxos/plugin-search';
-import { getSpace, useObject } from '@dxos/react-client/echo';
-import { Panel, Toolbar } from '@dxos/react-ui';
-import { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';
-
-import { D3ForceGraph } from '../../components';
-import { useGraphModel } from '../../hooks';
-
-export type ExplorerContainerProps = SurfaceComponentProps<View.View>;
-
-export const ExplorerContainer = ({ role, subject: view }: ExplorerContainerProps) => {
-  useObject(view);
-  const space = view && getSpace(view);
-  const [filter, setFilter] = useState<Filter.Any>();
-  const model = useGraphModel(space, filter);
-  const { match } = useGlobalSearch();
-
-  const builder = useMemo(() => new QueryBuilder(), []);
-  const handleChange = useCallback<NonNullable<QueryEditorProps['onChange']>>((value) => {
-    setFilter(builder.build(value).filter);
-  }, []);
-
-  const showToolbar = role === 'article';
-
-  if (!space || !model) {
-    return null;
-  }
-
-  return (
-    <Panel.Root role={role}>
-      {showToolbar && (
-        <Panel.Toolbar asChild>
-          <Toolbar.Root>
-            <QueryEditor db={space.db} onChange={handleChange} />
-          </Toolbar.Root>
-        </Panel.Toolbar>
-      )}
-      <Panel.Content asChild>
-        <D3ForceGraph model={model} match={match} />
-      </Panel.Content>
-    </Panel.Root>
-  );
-};

package/src/containers/ExplorerContainer/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { ExplorerContainer } from './ExplorerContainer';
-
-export default ExplorerContainer;