Fix: remove unnecessary rerender on state change

memgraph · Jul 3, 2024 · f273ad8 · f273ad8
1 parent 88c3006
commit f273ad8
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 30 deletions.
diff --git a/src/models/edge.ts b/src/models/edge.ts
@@ -34,6 +34,10 @@ export interface IEdgeSetStyleOptions {
   isNotifySkipped: boolean;
 }
 
+export interface IEdgeSetStateOptions {
+  isNotifySkipped: boolean;
+}
+
 export enum EdgeLineStyleType {
   SOLID = 'solid',
   DASHED = 'dashed',
@@ -123,10 +127,10 @@ export interface IEdge<N extends INodeBase, E extends IEdgeBase> extends ISubjec
   setStyle(callback: (edge: IEdge<N, E>) => IEdgeStyle, options?: IEdgeSetStyleOptions): void;
   patchStyle(style: IEdgeStyle, options?: IEdgeSetStyleOptions): void;
   patchStyle(callback: (edge: IEdge<N, E>) => IEdgeStyle, options?: IEdgeSetStyleOptions): void;
-  setState(state: number): void;
-  setState(state: IGraphObjectStateParameters): void;
-  setState(callback: (edge: IEdge<N, E>) => number): void;
-  setState(callback: (edge: IEdge<N, E>) => IGraphObjectStateParameters): void;
+  setState(state: number, options?: IEdgeSetStateOptions): void;
+  setState(state: IGraphObjectStateParameters, options?: IEdgeSetStateOptions): void;
+  setState(callback: (edge: IEdge<N, E>) => number, options?: IEdgeSetStateOptions): void;
+  setState(callback: (edge: IEdge<N, E>) => IGraphObjectStateParameters, options?: IEdgeSetStateOptions): void;
 }
 
 export interface IEdgeSettings {
@@ -409,16 +413,17 @@ abstract class Edge<N extends INodeBase, E extends IEdgeBase> extends Subject im
     }
   }
 
-  setState(state: number): void;
-  setState(state: IGraphObjectStateParameters): void;
-  setState(callback: (edge: IEdge<N, E>) => number): void;
-  setState(callback: (edge: IEdge<N, E>) => IGraphObjectStateParameters): void;
+  setState(state: number, options?: IEdgeSetStateOptions): void;
+  setState(state: IGraphObjectStateParameters, options?: IEdgeSetStateOptions): void;
+  setState(callback: (edge: IEdge<N, E>) => number, options?: IEdgeSetStateOptions): void;
+  setState(callback: (edge: IEdge<N, E>) => IGraphObjectStateParameters, options?: IEdgeSetStateOptions): void;
   setState(
     arg:
       | number
       | IGraphObjectStateParameters
       | ((edge: IEdge<N, E>) => number)
       | ((edge: IEdge<N, E>) => IGraphObjectStateParameters),
+    options?: IEdgeSetStateOptions,
   ): void {
     let result: number | IGraphObjectStateParameters;
 
@@ -446,7 +451,9 @@ abstract class Edge<N extends INodeBase, E extends IEdgeBase> extends Subject im
       }
     }
 
-    this.notifyListeners();
+    if (!options?.isNotifySkipped) {
+      this.notifyListeners();
+    }
   }
 
   private _handleState(state: number, options?: Partial<IGraphObjectStateOptions>): number {

diff --git a/src/models/graph.ts b/src/models/graph.ts
@@ -550,7 +550,7 @@ export class Graph<N extends INodeBase, E extends IEdgeBase> extends Subject imp
           listeners: [this._update],
         },
       );
-      edge.setState(existingEdge.getState());
+      edge.setState(existingEdge.getState(), { isNotifySkipped: true });
       edge.setStyle(existingEdge.getStyle(), { isNotifySkipped: true });
       newEdges.push(edge);
     }

diff --git a/src/models/node.ts b/src/models/node.ts
@@ -37,6 +37,10 @@ export interface INodeSetStyleOptions {
   isNotifySkipped: boolean;
 }
 
