@xyo-network/react-node-renderer 2.64.5 → 2.64.7

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 (773) hide show
  1. package/dist/browser/Cytoscape/CytoscapeElements.cjs +4 -3
  2. package/dist/browser/Cytoscape/CytoscapeElements.cjs.map +1 -1
  3. package/dist/browser/Cytoscape/CytoscapeElements.d.cts +1 -1
  4. package/dist/browser/Cytoscape/CytoscapeElements.d.cts.map +1 -1
  5. package/dist/browser/Cytoscape/CytoscapeElements.d.mts +1 -1
  6. package/dist/browser/Cytoscape/CytoscapeElements.d.mts.map +1 -1
  7. package/dist/browser/Cytoscape/CytoscapeElements.d.ts +1 -1
  8. package/dist/browser/Cytoscape/CytoscapeElements.d.ts.map +1 -1
  9. package/dist/browser/Cytoscape/CytoscapeElements.js +4 -3
  10. package/dist/browser/Cytoscape/CytoscapeElements.js.map +1 -1
  11. package/dist/browser/Cytoscape/CytoscapeStyles.cjs +11 -6
  12. package/dist/browser/Cytoscape/CytoscapeStyles.cjs.map +1 -1
  13. package/dist/browser/Cytoscape/CytoscapeStyles.d.cts +8 -3
  14. package/dist/browser/Cytoscape/CytoscapeStyles.d.cts.map +1 -1
  15. package/dist/browser/Cytoscape/CytoscapeStyles.d.mts +8 -3
  16. package/dist/browser/Cytoscape/CytoscapeStyles.d.mts.map +1 -1
  17. package/dist/browser/Cytoscape/CytoscapeStyles.d.ts +8 -3
  18. package/dist/browser/Cytoscape/CytoscapeStyles.d.ts.map +1 -1
  19. package/dist/browser/Cytoscape/CytoscapeStyles.js +11 -6
  20. package/dist/browser/Cytoscape/CytoscapeStyles.js.map +1 -1
  21. package/dist/browser/Cytoscape/index.cjs +15 -9
  22. package/dist/browser/Cytoscape/index.cjs.map +1 -1
  23. package/dist/browser/Cytoscape/index.js +15 -9
  24. package/dist/browser/Cytoscape/index.js.map +1 -1
  25. package/dist/browser/components/index.cjs +313 -216
  26. package/dist/browser/components/index.cjs.map +1 -1
  27. package/dist/browser/components/index.d.cts +1 -2
  28. package/dist/browser/components/index.d.cts.map +1 -1
  29. package/dist/browser/components/index.d.mts +1 -2
  30. package/dist/browser/components/index.d.mts.map +1 -1
  31. package/dist/browser/components/index.d.ts +1 -2
  32. package/dist/browser/components/index.d.ts.map +1 -1
  33. package/dist/browser/components/index.js +306 -209
  34. package/dist/browser/components/index.js.map +1 -1
  35. package/dist/browser/components/lib/RelationalGraphProps.cjs.map +1 -1
  36. package/dist/browser/components/lib/RelationalGraphProps.d.cts +2 -0
  37. package/dist/browser/components/lib/RelationalGraphProps.d.cts.map +1 -1
  38. package/dist/browser/components/lib/RelationalGraphProps.d.mts +2 -0
  39. package/dist/browser/components/lib/RelationalGraphProps.d.mts.map +1 -1
  40. package/dist/browser/components/lib/RelationalGraphProps.d.ts +2 -0
  41. package/dist/browser/components/lib/RelationalGraphProps.d.ts.map +1 -1
  42. package/dist/browser/components/module/graph/DetailsFlexbox.cjs +46 -0
  43. package/dist/browser/components/module/graph/DetailsFlexbox.cjs.map +1 -0
  44. package/dist/browser/components/module/graph/DetailsFlexbox.d.cts +7 -0
  45. package/dist/browser/components/module/graph/DetailsFlexbox.d.cts.map +1 -0
  46. package/dist/browser/components/module/graph/DetailsFlexbox.d.mts +7 -0
  47. package/dist/browser/components/module/graph/DetailsFlexbox.d.mts.map +1 -0
  48. package/dist/browser/components/module/graph/DetailsFlexbox.d.ts +7 -0
  49. package/dist/browser/components/module/graph/DetailsFlexbox.d.ts.map +1 -0
  50. package/dist/browser/components/module/graph/DetailsFlexbox.js +15 -0
  51. package/dist/browser/components/module/graph/DetailsFlexbox.js.map +1 -0
  52. package/dist/browser/components/module/graph/GraphFlexBox.cjs +302 -205
  53. package/dist/browser/components/module/graph/GraphFlexBox.cjs.map +1 -1
  54. package/dist/browser/components/module/graph/GraphFlexBox.d.cts +1 -0
  55. package/dist/browser/components/module/graph/GraphFlexBox.d.cts.map +1 -1
  56. package/dist/browser/components/module/graph/GraphFlexBox.d.mts +1 -0
  57. package/dist/browser/components/module/graph/GraphFlexBox.d.mts.map +1 -1
  58. package/dist/browser/components/module/graph/GraphFlexBox.d.ts +1 -0
  59. package/dist/browser/components/module/graph/GraphFlexBox.d.ts.map +1 -1
  60. package/dist/browser/components/module/graph/GraphFlexBox.js +297 -200
  61. package/dist/browser/components/module/graph/GraphFlexBox.js.map +1 -1
  62. package/dist/browser/components/module/graph/Popper.cjs +37 -9
  63. package/dist/browser/components/module/graph/Popper.cjs.map +1 -1
  64. package/dist/browser/components/module/graph/Popper.d.cts +7 -3
  65. package/dist/browser/components/module/graph/Popper.d.cts.map +1 -1
  66. package/dist/browser/components/module/graph/Popper.d.mts +7 -3
  67. package/dist/browser/components/module/graph/Popper.d.mts.map +1 -1
  68. package/dist/browser/components/module/graph/Popper.d.ts +7 -3
  69. package/dist/browser/components/module/graph/Popper.d.ts.map +1 -1
  70. package/dist/browser/components/module/graph/Popper.js +28 -10
  71. package/dist/browser/components/module/graph/Popper.js.map +1 -1
  72. package/dist/browser/components/module/graph/index.cjs +302 -205
  73. package/dist/browser/components/module/graph/index.cjs.map +1 -1
  74. package/dist/browser/components/module/graph/index.js +297 -200
  75. package/dist/browser/components/module/graph/index.js.map +1 -1
  76. package/dist/browser/components/module/graph/node/Hover.cjs +74 -0
  77. package/dist/browser/components/module/graph/node/Hover.cjs.map +1 -0
  78. package/dist/browser/components/module/graph/node/Hover.d.cts +9 -0
  79. package/dist/browser/components/module/graph/node/Hover.d.cts.map +1 -0
  80. package/dist/browser/components/module/graph/node/Hover.d.mts +9 -0
  81. package/dist/browser/components/module/graph/node/Hover.d.mts.map +1 -0
  82. package/dist/browser/components/module/graph/node/Hover.d.ts +9 -0
  83. package/dist/browser/components/module/graph/node/Hover.d.ts.map +1 -0
  84. package/dist/browser/components/module/graph/node/Hover.js +53 -0
  85. package/dist/browser/components/module/graph/node/Hover.js.map +1 -0
  86. package/dist/browser/components/module/graph/node/hooks/index.cjs +53 -0
  87. package/dist/browser/components/module/graph/node/hooks/index.cjs.map +1 -0
  88. package/dist/browser/components/module/graph/node/hooks/index.d.cts +2 -0
  89. package/dist/browser/components/module/graph/node/hooks/index.d.cts.map +1 -0
  90. package/dist/browser/components/module/graph/node/hooks/index.d.mts +2 -0
  91. package/dist/browser/components/module/graph/node/hooks/index.d.mts.map +1 -0
  92. package/dist/browser/components/module/graph/node/hooks/index.d.ts +2 -0
  93. package/dist/browser/components/module/graph/node/hooks/index.d.ts.map +1 -0
  94. package/dist/browser/components/module/graph/node/hooks/index.js +30 -0
  95. package/dist/browser/components/module/graph/node/hooks/index.js.map +1 -0
  96. package/dist/browser/components/module/graph/node/hooks/useNodeElement.cjs +51 -0
  97. package/dist/browser/components/module/graph/node/hooks/useNodeElement.cjs.map +1 -0
  98. package/dist/browser/components/module/graph/node/hooks/useNodeElement.d.cts +8 -0
  99. package/dist/browser/components/module/graph/node/hooks/useNodeElement.d.cts.map +1 -0
  100. package/dist/browser/components/module/graph/node/hooks/useNodeElement.d.mts +8 -0
  101. package/dist/browser/components/module/graph/node/hooks/useNodeElement.d.mts.map +1 -0
  102. package/dist/browser/components/module/graph/node/hooks/useNodeElement.d.ts +8 -0
  103. package/dist/browser/components/module/graph/node/hooks/useNodeElement.d.ts.map +1 -0
  104. package/dist/browser/components/module/graph/node/hooks/useNodeElement.js +30 -0
  105. package/dist/browser/components/module/graph/node/hooks/useNodeElement.js.map +1 -0
  106. package/dist/browser/components/module/graph/node/index.cjs +76 -0
  107. package/dist/browser/components/module/graph/node/index.cjs.map +1 -0
  108. package/dist/browser/components/module/graph/node/index.d.cts +2 -0
  109. package/dist/browser/components/module/graph/node/index.d.cts.map +1 -0
  110. package/dist/browser/components/module/graph/node/index.d.mts +2 -0
  111. package/dist/browser/components/module/graph/node/index.d.mts.map +1 -0
  112. package/dist/browser/components/module/graph/node/index.d.ts +2 -0
  113. package/dist/browser/components/module/graph/node/index.d.ts.map +1 -0
  114. package/dist/browser/components/module/graph/node/index.js +53 -0
  115. package/dist/browser/components/module/graph/node/index.js.map +1 -0
  116. package/dist/browser/components/module/index.cjs +302 -205
  117. package/dist/browser/components/module/index.cjs.map +1 -1
  118. package/dist/browser/components/module/index.js +297 -200
  119. package/dist/browser/components/module/index.js.map +1 -1
  120. package/dist/browser/components/relational/graph/Graph.cjs +102 -0
  121. package/dist/browser/components/relational/graph/Graph.cjs.map +1 -0
  122. package/dist/browser/components/{RelationalGraph.d.mts → relational/graph/Graph.d.cts} +2 -2
  123. package/dist/browser/components/relational/graph/Graph.d.cts.map +1 -0
  124. package/dist/browser/components/{RelationalGraph.d.ts → relational/graph/Graph.d.mts} +2 -2
  125. package/dist/browser/components/relational/graph/Graph.d.mts.map +1 -0
  126. package/dist/{node/components/RelationalGraph.d.cts → browser/components/relational/graph/Graph.d.ts} +2 -2
  127. package/dist/browser/components/relational/graph/Graph.d.ts.map +1 -0
  128. package/dist/browser/components/relational/graph/Graph.js +71 -0
  129. package/dist/browser/components/relational/graph/Graph.js.map +1 -0
  130. package/dist/browser/components/{ProvidedNodeRenderer.cjs → relational/graph/ProvidedNodeRenderer.cjs} +75 -57
  131. package/dist/browser/components/relational/graph/ProvidedNodeRenderer.cjs.map +1 -0
  132. package/dist/browser/components/{ProvidedNodeRenderer.d.cts → relational/graph/ProvidedNodeRenderer.d.cts} +1 -1
  133. package/dist/browser/components/relational/graph/ProvidedNodeRenderer.d.cts.map +1 -0
  134. package/dist/browser/components/{ProvidedNodeRenderer.d.mts → relational/graph/ProvidedNodeRenderer.d.mts} +1 -1
  135. package/dist/browser/components/relational/graph/ProvidedNodeRenderer.d.mts.map +1 -0
  136. package/dist/{node/components → browser/components/relational/graph}/ProvidedNodeRenderer.d.ts +1 -1
  137. package/dist/browser/components/relational/graph/ProvidedNodeRenderer.d.ts.map +1 -0
  138. package/dist/browser/components/{ProvidedNodeRenderer.js → relational/graph/ProvidedNodeRenderer.js} +78 -60
  139. package/dist/browser/components/relational/graph/ProvidedNodeRenderer.js.map +1 -0
  140. package/dist/browser/components/relational/graph/index.cjs +414 -0
  141. package/dist/browser/components/relational/graph/index.cjs.map +1 -0
  142. package/dist/browser/components/relational/graph/index.d.cts +3 -0
  143. package/dist/browser/components/relational/graph/index.d.cts.map +1 -0
  144. package/dist/browser/components/relational/graph/index.d.mts +3 -0
  145. package/dist/browser/components/relational/graph/index.d.mts.map +1 -0
  146. package/dist/browser/components/relational/graph/index.d.ts +3 -0
  147. package/dist/browser/components/relational/graph/index.d.ts.map +1 -0
  148. package/dist/browser/components/relational/graph/index.js +389 -0
  149. package/dist/browser/components/relational/graph/index.js.map +1 -0
  150. package/dist/browser/components/{story → relational/graph/story}/TestData.cjs +1 -1
  151. package/dist/browser/components/relational/graph/story/TestData.cjs.map +1 -0
  152. package/dist/browser/components/relational/graph/story/TestData.d.cts.map +1 -0
  153. package/dist/browser/components/relational/graph/story/TestData.d.mts.map +1 -0
  154. package/dist/browser/components/relational/graph/story/TestData.d.ts.map +1 -0
  155. package/dist/browser/components/{story → relational/graph/story}/TestData.js +1 -1
  156. package/dist/browser/components/relational/graph/story/TestData.js.map +1 -0
  157. package/dist/browser/components/{story → relational/graph/story}/index.cjs +2 -2
  158. package/dist/browser/components/relational/graph/story/index.cjs.map +1 -0
  159. package/dist/browser/components/relational/graph/story/index.d.cts.map +1 -0
  160. package/dist/browser/components/relational/graph/story/index.d.mts.map +1 -0
  161. package/dist/browser/components/relational/graph/story/index.d.ts.map +1 -0
  162. package/dist/browser/components/{story → relational/graph/story}/index.js +1 -1
  163. package/dist/browser/components/relational/graph/story/index.js.map +1 -0
  164. package/dist/browser/components/relational/index.cjs +414 -0
  165. package/dist/browser/components/relational/index.cjs.map +1 -0
  166. package/dist/browser/components/relational/index.d.cts +2 -0
  167. package/dist/browser/components/relational/index.d.cts.map +1 -0
  168. package/dist/browser/components/relational/index.d.mts +2 -0
  169. package/dist/browser/components/relational/index.d.mts.map +1 -0
  170. package/dist/browser/components/relational/index.d.ts +2 -0
  171. package/dist/browser/components/relational/index.d.ts.map +1 -0
  172. package/dist/browser/components/relational/index.js +389 -0
  173. package/dist/browser/components/relational/index.js.map +1 -0
  174. package/dist/browser/hooks/cytoscape/elements/index.cjs +267 -0
  175. package/dist/browser/hooks/cytoscape/elements/index.cjs.map +1 -0
  176. package/dist/browser/hooks/cytoscape/elements/index.d.cts +3 -0
  177. package/dist/browser/hooks/cytoscape/elements/index.d.cts.map +1 -0
  178. package/dist/browser/hooks/cytoscape/elements/index.d.mts +3 -0
  179. package/dist/browser/hooks/cytoscape/elements/index.d.mts.map +1 -0
  180. package/dist/browser/hooks/cytoscape/elements/index.d.ts +3 -0
  181. package/dist/browser/hooks/cytoscape/elements/index.d.ts.map +1 -0
  182. package/dist/browser/hooks/cytoscape/elements/index.js +244 -0
  183. package/dist/browser/hooks/cytoscape/elements/index.js.map +1 -0
  184. package/dist/browser/hooks/cytoscape/{useCytoscapeElements.cjs → elements/useCytoscapeElements.cjs} +6 -5
  185. package/dist/browser/hooks/cytoscape/elements/useCytoscapeElements.cjs.map +1 -0
  186. package/dist/browser/hooks/cytoscape/elements/useCytoscapeElements.d.cts.map +1 -0
  187. package/dist/browser/hooks/cytoscape/elements/useCytoscapeElements.d.mts.map +1 -0
  188. package/dist/browser/hooks/cytoscape/elements/useCytoscapeElements.d.ts.map +1 -0
  189. package/dist/browser/hooks/cytoscape/{useCytoscapeElements.js → elements/useCytoscapeElements.js} +6 -5
  190. package/dist/browser/hooks/cytoscape/elements/useCytoscapeElements.js.map +1 -0
  191. package/dist/browser/hooks/cytoscape/elements/useElements.cjs +268 -0
  192. package/dist/browser/hooks/cytoscape/elements/useElements.cjs.map +1 -0
  193. package/dist/browser/hooks/cytoscape/elements/useElements.d.cts +7 -0
  194. package/dist/browser/hooks/cytoscape/elements/useElements.d.cts.map +1 -0
  195. package/dist/browser/hooks/cytoscape/elements/useElements.d.mts +7 -0
  196. package/dist/browser/hooks/cytoscape/elements/useElements.d.mts.map +1 -0
  197. package/dist/browser/hooks/cytoscape/elements/useElements.d.ts +7 -0
  198. package/dist/browser/hooks/cytoscape/elements/useElements.d.ts.map +1 -0
  199. package/dist/browser/hooks/cytoscape/elements/useElements.js +245 -0
  200. package/dist/browser/hooks/cytoscape/elements/useElements.js.map +1 -0
  201. package/dist/browser/hooks/cytoscape/{useHoveredNode.cjs → elements/useHoveredNode.cjs} +3 -6
  202. package/dist/browser/hooks/cytoscape/elements/useHoveredNode.cjs.map +1 -0
  203. package/dist/browser/hooks/cytoscape/elements/useHoveredNode.d.cts +4 -0
  204. package/dist/browser/hooks/cytoscape/elements/useHoveredNode.d.cts.map +1 -0
  205. package/dist/browser/hooks/cytoscape/elements/useHoveredNode.d.mts +4 -0
  206. package/dist/browser/hooks/cytoscape/elements/useHoveredNode.d.mts.map +1 -0
  207. package/dist/browser/hooks/cytoscape/elements/useHoveredNode.d.ts +4 -0
  208. package/dist/browser/hooks/cytoscape/elements/useHoveredNode.d.ts.map +1 -0
  209. package/dist/browser/hooks/cytoscape/{useHoveredNode.js → elements/useHoveredNode.js} +3 -6
  210. package/dist/browser/hooks/cytoscape/elements/useHoveredNode.js.map +1 -0
  211. package/dist/browser/hooks/cytoscape/{useNewElements.cjs → elements/useNewElements.cjs} +8 -7
  212. package/dist/browser/hooks/cytoscape/elements/useNewElements.cjs.map +1 -0
  213. package/dist/browser/hooks/cytoscape/elements/useNewElements.d.cts.map +1 -0
  214. package/dist/browser/hooks/cytoscape/elements/useNewElements.d.mts.map +1 -0
  215. package/dist/browser/hooks/cytoscape/elements/useNewElements.d.ts.map +1 -0
  216. package/dist/browser/hooks/cytoscape/{useNewElements.js → elements/useNewElements.js} +8 -7
  217. package/dist/browser/hooks/cytoscape/elements/useNewElements.js.map +1 -0
  218. package/dist/browser/hooks/cytoscape/{useRenderNewElements.cjs → elements/useRenderNewElements.cjs} +2 -2
  219. package/dist/browser/hooks/cytoscape/elements/useRenderNewElements.cjs.map +1 -0
  220. package/dist/browser/hooks/cytoscape/elements/useRenderNewElements.d.cts.map +1 -0
  221. package/dist/browser/hooks/cytoscape/elements/useRenderNewElements.d.mts.map +1 -0
  222. package/dist/browser/hooks/cytoscape/elements/useRenderNewElements.d.ts.map +1 -0
  223. package/dist/browser/hooks/cytoscape/{useRenderNewElements.js → elements/useRenderNewElements.js} +2 -2
  224. package/dist/browser/hooks/cytoscape/elements/useRenderNewElements.js.map +1 -0
  225. package/dist/browser/hooks/cytoscape/elements/useSelectedElement.cjs +54 -0
  226. package/dist/browser/hooks/cytoscape/elements/useSelectedElement.cjs.map +1 -0
  227. package/dist/browser/hooks/cytoscape/elements/useSelectedElement.d.cts +6 -0
  228. package/dist/browser/hooks/cytoscape/elements/useSelectedElement.d.cts.map +1 -0
  229. package/dist/browser/hooks/cytoscape/elements/useSelectedElement.d.mts +6 -0
  230. package/dist/browser/hooks/cytoscape/elements/useSelectedElement.d.mts.map +1 -0
  231. package/dist/browser/hooks/cytoscape/elements/useSelectedElement.d.ts +6 -0
  232. package/dist/browser/hooks/cytoscape/elements/useSelectedElement.d.ts.map +1 -0
  233. package/dist/browser/hooks/cytoscape/elements/useSelectedElement.js +33 -0
  234. package/dist/browser/hooks/cytoscape/elements/useSelectedElement.js.map +1 -0
  235. package/dist/browser/hooks/cytoscape/index.cjs +165 -122
  236. package/dist/browser/hooks/cytoscape/index.cjs.map +1 -1
  237. package/dist/browser/hooks/cytoscape/index.d.cts +2 -5
  238. package/dist/browser/hooks/cytoscape/index.d.cts.map +1 -1
  239. package/dist/browser/hooks/cytoscape/index.d.mts +2 -5
  240. package/dist/browser/hooks/cytoscape/index.d.mts.map +1 -1
  241. package/dist/browser/hooks/cytoscape/index.d.ts +2 -5
  242. package/dist/browser/hooks/cytoscape/index.d.ts.map +1 -1
  243. package/dist/browser/hooks/cytoscape/index.js +159 -116
  244. package/dist/browser/hooks/cytoscape/index.js.map +1 -1
  245. package/dist/browser/hooks/cytoscape/useCytoscapeOptions.cjs +11 -4
  246. package/dist/browser/hooks/cytoscape/useCytoscapeOptions.cjs.map +1 -1
  247. package/dist/browser/hooks/cytoscape/useCytoscapeOptions.js +11 -4
  248. package/dist/browser/hooks/cytoscape/useCytoscapeOptions.js.map +1 -1
  249. package/dist/browser/hooks/cytoscape/useCytoscapeStyle.cjs +11 -4
  250. package/dist/browser/hooks/cytoscape/useCytoscapeStyle.cjs.map +1 -1
  251. package/dist/browser/hooks/cytoscape/useCytoscapeStyle.d.cts.map +1 -1
  252. package/dist/browser/hooks/cytoscape/useCytoscapeStyle.d.mts.map +1 -1
  253. package/dist/browser/hooks/cytoscape/useCytoscapeStyle.d.ts.map +1 -1
  254. package/dist/browser/hooks/cytoscape/useCytoscapeStyle.js +11 -4
  255. package/dist/browser/hooks/cytoscape/useCytoscapeStyle.js.map +1 -1
  256. package/dist/browser/hooks/cytoscape/useModuleDetails.cjs +89 -0
  257. package/dist/browser/hooks/cytoscape/useModuleDetails.cjs.map +1 -0
  258. package/dist/browser/hooks/cytoscape/useModuleDetails.d.cts +49 -0
  259. package/dist/browser/hooks/cytoscape/useModuleDetails.d.cts.map +1 -0
  260. package/dist/browser/hooks/cytoscape/useModuleDetails.d.mts +49 -0
  261. package/dist/browser/hooks/cytoscape/useModuleDetails.d.mts.map +1 -0
  262. package/dist/browser/hooks/cytoscape/useModuleDetails.d.ts +49 -0
  263. package/dist/browser/hooks/cytoscape/useModuleDetails.d.ts.map +1 -0
  264. package/dist/browser/hooks/cytoscape/useModuleDetails.js +68 -0
  265. package/dist/browser/hooks/cytoscape/useModuleDetails.js.map +1 -0
  266. package/dist/browser/hooks/cytoscape/useRelationalGraphOptions.cjs +16 -8
  267. package/dist/browser/hooks/cytoscape/useRelationalGraphOptions.cjs.map +1 -1
  268. package/dist/browser/hooks/cytoscape/useRelationalGraphOptions.js +16 -8
  269. package/dist/browser/hooks/cytoscape/useRelationalGraphOptions.js.map +1 -1
  270. package/dist/browser/hooks/index.cjs +165 -122
  271. package/dist/browser/hooks/index.cjs.map +1 -1
  272. package/dist/browser/hooks/index.js +159 -116
  273. package/dist/browser/hooks/index.js.map +1 -1
  274. package/dist/browser/index.cjs +319 -224
  275. package/dist/browser/index.cjs.map +1 -1
  276. package/dist/browser/index.js +312 -217
  277. package/dist/browser/index.js.map +1 -1
  278. package/dist/docs.json +4511 -3852
  279. package/dist/node/Cytoscape/CytoscapeElements.cjs +4 -3
  280. package/dist/node/Cytoscape/CytoscapeElements.cjs.map +1 -1
  281. package/dist/node/Cytoscape/CytoscapeElements.d.cts +1 -1
  282. package/dist/node/Cytoscape/CytoscapeElements.d.cts.map +1 -1
  283. package/dist/node/Cytoscape/CytoscapeElements.d.mts +1 -1
  284. package/dist/node/Cytoscape/CytoscapeElements.d.mts.map +1 -1
  285. package/dist/node/Cytoscape/CytoscapeElements.d.ts +1 -1
  286. package/dist/node/Cytoscape/CytoscapeElements.d.ts.map +1 -1
  287. package/dist/node/Cytoscape/CytoscapeElements.js +4 -3
  288. package/dist/node/Cytoscape/CytoscapeElements.js.map +1 -1
  289. package/dist/node/Cytoscape/CytoscapeStyles.cjs +14 -9
  290. package/dist/node/Cytoscape/CytoscapeStyles.cjs.map +1 -1
  291. package/dist/node/Cytoscape/CytoscapeStyles.d.cts +8 -3
  292. package/dist/node/Cytoscape/CytoscapeStyles.d.cts.map +1 -1
  293. package/dist/node/Cytoscape/CytoscapeStyles.d.mts +8 -3
  294. package/dist/node/Cytoscape/CytoscapeStyles.d.mts.map +1 -1
  295. package/dist/node/Cytoscape/CytoscapeStyles.d.ts +8 -3
  296. package/dist/node/Cytoscape/CytoscapeStyles.d.ts.map +1 -1
  297. package/dist/node/Cytoscape/CytoscapeStyles.js +11 -6
  298. package/dist/node/Cytoscape/CytoscapeStyles.js.map +1 -1
  299. package/dist/node/Cytoscape/index.cjs +18 -12
  300. package/dist/node/Cytoscape/index.cjs.map +1 -1
  301. package/dist/node/Cytoscape/index.js +15 -9
  302. package/dist/node/Cytoscape/index.js.map +1 -1
  303. package/dist/node/components/index.cjs +315 -216
  304. package/dist/node/components/index.cjs.map +1 -1
  305. package/dist/node/components/index.d.cts +1 -2
  306. package/dist/node/components/index.d.cts.map +1 -1
  307. package/dist/node/components/index.d.mts +1 -2
  308. package/dist/node/components/index.d.mts.map +1 -1
  309. package/dist/node/components/index.d.ts +1 -2
  310. package/dist/node/components/index.d.ts.map +1 -1
  311. package/dist/node/components/index.js +308 -209
  312. package/dist/node/components/index.js.map +1 -1
  313. package/dist/node/components/lib/RelationalGraphProps.cjs.map +1 -1
  314. package/dist/node/components/lib/RelationalGraphProps.d.cts +2 -0
  315. package/dist/node/components/lib/RelationalGraphProps.d.cts.map +1 -1
  316. package/dist/node/components/lib/RelationalGraphProps.d.mts +2 -0
  317. package/dist/node/components/lib/RelationalGraphProps.d.mts.map +1 -1
  318. package/dist/node/components/lib/RelationalGraphProps.d.ts +2 -0
  319. package/dist/node/components/lib/RelationalGraphProps.d.ts.map +1 -1
  320. package/dist/node/components/module/graph/DetailsFlexbox.cjs +50 -0
  321. package/dist/node/components/module/graph/DetailsFlexbox.cjs.map +1 -0
  322. package/dist/node/components/module/graph/DetailsFlexbox.d.cts +7 -0
  323. package/dist/node/components/module/graph/DetailsFlexbox.d.cts.map +1 -0
  324. package/dist/node/components/module/graph/DetailsFlexbox.d.mts +7 -0
  325. package/dist/node/components/module/graph/DetailsFlexbox.d.mts.map +1 -0
  326. package/dist/node/components/module/graph/DetailsFlexbox.d.ts +7 -0
  327. package/dist/node/components/module/graph/DetailsFlexbox.d.ts.map +1 -0
  328. package/dist/node/components/module/graph/DetailsFlexbox.js +15 -0
  329. package/dist/node/components/module/graph/DetailsFlexbox.js.map +1 -0
  330. package/dist/node/components/module/graph/GraphFlexBox.cjs +304 -205
  331. package/dist/node/components/module/graph/GraphFlexBox.cjs.map +1 -1
  332. package/dist/node/components/module/graph/GraphFlexBox.d.cts +1 -0
  333. package/dist/node/components/module/graph/GraphFlexBox.d.cts.map +1 -1
  334. package/dist/node/components/module/graph/GraphFlexBox.d.mts +1 -0
  335. package/dist/node/components/module/graph/GraphFlexBox.d.mts.map +1 -1
  336. package/dist/node/components/module/graph/GraphFlexBox.d.ts +1 -0
  337. package/dist/node/components/module/graph/GraphFlexBox.d.ts.map +1 -1
  338. package/dist/node/components/module/graph/GraphFlexBox.js +299 -200
  339. package/dist/node/components/module/graph/GraphFlexBox.js.map +1 -1
  340. package/dist/node/components/module/graph/Popper.cjs +40 -10
  341. package/dist/node/components/module/graph/Popper.cjs.map +1 -1
  342. package/dist/node/components/module/graph/Popper.d.cts +7 -3
  343. package/dist/node/components/module/graph/Popper.d.cts.map +1 -1
  344. package/dist/node/components/module/graph/Popper.d.mts +7 -3
  345. package/dist/node/components/module/graph/Popper.d.mts.map +1 -1
  346. package/dist/node/components/module/graph/Popper.d.ts +7 -3
  347. package/dist/node/components/module/graph/Popper.d.ts.map +1 -1
  348. package/dist/node/components/module/graph/Popper.js +28 -10
  349. package/dist/node/components/module/graph/Popper.js.map +1 -1
  350. package/dist/node/components/module/graph/index.cjs +304 -205
  351. package/dist/node/components/module/graph/index.cjs.map +1 -1
  352. package/dist/node/components/module/graph/index.js +299 -200
  353. package/dist/node/components/module/graph/index.js.map +1 -1
  354. package/dist/node/components/module/graph/node/Hover.cjs +78 -0
  355. package/dist/node/components/module/graph/node/Hover.cjs.map +1 -0
  356. package/dist/node/components/module/graph/node/Hover.d.cts +9 -0
  357. package/dist/node/components/module/graph/node/Hover.d.cts.map +1 -0
  358. package/dist/node/components/module/graph/node/Hover.d.mts +9 -0
  359. package/dist/node/components/module/graph/node/Hover.d.mts.map +1 -0
  360. package/dist/node/components/module/graph/node/Hover.d.ts +9 -0
  361. package/dist/node/components/module/graph/node/Hover.d.ts.map +1 -0
  362. package/dist/node/components/module/graph/node/Hover.js +53 -0
  363. package/dist/node/components/module/graph/node/Hover.js.map +1 -0
  364. package/dist/node/components/module/graph/node/hooks/index.cjs +57 -0
  365. package/dist/node/components/module/graph/node/hooks/index.cjs.map +1 -0
  366. package/dist/node/components/module/graph/node/hooks/index.d.cts +2 -0
  367. package/dist/node/components/module/graph/node/hooks/index.d.cts.map +1 -0
  368. package/dist/node/components/module/graph/node/hooks/index.d.mts +2 -0
  369. package/dist/node/components/module/graph/node/hooks/index.d.mts.map +1 -0
  370. package/dist/node/components/module/graph/node/hooks/index.d.ts +2 -0
  371. package/dist/node/components/module/graph/node/hooks/index.d.ts.map +1 -0
  372. package/dist/node/components/module/graph/node/hooks/index.js +30 -0
  373. package/dist/node/components/module/graph/node/hooks/index.js.map +1 -0
  374. package/dist/node/components/module/graph/node/hooks/useNodeElement.cjs +55 -0
  375. package/dist/node/components/module/graph/node/hooks/useNodeElement.cjs.map +1 -0
  376. package/dist/node/components/module/graph/node/hooks/useNodeElement.d.cts +8 -0
  377. package/dist/node/components/module/graph/node/hooks/useNodeElement.d.cts.map +1 -0
  378. package/dist/node/components/module/graph/node/hooks/useNodeElement.d.mts +8 -0
  379. package/dist/node/components/module/graph/node/hooks/useNodeElement.d.mts.map +1 -0
  380. package/dist/node/components/module/graph/node/hooks/useNodeElement.d.ts +8 -0
  381. package/dist/node/components/module/graph/node/hooks/useNodeElement.d.ts.map +1 -0
  382. package/dist/node/components/module/graph/node/hooks/useNodeElement.js +30 -0
  383. package/dist/node/components/module/graph/node/hooks/useNodeElement.js.map +1 -0
  384. package/dist/node/components/module/graph/node/index.cjs +80 -0
  385. package/dist/node/components/module/graph/node/index.cjs.map +1 -0
  386. package/dist/node/components/module/graph/node/index.d.cts +2 -0
  387. package/dist/node/components/module/graph/node/index.d.cts.map +1 -0
  388. package/dist/node/components/module/graph/node/index.d.mts +2 -0
  389. package/dist/node/components/module/graph/node/index.d.mts.map +1 -0
  390. package/dist/node/components/module/graph/node/index.d.ts +2 -0
  391. package/dist/node/components/module/graph/node/index.d.ts.map +1 -0
  392. package/dist/node/components/module/graph/node/index.js +53 -0
  393. package/dist/node/components/module/graph/node/index.js.map +1 -0
  394. package/dist/node/components/module/index.cjs +304 -205
  395. package/dist/node/components/module/index.cjs.map +1 -1
  396. package/dist/node/components/module/index.js +299 -200
  397. package/dist/node/components/module/index.js.map +1 -1
  398. package/dist/node/components/relational/graph/Graph.cjs +107 -0
  399. package/dist/node/components/relational/graph/Graph.cjs.map +1 -0
  400. package/dist/{browser/components/RelationalGraph.d.cts → node/components/relational/graph/Graph.d.cts} +2 -2
  401. package/dist/node/components/relational/graph/Graph.d.cts.map +1 -0
  402. package/dist/node/components/relational/graph/Graph.d.mts +6 -0
  403. package/dist/node/components/relational/graph/Graph.d.mts.map +1 -0
  404. package/dist/node/components/relational/graph/Graph.d.ts +6 -0
  405. package/dist/node/components/relational/graph/Graph.d.ts.map +1 -0
  406. package/dist/node/components/relational/graph/Graph.js +71 -0
  407. package/dist/node/components/relational/graph/Graph.js.map +1 -0
  408. package/dist/node/components/{ProvidedNodeRenderer.cjs → relational/graph/ProvidedNodeRenderer.cjs} +75 -57
  409. package/dist/node/components/relational/graph/ProvidedNodeRenderer.cjs.map +1 -0
  410. package/dist/node/components/{ProvidedNodeRenderer.d.cts → relational/graph/ProvidedNodeRenderer.d.cts} +1 -1
  411. package/dist/node/components/relational/graph/ProvidedNodeRenderer.d.cts.map +1 -0
  412. package/dist/node/components/{ProvidedNodeRenderer.d.mts → relational/graph/ProvidedNodeRenderer.d.mts} +1 -1
  413. package/dist/node/components/relational/graph/ProvidedNodeRenderer.d.mts.map +1 -0
  414. package/dist/{browser/components → node/components/relational/graph}/ProvidedNodeRenderer.d.ts +1 -1
  415. package/dist/node/components/relational/graph/ProvidedNodeRenderer.d.ts.map +1 -0
  416. package/dist/node/components/{ProvidedNodeRenderer.js → relational/graph/ProvidedNodeRenderer.js} +78 -60
  417. package/dist/node/components/relational/graph/ProvidedNodeRenderer.js.map +1 -0
  418. package/dist/node/components/relational/graph/index.cjs +420 -0
  419. package/dist/node/components/relational/graph/index.cjs.map +1 -0
  420. package/dist/node/components/relational/graph/index.d.cts +3 -0
  421. package/dist/node/components/relational/graph/index.d.cts.map +1 -0
  422. package/dist/node/components/relational/graph/index.d.mts +3 -0
  423. package/dist/node/components/relational/graph/index.d.mts.map +1 -0
  424. package/dist/node/components/relational/graph/index.d.ts +3 -0
  425. package/dist/node/components/relational/graph/index.d.ts.map +1 -0
  426. package/dist/node/components/relational/graph/index.js +389 -0
  427. package/dist/node/components/relational/graph/index.js.map +1 -0
  428. package/dist/node/components/{story → relational/graph/story}/TestData.cjs +1 -1
  429. package/dist/node/components/relational/graph/story/TestData.cjs.map +1 -0
  430. package/dist/node/components/relational/graph/story/TestData.d.cts.map +1 -0
  431. package/dist/node/components/relational/graph/story/TestData.d.mts.map +1 -0
  432. package/dist/node/components/relational/graph/story/TestData.d.ts.map +1 -0
  433. package/dist/node/components/{story → relational/graph/story}/TestData.js +1 -1
  434. package/dist/node/components/relational/graph/story/TestData.js.map +1 -0
  435. package/dist/node/components/{story → relational/graph/story}/index.cjs +2 -2
  436. package/dist/node/components/relational/graph/story/index.cjs.map +1 -0
  437. package/dist/node/components/relational/graph/story/index.d.cts.map +1 -0
  438. package/dist/node/components/relational/graph/story/index.d.mts.map +1 -0
  439. package/dist/node/components/relational/graph/story/index.d.ts.map +1 -0
  440. package/dist/node/components/{story → relational/graph/story}/index.js +1 -1
  441. package/dist/node/components/relational/graph/story/index.js.map +1 -0
  442. package/dist/node/components/relational/index.cjs +420 -0
  443. package/dist/node/components/relational/index.cjs.map +1 -0
  444. package/dist/node/components/relational/index.d.cts +2 -0
  445. package/dist/node/components/relational/index.d.cts.map +1 -0
  446. package/dist/node/components/relational/index.d.mts +2 -0
  447. package/dist/node/components/relational/index.d.mts.map +1 -0
  448. package/dist/node/components/relational/index.d.ts +2 -0
  449. package/dist/node/components/relational/index.d.ts.map +1 -0
  450. package/dist/node/components/relational/index.js +389 -0
  451. package/dist/node/components/relational/index.js.map +1 -0
  452. package/dist/node/hooks/cytoscape/elements/index.cjs +273 -0
  453. package/dist/node/hooks/cytoscape/elements/index.cjs.map +1 -0
  454. package/dist/node/hooks/cytoscape/elements/index.d.cts +3 -0
  455. package/dist/node/hooks/cytoscape/elements/index.d.cts.map +1 -0
  456. package/dist/node/hooks/cytoscape/elements/index.d.mts +3 -0
  457. package/dist/node/hooks/cytoscape/elements/index.d.mts.map +1 -0
  458. package/dist/node/hooks/cytoscape/elements/index.d.ts +3 -0
  459. package/dist/node/hooks/cytoscape/elements/index.d.ts.map +1 -0
  460. package/dist/node/hooks/cytoscape/elements/index.js +245 -0
  461. package/dist/node/hooks/cytoscape/elements/index.js.map +1 -0
  462. package/dist/node/hooks/cytoscape/{useCytoscapeElements.cjs → elements/useCytoscapeElements.cjs} +6 -5
  463. package/dist/node/hooks/cytoscape/elements/useCytoscapeElements.cjs.map +1 -0
  464. package/dist/node/hooks/cytoscape/elements/useCytoscapeElements.d.cts.map +1 -0
  465. package/dist/node/hooks/cytoscape/elements/useCytoscapeElements.d.mts.map +1 -0
  466. package/dist/node/hooks/cytoscape/elements/useCytoscapeElements.d.ts.map +1 -0
  467. package/dist/node/hooks/cytoscape/{useCytoscapeElements.js → elements/useCytoscapeElements.js} +6 -5
  468. package/dist/node/hooks/cytoscape/elements/useCytoscapeElements.js.map +1 -0
  469. package/dist/node/hooks/cytoscape/elements/useElements.cjs +273 -0
  470. package/dist/node/hooks/cytoscape/elements/useElements.cjs.map +1 -0
  471. package/dist/node/hooks/cytoscape/elements/useElements.d.cts +7 -0
  472. package/dist/node/hooks/cytoscape/elements/useElements.d.cts.map +1 -0
  473. package/dist/node/hooks/cytoscape/elements/useElements.d.mts +7 -0
  474. package/dist/node/hooks/cytoscape/elements/useElements.d.mts.map +1 -0
  475. package/dist/node/hooks/cytoscape/elements/useElements.d.ts +7 -0
  476. package/dist/node/hooks/cytoscape/elements/useElements.d.ts.map +1 -0
  477. package/dist/node/hooks/cytoscape/elements/useElements.js +246 -0
  478. package/dist/node/hooks/cytoscape/elements/useElements.js.map +1 -0
  479. package/dist/node/hooks/cytoscape/{useHoveredNode.cjs → elements/useHoveredNode.cjs} +3 -6
  480. package/dist/node/hooks/cytoscape/elements/useHoveredNode.cjs.map +1 -0
  481. package/dist/node/hooks/cytoscape/elements/useHoveredNode.d.cts +4 -0
  482. package/dist/node/hooks/cytoscape/elements/useHoveredNode.d.cts.map +1 -0
  483. package/dist/node/hooks/cytoscape/elements/useHoveredNode.d.mts +4 -0
  484. package/dist/node/hooks/cytoscape/elements/useHoveredNode.d.mts.map +1 -0
  485. package/dist/node/hooks/cytoscape/elements/useHoveredNode.d.ts +4 -0
  486. package/dist/node/hooks/cytoscape/elements/useHoveredNode.d.ts.map +1 -0
  487. package/dist/node/hooks/cytoscape/{useHoveredNode.js → elements/useHoveredNode.js} +3 -6
  488. package/dist/node/hooks/cytoscape/elements/useHoveredNode.js.map +1 -0
  489. package/dist/node/hooks/cytoscape/{useNewElements.cjs → elements/useNewElements.cjs} +8 -7
  490. package/dist/node/hooks/cytoscape/elements/useNewElements.cjs.map +1 -0
  491. package/dist/node/hooks/cytoscape/elements/useNewElements.d.cts.map +1 -0
  492. package/dist/node/hooks/cytoscape/elements/useNewElements.d.mts.map +1 -0
  493. package/dist/node/hooks/cytoscape/elements/useNewElements.d.ts.map +1 -0
  494. package/dist/node/hooks/cytoscape/{useNewElements.js → elements/useNewElements.js} +8 -7
  495. package/dist/node/hooks/cytoscape/elements/useNewElements.js.map +1 -0
  496. package/dist/node/hooks/cytoscape/{useRenderNewElements.cjs → elements/useRenderNewElements.cjs} +2 -2
  497. package/dist/node/hooks/cytoscape/elements/useRenderNewElements.cjs.map +1 -0
  498. package/dist/node/hooks/cytoscape/elements/useRenderNewElements.d.cts.map +1 -0
  499. package/dist/node/hooks/cytoscape/elements/useRenderNewElements.d.mts.map +1 -0
  500. package/dist/node/hooks/cytoscape/elements/useRenderNewElements.d.ts.map +1 -0
  501. package/dist/node/hooks/cytoscape/{useRenderNewElements.js → elements/useRenderNewElements.js} +2 -2
  502. package/dist/node/hooks/cytoscape/elements/useRenderNewElements.js.map +1 -0
  503. package/dist/node/hooks/cytoscape/elements/useSelectedElement.cjs +59 -0
  504. package/dist/node/hooks/cytoscape/elements/useSelectedElement.cjs.map +1 -0
  505. package/dist/node/hooks/cytoscape/elements/useSelectedElement.d.cts +6 -0
  506. package/dist/node/hooks/cytoscape/elements/useSelectedElement.d.cts.map +1 -0
  507. package/dist/node/hooks/cytoscape/elements/useSelectedElement.d.mts +6 -0
  508. package/dist/node/hooks/cytoscape/elements/useSelectedElement.d.mts.map +1 -0
  509. package/dist/node/hooks/cytoscape/elements/useSelectedElement.d.ts +6 -0
  510. package/dist/node/hooks/cytoscape/elements/useSelectedElement.d.ts.map +1 -0
  511. package/dist/node/hooks/cytoscape/elements/useSelectedElement.js +34 -0
  512. package/dist/node/hooks/cytoscape/elements/useSelectedElement.js.map +1 -0
  513. package/dist/node/hooks/cytoscape/index.cjs +170 -127
  514. package/dist/node/hooks/cytoscape/index.cjs.map +1 -1
  515. package/dist/node/hooks/cytoscape/index.d.cts +2 -5
  516. package/dist/node/hooks/cytoscape/index.d.cts.map +1 -1
  517. package/dist/node/hooks/cytoscape/index.d.mts +2 -5
  518. package/dist/node/hooks/cytoscape/index.d.mts.map +1 -1
  519. package/dist/node/hooks/cytoscape/index.d.ts +2 -5
  520. package/dist/node/hooks/cytoscape/index.d.ts.map +1 -1
  521. package/dist/node/hooks/cytoscape/index.js +161 -116
  522. package/dist/node/hooks/cytoscape/index.js.map +1 -1
  523. package/dist/node/hooks/cytoscape/useCytoscapeOptions.cjs +11 -4
  524. package/dist/node/hooks/cytoscape/useCytoscapeOptions.cjs.map +1 -1
  525. package/dist/node/hooks/cytoscape/useCytoscapeOptions.js +11 -4
  526. package/dist/node/hooks/cytoscape/useCytoscapeOptions.js.map +1 -1
  527. package/dist/node/hooks/cytoscape/useCytoscapeStyle.cjs +11 -4
  528. package/dist/node/hooks/cytoscape/useCytoscapeStyle.cjs.map +1 -1
  529. package/dist/node/hooks/cytoscape/useCytoscapeStyle.d.cts.map +1 -1
  530. package/dist/node/hooks/cytoscape/useCytoscapeStyle.d.mts.map +1 -1
  531. package/dist/node/hooks/cytoscape/useCytoscapeStyle.d.ts.map +1 -1
  532. package/dist/node/hooks/cytoscape/useCytoscapeStyle.js +11 -4
  533. package/dist/node/hooks/cytoscape/useCytoscapeStyle.js.map +1 -1
  534. package/dist/node/hooks/cytoscape/useModuleDetails.cjs +94 -0
  535. package/dist/node/hooks/cytoscape/useModuleDetails.cjs.map +1 -0
  536. package/dist/node/hooks/cytoscape/useModuleDetails.d.cts +49 -0
  537. package/dist/node/hooks/cytoscape/useModuleDetails.d.cts.map +1 -0
  538. package/dist/node/hooks/cytoscape/useModuleDetails.d.mts +49 -0
  539. package/dist/node/hooks/cytoscape/useModuleDetails.d.mts.map +1 -0
  540. package/dist/node/hooks/cytoscape/useModuleDetails.d.ts +49 -0
  541. package/dist/node/hooks/cytoscape/useModuleDetails.d.ts.map +1 -0
  542. package/dist/node/hooks/cytoscape/useModuleDetails.js +69 -0
  543. package/dist/node/hooks/cytoscape/useModuleDetails.js.map +1 -0
  544. package/dist/node/hooks/cytoscape/useRelationalGraphOptions.cjs +16 -8
  545. package/dist/node/hooks/cytoscape/useRelationalGraphOptions.cjs.map +1 -1
  546. package/dist/node/hooks/cytoscape/useRelationalGraphOptions.js +16 -8
  547. package/dist/node/hooks/cytoscape/useRelationalGraphOptions.js.map +1 -1
  548. package/dist/node/hooks/index.cjs +170 -127
  549. package/dist/node/hooks/index.cjs.map +1 -1
  550. package/dist/node/hooks/index.js +161 -116
  551. package/dist/node/hooks/index.js.map +1 -1
  552. package/dist/node/index.cjs +327 -232
  553. package/dist/node/index.cjs.map +1 -1
  554. package/dist/node/index.js +314 -217
  555. package/dist/node/index.js.map +1 -1
  556. package/package.json +15 -15
  557. package/src/Cytoscape/CytoscapeElements.ts +4 -3
  558. package/src/Cytoscape/CytoscapeStyles.ts +9 -4
  559. package/src/components/index.ts +1 -2
  560. package/src/components/lib/RelationalGraphProps.ts +2 -0
  561. package/src/components/module/graph/DetailsFlexbox.tsx +20 -0
  562. package/src/components/module/graph/GraphFlexBox.stories.tsx +5 -1
  563. package/src/components/module/graph/GraphFlexBox.tsx +35 -12
  564. package/src/components/module/graph/Popper.tsx +50 -15
  565. package/src/components/module/graph/node/Hover.tsx +33 -0
  566. package/src/components/module/graph/node/hooks/index.ts +1 -0
  567. package/src/components/module/graph/node/hooks/useNodeElement.tsx +37 -0
  568. package/src/components/module/graph/node/index.ts +1 -0
  569. package/src/components/{RelationalGraph.stories.tsx → relational/graph/Graph.stories.tsx} +3 -3
  570. package/src/components/relational/graph/Graph.tsx +78 -0
  571. package/src/components/{RelationalGraphEvents.stories.tsx → relational/graph/GraphEvents.stories.tsx} +3 -3
  572. package/src/components/{ProvidedNodeRenderer.tsx → relational/graph/ProvidedNodeRenderer.tsx} +3 -3
  573. package/src/components/relational/graph/index.ts +2 -0
  574. package/src/components/relational/index.ts +1 -0
  575. package/src/hooks/cytoscape/elements/index.ts +2 -0
  576. package/src/hooks/cytoscape/{useCytoscapeElements.ts → elements/useCytoscapeElements.ts} +1 -1
  577. package/src/hooks/cytoscape/elements/useElements.tsx +13 -0
  578. package/src/hooks/cytoscape/{useHoveredNode.tsx → elements/useHoveredNode.tsx} +4 -7
  579. package/src/hooks/cytoscape/{useRenderNewElements.tsx → elements/useRenderNewElements.tsx} +2 -2
  580. package/src/hooks/cytoscape/elements/useSelectedElement.tsx +25 -0
  581. package/src/hooks/cytoscape/index.ts +2 -5
  582. package/src/hooks/cytoscape/useCytoscapeStyle.tsx +4 -3
  583. package/src/hooks/cytoscape/useModuleDetails.tsx +68 -0
  584. package/src/hooks/cytoscape/useRelationalGraphOptions.tsx +1 -1
  585. package/dist/browser/components/ProvidedNodeRenderer.cjs.map +0 -1
  586. package/dist/browser/components/ProvidedNodeRenderer.d.cts.map +0 -1
  587. package/dist/browser/components/ProvidedNodeRenderer.d.mts.map +0 -1
  588. package/dist/browser/components/ProvidedNodeRenderer.d.ts.map +0 -1
  589. package/dist/browser/components/ProvidedNodeRenderer.js.map +0 -1
  590. package/dist/browser/components/RelationalGraph.cjs +0 -92
  591. package/dist/browser/components/RelationalGraph.cjs.map +0 -1
  592. package/dist/browser/components/RelationalGraph.d.cts.map +0 -1
  593. package/dist/browser/components/RelationalGraph.d.mts.map +0 -1
  594. package/dist/browser/components/RelationalGraph.d.ts.map +0 -1
  595. package/dist/browser/components/RelationalGraph.js +0 -61
  596. package/dist/browser/components/RelationalGraph.js.map +0 -1
  597. package/dist/browser/components/module/graph/NodeHover.cjs +0 -91
  598. package/dist/browser/components/module/graph/NodeHover.cjs.map +0 -1
  599. package/dist/browser/components/module/graph/NodeHover.d.cts +0 -7
  600. package/dist/browser/components/module/graph/NodeHover.d.cts.map +0 -1
  601. package/dist/browser/components/module/graph/NodeHover.d.mts +0 -7
  602. package/dist/browser/components/module/graph/NodeHover.d.mts.map +0 -1
  603. package/dist/browser/components/module/graph/NodeHover.d.ts +0 -7
  604. package/dist/browser/components/module/graph/NodeHover.d.ts.map +0 -1
  605. package/dist/browser/components/module/graph/NodeHover.js +0 -70
  606. package/dist/browser/components/module/graph/NodeHover.js.map +0 -1
  607. package/dist/browser/components/story/TestData.cjs.map +0 -1
  608. package/dist/browser/components/story/TestData.d.cts.map +0 -1
  609. package/dist/browser/components/story/TestData.d.mts.map +0 -1
  610. package/dist/browser/components/story/TestData.d.ts.map +0 -1
  611. package/dist/browser/components/story/TestData.js.map +0 -1
  612. package/dist/browser/components/story/index.cjs.map +0 -1
  613. package/dist/browser/components/story/index.d.cts.map +0 -1
  614. package/dist/browser/components/story/index.d.mts.map +0 -1
  615. package/dist/browser/components/story/index.d.ts.map +0 -1
  616. package/dist/browser/components/story/index.js.map +0 -1
  617. package/dist/browser/hooks/cytoscape/useCytoscapeElements.cjs.map +0 -1
  618. package/dist/browser/hooks/cytoscape/useCytoscapeElements.d.cts.map +0 -1
  619. package/dist/browser/hooks/cytoscape/useCytoscapeElements.d.mts.map +0 -1
  620. package/dist/browser/hooks/cytoscape/useCytoscapeElements.d.ts.map +0 -1
  621. package/dist/browser/hooks/cytoscape/useCytoscapeElements.js.map +0 -1
  622. package/dist/browser/hooks/cytoscape/useHoveredNode.cjs.map +0 -1
  623. package/dist/browser/hooks/cytoscape/useHoveredNode.d.cts +0 -3
  624. package/dist/browser/hooks/cytoscape/useHoveredNode.d.cts.map +0 -1
  625. package/dist/browser/hooks/cytoscape/useHoveredNode.d.mts +0 -3
  626. package/dist/browser/hooks/cytoscape/useHoveredNode.d.mts.map +0 -1
  627. package/dist/browser/hooks/cytoscape/useHoveredNode.d.ts +0 -3
  628. package/dist/browser/hooks/cytoscape/useHoveredNode.d.ts.map +0 -1
  629. package/dist/browser/hooks/cytoscape/useHoveredNode.js.map +0 -1
  630. package/dist/browser/hooks/cytoscape/useNewElements.cjs.map +0 -1
  631. package/dist/browser/hooks/cytoscape/useNewElements.d.cts.map +0 -1
  632. package/dist/browser/hooks/cytoscape/useNewElements.d.mts.map +0 -1
  633. package/dist/browser/hooks/cytoscape/useNewElements.d.ts.map +0 -1
  634. package/dist/browser/hooks/cytoscape/useNewElements.js.map +0 -1
  635. package/dist/browser/hooks/cytoscape/useRenderNewElements.cjs.map +0 -1
  636. package/dist/browser/hooks/cytoscape/useRenderNewElements.d.cts.map +0 -1
  637. package/dist/browser/hooks/cytoscape/useRenderNewElements.d.mts.map +0 -1
  638. package/dist/browser/hooks/cytoscape/useRenderNewElements.d.ts.map +0 -1
  639. package/dist/browser/hooks/cytoscape/useRenderNewElements.js.map +0 -1
  640. package/dist/browser/hooks/cytoscape/useSelectedElement.cjs +0 -80
  641. package/dist/browser/hooks/cytoscape/useSelectedElement.cjs.map +0 -1
  642. package/dist/browser/hooks/cytoscape/useSelectedElement.d.cts +0 -3
  643. package/dist/browser/hooks/cytoscape/useSelectedElement.d.cts.map +0 -1
  644. package/dist/browser/hooks/cytoscape/useSelectedElement.d.mts +0 -3
  645. package/dist/browser/hooks/cytoscape/useSelectedElement.d.mts.map +0 -1
  646. package/dist/browser/hooks/cytoscape/useSelectedElement.d.ts +0 -3
  647. package/dist/browser/hooks/cytoscape/useSelectedElement.d.ts.map +0 -1
  648. package/dist/browser/hooks/cytoscape/useSelectedElement.js +0 -59
  649. package/dist/browser/hooks/cytoscape/useSelectedElement.js.map +0 -1
  650. package/dist/browser/hooks/cytoscape/useToggleSelectedElement.cjs +0 -57
  651. package/dist/browser/hooks/cytoscape/useToggleSelectedElement.cjs.map +0 -1
  652. package/dist/browser/hooks/cytoscape/useToggleSelectedElement.d.cts +0 -4
  653. package/dist/browser/hooks/cytoscape/useToggleSelectedElement.d.cts.map +0 -1
  654. package/dist/browser/hooks/cytoscape/useToggleSelectedElement.d.mts +0 -4
  655. package/dist/browser/hooks/cytoscape/useToggleSelectedElement.d.mts.map +0 -1
  656. package/dist/browser/hooks/cytoscape/useToggleSelectedElement.d.ts +0 -4
  657. package/dist/browser/hooks/cytoscape/useToggleSelectedElement.d.ts.map +0 -1
  658. package/dist/browser/hooks/cytoscape/useToggleSelectedElement.js +0 -36
  659. package/dist/browser/hooks/cytoscape/useToggleSelectedElement.js.map +0 -1
  660. package/dist/node/components/ProvidedNodeRenderer.cjs.map +0 -1
  661. package/dist/node/components/ProvidedNodeRenderer.d.cts.map +0 -1
  662. package/dist/node/components/ProvidedNodeRenderer.d.mts.map +0 -1
  663. package/dist/node/components/ProvidedNodeRenderer.d.ts.map +0 -1
  664. package/dist/node/components/ProvidedNodeRenderer.js.map +0 -1
  665. package/dist/node/components/RelationalGraph.cjs +0 -97
  666. package/dist/node/components/RelationalGraph.cjs.map +0 -1
  667. package/dist/node/components/RelationalGraph.d.cts.map +0 -1
  668. package/dist/node/components/RelationalGraph.d.mts +0 -6
  669. package/dist/node/components/RelationalGraph.d.mts.map +0 -1
  670. package/dist/node/components/RelationalGraph.d.ts +0 -6
  671. package/dist/node/components/RelationalGraph.d.ts.map +0 -1
  672. package/dist/node/components/RelationalGraph.js +0 -61
  673. package/dist/node/components/RelationalGraph.js.map +0 -1
  674. package/dist/node/components/module/graph/NodeHover.cjs +0 -95
  675. package/dist/node/components/module/graph/NodeHover.cjs.map +0 -1
  676. package/dist/node/components/module/graph/NodeHover.d.cts +0 -7
  677. package/dist/node/components/module/graph/NodeHover.d.cts.map +0 -1
  678. package/dist/node/components/module/graph/NodeHover.d.mts +0 -7
  679. package/dist/node/components/module/graph/NodeHover.d.mts.map +0 -1
  680. package/dist/node/components/module/graph/NodeHover.d.ts +0 -7
  681. package/dist/node/components/module/graph/NodeHover.d.ts.map +0 -1
  682. package/dist/node/components/module/graph/NodeHover.js +0 -70
  683. package/dist/node/components/module/graph/NodeHover.js.map +0 -1
  684. package/dist/node/components/story/TestData.cjs.map +0 -1
  685. package/dist/node/components/story/TestData.d.cts.map +0 -1
  686. package/dist/node/components/story/TestData.d.mts.map +0 -1
  687. package/dist/node/components/story/TestData.d.ts.map +0 -1
  688. package/dist/node/components/story/TestData.js.map +0 -1
  689. package/dist/node/components/story/index.cjs.map +0 -1
  690. package/dist/node/components/story/index.d.cts.map +0 -1
  691. package/dist/node/components/story/index.d.mts.map +0 -1
  692. package/dist/node/components/story/index.d.ts.map +0 -1
  693. package/dist/node/components/story/index.js.map +0 -1
  694. package/dist/node/hooks/cytoscape/useCytoscapeElements.cjs.map +0 -1
  695. package/dist/node/hooks/cytoscape/useCytoscapeElements.d.cts.map +0 -1
  696. package/dist/node/hooks/cytoscape/useCytoscapeElements.d.mts.map +0 -1
  697. package/dist/node/hooks/cytoscape/useCytoscapeElements.d.ts.map +0 -1
  698. package/dist/node/hooks/cytoscape/useCytoscapeElements.js.map +0 -1
  699. package/dist/node/hooks/cytoscape/useHoveredNode.cjs.map +0 -1
  700. package/dist/node/hooks/cytoscape/useHoveredNode.d.cts +0 -3
  701. package/dist/node/hooks/cytoscape/useHoveredNode.d.cts.map +0 -1
  702. package/dist/node/hooks/cytoscape/useHoveredNode.d.mts +0 -3
  703. package/dist/node/hooks/cytoscape/useHoveredNode.d.mts.map +0 -1
  704. package/dist/node/hooks/cytoscape/useHoveredNode.d.ts +0 -3
  705. package/dist/node/hooks/cytoscape/useHoveredNode.d.ts.map +0 -1
  706. package/dist/node/hooks/cytoscape/useHoveredNode.js.map +0 -1
  707. package/dist/node/hooks/cytoscape/useNewElements.cjs.map +0 -1
  708. package/dist/node/hooks/cytoscape/useNewElements.d.cts.map +0 -1
  709. package/dist/node/hooks/cytoscape/useNewElements.d.mts.map +0 -1
  710. package/dist/node/hooks/cytoscape/useNewElements.d.ts.map +0 -1
  711. package/dist/node/hooks/cytoscape/useNewElements.js.map +0 -1
  712. package/dist/node/hooks/cytoscape/useRenderNewElements.cjs.map +0 -1
  713. package/dist/node/hooks/cytoscape/useRenderNewElements.d.cts.map +0 -1
  714. package/dist/node/hooks/cytoscape/useRenderNewElements.d.mts.map +0 -1
  715. package/dist/node/hooks/cytoscape/useRenderNewElements.d.ts.map +0 -1
  716. package/dist/node/hooks/cytoscape/useRenderNewElements.js.map +0 -1
  717. package/dist/node/hooks/cytoscape/useSelectedElement.cjs +0 -84
  718. package/dist/node/hooks/cytoscape/useSelectedElement.cjs.map +0 -1
  719. package/dist/node/hooks/cytoscape/useSelectedElement.d.cts +0 -3
  720. package/dist/node/hooks/cytoscape/useSelectedElement.d.cts.map +0 -1
  721. package/dist/node/hooks/cytoscape/useSelectedElement.d.mts +0 -3
  722. package/dist/node/hooks/cytoscape/useSelectedElement.d.mts.map +0 -1
  723. package/dist/node/hooks/cytoscape/useSelectedElement.d.ts +0 -3
  724. package/dist/node/hooks/cytoscape/useSelectedElement.d.ts.map +0 -1
  725. package/dist/node/hooks/cytoscape/useSelectedElement.js +0 -59
  726. package/dist/node/hooks/cytoscape/useSelectedElement.js.map +0 -1
  727. package/dist/node/hooks/cytoscape/useToggleSelectedElement.cjs +0 -61
  728. package/dist/node/hooks/cytoscape/useToggleSelectedElement.cjs.map +0 -1
  729. package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.cts +0 -4
  730. package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.cts.map +0 -1
  731. package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.mts +0 -4
  732. package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.mts.map +0 -1
  733. package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.ts +0 -4
  734. package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.ts.map +0 -1
  735. package/dist/node/hooks/cytoscape/useToggleSelectedElement.js +0 -36
  736. package/dist/node/hooks/cytoscape/useToggleSelectedElement.js.map +0 -1
  737. package/src/components/RelationalGraph.tsx +0 -71
  738. package/src/components/module/graph/NodeHover.tsx +0 -68
  739. package/src/hooks/cytoscape/useSelectedElement.tsx +0 -28
  740. package/src/hooks/cytoscape/useToggleSelectedElement.tsx +0 -30
  741. /package/dist/browser/components/{story → relational/graph/story}/TestData.d.cts +0 -0
  742. /package/dist/browser/components/{story → relational/graph/story}/TestData.d.mts +0 -0
  743. /package/dist/browser/components/{story → relational/graph/story}/TestData.d.ts +0 -0
  744. /package/dist/browser/components/{story → relational/graph/story}/index.d.cts +0 -0
  745. /package/dist/browser/components/{story → relational/graph/story}/index.d.mts +0 -0
  746. /package/dist/browser/components/{story → relational/graph/story}/index.d.ts +0 -0
  747. /package/dist/browser/hooks/cytoscape/{useCytoscapeElements.d.cts → elements/useCytoscapeElements.d.cts} +0 -0
  748. /package/dist/browser/hooks/cytoscape/{useCytoscapeElements.d.mts → elements/useCytoscapeElements.d.mts} +0 -0
  749. /package/dist/browser/hooks/cytoscape/{useCytoscapeElements.d.ts → elements/useCytoscapeElements.d.ts} +0 -0
  750. /package/dist/browser/hooks/cytoscape/{useNewElements.d.cts → elements/useNewElements.d.cts} +0 -0
  751. /package/dist/browser/hooks/cytoscape/{useNewElements.d.mts → elements/useNewElements.d.mts} +0 -0
  752. /package/dist/browser/hooks/cytoscape/{useNewElements.d.ts → elements/useNewElements.d.ts} +0 -0
  753. /package/dist/browser/hooks/cytoscape/{useRenderNewElements.d.cts → elements/useRenderNewElements.d.cts} +0 -0
  754. /package/dist/browser/hooks/cytoscape/{useRenderNewElements.d.mts → elements/useRenderNewElements.d.mts} +0 -0
  755. /package/dist/browser/hooks/cytoscape/{useRenderNewElements.d.ts → elements/useRenderNewElements.d.ts} +0 -0
  756. /package/dist/node/components/{story → relational/graph/story}/TestData.d.cts +0 -0
  757. /package/dist/node/components/{story → relational/graph/story}/TestData.d.mts +0 -0
  758. /package/dist/node/components/{story → relational/graph/story}/TestData.d.ts +0 -0
  759. /package/dist/node/components/{story → relational/graph/story}/index.d.cts +0 -0
  760. /package/dist/node/components/{story → relational/graph/story}/index.d.mts +0 -0
  761. /package/dist/node/components/{story → relational/graph/story}/index.d.ts +0 -0
  762. /package/dist/node/hooks/cytoscape/{useCytoscapeElements.d.cts → elements/useCytoscapeElements.d.cts} +0 -0
  763. /package/dist/node/hooks/cytoscape/{useCytoscapeElements.d.mts → elements/useCytoscapeElements.d.mts} +0 -0
  764. /package/dist/node/hooks/cytoscape/{useCytoscapeElements.d.ts → elements/useCytoscapeElements.d.ts} +0 -0
  765. /package/dist/node/hooks/cytoscape/{useNewElements.d.cts → elements/useNewElements.d.cts} +0 -0
  766. /package/dist/node/hooks/cytoscape/{useNewElements.d.mts → elements/useNewElements.d.mts} +0 -0
  767. /package/dist/node/hooks/cytoscape/{useNewElements.d.ts → elements/useNewElements.d.ts} +0 -0
  768. /package/dist/node/hooks/cytoscape/{useRenderNewElements.d.cts → elements/useRenderNewElements.d.cts} +0 -0
  769. /package/dist/node/hooks/cytoscape/{useRenderNewElements.d.mts → elements/useRenderNewElements.d.mts} +0 -0
  770. /package/dist/node/hooks/cytoscape/{useRenderNewElements.d.ts → elements/useRenderNewElements.d.ts} +0 -0
  771. /package/src/components/{story → relational/graph/story}/TestData.tsx +0 -0
  772. /package/src/components/{story → relational/graph/story}/index.ts +0 -0
  773. /package/src/hooks/cytoscape/{useNewElements.tsx → elements/useNewElements.tsx} +0 -0
