do not update GPU buffers if data has not changed (#1967)

Co-authored-by: maniarathi <mani.arathi@gmail.com>
Co-authored-by: Severiano Badajoz <sbadajoz@chanzuckerberg.com>

client/src/components/graph/graph.js

@@ -730,14 +730,25 @@ class Graph extends React.Component {
     );
   });
 
-  updateReglAndRender(asyncProps) {
+  updateReglAndRender(asyncProps, prevAsyncProps) {
     const { positions, colors, flags } = asyncProps;
     this.cachedAsyncProps = asyncProps;
     const { pointBuffer, colorBuffer, flagBuffer } = this.state;
-    pointBuffer({ data: positions, dimension: 2 });
+    let needToRenderCanvas = false;
-    colorBuffer({ data: colors, dimension: 3 });
+
-    flagBuffer({ data: flags, dimension: 1 });
+    if (positions !== prevAsyncProps?.positions) {
-    this.renderCanvas();
+      pointBuffer({ data: positions, dimension: 2 });
+      needToRenderCanvas = true;
+    }
+    if (colors !== prevAsyncProps?.colors) {
+      colorBuffer({ data: colors, dimension: 3 });
+      needToRenderCanvas = true;
+    }
+    if (flags !== prevAsyncProps?.flags) {
+      flagBuffer({ data: flags, dimension: 1 });
+      needToRenderCanvas = true;
+    }
+    if (needToRenderCanvas) this.renderCanvas();
   }
 
   updateColorTable(colors, colorDf) {
@@ -906,7 +917,7 @@ class Graph extends React.Component {
           <Async.Fulfilled>
             {(asyncProps) => {
               if (regl && !shallowEqual(asyncProps, this.cachedAsyncProps)) {
-                this.updateReglAndRender(asyncProps);
+                this.updateReglAndRender(asyncProps, this.cachedAsyncProps);
               }
               return null;
             }}