@dxos/plugin-explorer 0.8.4-main.74a063c4e0 → 0.8.4-main.765dc60934

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: view, attendableId: _attendableId }: 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,5 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export { ExplorerContainer as default } from './ExplorerContainer';