@dxos/plugin-explorer 0.8.4-main.ae835ea → 0.8.4-main.bc2380dfbc

package/src/components/ExplorerContainer.tsx

@@ -1,54 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useCallback, useMemo, useState } from 'react';
-
-import { type Filter } from '@dxos/echo';
-import { QueryBuilder } from '@dxos/echo-query';
-import { useGlobalSearch } from '@dxos/plugin-search';
-import { getSpace } from '@dxos/react-client/echo';
-import { Toolbar } from '@dxos/react-ui';
-import { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';
-import { StackItem } from '@dxos/react-ui-stack';
-import { type DataType } from '@dxos/schema';
-
-import { useGraphModel } from '../hooks';
-
-import { D3ForceGraph } from './Graph';
-
-type ExplorerContainerProps = {
-  role: string;
-  view: DataType.View;
-};
-
-const ExplorerContainer = ({ role, view }: ExplorerContainerProps) => {
-  const space = 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 (
-    <StackItem.Content toolbar={showToolbar}>
-      {showToolbar && (
-        <Toolbar.Root>
-          <QueryEditor db={space.db} onChange={handleChange} />
-        </Toolbar.Root>
-      )}
-      <D3ForceGraph model={model} match={match} />
-    </StackItem.Content>
-  );
-};
-
-export default ExplorerContainer;

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

@@ -1,77 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useState } from 'react';
-
-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 { render } from '@dxos/storybook-utils';
-
-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 [view, setView] = useState<DataType.View>();
-
-  useAsyncEffect(async () => {
-    const space = client.spaces.default;
-    void generate(space, generator);
-    const { view } = await Graph.makeView({ client, space, name: 'Test', typename: Graph.Graph.typename });
-    space.db.add(view);
-    setSpace(space);
-    setView(view);
-  }, []);
-
-  const model = useGraphModel(space);
-  if (!model || !space || !view) {
-    return null;
-  }
-
-  return <D3ForceGraph model={model} />;
-};
-
-const meta = {
-  title: 'plugins/plugin-explorer/D3ForceGraph',
-  component: D3ForceGraph,
-  render: render(DefaultStory),
-  decorators: [
-    withTheme,
-    withClientProvider({
-      createSpace: true,
-      types: [
-        Graph.Graph,
-        DataType.View,
-        DataType.Organization,
-        DataType.Project,
-        DataType.Person,
-        DataType.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,101 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-
-import { Obj } from '@dxos/echo';
-import { SelectionModel } from '@dxos/graph';
-import { type ThemedClassName } from '@dxos/react-ui';
-import {
-  type GraphController,
-  GraphForceProjector,
-  type GraphLayoutNode,
-  type GraphProps,
-  SVG,
-  type SVGContext,
-} from '@dxos/react-ui-graph';
-import { getHashStyles } from '@dxos/react-ui-theme';
-import { type SpaceGraphEdge, type SpaceGraphModel, type SpaceGraphNode } from '@dxos/schema';
-
-import '@dxos/react-ui-graph/styles/graph.css';
-
-export type D3ForceGraphProps = ThemedClassName<
-  {
-    model?: SpaceGraphModel;
-    match?: RegExp;
-    selection?: SelectionModel;
-    grid?: boolean;
-  } & Pick<GraphProps, 'drag'>
->;
-
-export const D3ForceGraph = ({ classNames, model, selection: _selection, grid, ...props }: D3ForceGraphProps) => {
-  const context = useRef<SVGContext>(null);
-  const projector = useMemo<GraphForceProjector | undefined>(() => {
-    if (context.current) {
-      return new GraphForceProjector(context.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,
-          },
-        },
-      });
-    }
-  }, [context.current]);
-
-  const graph = useRef<GraphController>(null);
-  const selection = useMemo(() => _selection ?? new SelectionModel(), [_selection]);
-  useEffect(() => graph.current?.repaint(), [selection.selected.value]);
-
-  const handleSelect = useCallback<NonNullable<GraphProps['onSelect']>>(
-    (node) => {
-      if (selection.contains(node.id)) {
-        selection.remove(node.id);
-      } else {
-        selection.add(node.id);
-      }
-    },
-    [selection],
-  );
-
-  return (
-    <SVG.Root ref={context} classNames={classNames}>
-      <SVG.Markers />
-      {grid && <SVG.Grid axis />}
-      <SVG.Zoom extent={[1 / 2, 2]}>
-        <SVG.Graph<SpaceGraphNode, SpaceGraphEdge>
-          {...props}
-          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>
-  );
-};

package/src/components/Graph/testing.ts

@@ -1,55 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Space } from '@dxos/client/echo';
-import { type Obj, Query, Relation } from '@dxos/echo';
-import { DataType } from '@dxos/schema';
-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)];
-
-const defaultTypes: TypeSpec[] = [
-  { type: DataType.Organization, count: 5 },
-  { type: DataType.Project, count: 5 },
-  { type: DataType.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 { objects: contacts } = await space.db.query(Query.type(DataType.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(DataType.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;