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

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

@@ -0,0 +1,96 @@
+//
+// Copyright 2023 DXOS.org
+// Copyright 2022 Observable, Inc.
+//
+
+import * as d3 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 = d3.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 = d3.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 = d3
+    .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',
+      d3
+        .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

@@ -0,0 +1,102 @@
+//
+// Copyright 2023 DXOS.org
+// Copyright 2021 Observable, Inc.
+//
+
+import * as d3 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 = d3.select(s);
+  svg.selectAll('*').remove();
+
+  const { label, width, height, r = 4, padding = 4, margin = 60, slots } = options;
+
+  const root = d3.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 = d3.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',
+      d3
+        .link(d3.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/layout/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import HierarchicalEdgeBundling from './HierarchicalEdgeBundling';
+import RadialTree from './RadialTree';
+import TidyTree from './TidyTree';
+
+export { HierarchicalEdgeBundling, RadialTree, TidyTree };

package/src/components/Tree/types.ts

@@ -0,0 +1,39 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import type { GraphModel } from '@dxos/gem-spore';
+
+export type TreeNode = {
+  id: string;
+  label?: string;
+  children?: TreeNode[];
+};
+
+export const mapGraphToTreeData = <N>(model: GraphModel<N>, maxDepth = 8): TreeNode | undefined => {
+  const mapNode = (node: N, depth = 0): TreeNode => {
+    const treeNode: TreeNode = {
+      id: model.idAccessor(node),
+      label: model.idAccessor(node).slice(0, 8),
+    };
+
+    const links = model.graph.links.filter((link) => link.source === treeNode.id);
+    if (depth < maxDepth) {
+      treeNode.children = links.map((link) =>
+        mapNode(model.graph.nodes.find((node) => model.idAccessor(node) === link.target)!, depth + 1),
+      );
+    }
+
+    return treeNode;
+  };
+
+  let data: TreeNode | undefined;
+  if (model.selected) {
+    const node = model.graph.nodes.find((node) => model.idAccessor(node) === model.selected);
+    if (node) {
+      data = mapNode(node);
+    }
+  }
+
+  return data;
+};

package/src/components/index.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+// Lazily load components for content surfaces.
+export const ExplorerMain = React.lazy(() => import('./ExplorerMain'));
+export const ExplorerArticle = React.lazy(() => import('./ExplorerArticle'));
+
+export * from './Chart';
+export * from './Globe';
+export * from './Graph';
+export * from './Tree';

package/src/components/plot.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import type { ChannelValueSpec } from '@observablehq/plot';
+
+export type Point = { x: number; y: number };
+export type GeoLocation = { lat: number; lng: number };
+
+export type Accessor<T> = (object: any) => T;
+
+export const createAdapter = <T extends Record<string, any>>(
+  prop: string,
+  accessor: Accessor<T> | undefined,
+): ChannelValueSpec => (accessor ? { transform: (values) => values.map((value) => accessor(value)[prop]) } : prop);

package/src/index.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { ExplorerPlugin } from './ExplorerPlugin';
+
+export default ExplorerPlugin;
+
+// TODO(burdon): Factor out.
+export * from './components';
+
+export * from './ExplorerPlugin';

package/src/meta.tsx

@@ -0,0 +1,19 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Graph, type IconProps } from '@phosphor-icons/react';
+import React from 'react';
+
+import { pluginMeta } from '@dxos/app-framework';
+
+export const EXPLORER_PLUGIN = 'dxos.org/plugin/explorer';
+
+export default pluginMeta({
+  id: EXPLORER_PLUGIN,
+  name: 'Explorer',
+  description: 'Explore the ECHO hypergraph.',
+  tags: ['experimental'],
+  iconComponent: (props: IconProps) => <Graph {...props} />,
+  iconSymbol: 'ph--graph--regular',
+});

package/src/translations.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { EXPLORER_PLUGIN } from './meta';
+
+export default [
+  {
+    'en-US': {
+      [EXPLORER_PLUGIN]: {
+        'plugin name': 'Explorer',
+        'object title label': 'Title',
+        'object title placeholder': 'New explorer',
+        'create object label': 'Create explorer',
+      },
+    },
+  },
+];

package/src/types/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './view';
+export * from './types';

package/src/types/types.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import type {
+  GraphBuilderProvides,
+  IntentResolverProvides,
+  MetadataRecordsProvides,
+  SurfaceProvides,
+  TranslationsProvides,
+} from '@dxos/app-framework';
+import { type SchemaProvides } from '@dxos/plugin-client';
+
+import { EXPLORER_PLUGIN } from '../meta';
+
+const EXPLORER_ACTION = `${EXPLORER_PLUGIN}/action`;
+
+export enum ExplorerAction {
+  CREATE = `${EXPLORER_ACTION}/create`,
+}
+
+export type ExplorerPluginProvides = SurfaceProvides &
+  IntentResolverProvides &
+  GraphBuilderProvides &
+  MetadataRecordsProvides &
+  TranslationsProvides &
+  SchemaProvides;

package/src/types/view.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { S, TypedObject } from '@dxos/echo-schema';
+
+// TODO(burdon): Standardize views?
+export class ViewType extends TypedObject({ typename: 'dxos.org/type/View', version: '0.1.0' })({
+  name: S.optional(S.String),
+  type: S.String,
+}) {}