@dxos/plugin-explorer 0.8.4-main.dedc0f3 → 0.8.4-main.dfabb4ec29

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 (194) hide show
  1. package/dist/lib/neutral/ExplorerContainer-5TOK2ZEY.mjs +40 -0
  2. package/dist/lib/neutral/ExplorerContainer-5TOK2ZEY.mjs.map +7 -0
  3. package/dist/lib/neutral/ExplorerPlugin.mjs +26 -0
  4. package/dist/lib/neutral/ExplorerPlugin.mjs.map +7 -0
  5. package/dist/lib/neutral/capabilities/index.mjs +11 -0
  6. package/dist/lib/neutral/capabilities/index.mjs.map +7 -0
  7. package/dist/lib/neutral/chunk-5X5ATGCS.mjs +73 -0
  8. package/dist/lib/neutral/chunk-5X5ATGCS.mjs.map +7 -0
  9. package/dist/lib/neutral/chunk-HPIS2WXY.mjs +24 -0
  10. package/dist/lib/neutral/chunk-HPIS2WXY.mjs.map +7 -0
  11. package/dist/lib/neutral/chunk-J5LGTIGS.mjs +10 -0
  12. package/dist/lib/{browser/chunk-VNOGW2JS.mjs → neutral/components/index.mjs} +344 -411
  13. package/dist/lib/{node-esm/chunk-ODMJ7DPA.mjs.map → neutral/components/index.mjs.map} +4 -4
  14. package/dist/lib/neutral/containers/index.mjs +9 -0
  15. package/dist/lib/neutral/containers/index.mjs.map +7 -0
  16. package/dist/lib/neutral/create-object-F6TKVAGV.mjs +39 -0
  17. package/dist/lib/neutral/create-object-F6TKVAGV.mjs.map +7 -0
  18. package/dist/lib/neutral/hooks/index.mjs +40 -0
  19. package/dist/lib/neutral/hooks/index.mjs.map +7 -0
  20. package/dist/lib/neutral/index.mjs +14 -0
  21. package/dist/lib/neutral/meta.json +1 -0
  22. package/dist/lib/{browser → neutral}/meta.mjs +2 -3
  23. package/dist/lib/neutral/plugin.mjs +12 -0
  24. package/dist/lib/neutral/plugin.mjs.map +7 -0
  25. package/dist/lib/neutral/react-surface-U3JEY7V7.mjs +26 -0
  26. package/dist/lib/neutral/react-surface-U3JEY7V7.mjs.map +7 -0
  27. package/dist/lib/neutral/translations.mjs +33 -0
  28. package/dist/lib/neutral/translations.mjs.map +7 -0
  29. package/dist/lib/neutral/types/index.mjs +10 -0
  30. package/dist/types/data/cities.d.ts +4 -4
  31. package/dist/types/data/cities.d.ts.map +1 -1
  32. package/dist/types/data/countries-110m.d.ts +19 -22
  33. package/dist/types/data/countries-110m.d.ts.map +1 -1
  34. package/dist/types/src/ExplorerPlugin.d.ts +3 -1
  35. package/dist/types/src/ExplorerPlugin.d.ts.map +1 -1
  36. package/dist/types/src/ExplorerPlugin.test.d.ts +2 -0
  37. package/dist/types/src/ExplorerPlugin.test.d.ts.map +1 -0
  38. package/dist/types/src/capabilities/create-object.d.ts +11 -0
  39. package/dist/types/src/capabilities/create-object.d.ts.map +1 -0
  40. package/dist/types/src/capabilities/index.d.ts +8 -2
  41. package/dist/types/src/capabilities/index.d.ts.map +1 -1
  42. package/dist/types/src/capabilities/react-surface.d.ts +3 -2
  43. package/dist/types/src/capabilities/react-surface.d.ts.map +1 -1
  44. package/dist/types/src/components/Chart/Chart.d.ts.map +1 -1
  45. package/dist/types/src/components/Chart/Chart.stories.d.ts +7 -2
  46. package/dist/types/src/components/Chart/Chart.stories.d.ts.map +1 -1
  47. package/dist/types/src/components/Globe/Globe.d.ts.map +1 -1
  48. package/dist/types/src/components/Globe/Globe.stories.d.ts +8 -3
  49. package/dist/types/src/components/Globe/Globe.stories.d.ts.map +1 -1
  50. package/dist/types/src/components/Graph/CanvasForceGraph.d.ts +13 -0
  51. package/dist/types/src/components/Graph/CanvasForceGraph.d.ts.map +1 -0
  52. package/dist/types/src/components/Graph/CanvasForceGraph.stories.d.ts +17 -0
  53. package/dist/types/src/components/Graph/CanvasForceGraph.stories.d.ts.map +1 -0
  54. package/dist/types/src/components/Graph/ForceGraph.d.ts +12 -5
  55. package/dist/types/src/components/Graph/ForceGraph.d.ts.map +1 -1
  56. package/dist/types/src/components/Graph/ForceGraph.stories.d.ts +7 -3
  57. package/dist/types/src/components/Graph/ForceGraph.stories.d.ts.map +1 -1
  58. package/dist/types/src/components/Graph/{adapter.d.ts → graph-adapter.d.ts} +2 -2
  59. package/dist/types/src/components/Graph/graph-adapter.d.ts.map +1 -0
  60. package/dist/types/src/components/Graph/index.d.ts +1 -1
  61. package/dist/types/src/components/Graph/index.d.ts.map +1 -1
  62. package/dist/types/src/components/Graph/testing.d.ts.map +1 -1
  63. package/dist/types/src/components/Tree/Tree.d.ts.map +1 -1
  64. package/dist/types/src/components/Tree/Tree.stories.d.ts +5 -2
  65. package/dist/types/src/components/Tree/Tree.stories.d.ts.map +1 -1
  66. package/dist/types/src/components/Tree/layout/HierarchicalEdgeBundling.d.ts.map +1 -1
  67. package/dist/types/src/components/Tree/layout/RadialTree.d.ts.map +1 -1
  68. package/dist/types/src/components/Tree/layout/TidyTree.d.ts.map +1 -1
  69. package/dist/types/src/components/Tree/testing/generator.d.ts.map +1 -1
  70. package/dist/types/src/components/Tree/types/tree.d.ts +19 -17
  71. package/dist/types/src/components/Tree/types/tree.d.ts.map +1 -1
  72. package/dist/types/src/components/Tree/types/types.d.ts +1 -1
  73. package/dist/types/src/components/Tree/types/types.d.ts.map +1 -1
  74. package/dist/types/src/components/index.d.ts +0 -4
  75. package/dist/types/src/components/index.d.ts.map +1 -1
  76. package/dist/types/src/components/plot.d.ts.map +1 -1
  77. package/dist/types/src/containers/ExplorerContainer/ExplorerContainer.d.ts +6 -0
  78. package/dist/types/src/containers/ExplorerContainer/ExplorerContainer.d.ts.map +1 -0
  79. package/dist/types/src/containers/ExplorerContainer/index.d.ts +2 -0
  80. package/dist/types/src/containers/ExplorerContainer/index.d.ts.map +1 -0
  81. package/dist/types/src/containers/index.d.ts +3 -0
  82. package/dist/types/src/containers/index.d.ts.map +1 -0
  83. package/dist/types/src/hooks/useGraphModel.d.ts.map +1 -1
  84. package/dist/types/src/index.d.ts +1 -3
  85. package/dist/types/src/index.d.ts.map +1 -1
  86. package/dist/types/src/meta.d.ts +2 -3
  87. package/dist/types/src/meta.d.ts.map +1 -1
  88. package/dist/types/src/plugin.d.ts +3 -0
  89. package/dist/types/src/plugin.d.ts.map +1 -0
  90. package/dist/types/src/translations.d.ts +34 -13
  91. package/dist/types/src/translations.d.ts.map +1 -1
  92. package/dist/types/src/types/ExplorerAction.d.ts +6 -0
  93. package/dist/types/src/types/ExplorerAction.d.ts.map +1 -0
  94. package/dist/types/src/types/Graph.d.ts +23 -0
  95. package/dist/types/src/types/Graph.d.ts.map +1 -0
  96. package/dist/types/src/types/index.d.ts +2 -2
  97. package/dist/types/src/types/index.d.ts.map +1 -1
  98. package/dist/types/tsconfig.tsbuildinfo +1 -1
  99. package/package.json +107 -59
  100. package/src/ExplorerPlugin.test.ts +26 -0
  101. package/src/ExplorerPlugin.tsx +15 -54
  102. package/src/capabilities/create-object.ts +36 -0
  103. package/src/capabilities/index.ts +3 -3
  104. package/src/capabilities/react-surface.tsx +24 -15
  105. package/src/components/Chart/Chart.stories.tsx +19 -25
  106. package/src/components/Globe/Globe.stories.tsx +22 -24
  107. package/src/components/Graph/CanvasForceGraph.stories.tsx +83 -0
  108. package/src/components/Graph/CanvasForceGraph.tsx +124 -0
  109. package/src/components/Graph/ForceGraph.stories.tsx +83 -35
  110. package/src/components/Graph/ForceGraph.tsx +104 -85
  111. package/src/components/Graph/{adapter.ts → graph-adapter.ts} +14 -8
  112. package/src/components/Graph/index.ts +1 -1
  113. package/src/components/Graph/testing.ts +11 -8
  114. package/src/components/Tree/Tree.stories.tsx +44 -38
  115. package/src/components/Tree/Tree.tsx +10 -5
  116. package/src/components/Tree/testing/generator.ts +4 -2
  117. package/src/components/Tree/types/tree.test.ts +7 -6
  118. package/src/components/Tree/types/tree.ts +42 -21
  119. package/src/components/Tree/types/types.ts +1 -1
  120. package/src/components/index.ts +0 -4
  121. package/src/containers/ExplorerContainer/ExplorerContainer.tsx +51 -0
  122. package/src/containers/ExplorerContainer/index.ts +5 -0
  123. package/src/containers/index.ts +7 -0
  124. package/src/hooks/useGraphModel.ts +17 -10
  125. package/src/index.ts +1 -4
  126. package/src/meta.ts +9 -6
  127. package/src/plugin.ts +9 -0
  128. package/src/translations.ts +17 -12
  129. package/src/types/ExplorerAction.ts +20 -0
  130. package/src/types/Graph.ts +49 -0
  131. package/src/types/index.ts +2 -2
  132. package/src/typings.d.ts +8 -0
  133. package/dist/lib/browser/ExplorerContainer-7MTDS2TQ.mjs +0 -37
  134. package/dist/lib/browser/ExplorerContainer-7MTDS2TQ.mjs.map +0 -7
  135. package/dist/lib/browser/chunk-2MKBRIUT.mjs +0 -31
  136. package/dist/lib/browser/chunk-2MKBRIUT.mjs.map +0 -7
  137. package/dist/lib/browser/chunk-3YITRGGW.mjs +0 -203
  138. package/dist/lib/browser/chunk-3YITRGGW.mjs.map +0 -7
  139. package/dist/lib/browser/chunk-CZZ3DDR7.mjs +0 -38
  140. package/dist/lib/browser/chunk-CZZ3DDR7.mjs.map +0 -7
  141. package/dist/lib/browser/chunk-UL5EDJPE.mjs +0 -21
  142. package/dist/lib/browser/chunk-UL5EDJPE.mjs.map +0 -7
  143. package/dist/lib/browser/chunk-VNOGW2JS.mjs.map +0 -7
  144. package/dist/lib/browser/index.mjs +0 -112
  145. package/dist/lib/browser/index.mjs.map +0 -7
  146. package/dist/lib/browser/intent-resolver-7MVEYNX7.mjs +0 -24
  147. package/dist/lib/browser/intent-resolver-7MVEYNX7.mjs.map +0 -7
  148. package/dist/lib/browser/meta.json +0 -1
  149. package/dist/lib/browser/react-surface-VLGQKYBI.mjs +0 -31
  150. package/dist/lib/browser/react-surface-VLGQKYBI.mjs.map +0 -7
  151. package/dist/lib/browser/types/index.mjs +0 -10
  152. package/dist/lib/node-esm/ExplorerContainer-OBSRVHZZ.mjs +0 -38
  153. package/dist/lib/node-esm/ExplorerContainer-OBSRVHZZ.mjs.map +0 -7
  154. package/dist/lib/node-esm/chunk-3ODK27PU.mjs +0 -33
  155. package/dist/lib/node-esm/chunk-3ODK27PU.mjs.map +0 -7
  156. package/dist/lib/node-esm/chunk-4GWDNZ4Z.mjs +0 -39
  157. package/dist/lib/node-esm/chunk-4GWDNZ4Z.mjs.map +0 -7
  158. package/dist/lib/node-esm/chunk-GFYXDQQV.mjs +0 -205
  159. package/dist/lib/node-esm/chunk-GFYXDQQV.mjs.map +0 -7
  160. package/dist/lib/node-esm/chunk-ODMJ7DPA.mjs +0 -11343
  161. package/dist/lib/node-esm/chunk-PIAXA43R.mjs +0 -23
  162. package/dist/lib/node-esm/chunk-PIAXA43R.mjs.map +0 -7
  163. package/dist/lib/node-esm/index.mjs +0 -113
  164. package/dist/lib/node-esm/index.mjs.map +0 -7
  165. package/dist/lib/node-esm/intent-resolver-NL3SR2XF.mjs +0 -25
  166. package/dist/lib/node-esm/intent-resolver-NL3SR2XF.mjs.map +0 -7
  167. package/dist/lib/node-esm/meta.json +0 -1
  168. package/dist/lib/node-esm/meta.mjs +0 -10
  169. package/dist/lib/node-esm/react-surface-BYJABDS5.mjs +0 -32
  170. package/dist/lib/node-esm/react-surface-BYJABDS5.mjs.map +0 -7
  171. package/dist/lib/node-esm/types/index.mjs +0 -11
  172. package/dist/types/src/capabilities/intent-resolver.d.ts +0 -4
  173. package/dist/types/src/capabilities/intent-resolver.d.ts.map +0 -1
  174. package/dist/types/src/components/ExplorerContainer.d.ts +0 -9
  175. package/dist/types/src/components/ExplorerContainer.d.ts.map +0 -1
  176. package/dist/types/src/components/Graph/D3ForceGraph.d.ts +0 -14
  177. package/dist/types/src/components/Graph/D3ForceGraph.d.ts.map +0 -1
  178. package/dist/types/src/components/Graph/D3ForceGraph.stories.d.ts +0 -20
  179. package/dist/types/src/components/Graph/D3ForceGraph.stories.d.ts.map +0 -1
  180. package/dist/types/src/components/Graph/adapter.d.ts.map +0 -1
  181. package/dist/types/src/types/schema.d.ts +0 -12
  182. package/dist/types/src/types/schema.d.ts.map +0 -1
  183. package/dist/types/src/types/types.d.ts +0 -18
  184. package/dist/types/src/types/types.d.ts.map +0 -1
  185. package/src/capabilities/intent-resolver.ts +0 -19
  186. package/src/components/ExplorerContainer.tsx +0 -37
  187. package/src/components/Graph/D3ForceGraph.stories.tsx +0 -67
  188. package/src/components/Graph/D3ForceGraph.tsx +0 -101
  189. package/src/types/schema.ts +0 -16
  190. package/src/types/types.ts +0 -22
  191. /package/dist/lib/{browser/meta.mjs.map → neutral/chunk-J5LGTIGS.mjs.map} +0 -0
  192. /package/dist/lib/{browser/types → neutral}/index.mjs.map +0 -0
  193. /package/dist/lib/{node-esm → neutral}/meta.mjs.map +0 -0
  194. /package/dist/lib/{node-esm → neutral}/types/index.mjs.map +0 -0
