@dxos/plugin-explorer 0.8.0 → 0.8.1-main.303c73a

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/dist/lib/browser/{ExplorerContainer-GJTCBEM4.mjs → ExplorerContainer-T5CTMBIS.mjs} +2 -2
  2. package/dist/lib/{node-esm/chunk-BRJI3QC2.mjs → browser/chunk-SU3K2HL7.mjs} +240 -3
  3. package/dist/lib/{node-esm/chunk-BRJI3QC2.mjs.map → browser/chunk-SU3K2HL7.mjs.map} +4 -4
  4. package/dist/lib/browser/chunk-V23FAKIX.mjs +205 -0
  5. package/dist/lib/browser/chunk-V23FAKIX.mjs.map +7 -0
  6. package/dist/lib/browser/index.mjs +7 -7
  7. package/dist/lib/browser/meta.json +1 -1
  8. package/dist/lib/browser/{react-surface-3X2V3VPN.mjs → react-surface-Q7OT6GXC.mjs} +3 -3
  9. package/dist/lib/node/{ExplorerContainer-RJT54IOS.cjs → ExplorerContainer-SO5XAXFS.cjs} +6 -6
  10. package/dist/lib/node/chunk-6GTOKVKH.cjs +236 -0
  11. package/dist/lib/node/chunk-6GTOKVKH.cjs.map +7 -0
  12. package/dist/lib/node/{chunk-VSACDC6F.cjs → chunk-CQYBCGC4.cjs} +234 -8
  13. package/dist/lib/node/chunk-CQYBCGC4.cjs.map +7 -0
  14. package/dist/lib/node/index.cjs +10 -10
  15. package/dist/lib/node/meta.json +1 -1
  16. package/dist/lib/node/{react-surface-36YIY7NA.cjs → react-surface-5G52HSJW.cjs} +7 -7
  17. package/dist/lib/node-esm/{ExplorerContainer-TM3VIXVK.mjs → ExplorerContainer-DTUTEZLK.mjs} +2 -2
  18. package/dist/lib/{browser/chunk-S3QNIEBS.mjs → node-esm/chunk-4IST6Y3Z.mjs} +242 -2
  19. package/dist/lib/{browser/chunk-S3QNIEBS.mjs.map → node-esm/chunk-4IST6Y3Z.mjs.map} +4 -4
  20. package/dist/lib/node-esm/chunk-Q2IQDIKJ.mjs +207 -0
  21. package/dist/lib/node-esm/chunk-Q2IQDIKJ.mjs.map +7 -0
  22. package/dist/lib/node-esm/index.mjs +7 -7
  23. package/dist/lib/node-esm/meta.json +1 -1
  24. package/dist/lib/node-esm/{react-surface-YDY7IBMY.mjs → react-surface-QSQVINGP.mjs} +3 -3
  25. package/dist/types/src/components/Chart/Chart.d.ts +2 -1
  26. package/dist/types/src/components/Chart/Chart.d.ts.map +1 -1
  27. package/dist/types/src/components/Chart/Chart.stories.d.ts +2 -1
  28. package/dist/types/src/components/Chart/Chart.stories.d.ts.map +1 -1
  29. package/dist/types/src/components/ExplorerContainer.d.ts +2 -1
  30. package/dist/types/src/components/ExplorerContainer.d.ts.map +1 -1
  31. package/dist/types/src/components/Globe/Globe.d.ts +2 -1
  32. package/dist/types/src/components/Globe/Globe.d.ts.map +1 -1
  33. package/dist/types/src/components/Globe/Globe.stories.d.ts +3 -2
  34. package/dist/types/src/components/Globe/Globe.stories.d.ts.map +1 -1
  35. package/dist/types/src/components/Graph/Graph.d.ts +0 -3
  36. package/dist/types/src/components/Graph/Graph.d.ts.map +1 -1
  37. package/dist/types/src/components/Graph/Graph.stories.d.ts +1 -1
  38. package/dist/types/src/components/Graph/Graph.stories.d.ts.map +1 -1
  39. package/dist/types/src/components/Graph/graph-model.d.ts.map +1 -1
  40. package/dist/types/src/components/Tree/Tree.d.ts +2 -1
  41. package/dist/types/src/components/Tree/Tree.d.ts.map +1 -1
  42. package/dist/types/src/components/Tree/types.d.ts +1 -1
  43. package/dist/types/src/components/Tree/types.d.ts.map +1 -1
  44. package/dist/types/src/components/index.d.ts +1 -1
  45. package/dist/types/src/components/index.d.ts.map +1 -1
  46. package/package.json +24 -25
  47. package/src/components/Graph/Graph.stories.tsx +2 -2
  48. package/src/components/Graph/Graph.tsx +15 -142
  49. package/src/components/Graph/graph-model.ts +2 -0
  50. package/src/components/Tree/types.ts +2 -1
  51. package/dist/lib/browser/chunk-YQL7YE6N.mjs +0 -546
  52. package/dist/lib/browser/chunk-YQL7YE6N.mjs.map +0 -7
  53. package/dist/lib/node/chunk-VSACDC6F.cjs.map +0 -7
  54. package/dist/lib/node/chunk-YH4QYCZH.cjs +0 -567
  55. package/dist/lib/node/chunk-YH4QYCZH.cjs.map +0 -7
  56. package/dist/lib/node-esm/chunk-3KRWHGBM.mjs +0 -548
  57. package/dist/lib/node-esm/chunk-3KRWHGBM.mjs.map +0 -7
  58. /package/dist/lib/browser/{ExplorerContainer-GJTCBEM4.mjs.map → ExplorerContainer-T5CTMBIS.mjs.map} +0 -0
  59. /package/dist/lib/browser/{react-surface-3X2V3VPN.mjs.map → react-surface-Q7OT6GXC.mjs.map} +0 -0
  60. /package/dist/lib/node/{ExplorerContainer-RJT54IOS.cjs.map → ExplorerContainer-SO5XAXFS.cjs.map} +0 -0
  61. /package/dist/lib/node/{react-surface-36YIY7NA.cjs.map → react-surface-5G52HSJW.cjs.map} +0 -0
  62. /package/dist/lib/node-esm/{ExplorerContainer-TM3VIXVK.mjs.map → ExplorerContainer-DTUTEZLK.mjs.map} +0 -0
  63. /package/dist/lib/node-esm/{react-surface-YDY7IBMY.mjs.map → react-surface-QSQVINGP.mjs.map} +0 -0
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/components/Graph/graph-model.ts", "../../../src/components/Tree/Tree.tsx", "../../../src/components/Tree/layout/HierarchicalEdgeBundling.ts", "../../../src/components/Tree/layout/RadialTree.ts", "../../../src/components/Tree/layout/TidyTree.ts", "../../../src/components/Tree/types.ts", "../../../src/components/Graph/Graph.tsx"],
4
- "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type UnsubscribeCallback } from '@dxos/async';\nimport {\n getSchema,\n getSchemaDXN,\n AST,\n type EchoSchema,\n ReferenceAnnotationId,\n SchemaValidator,\n StoredSchema,\n} from '@dxos/echo-schema';\nimport { type GraphData, GraphModel } from '@dxos/gem-spore';\nimport { log } from '@dxos/log';\nimport { CollectionType } from '@dxos/plugin-space/types';\nimport { Filter, type ReactiveEchoObject, type Space, type Subscription } from '@dxos/react-client/echo';\n\nexport type SpaceGraphModelOptions = {\n schema?: boolean;\n};\n\ntype SchemaGraphNode = {\n id: string;\n type: 'schema';\n data: { typename: string };\n};\n\ntype ObjectGraphNode = {\n id: string;\n type: 'object';\n data: { typename: string; object: ReactiveEchoObject<any> };\n};\n\nexport type EchoGraphNode = SchemaGraphNode | ObjectGraphNode;\n\n/**\n * Converts ECHO objects to a graph.\n */\nexport class SpaceGraphModel extends GraphModel<EchoGraphNode> {\n private readonly _graph: GraphData<EchoGraphNode> = {\n nodes: [],\n links: [],\n };\n\n private _schema?: EchoSchema[];\n private _schemaSubscription?: UnsubscribeCallback;\n private _objects?: ReactiveEchoObject<any>[];\n private _objectsSubscription?: Subscription;\n\n constructor(private readonly _options: SpaceGraphModelOptions = {}) {\n super();\n }\n\n override get graph(): GraphData<EchoGraphNode> {\n return this._graph;\n }\n\n get objects(): ReactiveEchoObject<any>[] {\n return this._objects ?? [];\n }\n\n // TODO(burdon): Alternative diagram types:\n // - https://observablehq.com/@d3/radial-tree/2\n // - https://observablehq.com/@d3/disjoint-force-directed-graph/2\n // - https://observablehq.com/@mbostock/tadpoles\n // - https://observablehq.com/@d3/psr-b1919-21\n // - https://vasturiano.github.io/react-force-graph/example/basic (3D)\n\n async open(space: Space, objectId?: string) {\n // TODO(burdon): Factor out graph builder to lib (use common/graph abstraction).\n if (!this._schemaSubscription) {\n // TODO(burdon): Normalize unsubscribe callbacks and merge handlers.\n // TODO(burdon): Trigger initial subscription update.\n // TODO(burdon): Normalize subscription cb for objects, schema, etc.\n\n const schemaaQuery = space.db.schemaRegistry.query({});\n const schemas = await schemaaQuery.run();\n const onSchemaUpdate = ({ results }: { results: EchoSchema[] }) => (this._schema = results);\n this._schemaSubscription = schemaaQuery.subscribe(onSchemaUpdate);\n onSchemaUpdate({ results: schemas });\n\n this._objectsSubscription = space.db\n // TODO(burdon): ERROR: Cannot mix type and or filters.\n .query(Filter.not(Filter.or(Filter.schema(StoredSchema), Filter.schema(CollectionType))))\n .subscribe(\n ({ objects }) => {\n this._objects = objects;\n\n // Merge with current nodes.\n const currentNodes = this._graph.nodes;\n\n this._graph.nodes = [];\n this._graph.links = [];\n\n const addSchema = (typename: string) => {\n const current = currentNodes.find((node) => node.id === typename);\n if (typename) {\n this._graph.nodes.push({\n ...current,\n id: typename,\n type: 'schema',\n data: { typename },\n });\n }\n };\n\n // Runtime schema.\n space.db.graph.schemaRegistry.schemas.forEach((schema) => {\n const typename = getSchemaDXN(schema)?.toTypename();\n if (typename) {\n addSchema(typename);\n }\n });\n\n // Database Schema.\n this._schema?.forEach((schema) => {\n const typename = getSchemaDXN(schema)?.toTypename();\n if (typename) {\n addSchema(typename);\n }\n });\n\n // Database Objects.\n this._objects.forEach((object) => {\n const schema = getSchema(object);\n if (schema) {\n const typename = getSchemaDXN(schema)?.toTypename();\n if (typename) {\n const current = currentNodes.find((node) => node.id === object.id);\n this._graph.nodes.push({ ...current, id: object.id, type: 'object', data: { typename, object } });\n\n // Link to schema.\n const schemaNode = this._graph.nodes.find(\n (node) => node.type === 'schema' && node.data.typename === typename,\n );\n if (schemaNode) {\n this._graph.links.push({\n id: `${object.id}-${schemaNode.id}`,\n source: object.id,\n target: schemaNode.id,\n });\n } else {\n log.info('schema node not found', { typename });\n }\n\n // Link ot refs.\n // TODO(burdon): This isn't working.\n AST.getPropertySignatures(schema.ast).forEach((prop) => {\n if (!SchemaValidator.hasTypeAnnotation(schema, prop.name.toString(), ReferenceAnnotationId)) {\n return;\n }\n\n const value = object[String(prop.name)];\n if (value) {\n const refs = Array.isArray(value) ? value : [value];\n for (const ref of refs) {\n if (objects.findIndex((obj) => obj.id === ref.id) !== -1) {\n this._graph.links.push({\n id: `${object.id}-${String(prop.name)}-${ref.id}`,\n source: object.id,\n target: ref.id,\n });\n }\n }\n }\n });\n }\n }\n });\n\n this.triggerUpdate();\n },\n { fire: true },\n );\n }\n\n this.setSelected(objectId);\n return this;\n }\n\n close() {\n this._schemaSubscription?.();\n this._schemaSubscription = undefined;\n this._objectsSubscription?.();\n this._objectsSubscription = undefined;\n\n return this;\n }\n}\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useEffect, useState } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { type Space } from '@dxos/client/echo';\nimport { createSvgContext, SVG, SVGRoot } from '@dxos/gem-core';\nimport { useAsyncState } from '@dxos/react-ui';\n\nimport { HierarchicalEdgeBundling, RadialTree, TidyTree } from './layout';\nimport { mapGraphToTreeData, type TreeNode } from './types';\nimport { SpaceGraphModel } from '../Graph';\n\n// TODO(burdon): Create dge bundling graph using d3.hierarchy.\n// https://observablehq.com/@d3/hierarchical-edge-bundling?intent=fork\n\ntype Renderer = (svg: SVGSVGElement, data: any, options: any) => void;\n\nexport type LayoutVariant = 'tidy' | 'radial' | 'edge';\n\n// TODO(burdon): Remove slots?\nexport type TreeLayoutSlots = {\n node?: string;\n path?: string;\n text?: string;\n};\n\nexport type TreeOptions = {\n label: (d: any) => string;\n\n slots?: TreeLayoutSlots;\n radius?: number;\n\n width: number;\n height: number;\n margin?: number;\n\n padding?: number;\n // Radius of nodes.\n r?: number;\n};\n\nexport const defaultTreeLayoutSlots: TreeLayoutSlots = {\n node: 'fill-blue-600',\n path: 'fill-none stroke-blue-400 stroke-[0.5px]',\n text: 'stroke-[0.5px] stroke-neutral-700 text-xs', // TODO(burdon): Create box instead of halo.\n};\n\nconst renderers = new Map<LayoutVariant, Renderer>([\n ['tidy', TidyTree],\n ['radial', RadialTree],\n ['edge', HierarchicalEdgeBundling],\n]);\n\nexport type TreeComponentProps<N = unknown> = {\n space: Space;\n selected?: string;\n variant?: LayoutVariant;\n onNodeClick?: (node?: N) => void;\n};\n\n// TODO(burdon): Label accessor.\nexport const Tree = <N,>({ space, selected, variant = 'tidy', onNodeClick }: TreeComponentProps<N>) => {\n const [model] = useAsyncState(\n async () => (space ? new SpaceGraphModel().open(space, selected) : undefined),\n [space, selected],\n );\n\n const [tree, setTree] = useState<TreeNode>();\n useEffect(() => {\n return model?.subscribe(() => {\n const tree = mapGraphToTreeData(model);\n setTree(tree);\n }, true);\n }, [model]);\n\n const context = createSvgContext();\n const { ref, width = 0, height = 0 } = useResizeDetector();\n\n useEffect(() => {\n if (width && height) {\n const size = Math.min(width, height);\n const radius = size * 0.4;\n const options = {\n // TODO(burdon): Type.\n label: (d: any) => d.label ?? d.id,\n width,\n height,\n radius,\n marginLeft: (width - radius * 2) / 2,\n marginRight: (width - radius * 2) / 2,\n marginTop: (height - radius * 2) / 2,\n marginBottom: (height - radius * 2) / 2,\n slots: defaultTreeLayoutSlots,\n };\n\n if (tree) {\n const renderer = renderers.get(variant);\n renderer?.(context.ref.current!, tree, options);\n }\n }\n }, [tree, width, height]);\n\n // TODO(burdon): Provider should expand.\n return (\n <div ref={ref} className='flex grow overflow-hidden' onClick={() => onNodeClick?.()}>\n <SVGRoot context={context}>\n <SVG />\n </SVGRoot>\n </div>\n );\n};\n", "//\n// Copyright 2023 DXOS.org\n// Copyright 2022 Observable, Inc.\n//\n\nimport * as d3 from 'd3';\nimport { type HierarchyNode } from 'd3-hierarchy';\n\nimport { type TreeOptions } from '../Tree';\nimport { type TreeNode } from '../types';\n\n// Create hierarchical ID.\n// eslint-disable-next-line unused-imports/no-unused-vars\nconst getId = (node: HierarchyNode<TreeNode>): string =>\n `${node.parent ? getId(node.parent) + '/' : ''}${node.data.id.slice(0, 4)}`;\n\n// https://github.com/d3/d3-hierarchy\n// https://observablehq.com/@d3/hierarchical-edge-bundling?intent=fork\nconst HierarchicalEdgeBundling = (s: SVGSVGElement, data: TreeNode, options: TreeOptions) => {\n const svg = d3.select(s);\n svg.selectAll('*').remove();\n\n const { radius = 600, padding = 100, slots } = options;\n\n // https://d3js.org/d3-hierarchy/hierarchy\n const root = d3.hierarchy(flatten(data));\n // .sort((a, b) => d3.ascending(a.height, b.height) || d3.ascending(getName(a.data), getName(b.data)));\n\n const tree = d3.cluster<TreeNode>().size([2 * Math.PI, radius - padding]);\n const layout = tree(addLinks(root));\n\n // eslint-disable-next-line unused-imports/no-unused-vars\n const node = svg\n .append('g')\n .selectAll()\n .data(layout.leaves())\n .join('g')\n .attr('transform', (d) => `rotate(${d.x * (180 / Math.PI) - 90}) translate(${d.y},0)`)\n .append('text')\n .attr('class', slots?.text ?? '')\n .attr('dy', '0.31em') // TODO(burdon): Based on font size.\n .attr('x', (d) => (d.x < Math.PI ? 6 : -6))\n .attr('text-anchor', (d) => (d.x < Math.PI ? 'start' : 'end'))\n .attr('transform', (d) => (d.x >= Math.PI ? 'rotate(180)' : null))\n // .text((d: any) => d.data.id)\n // .each(function (d: any) {\n // d.text = this;\n // })\n // .on('mouseover', overed)\n // .on('mouseout', outed)\n .call(\n (text) => text.text((d: any) => d.data.id.slice(0, 8)),\n // .text((d: any) => `${getId(d)} [${[(d as any).outgoing?.length ?? 0]}]`),\n );\n\n // https://d3js.org/d3-shape/radial-line\n const line = d3\n .lineRadial()\n .curve(d3.curveBundle.beta(0.85))\n .radius((d: any) => d.y)\n .angle((d: any) => d.x);\n\n // eslint-disable-next-line unused-imports/no-unused-vars\n const links = svg\n .append('g')\n .selectAll()\n .data(layout.leaves().flatMap((leaf: any) => leaf.outgoing))\n .join('path')\n .style('mix-blend-mode', 'multiply')\n .attr('class', slots?.path ?? '')\n .attr('d', ([i, o]) => {\n return line(i.path(o));\n })\n .each(function (d) {\n d.path = this;\n });\n\n // function overed(event: any, d: X) {\n // link.style('mix-blend-mode', null);\n // d3.select(this).attr('font-weight', 'bold');\n // d3.selectAll(d.incoming.map((d) => d.path))\n // .attr('stroke', color.in)\n // .raise();\n // d3.selectAll((d as any).incoming.map(([d]) => d.text))\n // .attr('fill', color.in)\n // .attr('font-weight', 'bold');\n // d3.selectAll(d.outgoing.map((d) => d.path))\n // .attr('stroke', color.out)\n // .raise();\n // d3.selectAll(d.outgoing.map(([, d]) => d.text))\n // .attr('fill', color.out)\n // .attr('font-weight', 'bold');\n // }\n\n // function outed(event: any, d: HierarchyNode<Datum>) {\n // // @ts-ignore\n // d3.select(this).attr('font-weight', null);\n // d3.selectAll(d.incoming.map((d) => d.path)).attr('stroke', null);\n // d3.selectAll(d.incoming.map(([d]) => d.text))\n // .attr('fill', null)\n // .attr('font-weight', null);\n // d3.selectAll(d.outgoing.map((d) => d.path)).attr('stroke', null);\n // d3.selectAll(d.outgoing.map(([, d]) => d.text))\n // .attr('fill', null)\n // .attr('font-weight', null);\n // }\n};\n\n// Monkey-patch with incoming/outgoing nodes.\nconst addLinks = (root: HierarchyNode<TreeNode>) => {\n // Map of nodes indexed by ID.\n const nodes = new Map(root.descendants().map((d) => [d.data.id, d]));\n const parents = root.descendants().reduce((map, d) => {\n if (d.children?.length) {\n map.set(d.data.id, d);\n }\n return map;\n }, new Map<string, HierarchyNode<TreeNode>>());\n\n for (const d of root.leaves()) {\n // (d as any).incoming = [];\n\n const parent = parents.get(d.data.id);\n if (parent) {\n // Skip the first node which is a placeholder created by flatten().\n (d as any).outgoing =\n parent.data.children?.slice(1).map((child) => {\n return [d, nodes.get(child.id)!];\n }) ?? [];\n } else {\n (d as any).outgoing = [];\n }\n }\n\n // for (const d of root.leaves()) {\n // for (const [_, o] of (d as any).outgoing) {\n // o.incoming.push(o);\n // }\n // }\n\n return root;\n};\n\n/**\n * We are using a hierarchy in order to group nodes by parent, but we want the parent\n * nodes to be positioned at the first level along with all descendents.\n * So we add a placeholder for all parents at the head of each group.\n * @param node\n */\nconst flatten = (node: TreeNode) => {\n const clone: TreeNode = {\n id: node.id,\n };\n\n // TODO(burdon): NOTE: Should exclude schema (since requires a tree).\n if (node.children?.length) {\n const children = node.children.map((child) => flatten(child));\n clone.children = [{ id: node.id }, ...children];\n }\n\n return clone;\n};\n\nexport default HierarchicalEdgeBundling;\n", "//\n// Copyright 2023 DXOS.org\n// Copyright 2022 Observable, Inc.\n//\n\nimport * as d3 from 'd3';\n\nimport { type TreeOptions } from '../Tree';\n\n// Released under the ISC license.\n// https://observablehq.com/@d3/radial-tree\n// https://observablehq.com/@d3/tree\nconst RadialTree = (s: SVGSVGElement, data: any, options: TreeOptions) => {\n const svg = d3.select(s);\n svg.selectAll('*').remove();\n\n const {\n label, // given a node d, returns the display name\n radius = 400,\n r = 4, // radius of nodes\n slots,\n } = options;\n\n const arc = 2 * Math.PI;\n\n const root = d3.hierarchy(data);\n\n // Sort the nodes.\n // if (sort) {\n // root.sort(sort);\n // }\n\n // Compute labels and titles.\n const descendants = root.descendants();\n const getLabel = label === null ? null : descendants.map((d) => label(d.data));\n\n // Compute the layout.\n const layout = d3\n .tree()\n .size([arc, radius])\n .separation((a: any, b: any) => (a.parent === b.parent ? 1 : 2) / a.depth);\n layout(root);\n\n // Links.\n svg\n .append('g')\n .selectAll('path')\n .data(root.links())\n .join('path')\n .attr('class', slots?.path ?? '')\n .attr(\n 'd',\n d3\n .linkRadial()\n .angle((d: any) => d.x + Math.PI / 2)\n .radius((d: any) => d.y) as any,\n );\n\n // Nodes.\n const node = svg\n .append('g')\n .selectAll('a')\n .data(root.descendants())\n .join('a')\n // .attr('xlink:href', link == null ? null : (d) => link(d.data, d))\n // .attr('target', link == null ? null : linkTarget)\n .attr('transform', (d: any) => `rotate(${(d.x * 180) / Math.PI}) translate(${d.y},0)`);\n\n node\n .append('circle')\n .attr('class', slots?.node ?? '')\n .attr('r', r);\n\n // if (title != null) {\n // node.append('title').text((d) => title(d.data, d));\n // }\n\n // Text.\n if (getLabel) {\n node\n .append('text')\n .attr('transform', (d: any) => `rotate(${d.x >= Math.PI ? 180 : 0})`)\n .attr('dy', '0.32em')\n // eslint-disable-next-line no-mixed-operators\n .attr('x', (d: any) => (d.x < Math.PI === !d.children ? 6 : -6))\n // eslint-disable-next-line no-mixed-operators\n .attr('text-anchor', (d: any) => (d.x < Math.PI === !d.children ? 'start' : 'end'))\n // .attr('paint-order', 'stroke')\n .attr('class', slots?.text ?? '')\n .text((d, i) => getLabel[i]);\n }\n\n return svg.node();\n};\n\nexport default RadialTree;\n", "//\n// Copyright 2023 DXOS.org\n// Copyright 2021 Observable, Inc.\n//\n\nimport * as d3 from 'd3';\n\nimport { type TreeOptions } from '../Tree';\n\n// Released under the ISC license.\n// https://observablehq.com/@d3/tree\nconst TidyTree = (s: SVGSVGElement, data: any, options: TreeOptions) => {\n const svg = d3.select(s);\n svg.selectAll('*').remove();\n\n const { label, width, height, r = 4, padding = 4, margin = 60, slots } = options;\n\n const root = d3.hierarchy(data);\n\n // Compute labels and titles.\n const descendants = root.descendants();\n const getLabel = label == null ? null : descendants.map((d) => label(d.data));\n\n // Compute the layout.\n const dx = 16;\n const dy = width / (root.height + padding);\n const layout = d3.tree().nodeSize([dx, dy]);\n layout(root);\n\n // Center the tree.\n let x0 = Infinity;\n let x1 = -x0;\n let y0 = Infinity;\n let y1 = -y0;\n root.each((d: any) => {\n if (d.x > x1) {\n x1 = d.x;\n }\n if (d.x < x0) {\n x0 = d.x;\n }\n if (d.y > y1) {\n y1 = d.y;\n }\n if (d.y < y0) {\n y0 = d.y;\n }\n });\n\n // TODO(burdon): Option to expand.\n // NOTE: x and y are flipped.\n const sx = Math.min(2, Math.max(1, (height - margin * 2) / (x1 - x0)));\n const oy = -(width - (y1 - y0)) / 2;\n\n // Links.\n svg\n .append('g')\n .selectAll('path')\n .data(root.links())\n .join('path')\n .attr('class', slots?.path ?? '')\n .attr(\n 'd',\n d3\n .link(d3.curveBumpX)\n .x((d: any) => d.y + oy)\n .y((d: any) => d.x * sx) as any,\n );\n\n // Nodes.\n const node = svg\n .append('g')\n .selectAll('a')\n .data(root.descendants())\n .join('a')\n // .attr('xlink:href', link == null ? null : (d) => link(d.data, d))\n // .attr('target', link == null ? null : linkTarget)\n .attr('transform', (d: any) => `translate(${d.y + oy},${d.x * sx})`);\n\n node\n .append('circle')\n .attr('class', slots?.node ?? '')\n .attr('r', r);\n\n // if (title != null) {\n // node.append('title').text((d) => title(d.data, d));\n // }\n\n if (getLabel) {\n node\n .append('text')\n\n .attr('dy', '0.32em')\n .attr('x', (d) => (d.children ? -6 : 6))\n .attr('text-anchor', (d) => (d.children ? 'end' : 'start'))\n // .attr('paint-order', 'stroke')\n .attr('class', slots?.text ?? '')\n .text((d, i) => getLabel[i]);\n }\n};\n\nexport default TidyTree;\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport type { GraphModel } from '@dxos/gem-spore';\n\nexport type TreeNode = {\n id: string;\n label?: string;\n children?: TreeNode[];\n};\n\nexport const mapGraphToTreeData = <N>(model: GraphModel<N>, maxDepth = 8): TreeNode | undefined => {\n const mapNode = (node: N, depth = 0): TreeNode => {\n const treeNode: TreeNode = {\n id: model.idAccessor(node),\n label: model.idAccessor(node).slice(0, 8),\n };\n\n const links = model.graph.links.filter((link) => link.source === treeNode.id);\n if (depth < maxDepth) {\n treeNode.children = links.map((link) =>\n mapNode(model.graph.nodes.find((node) => model.idAccessor(node) === link.target)!, depth + 1),\n );\n }\n\n return treeNode;\n };\n\n let data: TreeNode | undefined;\n if (model.selected) {\n const node = model.graph.nodes.find((node) => model.idAccessor(node) === model.selected);\n if (node) {\n data = mapNode(node);\n }\n }\n\n return data;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { forceLink, forceManyBody } from 'd3';\nimport ForceGraph from 'force-graph';\nimport React, { type FC, useEffect, useMemo, useRef, useState } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { getTypename, type ReactiveEchoObject, type Space } from '@dxos/client/echo';\nimport { createSvgContext, defaultGridStyles, Grid, SVG, SVGRoot, Zoom } from '@dxos/gem-core';\nimport {\n defaultStyles,\n Graph as GraphComponent,\n GraphForceProjector,\n type GraphLayoutNode,\n Markers,\n} from '@dxos/gem-spore';\nimport { filterObjectsSync, type SearchResult } from '@dxos/plugin-search';\nimport { useAsyncState, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\nimport '@dxos/gem-spore/styles';\n\nimport { type EchoGraphNode, SpaceGraphModel } from './graph-model';\nimport { Tree } from '../Tree';\n\ntype Slots = {\n root?: { className?: string };\n grid?: { className?: string };\n};\n\nconst slots: Slots = {};\n\nconst colors = [\n '[&>circle]:!fill-black-300 [&>circle]:!stroke-black-600',\n '[&>circle]:!fill-slate-300 [&>circle]:!stroke-slate-600',\n '[&>circle]:!fill-green-300 [&>circle]:!stroke-green-600',\n '[&>circle]:!fill-sky-300 [&>circle]:!stroke-sky-600',\n '[&>circle]:!fill-cyan-300 [&>circle]:!stroke-cyan-600',\n '[&>circle]:!fill-rose-300 [&>circle]:!stroke-rose-600',\n '[&>circle]:!fill-purple-300 [&>circle]:!stroke-purple-600',\n '[&>circle]:!fill-orange-300 [&>circle]:!stroke-orange-600',\n '[&>circle]:!fill-teal-300 [&>circle]:!stroke-teal-600',\n '[&>circle]:!fill-indigo-300 [&>circle]:!stroke-indigo-600',\n];\n\nexport type GraphProps = {\n space: Space;\n match?: RegExp;\n grid?: boolean;\n svg?: boolean;\n};\n\nexport const Graph: FC<GraphProps> = ({ space, match, grid, svg }) => {\n const { themeMode } = useThemeContext();\n const [selected, setSelected] = useState<string>();\n\n const [model] = useAsyncState(\n async () => (space ? new SpaceGraphModel({ schema: true }).open(space) : undefined),\n [space],\n );\n\n const context = createSvgContext();\n const projector = useMemo(\n () =>\n new GraphForceProjector<EchoGraphNode>(context, {\n forces: {\n manyBody: {\n strength: -100,\n },\n link: {\n distance: 100,\n },\n radial: {\n radius: 150,\n strength: 0.05,\n },\n },\n attributes: {\n radius: (node: GraphLayoutNode<EchoGraphNode>) => (node.data?.type === 'schema' ? 12 : 8),\n },\n }),\n [],\n );\n\n const filteredRef = useRef<SearchResult[]>();\n filteredRef.current = filterObjectsSync(model?.objects ?? [], match);\n useEffect(() => {\n void projector.start();\n }, [match]);\n\n const [colorMap] = useState(new Map<string, string>());\n\n // https://github.com/vasturiano/force-graph\n const { ref, width, height } = useResizeDetector();\n const rootRef = useRef<HTMLDivElement>(null);\n const forceGraph = useRef<ForceGraph>();\n\n useEffect(() => {\n if (rootRef.current) {\n forceGraph.current = new ForceGraph(rootRef.current)\n .nodeRelSize(6)\n .nodeLabel((node: any) => {\n if (node.type === 'schema') {\n return node.data.typename;\n }\n\n return node.id;\n })\n .nodeAutoColorBy((node: any) => (node.type === 'schema' ? 'schema' : node.data.typename))\n .linkColor(() => 'rgba(255,255,255,0.25)');\n }\n\n return () => {\n forceGraph.current?.pauseAnimation().graphData({ nodes: [], links: [] });\n forceGraph.current = undefined;\n };\n }, []);\n\n // Update.\n useEffect(() => {\n if (forceGraph.current && width && height && model) {\n forceGraph.current\n .pauseAnimation()\n .width(width)\n .height(height)\n .onEngineStop(() => {\n forceGraph.current?.zoomToFit(400, 40);\n })\n\n // https://github.com/vasturiano/force-graph?tab=readme-ov-file#force-engine-d3-force-configuration\n // .d3Force('center', forceCenter().strength(0.9))\n .d3Force('link', forceLink().distance(160).strength(0.5))\n .d3Force('charge', forceManyBody().strength(-30))\n // .d3AlphaDecay(0.0228)\n // .d3VelocityDecay(0.4)\n .warmupTicks(100)\n // .cooldownTime(1000)\n\n //\n .graphData(model.graph)\n .resumeAnimation();\n }\n }, [model, width, height]);\n\n const handleZoomToFit = () => {\n forceGraph.current?.zoomToFit(400, 40);\n };\n\n if (!svg) {\n return (\n <div ref={ref} className='relative grow' onClick={handleZoomToFit}>\n <div ref={rootRef} className='absolute inset-0' />\n </div>\n );\n }\n\n if (selected) {\n return <Tree space={space} selected={selected} variant='tidy' onNodeClick={() => setSelected(undefined)} />;\n }\n\n return (\n <SVGRoot context={context}>\n <SVG className={mx(defaultStyles, slots?.root?.className)}>\n <Markers arrowSize={6} />\n {grid && <Grid className={slots?.grid?.className ?? defaultGridStyles(themeMode)} />}\n <Zoom extent={[1 / 2, 4]}>\n <GraphComponent\n model={model}\n projector={projector}\n drag\n arrows\n onSelect={(node) => setSelected(node?.data?.id)}\n labels={{\n text: (node: GraphLayoutNode<ReactiveEchoObject<any>>) => {\n if (filteredRef.current?.length && !filteredRef.current.some((object) => object.id === node.data?.id)) {\n return undefined;\n }\n\n // TODO(burdon): Use schema.\n return node.data?.label ?? node.data?.title ?? node.data?.name ?? node.data?.id.slice(0, 8);\n },\n }}\n attributes={{\n node: (node: GraphLayoutNode<ReactiveEchoObject<any>>) => {\n let className: string | undefined;\n if (node.data) {\n const { object } = node.data;\n if (object) {\n const typename = getTypename(object);\n if (typename) {\n className = colorMap.get(typename);\n if (!className) {\n className = colors[colorMap.size % colors.length];\n colorMap.set(typename, className);\n }\n }\n }\n }\n\n const selected = filteredRef.current?.some((object) => object.id === node.data?.id);\n const blur = !selected && !!filteredRef.current?.length;\n return {\n class: mx(className, blur && 'opacity-70'),\n };\n },\n link: () => ({\n class: '[&>path]:!stroke-neutral-300 dark:[&>path]:!stroke-neutral-700',\n }),\n }}\n />\n </Zoom>\n </SVG>\n </SVGRoot>\n );\n};\n"],
5
- "mappings": "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",
6
- "names": ["import_react", "import_react_resize_detector", "import_echo", "import_gem_core", "import_gem_spore", "import_react_ui", "SpaceGraphModel", "GraphModel", "constructor", "_options", "_graph", "nodes", "links", "graph", "objects", "_objects", "open", "space", "objectId", "_schemaSubscription", "schemaaQuery", "db", "schemaRegistry", "query", "schemas", "run", "onSchemaUpdate", "results", "_schema", "subscribe", "_objectsSubscription", "Filter", "not", "or", "schema", "StoredSchema", "CollectionType", "currentNodes", "addSchema", "typename", "current", "find", "node", "id", "push", "type", "data", "forEach", "getSchemaDXN", "toTypename", "object", "getSchema", "schemaNode", "source", "target", "log", "info", "AST", "getPropertySignatures", "ast", "prop", "SchemaValidator", "hasTypeAnnotation", "name", "toString", "ReferenceAnnotationId", "value", "String", "refs", "Array", "isArray", "ref", "findIndex", "obj", "triggerUpdate", "fire", "setSelected", "close", "undefined", "HierarchicalEdgeBundling", "s", "options", "svg", "select", "selectAll", "remove", "radius", "padding", "slots", "root", "hierarchy", "flatten", "tree", "cluster", "size", "Math", "PI", "layout", "addLinks", "append", "leaves", "join", "attr", "d", "x", "y", "text", "call", "slice", "line", "lineRadial", "curve", "curveBundle", "beta", "angle", "flatMap", "leaf", "outgoing", "style", "path", "i", "o", "each", "Map", "descendants", "map", "parents", "reduce", "children", "length", "set", "parent", "get", "child", "clone", "RadialTree", "label", "r", "arc", "getLabel", "separation", "a", "b", "depth", "linkRadial", "TidyTree", "width", "height", "margin", "dx", "dy", "nodeSize", "x0", "Infinity", "x1", "y0", "y1", "sx", "min", "max", "oy", "link", "curveBumpX", "mapGraphToTreeData", "model", "maxDepth", "mapNode", "treeNode", "idAccessor", "filter", "selected", "colors", "Graph", "match", "grid", "themeMode", "useThemeContext", "useState", "useAsyncState", "context", "createSvgContext", "projector", "useMemo", "GraphForceProjector", "forces", "manyBody", "strength", "distance", "radial", "attributes", "filteredRef", "useRef", "filterObjectsSync", "useEffect", "start", "colorMap", "useResizeDetector", "rootRef", "forceGraph", "ForceGraph", "nodeRelSize", "nodeLabel", "nodeAutoColorBy", "linkColor", "pauseAnimation", "graphData", "onEngineStop", "zoomToFit", "d3Force", "forceLink", "forceManyBody", "warmupTicks", "resumeAnimation", "handleZoomToFit", "React", "div", "className", "onClick", "Tree", "variant", "onNodeClick", "SVGRoot", "SVG", "mx", "defaultStyles", "Markers", "arrowSize", "Grid", "defaultGridStyles", "Zoom", "extent", "GraphComponent", "drag", "arrows", "onSelect", "labels", "some", "title", "getTypename", "blur", "class", "defaultTreeLayoutSlots", "renderers", "setTree", "marginLeft", "marginRight", "marginTop", "marginBottom", "renderer"]
7
- }
@@ -1,548 +0,0 @@
1
- import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
2
-
3
- // packages/plugins/experimental/plugin-explorer/src/components/Graph/graph-model.ts
4
- import { getSchema, getSchemaDXN, AST, ReferenceAnnotationId, SchemaValidator, StoredSchema } from "@dxos/echo-schema";
5
- import { GraphModel } from "@dxos/gem-spore";
6
- import { log } from "@dxos/log";
7
- import { CollectionType } from "@dxos/plugin-space/types";
8
- import { Filter } from "@dxos/react-client/echo";
9
- var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-explorer/src/components/Graph/graph-model.ts";
10
- var SpaceGraphModel = class extends GraphModel {
11
- constructor(_options = {}) {
12
- super();
13
- this._options = _options;
14
- this._graph = {
15
- nodes: [],
16
- links: []
17
- };
18
- }
19
- get graph() {
20
- return this._graph;
21
- }
22
- get objects() {
23
- return this._objects ?? [];
24
- }
25
- // TODO(burdon): Alternative diagram types:
26
- // - https://observablehq.com/@d3/radial-tree/2
27
- // - https://observablehq.com/@d3/disjoint-force-directed-graph/2
28
- // - https://observablehq.com/@mbostock/tadpoles
29
- // - https://observablehq.com/@d3/psr-b1919-21
30
- // - https://vasturiano.github.io/react-force-graph/example/basic (3D)
31
- async open(space, objectId) {
32
- if (!this._schemaSubscription) {
33
- const schemaaQuery = space.db.schemaRegistry.query({});
34
- const schemas = await schemaaQuery.run();
35
- const onSchemaUpdate = ({ results }) => this._schema = results;
36
- this._schemaSubscription = schemaaQuery.subscribe(onSchemaUpdate);
37
- onSchemaUpdate({
38
- results: schemas
39
- });
40
- this._objectsSubscription = space.db.query(Filter.not(Filter.or(Filter.schema(StoredSchema), Filter.schema(CollectionType)))).subscribe(({ objects }) => {
41
- this._objects = objects;
42
- const currentNodes = this._graph.nodes;
43
- this._graph.nodes = [];
44
- this._graph.links = [];
45
- const addSchema = (typename) => {
46
- const current = currentNodes.find((node) => node.id === typename);
47
- if (typename) {
48
- this._graph.nodes.push({
49
- ...current,
50
- id: typename,
51
- type: "schema",
52
- data: {
53
- typename
54
- }
55
- });
56
- }
57
- };
58
- space.db.graph.schemaRegistry.schemas.forEach((schema) => {
59
- const typename = getSchemaDXN(schema)?.toTypename();
60
- if (typename) {
61
- addSchema(typename);
62
- }
63
- });
64
- this._schema?.forEach((schema) => {
65
- const typename = getSchemaDXN(schema)?.toTypename();
66
- if (typename) {
67
- addSchema(typename);
68
- }
69
- });
70
- this._objects.forEach((object) => {
71
- const schema = getSchema(object);
72
- if (schema) {
73
- const typename = getSchemaDXN(schema)?.toTypename();
74
- if (typename) {
75
- const current = currentNodes.find((node) => node.id === object.id);
76
- this._graph.nodes.push({
77
- ...current,
78
- id: object.id,
79
- type: "object",
80
- data: {
81
- typename,
82
- object
83
- }
84
- });
85
- const schemaNode = this._graph.nodes.find((node) => node.type === "schema" && node.data.typename === typename);
86
- if (schemaNode) {
87
- this._graph.links.push({
88
- id: `${object.id}-${schemaNode.id}`,
89
- source: object.id,
90
- target: schemaNode.id
91
- });
92
- } else {
93
- log.info("schema node not found", {
94
- typename
95
- }, {
96
- F: __dxlog_file,
97
- L: 145,
98
- S: this,
99
- C: (f, a) => f(...a)
100
- });
101
- }
102
- AST.getPropertySignatures(schema.ast).forEach((prop) => {
103
- if (!SchemaValidator.hasTypeAnnotation(schema, prop.name.toString(), ReferenceAnnotationId)) {
104
- return;
105
- }
106
- const value = object[String(prop.name)];
107
- if (value) {
108
- const refs = Array.isArray(value) ? value : [
109
- value
110
- ];
111
- for (const ref of refs) {
112
- if (objects.findIndex((obj) => obj.id === ref.id) !== -1) {
113
- this._graph.links.push({
114
- id: `${object.id}-${String(prop.name)}-${ref.id}`,
115
- source: object.id,
116
- target: ref.id
117
- });
118
- }
119
- }
120
- }
121
- });
122
- }
123
- }
124
- });
125
- this.triggerUpdate();
126
- }, {
127
- fire: true
128
- });
129
- }
130
- this.setSelected(objectId);
131
- return this;
132
- }
133
- close() {
134
- this._schemaSubscription?.();
135
- this._schemaSubscription = void 0;
136
- this._objectsSubscription?.();
137
- this._objectsSubscription = void 0;
138
- return this;
139
- }
140
- };
141
-
142
- // packages/plugins/experimental/plugin-explorer/src/components/Tree/Tree.tsx
143
- import React2, { useEffect as useEffect2, useState as useState2 } from "react";
144
- import { useResizeDetector as useResizeDetector2 } from "react-resize-detector";
145
- import { createSvgContext as createSvgContext2, SVG as SVG2, SVGRoot as SVGRoot2 } from "@dxos/gem-core";
146
- import { useAsyncState as useAsyncState2 } from "@dxos/react-ui";
147
-
148
- // packages/plugins/experimental/plugin-explorer/src/components/Tree/layout/HierarchicalEdgeBundling.ts
149
- import * as d3 from "d3";
150
- var HierarchicalEdgeBundling = (s, data, options) => {
151
- const svg = d3.select(s);
152
- svg.selectAll("*").remove();
153
- const { radius = 600, padding = 100, slots: slots2 } = options;
154
- const root = d3.hierarchy(flatten(data));
155
- const tree3 = d3.cluster().size([
156
- 2 * Math.PI,
157
- radius - padding
158
- ]);
159
- const layout = tree3(addLinks(root));
160
- 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", slots2?.text ?? "").attr("dy", "0.31em").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).call((text) => text.text((d) => d.data.id.slice(0, 8)));
161
- const line = d3.lineRadial().curve(d3.curveBundle.beta(0.85)).radius((d) => d.y).angle((d) => d.x);
162
- const links = svg.append("g").selectAll().data(layout.leaves().flatMap((leaf) => leaf.outgoing)).join("path").style("mix-blend-mode", "multiply").attr("class", slots2?.path ?? "").attr("d", ([i, o]) => {
163
- return line(i.path(o));
164
- }).each(function(d) {
165
- d.path = this;
166
- });
167
- };
168
- var addLinks = (root) => {
169
- const nodes = new Map(root.descendants().map((d) => [
170
- d.data.id,
171
- d
172
- ]));
173
- const parents = root.descendants().reduce((map, d) => {
174
- if (d.children?.length) {
175
- map.set(d.data.id, d);
176
- }
177
- return map;
178
- }, /* @__PURE__ */ new Map());
179
- for (const d of root.leaves()) {
180
- const parent = parents.get(d.data.id);
181
- if (parent) {
182
- d.outgoing = parent.data.children?.slice(1).map((child) => {
183
- return [
184
- d,
185
- nodes.get(child.id)
186
- ];
187
- }) ?? [];
188
- } else {
189
- d.outgoing = [];
190
- }
191
- }
192
- return root;
193
- };
194
- var flatten = (node) => {
195
- const clone = {
196
- id: node.id
197
- };
198
- if (node.children?.length) {
199
- const children = node.children.map((child) => flatten(child));
200
- clone.children = [
201
- {
202
- id: node.id
203
- },
204
- ...children
205
- ];
206
- }
207
- return clone;
208
- };
209
- var HierarchicalEdgeBundling_default = HierarchicalEdgeBundling;
210
-
211
- // packages/plugins/experimental/plugin-explorer/src/components/Tree/layout/RadialTree.ts
212
- import * as d32 from "d3";
213
- var RadialTree = (s, data, options) => {
214
- const svg = d32.select(s);
215
- svg.selectAll("*").remove();
216
- const { label, radius = 400, r = 4, slots: slots2 } = options;
217
- const arc = 2 * Math.PI;
218
- const root = d32.hierarchy(data);
219
- const descendants = root.descendants();
220
- const getLabel = label === null ? null : descendants.map((d) => label(d.data));
221
- const layout = d32.tree().size([
222
- arc,
223
- radius
224
- ]).separation((a, b) => (a.parent === b.parent ? 1 : 2) / a.depth);
225
- layout(root);
226
- svg.append("g").selectAll("path").data(root.links()).join("path").attr("class", slots2?.path ?? "").attr("d", d32.linkRadial().angle((d) => d.x + Math.PI / 2).radius((d) => d.y));
227
- const node = svg.append("g").selectAll("a").data(root.descendants()).join("a").attr("transform", (d) => `rotate(${d.x * 180 / Math.PI}) translate(${d.y},0)`);
228
- node.append("circle").attr("class", slots2?.node ?? "").attr("r", r);
229
- if (getLabel) {
230
- node.append("text").attr("transform", (d) => `rotate(${d.x >= Math.PI ? 180 : 0})`).attr("dy", "0.32em").attr("x", (d) => d.x < Math.PI === !d.children ? 6 : -6).attr("text-anchor", (d) => d.x < Math.PI === !d.children ? "start" : "end").attr("class", slots2?.text ?? "").text((d, i) => getLabel[i]);
231
- }
232
- return svg.node();
233
- };
234
- var RadialTree_default = RadialTree;
235
-
236
- // packages/plugins/experimental/plugin-explorer/src/components/Tree/layout/TidyTree.ts
237
- import * as d33 from "d3";
238
- var TidyTree = (s, data, options) => {
239
- const svg = d33.select(s);
240
- svg.selectAll("*").remove();
241
- const { label, width, height, r = 4, padding = 4, margin = 60, slots: slots2 } = options;
242
- const root = d33.hierarchy(data);
243
- const descendants = root.descendants();
244
- const getLabel = label == null ? null : descendants.map((d) => label(d.data));
245
- const dx = 16;
246
- const dy = width / (root.height + padding);
247
- const layout = d33.tree().nodeSize([
248
- dx,
249
- dy
250
- ]);
251
- layout(root);
252
- let x0 = Infinity;
253
- let x1 = -x0;
254
- let y0 = Infinity;
255
- let y1 = -y0;
256
- root.each((d) => {
257
- if (d.x > x1) {
258
- x1 = d.x;
259
- }
260
- if (d.x < x0) {
261
- x0 = d.x;
262
- }
263
- if (d.y > y1) {
264
- y1 = d.y;
265
- }
266
- if (d.y < y0) {
267
- y0 = d.y;
268
- }
269
- });
270
- const sx = Math.min(2, Math.max(1, (height - margin * 2) / (x1 - x0)));
271
- const oy = -(width - (y1 - y0)) / 2;
272
- svg.append("g").selectAll("path").data(root.links()).join("path").attr("class", slots2?.path ?? "").attr("d", d33.link(d33.curveBumpX).x((d) => d.y + oy).y((d) => d.x * sx));
273
- const node = svg.append("g").selectAll("a").data(root.descendants()).join("a").attr("transform", (d) => `translate(${d.y + oy},${d.x * sx})`);
274
- node.append("circle").attr("class", slots2?.node ?? "").attr("r", r);
275
- if (getLabel) {
276
- node.append("text").attr("dy", "0.32em").attr("x", (d) => d.children ? -6 : 6).attr("text-anchor", (d) => d.children ? "end" : "start").attr("class", slots2?.text ?? "").text((d, i) => getLabel[i]);
277
- }
278
- };
279
- var TidyTree_default = TidyTree;
280
-
281
- // packages/plugins/experimental/plugin-explorer/src/components/Tree/types.ts
282
- var mapGraphToTreeData = (model, maxDepth = 8) => {
283
- const mapNode = (node, depth = 0) => {
284
- const treeNode = {
285
- id: model.idAccessor(node),
286
- label: model.idAccessor(node).slice(0, 8)
287
- };
288
- const links = model.graph.links.filter((link2) => link2.source === treeNode.id);
289
- if (depth < maxDepth) {
290
- treeNode.children = links.map((link2) => mapNode(model.graph.nodes.find((node2) => model.idAccessor(node2) === link2.target), depth + 1));
291
- }
292
- return treeNode;
293
- };
294
- let data;
295
- if (model.selected) {
296
- const node = model.graph.nodes.find((node2) => model.idAccessor(node2) === model.selected);
297
- if (node) {
298
- data = mapNode(node);
299
- }
300
- }
301
- return data;
302
- };
303
-
304
- // packages/plugins/experimental/plugin-explorer/src/components/Graph/Graph.tsx
305
- import { forceLink, forceManyBody } from "d3";
306
- import ForceGraph from "force-graph";
307
- import React, { useEffect, useMemo, useRef, useState } from "react";
308
- import { useResizeDetector } from "react-resize-detector";
309
- import { getTypename } from "@dxos/client/echo";
310
- import { createSvgContext, defaultGridStyles, Grid, SVG, SVGRoot, Zoom } from "@dxos/gem-core";
311
- import { defaultStyles, Graph as GraphComponent, GraphForceProjector, Markers } from "@dxos/gem-spore";
312
- import { filterObjectsSync } from "@dxos/plugin-search";
313
- import { useAsyncState, useThemeContext } from "@dxos/react-ui";
314
- import { mx } from "@dxos/react-ui-theme";
315
- import "@dxos/gem-spore/styles";
316
- var slots = {};
317
- var colors = [
318
- "[&>circle]:!fill-black-300 [&>circle]:!stroke-black-600",
319
- "[&>circle]:!fill-slate-300 [&>circle]:!stroke-slate-600",
320
- "[&>circle]:!fill-green-300 [&>circle]:!stroke-green-600",
321
- "[&>circle]:!fill-sky-300 [&>circle]:!stroke-sky-600",
322
- "[&>circle]:!fill-cyan-300 [&>circle]:!stroke-cyan-600",
323
- "[&>circle]:!fill-rose-300 [&>circle]:!stroke-rose-600",
324
- "[&>circle]:!fill-purple-300 [&>circle]:!stroke-purple-600",
325
- "[&>circle]:!fill-orange-300 [&>circle]:!stroke-orange-600",
326
- "[&>circle]:!fill-teal-300 [&>circle]:!stroke-teal-600",
327
- "[&>circle]:!fill-indigo-300 [&>circle]:!stroke-indigo-600"
328
- ];
329
- var Graph = ({ space, match, grid, svg }) => {
330
- const { themeMode } = useThemeContext();
331
- const [selected, setSelected] = useState();
332
- const [model] = useAsyncState(async () => space ? new SpaceGraphModel({
333
- schema: true
334
- }).open(space) : void 0, [
335
- space
336
- ]);
337
- const context = createSvgContext();
338
- const projector = useMemo(() => new GraphForceProjector(context, {
339
- forces: {
340
- manyBody: {
341
- strength: -100
342
- },
343
- link: {
344
- distance: 100
345
- },
346
- radial: {
347
- radius: 150,
348
- strength: 0.05
349
- }
350
- },
351
- attributes: {
352
- radius: (node) => node.data?.type === "schema" ? 12 : 8
353
- }
354
- }), []);
355
- const filteredRef = useRef();
356
- filteredRef.current = filterObjectsSync(model?.objects ?? [], match);
357
- useEffect(() => {
358
- void projector.start();
359
- }, [
360
- match
361
- ]);
362
- const [colorMap] = useState(/* @__PURE__ */ new Map());
363
- const { ref, width, height } = useResizeDetector();
364
- const rootRef = useRef(null);
365
- const forceGraph = useRef();
366
- useEffect(() => {
367
- if (rootRef.current) {
368
- forceGraph.current = new ForceGraph(rootRef.current).nodeRelSize(6).nodeLabel((node) => {
369
- if (node.type === "schema") {
370
- return node.data.typename;
371
- }
372
- return node.id;
373
- }).nodeAutoColorBy((node) => node.type === "schema" ? "schema" : node.data.typename).linkColor(() => "rgba(255,255,255,0.25)");
374
- }
375
- return () => {
376
- forceGraph.current?.pauseAnimation().graphData({
377
- nodes: [],
378
- links: []
379
- });
380
- forceGraph.current = void 0;
381
- };
382
- }, []);
383
- useEffect(() => {
384
- if (forceGraph.current && width && height && model) {
385
- forceGraph.current.pauseAnimation().width(width).height(height).onEngineStop(() => {
386
- forceGraph.current?.zoomToFit(400, 40);
387
- }).d3Force("link", forceLink().distance(160).strength(0.5)).d3Force("charge", forceManyBody().strength(-30)).warmupTicks(100).graphData(model.graph).resumeAnimation();
388
- }
389
- }, [
390
- model,
391
- width,
392
- height
393
- ]);
394
- const handleZoomToFit = () => {
395
- forceGraph.current?.zoomToFit(400, 40);
396
- };
397
- if (!svg) {
398
- return /* @__PURE__ */ React.createElement("div", {
399
- ref,
400
- className: "relative grow",
401
- onClick: handleZoomToFit
402
- }, /* @__PURE__ */ React.createElement("div", {
403
- ref: rootRef,
404
- className: "absolute inset-0"
405
- }));
406
- }
407
- if (selected) {
408
- return /* @__PURE__ */ React.createElement(Tree, {
409
- space,
410
- selected,
411
- variant: "tidy",
412
- onNodeClick: () => setSelected(void 0)
413
- });
414
- }
415
- return /* @__PURE__ */ React.createElement(SVGRoot, {
416
- context
417
- }, /* @__PURE__ */ React.createElement(SVG, {
418
- className: mx(defaultStyles, slots?.root?.className)
419
- }, /* @__PURE__ */ React.createElement(Markers, {
420
- arrowSize: 6
421
- }), grid && /* @__PURE__ */ React.createElement(Grid, {
422
- className: slots?.grid?.className ?? defaultGridStyles(themeMode)
423
- }), /* @__PURE__ */ React.createElement(Zoom, {
424
- extent: [
425
- 1 / 2,
426
- 4
427
- ]
428
- }, /* @__PURE__ */ React.createElement(GraphComponent, {
429
- model,
430
- projector,
431
- drag: true,
432
- arrows: true,
433
- onSelect: (node) => setSelected(node?.data?.id),
434
- labels: {
435
- text: (node) => {
436
- if (filteredRef.current?.length && !filteredRef.current.some((object) => object.id === node.data?.id)) {
437
- return void 0;
438
- }
439
- return node.data?.label ?? node.data?.title ?? node.data?.name ?? node.data?.id.slice(0, 8);
440
- }
441
- },
442
- attributes: {
443
- node: (node) => {
444
- let className;
445
- if (node.data) {
446
- const { object } = node.data;
447
- if (object) {
448
- const typename = getTypename(object);
449
- if (typename) {
450
- className = colorMap.get(typename);
451
- if (!className) {
452
- className = colors[colorMap.size % colors.length];
453
- colorMap.set(typename, className);
454
- }
455
- }
456
- }
457
- }
458
- const selected2 = filteredRef.current?.some((object) => object.id === node.data?.id);
459
- const blur = !selected2 && !!filteredRef.current?.length;
460
- return {
461
- class: mx(className, blur && "opacity-70")
462
- };
463
- },
464
- link: () => ({
465
- class: "[&>path]:!stroke-neutral-300 dark:[&>path]:!stroke-neutral-700"
466
- })
467
- }
468
- }))));
469
- };
470
-
471
- // packages/plugins/experimental/plugin-explorer/src/components/Tree/Tree.tsx
472
- var defaultTreeLayoutSlots = {
473
- node: "fill-blue-600",
474
- path: "fill-none stroke-blue-400 stroke-[0.5px]",
475
- text: "stroke-[0.5px] stroke-neutral-700 text-xs"
476
- };
477
- var renderers = /* @__PURE__ */ new Map([
478
- [
479
- "tidy",
480
- TidyTree_default
481
- ],
482
- [
483
- "radial",
484
- RadialTree_default
485
- ],
486
- [
487
- "edge",
488
- HierarchicalEdgeBundling_default
489
- ]
490
- ]);
491
- var Tree = ({ space, selected, variant = "tidy", onNodeClick }) => {
492
- const [model] = useAsyncState2(async () => space ? new SpaceGraphModel().open(space, selected) : void 0, [
493
- space,
494
- selected
495
- ]);
496
- const [tree3, setTree] = useState2();
497
- useEffect2(() => {
498
- return model?.subscribe(() => {
499
- const tree4 = mapGraphToTreeData(model);
500
- setTree(tree4);
501
- }, true);
502
- }, [
503
- model
504
- ]);
505
- const context = createSvgContext2();
506
- const { ref, width = 0, height = 0 } = useResizeDetector2();
507
- useEffect2(() => {
508
- if (width && height) {
509
- const size = Math.min(width, height);
510
- const radius = size * 0.4;
511
- const options = {
512
- // TODO(burdon): Type.
513
- label: (d) => d.label ?? d.id,
514
- width,
515
- height,
516
- radius,
517
- marginLeft: (width - radius * 2) / 2,
518
- marginRight: (width - radius * 2) / 2,
519
- marginTop: (height - radius * 2) / 2,
520
- marginBottom: (height - radius * 2) / 2,
521
- slots: defaultTreeLayoutSlots
522
- };
523
- if (tree3) {
524
- const renderer = renderers.get(variant);
525
- renderer?.(context.ref.current, tree3, options);
526
- }
527
- }
528
- }, [
529
- tree3,
530
- width,
531
- height
532
- ]);
533
- return /* @__PURE__ */ React2.createElement("div", {
534
- ref,
535
- className: "flex grow overflow-hidden",
536
- onClick: () => onNodeClick?.()
537
- }, /* @__PURE__ */ React2.createElement(SVGRoot2, {
538
- context
539
- }, /* @__PURE__ */ React2.createElement(SVG2, null)));
540
- };
541
-
542
- export {
543
- SpaceGraphModel,
544
- defaultTreeLayoutSlots,
545
- Tree,
546
- Graph
547
- };
548
- //# sourceMappingURL=chunk-3KRWHGBM.mjs.map