@neo4j-nvl/react 0.2.49 → 0.2.51
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.
|
@@ -109,5 +109,5 @@ export interface BasicReactWrapperProps {
|
|
|
109
109
|
* For more about interactivity, check out the {@link NVL}.hittest method,
|
|
110
110
|
* the Interaction Handlers module module and the {@link InteractiveNvlWrapper}.
|
|
111
111
|
*/
|
|
112
|
-
export declare const BasicNvlWrapper: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<BasicReactWrapperProps & React.HTMLProps<HTMLDivElement>, "max" | "required" | "type" | "data" | "
|
|
112
|
+
export declare const BasicNvlWrapper: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<BasicReactWrapperProps & React.HTMLProps<HTMLDivElement>, "max" | "required" | "type" | "data" | "key" | "default" | "high" | "low" | "id" | "media" | "height" | "width" | "start" | "open" | "name" | "min" | "color" | "content" | "translate" | "value" | "hidden" | "cite" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "dir" | "pattern" | "acceptCharset" | "action" | "method" | "noValidate" | "rel" | "target" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "role" | "children" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "async" | "disabled" | "multiple" | "size" | "manifest" | "wrap" | "accept" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "minLength" | "muted" | "optimum" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "playsInline" | "poster" | "preload" | "readOnly" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof BasicReactWrapperProps> & React.RefAttributes<IncludeMethods<NVL>>>>;
|
|
113
113
|
export {};
|
|
@@ -1,14 +1,3 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
1
|
import NVL from '@neo4j-nvl/core';
|
|
13
2
|
import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
|
|
14
3
|
import { getMapDifferences, getNodeAttributeDifferences } from '../utils/graphComparison';
|
|
@@ -97,16 +86,18 @@ import { useDeepCompareEffect } from '../utils/hooks';
|
|
|
97
86
|
* For more about interactivity, check out the {@link NVL}.hittest method,
|
|
98
87
|
* the Interaction Handlers module module and the {@link InteractiveNvlWrapper}.
|
|
99
88
|
*/
|
|
100
|
-
export const BasicNvlWrapper = memo(forwardRef((
|
|
101
|
-
var { nodes, rels, layout, layoutOptions, nvlCallbacks = {}, nvlOptions = {}, onInitializationError } = _a, nvlEvents = __rest(_a, ["nodes", "rels", "layout", "layoutOptions", "nvlCallbacks", "nvlOptions", "onInitializationError"]);
|
|
89
|
+
export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, nvlCallbacks = {}, nvlOptions = {}, onInitializationError, ...nvlEvents }, ref) => {
|
|
102
90
|
const nvlRef = useRef(null);
|
|
103
91
|
useImperativeHandle(ref, () => {
|
|
104
92
|
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
|
105
93
|
const nvlMethods = Object.getOwnPropertyNames(NVL.prototype);
|
|
106
94
|
// @ts-ignore revisit better typing for reduce function
|
|
107
|
-
return nvlMethods.reduce((current, method) => (
|
|
95
|
+
return nvlMethods.reduce((current, method) => ({
|
|
96
|
+
...current,
|
|
97
|
+
[method]: (...args) =>
|
|
108
98
|
// @ts-ignore suppress the type casting error on spreading
|
|
109
|
-
nvlRef !== undefined && nvlRef.current !== null && nvlRef.current[method](...args)
|
|
99
|
+
nvlRef !== undefined && nvlRef.current !== null && nvlRef.current[method](...args)
|
|
100
|
+
}), {});
|
|
110
101
|
});
|
|
111
102
|
const containerRef = useRef();
|
|
112
103
|
const [currentNodes, setCurrentNodes] = useState(nodes);
|
|
@@ -114,7 +105,7 @@ export const BasicNvlWrapper = memo(forwardRef((_a, ref) => {
|
|
|
114
105
|
useEffect(() => {
|
|
115
106
|
let newNvl;
|
|
116
107
|
if (nvlRef.current === null) {
|
|
117
|
-
const combinedOptions =
|
|
108
|
+
const combinedOptions = { ...nvlOptions, layoutOptions };
|
|
118
109
|
if (layout !== undefined) {
|
|
119
110
|
combinedOptions.layout = layout;
|
|
120
111
|
}
|
|
@@ -134,11 +125,10 @@ export const BasicNvlWrapper = memo(forwardRef((_a, ref) => {
|
|
|
134
125
|
}
|
|
135
126
|
}
|
|
136
127
|
return () => {
|
|
137
|
-
newNvl
|
|
128
|
+
newNvl?.destroy();
|
|
138
129
|
};
|
|
139
130
|
}, []);
|
|
140
131
|
useEffect(() => {
|
|
141
|
-
var _a, _b, _c;
|
|
142
132
|
if (nvlRef.current === null) {
|
|
143
133
|
return;
|
|
144
134
|
}
|
|
@@ -147,37 +137,33 @@ export const BasicNvlWrapper = memo(forwardRef((_a, ref) => {
|
|
|
147
137
|
const relChanges = getMapDifferences(currentRels, rels);
|
|
148
138
|
setCurrentRels(rels);
|
|
149
139
|
setCurrentNodes(nodes);
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
140
|
+
nvlRef.current?.addAndUpdateElementsInGraph([...nodeChanges.added, ...nodeDiff], [...relChanges.added, ...relChanges.updated]);
|
|
141
|
+
nvlRef.current?.removeRelationshipsWithIds(relChanges.removed.map((r) => r.id));
|
|
142
|
+
nvlRef.current?.removeNodesWithIds(nodeChanges.removed.map((n) => n.id));
|
|
153
143
|
}, [nodes, rels]);
|
|
154
144
|
useEffect(() => {
|
|
155
|
-
var _a;
|
|
156
145
|
if (nvlRef.current === null || layout === undefined) {
|
|
157
146
|
return;
|
|
158
147
|
}
|
|
159
|
-
|
|
148
|
+
nvlRef.current?.setLayout(layout);
|
|
160
149
|
}, [layout]);
|
|
161
150
|
useDeepCompareEffect(() => {
|
|
162
|
-
var _a;
|
|
163
151
|
if (nvlRef.current === null || layoutOptions === undefined) {
|
|
164
152
|
return;
|
|
165
153
|
}
|
|
166
|
-
|
|
154
|
+
nvlRef.current?.setLayoutOptions(layoutOptions);
|
|
167
155
|
}, [layoutOptions]);
|
|
168
156
|
useEffect(() => {
|
|
169
|
-
var _a;
|
|
170
157
|
if (nvlRef.current === null || nvlOptions.useWebGL === undefined) {
|
|
171
158
|
return;
|
|
172
159
|
}
|
|
173
|
-
|
|
160
|
+
nvlRef.current?.setUseWebGLRenderer(nvlOptions.useWebGL);
|
|
174
161
|
}, [nvlOptions.useWebGL]);
|
|
175
162
|
useEffect(() => {
|
|
176
|
-
var _a;
|
|
177
163
|
if (nvlRef.current === null || nvlOptions.disableWebGL === undefined) {
|
|
178
164
|
return;
|
|
179
165
|
}
|
|
180
|
-
|
|
166
|
+
nvlRef.current?.setDisableWebGL(nvlOptions.disableWebGL);
|
|
181
167
|
}, [nvlOptions.disableWebGL]);
|
|
182
|
-
return React.createElement("div",
|
|
168
|
+
return React.createElement("div", { ref: containerRef, style: { height: '100%', outline: '0' }, ...nvlEvents });
|
|
183
169
|
}));
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { isNil } from 'lodash';
|
|
2
2
|
import { useEffect } from 'react';
|
|
3
3
|
export const destroyInteraction = (interactionRef) => {
|
|
4
|
-
|
|
5
|
-
(_a = interactionRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
4
|
+
interactionRef.current?.destroy();
|
|
6
5
|
interactionRef.current = null;
|
|
7
6
|
};
|
|
8
7
|
export const useInteraction = (Interaction, interactionRef, callback, eventName, nvlRef, interactionOptions) => {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import type { BoxSelectInteraction, BoxSelectInteractionCallbacks, BoxSelectInteractionOptions, ClickInteraction, ClickInteractionCallbacks, ClickInteractionOptions, DragNodeInteraction, DragNodeInteractionCallbacks, DrawInteraction, DrawInteractionCallbacks, HoverInteraction, HoverInteractionCallbacks, HoverInteractionOptions, LassoInteraction, LassoInteractionCallbacks, LassoInteractionOptions, PanInteraction, PanInteractionCallbacks, PanInteractionOptions, ZoomInteraction, ZoomInteractionCallbacks } from '@neo4j-nvl/interaction-handlers';
|
|
1
|
+
import type { BoxSelectInteraction, BoxSelectInteractionCallbacks, BoxSelectInteractionOptions, ClickInteraction, ClickInteractionCallbacks, ClickInteractionOptions, DragNodeInteraction, DragNodeInteractionCallbacks, DrawInteraction, DrawInteractionCallbacks, DrawInteractionOptions, HoverInteraction, HoverInteractionCallbacks, HoverInteractionOptions, LassoInteraction, LassoInteractionCallbacks, LassoInteractionOptions, PanInteraction, PanInteractionCallbacks, PanInteractionOptions, ZoomInteraction, ZoomInteractionCallbacks } from '@neo4j-nvl/interaction-handlers';
|
|
2
2
|
import type { BasicReactWrapperProps } from '../basic-wrapper/BasicNvlWrapper';
|
|
3
3
|
export type MouseInteractionModule = typeof HoverInteraction | typeof ClickInteraction | typeof PanInteraction | typeof ZoomInteraction | typeof DragNodeInteraction | typeof DrawInteraction | typeof BoxSelectInteraction | typeof LassoInteraction;
|
|
4
4
|
export type MouseInteraction = HoverInteraction | ClickInteraction | PanInteraction | ZoomInteraction | DragNodeInteraction | DrawInteraction | BoxSelectInteraction | LassoInteraction;
|
|
5
5
|
export type MouseEventCallbacks = ClickInteractionCallbacks & DragNodeInteractionCallbacks & HoverInteractionCallbacks & PanInteractionCallbacks & ZoomInteractionCallbacks & BoxSelectInteractionCallbacks & DrawInteractionCallbacks & LassoInteractionCallbacks;
|
|
6
|
-
export type InteractionOptions = ClickInteractionOptions & BoxSelectInteractionOptions & HoverInteractionOptions & PanInteractionOptions & LassoInteractionOptions;
|
|
6
|
+
export type InteractionOptions = ClickInteractionOptions & BoxSelectInteractionOptions & HoverInteractionOptions & PanInteractionOptions & LassoInteractionOptions & DrawInteractionOptions;
|
|
7
7
|
/**
|
|
8
8
|
* The events that can be passed to the {@link MouseEventCallbacks} object
|
|
9
9
|
* to turn on/off certain events for the {@link InteractiveNvlWrapper} component.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neo4j-nvl/react",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.51",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"license": "SEE LICENSE IN 'Neo4j Early Access Agreement - Visualization Library.pdf'",
|
|
6
6
|
"scripts": {
|
|
@@ -26,12 +26,12 @@
|
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@testing-library/jest-dom": "^5.16.5",
|
|
28
28
|
"@testing-library/react": "^13.4.0",
|
|
29
|
-
"@types/lodash": "
|
|
29
|
+
"@types/lodash": "4.14.202",
|
|
30
30
|
"@types/react": "^18.0.18",
|
|
31
31
|
"babel-eslint": "^10.1.0"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"lodash": "
|
|
34
|
+
"lodash": "4.17.21",
|
|
35
35
|
"react": "^18.2.0",
|
|
36
36
|
"react-dom": "^18.2.0"
|
|
37
37
|
}
|