@dxos/plugin-explorer 0.8.4-main.e098934 → 0.8.4-main.e8ec1fe

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 (127) hide show
  1. package/dist/lib/browser/ExplorerContainer-NOLLVUTE.mjs +50 -0
  2. package/dist/lib/browser/ExplorerContainer-NOLLVUTE.mjs.map +7 -0
  3. package/dist/lib/browser/{chunk-3YITRGGW.mjs → chunk-6BVXZQPP.mjs} +15 -30
  4. package/dist/lib/browser/chunk-6BVXZQPP.mjs.map +7 -0
  5. package/dist/lib/browser/{chunk-VNOGW2JS.mjs → chunk-ARBGXQFH.mjs} +6 -258
  6. package/dist/lib/browser/{chunk-VNOGW2JS.mjs.map → chunk-ARBGXQFH.mjs.map} +3 -3
  7. package/dist/lib/browser/chunk-J5LGTIGS.mjs +10 -0
  8. package/dist/lib/browser/chunk-J5LGTIGS.mjs.map +7 -0
  9. package/dist/lib/browser/chunk-JDSUIUNR.mjs +80 -0
  10. package/dist/lib/browser/chunk-JDSUIUNR.mjs.map +7 -0
  11. package/dist/lib/browser/chunk-UBHZGWZQ.mjs +24 -0
  12. package/dist/lib/browser/chunk-UBHZGWZQ.mjs.map +7 -0
  13. package/dist/lib/browser/index.mjs +25 -18
  14. package/dist/lib/browser/index.mjs.map +3 -3
  15. package/dist/lib/browser/intent-resolver-YS5LZC3A.mjs +31 -0
  16. package/dist/lib/browser/intent-resolver-YS5LZC3A.mjs.map +7 -0
  17. package/dist/lib/browser/meta.json +1 -1
  18. package/dist/lib/browser/meta.mjs +2 -3
  19. package/dist/lib/browser/react-surface-BVTCOVLK.mjs +35 -0
  20. package/dist/lib/browser/react-surface-BVTCOVLK.mjs.map +7 -0
  21. package/dist/lib/browser/types/index.mjs +7 -6
  22. package/dist/lib/node-esm/{ExplorerContainer-OBSRVHZZ.mjs → ExplorerContainer-N3S5KSUX.mjs} +19 -6
  23. package/dist/lib/node-esm/ExplorerContainer-N3S5KSUX.mjs.map +7 -0
  24. package/dist/lib/node-esm/{chunk-GFYXDQQV.mjs → chunk-CRSVAZNA.mjs} +15 -30
  25. package/dist/lib/node-esm/chunk-CRSVAZNA.mjs.map +7 -0
  26. package/dist/lib/node-esm/chunk-HSLMI22Q.mjs +11 -0
  27. package/dist/lib/node-esm/chunk-HSLMI22Q.mjs.map +7 -0
  28. package/dist/lib/node-esm/chunk-MS72BATS.mjs +81 -0
  29. package/dist/lib/node-esm/chunk-MS72BATS.mjs.map +7 -0
  30. package/dist/lib/node-esm/{chunk-ODMJ7DPA.mjs → chunk-NPIP4VEH.mjs} +6 -258
  31. package/dist/lib/node-esm/{chunk-ODMJ7DPA.mjs.map → chunk-NPIP4VEH.mjs.map} +3 -3
  32. package/dist/lib/node-esm/{chunk-PIAXA43R.mjs → chunk-UXZM5VJB.mjs} +8 -5
  33. package/dist/lib/node-esm/chunk-UXZM5VJB.mjs.map +7 -0
  34. package/dist/lib/node-esm/index.mjs +25 -18
  35. package/dist/lib/node-esm/index.mjs.map +3 -3
  36. package/dist/lib/node-esm/intent-resolver-VCEC67WX.mjs +32 -0
  37. package/dist/lib/node-esm/intent-resolver-VCEC67WX.mjs.map +7 -0
  38. package/dist/lib/node-esm/meta.json +1 -1
  39. package/dist/lib/node-esm/meta.mjs +2 -3
  40. package/dist/lib/node-esm/react-surface-4HFEX52O.mjs +36 -0
  41. package/dist/lib/node-esm/react-surface-4HFEX52O.mjs.map +7 -0
  42. package/dist/lib/node-esm/types/index.mjs +7 -6
  43. package/dist/types/src/ExplorerPlugin.d.ts +1 -1
  44. package/dist/types/src/ExplorerPlugin.d.ts.map +1 -1
  45. package/dist/types/src/capabilities/index.d.ts +1 -1
  46. package/dist/types/src/capabilities/index.d.ts.map +1 -1
  47. package/dist/types/src/capabilities/intent-resolver.d.ts +2 -2
  48. package/dist/types/src/capabilities/intent-resolver.d.ts.map +1 -1
  49. package/dist/types/src/capabilities/react-surface.d.ts.map +1 -1
  50. package/dist/types/src/components/Chart/Chart.stories.d.ts +3 -1
  51. package/dist/types/src/components/Chart/Chart.stories.d.ts.map +1 -1
  52. package/dist/types/src/components/ExplorerContainer.d.ts +2 -2
  53. package/dist/types/src/components/ExplorerContainer.d.ts.map +1 -1
  54. package/dist/types/src/components/Globe/Globe.stories.d.ts +3 -1
  55. package/dist/types/src/components/Globe/Globe.stories.d.ts.map +1 -1
  56. package/dist/types/src/components/Graph/D3ForceGraph.d.ts +2 -2
  57. package/dist/types/src/components/Graph/D3ForceGraph.d.ts.map +1 -1
  58. package/dist/types/src/components/Graph/D3ForceGraph.stories.d.ts +5 -10
  59. package/dist/types/src/components/Graph/D3ForceGraph.stories.d.ts.map +1 -1
  60. package/dist/types/src/components/Graph/ForceGraph.stories.d.ts +4 -2
  61. package/dist/types/src/components/Graph/ForceGraph.stories.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.stories.d.ts +0 -1
  64. package/dist/types/src/components/Tree/Tree.stories.d.ts.map +1 -1
  65. package/dist/types/src/components/Tree/types/tree.d.ts +1 -1
  66. package/dist/types/src/components/Tree/types/tree.d.ts.map +1 -1
  67. package/dist/types/src/components/index.d.ts +2 -4
  68. package/dist/types/src/components/index.d.ts.map +1 -1
  69. package/dist/types/src/meta.d.ts +0 -1
  70. package/dist/types/src/meta.d.ts.map +1 -1
  71. package/dist/types/src/translations.d.ts +14 -2
  72. package/dist/types/src/translations.d.ts.map +1 -1
  73. package/dist/types/src/types/ExplorerAction.d.ts +23 -0
  74. package/dist/types/src/types/ExplorerAction.d.ts.map +1 -0
  75. package/dist/types/src/types/Graph.d.ts +33 -0
  76. package/dist/types/src/types/Graph.d.ts.map +1 -0
  77. package/dist/types/src/types/index.d.ts +2 -2
  78. package/dist/types/src/types/index.d.ts.map +1 -1
  79. package/dist/types/tsconfig.tsbuildinfo +1 -1
  80. package/package.json +38 -36
  81. package/src/ExplorerPlugin.tsx +48 -46
  82. package/src/capabilities/intent-resolver.ts +10 -8
  83. package/src/capabilities/react-surface.tsx +9 -5
  84. package/src/components/Chart/Chart.stories.tsx +5 -4
  85. package/src/components/ExplorerContainer.tsx +22 -5
  86. package/src/components/Globe/Globe.stories.tsx +5 -4
  87. package/src/components/Graph/D3ForceGraph.stories.tsx +24 -13
  88. package/src/components/Graph/D3ForceGraph.tsx +4 -4
  89. package/src/components/Graph/ForceGraph.stories.tsx +24 -13
  90. package/src/components/Graph/ForceGraph.tsx +3 -3
  91. package/src/components/Graph/testing.ts +6 -6
  92. package/src/components/Tree/Tree.stories.tsx +2 -4
  93. package/src/components/Tree/Tree.tsx +2 -2
  94. package/src/components/Tree/types/tree.test.ts +2 -2
  95. package/src/components/Tree/types/tree.ts +1 -1
  96. package/src/components/index.ts +3 -3
  97. package/src/meta.ts +7 -4
  98. package/src/translations.ts +4 -2
  99. package/src/types/ExplorerAction.ts +30 -0
  100. package/src/types/Graph.ts +46 -0
  101. package/src/types/index.ts +2 -2
  102. package/dist/lib/browser/ExplorerContainer-7MTDS2TQ.mjs +0 -37
  103. package/dist/lib/browser/ExplorerContainer-7MTDS2TQ.mjs.map +0 -7
  104. package/dist/lib/browser/chunk-3YITRGGW.mjs.map +0 -7
  105. package/dist/lib/browser/chunk-CZZ3DDR7.mjs +0 -38
  106. package/dist/lib/browser/chunk-CZZ3DDR7.mjs.map +0 -7
  107. package/dist/lib/browser/chunk-UL5EDJPE.mjs +0 -21
  108. package/dist/lib/browser/chunk-UL5EDJPE.mjs.map +0 -7
  109. package/dist/lib/browser/intent-resolver-7MVEYNX7.mjs +0 -24
  110. package/dist/lib/browser/intent-resolver-7MVEYNX7.mjs.map +0 -7
  111. package/dist/lib/browser/react-surface-VLGQKYBI.mjs +0 -31
  112. package/dist/lib/browser/react-surface-VLGQKYBI.mjs.map +0 -7
  113. package/dist/lib/node-esm/ExplorerContainer-OBSRVHZZ.mjs.map +0 -7
  114. package/dist/lib/node-esm/chunk-4GWDNZ4Z.mjs +0 -39
  115. package/dist/lib/node-esm/chunk-4GWDNZ4Z.mjs.map +0 -7
  116. package/dist/lib/node-esm/chunk-GFYXDQQV.mjs.map +0 -7
  117. package/dist/lib/node-esm/chunk-PIAXA43R.mjs.map +0 -7
  118. package/dist/lib/node-esm/intent-resolver-NL3SR2XF.mjs +0 -25
  119. package/dist/lib/node-esm/intent-resolver-NL3SR2XF.mjs.map +0 -7
  120. package/dist/lib/node-esm/react-surface-BYJABDS5.mjs +0 -32
  121. package/dist/lib/node-esm/react-surface-BYJABDS5.mjs.map +0 -7
  122. package/dist/types/src/types/schema.d.ts +0 -12
  123. package/dist/types/src/types/schema.d.ts.map +0 -1
  124. package/dist/types/src/types/types.d.ts +0 -18
  125. package/dist/types/src/types/types.d.ts.map +0 -1
  126. package/src/types/schema.ts +0 -16
  127. package/src/types/types.ts +0 -22