@@ -1,5 +1,6 @@
1
+ import "../chunk-J5LGTIGS.mjs";
2
+
1
3
  // src/components/Chart/Chart.tsx
2
- import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
3
4
  import * as Plot from "@observablehq/plot";
4
5
  import React, { useEffect } from "react";
5
6
  import { useResizeDetector } from "react-resize-detector";
@@ -17,49 +18,43 @@ var defaultOptions = {
17
18
  fillOpacity: 0.2
18
19
  };
19
20
  var Chart = ({ items = [], accessor, options = defaultOptions }) => {
20
- var _effect = _useSignals();
21
- try {
22
- const { ref: containerRef, width = 0, height = 0 } = useResizeDetector({
23
- refreshRate: 200
24
- });
25
- useEffect(() => {
26
- if (!width || !height) {
27
- return;
28
- }
29
- const plot3 = Plot.plot({
30
- grid: true,
31
- width,
32
- height,
33
- style: {
34
- background: "transparent"
35
- },
36
- marks: [
37
- Plot.frame(),
38
- Plot.dot(items, {
39
- x: createAdapter("x", accessor),
40
- y: createAdapter("y", accessor),
41
- ...options
42
- })
43
- ]
44
- });
45
- containerRef.current.append(plot3);
46
- return () => plot3?.remove();
47
- }, [
48
- items,
21
+ const { ref: containerRef, width = 0, height = 0 } = useResizeDetector({
22
+ refreshRate: 200
23
+ });
24
+ useEffect(() => {
25
+ if (!width || !height) {
26
+ return;
27
+ }
28
+ const plot3 = Plot.plot({
29
+ grid: true,
49
30
  width,
50
- height
51
- ]);
52
- return /* @__PURE__ */ React.createElement("div", {
53
- ref: containerRef,
54
- className: "grow"
31
+ height,
32
+ style: {
33
+ background: "transparent"
34
+ },
35
+ marks: [
36
+ Plot.frame(),
37
+ Plot.dot(items, {
38
+ x: createAdapter("x", accessor),
39
+ y: createAdapter("y", accessor),
40
+ ...options
41
+ })
42
+ ]
55
43
  });
56
- } finally {
57
- _effect.f();
58
- }
44
+ containerRef.current.append(plot3);
45
+ return () => plot3?.remove();
46
+ }, [
47
+ items,
48
+ width,
49
+ height
50
+ ]);
51
+ return /* @__PURE__ */ React.createElement("div", {
52
+ ref: containerRef,
53
+ className: "grow"
54
+ });
59
55
  };
60
56
 
61
57
  // src/components/Globe/Globe.tsx
62
- import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
63
58
  import * as Plot2 from "@observablehq/plot";
64
59
  import React2, { useEffect as useEffect2 } from "react";
65
60
  import { useResizeDetector as useResizeDetector2 } from "react-resize-detector";
@@ -10773,70 +10768,265 @@ var defaultOptions2 = {
10773
10768
  fill: "#003300"
10774
10769
  };
10775
10770
  var Globe = ({ items = [], accessor, projection = "orthographic", options = defaultOptions2 }) => {
10776
- var _effect = _useSignals2();
10777
- try {
10778
- const { ref: containerRef, width = 0, height = 0 } = useResizeDetector2({
10779
- refreshRate: 200
10780
- });
10781
- const land = topojson.feature(countries_110m_default, countries_110m_default.objects.land);
10782
- useEffect2(() => {
10783
- if (!width || !height) {
10784
- return;
10785
- }
10786
- const plot3 = Plot2.plot({
10787
- // https://observablehq.com/plot/features/projections
10788
- projection: {
10789
- type: projection,
10790
- rotate: [
10791
- -100,
10792
- -20
10793
- ]
10794
- },
10795
- // projection: { type: 'equirectangular', rotate: [-140, -30] },
10796
- width,
10797
- height,
10798
- style: {
10799
- background: "transparent"
10800
- },
10801
- // TODO(burdon): Create simple wrapper for Plot with good defaults.
10802
- marks: [
10803
- Plot2.sphere({
10804
- fill: "lightblue",
10805
- fillOpacity: 0.5
10806
- }),
10807
- Plot2.geo(land, {
10808
- fill: "darkgreen",
10809
- fillOpacity: 0.5
10810
- }),
10811
- Plot2.graticule(),
10812
- Plot2.dot(items, {
10813
- x: createAdapter("lat", accessor),
10814
- y: createAdapter("lng", accessor),
10815
- ...options
10816
- })
10771
+ const { ref: containerRef, width = 0, height = 0 } = useResizeDetector2({
10772
+ refreshRate: 200
10773
+ });
10774
+ const land = topojson.feature(countries_110m_default, countries_110m_default.objects.land);
10775
+ useEffect2(() => {
10776
+ if (!width || !height) {
10777
+ return;
10778
+ }
10779
+ const plot3 = Plot2.plot({
10780
+ // https://observablehq.com/plot/features/projections
10781
+ projection: {
10782
+ type: projection,
10783
+ rotate: [
10784
+ -100,
10785
+ -20
10817
10786
  ]
10818
- });
10819
- containerRef.current.append(plot3);
10820
- return () => plot3?.remove();
10821
- }, [
10822
- items,
10787
+ },
10788
+ // projection: { type: 'equirectangular', rotate: [-140, -30] },
10823
10789
  width,
10824
- height
10825
- ]);
10826
- return /* @__PURE__ */ React2.createElement("div", {
10827
- ref: containerRef,
10828
- className: "grow p-4"
10790
+ height,
10791
+ style: {
10792
+ background: "transparent"
10793
+ },
10794
+ // TODO(burdon): Create simple wrapper for Plot with good defaults.
10795
+ marks: [
10796
+ Plot2.sphere({
10797
+ fill: "lightblue",
10798
+ fillOpacity: 0.5
10799
+ }),
10800
+ Plot2.geo(land, {
10801
+ fill: "darkgreen",
10802
+ fillOpacity: 0.5
10803
+ }),
10804
+ Plot2.graticule(),
10805
+ Plot2.dot(items, {
10806
+ x: createAdapter("lat", accessor),
10807
+ y: createAdapter("lng", accessor),
10808
+ ...options
10809
+ })
10810
+ ]
10829
10811
  });
10830
- } finally {
10831
- _effect.f();
10812
+ containerRef.current.append(plot3);
10813
+ return () => plot3?.remove();
10814
+ }, [
10815
+ items,
10816
+ width,
10817
+ height
10818
+ ]);
10819
+ return /* @__PURE__ */ React2.createElement("div", {
10820
+ ref: containerRef,
10821
+ className: "grow p-4"
10822
+ });
10823
+ };
10824
+
10825
+ // src/components/Graph/CanvasForceGraph.tsx
10826
+ import { forceLink, forceManyBody } from "d3";
10827
+ import NativeForceGraph from "force-graph";
10828
+ import React3, { useCallback, useEffect as useEffect3, useRef, useState } from "react";
10829
+ import { useResizeDetector as useResizeDetector3 } from "react-resize-detector";
10830
+ import { composable, composableProps } from "@dxos/ui-theme";
10831
+
10832
+ // src/components/Graph/graph-adapter.ts
10833
+ var GraphAdapter = class {
10834
+ graph;
10835
+ _nodes = [];
10836
+ _links = [];
10837
+ constructor(graph) {
10838
+ this.graph = graph;
10839
+ this._nodes = graph.nodes.map((node) => ({
10840
+ id: node.id,
10841
+ type: node.type,
10842
+ data: node.data
10843
+ }));
10844
+ const nodeIds = new Set(this._nodes.map((node) => node.id));
10845
+ this._links = graph.edges.filter((edge) => nodeIds.has(edge.source) && nodeIds.has(edge.target)).map((edge) => ({
10846
+ type: edge.type,
10847
+ source: edge.source,
10848
+ target: edge.target,
10849
+ data: edge.data
10850
+ }));
10851
+ }
10852
+ get nodes() {
10853
+ return this._nodes;
10854
+ }
10855
+ get links() {
10856
+ return this._links;
10857
+ }
10858
+ };
10859
+
10860
+ // src/components/Graph/CanvasForceGraph.tsx
10861
+ var CanvasForceGraph = composable(({ model, match, onClick, ...props }, forwardedRef) => {
10862
+ const { ref: resizeRef, width, height } = useResizeDetector3({
10863
+ refreshRate: 200
10864
+ });
10865
+ const setRef = useCallback((node) => {
10866
+ resizeRef(node);
10867
+ assignRef(forwardedRef, node);
10868
+ }, [
10869
+ resizeRef,
10870
+ forwardedRef
10871
+ ]);
10872
+ const rootRef = useRef(null);
10873
+ const forceGraph = useRef(null);
10874
+ const [data, setData] = useState();
10875
+ useEffect3(() => {
10876
+ return model?.subscribe((model2) => setData(new GraphAdapter(model2.graph)));
10877
+ }, [
10878
+ model
10879
+ ]);
10880
+ useEffect3(() => {
10881
+ if (rootRef.current) {
10882
+ forceGraph.current = new NativeForceGraph(rootRef.current).nodeRelSize(6).nodeLabel((node) => node.type === "schema" ? node.data.typename : node.data.label ?? node.id).nodeAutoColorBy((node) => node.type === "schema" ? "schema" : node.data.typename).linkAutoColorBy((link2) => link2.type);
10883
+ }
10884
+ return () => {
10885
+ forceGraph.current?.pauseAnimation().graphData({
10886
+ nodes: [],
10887
+ links: []
10888
+ });
10889
+ forceGraph.current = null;
10890
+ };
10891
+ }, []);
10892
+ useEffect3(() => {
10893
+ if (!data || !width || !height || !forceGraph.current) {
10894
+ return;
10895
+ }
10896
+ forceGraph.current.pauseAnimation().width(width).height(height).onEngineStop(() => handleZoomToFit()).onNodeClick((node) => {
10897
+ forceGraph.current?.emitParticle(node);
10898
+ }).d3Force("link", forceLink().distance(160).strength(0.5)).d3Force("charge", forceManyBody().strength(-30)).graphData(data).warmupTicks(100).cooldownTime(1e3).resumeAnimation();
10899
+ }, [
10900
+ data,
10901
+ width,
10902
+ height
10903
+ ]);
10904
+ const handleZoomToFit = () => {
10905
+ forceGraph.current?.zoomToFit(400, 40);
10906
+ };
10907
+ const handleClick = useCallback((event) => {
10908
+ onClick?.(event);
10909
+ if (!event.defaultPrevented) {
10910
+ handleZoomToFit();
10911
+ }
10912
+ }, [
10913
+ onClick
10914
+ ]);
10915
+ return /* @__PURE__ */ React3.createElement("div", {
10916
+ ...composableProps(props, {
10917
+ classNames: "relative grow"
10918
+ }),
10919
+ onClick: handleClick,
10920
+ ref: setRef
10921
+ }, /* @__PURE__ */ React3.createElement("div", {
10922
+ ref: rootRef,
10923
+ className: "absolute inset-0"
10924
+ }));
10925
+ });
10926
+ var assignRef = (ref, value) => {
10927
+ if (typeof ref === "function") {
10928
+ ref(value);
10929
+ } else if (ref) {
10930
+ ref.current = value;
10832
10931
  }
10833
10932
  };
10834
10933
 
10934
+ // src/components/Graph/ForceGraph.tsx
10935
+ import { Atom, useAtomValue } from "@effect-atom/atom-react";
10936
+ import React4, { useCallback as useCallback2, useEffect as useEffect4, useMemo, useRef as useRef2, useState as useState2 } from "react";
10937
+ import { Obj } from "@dxos/echo";
10938
+ import { SelectionModel } from "@dxos/graph";
10939
+ import { GraphForceProjector, SVG } from "@dxos/react-ui-graph";
10940
+ import { composable as composable2, composableProps as composableProps2, getHashStyles } from "@dxos/ui-theme";
10941
+ import "@dxos/react-ui-graph/styles/graph.css";
10942
+ var EMPTY_ATOM = Atom.make({
10943
+ nodes: [],
10944
+ edges: []
10945
+ });
10946
+ var ForceGraph = composable2(({ model, selection: selectionProp, grid, drag, onInspect, ...props }, forwardedRef) => {
10947
+ useAtomValue(model?.graphAtom ?? EMPTY_ATOM);
10948
+ const graph = useRef2(null);
10949
+ const selection = useMemo(() => selectionProp ?? new SelectionModel(), [
10950
+ selectionProp
10951
+ ]);
10952
+ useEffect4(() => {
10953
+ const unsubscribe = selection.subscribe(() => graph.current?.repaint());
10954
+ return unsubscribe;
10955
+ }, [
10956
+ selection
10957
+ ]);
10958
+ const svgRef = useRef2(null);
10959
+ const [projector, setProjector] = useState2();
10960
+ useEffect4(() => {
10961
+ if (svgRef.current) {
10962
+ setProjector(new GraphForceProjector(svgRef.current, {
10963
+ attributes: {
10964
+ // TODO(burdon): Check type (currently assumes Employee property).
10965
+ // Edge shouldn't contribute to force if it's not active.
10966
+ linkForce: (edge) => edge.data?.object?.active !== false
10967
+ },
10968
+ forces: {
10969
+ point: {
10970
+ strength: 0.01
10971
+ }
10972
+ }
10973
+ }));
10974
+ }
10975
+ }, []);
10976
+ const handleSelect = useCallback2((node) => {
10977
+ if (selection.contains(node.id)) {
10978
+ selection.remove(node.id);
10979
+ } else {
10980
+ selection.add(node.id);
10981
+ }
10982
+ }, [
10983
+ selection
10984
+ ]);
10985
+ return /* @__PURE__ */ React4.createElement("div", {
10986
+ ...composableProps2(props, {
10987
+ classNames: "dx-container"
10988
+ }),
10989
+ ref: forwardedRef
10990
+ }, /* @__PURE__ */ React4.createElement(SVG.Root, {
10991
+ ref: svgRef
10992
+ }, /* @__PURE__ */ React4.createElement(SVG.Markers, null), grid && /* @__PURE__ */ React4.createElement(SVG.Grid, {
10993
+ axis: true
10994
+ }), /* @__PURE__ */ React4.createElement(SVG.Zoom, {
10995
+ extent: [
10996
+ 1 / 2,
10997
+ 2
10998
+ ]
10999
+ }, /* @__PURE__ */ React4.createElement(SVG.Graph, {
11000
+ drag,
11001
+ ref: graph,
11002
+ model,
11003
+ projector,
11004
+ labels: {
11005
+ text: (node) => node.data?.data.label ?? node.id
11006
+ },
11007
+ attributes: {
11008
+ node: (node) => {
11009
+ const obj = node.data?.data.object;
11010
+ return {
11011
+ data: {
11012
+ color: getHashStyles(obj && Obj.getTypename(obj))?.hue
11013
+ },
11014
+ classes: {
11015
+ "dx-selected": selection.contains(node.id)
11016
+ }
11017
+ };
11018
+ }
11019
+ },
11020
+ onSelect: handleSelect,
11021
+ onInspect
11022
+ }))));
11023
+ });
11024
+
10835
11025
  // src/components/Tree/Tree.tsx
10836
- import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
10837
- import React3, { useEffect as useEffect3, useRef, useState } from "react";
11026
+ import { RegistryContext } from "@effect-atom/atom-react";
11027
+ import React5, { useContext, useEffect as useEffect5, useRef as useRef3, useState as useState3 } from "react";
10838
11028
  import { useAsyncState } from "@dxos/react-ui";
10839
- import { SVG } from "@dxos/react-ui-graph";
11029
+ import { SVG as SVG2 } from "@dxos/react-ui-graph";
10840
11030
  import { SpaceGraphModel } from "@dxos/schema";
10841
11031
 
10842
11032
  // src/components/Tree/layout/HierarchicalEdgeBundling.ts
@@ -10973,23 +11163,10 @@ var TidyTree = (s, data, options) => {
10973
11163
  var TidyTree_default = TidyTree;
10974
11164
 
10975
11165
  // src/components/Tree/types/tree.ts
10976
- import { Schema } from "effect";
10977
- import { Key, Obj, Type } from "@dxos/echo";
11166
+ import * as Schema from "effect/Schema";
11167
+ import { Key, Obj as Obj2, Ref, Type } from "@dxos/echo";
11168
+ import { TestSchema } from "@dxos/echo/testing";
10978
11169
  import { invariant } from "@dxos/invariant";
10979
- function _define_property(obj, key, value) {
10980
- if (key in obj) {
10981
- Object.defineProperty(obj, key, {
10982
- value,
10983
- enumerable: true,
10984
- configurable: true,
10985
- writable: true
10986
- });
10987
- } else {
10988
- obj[key] = value;
10989
- }
10990
- return obj;
10991
- }
10992
- var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-explorer/src/components/Tree/types/tree.ts";
10993
11170
  var TreeNodeType = Schema.Struct({
10994
11171
  id: Key.ObjectId,
10995
11172
  children: Schema.mutable(Schema.Array(Key.ObjectId)),
@@ -10997,7 +11174,7 @@ var TreeNodeType = Schema.Struct({
10997
11174
  key: Schema.String,
10998
11175
  value: Schema.Any
10999
11176
  })),
11000
- ref: Schema.optional(Type.Ref(Type.Expando))
11177
+ ref: Schema.optional(Ref.Ref(TestSchema.Expando))
11001
11178
  }).pipe(Schema.mutable);
11002
11179
  var TreeType = Schema.Struct({
11003
11180
  root: Key.ObjectId,
@@ -11005,248 +11182,10 @@ var TreeType = Schema.Struct({
11005
11182
  key: Key.ObjectId,
11006
11183
  value: TreeNodeType
11007
11184
  }))
11008
- }).pipe(Type.Obj({
11009
- typename: "dxos.org/type/Tree",
11185
+ }).pipe(Type.object({
11186
+ typename: "org.dxos.type.tree",
11010
11187
  version: "0.1.0"
11011
11188
  }));
11012
- var Tree = class _Tree {
11013
- get tree() {
11014
- return this._tree;
11015
- }
11016
- // TODO(burdon): Make reactive.
11017
- get size() {
11018
- return Object.keys(this._tree.nodes).length;
11019
- }
11020
- get root() {
11021
- return this.getNode(this._tree.root);
11022
- }
11023
- //
11024
- // Traversal
11025
- //
11026
- /**
11027
- * Recursively traverse the tree until the callback returns a value.
11028
- */
11029
- tranverse(callback, root = this._tree.root, depth = 0) {
11030
- const node = this._tree.nodes[root];
11031
- const result = callback(node, depth);
11032
- if (result !== void 0) {
11033
- return result;
11034
- }
11035
- for (const childId of node.children) {
11036
- const result2 = this.tranverse(callback, childId, depth + 1);
11037
- if (result2 !== void 0) {
11038
- return result2;
11039
- }
11040
- }
11041
- }
11042
- getNode(id) {
11043
- const node = this._tree.nodes[id];
11044
- invariant(node, void 0, {
11045
- F: __dxlog_file,
11046
- L: 98,
11047
- S: this,
11048
- A: [
11049
- "node",
11050
- ""
11051
- ]
11052
- });
11053
- return node;
11054
- }
11055
- /**
11056
- * Get the children of a node.
11057
- */
11058
- getChildNodes(node) {
11059
- return node.children.map((id) => this.getNode(id));
11060
- }
11061
- /**
11062
- * Get the parent of a node.
11063
- */
11064
- getParent(node) {
11065
- const parent = this.tranverse((n) => {
11066
- if (n.children.includes(node.id)) {
11067
- return n;
11068
- }
11069
- });
11070
- return parent ?? null;
11071
- }
11072
- /**
11073
- * Get the next node in the tree.
11074
- */
11075
- getNext(node, hierarchical = true) {
11076
- if (hierarchical && node.children.length) {
11077
- return this.getChildNodes(node)[0];
11078
- } else {
11079
- const parent = this.getParent(node);
11080
- if (parent) {
11081
- const idx = this.getChildNodes(parent).findIndex(({ id }) => id === node.id);
11082
- if (idx < parent.children.length - 1) {
11083
- return this.getNode(parent.children[idx + 1]);
11084
- } else {
11085
- return this.getNext(parent, false);
11086
- }
11087
- }
11088
- }
11089
- }
11090
- /**
11091
- * Get the previous node in the tree.
11092
- */
11093
- getPrevious(node, hierarchical = true) {
11094
- const parent = this.getParent(node);
11095
- const idx = this.getChildNodes(parent).findIndex(({ id }) => id === node.id);
11096
- if (idx === 0) {
11097
- if (hierarchical) {
11098
- return parent;
11099
- }
11100
- } else {
11101
- const previous = this.getNode(parent.children[idx - 1]);
11102
- if (hierarchical && previous.children.length) {
11103
- return this.getLastDescendent(previous);
11104
- }
11105
- return previous;
11106
- }
11107
- }
11108
- /**
11109
- * Get the last descendent of a node.
11110
- */
11111
- getLastDescendent(node) {
11112
- const children = this.getChildNodes(node);
11113
- const last = children.length ? children[children.length - 1] : void 0;
11114
- if (last) {
11115
- return this.getLastDescendent(last);
11116
- }
11117
- return node;
11118
- }
11119
- //
11120
- // Mutations
11121
- //
11122
- /**
11123
- * Clear tree.
11124
- */
11125
- clear() {
11126
- const root = this._tree.nodes[this._tree.root];
11127
- root.children.length = 0;
11128
- this._tree.nodes = {
11129
- [root.id]: root
11130
- };
11131
- }
11132
- /**
11133
- * Add node.
11134
- */
11135
- addNode(parent, node, index) {
11136
- if (!node) {
11137
- const id = Key.ObjectId.random();
11138
- node = {
11139
- id,
11140
- children: [],
11141
- data: {
11142
- text: ""
11143
- }
11144
- };
11145
- }
11146
- this._tree.nodes[node.id] = node;
11147
- parent.children.splice(index ?? parent.children.length, 0, node.id);
11148
- return node;
11149
- }
11150
- /**
11151
- * Delete node.
11152
- */
11153
- deleteNode(parent, id) {
11154
- const node = this._tree.nodes[id];
11155
- if (!node) {
11156
- return void 0;
11157
- }
11158
- delete this._tree.nodes[node.id];
11159
- const idx = parent.children.findIndex((child) => child === id);
11160
- if (idx !== -1) {
11161
- parent.children.splice(idx, 1);
11162
- }
11163
- return node;
11164
- }
11165
- /**
11166
- * Move child node.
11167
- */
11168
- moveNode(node, from, to) {
11169
- invariant(from >= 0 && from < node.children.length, void 0, {
11170
- F: __dxlog_file,
11171
- L: 228,
11172
- S: this,
11173
- A: [
11174
- "from >= 0 && from < node.children.length",
11175
- ""
11176
- ]
11177
- });
11178
- invariant(to >= 0 && to < node.children.length, void 0, {
11179
- F: __dxlog_file,
11180
- L: 229,
11181
- S: this,
11182
- A: [
11183
- "to >= 0 && to < node.children.length",
11184
- ""
11185
- ]
11186
- });
11187
- if (from === to) {
11188
- return null;
11189
- }
11190
- const child = node.children[from];
11191
- node.children.splice(from, 1);
11192
- node.children.splice(to, 0, child);
11193
- return this.getNode(child);
11194
- }
11195
- /**
11196
- * Indent node.
11197
- */
11198
- indentNode(node) {
11199
- const parent = this.getParent(node);
11200
- if (!parent) {
11201
- return;
11202
- }
11203
- const idx = parent.children.findIndex((child) => child === node.id);
11204
- if (idx < 1 || idx >= parent.children.length) {
11205
- return;
11206
- }
11207
- const previous = this.getNode(parent.children[idx - 1]);
11208
- parent.children.splice(idx, 1);
11209
- previous.children.push(node.id);
11210
- }
11211
- /**
11212
- * Unindent node.
11213
- */
11214
- unindentNode(node) {
11215
- const parent = this.getParent(node);
11216
- if (!parent) {
11217
- return;
11218
- }
11219
- const ancestor = this.getParent(parent);
11220
- if (!ancestor) {
11221
- return;
11222
- }
11223
- const nodeIdx = parent.children.findIndex((id) => id === node.id);
11224
- const [_, ...rest] = parent.children.splice(nodeIdx, parent.children.length - nodeIdx);
11225
- parent.children.splice(nodeIdx, parent.children.length - nodeIdx);
11226
- const parentIdx = this.getChildNodes(ancestor).findIndex((n) => n.id === parent.id);
11227
- ancestor.children.splice(parentIdx + 1, 0, node.id);
11228
- node.children.push(...rest);
11229
- }
11230
- constructor(tree3) {
11231
- _define_property(this, "_tree", void 0);
11232
- this._tree = tree3 ?? _Tree.create();
11233
- }
11234
- };
11235
- _define_property(Tree, "create", () => {
11236
- const id = Key.ObjectId.random();
11237
- return Obj.make(TreeType, {
11238
- root: id,
11239
- nodes: {
11240
- [id]: {
11241
- id,
11242
- children: [],
11243
- data: {
11244
- text: ""
11245
- }
11246
- }
11247
- }
11248
- });
11249
- });
11250
11189
 
11251
11190
  // src/components/Tree/types/types.ts
11252
11191
  var mapGraphToTreeData = (model, maxDepth = 8) => {
@@ -11274,68 +11213,62 @@ var renderers = /* @__PURE__ */ new Map([
11274
11213
  HierarchicalEdgeBundling_default
11275
11214
  ]
11276
11215
  ]);
11277
- var Tree2 = ({ space, selected, variant = "tidy", onNodeClick }) => {
11278
- var _effect = _useSignals3();
11279
- try {
11280
- const [model] = useAsyncState(async () => space ? new SpaceGraphModel().open(space) : void 0, [
11281
- space,
11282
- selected
11283
- ]);
11284
- const [tree3, setTree] = useState();
11285
- useEffect3(() => {
11286
- return model?.subscribe(() => {
11287
- const tree4 = mapGraphToTreeData(model);
11288
- setTree(tree4);
11289
- }, true);
11290
- }, [
11291
- model
11292
- ]);
11293
- const context = useRef(null);
11294
- useEffect3(() => {
11295
- if (context.current) {
11296
- const { width, height } = context.current.size;
11297
- const size = Math.min(width, height);
11298
- const radius = size * 0.4;
11299
- const options = {
11300
- // TODO(burdon): Type.
11301
- label: (d) => d.label ?? d.id,
11302
- width,
11303
- height,
11304
- radius,
11305
- marginLeft: (width - radius * 2) / 2,
11306
- marginRight: (width - radius * 2) / 2,
11307
- marginTop: (height - radius * 2) / 2,
11308
- marginBottom: (height - radius * 2) / 2,
11309
- slots: defaultTreeLayoutSlots
11310
- };
11311
- if (tree3) {
11312
- const renderer = renderers.get(variant);
11313
- renderer?.(context.current.svg, tree3, options);
11314
- }
11216
+ var Tree = ({ space, selected, variant = "tidy", onNodeClick }) => {
11217
+ const registry = useContext(RegistryContext);
11218
+ const [model] = useAsyncState(async () => space ? new SpaceGraphModel(registry).open(space.db) : void 0, [
11219
+ space,
11220
+ selected,
11221
+ registry
11222
+ ]);
11223
+ const [tree3, setTree] = useState3();
11224
+ useEffect5(() => {
11225
+ return model?.subscribe(() => {
11226
+ const tree4 = mapGraphToTreeData(model);
11227
+ setTree(tree4);
11228
+ }, true);
11229
+ }, [
11230
+ model
11231
+ ]);
11232
+ const context = useRef3(null);
11233
+ useEffect5(() => {
11234
+ if (context.current?.size) {
11235
+ const { width, height } = context.current.size;
11236
+ const size = Math.min(width, height);
11237
+ const radius = size * 0.4;
11238
+ const options = {
11239
+ // TODO(burdon): Type.
11240
+ label: (d) => d.label ?? d.id,
11241
+ width,
11242
+ height,
11243
+ radius,
11244
+ marginLeft: (width - radius * 2) / 2,
11245
+ marginRight: (width - radius * 2) / 2,
11246
+ marginTop: (height - radius * 2) / 2,
11247
+ marginBottom: (height - radius * 2) / 2,
11248
+ slots: defaultTreeLayoutSlots
11249
+ };
11250
+ if (tree3) {
11251
+ const renderer = renderers.get(variant);
11252
+ renderer?.(context.current.svg, tree3, options);
11315
11253
  }
11316
- }, [
11317
- context.current,
11318
- tree3
11319
- ]);
11320
- return /* @__PURE__ */ React3.createElement("div", {
11321
- onClick: () => onNodeClick?.()
11322
- }, /* @__PURE__ */ React3.createElement(SVG.Root, {
11323
- ref: context
11324
- }));
11325
- } finally {
11326
- _effect.f();
11327
- }
11254
+ }
11255
+ }, [
11256
+ context.current,
11257
+ tree3
11258
+ ]);
11259
+ return /* @__PURE__ */ React5.createElement("div", {
11260
+ className: "grow",
11261
+ onClick: () => onNodeClick?.()
11262
+ }, /* @__PURE__ */ React5.createElement(SVG2.Root, {
11263
+ ref: context
11264
+ }));
11328
11265
  };
11329
-
11330
- // src/components/index.ts
11331
- import { lazy } from "react";
11332
- var ExplorerContainer = lazy(() => import("./ExplorerContainer-7MTDS2TQ.mjs"));
11333
-
11334
11266
  export {
11267
+ CanvasForceGraph,
11335
11268
  Chart,
11269
+ ForceGraph,
11336
11270
  Globe,
11337
- defaultTreeLayoutSlots,
11338
- Tree2 as Tree,
11339
- ExplorerContainer
11271
+ Tree,
11272
+ defaultTreeLayoutSlots
11340
11273
  };
11341
- //# sourceMappingURL=chunk-VNOGW2JS.mjs.map
11274
+ //# sourceMappingURL=index.mjs.map