@neo4j-ndl/react 3.8.9 → 3.8.11
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/cjs/spotlight/Spotlight.js +56 -26
- package/lib/cjs/spotlight/Spotlight.js.map +1 -1
- package/lib/cjs/spotlight/SpotlightProvider.js +21 -18
- package/lib/cjs/spotlight/SpotlightProvider.js.map +1 -1
- package/lib/cjs/spotlight/SpotlightTarget.js +16 -10
- package/lib/cjs/spotlight/SpotlightTarget.js.map +1 -1
- package/lib/cjs/spotlight/use-indicator.js +3 -10
- package/lib/cjs/spotlight/use-indicator.js.map +1 -1
- package/lib/cjs/spotlight/use-spotlight.js +89 -0
- package/lib/cjs/spotlight/use-spotlight.js.map +1 -0
- 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/esm/spotlight/Spotlight.js +48 -18
- package/lib/esm/spotlight/Spotlight.js.map +1 -1
- package/lib/esm/spotlight/SpotlightProvider.js +12 -9
- package/lib/esm/spotlight/SpotlightProvider.js.map +1 -1
- package/lib/esm/spotlight/SpotlightTarget.js +16 -10
- package/lib/esm/spotlight/SpotlightTarget.js.map +1 -1
- package/lib/esm/spotlight/use-indicator.js +3 -10
- package/lib/esm/spotlight/use-indicator.js.map +1 -1
- package/lib/esm/spotlight/use-spotlight.js +86 -0
- package/lib/esm/spotlight/use-spotlight.js.map +1 -0
- 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/lib/types/spotlight/SpotlightProvider.d.ts +2 -0
- package/lib/types/spotlight/SpotlightTarget.d.ts +2 -0
- package/lib/types/spotlight/use-indicator.d.ts +1 -1
- package/lib/types/spotlight/use-spotlight.d.ts +41 -0
- 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
|
@@ -54,9 +54,9 @@ const react_2 = __importStar(require("react"));
|
|
|
54
54
|
const conditional_wrap_1 = require("../conditional-wrap");
|
|
55
55
|
const SpotlightProvider_1 = require("./SpotlightProvider");
|
|
56
56
|
const use_indicator_1 = require("./use-indicator");
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
const { isActiveSpotlight, isOpen, setIsOpen, registerTarget, unregisterTarget, } = (0, SpotlightProvider_1.useSpotlightContext)();
|
|
57
|
+
exports.SpotlightTarget = react_2.default.forwardRef(function SpotlightTarget({ id, hasPulse = true, indicatorVariant = 'border', indicatorPlacement = 'top-right', backgroundColor, borderRadius, children, className, htmlAttributes, as, shouldFitToChildren = false, }, ref) {
|
|
58
|
+
const Component = as !== null && as !== void 0 ? as : 'div';
|
|
59
|
+
const { isActiveSpotlight, isOpen, setIsOpen, registerTarget, unregisterTarget, setActiveSpotlight, } = (0, SpotlightProvider_1.useSpotlightContext)();
|
|
60
60
|
const internalRef = react_2.default.useRef(null);
|
|
61
61
|
const mergedRefs = (0, react_1.useMergeRefs)([ref, internalRef]);
|
|
62
62
|
(0, react_2.useEffect)(() => {
|
|
@@ -66,7 +66,6 @@ exports.SpotlightTarget = react_2.default.forwardRef(function SpotlightTarget({
|
|
|
66
66
|
}, [id, registerTarget, unregisterTarget]);
|
|
67
67
|
const isActive = isActiveSpotlight(id);
|
|
68
68
|
const indicator = (0, use_indicator_1.useIndicator)({
|
|
69
|
-
hasAnchorPortal,
|
|
70
69
|
hasPulse,
|
|
71
70
|
indicatorPlacement,
|
|
72
71
|
indicatorVariant,
|
|
@@ -74,9 +73,13 @@ exports.SpotlightTarget = react_2.default.forwardRef(function SpotlightTarget({
|
|
|
74
73
|
targetRef: internalRef,
|
|
75
74
|
});
|
|
76
75
|
const classes = (0, classnames_1.default)('ndl-spotlight-target', {
|
|
76
|
+
'ndl-spotlight-target-fit-to-children': shouldFitToChildren,
|
|
77
77
|
'ndl-spotlight-target-open': isOpen && isActive,
|
|
78
78
|
}, className);
|
|
79
|
-
|
|
79
|
+
const inertClasses = (0, classnames_1.default)('ndl-spotlight-target-inert', {
|
|
80
|
+
'ndl-spotlight-target-inert-fit-to-children': shouldFitToChildren,
|
|
81
|
+
}, className);
|
|
82
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Component, Object.assign({ role: isActive ? 'button' : undefined, id: id, ref: mergedRefs, className: classes, onClick: (e) => {
|
|
80
83
|
if (isActive && !isOpen) {
|
|
81
84
|
setIsOpen(true);
|
|
82
85
|
e.preventDefault();
|
|
@@ -88,12 +91,15 @@ exports.SpotlightTarget = react_2.default.forwardRef(function SpotlightTarget({
|
|
|
88
91
|
setIsOpen(true);
|
|
89
92
|
e.preventDefault();
|
|
90
93
|
}
|
|
94
|
+
else if (e.code === 'Escape' && isActive) {
|
|
95
|
+
setActiveSpotlight(null);
|
|
96
|
+
}
|
|
91
97
|
}, tabIndex: isActive ? 0 : -1, "aria-label": "spotlight target" }, htmlAttributes, { children: (0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: isActive,
|
|
92
98
|
// TODO v4: inert should be fixed in react 19? https://github.com/facebook/react/pull/24730#event-12109747640. inert="" is a workaround for now
|
|
93
|
-
wrap: (children) => (
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
99
|
+
wrap: (children) => ((0, jsx_runtime_1.jsx)("div", {
|
|
100
|
+
/* @ts-expect-error inert not allowed */
|
|
101
|
+
inert: "", "aria-disabled": true, className: inertClasses, children: children })), children: children }) })), (0, jsx_runtime_1.jsxs)(react_1.FloatingPortal, { root: indicator.context.refs.reference.current, children: [isActive && isOpen && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(classes, 'ndl-spotlight-target-overlay'),
|
|
102
|
+
// @ts-expect-error inert not allowed
|
|
103
|
+
inert: "", children: children })), indicator.context.open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: indicator.indicatorClasses, ref: indicator.context.refs.setFloating, style: Object.assign(Object.assign({}, indicator.floatingStyles), indicator.style) }, indicator.getFloatingProps())) }))] })] }));
|
|
98
104
|
});
|
|
99
105
|
//# sourceMappingURL=SpotlightTarget.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpotlightTarget.js","sourceRoot":"","sources":["../../../src/spotlight/SpotlightTarget.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,8CAAkE;AAClE,4DAAoC;AACpC,+CAAyC;AAOzC,0DAAsD;AACtD,2DAA0D;AAC1D,mDAIyB;
|
|
1
|
+
{"version":3,"file":"SpotlightTarget.js","sourceRoot":"","sources":["../../../src/spotlight/SpotlightTarget.tsx"],"names":[],"mappings":"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"}
|
|
@@ -64,7 +64,7 @@ const calcOffset = (variant, placement, rects) => {
|
|
|
64
64
|
mainAxis,
|
|
65
65
|
};
|
|
66
66
|
};
|
|
67
|
-
function useIndicator({ isOpen, indicatorVariant = 'border', indicatorPlacement = 'top-right', targetRef, hasPulse = true,
|
|
67
|
+
function useIndicator({ isOpen, indicatorVariant = 'border', indicatorPlacement = 'top-right', targetRef, hasPulse = true, }) {
|
|
68
68
|
const data = (0, react_1.useFloating)({
|
|
69
69
|
elements: {
|
|
70
70
|
reference: targetRef === null || targetRef === void 0 ? void 0 : targetRef.current,
|
|
@@ -81,7 +81,7 @@ function useIndicator({ isOpen, indicatorVariant = 'border', indicatorPlacement
|
|
|
81
81
|
const interactions = (0, react_1.useInteractions)([role]);
|
|
82
82
|
return (0, react_2.useMemo)(() => {
|
|
83
83
|
var _a, _b, _c, _d, _e, _f;
|
|
84
|
-
return (Object.assign(Object.assign(Object.assign({}, interactions), data), {
|
|
84
|
+
return (Object.assign(Object.assign(Object.assign({}, interactions), data), { indicatorClasses: (0, classnames_1.default)('ndl-spotlight-target-indicator', {
|
|
85
85
|
'ndl-spotlight-target-indicator-border': indicatorVariant === 'border',
|
|
86
86
|
'ndl-spotlight-target-indicator-point': indicatorVariant === 'point',
|
|
87
87
|
'ndl-spotlight-target-pulse': hasPulse,
|
|
@@ -96,13 +96,6 @@ function useIndicator({ isOpen, indicatorVariant = 'border', indicatorPlacement
|
|
|
96
96
|
? `${(_f = (_e = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _e === void 0 ? void 0 : _e.clientWidth) !== null && _f !== void 0 ? _f : 0}px`
|
|
97
97
|
: '8px',
|
|
98
98
|
} }));
|
|
99
|
-
}, [
|
|
100
|
-
interactions,
|
|
101
|
-
data,
|
|
102
|
-
indicatorVariant,
|
|
103
|
-
targetRef,
|
|
104
|
-
hasPulse,
|
|
105
|
-
hasAnchorPortal,
|
|
106
|
-
]);
|
|
99
|
+
}, [interactions, data, indicatorVariant, targetRef, hasPulse]);
|
|
107
100
|
}
|
|
108
101
|
//# sourceMappingURL=use-indicator.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-indicator.js","sourceRoot":"","sources":["../../../src/spotlight/use-indicator.tsx"],"names":[],"mappings":";;;;;AA2GA,
|
|
1
|
+
{"version":3,"file":"use-indicator.js","sourceRoot":"","sources":["../../../src/spotlight/use-indicator.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useSpotlight = useSpotlight;
|
|
4
|
+
/**
|
|
5
|
+
*
|
|
6
|
+
* Copyright (c) "Neo4j"
|
|
7
|
+
* Neo4j Sweden AB [http://neo4j.com]
|
|
8
|
+
*
|
|
9
|
+
* This file is part of Neo4j.
|
|
10
|
+
*
|
|
11
|
+
* Neo4j is free software: you can redistribute it and/or modify
|
|
12
|
+
* it under the terms of the GNU General Public License as published by
|
|
13
|
+
* the Free Software Foundation, either version 3 of the License, or
|
|
14
|
+
* (at your option) any later version.
|
|
15
|
+
*
|
|
16
|
+
* This program is distributed in the hope that it will be useful,
|
|
17
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
18
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
19
|
+
* GNU General Public License for more details.
|
|
20
|
+
*
|
|
21
|
+
* You should have received a copy of the GNU General Public License
|
|
22
|
+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
23
|
+
*/
|
|
24
|
+
const react_1 = require("@floating-ui/react");
|
|
25
|
+
const base_1 = require("@neo4j-ndl/base");
|
|
26
|
+
const react_2 = require("react");
|
|
27
|
+
function useSpotlight({ isInitialOpen = false, placement = 'bottom', isOpen: controlledOpen, onOpenChange: setControlledOpen, anchorElement, anchorElementAsPortalAnchor, initialFocus, closeOnClickOutside, strategy = 'absolute', } = {}) {
|
|
28
|
+
var _a;
|
|
29
|
+
const [isOpenUncontrolled, setIsOpenUncontrolled] = (0, react_2.useState)(isInitialOpen);
|
|
30
|
+
const [labelId, setLabelId] = (0, react_2.useState)();
|
|
31
|
+
const [descriptionId, setDescriptionId] = (0, react_2.useState)();
|
|
32
|
+
const isOpen = controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : isOpenUncontrolled;
|
|
33
|
+
const setIsOpen = setControlledOpen !== null && setControlledOpen !== void 0 ? setControlledOpen : setIsOpenUncontrolled;
|
|
34
|
+
const data = (0, react_1.useFloating)({
|
|
35
|
+
elements: {
|
|
36
|
+
reference: anchorElement,
|
|
37
|
+
},
|
|
38
|
+
middleware: [
|
|
39
|
+
(0, react_1.offset)(10),
|
|
40
|
+
(0, react_1.flip)({
|
|
41
|
+
crossAxis: placement.includes('-'),
|
|
42
|
+
fallbackAxisSideDirection: 'end',
|
|
43
|
+
padding: 5,
|
|
44
|
+
}),
|
|
45
|
+
(0, react_1.shift)({ padding: 5 }),
|
|
46
|
+
],
|
|
47
|
+
onOpenChange: (open, event) => {
|
|
48
|
+
setIsOpen(open);
|
|
49
|
+
setControlledOpen === null || setControlledOpen === void 0 ? void 0 : setControlledOpen(open, event);
|
|
50
|
+
},
|
|
51
|
+
open: isOpen,
|
|
52
|
+
placement: placement,
|
|
53
|
+
strategy,
|
|
54
|
+
whileElementsMounted: react_1.autoUpdate,
|
|
55
|
+
});
|
|
56
|
+
const context = data.context;
|
|
57
|
+
const click = (0, react_1.useClick)(context, {
|
|
58
|
+
enabled: controlledOpen === undefined,
|
|
59
|
+
});
|
|
60
|
+
const dismiss = (0, react_1.useDismiss)(context, {
|
|
61
|
+
outsidePress: closeOnClickOutside,
|
|
62
|
+
});
|
|
63
|
+
const role = (0, react_1.useRole)(context, {
|
|
64
|
+
role: 'dialog',
|
|
65
|
+
});
|
|
66
|
+
const interactions = (0, react_1.useInteractions)([click, dismiss, role]);
|
|
67
|
+
const { styles: transitionStyles } = (0, react_1.useTransitionStyles)(context, {
|
|
68
|
+
duration: (_a = Number.parseInt(base_1.tokens.transitions.values.duration.quick, 10)) !== null && _a !== void 0 ? _a : 0,
|
|
69
|
+
});
|
|
70
|
+
return (0, react_2.useMemo)(() => (Object.assign(Object.assign(Object.assign({ isOpen,
|
|
71
|
+
setIsOpen }, interactions), data), { transitionStyles,
|
|
72
|
+
labelId,
|
|
73
|
+
descriptionId,
|
|
74
|
+
setLabelId,
|
|
75
|
+
setDescriptionId,
|
|
76
|
+
anchorElementAsPortalAnchor,
|
|
77
|
+
initialFocus })), [
|
|
78
|
+
isOpen,
|
|
79
|
+
setIsOpen,
|
|
80
|
+
interactions,
|
|
81
|
+
data,
|
|
82
|
+
transitionStyles,
|
|
83
|
+
labelId,
|
|
84
|
+
descriptionId,
|
|
85
|
+
anchorElementAsPortalAnchor,
|
|
86
|
+
initialFocus,
|
|
87
|
+
]);
|
|
88
|
+
}
|
|
89
|
+
//# sourceMappingURL=use-spotlight.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-spotlight.js","sourceRoot":"","sources":["../../../src/spotlight/use-spotlight.tsx"],"names":[],"mappings":"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"}
|
|
@@ -23,7 +23,7 @@ import { IconButton, Menu, Tooltip, Typography, } from '@neo4j-ndl/react';
|
|
|
23
23
|
import { ArrowDownTrayIconOutline, BoxSelectIcon, FitToScreenIcon, LassoIcon, MagnifyingGlassMinusIconOutline, MagnifyingGlassPlusIconOutline, SelectIcon, SidebarLineRightIcon, } from '@neo4j-ndl/react/icons';
|
|
24
24
|
import { default as cx } from 'classnames';
|
|
25
25
|
import { useCallback, useEffect, useRef, useState, } from 'react';
|
|
26
|
-
import {
|
|
26
|
+
import { useGraphVisualizationContext, } from './graph-visualization-context';
|
|
27
27
|
export const GroupButton = (props) => {
|
|
28
28
|
const { isActive, ariaLabel, isDisabled, tipContent, onClick, onMouseDown, tooltipPlacement, className, style, htmlAttributes, children, } = props;
|
|
29
29
|
return (_jsxs(Tooltip, { type: "simple", placement: tooltipPlacement, children: [_jsx(Tooltip.Trigger, { hasButtonWrapper: true, children: _jsx(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 }) }), _jsx(Tooltip.Content, { children: tipContent })] }));
|
|
@@ -43,7 +43,7 @@ const GESTURE_KEYS = {
|
|
|
43
43
|
single: 'S',
|
|
44
44
|
};
|
|
45
45
|
const useRegisterKeyboardGestureSwitcher = (gesture) => {
|
|
46
|
-
const { setGesture } =
|
|
46
|
+
const { setGesture } = useGraphVisualizationContext();
|
|
47
47
|
const handleKeyDown = useCallback((evt) => {
|
|
48
48
|
if (!isEditingText(evt) && setGesture !== undefined) {
|
|
49
49
|
const upperKey = evt.key.toUpperCase();
|
|
@@ -61,28 +61,28 @@ const useRegisterKeyboardGestureSwitcher = (gesture) => {
|
|
|
61
61
|
};
|
|
62
62
|
const NON_BREAKING_SPACE = '\u00A0';
|
|
63
63
|
export const SingleSelectButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
|
|
64
|
-
const { gesture, setGesture, interactionMode } =
|
|
64
|
+
const { gesture, setGesture, interactionMode } = useGraphVisualizationContext();
|
|
65
65
|
useRegisterKeyboardGestureSwitcher('single');
|
|
66
66
|
return (_jsx(GroupButton, { isActive: gesture === 'single', isDisabled: interactionMode !== 'select', ariaLabel: "Individual Select Button", tipContent: `Individual Select ${NON_BREAKING_SPACE} ${GESTURE_KEYS.single}`, onClick: () => {
|
|
67
67
|
setGesture === null || setGesture === void 0 ? void 0 : setGesture('single');
|
|
68
68
|
}, tooltipPlacement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'right', htmlAttributes: Object.assign({ 'data-testid': 'gesture-individual-select' }, htmlAttributes), className: className, style: style, children: _jsx(SelectIcon, { "aria-label": "Individual Select" }) }));
|
|
69
69
|
};
|
|
70
70
|
export const BoxSelectButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
|
|
71
|
-
const { gesture, setGesture, interactionMode } =
|
|
71
|
+
const { gesture, setGesture, interactionMode } = useGraphVisualizationContext();
|
|
72
72
|
useRegisterKeyboardGestureSwitcher('box');
|
|
73
73
|
return (_jsx(GroupButton, { isDisabled: interactionMode !== 'select' || setGesture === undefined, isActive: gesture === 'box', ariaLabel: "Box Select Button", tipContent: `Box Select ${NON_BREAKING_SPACE} ${GESTURE_KEYS.box}`, onClick: () => {
|
|
74
74
|
setGesture === null || setGesture === void 0 ? void 0 : setGesture('box');
|
|
75
75
|
}, tooltipPlacement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'right', htmlAttributes: Object.assign({ 'data-testid': 'gesture-box-select' }, htmlAttributes), className: className, style: style, children: _jsx(BoxSelectIcon, { "aria-label": "Box Select" }) }));
|
|
76
76
|
};
|
|
77
77
|
export const LassoSelectButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
|
|
78
|
-
const { gesture, setGesture, interactionMode } =
|
|
78
|
+
const { gesture, setGesture, interactionMode } = useGraphVisualizationContext();
|
|
79
79
|
useRegisterKeyboardGestureSwitcher('lasso');
|
|
80
80
|
return (_jsx(GroupButton, { isDisabled: interactionMode !== 'select' || setGesture === undefined, isActive: gesture === 'lasso', ariaLabel: "Lasso Select Button", tipContent: `Lasso Select ${NON_BREAKING_SPACE} ${GESTURE_KEYS.lasso}`, onClick: () => {
|
|
81
81
|
setGesture === null || setGesture === void 0 ? void 0 : setGesture('lasso');
|
|
82
82
|
}, tooltipPlacement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'right', htmlAttributes: Object.assign({ 'data-testid': 'gesture-lasso-select' }, htmlAttributes), className: className, style: style, children: _jsx(LassoIcon, { "aria-label": "Lasso Select" }) }));
|
|
83
83
|
};
|
|
84
84
|
export const ZoomInButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
|
|
85
|
-
const { nvlInstance } =
|
|
85
|
+
const { nvlInstance } = useGraphVisualizationContext();
|
|
86
86
|
const handleZoomIn = useCallback(() => {
|
|
87
87
|
var _a, _b;
|
|
88
88
|
(_a = nvlInstance.current) === null || _a === void 0 ? void 0 : _a.setZoom(((_b = nvlInstance.current) === null || _b === void 0 ? void 0 : _b.getScale()) * 1.3);
|
|
@@ -90,7 +90,7 @@ export const ZoomInButton = ({ className, style, htmlAttributes, tooltipPlacemen
|
|
|
90
90
|
return (_jsx(GroupButton, { onClick: handleZoomIn, tipContent: "Zoom in", className: className, style: style, htmlAttributes: htmlAttributes, tooltipPlacement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'left', children: _jsx(MagnifyingGlassPlusIconOutline, {}) }));
|
|
91
91
|
};
|
|
92
92
|
export const ZoomOutButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
|
|
93
|
-
const { nvlInstance } =
|
|
93
|
+
const { nvlInstance } = useGraphVisualizationContext();
|
|
94
94
|
const handleZoomOut = useCallback(() => {
|
|
95
95
|
var _a, _b;
|
|
96
96
|
(_a = nvlInstance.current) === null || _a === void 0 ? void 0 : _a.setZoom(((_b = nvlInstance.current) === null || _b === void 0 ? void 0 : _b.getScale()) * 0.7);
|
|
@@ -98,7 +98,7 @@ export const ZoomOutButton = ({ className, style, htmlAttributes, tooltipPlaceme
|
|
|
98
98
|
return (_jsx(GroupButton, { onClick: handleZoomOut, tipContent: "Zoom out", className: className, style: style, htmlAttributes: htmlAttributes, tooltipPlacement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'left', children: _jsx(MagnifyingGlassMinusIconOutline, {}) }));
|
|
99
99
|
};
|
|
100
100
|
export const ZoomToFitButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
|
|
101
|
-
const { nvlInstance } =
|
|
101
|
+
const { nvlInstance } = useGraphVisualizationContext();
|
|
102
102
|
const handleZoomToFit = useCallback(() => {
|
|
103
103
|
var _a, _b;
|
|
104
104
|
(_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));
|
|
@@ -106,15 +106,15 @@ export const ZoomToFitButton = ({ className, style, htmlAttributes, tooltipPlace
|
|
|
106
106
|
return (_jsx(GroupButton, { onClick: handleZoomToFit, tipContent: "Zoom to fit", className: className, style: style, htmlAttributes: htmlAttributes, tooltipPlacement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'left', children: _jsx(FitToScreenIcon, {}) }));
|
|
107
107
|
};
|
|
108
108
|
export const ToggleSidePanelButton = ({ className, htmlAttributes, style, tooltipPlacement, }) => {
|
|
109
|
-
const { sidepanel } =
|
|
109
|
+
const { sidepanel } = useGraphVisualizationContext();
|
|
110
110
|
if (!sidepanel) {
|
|
111
111
|
throw new Error('Using the ToggleSidePanelButton requires having a sidepanel');
|
|
112
112
|
}
|
|
113
113
|
const { isSidePanelOpen, setIsSidePanelOpen } = sidepanel;
|
|
114
|
-
return (_jsxs(Tooltip, { placement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'bottom', type: "simple", children: [_jsx(Tooltip.Trigger, { hasButtonWrapper: true, children: _jsx(IconButton, { size: "small", onClick: () => setIsSidePanelOpen === null || setIsSidePanelOpen === void 0 ? void 0 : setIsSidePanelOpen(!isSidePanelOpen), isFloating: true, ariaLabel: "Toggle node properties panel", className: cx('ndl-graph-
|
|
114
|
+
return (_jsxs(Tooltip, { placement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'bottom', type: "simple", children: [_jsx(Tooltip.Trigger, { hasButtonWrapper: true, children: _jsx(IconButton, { size: "small", onClick: () => setIsSidePanelOpen === null || setIsSidePanelOpen === void 0 ? void 0 : setIsSidePanelOpen(!isSidePanelOpen), isFloating: true, ariaLabel: "Toggle node properties panel", className: cx('ndl-graph-visualization-toggle-sidepanel', className), style: style, htmlAttributes: Object.assign({ 'aria-pressed': isSidePanelOpen }, htmlAttributes), children: _jsx(SidebarLineRightIcon, { className: "ndl-graph-visualization-toggle-icon" }) }) }), _jsx(Tooltip.Content, { children: _jsx(Typography, { variant: "body-small", children: isSidePanelOpen ? 'Close panel' : 'Open panel' }) })] }));
|
|
115
115
|
};
|
|
116
116
|
export const DownloadButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
|
|
117
|
-
const { nvlInstance } =
|
|
117
|
+
const { nvlInstance } = useGraphVisualizationContext();
|
|
118
118
|
const [isDownloadMenuOpen, setOpen] = useState(false);
|
|
119
119
|
const closeFileMenu = () => setOpen(false);
|
|
120
120
|
const downloadButtonRef = useRef(null);
|
|
@@ -124,4 +124,4 @@ export const DownloadButton = ({ className, style, htmlAttributes, tooltipPlacem
|
|
|
124
124
|
closeFileMenu();
|
|
125
125
|
} }) }) })] }));
|
|
126
126
|
};
|
|
127
|
-
//# sourceMappingURL=graph-
|
|
127
|
+
//# 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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"}
|
|
@@ -19,21 +19,21 @@
|
|
|
19
19
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
20
20
|
*/
|
|
21
21
|
import { createContext, useContext } from 'react';
|
|
22
|
-
export const
|
|
22
|
+
export const GraphVisualizationContext = createContext(undefined);
|
|
23
23
|
/**
|
|
24
24
|
* Hook to access the graph visualization context.
|
|
25
25
|
*
|
|
26
26
|
* This hook is used to implement custom UI components like buttons, panels, and controls
|
|
27
27
|
* that need access to data and functionality from the graph visualization component.
|
|
28
|
-
* @see {@link
|
|
28
|
+
* @see {@link GraphVisualizationContextData}
|
|
29
29
|
*
|
|
30
30
|
* @returns The graph visualization context containing NVL instance, sidepanel, gestures, and graph data
|
|
31
|
-
* @throws Error if used outside of a
|
|
31
|
+
* @throws Error if used outside of a GraphVisualizationContext provider
|
|
32
32
|
*
|
|
33
33
|
* @example
|
|
34
34
|
* ```tsx
|
|
35
35
|
* const NodeLoggerButton = () => {
|
|
36
|
-
* const { selected } =
|
|
36
|
+
* const { selected } = useGraphVisualizationContext();
|
|
37
37
|
*
|
|
38
38
|
* const handleClick = () => {
|
|
39
39
|
* console.log('Selected nodes:', selected.nodeIds);
|
|
@@ -48,11 +48,11 @@ export const GraphVizContext = createContext(undefined);
|
|
|
48
48
|
* ```
|
|
49
49
|
* @alpha
|
|
50
50
|
*/
|
|
51
|
-
export const
|
|
52
|
-
const context = useContext(
|
|
51
|
+
export const useGraphVisualizationContext = () => {
|
|
52
|
+
const context = useContext(GraphVisualizationContext);
|
|
53
53
|
if (!context) {
|
|
54
|
-
throw new Error('
|
|
54
|
+
throw new Error('useGraphVisualizationContext must be used within a GraphVisualizationContext');
|
|
55
55
|
}
|
|
56
56
|
return context;
|
|
57
57
|
};
|
|
58
|
-
//# sourceMappingURL=graph-
|
|
58
|
+
//# 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,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAuElD,MAAM,CAAC,MAAM,yBAAyB,GAAG,aAAa,CAEpD,SAAS,CAAC,CAAC;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,GAAG,EAAE;IAC/C,MAAM,OAAO,GAAG,UAAU,CAAC,yBAAyB,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"}
|
package/lib/esm/graph-visualization/{graph-viz-sidepanel.js → graph-visualization-sidepanel.js}
RENAMED
|
@@ -20,7 +20,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
20
20
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
21
21
|
*/
|
|
22
22
|
import { Resizable } from 're-resizable';
|
|
23
|
-
export const
|
|
23
|
+
export const GraphVisualizationSidepanel = ({ sidepanel, }) => {
|
|
24
24
|
const { children, isSidePanelOpen, sidePanelWidth, onSidePanelResize, minWidth = 230, } = sidepanel;
|
|
25
25
|
if (!isSidePanelOpen) {
|
|
26
26
|
return null;
|
|
@@ -39,14 +39,14 @@ export const GraphVizSidepanel = ({ sidepanel }) => {
|
|
|
39
39
|
topRight: false,
|
|
40
40
|
}, handleClasses: { left: 'ndl-sidepanel-handle' }, onResizeStop: (_e, _dir, ref) => {
|
|
41
41
|
onSidePanelResize(ref.getBoundingClientRect().width);
|
|
42
|
-
}, children: _jsx("div", { className: "ndl-graph-
|
|
42
|
+
}, children: _jsx("div", { className: "ndl-graph-visualization-sidepanel-content", children: children }) }));
|
|
43
43
|
};
|
|
44
44
|
const Title = ({ children }) => {
|
|
45
|
-
return (_jsx("div", { className: "ndl-graph-
|
|
45
|
+
return (_jsx("div", { className: "ndl-graph-visualization-sidepanel-title ndl-grid-area-title", children: children }));
|
|
46
46
|
};
|
|
47
|
-
|
|
47
|
+
GraphVisualizationSidepanel.Title = Title;
|
|
48
48
|
const Content = ({ children }) => {
|
|
49
49
|
return _jsx("section", { className: "ndl-grid-area-content", children: children });
|
|
50
50
|
};
|
|
51
|
-
|
|
52
|
-
//# sourceMappingURL=graph-
|
|
51
|
+
GraphVisualizationSidepanel.Content = Content;
|
|
52
|
+
//# 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,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,MAAM,CAAC,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,KAAC,SAAS,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,cAAK,SAAS,EAAC,2CAA2C,YACvD,QAAQ,GACL,GACI,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAiC,EAAE,EAAE;IAC5D,OAAO,CACL,cAAK,SAAS,EAAC,6DAA6D,YACzE,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AACF,2BAA2B,CAAC,KAAK,GAAG,KAAK,CAAC;AAE1C,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAiC,EAAE,EAAE;IAC9D,OAAO,kBAAS,SAAS,EAAC,uBAAuB,YAAE,QAAQ,GAAW,CAAC;AACzE,CAAC,CAAC;AACF,2BAA2B,CAAC,OAAO,GAAG,OAAO,CAAC"}
|
|
@@ -35,18 +35,18 @@ import { IconButtonArray, useNeedleTheme } from '@neo4j-ndl/react';
|
|
|
35
35
|
import { InteractiveNvlWrapper, } from '@neo4j-nvl/react';
|
|
36
36
|
import { default as cx } from 'classnames';
|
|
37
37
|
import React, { useEffect, useId, useMemo, useState } from 'react';
|
|
38
|
-
import { BoxSelectButton, DownloadButton, LassoSelectButton, SingleSelectButton, ToggleSidePanelButton, ZoomInButton, ZoomOutButton, ZoomToFitButton, } from './graph-
|
|
39
|
-
import {
|
|
40
|
-
import {
|
|
38
|
+
import { BoxSelectButton, DownloadButton, LassoSelectButton, SingleSelectButton, ToggleSidePanelButton, ZoomInButton, ZoomOutButton, ZoomToFitButton, } from './graph-visualization-buttons';
|
|
39
|
+
import { GraphVisualizationContext, } from './graph-visualization-context';
|
|
40
|
+
import { GraphVisualizationSidepanel } from './graph-visualization-sidepanel';
|
|
41
41
|
import { mapToNvlGraph } from './map-to-nvl-graph';
|
|
42
42
|
import { SingleSelectionSidepanelContents } from './sidepanel-components/single-selection-sidepanel-contents';
|
|
43
43
|
import { useManagedSelectionState } from './use-managed-selection-state';
|
|
44
44
|
import { useSemicontrolledState } from './use-semi-controlled-state';
|
|
45
45
|
const PLACEMENTS = {
|
|
46
|
-
'bottom-left': 'ndl-graph-
|
|
47
|
-
'bottom-right': 'ndl-graph-
|
|
48
|
-
'top-left': 'ndl-graph-
|
|
49
|
-
'top-right': 'ndl-graph-
|
|
46
|
+
'bottom-left': 'ndl-graph-visualization-interaction-island ndl-bottom-left',
|
|
47
|
+
'bottom-right': 'ndl-graph-visualization-interaction-island ndl-bottom-right',
|
|
48
|
+
'top-left': 'ndl-graph-visualization-interaction-island ndl-top-left',
|
|
49
|
+
'top-right': 'ndl-graph-visualization-interaction-island ndl-top-right',
|
|
50
50
|
};
|
|
51
51
|
const InteractionIsland = ({ children, className, placement, }) => {
|
|
52
52
|
return _jsx("div", { className: cx(PLACEMENTS[placement], className), children: children });
|
|
@@ -63,7 +63,7 @@ const DEFAULT_COMPONENTS = {
|
|
|
63
63
|
bottomLeftIsland: null,
|
|
64
64
|
bottomRightIsland: (_jsxs(IconButtonArray, { orientation: "vertical", isFloating: true, children: [_jsx(ZoomInButton, {}), " ", _jsx(ZoomOutButton, {}), " ", _jsx(ZoomToFitButton, {})] })),
|
|
65
65
|
topLeftIsland: null,
|
|
66
|
-
topRightIsland: (_jsxs("div", { className: "ndl-graph-
|
|
66
|
+
topRightIsland: (_jsxs("div", { className: "ndl-graph-visualization-default-download-group", children: [_jsx(DownloadButton, {}), " ", _jsx(ToggleSidePanelButton, {})] })),
|
|
67
67
|
};
|
|
68
68
|
/**
|
|
69
69
|
* A comprehensive graph visualization component for rendering Neo4j-style graphs with interactive features.
|
|
@@ -79,7 +79,7 @@ const DEFAULT_COMPONENTS = {
|
|
|
79
79
|
* @example
|
|
80
80
|
* Basic usage:
|
|
81
81
|
* ```tsx
|
|
82
|
-
* <
|
|
82
|
+
* <GraphVisualization
|
|
83
83
|
* nodes={nodes}
|
|
84
84
|
* rels={relationships}
|
|
85
85
|
* selected={selection}
|
|
@@ -90,7 +90,7 @@ const DEFAULT_COMPONENTS = {
|
|
|
90
90
|
* @example
|
|
91
91
|
* With custom controls:
|
|
92
92
|
* ```tsx
|
|
93
|
-
* <
|
|
93
|
+
* <GraphVisualization
|
|
94
94
|
* nodes={nodes}
|
|
95
95
|
* rels={relationships}
|
|
96
96
|
* topRightIsland={<CustomControls />}
|
|
@@ -104,12 +104,12 @@ const DEFAULT_COMPONENTS = {
|
|
|
104
104
|
* />
|
|
105
105
|
* ```
|
|
106
106
|
*
|
|
107
|
-
* @param props - {@link
|
|
107
|
+
* @param props - {@link GraphVisualizationProps}
|
|
108
108
|
* @returns A React component that renders an interactive graph visualization
|
|
109
109
|
*
|
|
110
110
|
* @alpha
|
|
111
111
|
*/
|
|
112
|
-
export function
|
|
112
|
+
export function GraphVisualization(_a) {
|
|
113
113
|
var _b, _c;
|
|
114
114
|
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"]);
|
|
115
115
|
const nvlRef = useMemo(() => rawNvlRef !== null && rawNvlRef !== void 0 ? rawNvlRef : React.createRef(), [rawNvlRef]);
|
|
@@ -156,7 +156,7 @@ export function GraphViz(_a) {
|
|
|
156
156
|
setSidePanelWidth,
|
|
157
157
|
]);
|
|
158
158
|
const Component = as !== null && as !== void 0 ? as : 'div';
|
|
159
|
-
return (_jsx(Component, Object.assign({ ref: ref, className: cx('ndl-graph-
|
|
159
|
+
return (_jsx(Component, Object.assign({ ref: ref, className: cx('ndl-graph-visualization-container', className), style: style }, htmlAttributes, { children: _jsxs(GraphVisualizationContext.Provider, { value: {
|
|
160
160
|
gesture,
|
|
161
161
|
interactionMode,
|
|
162
162
|
nvlGraph,
|
|
@@ -164,7 +164,7 @@ export function GraphViz(_a) {
|
|
|
164
164
|
selected,
|
|
165
165
|
setGesture,
|
|
166
166
|
sidepanel,
|
|
167
|
-
}, children: [_jsxs("div", { className: "ndl-graph-
|
|
167
|
+
}, children: [_jsxs("div", { className: "ndl-graph-visualization", children: [_jsx(InteractiveNvlWrapper, Object.assign({ layout: "d3Force", nodes: nodesWithSelection, rels: relsWithSelection, nvlOptions: Object.assign(Object.assign(Object.assign({}, DEFAULT_NVL_OPTIONS), { instanceId, styling: {
|
|
168
168
|
defaultRelationshipColor: border.strongest,
|
|
169
169
|
dropShadowColor: border.weak,
|
|
170
170
|
selectedInnerBorderColor: bg.default,
|
|
@@ -173,49 +173,49 @@ export function GraphViz(_a) {
|
|
|
173
173
|
if (!isComputing) {
|
|
174
174
|
(_a = nvlRef.current) === null || _a === void 0 ? void 0 : _a.fit(nvlRef.current.getNodes().map((neighbors) => neighbors.id), { noPan: true });
|
|
175
175
|
}
|
|
176
|
-
} }, nvlCallbacks), mouseEventCallbacks: wrappedMouseEventCallbacks, ref: nvlRef }, restProps), key), topLeftIsland !== null && (_jsx(InteractionIsland, { placement: "top-left", children: topLeftIsland })), topRightIsland !== null && (_jsx(InteractionIsland, { placement: "top-right", children: topRightIsland })), bottomLeftIsland !== null && (_jsx(InteractionIsland, { placement: "bottom-left", children: bottomLeftIsland })), bottomRightIsland !== null && (_jsx(InteractionIsland, { placement: "bottom-right", children: bottomRightIsland }))] }), sidepanel && _jsx(
|
|
176
|
+
} }, nvlCallbacks), mouseEventCallbacks: wrappedMouseEventCallbacks, ref: nvlRef }, restProps), key), topLeftIsland !== null && (_jsx(InteractionIsland, { placement: "top-left", children: topLeftIsland })), topRightIsland !== null && (_jsx(InteractionIsland, { placement: "top-right", children: topRightIsland })), bottomLeftIsland !== null && (_jsx(InteractionIsland, { placement: "bottom-left", children: bottomLeftIsland })), bottomRightIsland !== null && (_jsx(InteractionIsland, { placement: "bottom-right", children: bottomRightIsland }))] }), sidepanel && _jsx(GraphVisualizationSidepanel, { sidepanel: sidepanel })] }) })));
|
|
177
177
|
}
|
|
178
178
|
/**
|
|
179
|
-
* Zoom in button for use within a
|
|
179
|
+
* Zoom in button for use within a GraphVisualization component.
|
|
180
180
|
*
|
|
181
181
|
* @remarks
|
|
182
182
|
* Increases zoom level by 1.3x
|
|
183
183
|
*
|
|
184
184
|
* @alpha
|
|
185
185
|
*/
|
|
186
|
-
|
|
186
|
+
GraphVisualization.ZoomInButton = ZoomInButton;
|
|
187
187
|
/**
|
|
188
|
-
* Zoom out button for use within a
|
|
188
|
+
* Zoom out button for use within a GraphVisualization component.
|
|
189
189
|
*
|
|
190
190
|
* @remarks
|
|
191
191
|
* Decreases zoom level by 0.7x
|
|
192
192
|
*
|
|
193
193
|
* @alpha
|
|
194
194
|
*/
|
|
195
|
-
|
|
195
|
+
GraphVisualization.ZoomOutButton = ZoomOutButton;
|
|
196
196
|
/**
|
|
197
|
-
* Zoom to fit button for use within a
|
|
197
|
+
* Zoom to fit button for use within a GraphVisualization component.
|
|
198
198
|
*
|
|
199
199
|
* @remarks
|
|
200
200
|
* Automatically adjusts zoom and pan to show all nodes and relationships
|
|
201
201
|
*
|
|
202
202
|
* @alpha
|
|
203
203
|
*/
|
|
204
|
-
|
|
204
|
+
GraphVisualization.ZoomToFitButton = ZoomToFitButton;
|
|
205
205
|
/**
|
|
206
|
-
* Sidepanel toggle button for use within a
|
|
206
|
+
* Sidepanel toggle button for use within a GraphVisualization component.
|
|
207
207
|
*
|
|
208
208
|
* @remarks
|
|
209
209
|
* Shows or hides the sidepanel containing node and relationship details.
|
|
210
|
-
* Requires a sidepanel to be configured in the
|
|
210
|
+
* Requires a sidepanel to be configured in the GraphVisualization component.
|
|
211
211
|
*
|
|
212
212
|
* @throws Error when used without a configured sidepanel
|
|
213
213
|
*
|
|
214
214
|
* @alpha
|
|
215
215
|
*/
|
|
216
|
-
|
|
216
|
+
GraphVisualization.ToggleSidePanelButton = ToggleSidePanelButton;
|
|
217
217
|
/**
|
|
218
|
-
* Download button for use within a
|
|
218
|
+
* Download button for use within a GraphVisualization component.
|
|
219
219
|
*
|
|
220
220
|
* @remarks
|
|
221
221
|
* Opens a dropdown menu with download options. Currently supports PNG format.
|
|
@@ -223,9 +223,9 @@ GraphViz.ToggleSidePanelButton = ToggleSidePanelButton;
|
|
|
223
223
|
*
|
|
224
224
|
* @alpha
|
|
225
225
|
*/
|
|
226
|
-
|
|
226
|
+
GraphVisualization.DownloadButton = DownloadButton;
|
|
227
227
|
/**
|
|
228
|
-
* Box selection button for use within a
|
|
228
|
+
* Box selection button for use within a GraphVisualization component.
|
|
229
229
|
*
|
|
230
230
|
* @remarks
|
|
231
231
|
* Enables box selection mode where dragging creates a rectangular selection area.
|
|
@@ -234,9 +234,9 @@ GraphViz.DownloadButton = DownloadButton;
|
|
|
234
234
|
*
|
|
235
235
|
* @alpha
|
|
236
236
|
*/
|
|
237
|
-
|
|
237
|
+
GraphVisualization.BoxSelectButton = BoxSelectButton;
|
|
238
238
|
/**
|
|
239
|
-
* Lasso selection button for use within a
|
|
239
|
+
* Lasso selection button for use within a GraphVisualization component.
|
|
240
240
|
*
|
|
241
241
|
* @remarks
|
|
242
242
|
* Enables lasso selection mode where dragging creates a free-form selection area.
|
|
@@ -245,9 +245,9 @@ GraphViz.BoxSelectButton = BoxSelectButton;
|
|
|
245
245
|
*
|
|
246
246
|
* @alpha
|
|
247
247
|
*/
|
|
248
|
-
|
|
248
|
+
GraphVisualization.LassoSelectButton = LassoSelectButton;
|
|
249
249
|
/**
|
|
250
|
-
* Single node selection button for use within a
|
|
250
|
+
* Single node selection button for use within a GraphVisualization component.
|
|
251
251
|
*
|
|
252
252
|
* @remarks
|
|
253
253
|
* Enables single selection mode where clicking selects individual nodes or relationships.
|
|
@@ -255,5 +255,5 @@ GraphViz.LassoSelectButton = LassoSelectButton;
|
|
|
255
255
|
*
|
|
256
256
|
* @alpha
|
|
257
257
|
*/
|
|
258
|
-
|
|
259
|
-
//# sourceMappingURL=graph-
|
|
258
|
+
GraphVisualization.SingleSelectButton = SingleSelectButton;
|
|
259
|
+
//# sourceMappingURL=graph-visualization.js.map
|