@@ -0,0 +1,50 @@
1
+ import {
2
+ useGraphModel
3
+ } from "./chunk-2MKBRIUT.mjs";
4
+ import {
5
+ D3ForceGraph
6
+ } from "./chunk-6BVXZQPP.mjs";
7
+ import "./chunk-J5LGTIGS.mjs";
8
+
9
+ // src/components/ExplorerContainer.tsx
10
+ import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
11
+ import React, { useCallback, useMemo, useState } from "react";
12
+ import { QueryBuilder } from "@dxos/echo-query";
13
+ import { useGlobalSearch } from "@dxos/plugin-search";
14
+ import { getSpace } from "@dxos/react-client/echo";
15
+ import { Toolbar } from "@dxos/react-ui";
16
+ import { QueryEditor } from "@dxos/react-ui-components";
17
+ import { StackItem } from "@dxos/react-ui-stack";
18
+ var ExplorerContainer = ({ role, view }) => {
19
+ var _effect = _useSignals();
20
+ try {
21
+ const space = getSpace(view);
22
+ const [filter, setFilter] = useState();
23
+ const model = useGraphModel(space, filter);
24
+ const { match } = useGlobalSearch();
25
+ const builder = useMemo(() => new QueryBuilder(), []);
26
+ const handleChange = useCallback((value) => {
27
+ setFilter(builder.build(value).filter);
28
+ }, []);
29
+ const showToolbar = role === "article";
30
+ if (!space || !model) {
31
+ return null;
32
+ }
33
+ return /* @__PURE__ */ React.createElement(StackItem.Content, {
34
+ toolbar: showToolbar
35
+ }, showToolbar && /* @__PURE__ */ React.createElement(Toolbar.Root, null, /* @__PURE__ */ React.createElement(QueryEditor, {
36
+ db: space.db,
37
+ onChange: handleChange
38
+ })), /* @__PURE__ */ React.createElement(D3ForceGraph, {
39
+ model,
40
+ match
41
+ }));
42
+ } finally {
43
+ _effect.f();
44
+ }
45
+ };
46
+ var ExplorerContainer_default = ExplorerContainer;
47
+ export {
48
+ ExplorerContainer_default as default
49
+ };
50
+ //# sourceMappingURL=ExplorerContainer-NOLLVUTE.mjs.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/components/ExplorerContainer.tsx"],
4
+ "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useCallback, useMemo, useState } from 'react';\n\nimport { type Filter } from '@dxos/echo';\nimport { QueryBuilder } from '@dxos/echo-query';\nimport { useGlobalSearch } from '@dxos/plugin-search';\nimport { getSpace } from '@dxos/react-client/echo';\nimport { Toolbar } from '@dxos/react-ui';\nimport { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';\nimport { StackItem } from '@dxos/react-ui-stack';\nimport { type View } from '@dxos/schema';\n\nimport { useGraphModel } from '../hooks';\n\nimport { D3ForceGraph } from './Graph';\n\ntype ExplorerContainerProps = {\n role: string;\n view: View.View;\n};\n\nconst ExplorerContainer = ({ role, view }: ExplorerContainerProps) => {\n const space = getSpace(view);\n const [filter, setFilter] = useState<Filter.Any>();\n const model = useGraphModel(space, filter);\n const { match } = useGlobalSearch();\n\n const builder = useMemo(() => new QueryBuilder(), []);\n const handleChange = useCallback<NonNullable<QueryEditorProps['onChange']>>((value) => {\n setFilter(builder.build(value).filter);\n }, []);\n\n const showToolbar = role === 'article';\n\n if (!space || !model) {\n return null;\n }\n\n return (\n <StackItem.Content toolbar={showToolbar}>\n {showToolbar && (\n <Toolbar.Root>\n <QueryEditor db={space.db} onChange={handleChange} />\n </Toolbar.Root>\n )}\n <D3ForceGraph model={model} match={match} />\n </StackItem.Content>\n );\n};\n\nexport default ExplorerContainer;\n"],
5
+ "mappings": ";;;;;;;;;;AAIA,OAAOA,SAASC,aAAaC,SAASC,gBAAgB;AAGtD,SAASC,oBAAoB;AAC7B,SAASC,uBAAuB;AAChC,SAASC,gBAAgB;AACzB,SAASC,eAAe;AACxB,SAASC,mBAA0C;AACnD,SAASC,iBAAiB;AAY1B,IAAMC,oBAAoB,CAAC,EAAEC,MAAMC,KAAI,MAA0B;;;AAC/D,UAAMC,QAAQC,SAASF,IAAAA;AACvB,UAAM,CAACG,QAAQC,SAAAA,IAAaC,SAAAA;AAC5B,UAAMC,QAAQC,cAAcN,OAAOE,MAAAA;AACnC,UAAM,EAAEK,MAAK,IAAKC,gBAAAA;AAElB,UAAMC,UAAUC,QAAQ,MAAM,IAAIC,aAAAA,GAAgB,CAAA,CAAE;AACpD,UAAMC,eAAeC,YAAuD,CAACC,UAAAA;AAC3EX,gBAAUM,QAAQM,MAAMD,KAAAA,EAAOZ,MAAM;IACvC,GAAG,CAAA,CAAE;AAEL,UAAMc,cAAclB,SAAS;AAE7B,QAAI,CAACE,SAAS,CAACK,OAAO;AACpB,aAAO;IACT;AAEA,WACE,sBAAA,cAACY,UAAUC,SAAO;MAACC,SAASH;OACzBA,eACC,sBAAA,cAACI,QAAQC,MAAI,MACX,sBAAA,cAACC,aAAAA;MAAYC,IAAIvB,MAAMuB;MAAIC,UAAUZ;SAGzC,sBAAA,cAACa,cAAAA;MAAapB;MAAcE;;;;;AAGlC;AAEA,IAAA,4BAAeV;",
6
+ "names": ["React", "useCallback", "useMemo", "useState", "QueryBuilder", "useGlobalSearch", "getSpace", "Toolbar", "QueryEditor", "StackItem", "ExplorerContainer", "role", "view", "space", "getSpace", "filter", "setFilter", "useState", "model", "useGraphModel", "match", "useGlobalSearch", "builder", "useMemo", "QueryBuilder", "handleChange", "useCallback", "value", "build", "showToolbar", "StackItem", "Content", "toolbar", "Toolbar", "Root", "QueryEditor", "db", "onChange", "D3ForceGraph"]
7
+ }
@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useMemo, useRef } from "react";
4
4
  import { Obj } from "@dxos/echo";