+export interface INodeSetStateOptions {
+  isNotifySkipped: boolean;
+}
+
 export enum NodeShapeType {
   CIRCLE = 'circle',
   DOT = 'dot',
@@ -125,10 +129,10 @@ export interface INode<N extends INodeBase, E extends IEdgeBase> extends ISubjec
   setStyle(callback: (node: INode<N, E>) => INodeStyle, options?: INodeSetPositionOptions): void;
   patchStyle(style: INodeStyle, options?: INodeSetPositionOptions): void;
   patchStyle(callback: (node: INode<N, E>) => INodeStyle, options?: INodeSetPositionOptions): void;
-  setState(state: number): void;
-  setState(state: IGraphObjectStateParameters): void;
-  setState(callback: (node: INode<N, E>) => number): void;
-  setState(callback: (node: INode<N, E>) => IGraphObjectStateParameters): void;
+  setState(state: number, options?: INodeSetStateOptions): void;
+  setState(state: IGraphObjectStateParameters, options?: INodeSetStateOptions): void;
+  setState(callback: (node: INode<N, E>) => number, options?: INodeSetStateOptions): void;
+  setState(callback: (node: INode<N, E>) => IGraphObjectStateParameters, options?: INodeSetStateOptions): void;
 }
 
 // TODO: Dirty solution: Find another way to listen for global images, maybe through
@@ -303,9 +307,7 @@ export class Node<N extends INodeBase, E extends IEdgeBase> extends Subject impl
   }
 
   clearState(): void {
-    this.setState(GraphObjectState.NONE);
-
-    this.notifyListeners();
+    this.setState(GraphObjectState.NONE, { isNotifySkipped: true });
   }
 
   getDistanceToBorder(): number {
@@ -513,16 +515,17 @@ export class Node<N extends INodeBase, E extends IEdgeBase> extends Subject impl
     }
   }
 
-  setState(state: number): void;
-  setState(state: IGraphObjectStateParameters): void;
-  setState(callback: (node: INode<N, E>) => number): void;
-  setState(callback: (node: INode<N, E>) => IGraphObjectStateParameters): void;
+  setState(state: number, options?: INodeSetStateOptions): void;
+  setState(state: IGraphObjectStateParameters, options?: INodeSetStateOptions): void;
+  setState(callback: (node: INode<N, E>) => number, options?: INodeSetStateOptions): void;
+  setState(callback: (node: INode<N, E>) => IGraphObjectStateParameters, options?: INodeSetStateOptions): void;
   setState(
     arg:
       | number
       | IGraphObjectStateParameters
       | ((node: INode<N, E>) => number)
       | ((node: INode<N, E>) => IGraphObjectStateParameters),
+    options?: INodeSetStateOptions,
   ): void {
     let result: number | IGraphObjectStateParameters;
 
@@ -550,7 +553,9 @@ export class Node<N extends INodeBase, E extends IEdgeBase> extends Subject impl
       }
     }
 
-    this.notifyListeners();
+    if (!options?.isNotifySkipped) {
+      this.notifyListeners();
+    }
   }
 
   protected _isPointInBoundingBox(point: IPosition): boolean {

diff --git a/src/models/strategy.ts b/src/models/strategy.ts
@@ -229,24 +229,24 @@ const setNodeState = <N extends INodeBase, E extends IEdgeBase>(
   options?: ISetShapeStateOptions,
 ): void => {
   if (isStateChangeable(node, options)) {
-    node.setState(state);
+    node.setState(state, { isNotifySkipped: true });
   }
 
   node.getInEdges().forEach((edge) => {
     if (edge && isStateChangeable(edge, options)) {
-      edge.setState(state);
+      edge.setState(state, { isNotifySkipped: true });
     }
     if (edge.startNode && isStateChangeable(edge.startNode, options)) {
-      edge.startNode.setState(state);
+      edge.startNode.setState(state, { isNotifySkipped: true });
     }
   });
 
   node.getOutEdges().forEach((edge) => {
     if (edge && isStateChangeable(edge, options)) {
-      edge.setState(state);
+      edge.setState(state, { isNotifySkipped: true });
     }
     if (edge.endNode && isStateChangeable(edge.endNode, options)) {
-      edge.endNode.setState(state);
+      edge.endNode.setState(state, { isNotifySkipped: true });
     }
   });
 };
@@ -257,15 +257,15 @@ const setEdgeState = <N extends INodeBase, E extends IEdgeBase>(
   options?: ISetShapeStateOptions,
 ): void => {
   if (isStateChangeable(edge, options)) {
-    edge.setState(state);
+    edge.setState(state, { isNotifySkipped: true });
   }
 
   if (edge.startNode && isStateChangeable(edge.startNode, options)) {
-    edge.startNode.setState(state);
+    edge.startNode.setState(state, { isNotifySkipped: true });
   }
 
   if (edge.endNode && isStateChangeable(edge.endNode, options)) {
-    edge.endNode.setState(state);
+    edge.endNode.setState(state, { isNotifySkipped: true });
   }
 };