@@ -0,0 +1,37 @@
1
+ import { PopperProps } from '@mui/material'
2
+ import { NodeSingular } from 'cytoscape'
3
+ import { useEffect, useRef, useState } from 'react'
4
+
5
+ export const useNodeElement = (node?: NodeSingular) => {
6
+ const ref = useRef<HTMLDivElement>(null)
7
+ const [currentElement, setCurrentElement] = useState<PopperProps['anchorEl'] | null>(null)
8
+ const [boundingBox, setBoundingBox] = useState(node?.renderedBoundingBox())
9
+
10
+ // Ensure first render clears the previous element when node changes to avoid flicker
11
+ useEffect(() => {
12
+ setCurrentElement(null)
13
+ }, [node])
14
+
15
+ useEffect(() => {
16
+ if (node) {
17
+ setBoundingBox(node.renderedBoundingBox())
18
+ }
19
+
20
+ const listener = () => {
21
+ setBoundingBox(node?.renderedBoundingBox())
22
+ }
23
+
24
+ node?.on('position', listener)
25
+
26
+ return () => {
27
+ node?.off('position', undefined, listener)
28
+ }
29
+ }, [node])
30
+
31
+ // Once boundingBox state is set and applied to the layout, update the ref
32
+ useEffect(() => {
33
+ setCurrentElement(ref.current)
34
+ }, [boundingBox])
35
+
36
+ return { boundingBox, currentElement, ref }
37
+ }
@@ -0,0 +1 @@
1
+ export * from './Hover'
@@ -12,10 +12,10 @@ import { useWallet, WalletProvider } from '@xyo-network/react-wallet'
12
12
  import { MemorySentinel, SentinelConfigSchema } from '@xyo-network/sentinel'
