@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.
- package/dist/lib/neutral/ExplorerContainer-5TOK2ZEY.mjs +40 -0
- package/dist/lib/neutral/ExplorerContainer-5TOK2ZEY.mjs.map +7 -0
- package/dist/lib/neutral/ExplorerPlugin.mjs +26 -0
- package/dist/lib/neutral/ExplorerPlugin.mjs.map +7 -0
- package/dist/lib/neutral/capabilities/index.mjs +11 -0
- package/dist/lib/neutral/capabilities/index.mjs.map +7 -0
- package/dist/lib/neutral/chunk-5X5ATGCS.mjs +73 -0
- package/dist/lib/neutral/chunk-5X5ATGCS.mjs.map +7 -0
- package/dist/lib/neutral/chunk-HPIS2WXY.mjs +24 -0
- package/dist/lib/neutral/chunk-HPIS2WXY.mjs.map +7 -0
- package/dist/lib/neutral/chunk-J5LGTIGS.mjs +10 -0
- package/dist/lib/{browser/chunk-VNOGW2JS.mjs → neutral/components/index.mjs} +344 -411
- package/dist/lib/{node-esm/chunk-ODMJ7DPA.mjs.map → neutral/components/index.mjs.map} +4 -4
- package/dist/lib/neutral/containers/index.mjs +9 -0
- package/dist/lib/neutral/containers/index.mjs.map +7 -0
- package/dist/lib/neutral/create-object-F6TKVAGV.mjs +39 -0
- package/dist/lib/neutral/create-object-F6TKVAGV.mjs.map +7 -0
- package/dist/lib/neutral/hooks/index.mjs +40 -0
- package/dist/lib/neutral/hooks/index.mjs.map +7 -0
- package/dist/lib/neutral/index.mjs +14 -0
- package/dist/lib/neutral/meta.json +1 -0
- package/dist/lib/{browser → neutral}/meta.mjs +2 -3
- package/dist/lib/neutral/plugin.mjs +12 -0
- package/dist/lib/neutral/plugin.mjs.map +7 -0
- package/dist/lib/neutral/react-surface-U3JEY7V7.mjs +26 -0
- package/dist/lib/neutral/react-surface-U3JEY7V7.mjs.map +7 -0
- package/dist/lib/neutral/translations.mjs +33 -0
- package/dist/lib/neutral/translations.mjs.map +7 -0
- package/dist/lib/neutral/types/index.mjs +10 -0
- package/dist/types/data/cities.d.ts +4 -4
- package/dist/types/data/cities.d.ts.map +1 -1
- package/dist/types/data/countries-110m.d.ts +19 -22
- package/dist/types/data/countries-110m.d.ts.map +1 -1
- package/dist/types/src/ExplorerPlugin.d.ts +3 -1
- package/dist/types/src/ExplorerPlugin.d.ts.map +1 -1
- package/dist/types/src/ExplorerPlugin.test.d.ts +2 -0
- package/dist/types/src/ExplorerPlugin.test.d.ts.map +1 -0
- package/dist/types/src/capabilities/create-object.d.ts +11 -0
- package/dist/types/src/capabilities/create-object.d.ts.map +1 -0
- package/dist/types/src/capabilities/index.d.ts +8 -2
- package/dist/types/src/capabilities/index.d.ts.map +1 -1
- package/dist/types/src/capabilities/react-surface.d.ts +3 -2
- package/dist/types/src/capabilities/react-surface.d.ts.map +1 -1
- package/dist/types/src/components/Chart/Chart.d.ts.map +1 -1
- package/dist/types/src/components/Chart/Chart.stories.d.ts +7 -2
- package/dist/types/src/components/Chart/Chart.stories.d.ts.map +1 -1
- package/dist/types/src/components/Globe/Globe.d.ts.map +1 -1
- package/dist/types/src/components/Globe/Globe.stories.d.ts +8 -3
- package/dist/types/src/components/Globe/Globe.stories.d.ts.map +1 -1
- package/dist/types/src/components/Graph/CanvasForceGraph.d.ts +13 -0
- package/dist/types/src/components/Graph/CanvasForceGraph.d.ts.map +1 -0
- package/dist/types/src/components/Graph/CanvasForceGraph.stories.d.ts +17 -0
- package/dist/types/src/components/Graph/CanvasForceGraph.stories.d.ts.map +1 -0
- package/dist/types/src/components/Graph/ForceGraph.d.ts +12 -5
- package/dist/types/src/components/Graph/ForceGraph.d.ts.map +1 -1
- package/dist/types/src/components/Graph/ForceGraph.stories.d.ts +7 -3
- package/dist/types/src/components/Graph/ForceGraph.stories.d.ts.map +1 -1
- package/dist/types/src/components/Graph/{adapter.d.ts → graph-adapter.d.ts} +2 -2
- package/dist/types/src/components/Graph/graph-adapter.d.ts.map +1 -0
- package/dist/types/src/components/Graph/index.d.ts +1 -1
- package/dist/types/src/components/Graph/index.d.ts.map +1 -1
- package/dist/types/src/components/Graph/testing.d.ts.map +1 -1
- package/dist/types/src/components/Tree/Tree.d.ts.map +1 -1
- package/dist/types/src/components/Tree/Tree.stories.d.ts +5 -2
- package/dist/types/src/components/Tree/Tree.stories.d.ts.map +1 -1
- package/dist/types/src/components/Tree/layout/HierarchicalEdgeBundling.d.ts.map +1 -1
- package/dist/types/src/components/Tree/layout/RadialTree.d.ts.map +1 -1
- package/dist/types/src/components/Tree/layout/TidyTree.d.ts.map +1 -1
- package/dist/types/src/components/Tree/testing/generator.d.ts.map +1 -1
- package/dist/types/src/components/Tree/types/tree.d.ts +19 -17
- package/dist/types/src/components/Tree/types/tree.d.ts.map +1 -1
- package/dist/types/src/components/Tree/types/types.d.ts +1 -1
- package/dist/types/src/components/Tree/types/types.d.ts.map +1 -1
- package/dist/types/src/components/index.d.ts +0 -4
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/components/plot.d.ts.map +1 -1
- package/dist/types/src/containers/ExplorerContainer/ExplorerContainer.d.ts +6 -0
- package/dist/types/src/containers/ExplorerContainer/ExplorerContainer.d.ts.map +1 -0
- package/dist/types/src/containers/ExplorerContainer/index.d.ts +2 -0
- package/dist/types/src/containers/ExplorerContainer/index.d.ts.map +1 -0
- package/dist/types/src/containers/index.d.ts +3 -0
- package/dist/types/src/containers/index.d.ts.map +1 -0
- package/dist/types/src/hooks/useGraphModel.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +1 -3
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/meta.d.ts +2 -3
- package/dist/types/src/meta.d.ts.map +1 -1
- package/dist/types/src/plugin.d.ts +3 -0
- package/dist/types/src/plugin.d.ts.map +1 -0
- package/dist/types/src/translations.d.ts +34 -13
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/src/types/ExplorerAction.d.ts +6 -0
- package/dist/types/src/types/ExplorerAction.d.ts.map +1 -0
- package/dist/types/src/types/Graph.d.ts +23 -0
- package/dist/types/src/types/Graph.d.ts.map +1 -0
- package/dist/types/src/types/index.d.ts +2 -2
- package/dist/types/src/types/index.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +107 -59
- package/src/ExplorerPlugin.test.ts +26 -0
- package/src/ExplorerPlugin.tsx +15 -54
- package/src/capabilities/create-object.ts +36 -0
- package/src/capabilities/index.ts +3 -3
- package/src/capabilities/react-surface.tsx +24 -15
- package/src/components/Chart/Chart.stories.tsx +19 -25
- package/src/components/Globe/Globe.stories.tsx +22 -24
- package/src/components/Graph/CanvasForceGraph.stories.tsx +83 -0
- package/src/components/Graph/CanvasForceGraph.tsx +124 -0
- package/src/components/Graph/ForceGraph.stories.tsx +83 -35
- package/src/components/Graph/ForceGraph.tsx +104 -85
- package/src/components/Graph/{adapter.ts → graph-adapter.ts} +14 -8
- package/src/components/Graph/index.ts +1 -1
- package/src/components/Graph/testing.ts +11 -8
- package/src/components/Tree/Tree.stories.tsx +44 -38
- package/src/components/Tree/Tree.tsx +10 -5
- package/src/components/Tree/testing/generator.ts +4 -2
- package/src/components/Tree/types/tree.test.ts +7 -6
- package/src/components/Tree/types/tree.ts +42 -21
- package/src/components/Tree/types/types.ts +1 -1
- package/src/components/index.ts +0 -4
- package/src/containers/ExplorerContainer/ExplorerContainer.tsx +51 -0
- package/src/containers/ExplorerContainer/index.ts +5 -0
- package/src/containers/index.ts +7 -0
- package/src/hooks/useGraphModel.ts +17 -10
- package/src/index.ts +1 -4
- package/src/meta.ts +9 -6
- package/src/plugin.ts +9 -0
- package/src/translations.ts +17 -12
- package/src/types/ExplorerAction.ts +20 -0
- package/src/types/Graph.ts +49 -0
- package/src/types/index.ts +2 -2
- package/src/typings.d.ts +8 -0
- package/dist/lib/browser/ExplorerContainer-7MTDS2TQ.mjs +0 -37
- package/dist/lib/browser/ExplorerContainer-7MTDS2TQ.mjs.map +0 -7
- package/dist/lib/browser/chunk-2MKBRIUT.mjs +0 -31
- package/dist/lib/browser/chunk-2MKBRIUT.mjs.map +0 -7
- package/dist/lib/browser/chunk-3YITRGGW.mjs +0 -203
- package/dist/lib/browser/chunk-3YITRGGW.mjs.map +0 -7
- package/dist/lib/browser/chunk-CZZ3DDR7.mjs +0 -38
- package/dist/lib/browser/chunk-CZZ3DDR7.mjs.map +0 -7
- package/dist/lib/browser/chunk-UL5EDJPE.mjs +0 -21
- package/dist/lib/browser/chunk-UL5EDJPE.mjs.map +0 -7
- package/dist/lib/browser/chunk-VNOGW2JS.mjs.map +0 -7
- package/dist/lib/browser/index.mjs +0 -112
- package/dist/lib/browser/index.mjs.map +0 -7
- package/dist/lib/browser/intent-resolver-7MVEYNX7.mjs +0 -24
- package/dist/lib/browser/intent-resolver-7MVEYNX7.mjs.map +0 -7
- package/dist/lib/browser/meta.json +0 -1
- package/dist/lib/browser/react-surface-VLGQKYBI.mjs +0 -31
- package/dist/lib/browser/react-surface-VLGQKYBI.mjs.map +0 -7
- package/dist/lib/browser/types/index.mjs +0 -10
- package/dist/lib/node-esm/ExplorerContainer-OBSRVHZZ.mjs +0 -38
- package/dist/lib/node-esm/ExplorerContainer-OBSRVHZZ.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-3ODK27PU.mjs +0 -33
- package/dist/lib/node-esm/chunk-3ODK27PU.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-4GWDNZ4Z.mjs +0 -39
- package/dist/lib/node-esm/chunk-4GWDNZ4Z.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-GFYXDQQV.mjs +0 -205
- package/dist/lib/node-esm/chunk-GFYXDQQV.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-ODMJ7DPA.mjs +0 -11343
- package/dist/lib/node-esm/chunk-PIAXA43R.mjs +0 -23
- package/dist/lib/node-esm/chunk-PIAXA43R.mjs.map +0 -7
- package/dist/lib/node-esm/index.mjs +0 -113
- package/dist/lib/node-esm/index.mjs.map +0 -7
- package/dist/lib/node-esm/intent-resolver-NL3SR2XF.mjs +0 -25
- package/dist/lib/node-esm/intent-resolver-NL3SR2XF.mjs.map +0 -7
- package/dist/lib/node-esm/meta.json +0 -1
- package/dist/lib/node-esm/meta.mjs +0 -10
- package/dist/lib/node-esm/react-surface-BYJABDS5.mjs +0 -32
- package/dist/lib/node-esm/react-surface-BYJABDS5.mjs.map +0 -7
- package/dist/lib/node-esm/types/index.mjs +0 -11
- package/dist/types/src/capabilities/intent-resolver.d.ts +0 -4
- package/dist/types/src/capabilities/intent-resolver.d.ts.map +0 -1
- package/dist/types/src/components/ExplorerContainer.d.ts +0 -9
- package/dist/types/src/components/ExplorerContainer.d.ts.map +0 -1
- package/dist/types/src/components/Graph/D3ForceGraph.d.ts +0 -14
- package/dist/types/src/components/Graph/D3ForceGraph.d.ts.map +0 -1
- package/dist/types/src/components/Graph/D3ForceGraph.stories.d.ts +0 -20
- package/dist/types/src/components/Graph/D3ForceGraph.stories.d.ts.map +0 -1
- package/dist/types/src/components/Graph/adapter.d.ts.map +0 -1
- package/dist/types/src/types/schema.d.ts +0 -12
- package/dist/types/src/types/schema.d.ts.map +0 -1
- package/dist/types/src/types/types.d.ts +0 -18
- package/dist/types/src/types/types.d.ts.map +0 -1
- package/src/capabilities/intent-resolver.ts +0 -19
- package/src/components/ExplorerContainer.tsx +0 -37
- package/src/components/Graph/D3ForceGraph.stories.tsx +0 -67
- package/src/components/Graph/D3ForceGraph.tsx +0 -101
- package/src/types/schema.ts +0 -16
- package/src/types/types.ts +0 -22
- /package/dist/lib/{browser/meta.mjs.map → neutral/chunk-J5LGTIGS.mjs.map} +0 -0
- /package/dist/lib/{browser/types → neutral}/index.mjs.map +0 -0
- /package/dist/lib/{node-esm → neutral}/meta.mjs.map +0 -0
- /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
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
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
|
-
|
|
53
|
-
|
|
54
|
-
|
|
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
|
-
|
|
57
|
-
|
|
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
|
-
|
|
10777
|
-
|
|
10778
|
-
|
|
10779
|
-
|
|
10780
|
-
|
|
10781
|
-
|
|
10782
|
-
|
|
10783
|
-
|
|
10784
|
-
|
|
10785
|
-
|
|
10786
|
-
|
|
10787
|
-
|
|
10788
|
-
|
|
10789
|
-
|
|
10790
|
-
|
|
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
|
-
|
|
10820
|
-
return () => plot3?.remove();
|
|
10821
|
-
}, [
|
|
10822
|
-
items,
|
|
10787
|
+
},
|
|
10788
|
+
// projection: { type: 'equirectangular', rotate: [-140, -30] },
|
|
10823
10789
|
width,
|
|
10824
|
-
height
|
|
10825
|
-
|
|
10826
|
-
|
|
10827
|
-
|
|
10828
|
-
|
|
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
|
-
|
|
10831
|
-
|
|
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 {
|
|
10837
|
-
import
|
|
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
|
|
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(
|
|
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.
|
|
11009
|
-
typename: "dxos.
|
|
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
|
|
11278
|
-
|
|
11279
|
-
|
|
11280
|
-
|
|
11281
|
-
|
|
11282
|
-
|
|
11283
|
-
|
|
11284
|
-
|
|
11285
|
-
|
|
11286
|
-
|
|
11287
|
-
|
|
11288
|
-
|
|
11289
|
-
|
|
11290
|
-
|
|
11291
|
-
|
|
11292
|
-
|
|
11293
|
-
|
|
11294
|
-
|
|
11295
|
-
|
|
11296
|
-
|
|
11297
|
-
|
|
11298
|
-
|
|
11299
|
-
|
|
11300
|
-
|
|
11301
|
-
|
|
11302
|
-
|
|
11303
|
-
|
|
11304
|
-
|
|
11305
|
-
|
|
11306
|
-
|
|
11307
|
-
|
|
11308
|
-
|
|
11309
|
-
|
|
11310
|
-
|
|
11311
|
-
|
|
11312
|
-
|
|
11313
|
-
|
|
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
|
-
|
|
11318
|
-
|
|
11319
|
-
|
|
11320
|
-
|
|
11321
|
-
|
|
11322
|
-
|
|
11323
|
-
|
|
11324
|
-
|
|
11325
|
-
|
|
11326
|
-
|
|
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
|
-
|
|
11338
|
-
|
|
11339
|
-
ExplorerContainer
|
|
11271
|
+
Tree,
|
|
11272
|
+
defaultTreeLayoutSlots
|
|
11340
11273
|
};
|
|
11341
|
-
//# sourceMappingURL=
|
|
11274
|
+
//# sourceMappingURL=index.mjs.map
|