memoize data and only rerender diagram if required

jdbranham · Sep 19, 2020 · 4fffbd6 · 4fffbd6
1 parent b7bdb8f
commit 4fffbd6
Show file tree

Hide file tree

Showing 4 changed files with 46,413 additions and 16 deletions.
diff --git a/dist/module.js b/dist/module.js
diff --git a/dist/module.js.map b/dist/module.js.map
diff --git a/src/DiagramController.tsx b/src/DiagramController.tsx
@@ -56,7 +56,19 @@ export class DiagramPanelController extends React.Component<DiagramPanelControll
     this.onToggleSort = this.onToggleSort.bind(this);
     this.setDiagramRef = this.setDiagramRef.bind(this);
     this.renderCallback = this.renderCallback.bind(this);
-    this.state = DiagramPanelController.getDerivedStateFromProps(props, {});
+  }
+
+  static getDerivedStateFromProps(props: DiagramPanelControllerProps, state: DiagramPanelControllerState) {
+    const { diagramContainer, wrapper, legendContainer } = getDiagramWithLegendStyles(props);
+    if (!state) {
+      return {
+        diagramContainer,
+        wrapper,
+        legendContainer,
+      };
+    } else {
+      return null;
+    }
   }
 
   setDiagramRef(element: HTMLDivElement) {
@@ -68,7 +80,12 @@ export class DiagramPanelController extends React.Component<DiagramPanelControll
   }
 
   componentDidUpdate(prevProps: DiagramPanelControllerProps) {
-    if (prevProps !== this.props) {
+    if (
+      prevProps.options !== this.props.options ||
+      prevProps.fieldConfig != this.props.fieldConfig ||
+      prevProps.theme != this.props.theme ||
+      prevProps.data != this.props.data
+    ) {
       this.initializeMermaid();
     }
   }
@@ -128,16 +145,6 @@ export class DiagramPanelController extends React.Component<DiagramPanelControll
     }
   }
 
-  static getDerivedStateFromProps(props: DiagramPanelControllerProps, state: DiagramPanelControllerState) {
-    const { diagramContainer, wrapper, legendContainer } = getDiagramWithLegendStyles(props);
-    return {
-      ...state,
-      diagramContainer,
-      wrapper,
-      legendContainer,
-    };
-  }
-
   onToggleSort(sortBy: string) {
     const { onOptionsChange, options } = this.props;
     onOptionsChange({

diff --git a/src/DiagramPanel.tsx b/src/DiagramPanel.tsx
@@ -31,7 +31,12 @@ export const DiagramPanel: React.FC<DiagramPanelOptions> = ({
     );
   }
 
-  const diagramModels = getDiagramSeriesModel(data.series, timeZone, options, fieldConfig);
+  const diagramModels = React.useMemo(() => getDiagramSeriesModel(data.series, timeZone, options, fieldConfig), [
+    data.series,
+    timeZone,
+    options,
+    fieldConfig,
+  ]);
 
   return (
     <div