13
13
  import { useState } from 'react'
14
14
 
15
- import { CytoscapeInstanceProvider } from '../contexts'
16
- import { useCytoscapeElements, useCytoscapeOptions } from '../hooks'
15
+ import { CytoscapeInstanceProvider } from '../../../contexts'
16
+ import { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks'
17
+ import { NodeRelationalGraphFlexBox } from './Graph'
17
18
  import { ProvidedNodeRenderer } from './ProvidedNodeRenderer'
18
- import { NodeRelationalGraphFlexBox } from './RelationalGraph'
19
19
  import { options } from './story'
20
20
 
21
21
  const nodeUrl = 'http://localhost:8080/node'
@@ -0,0 +1,78 @@
1
+ import { Button, ButtonGroup, useTheme } from '@mui/material'
2
+ import { FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'
3
+ import { useShareForwardedRef } from '@xyo-network/react-shared'
4
+ import cytoscape, { Core } from 'cytoscape'
5
+ import { forwardRef, useEffect, useState } from 'react'
6
+
7
+ import { useCytoscapeInstance } from '../../../contexts'
8
+ import { NodeRelationalGraphProps } from '../../lib'
9
+
10
+ export const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelationalGraphProps>(
11
+ ({ actions, children, showDetails, detail, options, ...props }, ref) => {
12
+ const theme = useTheme()
13
+ const [cy, setCy] = useState<Core>()
14
+ const { setCy: setCyContext } = useCytoscapeInstance()
15
+ const sharedRef = useShareForwardedRef(ref)
16
+
17
+ const handleReset = () => {
18
+ cy?.reset()
19
+ cy?.fit(undefined, 20)
20
+ }
21
+
22
+ useEffect(() => {
23
+ if (sharedRef) {
24
+ const newCy = cytoscape({
25
+ container: sharedRef.current,
26
+ ...options,
27
+ })
28
+ setCy(newCy)
29
+ }
30
+ }, [options, sharedRef])
31
+
32
+ useEffect(() => {
33
+ setCyContext?.(cy)
34
+ }, [cy, setCyContext])
35
+
36
+ return (
37
+ <FlexCol id="relational-graph-wrapper" {...props}>
38
+ <FlexRow justifyContent="start" width="100%">
39
+ {actions === null ? null : actions ? (
40
+ <ButtonGroup>
41
+ {actions}
42
+ <Button size={'small'} variant={'contained'} onClick={handleReset}>
43
+ Reset View
44
+ </Button>
45
+ </ButtonGroup>
46
+ ) : (
47
+ <Button size={'small'} variant={'contained'} onClick={handleReset}>
48
+ Reset
49
+ </Button>
50
+ )}
51
+ </FlexRow>
52
+ <FlexGrowRow width="100%" alignItems="start">
53
+ {showDetails ? (
54
+ <FlexCol height="100%" width={'85%'}>
55
+ {detail}
56
+ </FlexCol>
57
+ ) : null}
58
+ <FlexCol
59
+ justifyContent="start"
60
+ classes="cytoscape-wrap"
61
+ width={showDetails ? '15%' : '100%'}
62
+ height={showDetails ? '50%' : '100%'}
63
+ border={showDetails ? `1px solid ${theme.palette.divider}` : undefined}
64
+ >
65
+ {/* Cytoscape Element */}
66
+ <FlexCol alignItems="stretch" position="absolute" width="100%" height="100%" ref={sharedRef} />
67
+ {children}
68
+ </FlexCol>
69
+ </FlexGrowRow>
70
+ </FlexCol>
71
+ )
72
+ },
73
+ )
74
+
75
+ NodeRelationalGraphFlexBox.displayName = 'NodeRelationalGraph'
76
+
77
+ /** @deprecated */
78
+ export const NodeRelationalGraph = NodeRelationalGraphFlexBox
@@ -9,9 +9,9 @@ import { useWallet, WalletProvider } from '@xyo-network/react-wallet'
9
9
  import { EventObject } from 'cytoscape'
10
10
  import { useEffect, useState } from 'react'
11
11
 
12
- import { CytoscapeInstanceProvider, useCytoscapeInstance } from '../contexts'
13
- import { useCytoscapeElements, useCytoscapeOptions } from '../hooks'
14
- import { NodeRelationalGraphFlexBox } from './RelationalGraph'
12
+ import { CytoscapeInstanceProvider, useCytoscapeInstance } from '../../../contexts'
13
+ import { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks'
14
+ import { NodeRelationalGraphFlexBox } from './Graph'
15
15
 
16
16
  const MemoryNodeDecorator: Decorator = (Story, args) => {
17
17
  const [node, setNode] = useState<MemoryNode>()
@@ -2,9 +2,9 @@ import { AccountInstance } from '@xyo-network/account-model'
2
2
  import { NodeInstance } from '@xyo-network/node-model'
3
3
  import { useProvidedNode } from '@xyo-network/react-node'
4
4
 
5
- import { useCytoscapeElements, useCytoscapeOptions } from '../hooks'
6
- import { NodeRelationalGraphProps } from './lib'
7
- import { NodeRelationalGraphFlexBox } from './RelationalGraph'
5
+ import { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks'
6
+ import { NodeRelationalGraphProps } from '../../lib'
7
+ import { NodeRelationalGraphFlexBox } from './Graph'
8
8
 
9
9
  export interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {
10
10
  account?: AccountInstance
@@ -0,0 +1,2 @@
1
+ export * from './Graph'
2
+ export * from './ProvidedNodeRenderer'
@@ -0,0 +1 @@
1
+ export * from './graph'
@@ -0,0 +1,2 @@
1
+ export * from './useCytoscapeElements'
2
+ export * from './useElements'
@@ -4,7 +4,7 @@ import { isNodeInstance } from '@xyo-network/node-model'
4
4
  import { ElementDefinition } from 'cytoscape'
5
5
  import { useEffect, useState } from 'react'
6
6
 
7
- import { CytoscapeElements } from '../../Cytoscape'
7
+ import { CytoscapeElements } from '../../../Cytoscape'
8
8
 
9
9
  export const useCytoscapeElements = (module?: ModuleInstance | null) => {
10
10
  const [elements, setElements] = useState<ElementDefinition[]>([])
@@ -0,0 +1,13 @@
1
+ import { useHoveredNode } from './useHoveredNode'
2
+ import { useNewElements } from './useNewElements'
3
+ import { useRenderNewElements } from './useRenderNewElements'
4
+ import { useSelectedElement } from './useSelectedElement'
5
+
6
+ export const useElements = (hideLabels: boolean) => {
7
+ const { selectedElement, toggleSelectedElement } = useSelectedElement()
8
+ const newElements = useNewElements(selectedElement)
9
+ const renderedElements = useRenderNewElements(newElements, hideLabels)
10
+ const [hoveredNode, setHoveredNode] = useHoveredNode(renderedElements)
11
+
12
+ return { hoveredNode, setHoveredNode, toggleSelectedElement }
13
+ }
@@ -1,9 +1,9 @@
1
1
  import { NodeCollection, NodeSingular } from 'cytoscape'
2
- import { useCallback, useEffect, useState } from 'react'
2
+ import { Dispatch, SetStateAction, useCallback, useEffect, useState } from 'react'
3
3
 
4
- import { useCytoscapeInstance } from '../../contexts'
4
+ import { useCytoscapeInstance } from '../../../contexts'
5
5
 
6
- export const useHoveredNode = (renderedElements?: NodeCollection) => {
6
+ export const useHoveredNode = (renderedElements?: NodeCollection): [NodeSingular | undefined, Dispatch<SetStateAction<NodeSingular | undefined>>] => {
7
7
  const { cy } = useCytoscapeInstance(true)
8
8
  const [hoveredNode, setHoveredNode] = useState<NodeSingular>()
9
9
 
@@ -11,9 +11,6 @@ export const useHoveredNode = (renderedElements?: NodeCollection) => {
11
11
  node.on('mouseover tap', () => {
12
12
  setHoveredNode(node)
13
13
  })
14
- node.on('mouseout', () => {
15
- setHoveredNode(undefined)
16
- })
17
14
  }, [])
18
15
 
19
16
  useEffect(() => {
@@ -28,5 +25,5 @@ export const useHoveredNode = (renderedElements?: NodeCollection) => {
28
25
  })
29
26
  }, [cy, nodeListener])
30
27
 
31
- return hoveredNode
28
+ return [hoveredNode, setHoveredNode]
32
29
  }
@@ -1,8 +1,8 @@
1
1
  import { CollectionReturnValue, ElementDefinition } from 'cytoscape'
2
2
  import { useEffect, useState } from 'react'
3
3
 
4
- import { useCytoscapeInstance } from '../../contexts'
5
- import { ColaLayout } from '../../Cytoscape'
4
+ import { useCytoscapeInstance } from '../../../contexts'
5
+ import { ColaLayout } from '../../../Cytoscape'
6
6
 
7
7
  export const useRenderNewElements = (newElements: ElementDefinition[] = [], hideLabels?: boolean) => {
8
8
  const { cy } = useCytoscapeInstance(true)
@@ -0,0 +1,25 @@
1
+ import { NodeSingular } from 'cytoscape'
2
+ import { useState } from 'react'
3
+
4
+ import { useCytoscapeInstance } from '../../../contexts'
5
+
6
+ export const useSelectedElement = () => {
7
+ const [selectedElement, setSelectedElement] = useState<NodeSingular>()
8
+ const { cy } = useCytoscapeInstance(true)
9
+
10
+ const updateStyles = (element: NodeSingular) => {
11
+ const nodes = cy?.nodes()
12
+ nodes?.toggleClass('activeNode', false)
13
+ element.toggleClass('activeNode', true)
14
+ }
15
+
16
+ const toggleSelectedElement = (address?: string) => {
17
+ const selectedNode = cy?.nodes(`[id="${address}"]`)?.[0]
18
+ if (selectedNode) {
19
+ setSelectedElement(selectedNode)
20
+ updateStyles(selectedNode)
21
+ }
22
+ }
23
+
24
+ return { selectedElement, toggleSelectedElement }
25
+ }
@@ -1,7 +1,4 @@
1
- export * from './useCytoscapeElements'
1
+ export * from './elements'
2
2
  export * from './useCytoscapeOptions'
3
- export * from './useHoveredNode'
4
- export * from './useNewElements'
3
+ export * from './useModuleDetails'
5
4
  export * from './useRelationalGraphOptions'
6
- export * from './useRenderNewElements'
7
- export * from './useSelectedElement'
@@ -2,7 +2,7 @@ import { useTheme } from '@mui/material'
2
2
  import { CytoscapeOptions } from 'cytoscape'
3
3
  import { useMemo } from 'react'
4
4
 
5
- import { EdgeStyled, NodeIdStyles, NodeStyled } from '../../Cytoscape'
5
+ import { EdgeStyled, Node, NodeAsRoot, NodeWithName } from '../../Cytoscape'
6
6
  import { useIcons } from './useIcons'
7
7
 
8
8
  export const useCytoscapeStyle = (hideLabels = false) => {
@@ -11,8 +11,9 @@ export const useCytoscapeStyle = (hideLabels = false) => {
11
11
 
12
12
  const style: CytoscapeOptions['style'] = useMemo(
13
13
  () => [
14
- NodeIdStyles(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),
15
- NodeStyled(icons, theme.palette.primary.main, hideLabels),
14
+ Node(icons, theme.palette.primary.main, hideLabels),
15
+ NodeWithName(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),
16
+ NodeAsRoot(theme.palette.secondary.main),
16
17
  EdgeStyled(theme.palette.divider, theme.palette.divider),
17
18
  ],
18
19
  [icons, hideLabels, theme],
@@ -0,0 +1,68 @@
1
+ import { usePromise } from '@xylabs/react-promise'
2
+ import { ModuleInstance } from '@xyo-network/module'
3
+ import { useEffect, useState } from 'react'
4
+
5
+ import { useCytoscapeInstance } from '../../contexts'
6
+
7
+ export const useModuleDetails = (rootModule?: ModuleInstance | null, onFoundModule?: () => void) => {
8
+ const { cy } = useCytoscapeInstance()
9
+ const [moduleAddress, setModuleAddress] = useState<string | null>()
10
+
11
+ const [foundModule] = usePromise(async () => {
12
+ if (moduleAddress === null) return null
13
+ if (moduleAddress && rootModule) {
14
+ const foundModule = await rootModule.resolve(moduleAddress)
15
+ return foundModule ? foundModule : null
16
+ }
17
+ }, [moduleAddress, rootModule])
18
+
19
+ useEffect(() => {
20
+ const resizeObserver = new ResizeObserver(() => {
21
+ if (moduleAddress === null) {
22
+ // cytoscape tries to center prematurely without it :(
23
+ setTimeout(() => cy?.center(), 100)
24
+ } else if (foundModule && cy) {
25
+ const node = cy.nodes(`[id="${moduleAddress}"]`)?.[0]
26
+ // cy.pan(newPan)
27
+ // cytoscape tries to center prematurely without it :(
28
+ setTimeout(() => cy.center(node), 100)
29
+ }
30
+ })
31
+
32
+ const container = cy?.container()
33
+ if (container) {
34
+ resizeObserver.observe(container)
35
+ }
36
+
37
+ return () => {
38
+ if (container) resizeObserver.unobserve(container)
39
+ }
40
+ }, [cy, moduleAddress, foundModule, rootModule?.address])
41
+
42
+ useEffect(() => {
43
+ if (foundModule) {
44
+ onFoundModule?.()
45
+ }
46
+ }, [cy, moduleAddress, foundModule, onFoundModule])
47
+
48
+ const onModuleDetails = (address?: string | null) => {
49
+ const moduleNode = cy?.nodes(`[id="${address}"]`)
50
+ const rootModuleNode = cy?.nodes(`[id="${rootModule?.address}"]`)
51
+ const foundModuleNode = cy?.nodes(`[id="${foundModule?.address}"]`)
52
+ const notModuleNode = cy?.nodes(`[id != "${address}"]`)
53
+
54
+ if (address) {
55
+ // address was passed so we set the node to active styles
56
+ moduleNode?.toggleClass('activeNode', true)
57
+ notModuleNode?.toggleClass('activeNode', false)
58
+ } else {
59
+ // no address was passes so we reset the state
60
+ notModuleNode?.toggleClass('activeNode', false)
61
+ const activeNode = foundModuleNode?.length ? foundModuleNode : rootModuleNode
62
+ activeNode?.toggleClass('activeNode', true)
63
+ }
64
+ setModuleAddress(address)
65
+ }
66
+
67
+ return { module: foundModule, onModuleDetails }
68
+ }
@@ -2,7 +2,7 @@ import { ModuleInstance } from '@xyo-network/module'
2
2
  import { useState } from 'react'
3
3
 
4
4
  import { ConcentricLayout } from '../../Cytoscape'
5
- import { useCytoscapeElements } from './useCytoscapeElements'
5
+ import { useCytoscapeElements } from './elements'
6
6
  import { useCytoscapeOptions } from './useCytoscapeOptions'
7
7
  import { useCytoscapeStyle } from './useCytoscapeStyle'
8
8
 
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/ProvidedNodeRenderer.tsx","../../../src/hooks/cytoscape/useCytoscapeElements.ts","../../../src/Cytoscape/CytoscapeElements.ts","../../../src/Cytoscape/lib/encodeSvg.ts","../../../src/Cytoscape/lib/iconMap.ts","../../../src/Cytoscape/lib/layout/ConcentricLayout.ts","../../../src/Cytoscape/lib/parseModuleType.ts","../../../src/Cytoscape/CytoscapeIcons.tsx","../../../src/Cytoscape/CytoscapeStyles.ts","../../../src/hooks/cytoscape/useCytoscapeOptions.ts","../../../src/hooks/cytoscape/useCytoscapeStyle.tsx","../../../src/hooks/cytoscape/useIcons.tsx","../../../src/contexts/CytoscapeInstance/Context.ts","../../../src/contexts/CytoscapeInstance/use.ts","../../../src/components/RelationalGraph.tsx"],"sourcesContent":["import { AccountInstance } from '@xyo-network/account-model'\nimport { NodeInstance } from '@xyo-network/node-model'\nimport { useProvidedNode } from '@xyo-network/react-node'\n\nimport { useCytoscapeElements, useCytoscapeOptions } from '../hooks'\nimport { NodeRelationalGraphProps } from './lib'\nimport { NodeRelationalGraphFlexBox } from './RelationalGraph'\n\nexport interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {\n account?: AccountInstance\n node?: NodeInstance\n}\n\nexport const ProvidedNodeRenderer: React.FC<ProvidedNodeRendererProps> = ({ node, ...props }) => {\n const [providedNode] = useProvidedNode()\n const elements = useCytoscapeElements(node ?? providedNode)\n const options = useCytoscapeOptions(elements)\n\n return <NodeRelationalGraphFlexBox alignItems=\"stretch\" flexGrow={1} height=\"100%\" options={options} {...props} />\n}\n","import { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { EventUnsubscribeFunction, ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeElements } from '../../Cytoscape'\n\nexport const useCytoscapeElements = (module?: ModuleInstance | null) => {\n const [elements, setElements] = useState<ElementDefinition[]>([])\n\n useAsyncEffect(\n // eslint-disable-next-line react-hooks/exhaustive-deps\n async () => {\n if (module) {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n }\n },\n [module],\n )\n\n useEffect(() => {\n let attachedListener: EventUnsubscribeFunction | undefined = undefined\n let detachedListener: EventUnsubscribeFunction | undefined = undefined\n\n if (module && isNodeInstance(module)) {\n attachedListener = module.on('moduleAttached', async () => {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n })\n detachedListener = module.on('moduleDetached', async () => {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n })\n }\n\n return () => {\n attachedListener?.()\n detachedListener?.()\n }\n }, [module])\n\n return elements\n}\n","import { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\n\nimport { parseModuleType } from './lib'\n\nexport class CytoscapeElements {\n static MaxNameLength = 20\n\n static buildEdge(rootNode: ElementDefinition, newNode: ElementDefinition) {\n return {\n data: {\n id: `${rootNode.data.id}/${newNode.data.id}`,\n source: rootNode.data.id,\n target: newNode.data.id,\n },\n }\n }\n\n static async buildElements(module: ModuleInstance): Promise<ElementDefinition[]> {\n const newRootNode = CytoscapeElements.buildRootNode(module)\n const newElements: ElementDefinition[] = [newRootNode]\n\n try {\n const childElements = await CytoscapeElements.recurseNodes(module)\n childElements?.forEach((module) => {\n const newNode = CytoscapeElements.buildNode(module, { rootNodeId: newRootNode.data.id })\n newElements.push(newNode)\n\n const newEdge = CytoscapeElements.buildEdge(newRootNode, newNode)\n newElements.push(newEdge)\n })\n\n return newElements\n } catch (e) {\n console.error('error resolving modules', e)\n return []\n }\n }\n\n static buildNode(module: ModuleInstance, properties?: { [key: string]: unknown }): ElementDefinition {\n const { address, config } = module\n const normalizedName = config.name ?? address.substring(0, 8)\n return {\n data: {\n address,\n id: address,\n name: normalizedName,\n type: parseModuleType(module),\n ...properties,\n },\n }\n }\n\n static buildRootNode = (module: ModuleInstance): ElementDefinition => {\n return CytoscapeElements.buildNode(module, { root: true })\n }\n\n static normalizeName(name?: string) {\n if (!name) return\n if (name.length > this.MaxNameLength) return `${name.substring(0, 20)}...`\n return name\n }\n\n static async recurseNodes(module: ModuleInstance, maxTraversals = 1): Promise<ModuleInstance[]> {\n let localDepth = 0\n const childModules: ModuleInstance[] = []\n\n const traverse = async (nestedNode: ModuleInstance) => {\n if (localDepth < maxTraversals) {\n const modules = await nestedNode.resolve(undefined, { direction: 'down', maxDepth: 2 })\n await Promise.all(\n modules.map(async (child) => {\n if (child !== nestedNode && isNodeInstance(child)) {\n localDepth++\n await traverse(child)\n // don't re add the root module that was passed in\n } else if (child !== module) {\n childModules.push(child)\n }\n }),\n )\n }\n }\n\n await traverse(module)\n\n return childModules\n }\n}\n","import { ReactElement } from 'react'\n// eslint-disable-next-line import/no-internal-modules\nimport { renderToStaticMarkup } from 'react-dom/server'\n\nconst dataUri = 'data:image/svg+xml,'\n\nexport const encodeSvg = (reactElement: ReactElement, color?: string) => {\n const svgString = renderToStaticMarkup(reactElement)\n\n const doc = new DOMParser().parseFromString(svgString, 'text/html')\n const svgElement = doc.getElementsByTagName('svg')[0]\n if (svgElement) {\n svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg')\n svgElement.setAttribute('height', '100')\n svgElement.style.fill = color ?? 'black'\n }\n\n return `${dataUri}${window.encodeURIComponent(svgElement.outerHTML)}`\n}\n","import { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const generateIconMap: () => Record<CyNodeModuleTypes, string> = () => ({\n archivist: '',\n bridge: '',\n diviner: '',\n module: '',\n node: '',\n sentinel: '',\n witness: '',\n})\n","import { LayoutOptions } from 'cytoscape'\n\nexport const ConcentricLayout: LayoutOptions = {\n concentric: function (node) {\n return node.degree()\n },\n levelWidth: function () {\n return 2\n },\n minNodeSpacing: 75,\n name: 'concentric',\n}\n","import { isArchivistInstance } from '@xyo-network/archivist-model'\nimport { isBridgeInstance } from '@xyo-network/bridge-model'\nimport { isDivinerInstance } from '@xyo-network/diviner-model'\nimport { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { isSentinelInstance } from '@xyo-network/sentinel'\nimport { isWitnessModule } from '@xyo-network/witness'\n\nimport { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const parseModuleType = (module?: ModuleInstance): CyNodeModuleTypes => {\n let type: CyNodeModuleTypes = 'module'\n if (module) {\n if (isArchivistInstance(module)) {\n type = 'archivist'\n } else if (isBridgeInstance(module)) {\n type = 'bridge'\n } else if (isDivinerInstance(module)) {\n type = 'diviner'\n } else if (isNodeInstance(module)) {\n type = 'node'\n } else if (isSentinelInstance(module)) {\n type = 'sentinel'\n } else if (isWitnessModule(module)) {\n type = 'witness'\n } else {\n type = 'module'\n }\n }\n return type\n}\n","import {\n BubbleChartRounded as BubbleChartRoundedIcon,\n Hub as HubIcon,\n InsertLinkRounded as InsertLinkRoundedIcon,\n Inventory2Rounded as Inventory2RoundedIcon,\n QuestionMarkRounded as QuestionMarkRoundedIcon,\n TimerRounded as TimerRoundedIcon,\n VisibilityRounded as VisibilityRoundedIcon,\n} from '@mui/icons-material'\nimport { SvgIconTypeMap } from '@mui/material'\nimport { OverridableComponent } from '@mui/material/OverridableComponent'\n\nimport { CyNodeModuleTypes } from './lib'\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport const CyIconSet: Record<CyNodeModuleTypes, OverridableComponent<SvgIconTypeMap<{}, 'svg'>>> = {\n archivist: Inventory2RoundedIcon,\n bridge: InsertLinkRoundedIcon,\n diviner: BubbleChartRoundedIcon,\n module: QuestionMarkRoundedIcon,\n node: HubIcon,\n sentinel: TimerRoundedIcon,\n witness: VisibilityRoundedIcon,\n}\n","import { Stylesheet } from 'cytoscape'\n\nimport { CyNodeModuleTypes } from './lib'\n\nexport const NodeIdStyles = (color?: string, outlineColor?: string): Stylesheet => ({\n selector: 'node[name]',\n style: {\n color,\n 'font-family': 'Lexend Deca, Helvetica, sans-serif',\n 'font-size': 12,\n 'overlay-padding': '6px',\n 'text-halign': 'center',\n 'text-outline-color': outlineColor,\n 'text-outline-width': '1px',\n 'text-valign': 'top',\n },\n})\n\nexport const NodeStyled = (icons: Record<CyNodeModuleTypes, string>, bgColor?: string, hideLabels = false): Stylesheet => ({\n selector: 'node',\n style: {\n 'background-color': bgColor,\n 'background-height': '75%',\n 'background-image': (elem) => icons[elem.data('type') as CyNodeModuleTypes],\n 'background-width': '24',\n label: hideLabels ? undefined : 'data(name)',\n shape: 'round-rectangle',\n },\n})\n\nexport const EdgeStyled = (lineColor?: string, targetArrowColor?: string) => ({\n selector: 'edge',\n style: {\n 'curve-style': 'bezier',\n 'line-color': lineColor,\n 'line-opacity': 0.1,\n 'target-arrow-color': targetArrowColor,\n 'target-arrow-shape': 'triangle',\n width: 3,\n },\n})\n\nexport const NodeBgStyles = (bgColor: string): [string, string] => ['background-color', bgColor]\n","import { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useCytoscapeOptions = (\n elements: CytoscapeOptions['elements'],\n style?: CytoscapeOptions['style'],\n layout?: CytoscapeOptions['layout'],\n) => {\n const defaultStyle = useCytoscapeStyle()\n\n const resolvedLayout = layout ?? ConcentricLayout\n const resolvedStyle = style ?? defaultStyle\n\n const options = useMemo<CytoscapeOptions | undefined>(() => {\n if (elements && resolvedLayout && resolvedStyle) {\n return {\n elements,\n layout: resolvedLayout,\n style: resolvedStyle,\n }\n }\n }, [elements, layout, style])\n\n return options\n}\n","import { useTheme } from '@mui/material'\nimport { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { EdgeStyled, NodeIdStyles, NodeStyled } from '../../Cytoscape'\nimport { useIcons } from './useIcons'\n\nexport const useCytoscapeStyle = (hideLabels = false) => {\n const theme = useTheme()\n const icons = useIcons()\n\n const style: CytoscapeOptions['style'] = useMemo(\n () => [\n NodeIdStyles(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),\n NodeStyled(icons, theme.palette.primary.main, hideLabels),\n EdgeStyled(theme.palette.divider, theme.palette.divider),\n ],\n [icons, hideLabels, theme],\n )\n\n return style\n}\n","import { useTheme } from '@mui/material'\nimport { useMemo } from 'react'\n\nimport { CyIconSet, CyNodeModuleTypes, encodeSvg, generateIconMap } from '../../Cytoscape'\n\nexport const useIcons = () => {\n const theme = useTheme()\n const icons = useMemo(() => {\n const iconMap = generateIconMap()\n return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {\n const icon = <IconComponent fontSize=\"small\" />\n acc[name as CyNodeModuleTypes] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary))\n return acc\n }, iconMap)\n }, [theme.palette])\n\n return icons\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","import { Button, ButtonGroup, styled } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport cytoscape, { Core } from 'cytoscape'\nimport { forwardRef, useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../contexts'\nimport { NodeRelationalGraphProps } from './lib'\n\nexport const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelationalGraphProps>(({ actions, children, options, ...props }, ref) => {\n const [cy, setCy] = useState<Core>()\n const { setCy: setCyContext } = useCytoscapeInstance()\n const sharedRef = useShareForwardedRef(ref)\n\n const handleReset = () => {\n cy?.reset()\n cy?.fit(undefined, 20)\n }\n\n useEffect(() => {\n if (sharedRef) {\n const newCy = cytoscape({\n container: sharedRef.current,\n ...options,\n })\n setCy(newCy)\n }\n }, [options, sharedRef])\n\n useEffect(() => {\n setCyContext?.(cy)\n }, [cy, setCyContext])\n\n return (\n <FlexCol {...props}>\n <ActionsContainer>\n <>\n {actions ? (\n <ButtonGroup>\n {actions}\n <Button size={'small'} variant={'contained'} onClick={handleReset}>\n Reset View\n </Button>\n </ButtonGroup>\n ) : (\n <Button size={'small'} variant={'contained'} onClick={handleReset}>\n Reset\n </Button>\n )}\n </>\n </ActionsContainer>\n {/* Cytoscape Element */}\n <FlexCol alignItems=\"stretch\" height=\"100%\" position=\"absolute\" ref={sharedRef} width=\"100%\"></FlexCol>\n {children}\n </FlexCol>\n )\n})\n\nNodeRelationalGraphFlexBox.displayName = 'NodeRelationalGraph'\n\nconst ActionsContainer = styled(FlexRow, { name: 'ActionsContainer' })(({ theme }) => ({\n flexWrap: 'wrap',\n gap: theme.spacing(1),\n position: 'absolute',\n right: '10px',\n top: '10px',\n zIndex: 2,\n}))\n\n/** @deprecated */\nexport const NodeRelationalGraph = NodeRelationalGraphFlexBox\n"],"mappings":"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","names":["import_node_model","import_node_model","module","module","Inventory2RoundedIcon","InsertLinkRoundedIcon","BubbleChartRoundedIcon","QuestionMarkRoundedIcon","HubIcon","TimerRoundedIcon","VisibilityRoundedIcon","module","import_react","import_material","import_react","import_react","import_react_shared","import_material","import_react_shared","import_react","import_jsx_runtime","cytoscape","import_jsx_runtime"]}
@@ -1 +0,0 @@
1
- {"version":3,"file":"ProvidedNodeRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/ProvidedNodeRenderer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAItD,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAGhD,MAAM,WAAW,yBAA0B,SAAQ,wBAAwB;IACzE,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAMpE,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"ProvidedNodeRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/ProvidedNodeRenderer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAItD,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAGhD,MAAM,WAAW,yBAA0B,SAAQ,wBAAwB;IACzE,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAMpE,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"ProvidedNodeRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/ProvidedNodeRenderer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAItD,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAGhD,MAAM,WAAW,yBAA0B,SAAQ,wBAAwB;IACzE,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAMpE,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/ProvidedNodeRenderer.tsx","../../../src/hooks/cytoscape/useCytoscapeElements.ts","../../../src/Cytoscape/CytoscapeElements.ts","../../../src/Cytoscape/lib/encodeSvg.ts","../../../src/Cytoscape/lib/iconMap.ts","../../../src/Cytoscape/lib/layout/ConcentricLayout.ts","../../../src/Cytoscape/lib/parseModuleType.ts","../../../src/Cytoscape/CytoscapeIcons.tsx","../../../src/Cytoscape/CytoscapeStyles.ts","../../../src/hooks/cytoscape/useCytoscapeOptions.ts","../../../src/hooks/cytoscape/useCytoscapeStyle.tsx","../../../src/hooks/cytoscape/useIcons.tsx","../../../src/contexts/CytoscapeInstance/Context.ts","../../../src/contexts/CytoscapeInstance/use.ts","../../../src/components/RelationalGraph.tsx"],"sourcesContent":["import { AccountInstance } from '@xyo-network/account-model'\nimport { NodeInstance } from '@xyo-network/node-model'\nimport { useProvidedNode } from '@xyo-network/react-node'\n\nimport { useCytoscapeElements, useCytoscapeOptions } from '../hooks'\nimport { NodeRelationalGraphProps } from './lib'\nimport { NodeRelationalGraphFlexBox } from './RelationalGraph'\n\nexport interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {\n account?: AccountInstance\n node?: NodeInstance\n}\n\nexport const ProvidedNodeRenderer: React.FC<ProvidedNodeRendererProps> = ({ node, ...props }) => {\n const [providedNode] = useProvidedNode()\n const elements = useCytoscapeElements(node ?? providedNode)\n const options = useCytoscapeOptions(elements)\n\n return <NodeRelationalGraphFlexBox alignItems=\"stretch\" flexGrow={1} height=\"100%\" options={options} {...props} />\n}\n","import { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { EventUnsubscribeFunction, ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeElements } from '../../Cytoscape'\n\nexport const useCytoscapeElements = (module?: ModuleInstance | null) => {\n const [elements, setElements] = useState<ElementDefinition[]>([])\n\n useAsyncEffect(\n // eslint-disable-next-line react-hooks/exhaustive-deps\n async () => {\n if (module) {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n }\n },\n [module],\n )\n\n useEffect(() => {\n let attachedListener: EventUnsubscribeFunction | undefined = undefined\n let detachedListener: EventUnsubscribeFunction | undefined = undefined\n\n if (module && isNodeInstance(module)) {\n attachedListener = module.on('moduleAttached', async () => {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n })\n detachedListener = module.on('moduleDetached', async () => {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n })\n }\n\n return () => {\n attachedListener?.()\n detachedListener?.()\n }\n }, [module])\n\n return elements\n}\n","import { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\n\nimport { parseModuleType } from './lib'\n\nexport class CytoscapeElements {\n static MaxNameLength = 20\n\n static buildEdge(rootNode: ElementDefinition, newNode: ElementDefinition) {\n return {\n data: {\n id: `${rootNode.data.id}/${newNode.data.id}`,\n source: rootNode.data.id,\n target: newNode.data.id,\n },\n }\n }\n\n static async buildElements(module: ModuleInstance): Promise<ElementDefinition[]> {\n const newRootNode = CytoscapeElements.buildRootNode(module)\n const newElements: ElementDefinition[] = [newRootNode]\n\n try {\n const childElements = await CytoscapeElements.recurseNodes(module)\n childElements?.forEach((module) => {\n const newNode = CytoscapeElements.buildNode(module, { rootNodeId: newRootNode.data.id })\n newElements.push(newNode)\n\n const newEdge = CytoscapeElements.buildEdge(newRootNode, newNode)\n newElements.push(newEdge)\n })\n\n return newElements\n } catch (e) {\n console.error('error resolving modules', e)\n return []\n }\n }\n\n static buildNode(module: ModuleInstance, properties?: { [key: string]: unknown }): ElementDefinition {\n const { address, config } = module\n const normalizedName = config.name ?? address.substring(0, 8)\n return {\n data: {\n address,\n id: address,\n name: normalizedName,\n type: parseModuleType(module),\n ...properties,\n },\n }\n }\n\n static buildRootNode = (module: ModuleInstance): ElementDefinition => {\n return CytoscapeElements.buildNode(module, { root: true })\n }\n\n static normalizeName(name?: string) {\n if (!name) return\n if (name.length > this.MaxNameLength) return `${name.substring(0, 20)}...`\n return name\n }\n\n static async recurseNodes(module: ModuleInstance, maxTraversals = 1): Promise<ModuleInstance[]> {\n let localDepth = 0\n const childModules: ModuleInstance[] = []\n\n const traverse = async (nestedNode: ModuleInstance) => {\n if (localDepth < maxTraversals) {\n const modules = await nestedNode.resolve(undefined, { direction: 'down', maxDepth: 2 })\n await Promise.all(\n modules.map(async (child) => {\n if (child !== nestedNode && isNodeInstance(child)) {\n localDepth++\n await traverse(child)\n // don't re add the root module that was passed in\n } else if (child !== module) {\n childModules.push(child)\n }\n }),\n )\n }\n }\n\n await traverse(module)\n\n return childModules\n }\n}\n","import { ReactElement } from 'react'\n// eslint-disable-next-line import/no-internal-modules\nimport { renderToStaticMarkup } from 'react-dom/server'\n\nconst dataUri = 'data:image/svg+xml,'\n\nexport const encodeSvg = (reactElement: ReactElement, color?: string) => {\n const svgString = renderToStaticMarkup(reactElement)\n\n const doc = new DOMParser().parseFromString(svgString, 'text/html')\n const svgElement = doc.getElementsByTagName('svg')[0]\n if (svgElement) {\n svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg')\n svgElement.setAttribute('height', '100')\n svgElement.style.fill = color ?? 'black'\n }\n\n return `${dataUri}${window.encodeURIComponent(svgElement.outerHTML)}`\n}\n","import { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const generateIconMap: () => Record<CyNodeModuleTypes, string> = () => ({\n archivist: '',\n bridge: '',\n diviner: '',\n module: '',\n node: '',\n sentinel: '',\n witness: '',\n})\n","import { LayoutOptions } from 'cytoscape'\n\nexport const ConcentricLayout: LayoutOptions = {\n concentric: function (node) {\n return node.degree()\n },\n levelWidth: function () {\n return 2\n },\n minNodeSpacing: 75,\n name: 'concentric',\n}\n","import { isArchivistInstance } from '@xyo-network/archivist-model'\nimport { isBridgeInstance } from '@xyo-network/bridge-model'\nimport { isDivinerInstance } from '@xyo-network/diviner-model'\nimport { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { isSentinelInstance } from '@xyo-network/sentinel'\nimport { isWitnessModule } from '@xyo-network/witness'\n\nimport { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const parseModuleType = (module?: ModuleInstance): CyNodeModuleTypes => {\n let type: CyNodeModuleTypes = 'module'\n if (module) {\n if (isArchivistInstance(module)) {\n type = 'archivist'\n } else if (isBridgeInstance(module)) {\n type = 'bridge'\n } else if (isDivinerInstance(module)) {\n type = 'diviner'\n } else if (isNodeInstance(module)) {\n type = 'node'\n } else if (isSentinelInstance(module)) {\n type = 'sentinel'\n } else if (isWitnessModule(module)) {\n type = 'witness'\n } else {\n type = 'module'\n }\n }\n return type\n}\n","import {\n BubbleChartRounded as BubbleChartRoundedIcon,\n Hub as HubIcon,\n InsertLinkRounded as InsertLinkRoundedIcon,\n Inventory2Rounded as Inventory2RoundedIcon,\n QuestionMarkRounded as QuestionMarkRoundedIcon,\n TimerRounded as TimerRoundedIcon,\n VisibilityRounded as VisibilityRoundedIcon,\n} from '@mui/icons-material'\nimport { SvgIconTypeMap } from '@mui/material'\nimport { OverridableComponent } from '@mui/material/OverridableComponent'\n\nimport { CyNodeModuleTypes } from './lib'\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport const CyIconSet: Record<CyNodeModuleTypes, OverridableComponent<SvgIconTypeMap<{}, 'svg'>>> = {\n archivist: Inventory2RoundedIcon,\n bridge: InsertLinkRoundedIcon,\n diviner: BubbleChartRoundedIcon,\n module: QuestionMarkRoundedIcon,\n node: HubIcon,\n sentinel: TimerRoundedIcon,\n witness: VisibilityRoundedIcon,\n}\n","import { Stylesheet } from 'cytoscape'\n\nimport { CyNodeModuleTypes } from './lib'\n\nexport const NodeIdStyles = (color?: string, outlineColor?: string): Stylesheet => ({\n selector: 'node[name]',\n style: {\n color,\n 'font-family': 'Lexend Deca, Helvetica, sans-serif',\n 'font-size': 12,\n 'overlay-padding': '6px',\n 'text-halign': 'center',\n 'text-outline-color': outlineColor,\n 'text-outline-width': '1px',\n 'text-valign': 'top',\n },\n})\n\nexport const NodeStyled = (icons: Record<CyNodeModuleTypes, string>, bgColor?: string, hideLabels = false): Stylesheet => ({\n selector: 'node',\n style: {\n 'background-color': bgColor,\n 'background-height': '75%',\n 'background-image': (elem) => icons[elem.data('type') as CyNodeModuleTypes],\n 'background-width': '24',\n label: hideLabels ? undefined : 'data(name)',\n shape: 'round-rectangle',\n },\n})\n\nexport const EdgeStyled = (lineColor?: string, targetArrowColor?: string) => ({\n selector: 'edge',\n style: {\n 'curve-style': 'bezier',\n 'line-color': lineColor,\n 'line-opacity': 0.1,\n 'target-arrow-color': targetArrowColor,\n 'target-arrow-shape': 'triangle',\n width: 3,\n },\n})\n\nexport const NodeBgStyles = (bgColor: string): [string, string] => ['background-color', bgColor]\n","import { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useCytoscapeOptions = (\n elements: CytoscapeOptions['elements'],\n style?: CytoscapeOptions['style'],\n layout?: CytoscapeOptions['layout'],\n) => {\n const defaultStyle = useCytoscapeStyle()\n\n const resolvedLayout = layout ?? ConcentricLayout\n const resolvedStyle = style ?? defaultStyle\n\n const options = useMemo<CytoscapeOptions | undefined>(() => {\n if (elements && resolvedLayout && resolvedStyle) {\n return {\n elements,\n layout: resolvedLayout,\n style: resolvedStyle,\n }\n }\n }, [elements, layout, style])\n\n return options\n}\n","import { useTheme } from '@mui/material'\nimport { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { EdgeStyled, NodeIdStyles, NodeStyled } from '../../Cytoscape'\nimport { useIcons } from './useIcons'\n\nexport const useCytoscapeStyle = (hideLabels = false) => {\n const theme = useTheme()\n const icons = useIcons()\n\n const style: CytoscapeOptions['style'] = useMemo(\n () => [\n NodeIdStyles(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),\n NodeStyled(icons, theme.palette.primary.main, hideLabels),\n EdgeStyled(theme.palette.divider, theme.palette.divider),\n ],\n [icons, hideLabels, theme],\n )\n\n return style\n}\n","import { useTheme } from '@mui/material'\nimport { useMemo } from 'react'\n\nimport { CyIconSet, CyNodeModuleTypes, encodeSvg, generateIconMap } from '../../Cytoscape'\n\nexport const useIcons = () => {\n const theme = useTheme()\n const icons = useMemo(() => {\n const iconMap = generateIconMap()\n return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {\n const icon = <IconComponent fontSize=\"small\" />\n acc[name as CyNodeModuleTypes] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary))\n return acc\n }, iconMap)\n }, [theme.palette])\n\n return icons\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","import { Button, ButtonGroup, styled } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport cytoscape, { Core } from 'cytoscape'\nimport { forwardRef, useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../contexts'\nimport { NodeRelationalGraphProps } from './lib'\n\nexport const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelationalGraphProps>(({ actions, children, options, ...props }, ref) => {\n const [cy, setCy] = useState<Core>()\n const { setCy: setCyContext } = useCytoscapeInstance()\n const sharedRef = useShareForwardedRef(ref)\n\n const handleReset = () => {\n cy?.reset()\n cy?.fit(undefined, 20)\n }\n\n useEffect(() => {\n if (sharedRef) {\n const newCy = cytoscape({\n container: sharedRef.current,\n ...options,\n })\n setCy(newCy)\n }\n }, [options, sharedRef])\n\n useEffect(() => {\n setCyContext?.(cy)\n }, [cy, setCyContext])\n\n return (\n <FlexCol {...props}>\n <ActionsContainer>\n <>\n {actions ? (\n <ButtonGroup>\n {actions}\n <Button size={'small'} variant={'contained'} onClick={handleReset}>\n Reset View\n </Button>\n </ButtonGroup>\n ) : (\n <Button size={'small'} variant={'contained'} onClick={handleReset}>\n Reset\n </Button>\n )}\n </>\n </ActionsContainer>\n {/* Cytoscape Element */}\n <FlexCol alignItems=\"stretch\" height=\"100%\" position=\"absolute\" ref={sharedRef} width=\"100%\"></FlexCol>\n {children}\n </FlexCol>\n )\n})\n\nNodeRelationalGraphFlexBox.displayName = 'NodeRelationalGraph'\n\nconst ActionsContainer = styled(FlexRow, { name: 'ActionsContainer' })(({ theme }) => ({\n flexWrap: 'wrap',\n gap: theme.spacing(1),\n position: 'absolute',\n right: '10px',\n top: '10px',\n zIndex: 2,\n}))\n\n/** @deprecated */\nexport const NodeRelationalGraph = NodeRelationalGraphFlexBox\n"],"mappings":"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","names":["isNodeInstance","isNodeInstance","module","isNodeInstance","isNodeInstance","useMemo","useTheme","useMemo","useTheme","useMemo","useMemo","useEffect","useState","jsx","useState","useEffect","jsx"]}
@@ -1,92 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
-
30
- // src/components/RelationalGraph.tsx
31
- var RelationalGraph_exports = {};
32
- __export(RelationalGraph_exports, {
33
- NodeRelationalGraph: () => NodeRelationalGraph,
34
- NodeRelationalGraphFlexBox: () => NodeRelationalGraphFlexBox
35
- });
36
- module.exports = __toCommonJS(RelationalGraph_exports);
37
- var import_material = require("@mui/material");
38
- var import_react_flexbox = require("@xylabs/react-flexbox");
39
- var import_react_shared3 = require("@xyo-network/react-shared");
40
- var import_cytoscape = __toESM(require("cytoscape"), 1);
41
- var import_react = require("react");
42
-
43
- // src/contexts/CytoscapeInstance/Context.ts
44
- var import_react_shared = require("@xyo-network/react-shared");
45
- var CytoscapeInstanceContext = (0, import_react_shared.createContextEx)();
46
-
47
- // src/contexts/CytoscapeInstance/use.ts
48
- var import_react_shared2 = require("@xyo-network/react-shared");
49
- var useCytoscapeInstance = (required = false) => (0, import_react_shared2.useContextEx)(CytoscapeInstanceContext, "CytoscapeInstance", required);
50
-
51
- // src/components/RelationalGraph.tsx
52
- var import_jsx_runtime = require("react/jsx-runtime");
53
- var NodeRelationalGraphFlexBox = (0, import_react.forwardRef)(({ actions, children, options, ...props }, ref) => {
54
- const [cy, setCy] = (0, import_react.useState)();
55
- const { setCy: setCyContext } = useCytoscapeInstance();
56
- const sharedRef = (0, import_react_shared3.useShareForwardedRef)(ref);
57
- const handleReset = () => {
58
- cy?.reset();
59
- cy?.fit(void 0, 20);
60
- };
61
- (0, import_react.useEffect)(() => {
62
- if (sharedRef) {
63
- const newCy = (0, import_cytoscape.default)({
64
- container: sharedRef.current,
65
- ...options
66
- });
67
- setCy(newCy);
68
- }
69
- }, [options, sharedRef]);
70
- (0, import_react.useEffect)(() => {
71
- setCyContext?.(cy);
72
- }, [cy, setCyContext]);
73
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { ...props, children: [
74
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionsContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: actions ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.ButtonGroup, { children: [
75
- actions,
76
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset View" })
77
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" }) }) }),
78
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexCol, { alignItems: "stretch", height: "100%", position: "absolute", ref: sharedRef, width: "100%" }),
79
- children
80
- ] });
81
- });
82
- NodeRelationalGraphFlexBox.displayName = "NodeRelationalGraph";
83
- var ActionsContainer = (0, import_material.styled)(import_react_flexbox.FlexRow, { name: "ActionsContainer" })(({ theme }) => ({
84
- flexWrap: "wrap",
85
- gap: theme.spacing(1),
86
- position: "absolute",
87
- right: "10px",
88
- top: "10px",
89
- zIndex: 2
90
- }));
91
- var NodeRelationalGraph = NodeRelationalGraphFlexBox;
92
- //# sourceMappingURL=RelationalGraph.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/RelationalGraph.tsx","../../../src/contexts/CytoscapeInstance/Context.ts","../../../src/contexts/CytoscapeInstance/use.ts"],"sourcesContent":["import { Button, ButtonGroup, styled } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport cytoscape, { Core } from 'cytoscape'\nimport { forwardRef, useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../contexts'\nimport { NodeRelationalGraphProps } from './lib'\n\nexport const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelationalGraphProps>(({ actions, children, options, ...props }, ref) => {\n const [cy, setCy] = useState<Core>()\n const { setCy: setCyContext } = useCytoscapeInstance()\n const sharedRef = useShareForwardedRef(ref)\n\n const handleReset = () => {\n cy?.reset()\n cy?.fit(undefined, 20)\n }\n\n useEffect(() => {\n if (sharedRef) {\n const newCy = cytoscape({\n container: sharedRef.current,\n ...options,\n })\n setCy(newCy)\n }\n }, [options, sharedRef])\n\n useEffect(() => {\n setCyContext?.(cy)\n }, [cy, setCyContext])\n\n return (\n <FlexCol {...props}>\n <ActionsContainer>\n <>\n {actions ? (\n <ButtonGroup>\n {actions}\n <Button size={'small'} variant={'contained'} onClick={handleReset}>\n Reset View\n </Button>\n </ButtonGroup>\n ) : (\n <Button size={'small'} variant={'contained'} onClick={handleReset}>\n Reset\n </Button>\n )}\n </>\n </ActionsContainer>\n {/* Cytoscape Element */}\n <FlexCol alignItems=\"stretch\" height=\"100%\" position=\"absolute\" ref={sharedRef} width=\"100%\"></FlexCol>\n {children}\n </FlexCol>\n )\n})\n\nNodeRelationalGraphFlexBox.displayName = 'NodeRelationalGraph'\n\nconst ActionsContainer = styled(FlexRow, { name: 'ActionsContainer' })(({ theme }) => ({\n flexWrap: 'wrap',\n gap: theme.spacing(1),\n position: 'absolute',\n right: '10px',\n top: '10px',\n zIndex: 2,\n}))\n\n/** @deprecated */\nexport const NodeRelationalGraph = NodeRelationalGraphFlexBox\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAA4C;AAC5C,2BAAiC;AACjC,IAAAA,uBAAqC;AACrC,uBAAgC;AAChC,mBAAgD;;;ACJhD,0BAAgC;AAIzB,IAAM,+BAA2B,qCAAwC;;;ACJhF,IAAAC,uBAA6B;AAItB,IAAM,uBAAuB,CAAC,WAAW,cAAU,mCAAa,0BAA0B,qBAAqB,QAAQ;;;AFgCtH;AA3BD,IAAM,iCAA6B,yBAAqD,CAAC,EAAE,SAAS,UAAU,SAAS,GAAG,MAAM,GAAG,QAAQ;AAChJ,QAAM,CAAC,IAAI,KAAK,QAAI,uBAAe;AACnC,QAAM,EAAE,OAAO,aAAa,IAAI,qBAAqB;AACrD,QAAM,gBAAY,2CAAqB,GAAG;AAE1C,QAAM,cAAc,MAAM;AACxB,QAAI,MAAM;AACV,QAAI,IAAI,QAAW,EAAE;AAAA,EACvB;AAEA,8BAAU,MAAM;AACd,QAAI,WAAW;AACb,YAAM,YAAQ,iBAAAC,SAAU;AAAA,QACtB,WAAW,UAAU;AAAA,QACrB,GAAG;AAAA,MACL,CAAC;AACD,YAAM,KAAK;AAAA,IACb;AAAA,EACF,GAAG,CAAC,SAAS,SAAS,CAAC;AAEvB,8BAAU,MAAM;AACd,mBAAe,EAAE;AAAA,EACnB,GAAG,CAAC,IAAI,YAAY,CAAC;AAErB,SACE,6CAAC,gCAAS,GAAG,OACX;AAAA,gDAAC,oBACC,qFACG,oBACC,6CAAC,+BACE;AAAA;AAAA,MACD,4CAAC,0BAAO,MAAM,SAAS,SAAS,aAAa,SAAS,aAAa,wBAEnE;AAAA,OACF,IAEA,4CAAC,0BAAO,MAAM,SAAS,SAAS,aAAa,SAAS,aAAa,mBAEnE,GAEJ,GACF;AAAA,IAEA,4CAAC,gCAAQ,YAAW,WAAU,QAAO,QAAO,UAAS,YAAW,KAAK,WAAW,OAAM,QAAO;AAAA,IAC5F;AAAA,KACH;AAEJ,CAAC;AAED,2BAA2B,cAAc;AAEzC,IAAM,uBAAmB,wBAAO,8BAAS,EAAE,MAAM,mBAAmB,CAAC,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACrF,UAAU;AAAA,EACV,KAAK,MAAM,QAAQ,CAAC;AAAA,EACpB,UAAU;AAAA,EACV,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AACV,EAAE;AAGK,IAAM,sBAAsB;","names":["import_react_shared","import_react_shared","cytoscape"]}
@@ -1 +0,0 @@
1
- {"version":3,"file":"RelationalGraph.d.ts","sourceRoot":"","sources":["../../../src/components/RelationalGraph.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAEhD,eAAO,MAAM,0BAA0B,qHA+CrC,CAAA;AAaF,kBAAkB;AAClB,eAAO,MAAM,mBAAmB,qHAA6B,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"RelationalGraph.d.ts","sourceRoot":"","sources":["../../../src/components/RelationalGraph.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAEhD,eAAO,MAAM,0BAA0B,qHA+CrC,CAAA;AAaF,kBAAkB;AAClB,eAAO,MAAM,mBAAmB,qHAA6B,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"RelationalGraph.d.ts","sourceRoot":"","sources":["../../../src/components/RelationalGraph.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAEhD,eAAO,MAAM,0BAA0B,qHA+CrC,CAAA;AAaF,kBAAkB;AAClB,eAAO,MAAM,mBAAmB,qHAA6B,CAAA"}