@reltio/components 1.4.1844 → 1.4.1846
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/EmptyState/EmptyState.d.ts +1 -0
- package/cjs/EmptyState/EmptyState.js +3 -1
- package/cjs/features/graph/DataModelGraph/DataModelGraph.d.ts +12 -0
- package/cjs/features/graph/DataModelGraph/DataModelGraph.js +28 -0
- package/cjs/features/graph/DataModelGraph/DataModelGraph.test.d.ts +1 -0
- package/cjs/features/graph/DataModelGraph/DataModelGraph.test.js +63 -0
- package/cjs/features/graph/DataModelGraph/components/DataModelCircleLayout/DataModelCircleLayuot.d.ts +11 -0
- package/cjs/features/graph/DataModelGraph/components/DataModelCircleLayout/DataModelCircleLayuot.js +21 -0
- package/cjs/features/graph/DataModelGraph/helpers/edgeLabelHelpers.d.ts +9 -0
- package/cjs/features/graph/DataModelGraph/helpers/edgeLabelHelpers.js +38 -0
- package/cjs/features/graph/DataModelGraph/helpers/edgeLabelHelpers.test.d.ts +1 -0
- package/cjs/features/graph/DataModelGraph/helpers/edgeLabelHelpers.test.js +74 -0
- package/cjs/features/graph/DataModelGraph/hooks/defaultGraph.test-data.d.ts +2 -0
- package/cjs/features/graph/DataModelGraph/hooks/defaultGraph.test-data.js +52 -0
- package/cjs/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.d.ts +17 -0
- package/cjs/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.js +139 -0
- package/cjs/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.test.d.ts +1 -0
- package/cjs/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.test.js +192 -0
- package/cjs/features/graph/DataModelGraph/hooks/useEdgeLabelsRenderer.d.ts +10 -0
- package/cjs/features/graph/DataModelGraph/hooks/useEdgeLabelsRenderer.js +171 -0
- package/cjs/features/graph/DataModelGraph/hooks/useEdgeLabelsRenderer.test.d.ts +1 -0
- package/cjs/features/graph/DataModelGraph/hooks/useEdgeLabelsRenderer.test.js +176 -0
- package/cjs/features/graph/DataModelGraph/hooks/useFakeCenterNode.d.ts +8 -0
- package/cjs/features/graph/DataModelGraph/hooks/useFakeCenterNode.js +36 -0
- package/cjs/features/graph/DataModelGraph/hooks/useFakeCenterNode.test.d.ts +1 -0
- package/cjs/features/graph/DataModelGraph/hooks/useFakeCenterNode.test.js +37 -0
- package/cjs/features/graph/DataModelGraph/hooks/useSelectedNodeRenderer.d.ts +2 -0
- package/cjs/features/graph/DataModelGraph/hooks/useSelectedNodeRenderer.js +41 -0
- package/cjs/features/graph/DataModelGraph/hooks/useSelectedNodeRenderer.test.d.ts +1 -0
- package/cjs/features/graph/DataModelGraph/hooks/useSelectedNodeRenderer.test.js +63 -0
- package/cjs/features/graph/DataModelGraph/icons/interaction.inline.svg.d.ts +1 -0
- package/cjs/features/graph/DataModelGraph/icons/interaction.inline.svg.js +4 -0
- package/cjs/features/graph/DataModelGraph/index.d.ts +1 -0
- package/cjs/features/graph/DataModelGraph/index.js +5 -0
- package/cjs/features/graph/DataModelGraph/styles.d.ts +1 -0
- package/cjs/features/graph/DataModelGraph/styles.js +26 -0
- package/cjs/features/graph/SigmaCustomRenderersContainer/SigmaCustomRenderersContainer.d.ts +6 -0
- package/cjs/features/graph/SigmaCustomRenderersContainer/SigmaCustomRenderersContainer.js +15 -0
- package/cjs/features/graph/SigmaCustomRenderersContainer/index.d.ts +1 -0
- package/cjs/features/graph/SigmaCustomRenderersContainer/index.js +5 -0
- package/cjs/features/graph/SigmaGraphContainer/SigmaGraphContainer.d.ts +9 -0
- package/cjs/features/graph/SigmaGraphContainer/SigmaGraphContainer.js +86 -0
- package/cjs/features/graph/SigmaGraphContainer/SigmaGraphContainer.test.d.ts +1 -0
- package/cjs/features/graph/SigmaGraphContainer/SigmaGraphContainer.test.js +26 -0
- package/cjs/features/graph/SigmaGraphContainer/index.d.ts +1 -0
- package/cjs/features/graph/SigmaGraphContainer/index.js +5 -0
- package/cjs/features/graph/SigmaGraphResizer/SigmaGraphResizer.d.ts +1 -0
- package/cjs/features/graph/SigmaGraphResizer/SigmaGraphResizer.js +40 -0
- package/cjs/features/graph/SigmaGraphResizer/SigmaGraphResizer.test.d.ts +1 -0
- package/cjs/features/graph/SigmaGraphResizer/SigmaGraphResizer.test.js +37 -0
- package/cjs/features/graph/SigmaGraphResizer/index.d.ts +1 -0
- package/cjs/features/graph/SigmaGraphResizer/index.js +5 -0
- package/cjs/features/graph/ZoomSlider/ZoomSlider.d.ts +7 -0
- package/cjs/features/graph/ZoomSlider/ZoomSlider.js +113 -0
- package/cjs/features/graph/ZoomSlider/ZoomSlider.test.d.ts +1 -0
- package/cjs/features/graph/ZoomSlider/ZoomSlider.test.js +83 -0
- package/cjs/features/graph/ZoomSlider/index.d.ts +1 -0
- package/cjs/features/graph/ZoomSlider/index.js +5 -0
- package/cjs/features/graph/ZoomSlider/styles.d.ts +1 -0
- package/cjs/features/graph/ZoomSlider/styles.js +63 -0
- package/cjs/features/graph/contexts/SigmaCustomRenderersContext.d.ts +9 -0
- package/cjs/features/graph/contexts/SigmaCustomRenderersContext.js +15 -0
- package/cjs/features/graph/hooks/useAnimatedGraphLayout.d.ts +13 -0
- package/cjs/features/graph/hooks/useAnimatedGraphLayout.js +35 -0
- package/cjs/features/graph/hooks/useCircleLayout.d.ts +9 -0
- package/cjs/features/graph/hooks/useCircleLayout.js +50 -0
- package/cjs/features/graph/hooks/useLoopRenderer.d.ts +5 -0
- package/cjs/features/graph/hooks/useLoopRenderer.js +47 -0
- package/cjs/features/graph/hooks/useLoopRenderer.test.d.ts +1 -0
- package/cjs/features/graph/hooks/useLoopRenderer.test.js +221 -0
- package/cjs/features/graph/hooks/useSigmaCustomRenderers.d.ts +7 -0
- package/cjs/features/graph/hooks/useSigmaCustomRenderers.js +95 -0
- package/cjs/features/graph/hooks/useSigmaCustomRenderers.test.d.ts +1 -0
- package/cjs/features/graph/hooks/useSigmaCustomRenderers.test.js +200 -0
- package/cjs/features/graph/index.d.ts +16 -0
- package/cjs/features/graph/index.js +34 -0
- package/cjs/features/graph/rendering/canvas/hover.d.ts +2 -0
- package/cjs/features/graph/rendering/canvas/hover.js +10 -0
- package/cjs/features/graph/rendering/canvas/hover.spec.d.ts +1 -0
- package/cjs/features/graph/rendering/canvas/hover.spec.js +26 -0
- package/cjs/features/graph/rendering/canvas/label.d.ts +7 -0
- package/cjs/features/graph/rendering/canvas/label.js +32 -0
- package/cjs/features/graph/rendering/canvas/label.spec.d.ts +1 -0
- package/cjs/features/graph/rendering/canvas/label.spec.js +81 -0
- package/cjs/features/graph/rendering/canvas/labelBackground.d.ts +9 -0
- package/cjs/features/graph/rendering/canvas/labelBackground.js +37 -0
- package/cjs/features/graph/rendering/canvas/labelBackground.spec.d.ts +1 -0
- package/cjs/features/graph/rendering/canvas/labelBackground.spec.js +92 -0
- package/cjs/features/graph/rendering/canvas/nodeArc.d.ts +10 -0
- package/cjs/features/graph/rendering/canvas/nodeArc.js +33 -0
- package/cjs/features/graph/rendering/canvas/selfRelationLoop.d.ts +11 -0
- package/cjs/features/graph/rendering/canvas/selfRelationLoop.js +73 -0
- package/cjs/features/graph/rendering/canvas/selfRelationLoop.spec.d.ts +1 -0
- package/cjs/features/graph/rendering/canvas/selfRelationLoop.spec.js +92 -0
- package/cjs/features/graph/rendering/canvas/tooltip.d.ts +2 -0
- package/cjs/features/graph/rendering/canvas/tooltip.js +28 -0
- package/cjs/features/graph/rendering/canvas/tooltip.spec.d.ts +1 -0
- package/cjs/features/graph/rendering/canvas/tooltip.spec.js +32 -0
- package/cjs/features/graph/rendering/canvas/utils.d.ts +4 -0
- package/cjs/features/graph/rendering/canvas/utils.js +10 -0
- package/cjs/features/graph/rendering/canvas/utils.spec.d.ts +1 -0
- package/cjs/features/graph/rendering/canvas/utils.spec.js +22 -0
- package/cjs/features/graph/rendering/icons/no_photo.inline.svg.d.ts +1 -0
- package/cjs/features/graph/rendering/icons/no_photo.inline.svg.js +4 -0
- package/cjs/features/graph/rendering/webgl/edge.arrowHead.d.ts +8 -0
- package/cjs/features/graph/rendering/webgl/edge.arrowHead.js +84 -0
- package/cjs/features/graph/rendering/webgl/edge.clamped.d.ts +29 -0
- package/cjs/features/graph/rendering/webgl/edge.clamped.js +176 -0
- package/cjs/features/graph/rendering/webgl/edge.dashed.d.ts +23 -0
- package/cjs/features/graph/rendering/webgl/edge.dashed.js +162 -0
- package/cjs/features/graph/rendering/webgl/edge.reversedArrowHead.d.ts +5 -0
- package/cjs/features/graph/rendering/webgl/edge.reversedArrowHead.js +32 -0
- package/cjs/features/graph/rendering/webgl/helpers/imageHelper.d.ts +17 -0
- package/cjs/features/graph/rendering/webgl/helpers/imageHelper.js +9 -0
- package/cjs/features/graph/rendering/webgl/helpers/imageHelper.spec.d.ts +1 -0
- package/cjs/features/graph/rendering/webgl/helpers/imageHelper.spec.js +29 -0
- package/cjs/features/graph/rendering/webgl/image.d.ts +17 -0
- package/cjs/features/graph/rendering/webgl/image.js +115 -0
- package/cjs/features/graph/rendering/webgl/node.border.d.ts +11 -0
- package/cjs/features/graph/rendering/webgl/node.border.js +79 -0
- package/cjs/features/graph/rendering/webgl/node.dashed.border.d.ts +11 -0
- package/cjs/features/graph/rendering/webgl/node.dashed.border.js +77 -0
- package/cjs/features/graph/rendering/webgl/node.image.d.ts +18 -0
- package/cjs/features/graph/rendering/webgl/node.image.js +147 -0
- package/cjs/features/graph/rendering/webgl/shaders/edge.clamped.vert.glsl.d.ts +1 -0
- package/cjs/features/graph/rendering/webgl/shaders/edge.clamped.vert.glsl.js +8 -0
- package/cjs/features/graph/rendering/webgl/shaders/edge.dashed.frag.glsl.d.ts +1 -0
- package/cjs/features/graph/rendering/webgl/shaders/edge.dashed.frag.glsl.js +8 -0
- package/cjs/features/graph/rendering/webgl/shaders/edge.dashed.vert.glsl.d.ts +1 -0
- package/cjs/features/graph/rendering/webgl/shaders/edge.dashed.vert.glsl.js +8 -0
- package/cjs/features/graph/rendering/webgl/shaders/node.border.frag.glsl.d.ts +1 -0
- package/cjs/features/graph/rendering/webgl/shaders/node.border.frag.glsl.js +9 -0
- package/cjs/features/graph/rendering/webgl/shaders/node.border.vert.glsl.d.ts +1 -0
- package/cjs/features/graph/rendering/webgl/shaders/node.border.vert.glsl.js +8 -0
- package/cjs/features/graph/rendering/webgl/shaders/node.dashed.border.frag.glsl.d.ts +1 -0
- package/cjs/features/graph/rendering/webgl/shaders/node.dashed.border.frag.glsl.js +8 -0
- package/cjs/features/graph/rendering/webgl/shaders/node.image.frag.glsl.d.ts +1 -0
- package/cjs/features/graph/rendering/webgl/shaders/node.image.frag.glsl.js +5 -0
- package/cjs/features/graph/rendering/webgl/shaders/node.image.vert.glsl.d.ts +1 -0
- package/cjs/features/graph/rendering/webgl/shaders/node.image.vert.glsl.js +8 -0
- package/cjs/features/graph/rendering/webgl/shaders/utils.d.ts +1 -0
- package/cjs/features/graph/rendering/webgl/shaders/utils.js +4 -0
- package/cjs/features/graph/types/graphDataTypes.d.ts +51 -0
- package/cjs/features/graph/types/graphDataTypes.js +8 -0
- package/cjs/features/graph/types/sigmaCustomRenderersTypes.d.ts +11 -0
- package/cjs/features/graph/types/sigmaCustomRenderersTypes.js +2 -0
- package/cjs/icons/EmptyLoading.d.ts +3 -0
- package/cjs/icons/EmptyLoading.js +150 -0
- package/cjs/icons/index.d.ts +1 -0
- package/cjs/icons/index.js +4 -2
- package/cjs/index.d.ts +1 -0
- package/cjs/index.js +2 -0
- package/esm/EmptyState/EmptyState.d.ts +1 -0
- package/esm/EmptyState/EmptyState.js +3 -1
- package/esm/features/graph/DataModelGraph/DataModelGraph.d.ts +12 -0
- package/esm/features/graph/DataModelGraph/DataModelGraph.js +21 -0
- package/esm/features/graph/DataModelGraph/DataModelGraph.test.d.ts +1 -0
- package/esm/features/graph/DataModelGraph/DataModelGraph.test.js +58 -0
- package/esm/features/graph/DataModelGraph/components/DataModelCircleLayout/DataModelCircleLayuot.d.ts +11 -0
- package/esm/features/graph/DataModelGraph/components/DataModelCircleLayout/DataModelCircleLayuot.js +17 -0
- package/esm/features/graph/DataModelGraph/helpers/edgeLabelHelpers.d.ts +9 -0
- package/esm/features/graph/DataModelGraph/helpers/edgeLabelHelpers.js +33 -0
- package/esm/features/graph/DataModelGraph/helpers/edgeLabelHelpers.test.d.ts +1 -0
- package/esm/features/graph/DataModelGraph/helpers/edgeLabelHelpers.test.js +72 -0
- package/esm/features/graph/DataModelGraph/hooks/defaultGraph.test-data.d.ts +2 -0
- package/esm/features/graph/DataModelGraph/hooks/defaultGraph.test-data.js +45 -0
- package/esm/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.d.ts +17 -0
- package/esm/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.js +135 -0
- package/esm/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.test.d.ts +1 -0
- package/esm/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.test.js +190 -0
- package/esm/features/graph/DataModelGraph/hooks/useEdgeLabelsRenderer.d.ts +10 -0
- package/esm/features/graph/DataModelGraph/hooks/useEdgeLabelsRenderer.js +167 -0
- package/esm/features/graph/DataModelGraph/hooks/useEdgeLabelsRenderer.test.d.ts +1 -0
- package/esm/features/graph/DataModelGraph/hooks/useEdgeLabelsRenderer.test.js +174 -0
- package/esm/features/graph/DataModelGraph/hooks/useFakeCenterNode.d.ts +8 -0
- package/esm/features/graph/DataModelGraph/hooks/useFakeCenterNode.js +32 -0
- package/esm/features/graph/DataModelGraph/hooks/useFakeCenterNode.test.d.ts +1 -0
- package/esm/features/graph/DataModelGraph/hooks/useFakeCenterNode.test.js +35 -0
- package/esm/features/graph/DataModelGraph/hooks/useSelectedNodeRenderer.d.ts +2 -0
- package/esm/features/graph/DataModelGraph/hooks/useSelectedNodeRenderer.js +37 -0
- package/esm/features/graph/DataModelGraph/hooks/useSelectedNodeRenderer.test.d.ts +1 -0
- package/esm/features/graph/DataModelGraph/hooks/useSelectedNodeRenderer.test.js +61 -0
- package/esm/features/graph/DataModelGraph/icons/interaction.inline.svg.d.ts +1 -0
- package/esm/features/graph/DataModelGraph/icons/interaction.inline.svg.js +1 -0
- package/esm/features/graph/DataModelGraph/index.d.ts +1 -0
- package/esm/features/graph/DataModelGraph/index.js +1 -0
- package/esm/features/graph/DataModelGraph/styles.d.ts +1 -0
- package/esm/features/graph/DataModelGraph/styles.js +23 -0
- package/esm/features/graph/SigmaCustomRenderersContainer/SigmaCustomRenderersContainer.d.ts +6 -0
- package/esm/features/graph/SigmaCustomRenderersContainer/SigmaCustomRenderersContainer.js +8 -0
- package/esm/features/graph/SigmaCustomRenderersContainer/index.d.ts +1 -0
- package/esm/features/graph/SigmaCustomRenderersContainer/index.js +1 -0
- package/esm/features/graph/SigmaGraphContainer/SigmaGraphContainer.d.ts +9 -0
- package/esm/features/graph/SigmaGraphContainer/SigmaGraphContainer.js +56 -0
- package/esm/features/graph/SigmaGraphContainer/SigmaGraphContainer.test.d.ts +1 -0
- package/esm/features/graph/SigmaGraphContainer/SigmaGraphContainer.test.js +21 -0
- package/esm/features/graph/SigmaGraphContainer/index.d.ts +1 -0
- package/esm/features/graph/SigmaGraphContainer/index.js +1 -0
- package/esm/features/graph/SigmaGraphResizer/SigmaGraphResizer.d.ts +1 -0
- package/esm/features/graph/SigmaGraphResizer/SigmaGraphResizer.js +10 -0
- package/esm/features/graph/SigmaGraphResizer/SigmaGraphResizer.test.d.ts +1 -0
- package/esm/features/graph/SigmaGraphResizer/SigmaGraphResizer.test.js +32 -0
- package/esm/features/graph/SigmaGraphResizer/index.d.ts +1 -0
- package/esm/features/graph/SigmaGraphResizer/index.js +1 -0
- package/esm/features/graph/ZoomSlider/ZoomSlider.d.ts +7 -0
- package/esm/features/graph/ZoomSlider/ZoomSlider.js +83 -0
- package/esm/features/graph/ZoomSlider/ZoomSlider.test.d.ts +1 -0
- package/esm/features/graph/ZoomSlider/ZoomSlider.test.js +78 -0
- package/esm/features/graph/ZoomSlider/index.d.ts +1 -0
- package/esm/features/graph/ZoomSlider/index.js +1 -0
- package/esm/features/graph/ZoomSlider/styles.d.ts +1 -0
- package/esm/features/graph/ZoomSlider/styles.js +60 -0
- package/esm/features/graph/contexts/SigmaCustomRenderersContext.d.ts +9 -0
- package/esm/features/graph/contexts/SigmaCustomRenderersContext.js +11 -0
- package/esm/features/graph/hooks/useAnimatedGraphLayout.d.ts +13 -0
- package/esm/features/graph/hooks/useAnimatedGraphLayout.js +31 -0
- package/esm/features/graph/hooks/useCircleLayout.d.ts +9 -0
- package/esm/features/graph/hooks/useCircleLayout.js +43 -0
- package/esm/features/graph/hooks/useLoopRenderer.d.ts +5 -0
- package/esm/features/graph/hooks/useLoopRenderer.js +43 -0
- package/esm/features/graph/hooks/useLoopRenderer.test.d.ts +1 -0
- package/esm/features/graph/hooks/useLoopRenderer.test.js +219 -0
- package/esm/features/graph/hooks/useSigmaCustomRenderers.d.ts +7 -0
- package/esm/features/graph/hooks/useSigmaCustomRenderers.js +91 -0
- package/esm/features/graph/hooks/useSigmaCustomRenderers.test.d.ts +1 -0
- package/esm/features/graph/hooks/useSigmaCustomRenderers.test.js +198 -0
- package/esm/features/graph/index.d.ts +16 -0
- package/esm/features/graph/index.js +17 -0
- package/esm/features/graph/rendering/canvas/hover.d.ts +2 -0
- package/esm/features/graph/rendering/canvas/hover.js +6 -0
- package/esm/features/graph/rendering/canvas/hover.spec.d.ts +1 -0
- package/esm/features/graph/rendering/canvas/hover.spec.js +24 -0
- package/esm/features/graph/rendering/canvas/label.d.ts +7 -0
- package/esm/features/graph/rendering/canvas/label.js +28 -0
- package/esm/features/graph/rendering/canvas/label.spec.d.ts +1 -0
- package/esm/features/graph/rendering/canvas/label.spec.js +79 -0
- package/esm/features/graph/rendering/canvas/labelBackground.d.ts +9 -0
- package/esm/features/graph/rendering/canvas/labelBackground.js +33 -0
- package/esm/features/graph/rendering/canvas/labelBackground.spec.d.ts +1 -0
- package/esm/features/graph/rendering/canvas/labelBackground.spec.js +90 -0
- package/esm/features/graph/rendering/canvas/nodeArc.d.ts +10 -0
- package/esm/features/graph/rendering/canvas/nodeArc.js +27 -0
- package/esm/features/graph/rendering/canvas/selfRelationLoop.d.ts +11 -0
- package/esm/features/graph/rendering/canvas/selfRelationLoop.js +69 -0
- package/esm/features/graph/rendering/canvas/selfRelationLoop.spec.d.ts +1 -0
- package/esm/features/graph/rendering/canvas/selfRelationLoop.spec.js +90 -0
- package/esm/features/graph/rendering/canvas/tooltip.d.ts +2 -0
- package/esm/features/graph/rendering/canvas/tooltip.js +25 -0
- package/esm/features/graph/rendering/canvas/tooltip.spec.d.ts +1 -0
- package/esm/features/graph/rendering/canvas/tooltip.spec.js +30 -0
- package/esm/features/graph/rendering/canvas/utils.d.ts +4 -0
- package/esm/features/graph/rendering/canvas/utils.js +6 -0
- package/esm/features/graph/rendering/canvas/utils.spec.d.ts +1 -0
- package/esm/features/graph/rendering/canvas/utils.spec.js +20 -0
- package/esm/features/graph/rendering/icons/no_photo.inline.svg.d.ts +1 -0
- package/esm/features/graph/rendering/icons/no_photo.inline.svg.js +1 -0
- package/esm/features/graph/rendering/webgl/edge.arrowHead.d.ts +8 -0
- package/esm/features/graph/rendering/webgl/edge.arrowHead.js +79 -0
- package/esm/features/graph/rendering/webgl/edge.clamped.d.ts +29 -0
- package/esm/features/graph/rendering/webgl/edge.clamped.js +171 -0
- package/esm/features/graph/rendering/webgl/edge.dashed.d.ts +23 -0
- package/esm/features/graph/rendering/webgl/edge.dashed.js +160 -0
- package/esm/features/graph/rendering/webgl/edge.reversedArrowHead.d.ts +5 -0
- package/esm/features/graph/rendering/webgl/edge.reversedArrowHead.js +27 -0
- package/esm/features/graph/rendering/webgl/helpers/imageHelper.d.ts +17 -0
- package/esm/features/graph/rendering/webgl/helpers/imageHelper.js +5 -0
- package/esm/features/graph/rendering/webgl/helpers/imageHelper.spec.d.ts +1 -0
- package/esm/features/graph/rendering/webgl/helpers/imageHelper.spec.js +27 -0
- package/esm/features/graph/rendering/webgl/image.d.ts +17 -0
- package/esm/features/graph/rendering/webgl/image.js +112 -0
- package/esm/features/graph/rendering/webgl/node.border.d.ts +11 -0
- package/esm/features/graph/rendering/webgl/node.border.js +76 -0
- package/esm/features/graph/rendering/webgl/node.dashed.border.d.ts +11 -0
- package/esm/features/graph/rendering/webgl/node.dashed.border.js +74 -0
- package/esm/features/graph/rendering/webgl/node.image.d.ts +18 -0
- package/esm/features/graph/rendering/webgl/node.image.js +144 -0
- package/esm/features/graph/rendering/webgl/shaders/edge.clamped.vert.glsl.d.ts +1 -0
- package/esm/features/graph/rendering/webgl/shaders/edge.clamped.vert.glsl.js +5 -0
- package/esm/features/graph/rendering/webgl/shaders/edge.dashed.frag.glsl.d.ts +1 -0
- package/esm/features/graph/rendering/webgl/shaders/edge.dashed.frag.glsl.js +5 -0
- package/esm/features/graph/rendering/webgl/shaders/edge.dashed.vert.glsl.d.ts +1 -0
- package/esm/features/graph/rendering/webgl/shaders/edge.dashed.vert.glsl.js +5 -0
- package/esm/features/graph/rendering/webgl/shaders/node.border.frag.glsl.d.ts +1 -0
- package/esm/features/graph/rendering/webgl/shaders/node.border.frag.glsl.js +6 -0
- package/esm/features/graph/rendering/webgl/shaders/node.border.vert.glsl.d.ts +1 -0
- package/esm/features/graph/rendering/webgl/shaders/node.border.vert.glsl.js +5 -0
- package/esm/features/graph/rendering/webgl/shaders/node.dashed.border.frag.glsl.d.ts +1 -0
- package/esm/features/graph/rendering/webgl/shaders/node.dashed.border.frag.glsl.js +5 -0
- package/esm/features/graph/rendering/webgl/shaders/node.image.frag.glsl.d.ts +1 -0
- package/esm/features/graph/rendering/webgl/shaders/node.image.frag.glsl.js +2 -0
- package/esm/features/graph/rendering/webgl/shaders/node.image.vert.glsl.d.ts +1 -0
- package/esm/features/graph/rendering/webgl/shaders/node.image.vert.glsl.js +5 -0
- package/esm/features/graph/rendering/webgl/shaders/utils.d.ts +1 -0
- package/esm/features/graph/rendering/webgl/shaders/utils.js +1 -0
- package/esm/features/graph/types/graphDataTypes.d.ts +51 -0
- package/esm/features/graph/types/graphDataTypes.js +5 -0
- package/esm/features/graph/types/sigmaCustomRenderersTypes.d.ts +11 -0
- package/esm/features/graph/types/sigmaCustomRenderersTypes.js +1 -0
- package/esm/icons/EmptyLoading.d.ts +3 -0
- package/esm/icons/EmptyLoading.js +145 -0
- package/esm/icons/index.d.ts +1 -0
- package/esm/icons/index.js +1 -0
- package/esm/index.d.ts +1 -0
- package/esm/index.js +2 -0
- package/package.json +7 -2
|
@@ -9,6 +9,7 @@ export declare const EMPTY_STATE_ICONS: {
|
|
|
9
9
|
SELECT_ATTRIBUTES: React.FC<React.SVGProps<SVGSVGElement>>;
|
|
10
10
|
NO_DATA: React.FC<React.SVGProps<SVGSVGElement>>;
|
|
11
11
|
ERROR: React.FC<React.SVGProps<SVGSVGElement>>;
|
|
12
|
+
LOADING: React.FC<React.SVGProps<SVGSVGElement>>;
|
|
12
13
|
};
|
|
13
14
|
type Props = {
|
|
14
15
|
variant?: EMPTY_STATE_VARIANTS;
|
|
@@ -8,6 +8,7 @@ import SelectAttributesIcon from '../icons/SelectAttributes';
|
|
|
8
8
|
import NoData from '../icons/NoData';
|
|
9
9
|
import Error from '../icons/Error';
|
|
10
10
|
import { useStyles } from './styles';
|
|
11
|
+
import EmptyLoadingIcon from '../icons/EmptyLoading';
|
|
11
12
|
export var EMPTY_STATE_VARIANTS;
|
|
12
13
|
(function (EMPTY_STATE_VARIANTS) {
|
|
13
14
|
EMPTY_STATE_VARIANTS["full"] = "full";
|
|
@@ -18,7 +19,8 @@ export var EMPTY_STATE_ICONS = {
|
|
|
18
19
|
SEARCH_RESULTS: EmptySearchResultsIcon,
|
|
19
20
|
SELECT_ATTRIBUTES: SelectAttributesIcon,
|
|
20
21
|
NO_DATA: NoData,
|
|
21
|
-
ERROR: Error
|
|
22
|
+
ERROR: Error,
|
|
23
|
+
LOADING: EmptyLoadingIcon
|
|
22
24
|
};
|
|
23
25
|
export var EmptyState = function (_a) {
|
|
24
26
|
var _b = _a.variant, variant = _b === void 0 ? EMPTY_STATE_VARIANTS.full : _b, _c = _a.LogoRenderer, LogoRenderer = _c === void 0 ? EMPTY_STATE_ICONS.SEARCH_RESULTS : _c, text = _a.text, secondaryText = _a.secondaryText, buttonTitle = _a.buttonTitle, _d = _a.onClick, onClick = _d === void 0 ? identity : _d, access = _a.access;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Graph from 'graphology';
|
|
3
|
+
type Props = {
|
|
4
|
+
graph?: Graph;
|
|
5
|
+
children?: React.ReactNode;
|
|
6
|
+
selectedNode?: string;
|
|
7
|
+
onNodeClick: (nodeId: string) => void;
|
|
8
|
+
selectedEdge: string;
|
|
9
|
+
onEdgeLabelClick: (edgeId: string, event: MouseEvent) => void;
|
|
10
|
+
};
|
|
11
|
+
export declare const DataModelGraph: ({ graph, children, selectedNode, onNodeClick, selectedEdge, onEdgeLabelClick }: Props) => JSX.Element;
|
|
12
|
+
export default DataModelGraph;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SigmaGraphContainer } from '../SigmaGraphContainer/SigmaGraphContainer';
|
|
3
|
+
import { DataModelCircleLayuot } from './components/DataModelCircleLayout/DataModelCircleLayuot';
|
|
4
|
+
import { ZoomSlider } from '../ZoomSlider';
|
|
5
|
+
import { useStyles } from './styles';
|
|
6
|
+
var settings = {
|
|
7
|
+
labelRenderedSizeThreshold: 11,
|
|
8
|
+
zIndex: true
|
|
9
|
+
};
|
|
10
|
+
export var DataModelGraph = function (_a) {
|
|
11
|
+
var graph = _a.graph, children = _a.children, selectedNode = _a.selectedNode, onNodeClick = _a.onNodeClick, selectedEdge = _a.selectedEdge, onEdgeLabelClick = _a.onEdgeLabelClick;
|
|
12
|
+
var styles = useStyles();
|
|
13
|
+
return (React.createElement("div", { className: styles.wrapper },
|
|
14
|
+
React.createElement("div", { className: styles.graph }, graph && (React.createElement(SigmaGraphContainer, { initialSettings: settings },
|
|
15
|
+
React.createElement(React.Fragment, null,
|
|
16
|
+
React.createElement(DataModelCircleLayuot, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdge: selectedEdge, onEdgeLabelClick: onEdgeLabelClick }),
|
|
17
|
+
React.createElement("div", { className: styles.rightBottomControls },
|
|
18
|
+
React.createElement(ZoomSlider, { className: styles.zoomSlider, min: 30, max: 300 })))))),
|
|
19
|
+
children));
|
|
20
|
+
};
|
|
21
|
+
export default DataModelGraph;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Graph from 'graphology';
|
|
3
|
+
import { render, screen } from '@testing-library/react';
|
|
4
|
+
import { DataModelGraph } from '../DataModelGraph';
|
|
5
|
+
import { useDataModelGraphAppearance } from './hooks/useDataModelGraphAppearance';
|
|
6
|
+
import { useFakeCenterNode } from './hooks/useFakeCenterNode';
|
|
7
|
+
import { useCircleLayout } from '../hooks/useCircleLayout';
|
|
8
|
+
jest.mock('@react-sigma/core', function () { return ({
|
|
9
|
+
SigmaContainer: function (_a) {
|
|
10
|
+
var children = _a.children;
|
|
11
|
+
return React.createElement("div", null, children);
|
|
12
|
+
},
|
|
13
|
+
useSigma: jest.fn().mockReturnValue({
|
|
14
|
+
refresh: jest.fn()
|
|
15
|
+
}),
|
|
16
|
+
useLoadGraph: jest.fn().mockReturnValue(jest.fn())
|
|
17
|
+
}); });
|
|
18
|
+
jest.mock('../hooks/useCircleLayout', function () { return ({
|
|
19
|
+
useCircleLayout: jest.fn()
|
|
20
|
+
}); });
|
|
21
|
+
jest.mock('../hooks/useSigmaCustomRenderers', function () { return ({
|
|
22
|
+
useSigmaCustomRenderers: jest.fn().mockReturnValue({ addRenderers: jest.fn() })
|
|
23
|
+
}); });
|
|
24
|
+
jest.mock('./hooks/useDataModelGraphAppearance', function () { return ({
|
|
25
|
+
useDataModelGraphAppearance: jest.fn()
|
|
26
|
+
}); });
|
|
27
|
+
jest.mock('./hooks/useFakeCenterNode', function () { return ({
|
|
28
|
+
useFakeCenterNode: jest.fn()
|
|
29
|
+
}); });
|
|
30
|
+
jest.mock('../ZoomSlider', function () { return ({
|
|
31
|
+
ZoomSlider: function () { return React.createElement("div", null, "ZoomSlider"); }
|
|
32
|
+
}); });
|
|
33
|
+
describe('DataModelGraph tests', function () {
|
|
34
|
+
var graph = new Graph();
|
|
35
|
+
var selectedNode = 'node1';
|
|
36
|
+
var onNodeClick = jest.fn();
|
|
37
|
+
var selectedEdge = 'edge1';
|
|
38
|
+
var onEdgeLabelClick = jest.fn();
|
|
39
|
+
var setUp = function () {
|
|
40
|
+
render(React.createElement(DataModelGraph, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdge: selectedEdge, onEdgeLabelClick: onEdgeLabelClick }));
|
|
41
|
+
};
|
|
42
|
+
afterEach(function () {
|
|
43
|
+
jest.clearAllMocks();
|
|
44
|
+
});
|
|
45
|
+
it('renders call hooks with correct props', function () {
|
|
46
|
+
setUp();
|
|
47
|
+
expect(useDataModelGraphAppearance).toHaveBeenCalledWith(expect.objectContaining({
|
|
48
|
+
graph: graph,
|
|
49
|
+
selectedNode: selectedNode,
|
|
50
|
+
selectedEdge: selectedEdge,
|
|
51
|
+
onNodeClick: onNodeClick,
|
|
52
|
+
onEdgeLabelClick: onEdgeLabelClick
|
|
53
|
+
}));
|
|
54
|
+
expect(useFakeCenterNode).toHaveBeenCalledWith(expect.objectContaining({ graph: graph, timeout: 3100 }));
|
|
55
|
+
expect(useCircleLayout).toHaveBeenCalledWith(expect.objectContaining({ graph: graph, animationDuration: 3000 }));
|
|
56
|
+
expect(screen.getByText('ZoomSlider')).toBeInTheDocument();
|
|
57
|
+
});
|
|
58
|
+
});
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import Graph from 'graphology';
|
|
2
|
+
type Props = {
|
|
3
|
+
graph: Graph;
|
|
4
|
+
selectedNode?: string;
|
|
5
|
+
onNodeClick: (nodeId: string) => void;
|
|
6
|
+
selectedEdge: string;
|
|
7
|
+
onEdgeLabelClick: (edgeId: string, event: MouseEvent) => void;
|
|
8
|
+
};
|
|
9
|
+
export declare const LAYOUT_ANIMATION_DURATION = 3000;
|
|
10
|
+
export declare const DataModelCircleLayuot: ({ graph, selectedNode, onNodeClick, selectedEdge, onEdgeLabelClick }: Props) => any;
|
|
11
|
+
export {};
|
package/esm/features/graph/DataModelGraph/components/DataModelCircleLayout/DataModelCircleLayuot.js
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { useCircleLayout } from '../../../hooks/useCircleLayout';
|
|
2
|
+
import { useFakeCenterNode } from '../../hooks/useFakeCenterNode';
|
|
3
|
+
import { useDataModelGraphAppearance } from '../../hooks/useDataModelGraphAppearance';
|
|
4
|
+
export var LAYOUT_ANIMATION_DURATION = 3000;
|
|
5
|
+
export var DataModelCircleLayuot = function (_a) {
|
|
6
|
+
var graph = _a.graph, selectedNode = _a.selectedNode, onNodeClick = _a.onNodeClick, selectedEdge = _a.selectedEdge, onEdgeLabelClick = _a.onEdgeLabelClick;
|
|
7
|
+
useFakeCenterNode({ graph: graph, timeout: LAYOUT_ANIMATION_DURATION + 100 });
|
|
8
|
+
useCircleLayout({ graph: graph, animationDuration: LAYOUT_ANIMATION_DURATION });
|
|
9
|
+
useDataModelGraphAppearance({
|
|
10
|
+
graph: graph,
|
|
11
|
+
selectedNode: selectedNode,
|
|
12
|
+
selectedEdge: selectedEdge,
|
|
13
|
+
onNodeClick: onNodeClick,
|
|
14
|
+
onEdgeLabelClick: onEdgeLabelClick
|
|
15
|
+
});
|
|
16
|
+
return null;
|
|
17
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import Sigma from 'sigma/sigma';
|
|
2
|
+
export declare const getBezierCenter: (x1: number, y1: number, x2: number, y2: number, cx1: number, cy1: number, cx2: number, cy2: number) => {
|
|
3
|
+
x: number;
|
|
4
|
+
y: number;
|
|
5
|
+
};
|
|
6
|
+
export declare const getEdgeCenter: (edgeId: string, sourceId: string, targetId: string, sigma: Sigma) => {
|
|
7
|
+
x: any;
|
|
8
|
+
y: any;
|
|
9
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { LOOP_SCALE, getSelfLoopControlPoints } from '../../rendering/canvas/selfRelationLoop';
|
|
2
|
+
export var getBezierCenter = function (x1, y1, x2, y2, cx1, cy1, cx2, cy2) {
|
|
3
|
+
var t = 0.5;
|
|
4
|
+
var Bt = (1 - t) * (1 - t) * (1 - t);
|
|
5
|
+
var Ct = 3 * ((1 - t) * (1 - t)) * t;
|
|
6
|
+
var Dt = 3 * (1 - t) * (t * t);
|
|
7
|
+
var Et = t * t * t;
|
|
8
|
+
var x = Bt * x1 + Ct * cx1 + Dt * cx2 + Et * x2;
|
|
9
|
+
var y = Bt * y1 + Ct * cy1 + Dt * cy2 + Et * y2;
|
|
10
|
+
return { x: x, y: y };
|
|
11
|
+
};
|
|
12
|
+
export var getEdgeCenter = function (edgeId, sourceId, targetId, sigma) {
|
|
13
|
+
var edgeDisplayData = sigma.getEdgeDisplayData(edgeId);
|
|
14
|
+
var sourceDisplayData = sigma.getNodeDisplayData(sourceId);
|
|
15
|
+
var targetDisplayData = sigma.getNodeDisplayData(targetId);
|
|
16
|
+
var sourceCenter = sigma.framedGraphToViewport({
|
|
17
|
+
x: sourceDisplayData.x,
|
|
18
|
+
y: sourceDisplayData.y
|
|
19
|
+
});
|
|
20
|
+
var targetCenter = sigma.framedGraphToViewport({
|
|
21
|
+
x: targetDisplayData.x,
|
|
22
|
+
y: targetDisplayData.y
|
|
23
|
+
});
|
|
24
|
+
var getLoopCenter = function () {
|
|
25
|
+
var _a = getSelfLoopControlPoints(sourceCenter.x, sourceCenter.y, sigma.scaleSize(sourceDisplayData.size) * LOOP_SCALE), x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
|
|
26
|
+
return getBezierCenter(sourceCenter.x, sourceCenter.y, sourceCenter.x, sourceCenter.y, x1, y1, x2, y2);
|
|
27
|
+
};
|
|
28
|
+
var loopCenter = edgeDisplayData.loop && getLoopCenter();
|
|
29
|
+
var getEdgeCenter = function (coord) { return sourceCenter[coord] + (targetCenter[coord] - sourceCenter[coord]) / 2; };
|
|
30
|
+
var x = edgeDisplayData.loop ? loopCenter.x : getEdgeCenter('x');
|
|
31
|
+
var y = edgeDisplayData.loop ? loopCenter.y : getEdgeCenter('y');
|
|
32
|
+
return { x: x, y: y };
|
|
33
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { getEdgeCenter } from './edgeLabelHelpers';
|
|
2
|
+
describe('getEdgeCenter tests', function () {
|
|
3
|
+
var edgeId = 'edge1';
|
|
4
|
+
var sourceId = 'source1';
|
|
5
|
+
var targetId = 'target1';
|
|
6
|
+
var sigma = {
|
|
7
|
+
getEdgeDisplayData: jest.fn(),
|
|
8
|
+
getNodeDisplayData: jest.fn(),
|
|
9
|
+
framedGraphToViewport: jest.fn(),
|
|
10
|
+
scaleSize: jest.fn(function (x) { return x; })
|
|
11
|
+
};
|
|
12
|
+
afterEach(function () {
|
|
13
|
+
jest.clearAllMocks();
|
|
14
|
+
});
|
|
15
|
+
it('should calculate the regular edge center', function () {
|
|
16
|
+
var edgeDisplayData = {
|
|
17
|
+
loop: false
|
|
18
|
+
};
|
|
19
|
+
var sourceDisplayData = {
|
|
20
|
+
x: 1,
|
|
21
|
+
y: 2,
|
|
22
|
+
size: 10
|
|
23
|
+
};
|
|
24
|
+
var targetDisplayData = {
|
|
25
|
+
x: 3,
|
|
26
|
+
y: 4
|
|
27
|
+
};
|
|
28
|
+
var expectedX = 2;
|
|
29
|
+
var expectedY = 3;
|
|
30
|
+
sigma.getEdgeDisplayData.mockReturnValue(edgeDisplayData);
|
|
31
|
+
sigma.getNodeDisplayData.mockReturnValueOnce(sourceDisplayData);
|
|
32
|
+
sigma.getNodeDisplayData.mockReturnValueOnce(targetDisplayData);
|
|
33
|
+
sigma.framedGraphToViewport.mockImplementation(function (_a) {
|
|
34
|
+
var x = _a.x, y = _a.y;
|
|
35
|
+
return ({ x: x, y: y });
|
|
36
|
+
});
|
|
37
|
+
var result = getEdgeCenter(edgeId, sourceId, targetId, sigma);
|
|
38
|
+
expect(result.x).toBe(expectedX);
|
|
39
|
+
expect(result.y).toBe(expectedY);
|
|
40
|
+
expect(sigma.getEdgeDisplayData).toHaveBeenCalledWith(edgeId);
|
|
41
|
+
expect(sigma.getNodeDisplayData).toHaveBeenCalledWith(sourceId);
|
|
42
|
+
expect(sigma.getNodeDisplayData).toHaveBeenCalledWith(targetId);
|
|
43
|
+
expect(sigma.framedGraphToViewport).toHaveBeenCalledWith({ x: 1, y: 2 });
|
|
44
|
+
expect(sigma.framedGraphToViewport).toHaveBeenCalledWith({ x: 3, y: 4 });
|
|
45
|
+
});
|
|
46
|
+
it('should calculate the edge center with loop', function () {
|
|
47
|
+
var edgeDisplayData = {
|
|
48
|
+
loop: true
|
|
49
|
+
};
|
|
50
|
+
var sourceDisplayData = {
|
|
51
|
+
x: 100,
|
|
52
|
+
y: 100,
|
|
53
|
+
size: 10
|
|
54
|
+
};
|
|
55
|
+
var expectedX = 84.25;
|
|
56
|
+
var expectedY = 115.75;
|
|
57
|
+
sigma.getEdgeDisplayData.mockReturnValue(edgeDisplayData);
|
|
58
|
+
sigma.getNodeDisplayData.mockReturnValueOnce(sourceDisplayData);
|
|
59
|
+
sigma.getNodeDisplayData.mockReturnValueOnce(sourceDisplayData);
|
|
60
|
+
sigma.framedGraphToViewport.mockImplementation(function (_a) {
|
|
61
|
+
var x = _a.x, y = _a.y;
|
|
62
|
+
return ({ x: x, y: y });
|
|
63
|
+
});
|
|
64
|
+
var result = getEdgeCenter(edgeId, sourceId, sourceId, sigma);
|
|
65
|
+
expect(result.x).toBe(expectedX);
|
|
66
|
+
expect(result.y).toBe(expectedY);
|
|
67
|
+
expect(sigma.getEdgeDisplayData).toHaveBeenCalledWith(edgeId);
|
|
68
|
+
expect(sigma.getNodeDisplayData).toHaveBeenCalledWith(sourceId);
|
|
69
|
+
expect(sigma.framedGraphToViewport).toHaveBeenCalledWith({ x: 100, y: 100 });
|
|
70
|
+
expect(sigma.scaleSize).toHaveBeenCalledWith(sourceDisplayData.size);
|
|
71
|
+
});
|
|
72
|
+
});
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import Graph from 'graphology';
|
|
2
|
+
import { DataModelGraphNodeType } from '../../types/graphDataTypes';
|
|
3
|
+
export var createDefaultGraph = function () {
|
|
4
|
+
var graph = new Graph();
|
|
5
|
+
graph.addNode('hcp', {
|
|
6
|
+
nodeType: DataModelGraphNodeType.entityType,
|
|
7
|
+
label: 'HCP',
|
|
8
|
+
secondaryLabel: '12 attributes',
|
|
9
|
+
image: 'HCP.svg',
|
|
10
|
+
x: 100,
|
|
11
|
+
y: 100
|
|
12
|
+
});
|
|
13
|
+
graph.addNode('hca', {
|
|
14
|
+
nodeType: DataModelGraphNodeType.entityType,
|
|
15
|
+
label: 'HCA',
|
|
16
|
+
secondaryLabel: '10 attributes',
|
|
17
|
+
image: 'HCA.svg',
|
|
18
|
+
x: 200,
|
|
19
|
+
y: 100
|
|
20
|
+
});
|
|
21
|
+
graph.addNode('gpo', {
|
|
22
|
+
nodeType: DataModelGraphNodeType.entityType,
|
|
23
|
+
label: 'GPO',
|
|
24
|
+
secondaryLabel: '1 attribute',
|
|
25
|
+
x: 300,
|
|
26
|
+
y: 100
|
|
27
|
+
});
|
|
28
|
+
graph.addNode('prescriptions', {
|
|
29
|
+
nodeType: DataModelGraphNodeType.interactionType,
|
|
30
|
+
label: 'Prescriptions',
|
|
31
|
+
secondaryLabel: '2 attributes',
|
|
32
|
+
x: 100,
|
|
33
|
+
y: 200
|
|
34
|
+
});
|
|
35
|
+
graph.addEdgeWithKey('hcp->hca', 'hcp', 'hca', {
|
|
36
|
+
label: '1'
|
|
37
|
+
});
|
|
38
|
+
graph.addEdgeWithKey('hca->gpo', 'hca', 'gpo', {
|
|
39
|
+
label: '2'
|
|
40
|
+
});
|
|
41
|
+
graph.addEdgeWithKey('hcp->prescriptions', 'hcp', 'prescriptions', {
|
|
42
|
+
type: 'dashed'
|
|
43
|
+
});
|
|
44
|
+
return graph;
|
|
45
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import Graph from 'graphology';
|
|
2
|
+
export declare const EDGE_COLOR = "rgba(130, 130, 130, 1)";
|
|
3
|
+
export declare const DASHED_EDGE_COLOR = "rgba(189, 189, 189, 1)";
|
|
4
|
+
export declare const INACTIVE_EDGE_COLOR = "rgba(224, 224, 224, 1)";
|
|
5
|
+
export declare const SELECTED_EDGE_COLOR = "rgba(79, 79, 79, 1)";
|
|
6
|
+
export declare const RELATED_EDGE_COLOR = "rgba(130, 130, 130, 1)";
|
|
7
|
+
export declare const RELATED_DASHED_EDGE_COLOR = "rgba(79, 79, 79, 1)";
|
|
8
|
+
export declare const INACTIVE_LABEL_COLOR = "rgba(0, 0, 0, 0.38)";
|
|
9
|
+
type Props = {
|
|
10
|
+
graph: Graph;
|
|
11
|
+
selectedNode: string;
|
|
12
|
+
selectedEdge: string;
|
|
13
|
+
onNodeClick: (node: string) => void;
|
|
14
|
+
onEdgeLabelClick: (edgeId: string, event: MouseEvent) => void;
|
|
15
|
+
};
|
|
16
|
+
export declare const useDataModelGraphAppearance: ({ graph, selectedNode, selectedEdge, onNodeClick, onEdgeLabelClick }: Props) => void;
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
13
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
14
|
+
if (ar || !(i in from)) {
|
|
15
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
16
|
+
ar[i] = from[i];
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
20
|
+
};
|
|
21
|
+
import { useEffect, useState } from 'react';
|
|
22
|
+
import { useSigmaContext } from '@react-sigma/core';
|
|
23
|
+
import { useRegisterEvents, useSetSettings, useSigma } from '@react-sigma/core';
|
|
24
|
+
import { svg2Url } from '@reltio/mdm-sdk';
|
|
25
|
+
import { DataModelGraphNodeType } from '../../types/graphDataTypes';
|
|
26
|
+
import { useLoopRenderer } from '../../hooks/useLoopRenderer';
|
|
27
|
+
import { useEdgeLabelsRenderer } from './useEdgeLabelsRenderer';
|
|
28
|
+
import { useSelectedNodeRenderer } from './useSelectedNodeRenderer';
|
|
29
|
+
import { interactionIcon } from '../icons/interaction.inline.svg';
|
|
30
|
+
var DEFAULT_NODE_STYLE = {
|
|
31
|
+
type: 'image',
|
|
32
|
+
size: 28,
|
|
33
|
+
color: 'rgba(55, 71, 79, 1)'
|
|
34
|
+
};
|
|
35
|
+
var DEFAULT_EDGE_STYLE = {
|
|
36
|
+
size: 2
|
|
37
|
+
};
|
|
38
|
+
export var EDGE_COLOR = 'rgba(130, 130, 130, 1)';
|
|
39
|
+
export var DASHED_EDGE_COLOR = 'rgba(189, 189, 189, 1)';
|
|
40
|
+
export var INACTIVE_EDGE_COLOR = 'rgba(224, 224, 224, 1)';
|
|
41
|
+
export var SELECTED_EDGE_COLOR = 'rgba(79, 79, 79, 1)';
|
|
42
|
+
export var RELATED_EDGE_COLOR = 'rgba(130, 130, 130, 1)';
|
|
43
|
+
export var RELATED_DASHED_EDGE_COLOR = 'rgba(79, 79, 79, 1)';
|
|
44
|
+
export var INACTIVE_LABEL_COLOR = 'rgba(0, 0, 0, 0.38)';
|
|
45
|
+
export var useDataModelGraphAppearance = function (_a) {
|
|
46
|
+
var graph = _a.graph, selectedNode = _a.selectedNode, selectedEdge = _a.selectedEdge, onNodeClick = _a.onNodeClick, onEdgeLabelClick = _a.onEdgeLabelClick;
|
|
47
|
+
var sigma = useSigma();
|
|
48
|
+
var container = useSigmaContext().container;
|
|
49
|
+
var _b = useState(null), hoveredNode = _b[0], setHoveredNode = _b[1];
|
|
50
|
+
var registerEvents = useRegisterEvents();
|
|
51
|
+
var setSettings = useSetSettings();
|
|
52
|
+
useLoopRenderer(graph);
|
|
53
|
+
var hoveredEdge = useEdgeLabelsRenderer({ graph: graph, onEdgeLabelClick: onEdgeLabelClick });
|
|
54
|
+
useSelectedNodeRenderer(graph);
|
|
55
|
+
useEffect(function () {
|
|
56
|
+
registerEvents({
|
|
57
|
+
enterNode: function (_a) {
|
|
58
|
+
var node = _a.node;
|
|
59
|
+
setHoveredNode(node);
|
|
60
|
+
},
|
|
61
|
+
leaveNode: function () {
|
|
62
|
+
setHoveredNode(null);
|
|
63
|
+
},
|
|
64
|
+
clickNode: function (_a) {
|
|
65
|
+
var node = _a.node;
|
|
66
|
+
onNodeClick(node);
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
}, [sigma, registerEvents, onNodeClick]);
|
|
70
|
+
useEffect(function () {
|
|
71
|
+
container.style.cursor = hoveredNode || hoveredEdge ? 'pointer' : 'default';
|
|
72
|
+
}, [container, hoveredNode, hoveredEdge]);
|
|
73
|
+
useEffect(function () {
|
|
74
|
+
var graph = sigma.getGraph();
|
|
75
|
+
var selectedNodeNeighbours;
|
|
76
|
+
try {
|
|
77
|
+
selectedNodeNeighbours = graph.neighbors(selectedNode);
|
|
78
|
+
}
|
|
79
|
+
catch (e) {
|
|
80
|
+
//do nothing
|
|
81
|
+
}
|
|
82
|
+
setSettings({
|
|
83
|
+
nodeReducer: function (node, data) {
|
|
84
|
+
var isSelectedNode = node === selectedNode;
|
|
85
|
+
var isInactiveNode = (selectedNode &&
|
|
86
|
+
selectedNodeNeighbours &&
|
|
87
|
+
__spreadArray(__spreadArray([], selectedNodeNeighbours, true), [selectedNode], false).every(function (n) { return n !== node; })) ||
|
|
88
|
+
(selectedEdge && !graph.hasExtremity(selectedEdge, node)) ||
|
|
89
|
+
false;
|
|
90
|
+
var newData = __assign(__assign({}, DEFAULT_NODE_STYLE), data);
|
|
91
|
+
if (data.nodeType === DataModelGraphNodeType.interactionType) {
|
|
92
|
+
newData.hasBorder = true;
|
|
93
|
+
newData.image = svg2Url(interactionIcon);
|
|
94
|
+
}
|
|
95
|
+
if (isInactiveNode) {
|
|
96
|
+
newData.inactive = true;
|
|
97
|
+
newData.labelColor = INACTIVE_LABEL_COLOR;
|
|
98
|
+
newData.secondaryLabelColor = INACTIVE_LABEL_COLOR;
|
|
99
|
+
}
|
|
100
|
+
if (isSelectedNode) {
|
|
101
|
+
newData.selected = true;
|
|
102
|
+
newData.zIndex = 100;
|
|
103
|
+
}
|
|
104
|
+
if (hoveredNode !== node && !isSelectedNode) {
|
|
105
|
+
delete newData.secondaryLabel;
|
|
106
|
+
}
|
|
107
|
+
return newData;
|
|
108
|
+
},
|
|
109
|
+
edgeReducer: function (edge, data) {
|
|
110
|
+
var isDashedLine = data.type === 'dashed';
|
|
111
|
+
var newData = __assign(__assign({}, DEFAULT_EDGE_STYLE), data);
|
|
112
|
+
if (selectedEdge === edge) {
|
|
113
|
+
newData.selected = true;
|
|
114
|
+
}
|
|
115
|
+
if (selectedNode) {
|
|
116
|
+
if (graph.hasExtremity(edge, selectedNode)) {
|
|
117
|
+
newData.color = isDashedLine ? RELATED_DASHED_EDGE_COLOR : RELATED_EDGE_COLOR;
|
|
118
|
+
}
|
|
119
|
+
else {
|
|
120
|
+
newData.color = INACTIVE_EDGE_COLOR;
|
|
121
|
+
newData.labelColor = INACTIVE_LABEL_COLOR;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
else if (selectedEdge) {
|
|
125
|
+
newData.color = edge === selectedEdge ? SELECTED_EDGE_COLOR : INACTIVE_EDGE_COLOR;
|
|
126
|
+
newData.labelColor = edge === selectedEdge ? undefined : INACTIVE_LABEL_COLOR;
|
|
127
|
+
}
|
|
128
|
+
else {
|
|
129
|
+
newData.color = isDashedLine ? DASHED_EDGE_COLOR : EDGE_COLOR;
|
|
130
|
+
}
|
|
131
|
+
return newData;
|
|
132
|
+
}
|
|
133
|
+
});
|
|
134
|
+
}, [sigma, setSettings, selectedNode, selectedEdge, hoveredEdge, hoveredNode]);
|
|
135
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|