feat: improve graph rendering speed with image nodes (#72)

Co-authored-by: Adrián Insua Yañez <[email protected]>
adrianiy · Apr 27, 2020 · 22f1c96 · 22f1c96
1 parent 1e2350d
commit 22f1c96
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 10 deletions.
diff --git a/src/assets/visualization/components/graphGeometry.js b/src/assets/visualization/components/graphGeometry.js
@@ -93,7 +93,8 @@ const noEmptyLines = function(lines) {
 }
 
 const fitCaptionIntoCircle = function(node, style) {
-  const template = style.forNode(node).get('caption')
+  const shouldRenderImage = style.shouldRenderImageCaption();
+  const template = shouldRenderImage ? '' : style.forNode(node).get('caption')
   const captionText = style.interpolate(template, node)
   const fontFamily = 'sans-serif'
   const fontSize = parseFloat(style.forNode(node).get('font-size'))

diff --git a/src/components/card/Card.js b/src/components/card/Card.js
@@ -55,7 +55,7 @@ function Card(props) {
             setResults(null);
             fecthData();
         }
-    }, [props, fecthData]);
+    }, [props.query, fecthData]);
 
     const toggleExpand = () => {
         setExpanded(!expanded);

diff --git a/src/components/card/components/Configurator/Configurator.js b/src/components/card/components/Configurator/Configurator.js
@@ -16,7 +16,6 @@ function Configurator(props) {
     }
 
     const renderPropSelector = (defaultProps, className, activeProp, title, style) => {
-        console.log(props.styleForItem.get("color"));
         return defaultProps.map((prop, i) => {
             const onClick = () => {
                 updateStyle(props.styleForItem.selector, prop);
@@ -34,7 +33,6 @@ function Configurator(props) {
     }
 
     const renderCaptionSelector = (defaultCaptions, className, activeCaption) => {
-        console.log(props.styleForItem.get("caption"))
         return Object.entries(defaultCaptions).map((cap, i) => {
             const onClick = () => {
                 updateStyle(props.styleForItem.selector, {

diff --git a/src/global/components/chart/Chart.js b/src/global/components/chart/Chart.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import GraphComponent from './../../../assets/visualization/Graph';
 import { getQuery } from './../../../service/neo.service';
 
@@ -27,6 +27,7 @@ function Chart (props) {
     const [nodes, setNodes] = useState([]);
     const [relationships, setRelationships] = useState([]);
     const user = useSelector(state => state.currentUser);
+    const _prevResults = useRef(null);
     let _graph;
     let _autoCompleteCallback;
 
@@ -59,12 +60,15 @@ function Chart (props) {
     }, [checkNodesLength]);
 
     useEffect(() => {
-        const { records = [] } = props.result;
-        if (records && records.length > 0) {
-            setNodes([]);
-            populateDataFromRecords(records);
+        if (_prevResults.current !== props.result) {
+            const { records = [] } = props.result;
+            if (records && records.length > 0) {
+                setNodes([]);
+                populateDataFromRecords(records);
+                _prevResults.current = props.result;
+            }
         }
-    }, [props, populateDataFromRecords]);
+    }, [populateDataFromRecords, props.result]);
 
     const autoCompleteRelationships = async (existingNodes, newNodes) => {
         if (props.autoComplete) {