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

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/containers/ExplorerContainer/ExplorerContainer.tsx

@@ -1,53 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useCallback, useMemo, useState } from 'react';
-
-import { type AppSurface } 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 = AppSurface.ObjectArticleProps<View.View>;
-
-export const ExplorerContainer = ({ role, subject, attendableId: _attendableId }: ExplorerContainerProps) => {
-  const [view] = useObject(subject);
-  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,5 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export { ExplorerContainer as default } from './ExplorerContainer';