5
5
  import { SelectionModel } from "@dxos/graph";
6
6
  import { GraphForceProjector, SVG } from "@dxos/react-ui-graph";
7
- import { getHashColor } from "@dxos/react-ui-theme";
7
+ import { getHashStyles } from "@dxos/react-ui-theme";
8
8
  import "@dxos/react-ui-graph/styles/graph.css";
9
9
  var D3ForceGraph = ({ classNames, model, selection: _selection, grid, ...props }) => {
10
10
  var _effect = _useSignals();
@@ -69,7 +69,7 @@ var D3ForceGraph = ({ classNames, model, selection: _selection, grid, ...props }
69
69
  const obj = node.data?.data.object;
70
70
  return {
71
71
  data: {
72
- color: getHashColor(obj && Obj.getTypename(obj))?.color
72
+ color: getHashStyles(obj && Obj.getTypename(obj))?.hue
73
73
  },
74
74
  classes: {
75
75
  "dx-selected": selection.contains(node.id)
@@ -93,33 +93,12 @@ import { useResizeDetector } from "react-resize-detector";
93
93
  import { filterObjectsSync } from "@dxos/plugin-search";
94
94
 
95
95
  // src/components/Graph/adapter.ts
96
- function _define_property(obj, key, value) {
97
- if (key in obj) {
98
- Object.defineProperty(obj, key, {
99
- value,
100
- enumerable: true,
101
- configurable: true,
102
- writable: true
103
- });
104
- } else {
105
- obj[key] = value;
106
- }
107
- return obj;
108
- }
109
96
  var GraphAdapter = class {
110
- get nodes() {
111
- return this._nodes;
112
- }
113
- get links() {
114
- return this._links;
115
- }
97
+ graph;
98
+ _nodes = [];
99
+ _links = [];
116
100
  constructor(graph) {
117
- _define_property(this, "graph", void 0);
118
- _define_property(this, "_nodes", void 0);
119
- _define_property(this, "_links", void 0);
120
101
  this.graph = graph;
121
- this._nodes = [];
122
- this._links = [];
123
102
  this._nodes = graph.nodes.map((node) => ({
124
103
  id: node.id,
125
104
  type: node.type,
@@ -132,6 +111,12 @@ var GraphAdapter = class {
132
111
  data: edge.data
133
112
  }));
134
113
  }
114
+ get nodes() {
115
+ return this._nodes;
116
+ }
117
+ get links() {
118
+ return this._links;
119
+ }
135
120
  };
136
121
 
137
122
  // src/components/Graph/ForceGraph.tsx
@@ -142,8 +127,8 @@ var ForceGraph = ({ model, match }) => {
142
127
  refreshRate: 200
143
128
  });
144
129
  const rootRef = useRef2(null);
145
- const forceGraph = useRef2();
146
- const filteredRef = useRef2();
130
+ const forceGraph = useRef2(null);
131
+ const filteredRef = useRef2([]);
147
132
  filteredRef.current = filterObjectsSync(model?.objects ?? [], match);
148
133
  const [data, setData] = useState();
149
134
  useEffect2(() => {
@@ -162,7 +147,7 @@ var ForceGraph = ({ model, match }) => {
162
147
  nodes: [],
163
148
  links: []
164
149
  });
165
- forceGraph.current = void 0;
150
+ forceGraph.current = null;
166
151
  };
167
152
  }, []);
168
153
  useEffect2(() => {
@@ -200,4 +185,4 @@ export {
200
185
  D3ForceGraph,
201
186
  ForceGraph
202
187
  };
203
- //# sourceMappingURL=chunk-3YITRGGW.mjs.map
188
+ //# sourceMappingURL=chunk-6BVXZQPP.mjs.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/components/Graph/D3ForceGraph.tsx", "../../../src/components/Graph/ForceGraph.tsx", "../../../src/components/Graph/adapter.ts"],
4
+ "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport { Obj } from '@dxos/echo';\nimport { SelectionModel } from '@dxos/graph';\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport {\n type GraphController,\n GraphForceProjector,\n type GraphLayoutNode,\n type GraphProps,\n SVG,\n type SVGContext,\n} from '@dxos/react-ui-graph';\nimport { getHashStyles } from '@dxos/react-ui-theme';\nimport { type SpaceGraphEdge, type SpaceGraphModel, type SpaceGraphNode } from '@dxos/schema';\n\nimport '@dxos/react-ui-graph/styles/graph.css';\n\nexport type D3ForceGraphProps = ThemedClassName<\n {\n model?: SpaceGraphModel;\n match?: RegExp;\n selection?: SelectionModel;\n grid?: boolean;\n } & Pick<GraphProps, 'drag'>\n>;\n\nexport const D3ForceGraph = ({ classNames, model, selection: _selection, grid, ...props }: D3ForceGraphProps) => {\n const context = useRef<SVGContext>(null);\n const projector = useMemo<GraphForceProjector | undefined>(() => {\n if (context.current) {\n return new GraphForceProjector(context.current, {\n attributes: {\n linkForce: (edge) => {\n // TODO(burdon): Check type (currently assumes Employee property).\n // Edge shouldn't contribute to force if it's not active.\n return edge.data?.object?.active !== false;\n },\n },\n forces: {\n point: {\n strength: 0.01,\n },\n },\n });\n }\n }, [context.current]);\n\n const graph = useRef<GraphController>(null);\n const selection = useMemo(() => _selection ?? new SelectionModel(), [_selection]);\n useEffect(() => graph.current?.repaint(), [selection.selected.value]);\n\n const handleSelect = useCallback<NonNullable<GraphProps['onSelect']>>(\n (node) => {\n if (selection.contains(node.id)) {\n selection.remove(node.id);\n } else {\n selection.add(node.id);\n }\n },\n [selection],\n );\n\n return (\n <SVG.Root ref={context} classNames={classNames}>\n <SVG.Markers />\n {grid && <SVG.Grid axis />}\n <SVG.Zoom extent={[1 / 2, 2]}>\n <SVG.Graph<SpaceGraphNode, SpaceGraphEdge>\n {...props}\n ref={graph}\n model={model}\n projector={projector}\n labels={{\n text: (node) => {\n return node.data?.data.label ?? node.id;\n },\n }}\n attributes={{\n node: (node: GraphLayoutNode<SpaceGraphNode>) => {\n const obj = node.data?.data.object;\n return {\n data: {\n color: getHashStyles(obj && Obj.getTypename(obj))?.hue,\n },\n classes: {\n 'dx-selected': selection.contains(node.id),\n },\n };\n },\n }}\n onSelect={handleSelect}\n />\n </SVG.Zoom>\n </SVG.Root>\n );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { forceLink, forceManyBody } from 'd3';\nimport NativeForceGraph from 'force-graph';\nimport React, { type FC, useEffect, useRef, useState } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { type SearchResult, filterObjectsSync } from '@dxos/plugin-search';\nimport { type SpaceGraphModel } from '@dxos/schema';\n\nimport { GraphAdapter } from './adapter';\n\nexport type ForceGraphProps = {\n model?: SpaceGraphModel;\n match?: RegExp;\n};\n\nexport const ForceGraph: FC<ForceGraphProps> = ({ model, match }) => {\n const { ref, width, height } = useResizeDetector({ refreshRate: 200 });\n const rootRef = useRef<HTMLDivElement>(null);\n const forceGraph = useRef<NativeForceGraph>(null);\n\n const filteredRef = useRef<SearchResult[]>([]);\n filteredRef.current = filterObjectsSync(model?.objects ?? [], match);\n\n const [data, setData] = useState<GraphAdapter>();\n useEffect(() => {\n return model?.subscribe((model) => {\n setData(new GraphAdapter(model.graph));\n });\n }, [model]);\n\n useEffect(() => {\n if (rootRef.current) {\n // https://github.com/vasturiano/force-graph\n // https://github.com/vasturiano/3d-force-graph\n forceGraph.current = new NativeForceGraph(rootRef.current)\n // https://github.com/vasturiano/force-graph?tab=readme-ov-file#node-styling\n .nodeRelSize(6)\n .nodeLabel((node: any) => (node.type === 'schema' ? node.data.typename : (node.data.label ?? node.id)))\n .nodeAutoColorBy((node: any) => (node.type === 'schema' ? 'schema' : node.data.typename))\n\n // https://github.com/vasturiano/force-graph?tab=readme-ov-file#link-styling\n .linkAutoColorBy((link: any) => link.type);\n }\n\n return () => {\n forceGraph.current?.pauseAnimation().graphData({ nodes: [], links: [] });\n forceGraph.current = null;\n };\n }, []);\n\n useEffect(() => {\n if (!data || !width || !height || !forceGraph.current) {\n return;\n }\n\n // https://github.com/vasturiano/force-graph?tab=readme-ov-file#container-layout\n forceGraph.current\n .pauseAnimation()\n .width(width)\n .height(height)\n .onEngineStop(() => {\n handleZoomToFit();\n })\n .onNodeClick((node: any) => {\n forceGraph.current?.emitParticle(node);\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\n .graphData(data)\n .warmupTicks(100)\n .cooldownTime(1_000)\n .resumeAnimation();\n }, [data, width, height, forceGraph.current]);\n\n const handleZoomToFit = () => {\n forceGraph.current?.zoomToFit(400, 40);\n };\n\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// Copyright 2023 DXOS.org\n//\n\nimport { type Graph } from '@dxos/graph';\n\nexport type GraphNode = {\n id?: string;\n};\n\nexport type GraphLink = {\n source?: string;\n target?: string;\n};\n\nexport type GraphData = {\n nodes: GraphNode[];\n links: GraphLink[];\n};\n\n/**\n * Map common graph to force-graph format.\n */\nexport class GraphAdapter implements GraphData {\n private readonly _nodes: GraphNode[] = [];\n private readonly _links: GraphLink[] = [];\n\n constructor(private readonly graph: Graph) {\n this._nodes = graph.nodes.map((node) => ({\n id: node.id,\n type: node.type,\n data: node.data,\n }));\n\n this._links = graph.edges.map((edge) => ({\n type: edge.type,\n source: edge.source,\n target: edge.target,\n data: edge.data,\n }));\n }\n\n get nodes() {\n return this._nodes;\n }\n\n get links() {\n return this._links;\n }\n}\n"],
5
+ "mappings": "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",
6
+ "names": ["React", "useCallback", "useEffect", "useMemo", "useRef", "Obj", "SelectionModel", "GraphForceProjector", "SVG", "getHashStyles", "D3ForceGraph", "classNames", "model", "selection", "_selection", "grid", "props", "context", "useRef", "projector", "useMemo", "current", "GraphForceProjector", "attributes", "linkForce", "edge", "data", "object", "active", "forces", "point", "strength", "graph", "SelectionModel", "useEffect", "repaint", "selected", "value", "handleSelect", "useCallback", "node", "contains", "id", "remove", "add", "SVG", "Root", "ref", "Markers", "Grid", "axis", "Zoom", "extent", "Graph", "labels", "text", "label", "obj", "color", "getHashStyles", "Obj", "getTypename", "hue", "classes", "onSelect", "forceLink", "forceManyBody", "NativeForceGraph", "React", "useEffect", "useRef", "useState", "useResizeDetector", "filterObjectsSync", "GraphAdapter", "_nodes", "_links", "graph", "nodes", "map", "node", "id", "type", "data", "edges", "edge", "source", "target", "links", "ForceGraph", "model", "match", "ref", "width", "height", "useResizeDetector", "refreshRate", "rootRef", "useRef", "forceGraph", "filteredRef", "current", "filterObjectsSync", "objects", "data", "setData", "useState", "useEffect", "subscribe", "GraphAdapter", "graph", "NativeForceGraph", "nodeRelSize", "nodeLabel", "node", "type", "typename", "label", "id", "nodeAutoColorBy", "linkAutoColorBy", "link", "pauseAnimation", "graphData", "nodes", "links", "onEngineStop", "handleZoomToFit", "onNodeClick", "emitParticle", "d3Force", "forceLink", "distance", "strength", "forceManyBody", "warmupTicks", "cooldownTime", "resumeAnimation", "zoomToFit", "React", "div", "className", "onClick"]
7
+ }
@@ -10973,23 +10973,9 @@ var TidyTree = (s, data, options) => {
10973
10973
  var TidyTree_default = TidyTree;
10974
10974
 
10975
10975
  // src/components/Tree/types/tree.ts
10976
- import { Schema } from "effect";
10976
+ import * as Schema from "effect/Schema";
10977
10977
  import { Key, Obj, Type } from "@dxos/echo";
10978
10978
  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
10979
  var TreeNodeType = Schema.Struct({
10994
10980
  id: Key.ObjectId,
10995
10981
  children: Schema.mutable(Schema.Array(Key.ObjectId)),
@@ -11009,244 +10995,6 @@ var TreeType = Schema.Struct({
11009
10995
  typename: "dxos.org/type/Tree",
11010
10996
  version: "0.1.0"
11011
10997
  }));
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
10998
 
11251
10999
  // src/components/Tree/types/types.ts
11252
11000
  var mapGraphToTreeData = (model, maxDepth = 8) => {
@@ -11274,7 +11022,7 @@ var renderers = /* @__PURE__ */ new Map([
11274
11022
  HierarchicalEdgeBundling_default
11275
11023
  ]
11276
11024
  ]);
11277
- var Tree2 = ({ space, selected, variant = "tidy", onNodeClick }) => {
11025
+ var Tree = ({ space, selected, variant = "tidy", onNodeClick }) => {
11278
11026
  var _effect = _useSignals3();
11279
11027
  try {
11280
11028
  const [model] = useAsyncState(async () => space ? new SpaceGraphModel().open(space) : void 0, [
@@ -11292,7 +11040,7 @@ var Tree2 = ({ space, selected, variant = "tidy", onNodeClick }) => {
11292
11040
  ]);
11293
11041
  const context = useRef(null);
11294
11042
  useEffect3(() => {
11295
- if (context.current) {
11043
+ if (context.current?.size) {
11296
11044
  const { width, height } = context.current.size;
11297
11045
  const size = Math.min(width, height);
11298
11046
  const radius = size * 0.4;
@@ -11329,13 +11077,13 @@ var Tree2 = ({ space, selected, variant = "tidy", onNodeClick }) => {
11329
11077
 
11330
11078
  // src/components/index.ts
11331
11079
  import { lazy } from "react";
11332
- var ExplorerContainer = lazy(() => import("./ExplorerContainer-7MTDS2TQ.mjs"));
11080
+ var ExplorerContainer = lazy(() => import("./ExplorerContainer-NOLLVUTE.mjs"));
11333
11081
 
11334
11082
  export {
11335
11083
  Chart,
11336
11084
  Globe,
11337
11085
  defaultTreeLayoutSlots,
11338
- Tree2 as Tree,
11086
+ Tree,
11339
11087
  ExplorerContainer
11340
11088
  };
11341
- //# sourceMappingURL=chunk-VNOGW2JS.mjs.map
11089
+ //# sourceMappingURL=chunk-ARBGXQFH.mjs.map