@neo4j-nvl/react 0.2.1 → 0.2.2

package/lib/basic-wrapper/BasicNvlWrapper.js

@@ -106,14 +106,14 @@ export const BasicNvlWrapper = memo(forwardRef((_a, ref) => {
         return nvlMethods.reduce((current, method) => (Object.assign(Object.assign({}, current), { 
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore suppress the type casting error on spreading
-            [method]: (...args) => nvl && nvl[method](...args) })), {});
+            [method]: (...args) => nvlRef && nvlRef.current && nvlRef.current[method](...args) })), {});
     });
     const containerRef = useRef();
-    const [nvl, setNvl] = useState();
+    const nvlRef = useRef();
     const [currentNodes, setCurrentNodes] = useState(nodes);
     const [currentRels, setCurrentRels] = useState(rels);
     useEffect(() => {
-        if (!nvl) {
+        if (!nvlRef.current) {
             const combinedOptions = Object.assign(Object.assign({}, nvlOptions), { layoutOptions });
             if (layout) {
                 combinedOptions.layout = layout;
@@ -121,7 +121,7 @@ export const BasicNvlWrapper = memo(forwardRef((_a, ref) => {
             let newNvl;
             try {
                 newNvl = new NVL(containerRef.current, currentNodes, currentRels, combinedOptions, nvlCallbacks);
-                setNvl(newNvl);
+                nvlRef.current = newNvl;
                 setCurrentRels(rels);
                 setCurrentNodes(nodes);
             }
@@ -139,7 +139,7 @@ export const BasicNvlWrapper = memo(forwardRef((_a, ref) => {
         }
     }, []);
     useEffect(() => {
-        if (!nvl) {
+        if (!nvlRef.current) {
             return;
         }
         const nodeChanges = getMapDifferences(currentNodes, nodes);
@@ -147,21 +147,21 @@ export const BasicNvlWrapper = memo(forwardRef((_a, ref) => {
         const relChanges = getMapDifferences(currentRels, rels);
         setCurrentRels(rels);
         setCurrentNodes(nodes);
-        nvl.addAndUpdateElementsInGraph([...nodeChanges.added, ...nodeDiff], [...relChanges.added, ...relChanges.updated]);
-        nvl.removeRelationshipsWithIds(relChanges.removed.map((r) => r.id));
-        nvl.removeNodesWithIds(nodeChanges.removed.map((n) => n.id));
+        nvlRef.current && nvlRef.current.addAndUpdateElementsInGraph([...nodeChanges.added, ...nodeDiff], [...relChanges.added, ...relChanges.updated]);
+        nvlRef.current && nvlRef.current.removeRelationshipsWithIds(relChanges.removed.map((r) => r.id));
+        nvlRef.current && nvlRef.current.removeNodesWithIds(nodeChanges.removed.map((n) => n.id));
     }, [nodes, rels]);
     useEffect(() => {
-        nvl && nvl.setLayout(layout);
+        nvlRef.current && nvlRef.current.setLayout(layout);
     }, [layout]);
     useDeepCompareEffect(() => {
-        nvl && nvl.setLayoutOptions(layoutOptions);
+        nvlRef.current && nvlRef.current.setLayoutOptions(layoutOptions);
     }, [layoutOptions]);
     useEffect(() => {
-        nvl && nvl.setUseWebGLRenderer(nvlOptions.useWebGL);
+        nvlRef.current && nvlRef.current.setUseWebGLRenderer(nvlOptions.useWebGL);
     }, [nvlOptions.useWebGL]);
     useEffect(() => {
-        nvl && nvl.setDisableWebGL(nvlOptions.disableWebGL);
+        nvlRef.current && nvlRef.current.setDisableWebGL(nvlOptions.disableWebGL);
     }, [nvlOptions.disableWebGL]);
     return React.createElement("div", Object.assign({ ref: containerRef, style: { height: '100%', outline: '0' } }, nvlEvents));
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/react",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "main": "lib/index.js",
   "license": "SEE LICENSE IN 'Neo4j Early Access Agreement - Visualization Library.pdf'",
   "scripts": {