@neo4j-ndl/react 3.8.8 → 3.8.10
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/lib/cjs/graph-visualization/{graph-viz-buttons.js → graph-visualization-buttons.js} +12 -12
- package/lib/cjs/graph-visualization/graph-visualization-buttons.js.map +1 -0
- package/lib/cjs/graph-visualization/{graph-viz-context.js → graph-visualization-context.js} +10 -10
- package/lib/cjs/graph-visualization/graph-visualization-context.js.map +1 -0
- package/lib/cjs/graph-visualization/{graph-viz-sidepanel.js → graph-visualization-sidepanel.js} +8 -8
- package/lib/cjs/graph-visualization/graph-visualization-sidepanel.js.map +1 -0
- package/lib/cjs/graph-visualization/{graph-viz.js → graph-visualization.js} +35 -35
- package/lib/cjs/graph-visualization/graph-visualization.js.map +1 -0
- package/lib/cjs/graph-visualization/index.js +19 -9
- package/lib/cjs/graph-visualization/index.js.map +1 -1
- package/lib/cjs/graph-visualization/sidepanel-components/details-panel.js +13 -14
- package/lib/cjs/graph-visualization/sidepanel-components/details-panel.js.map +1 -1
- package/lib/cjs/graph-visualization/sidepanel-components/overview-panel.js +4 -4
- package/lib/cjs/graph-visualization/sidepanel-components/overview-panel.js.map +1 -1
- package/lib/cjs/graph-visualization/sidepanel-components/properties-table.js +1 -1
- package/lib/cjs/graph-visualization/sidepanel-components/properties-table.js.map +1 -1
- package/lib/cjs/graph-visualization/sidepanel-components/single-selection-sidepanel-contents.js +2 -2
- package/lib/cjs/graph-visualization/sidepanel-components/single-selection-sidepanel-contents.js.map +1 -1
- package/lib/cjs/graph-visualization/stories/{graph-viz-barebones.story.js → graph-visualization-barebones.story.js} +3 -3
- package/lib/cjs/graph-visualization/stories/graph-visualization-barebones.story.js.map +1 -0
- package/lib/cjs/graph-visualization/stories/{graph-viz-custom.story.js → graph-visualization-custom.story.js} +3 -3
- package/lib/cjs/graph-visualization/stories/graph-visualization-custom.story.js.map +1 -0
- package/lib/cjs/graph-visualization/stories/{graph-viz-default.story.js → graph-visualization-default.story.js} +3 -3
- package/lib/cjs/graph-visualization/stories/graph-visualization-default.story.js.map +1 -0
- package/lib/cjs/graph-visualization/stories/{graph-viz-maximalist.story.js → graph-visualization-maximalist.story.js} +4 -4
- package/lib/cjs/graph-visualization/stories/graph-visualization-maximalist.story.js.map +1 -0
- package/lib/cjs/graph-visualization/stories/{graph-viz.stories.js → graph-visualization.stories.js} +9 -9
- package/lib/cjs/graph-visualization/stories/graph-visualization.stories.js.map +1 -0
- package/lib/cjs/graph-visualization/stories/index.js +17 -17
- package/lib/cjs/graph-visualization/stories/index.js.map +1 -1
- package/lib/esm/graph-visualization/{graph-viz-buttons.js → graph-visualization-buttons.js} +12 -12
- package/lib/esm/graph-visualization/graph-visualization-buttons.js.map +1 -0
- package/lib/esm/graph-visualization/{graph-viz-context.js → graph-visualization-context.js} +8 -8
- package/lib/esm/graph-visualization/graph-visualization-context.js.map +1 -0
- package/lib/esm/graph-visualization/{graph-viz-sidepanel.js → graph-visualization-sidepanel.js} +6 -6
- package/lib/esm/graph-visualization/graph-visualization-sidepanel.js.map +1 -0
- package/lib/esm/graph-visualization/{graph-viz.js → graph-visualization.js} +33 -33
- package/lib/esm/graph-visualization/graph-visualization.js.map +1 -0
- package/lib/esm/graph-visualization/index.js +5 -4
- package/lib/esm/graph-visualization/index.js.map +1 -1
- package/lib/esm/graph-visualization/sidepanel-components/details-panel.js +6 -7
- package/lib/esm/graph-visualization/sidepanel-components/details-panel.js.map +1 -1
- package/lib/esm/graph-visualization/sidepanel-components/overview-panel.js +4 -4
- package/lib/esm/graph-visualization/sidepanel-components/overview-panel.js.map +1 -1
- package/lib/esm/graph-visualization/sidepanel-components/properties-table.js +1 -1
- package/lib/esm/graph-visualization/sidepanel-components/properties-table.js.map +1 -1
- package/lib/esm/graph-visualization/sidepanel-components/single-selection-sidepanel-contents.js +2 -2
- package/lib/esm/graph-visualization/sidepanel-components/single-selection-sidepanel-contents.js.map +1 -1
- package/lib/esm/graph-visualization/stories/{graph-viz-barebones.story.js → graph-visualization-barebones.story.js} +3 -3
- package/lib/esm/graph-visualization/stories/graph-visualization-barebones.story.js.map +1 -0
- package/lib/esm/graph-visualization/stories/{graph-viz-custom.story.js → graph-visualization-custom.story.js} +3 -3
- package/lib/esm/graph-visualization/stories/graph-visualization-custom.story.js.map +1 -0
- package/lib/esm/graph-visualization/stories/{graph-viz-default.story.js → graph-visualization-default.story.js} +3 -3
- package/lib/esm/graph-visualization/stories/graph-visualization-default.story.js.map +1 -0
- package/lib/esm/graph-visualization/stories/{graph-viz-maximalist.story.js → graph-visualization-maximalist.story.js} +4 -4
- package/lib/esm/graph-visualization/stories/graph-visualization-maximalist.story.js.map +1 -0
- package/lib/esm/graph-visualization/stories/{graph-viz.stories.js → graph-visualization.stories.js} +10 -10
- package/lib/esm/graph-visualization/stories/graph-visualization.stories.js.map +1 -0
- package/lib/esm/graph-visualization/stories/index.js +12 -12
- package/lib/esm/graph-visualization/stories/index.js.map +1 -1
- package/lib/types/graph-visualization/{graph-viz-buttons.d.ts → graph-visualization-buttons.d.ts} +12 -12
- package/lib/types/graph-visualization/{graph-viz-context.d.ts → graph-visualization-context.d.ts} +7 -7
- package/lib/types/graph-visualization/{graph-viz-sidepanel.d.ts → graph-visualization-sidepanel.d.ts} +3 -3
- package/lib/types/graph-visualization/{graph-viz.d.ts → graph-visualization.d.ts} +7 -7
- package/lib/types/graph-visualization/index.d.ts +5 -4
- package/lib/types/graph-visualization/map-to-nvl-graph.d.ts +1 -1
- package/lib/types/graph-visualization/sidepanel-components/properties-table.d.ts +1 -1
- package/lib/types/graph-visualization/stories/index.d.ts +8 -8
- package/lib/types/graph-visualization/stories/story-data.d.ts +1 -1
- package/lib/types/graph-visualization/use-managed-selection-state.d.ts +1 -1
- package/package.json +5 -4
- package/lib/cjs/graph-visualization/graph-viz-buttons.js.map +0 -1
- package/lib/cjs/graph-visualization/graph-viz-context.js.map +0 -1
- package/lib/cjs/graph-visualization/graph-viz-sidepanel.js.map +0 -1
- package/lib/cjs/graph-visualization/graph-viz.js.map +0 -1
- package/lib/cjs/graph-visualization/stories/graph-viz-barebones.story.js.map +0 -1
- package/lib/cjs/graph-visualization/stories/graph-viz-custom.story.js.map +0 -1
- package/lib/cjs/graph-visualization/stories/graph-viz-default.story.js.map +0 -1
- package/lib/cjs/graph-visualization/stories/graph-viz-maximalist.story.js.map +0 -1
- package/lib/cjs/graph-visualization/stories/graph-viz.stories.js.map +0 -1
- package/lib/esm/graph-visualization/graph-viz-buttons.js.map +0 -1
- package/lib/esm/graph-visualization/graph-viz-context.js.map +0 -1
- package/lib/esm/graph-visualization/graph-viz-sidepanel.js.map +0 -1
- package/lib/esm/graph-visualization/graph-viz.js.map +0 -1
- package/lib/esm/graph-visualization/stories/graph-viz-barebones.story.js.map +0 -1
- package/lib/esm/graph-visualization/stories/graph-viz-custom.story.js.map +0 -1
- package/lib/esm/graph-visualization/stories/graph-viz-default.story.js.map +0 -1
- package/lib/esm/graph-visualization/stories/graph-viz-maximalist.story.js.map +0 -1
- package/lib/esm/graph-visualization/stories/graph-viz.stories.js.map +0 -1
- /package/lib/types/graph-visualization/stories/{graph-viz-barebones.story.d.ts → graph-visualization-barebones.story.d.ts} +0 -0
- /package/lib/types/graph-visualization/stories/{graph-viz-custom.story.d.ts → graph-visualization-custom.story.d.ts} +0 -0
- /package/lib/types/graph-visualization/stories/{graph-viz-default.story.d.ts → graph-visualization-default.story.d.ts} +0 -0
- /package/lib/types/graph-visualization/stories/{graph-viz-maximalist.story.d.ts → graph-visualization-maximalist.story.d.ts} +0 -0
- /package/lib/types/graph-visualization/stories/{graph-viz.stories.d.ts → graph-visualization.stories.d.ts} +0 -0
|
@@ -29,7 +29,7 @@ const react_1 = require("@neo4j-ndl/react");
|
|
|
29
29
|
const icons_1 = require("@neo4j-ndl/react/icons");
|
|
30
30
|
const classnames_1 = __importDefault(require("classnames"));
|
|
31
31
|
const react_2 = require("react");
|
|
32
|
-
const
|
|
32
|
+
const graph_visualization_context_1 = require("./graph-visualization-context");
|
|
33
33
|
const GroupButton = (props) => {
|
|
34
34
|
const { isActive, ariaLabel, isDisabled, tipContent, onClick, onMouseDown, tooltipPlacement, className, style, htmlAttributes, children, } = props;
|
|
35
35
|
return ((0, jsx_runtime_1.jsxs)(react_1.Tooltip, { type: "simple", placement: tooltipPlacement, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip.Trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { ariaLabel: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : tipContent, size: "small", className: className, style: style, isClean: true, isGrouped: true, isActive: isActive, isDisabled: isDisabled, onClick: onClick, htmlAttributes: Object.assign({ onMouseDown }, htmlAttributes), children: children }) }), (0, jsx_runtime_1.jsx)(react_1.Tooltip.Content, { children: tipContent })] }));
|
|
@@ -50,7 +50,7 @@ const GESTURE_KEYS = {
|
|
|
50
50
|
single: 'S',
|
|
51
51
|
};
|
|
52
52
|
const useRegisterKeyboardGestureSwitcher = (gesture) => {
|
|
53
|
-
const { setGesture } = (0,
|
|
53
|
+
const { setGesture } = (0, graph_visualization_context_1.useGraphVisualizationContext)();
|
|
54
54
|
const handleKeyDown = (0, react_2.useCallback)((evt) => {
|
|
55
55
|
if (!isEditingText(evt) && setGesture !== undefined) {
|
|
56
56
|
const upperKey = evt.key.toUpperCase();
|
|
@@ -68,7 +68,7 @@ const useRegisterKeyboardGestureSwitcher = (gesture) => {
|
|
|
68
68
|
};
|
|
69
69
|
const NON_BREAKING_SPACE = '\u00A0';
|
|
70
70
|
const SingleSelectButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
|
|
71
|
-
const { gesture, setGesture, interactionMode } = (0,
|
|
71
|
+
const { gesture, setGesture, interactionMode } = (0, graph_visualization_context_1.useGraphVisualizationContext)();
|
|
72
72
|
useRegisterKeyboardGestureSwitcher('single');
|
|
73
73
|
return ((0, jsx_runtime_1.jsx)(exports.GroupButton, { isActive: gesture === 'single', isDisabled: interactionMode !== 'select', ariaLabel: "Individual Select Button", tipContent: `Individual Select ${NON_BREAKING_SPACE} ${GESTURE_KEYS.single}`, onClick: () => {
|
|
74
74
|
setGesture === null || setGesture === void 0 ? void 0 : setGesture('single');
|
|
@@ -76,7 +76,7 @@ const SingleSelectButton = ({ className, style, htmlAttributes, tooltipPlacement
|
|
|
76
76
|
};
|
|
77
77
|
exports.SingleSelectButton = SingleSelectButton;
|
|
78
78
|
const BoxSelectButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
|
|
79
|
-
const { gesture, setGesture, interactionMode } = (0,
|
|
79
|
+
const { gesture, setGesture, interactionMode } = (0, graph_visualization_context_1.useGraphVisualizationContext)();
|
|
80
80
|
useRegisterKeyboardGestureSwitcher('box');
|
|
81
81
|
return ((0, jsx_runtime_1.jsx)(exports.GroupButton, { isDisabled: interactionMode !== 'select' || setGesture === undefined, isActive: gesture === 'box', ariaLabel: "Box Select Button", tipContent: `Box Select ${NON_BREAKING_SPACE} ${GESTURE_KEYS.box}`, onClick: () => {
|
|
82
82
|
setGesture === null || setGesture === void 0 ? void 0 : setGesture('box');
|
|
@@ -84,7 +84,7 @@ const BoxSelectButton = ({ className, style, htmlAttributes, tooltipPlacement, }
|
|
|
84
84
|
};
|
|
85
85
|
exports.BoxSelectButton = BoxSelectButton;
|
|
86
86
|
const LassoSelectButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
|
|
87
|
-
const { gesture, setGesture, interactionMode } = (0,
|
|
87
|
+
const { gesture, setGesture, interactionMode } = (0, graph_visualization_context_1.useGraphVisualizationContext)();
|
|
88
88
|
useRegisterKeyboardGestureSwitcher('lasso');
|
|
89
89
|
return ((0, jsx_runtime_1.jsx)(exports.GroupButton, { isDisabled: interactionMode !== 'select' || setGesture === undefined, isActive: gesture === 'lasso', ariaLabel: "Lasso Select Button", tipContent: `Lasso Select ${NON_BREAKING_SPACE} ${GESTURE_KEYS.lasso}`, onClick: () => {
|
|
90
90
|
setGesture === null || setGesture === void 0 ? void 0 : setGesture('lasso');
|
|
@@ -92,7 +92,7 @@ const LassoSelectButton = ({ className, style, htmlAttributes, tooltipPlacement,
|
|
|
92
92
|
};
|
|
93
93
|
exports.LassoSelectButton = LassoSelectButton;
|
|
94
94
|
const ZoomInButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
|
|
95
|
-
const { nvlInstance } = (0,
|
|
95
|
+
const { nvlInstance } = (0, graph_visualization_context_1.useGraphVisualizationContext)();
|
|
96
96
|
const handleZoomIn = (0, react_2.useCallback)(() => {
|
|
97
97
|
var _a, _b;
|
|
98
98
|
(_a = nvlInstance.current) === null || _a === void 0 ? void 0 : _a.setZoom(((_b = nvlInstance.current) === null || _b === void 0 ? void 0 : _b.getScale()) * 1.3);
|
|
@@ -101,7 +101,7 @@ const ZoomInButton = ({ className, style, htmlAttributes, tooltipPlacement, }) =
|
|
|
101
101
|
};
|
|
102
102
|
exports.ZoomInButton = ZoomInButton;
|
|
103
103
|
const ZoomOutButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
|
|
104
|
-
const { nvlInstance } = (0,
|
|
104
|
+
const { nvlInstance } = (0, graph_visualization_context_1.useGraphVisualizationContext)();
|
|
105
105
|
const handleZoomOut = (0, react_2.useCallback)(() => {
|
|
106
106
|
var _a, _b;
|
|
107
107
|
(_a = nvlInstance.current) === null || _a === void 0 ? void 0 : _a.setZoom(((_b = nvlInstance.current) === null || _b === void 0 ? void 0 : _b.getScale()) * 0.7);
|
|
@@ -110,7 +110,7 @@ const ZoomOutButton = ({ className, style, htmlAttributes, tooltipPlacement, })
|
|
|
110
110
|
};
|
|
111
111
|
exports.ZoomOutButton = ZoomOutButton;
|
|
112
112
|
const ZoomToFitButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
|
|
113
|
-
const { nvlInstance } = (0,
|
|
113
|
+
const { nvlInstance } = (0, graph_visualization_context_1.useGraphVisualizationContext)();
|
|
114
114
|
const handleZoomToFit = (0, react_2.useCallback)(() => {
|
|
115
115
|
var _a, _b;
|
|
116
116
|
(_a = nvlInstance.current) === null || _a === void 0 ? void 0 : _a.fit((_b = nvlInstance.current) === null || _b === void 0 ? void 0 : _b.getNodes().map((node) => node.id));
|
|
@@ -119,16 +119,16 @@ const ZoomToFitButton = ({ className, style, htmlAttributes, tooltipPlacement, }
|
|
|
119
119
|
};
|
|
120
120
|
exports.ZoomToFitButton = ZoomToFitButton;
|
|
121
121
|
const ToggleSidePanelButton = ({ className, htmlAttributes, style, tooltipPlacement, }) => {
|
|
122
|
-
const { sidepanel } = (0,
|
|
122
|
+
const { sidepanel } = (0, graph_visualization_context_1.useGraphVisualizationContext)();
|
|
123
123
|
if (!sidepanel) {
|
|
124
124
|
throw new Error('Using the ToggleSidePanelButton requires having a sidepanel');
|
|
125
125
|
}
|
|
126
126
|
const { isSidePanelOpen, setIsSidePanelOpen } = sidepanel;
|
|
127
|
-
return ((0, jsx_runtime_1.jsxs)(react_1.Tooltip, { placement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'bottom', type: "simple", children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip.Trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { size: "small", onClick: () => setIsSidePanelOpen === null || setIsSidePanelOpen === void 0 ? void 0 : setIsSidePanelOpen(!isSidePanelOpen), isFloating: true, ariaLabel: "Toggle node properties panel", className: (0, classnames_1.default)('ndl-graph-
|
|
127
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.Tooltip, { placement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'bottom', type: "simple", children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip.Trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { size: "small", onClick: () => setIsSidePanelOpen === null || setIsSidePanelOpen === void 0 ? void 0 : setIsSidePanelOpen(!isSidePanelOpen), isFloating: true, ariaLabel: "Toggle node properties panel", className: (0, classnames_1.default)('ndl-graph-visualization-toggle-sidepanel', className), style: style, htmlAttributes: Object.assign({ 'aria-pressed': isSidePanelOpen }, htmlAttributes), children: (0, jsx_runtime_1.jsx)(icons_1.SidebarLineRightIcon, { className: "ndl-graph-visualization-toggle-icon" }) }) }), (0, jsx_runtime_1.jsx)(react_1.Tooltip.Content, { children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", children: isSidePanelOpen ? 'Close panel' : 'Open panel' }) })] }));
|
|
128
128
|
};
|
|
129
129
|
exports.ToggleSidePanelButton = ToggleSidePanelButton;
|
|
130
130
|
const DownloadButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
|
|
131
|
-
const { nvlInstance } = (0,
|
|
131
|
+
const { nvlInstance } = (0, graph_visualization_context_1.useGraphVisualizationContext)();
|
|
132
132
|
const [isDownloadMenuOpen, setOpen] = (0, react_2.useState)(false);
|
|
133
133
|
const closeFileMenu = () => setOpen(false);
|
|
134
134
|
const downloadButtonRef = (0, react_2.useRef)(null);
|
|
@@ -139,4 +139,4 @@ const DownloadButton = ({ className, style, htmlAttributes, tooltipPlacement, })
|
|
|
139
139
|
} }) }) })] }));
|
|
140
140
|
};
|
|
141
141
|
exports.DownloadButton = DownloadButton;
|
|
142
|
-
//# sourceMappingURL=graph-
|
|
142
|
+
//# sourceMappingURL=graph-visualization-buttons.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"graph-visualization-buttons.js","sourceRoot":"","sources":["../../../src/graph-visualization/graph-visualization-buttons.tsx"],"names":[],"mappings":"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"}
|
|
@@ -20,23 +20,23 @@
|
|
|
20
20
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
21
21
|
*/
|
|
22
22
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
23
|
-
exports.
|
|
23
|
+
exports.useGraphVisualizationContext = exports.GraphVisualizationContext = void 0;
|
|
24
24
|
const react_1 = require("react");
|
|
25
|
-
exports.
|
|
25
|
+
exports.GraphVisualizationContext = (0, react_1.createContext)(undefined);
|
|
26
26
|
/**
|
|
27
27
|
* Hook to access the graph visualization context.
|
|
28
28
|
*
|
|
29
29
|
* This hook is used to implement custom UI components like buttons, panels, and controls
|
|
30
30
|
* that need access to data and functionality from the graph visualization component.
|
|
31
|
-
* @see {@link
|
|
31
|
+
* @see {@link GraphVisualizationContextData}
|
|
32
32
|
*
|
|
33
33
|
* @returns The graph visualization context containing NVL instance, sidepanel, gestures, and graph data
|
|
34
|
-
* @throws Error if used outside of a
|
|
34
|
+
* @throws Error if used outside of a GraphVisualizationContext provider
|
|
35
35
|
*
|
|
36
36
|
* @example
|
|
37
37
|
* ```tsx
|
|
38
38
|
* const NodeLoggerButton = () => {
|
|
39
|
-
* const { selected } =
|
|
39
|
+
* const { selected } = useGraphVisualizationContext();
|
|
40
40
|
*
|
|
41
41
|
* const handleClick = () => {
|
|
42
42
|
* console.log('Selected nodes:', selected.nodeIds);
|
|
@@ -51,12 +51,12 @@ exports.GraphVizContext = (0, react_1.createContext)(undefined);
|
|
|
51
51
|
* ```
|
|
52
52
|
* @alpha
|
|
53
53
|
*/
|
|
54
|
-
const
|
|
55
|
-
const context = (0, react_1.useContext)(exports.
|
|
54
|
+
const useGraphVisualizationContext = () => {
|
|
55
|
+
const context = (0, react_1.useContext)(exports.GraphVisualizationContext);
|
|
56
56
|
if (!context) {
|
|
57
|
-
throw new Error('
|
|
57
|
+
throw new Error('useGraphVisualizationContext must be used within a GraphVisualizationContext');
|
|
58
58
|
}
|
|
59
59
|
return context;
|
|
60
60
|
};
|
|
61
|
-
exports.
|
|
62
|
-
//# sourceMappingURL=graph-
|
|
61
|
+
exports.useGraphVisualizationContext = useGraphVisualizationContext;
|
|
62
|
+
//# sourceMappingURL=graph-visualization-context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"graph-visualization-context.js","sourceRoot":"","sources":["../../../src/graph-visualization/graph-visualization-context.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;AAIH,iCAAkD;AAuErC,QAAA,yBAAyB,GAAG,IAAA,qBAAa,EAEpD,SAAS,CAAC,CAAC;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACI,MAAM,4BAA4B,GAAG,GAAG,EAAE;IAC/C,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,iCAAyB,CAAC,CAAC;IACtD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,8EAA8E,CAC/E,CAAC;IACJ,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AARW,QAAA,4BAA4B,gCAQvC"}
|
package/lib/cjs/graph-visualization/{graph-viz-sidepanel.js → graph-visualization-sidepanel.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
3
|
+
exports.GraphVisualizationSidepanel = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
/**
|
|
6
6
|
*
|
|
@@ -23,7 +23,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
23
23
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
24
24
|
*/
|
|
25
25
|
const re_resizable_1 = require("re-resizable");
|
|
26
|
-
const
|
|
26
|
+
const GraphVisualizationSidepanel = ({ sidepanel, }) => {
|
|
27
27
|
const { children, isSidePanelOpen, sidePanelWidth, onSidePanelResize, minWidth = 230, } = sidepanel;
|
|
28
28
|
if (!isSidePanelOpen) {
|
|
29
29
|
return null;
|
|
@@ -42,15 +42,15 @@ const GraphVizSidepanel = ({ sidepanel }) => {
|
|
|
42
42
|
topRight: false,
|
|
43
43
|
}, handleClasses: { left: 'ndl-sidepanel-handle' }, onResizeStop: (_e, _dir, ref) => {
|
|
44
44
|
onSidePanelResize(ref.getBoundingClientRect().width);
|
|
45
|
-
}, children: (0, jsx_runtime_1.jsx)("div", { className: "ndl-graph-
|
|
45
|
+
}, children: (0, jsx_runtime_1.jsx)("div", { className: "ndl-graph-visualization-sidepanel-content", children: children }) }));
|
|
46
46
|
};
|
|
47
|
-
exports.
|
|
47
|
+
exports.GraphVisualizationSidepanel = GraphVisualizationSidepanel;
|
|
48
48
|
const Title = ({ children }) => {
|
|
49
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "ndl-graph-
|
|
49
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "ndl-graph-visualization-sidepanel-title ndl-grid-area-title", children: children }));
|
|
50
50
|
};
|
|
51
|
-
exports.
|
|
51
|
+
exports.GraphVisualizationSidepanel.Title = Title;
|
|
52
52
|
const Content = ({ children }) => {
|
|
53
53
|
return (0, jsx_runtime_1.jsx)("section", { className: "ndl-grid-area-content", children: children });
|
|
54
54
|
};
|
|
55
|
-
exports.
|
|
56
|
-
//# sourceMappingURL=graph-
|
|
55
|
+
exports.GraphVisualizationSidepanel.Content = Content;
|
|
56
|
+
//# sourceMappingURL=graph-visualization-sidepanel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"graph-visualization-sidepanel.js","sourceRoot":"","sources":["../../../src/graph-visualization/graph-visualization-sidepanel.tsx"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,+CAAyC;AAIlC,MAAM,2BAA2B,GAAG,CAAC,EAC1C,SAAS,GAGV,EAAE,EAAE;IACH,MAAM,EACJ,QAAQ,EACR,eAAe,EACf,cAAc,EACd,iBAAiB,EACjB,QAAQ,GAAG,GAAG,GACf,GAAG,SAAS,CAAC;IAEd,IAAI,CAAC,eAAe,EAAE,CAAC;QACrB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,uBAAC,wBAAS,IACR,WAAW,EAAE;YACX,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,GAAG;SAC7B,EACD,SAAS,EAAC,qBAAqB,EAC/B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAC,KAAK,EACd,MAAM,EAAE;YACN,MAAM,EAAE,KAAK;YACb,UAAU,EAAE,KAAK;YACjB,WAAW,EAAE,KAAK;YAClB,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,KAAK;YACZ,GAAG,EAAE,KAAK;YACV,OAAO,EAAE,KAAK;YACd,QAAQ,EAAE,KAAK;SAChB,EACD,aAAa,EAAE,EAAE,IAAI,EAAE,sBAAsB,EAAE,EAC/C,YAAY,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE;YAC9B,iBAAiB,CAAC,GAAG,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC;QACvD,CAAC,YAED,gCAAK,SAAS,EAAC,2CAA2C,YACvD,QAAQ,GACL,GACI,CACb,CAAC;AACJ,CAAC,CAAC;AA9CW,QAAA,2BAA2B,+BA8CtC;AAEF,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAiC,EAAE,EAAE;IAC5D,OAAO,CACL,gCAAK,SAAS,EAAC,6DAA6D,YACzE,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AACF,mCAA2B,CAAC,KAAK,GAAG,KAAK,CAAC;AAE1C,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAiC,EAAE,EAAE;IAC9D,OAAO,oCAAS,SAAS,EAAC,uBAAuB,YAAE,QAAQ,GAAW,CAAC;AACzE,CAAC,CAAC;AACF,mCAA2B,CAAC,OAAO,GAAG,OAAO,CAAC"}
|
|
@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
38
38
|
};
|
|
39
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
40
|
exports.DEFAULT_NVL_OPTIONS = void 0;
|
|
41
|
-
exports.
|
|
41
|
+
exports.GraphVisualization = GraphVisualization;
|
|
42
42
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
43
43
|
/**
|
|
44
44
|
*
|
|
@@ -65,18 +65,18 @@ const react_1 = require("@neo4j-ndl/react");
|
|
|
65
65
|
const react_2 = require("@neo4j-nvl/react");
|
|
66
66
|
const classnames_1 = __importDefault(require("classnames"));
|
|
67
67
|
const react_3 = __importStar(require("react"));
|
|
68
|
-
const
|
|
69
|
-
const
|
|
70
|
-
const
|
|
68
|
+
const graph_visualization_buttons_1 = require("./graph-visualization-buttons");
|
|
69
|
+
const graph_visualization_context_1 = require("./graph-visualization-context");
|
|
70
|
+
const graph_visualization_sidepanel_1 = require("./graph-visualization-sidepanel");
|
|
71
71
|
const map_to_nvl_graph_1 = require("./map-to-nvl-graph");
|
|
72
72
|
const single_selection_sidepanel_contents_1 = require("./sidepanel-components/single-selection-sidepanel-contents");
|
|
73
73
|
const use_managed_selection_state_1 = require("./use-managed-selection-state");
|
|
74
74
|
const use_semi_controlled_state_1 = require("./use-semi-controlled-state");
|
|
75
75
|
const PLACEMENTS = {
|
|
76
|
-
'bottom-left': 'ndl-graph-
|
|
77
|
-
'bottom-right': 'ndl-graph-
|
|
78
|
-
'top-left': 'ndl-graph-
|
|
79
|
-
'top-right': 'ndl-graph-
|
|
76
|
+
'bottom-left': 'ndl-graph-visualization-interaction-island ndl-bottom-left',
|
|
77
|
+
'bottom-right': 'ndl-graph-visualization-interaction-island ndl-bottom-right',
|
|
78
|
+
'top-left': 'ndl-graph-visualization-interaction-island ndl-top-left',
|
|
79
|
+
'top-right': 'ndl-graph-visualization-interaction-island ndl-top-right',
|
|
80
80
|
};
|
|
81
81
|
const InteractionIsland = ({ children, className, placement, }) => {
|
|
82
82
|
return (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(PLACEMENTS[placement], className), children: children });
|
|
@@ -91,9 +91,9 @@ exports.DEFAULT_NVL_OPTIONS = {
|
|
|
91
91
|
};
|
|
92
92
|
const DEFAULT_COMPONENTS = {
|
|
93
93
|
bottomLeftIsland: null,
|
|
94
|
-
bottomRightIsland: ((0, jsx_runtime_1.jsxs)(react_1.IconButtonArray, { orientation: "vertical", isFloating: true, children: [(0, jsx_runtime_1.jsx)(
|
|
94
|
+
bottomRightIsland: ((0, jsx_runtime_1.jsxs)(react_1.IconButtonArray, { orientation: "vertical", isFloating: true, children: [(0, jsx_runtime_1.jsx)(graph_visualization_buttons_1.ZoomInButton, {}), " ", (0, jsx_runtime_1.jsx)(graph_visualization_buttons_1.ZoomOutButton, {}), " ", (0, jsx_runtime_1.jsx)(graph_visualization_buttons_1.ZoomToFitButton, {})] })),
|
|
95
95
|
topLeftIsland: null,
|
|
96
|
-
topRightIsland: ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-graph-
|
|
96
|
+
topRightIsland: ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-graph-visualization-default-download-group", children: [(0, jsx_runtime_1.jsx)(graph_visualization_buttons_1.DownloadButton, {}), " ", (0, jsx_runtime_1.jsx)(graph_visualization_buttons_1.ToggleSidePanelButton, {})] })),
|
|
97
97
|
};
|
|
98
98
|
/**
|
|
99
99
|
* A comprehensive graph visualization component for rendering Neo4j-style graphs with interactive features.
|
|
@@ -109,7 +109,7 @@ const DEFAULT_COMPONENTS = {
|
|
|
109
109
|
* @example
|
|
110
110
|
* Basic usage:
|
|
111
111
|
* ```tsx
|
|
112
|
-
* <
|
|
112
|
+
* <GraphVisualization
|
|
113
113
|
* nodes={nodes}
|
|
114
114
|
* rels={relationships}
|
|
115
115
|
* selected={selection}
|
|
@@ -120,7 +120,7 @@ const DEFAULT_COMPONENTS = {
|
|
|
120
120
|
* @example
|
|
121
121
|
* With custom controls:
|
|
122
122
|
* ```tsx
|
|
123
|
-
* <
|
|
123
|
+
* <GraphVisualization
|
|
124
124
|
* nodes={nodes}
|
|
125
125
|
* rels={relationships}
|
|
126
126
|
* topRightIsland={<CustomControls />}
|
|
@@ -134,12 +134,12 @@ const DEFAULT_COMPONENTS = {
|
|
|
134
134
|
* />
|
|
135
135
|
* ```
|
|
136
136
|
*
|
|
137
|
-
* @param props - {@link
|
|
137
|
+
* @param props - {@link GraphVisualizationProps}
|
|
138
138
|
* @returns A React component that renders an interactive graph visualization
|
|
139
139
|
*
|
|
140
140
|
* @alpha
|
|
141
141
|
*/
|
|
142
|
-
function
|
|
142
|
+
function GraphVisualization(_a) {
|
|
143
143
|
var _b, _c;
|
|
144
144
|
var { nvlRef: rawNvlRef, nvlCallbacks, nvlOptions, sidepanel: rawSidepanel, nodes: rawNodes, rels: rawRels, topLeftIsland = DEFAULT_COMPONENTS.topLeftIsland, topRightIsland = DEFAULT_COMPONENTS.topRightIsland, bottomLeftIsland = DEFAULT_COMPONENTS.bottomLeftIsland, bottomRightIsland = DEFAULT_COMPONENTS.bottomRightIsland, gesture = 'single', setGesture, selected: rawSelected, setSelected: rawSetSelected, interactionMode: rawInteractionMode, setInteractionMode: rawSetInteractionMode, mouseEventCallbacks = {}, className, style, htmlAttributes, ref, as } = _a, restProps = __rest(_a, ["nvlRef", "nvlCallbacks", "nvlOptions", "sidepanel", "nodes", "rels", "topLeftIsland", "topRightIsland", "bottomLeftIsland", "bottomRightIsland", "gesture", "setGesture", "selected", "setSelected", "interactionMode", "setInteractionMode", "mouseEventCallbacks", "className", "style", "htmlAttributes", "ref", "as"]);
|
|
145
145
|
const nvlRef = (0, react_3.useMemo)(() => rawNvlRef !== null && rawNvlRef !== void 0 ? rawNvlRef : react_3.default.createRef(), [rawNvlRef]);
|
|
@@ -186,7 +186,7 @@ function GraphViz(_a) {
|
|
|
186
186
|
setSidePanelWidth,
|
|
187
187
|
]);
|
|
188
188
|
const Component = as !== null && as !== void 0 ? as : 'div';
|
|
189
|
-
return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: ref, className: (0, classnames_1.default)('ndl-graph-
|
|
189
|
+
return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: ref, className: (0, classnames_1.default)('ndl-graph-visualization-container', className), style: style }, htmlAttributes, { children: (0, jsx_runtime_1.jsxs)(graph_visualization_context_1.GraphVisualizationContext.Provider, { value: {
|
|
190
190
|
gesture,
|
|
191
191
|
interactionMode,
|
|
192
192
|
nvlGraph,
|
|
@@ -194,7 +194,7 @@ function GraphViz(_a) {
|
|
|
194
194
|
selected,
|
|
195
195
|
setGesture,
|
|
196
196
|
sidepanel,
|
|
197
|
-
}, children: [(0, jsx_runtime_1.jsxs)("div", { className: "ndl-graph-
|
|
197
|
+
}, children: [(0, jsx_runtime_1.jsxs)("div", { className: "ndl-graph-visualization", children: [(0, jsx_runtime_1.jsx)(react_2.InteractiveNvlWrapper, Object.assign({ layout: "d3Force", nodes: nodesWithSelection, rels: relsWithSelection, nvlOptions: Object.assign(Object.assign(Object.assign({}, exports.DEFAULT_NVL_OPTIONS), { instanceId, styling: {
|
|
198
198
|
defaultRelationshipColor: border.strongest,
|
|
199
199
|
dropShadowColor: border.weak,
|
|
200
200
|
selectedInnerBorderColor: bg.default,
|
|
@@ -203,49 +203,49 @@ function GraphViz(_a) {
|
|
|
203
203
|
if (!isComputing) {
|
|
204
204
|
(_a = nvlRef.current) === null || _a === void 0 ? void 0 : _a.fit(nvlRef.current.getNodes().map((neighbors) => neighbors.id), { noPan: true });
|
|
205
205
|
}
|
|
206
|
-
} }, nvlCallbacks), mouseEventCallbacks: wrappedMouseEventCallbacks, ref: nvlRef }, restProps), key), topLeftIsland !== null && ((0, jsx_runtime_1.jsx)(InteractionIsland, { placement: "top-left", children: topLeftIsland })), topRightIsland !== null && ((0, jsx_runtime_1.jsx)(InteractionIsland, { placement: "top-right", children: topRightIsland })), bottomLeftIsland !== null && ((0, jsx_runtime_1.jsx)(InteractionIsland, { placement: "bottom-left", children: bottomLeftIsland })), bottomRightIsland !== null && ((0, jsx_runtime_1.jsx)(InteractionIsland, { placement: "bottom-right", children: bottomRightIsland }))] }), sidepanel && (0, jsx_runtime_1.jsx)(
|
|
206
|
+
} }, nvlCallbacks), mouseEventCallbacks: wrappedMouseEventCallbacks, ref: nvlRef }, restProps), key), topLeftIsland !== null && ((0, jsx_runtime_1.jsx)(InteractionIsland, { placement: "top-left", children: topLeftIsland })), topRightIsland !== null && ((0, jsx_runtime_1.jsx)(InteractionIsland, { placement: "top-right", children: topRightIsland })), bottomLeftIsland !== null && ((0, jsx_runtime_1.jsx)(InteractionIsland, { placement: "bottom-left", children: bottomLeftIsland })), bottomRightIsland !== null && ((0, jsx_runtime_1.jsx)(InteractionIsland, { placement: "bottom-right", children: bottomRightIsland }))] }), sidepanel && (0, jsx_runtime_1.jsx)(graph_visualization_sidepanel_1.GraphVisualizationSidepanel, { sidepanel: sidepanel })] }) })));
|
|
207
207
|
}
|
|
208
208
|
/**
|
|
209
|
-
* Zoom in button for use within a
|
|
209
|
+
* Zoom in button for use within a GraphVisualization component.
|
|
210
210
|
*
|
|
211
211
|
* @remarks
|
|
212
212
|
* Increases zoom level by 1.3x
|
|
213
213
|
*
|
|
214
214
|
* @alpha
|
|
215
215
|
*/
|
|
216
|
-
|
|
216
|
+
GraphVisualization.ZoomInButton = graph_visualization_buttons_1.ZoomInButton;
|
|
217
217
|
/**
|
|
218
|
-
* Zoom out button for use within a
|
|
218
|
+
* Zoom out button for use within a GraphVisualization component.
|
|
219
219
|
*
|
|
220
220
|
* @remarks
|
|
221
221
|
* Decreases zoom level by 0.7x
|
|
222
222
|
*
|
|
223
223
|
* @alpha
|
|
224
224
|
*/
|
|
225
|
-
|
|
225
|
+
GraphVisualization.ZoomOutButton = graph_visualization_buttons_1.ZoomOutButton;
|
|
226
226
|
/**
|
|
227
|
-
* Zoom to fit button for use within a
|
|
227
|
+
* Zoom to fit button for use within a GraphVisualization component.
|
|
228
228
|
*
|
|
229
229
|
* @remarks
|
|
230
230
|
* Automatically adjusts zoom and pan to show all nodes and relationships
|
|
231
231
|
*
|
|
232
232
|
* @alpha
|
|
233
233
|
*/
|
|
234
|
-
|
|
234
|
+
GraphVisualization.ZoomToFitButton = graph_visualization_buttons_1.ZoomToFitButton;
|
|
235
235
|
/**
|
|
236
|
-
* Sidepanel toggle button for use within a
|
|
236
|
+
* Sidepanel toggle button for use within a GraphVisualization component.
|
|
237
237
|
*
|
|
238
238
|
* @remarks
|
|
239
239
|
* Shows or hides the sidepanel containing node and relationship details.
|
|
240
|
-
* Requires a sidepanel to be configured in the
|
|
240
|
+
* Requires a sidepanel to be configured in the GraphVisualization component.
|
|
241
241
|
*
|
|
242
242
|
* @throws Error when used without a configured sidepanel
|
|
243
243
|
*
|
|
244
244
|
* @alpha
|
|
245
245
|
*/
|
|
246
|
-
|
|
246
|
+
GraphVisualization.ToggleSidePanelButton = graph_visualization_buttons_1.ToggleSidePanelButton;
|
|
247
247
|
/**
|
|
248
|
-
* Download button for use within a
|
|
248
|
+
* Download button for use within a GraphVisualization component.
|
|
249
249
|
*
|
|
250
250
|
* @remarks
|
|
251
251
|
* Opens a dropdown menu with download options. Currently supports PNG format.
|
|
@@ -253,9 +253,9 @@ GraphViz.ToggleSidePanelButton = graph_viz_buttons_1.ToggleSidePanelButton;
|
|
|
253
253
|
*
|
|
254
254
|
* @alpha
|
|
255
255
|
*/
|
|
256
|
-
|
|
256
|
+
GraphVisualization.DownloadButton = graph_visualization_buttons_1.DownloadButton;
|
|
257
257
|
/**
|
|
258
|
-
* Box selection button for use within a
|
|
258
|
+
* Box selection button for use within a GraphVisualization component.
|
|
259
259
|
*
|
|
260
260
|
* @remarks
|
|
261
261
|
* Enables box selection mode where dragging creates a rectangular selection area.
|
|
@@ -264,9 +264,9 @@ GraphViz.DownloadButton = graph_viz_buttons_1.DownloadButton;
|
|
|
264
264
|
*
|
|
265
265
|
* @alpha
|
|
266
266
|
*/
|
|
267
|
-
|
|
267
|
+
GraphVisualization.BoxSelectButton = graph_visualization_buttons_1.BoxSelectButton;
|
|
268
268
|
/**
|
|
269
|
-
* Lasso selection button for use within a
|
|
269
|
+
* Lasso selection button for use within a GraphVisualization component.
|
|
270
270
|
*
|
|
271
271
|
* @remarks
|
|
272
272
|
* Enables lasso selection mode where dragging creates a free-form selection area.
|
|
@@ -275,9 +275,9 @@ GraphViz.BoxSelectButton = graph_viz_buttons_1.BoxSelectButton;
|
|
|
275
275
|
*
|
|
276
276
|
* @alpha
|
|
277
277
|
*/
|
|
278
|
-
|
|
278
|
+
GraphVisualization.LassoSelectButton = graph_visualization_buttons_1.LassoSelectButton;
|
|
279
279
|
/**
|
|
280
|
-
* Single node selection button for use within a
|
|
280
|
+
* Single node selection button for use within a GraphVisualization component.
|
|
281
281
|
*
|
|
282
282
|
* @remarks
|
|
283
283
|
* Enables single selection mode where clicking selects individual nodes or relationships.
|
|
@@ -285,5 +285,5 @@ GraphViz.LassoSelectButton = graph_viz_buttons_1.LassoSelectButton;
|
|
|
285
285
|
*
|
|
286
286
|
* @alpha
|
|
287
287
|
*/
|
|
288
|
-
|
|
289
|
-
//# sourceMappingURL=graph-
|
|
288
|
+
GraphVisualization.SingleSelectButton = graph_visualization_buttons_1.SingleSelectButton;
|
|
289
|
+
//# sourceMappingURL=graph-visualization.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"graph-visualization.js","sourceRoot":"","sources":["../../../src/graph-visualization/graph-visualization.tsx"],"names":[],"mappings":"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"}
|
|
@@ -30,15 +30,25 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
|
|
|
30
30
|
if (k2 === undefined) k2 = k;
|
|
31
31
|
o[k2] = m[k];
|
|
32
32
|
}));
|
|
33
|
-
var
|
|
34
|
-
|
|
33
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
34
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
35
|
+
}) : function(o, v) {
|
|
36
|
+
o["default"] = v;
|
|
37
|
+
});
|
|
38
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
39
|
+
if (mod && mod.__esModule) return mod;
|
|
40
|
+
var result = {};
|
|
41
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
42
|
+
__setModuleDefault(result, mod);
|
|
43
|
+
return result;
|
|
35
44
|
};
|
|
36
45
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
-
exports.
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
46
|
+
exports.useGraphVisualizationContext = exports.GraphVisualization = exports.NVLReact = exports.NVLInteractionHandlers = exports.NVLBase = void 0;
|
|
47
|
+
exports.NVLBase = __importStar(require("@neo4j-nvl/base"));
|
|
48
|
+
exports.NVLInteractionHandlers = __importStar(require("@neo4j-nvl/interaction-handlers"));
|
|
49
|
+
exports.NVLReact = __importStar(require("@neo4j-nvl/react"));
|
|
50
|
+
var graph_visualization_1 = require("./graph-visualization");
|
|
51
|
+
Object.defineProperty(exports, "GraphVisualization", { enumerable: true, get: function () { return graph_visualization_1.GraphVisualization; } });
|
|
52
|
+
var graph_visualization_context_1 = require("./graph-visualization-context");
|
|
53
|
+
Object.defineProperty(exports, "useGraphVisualizationContext", { enumerable: true, get: function () { return graph_visualization_context_1.useGraphVisualizationContext; } });
|
|
44
54
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/graph-visualization/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/graph-visualization/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,2DAA2C;AAC3C,0FAA0E;AAC1E,6DAA6C;AAE7C,6DAA2D;AAAlD,yHAAA,kBAAkB,OAAA;AAC3B,6EAeuC;AAdrC,2IAAA,4BAA4B,OAAA"}
|
|
@@ -22,29 +22,28 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
22
22
|
* You should have received a copy of the GNU General Public License
|
|
23
23
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
24
24
|
*/
|
|
25
|
-
const
|
|
26
|
-
const
|
|
27
|
-
const
|
|
28
|
-
const
|
|
29
|
-
const graph_viz_sidepanel_1 = require("../graph-viz-sidepanel");
|
|
25
|
+
const react_1 = require("@neo4j-ndl/react");
|
|
26
|
+
const react_2 = require("react");
|
|
27
|
+
const graph_visualization_context_1 = require("../graph-visualization-context");
|
|
28
|
+
const graph_visualization_sidepanel_1 = require("../graph-visualization-sidepanel");
|
|
30
29
|
const properties_table_1 = require("./properties-table");
|
|
31
30
|
const DetailsPanel = ({ paneWidth = 400 }) => {
|
|
32
|
-
const { selected, nvlGraph } = (0,
|
|
33
|
-
const nodeData = (0,
|
|
31
|
+
const { selected, nvlGraph } = (0, graph_visualization_context_1.useGraphVisualizationContext)();
|
|
32
|
+
const nodeData = (0, react_2.useMemo)(() => {
|
|
34
33
|
const [nodeId] = selected.nodeIds;
|
|
35
34
|
if (nodeId !== undefined) {
|
|
36
35
|
return nvlGraph.dataLookupTable.nodes[nodeId];
|
|
37
36
|
}
|
|
38
37
|
return undefined;
|
|
39
38
|
}, [selected, nvlGraph]);
|
|
40
|
-
const relData = (0,
|
|
39
|
+
const relData = (0, react_2.useMemo)(() => {
|
|
41
40
|
const [relId] = selected.relationshipIds;
|
|
42
41
|
if (relId !== undefined) {
|
|
43
42
|
return nvlGraph.dataLookupTable.relationships[relId];
|
|
44
43
|
}
|
|
45
44
|
return undefined;
|
|
46
45
|
}, [selected, nvlGraph]);
|
|
47
|
-
const selectedItem = (0,
|
|
46
|
+
const selectedItem = (0, react_2.useMemo)(() => {
|
|
48
47
|
if (nodeData) {
|
|
49
48
|
return { data: nodeData, dataType: 'node' };
|
|
50
49
|
}
|
|
@@ -70,16 +69,16 @@ const DetailsPanel = ({ paneWidth = 400 }) => {
|
|
|
70
69
|
};
|
|
71
70
|
}),
|
|
72
71
|
];
|
|
73
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(
|
|
72
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(graph_visualization_sidepanel_1.GraphVisualizationSidepanel.Title, { children: [(0, jsx_runtime_1.jsx)("h6", { className: "ndl-details-title", children: selectedItem.dataType === 'node'
|
|
74
73
|
? 'Node details'
|
|
75
|
-
: 'Relationship details' }), (0, jsx_runtime_1.jsx)(
|
|
74
|
+
: 'Relationship details' }), (0, jsx_runtime_1.jsx)(react_1.ClipboardButton, { textToCopy: properties
|
|
76
75
|
.map((prop) => `${prop.key}: ${prop.value}`)
|
|
77
|
-
.join('\n'), size: "small" })] }), (0, jsx_runtime_1.jsxs)(
|
|
76
|
+
.join('\n'), size: "small" })] }), (0, jsx_runtime_1.jsxs)(graph_visualization_sidepanel_1.GraphVisualizationSidepanel.Content, { children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-details-tags", children: selectedItem.dataType === 'node' ? (selectedItem.data.labelsSorted.map((label) => {
|
|
78
77
|
var _a, _b;
|
|
79
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
78
|
+
return ((0, jsx_runtime_1.jsx)(react_1.GraphLabel, { type: "node", color: (_b = (_a = nvlGraph.dataLookupTable.labelMetaData[label]) === null || _a === void 0 ? void 0 : _a.mostCommonColor) !== null && _b !== void 0 ? _b : '', as: "span", htmlAttributes: {
|
|
80
79
|
tabIndex: 0,
|
|
81
80
|
}, children: label }, label));
|
|
82
|
-
})) : ((0, jsx_runtime_1.jsx)(
|
|
81
|
+
})) : ((0, jsx_runtime_1.jsx)(react_1.GraphLabel, { type: "relationship", color: selectedItem.data.color, as: "span", htmlAttributes: {
|
|
83
82
|
tabIndex: 0,
|
|
84
83
|
}, children: selectedItem.data.type }, selectedItem.data.type)) }), (0, jsx_runtime_1.jsx)("div", { className: "ndl-details-divider" }), (0, jsx_runtime_1.jsx)(properties_table_1.PropertiesTable, { properties: selectedItem.data.properties, paneWidth: paneWidth })] })] }));
|
|
85
84
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"details-panel.js","sourceRoot":"","sources":["../../../../src/graph-visualization/sidepanel-components/details-panel.tsx"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,
|
|
1
|
+
{"version":3,"file":"details-panel.js","sourceRoot":"","sources":["../../../../src/graph-visualization/sidepanel-components/details-panel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -23,13 +23,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
23
23
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
24
24
|
*/
|
|
25
25
|
const react_1 = require("@neo4j-ndl/react");
|
|
26
|
-
const
|
|
27
|
-
const
|
|
26
|
+
const graph_visualization_context_1 = require("../graph-visualization-context");
|
|
27
|
+
const graph_visualization_sidepanel_1 = require("../graph-visualization-sidepanel");
|
|
28
28
|
const show_all_1 = require("./show-all");
|
|
29
29
|
const OVERVIEW_STEP_SIZE = 25;
|
|
30
30
|
const OverviewPanel = () => {
|
|
31
|
-
const { nvlGraph } = (0,
|
|
32
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(
|
|
31
|
+
const { nvlGraph } = (0, graph_visualization_context_1.useGraphVisualizationContext)();
|
|
32
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(graph_visualization_sidepanel_1.GraphVisualizationSidepanel.Title, { children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "h6", children: "Results overview" }) }), (0, jsx_runtime_1.jsx)(graph_visualization_sidepanel_1.GraphVisualizationSidepanel.Content, { children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-graph-visualization-overview-panel", children: [nvlGraph.dataLookupTable.labels.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-overview-section", children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-overview-header", children: (0, jsx_runtime_1.jsxs)("span", { children: ["Nodes", ` (${nvlGraph.nodes.length.toLocaleString()})`] }) }), (0, jsx_runtime_1.jsx)("div", { className: "ndl-overview-items", tabIndex: 0, children: (0, jsx_runtime_1.jsx)(show_all_1.ShowAll, { initiallyShown: OVERVIEW_STEP_SIZE, isButtonGroup: true, children: nvlGraph.dataLookupTable.labels.map((label) => function GraphLabelWrapper() {
|
|
33
33
|
var _a, _b, _c, _d;
|
|
34
34
|
return ((0, jsx_runtime_1.jsxs)(react_1.GraphLabel, { type: "node", htmlAttributes: {
|
|
35
35
|
tabIndex: -1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overview-panel.js","sourceRoot":"","sources":["../../../../src/graph-visualization/sidepanel-components/overview-panel.tsx"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,4CAA0D;AAE1D,
|
|
1
|
+
{"version":3,"file":"overview-panel.js","sourceRoot":"","sources":["../../../../src/graph-visualization/sidepanel-components/overview-panel.tsx"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,4CAA0D;AAE1D,gFAA8E;AAC9E,oFAA+E;AAC/E,yCAAqC;AAErC,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAEvB,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,0DAA4B,GAAE,CAAC;IAEpD,OAAO,CACL,6DACE,uBAAC,2DAA2B,CAAC,KAAK,cAChC,uBAAC,kBAAU,IAAC,OAAO,EAAC,IAAI,iCAA8B,GACpB,EACpC,uBAAC,2DAA2B,CAAC,OAAO,cAClC,iCAAK,SAAS,EAAC,wCAAwC,aACpD,QAAQ,CAAC,eAAe,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CAC7C,iCAAK,SAAS,EAAC,sBAAsB,aACnC,gCAAK,SAAS,EAAC,qBAAqB,YAClC,sDACQ,KAAK,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,EAAE,GAAG,IAC/C,GACH,EAEN,gCAAK,SAAS,EAAC,oBAAoB,EAAC,QAAQ,EAAE,CAAC,YAC7C,uBAAC,kBAAO,IAAC,cAAc,EAAE,kBAAkB,EAAE,aAAa,kBACvD,QAAQ,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,CAClC,CAAC,KAAK,EAAE,EAAE,CACR,SAAS,iBAAiB;;4CACxB,OAAO,CACL,wBAAC,kBAAU,IACT,IAAI,EAAC,MAAM,EAEX,cAAc,EAAE;oDACd,QAAQ,EAAE,CAAC,CAAC;iDACb,EACD,KAAK,EACH,MAAA,MAAA,QAAQ,CAAC,eAAe,CAAC,aAAa,CAAC,KAAK,CAAC,0CACzC,eAAe,mCAAI,EAAE,EAE3B,EAAE,EAAC,MAAM,aAER,KAAK,QACL,MAAA,MAAA,QAAQ,CAAC,eAAe,CAAC,aAAa,CAAC,KAAK,CAAC,0CAC1C,UAAU,mCAAI,CAAC,UAZd,KAAK,CAcC,CACd,CAAC;wCACJ,CAAC,CACJ,GACO,GACN,IACF,CACP,EAEA,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAC5C,iCAAK,SAAS,EAAC,oCAAoC,aACjD,kCAAM,SAAS,EAAC,kCAAkC,8BAClC,KAAK,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,cAAc,EAAE,GAAG,IACtD,EACP,gCAAK,SAAS,EAAC,oBAAoB,YACjC,uBAAC,kBAAO,IAAC,cAAc,EAAE,kBAAkB,EAAE,aAAa,kBACvD,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;;4CAAC,OAAA,CAC5C,wBAAC,kBAAU,IACT,IAAI,EAAC,cAAc,EAEnB,cAAc,EAAE;oDACd,QAAQ,EAAE,CAAC,CAAC;iDACb,EACD,KAAK,EACH,MAAA,MAAA,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,0CACvC,eAAe,mCAAI,EAAE,EAE3B,EAAE,EAAC,MAAM,aAER,IAAI,QACJ,MAAA,MAAA,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,0CACxC,UAAU,mCAAI,CAAC,UAZd,IAAI,CAcE,CACd,CAAA;yCAAA,CAAC,GACM,GACN,IACF,CACP,IACG,GAC8B,IACrC,CACJ,CAAC;AACJ,CAAC,CAAC;AAnFW,QAAA,aAAa,iBAmFxB"}
|
|
@@ -41,7 +41,7 @@ const ExpandableValue = ({ value, width, type }) => {
|
|
|
41
41
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [type.startsWith('Array') && '[', (0, jsx_runtime_1.jsx)(clickable_urls_1.ClickableUrls, { text: valueShown }), isValueTrimmed && ((0, jsx_runtime_1.jsx)("button", { onClick: handleExpandClick, className: "ndl-properties-show-all-button", children: ' Show all' })), type.startsWith('Array') && ']'] }));
|
|
42
42
|
};
|
|
43
43
|
const PropertiesTable = ({ properties, paneWidth, }) => {
|
|
44
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-graph-
|
|
44
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-graph-visualization-properties-table", children: [(0, jsx_runtime_1.jsxs)("div", { className: "ndl-properties-header", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", className: "ndl-properties-header-key", children: "Key" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", children: "Value" })] }), Object.entries(properties).map(([key, { stringified, type }]) => {
|
|
45
45
|
return ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-properties-row", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", className: "ndl-properties-key", children: key }), (0, jsx_runtime_1.jsx)("div", { className: "ndl-properties-value", children: (0, jsx_runtime_1.jsx)(ExpandableValue, { value: stringified, width: paneWidth, type: type }) }), (0, jsx_runtime_1.jsx)("div", { className: "ndl-properties-clipboard-button", children: (0, jsx_runtime_1.jsx)(react_1.ClipboardButton, { textToCopy: `${key}: ${stringified}`, size: "small", tooltipProps: { placement: 'left', type: 'simple' } }) })] }, key));
|
|
46
46
|
})] }));
|
|
47
47
|
};
|