Merge pull request #1455 from alexabidri/refresh-plan-stats

Refresh plan statistics after re-run the query
neo4j · Jul 5, 2021 · 6910b0a · 6910b0a
2 parents 3a8bcf7 + 7b4e0f3
commit 6910b0a
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 75 deletions.
diff --git a/package.json b/package.json
@@ -182,6 +182,7 @@
     "jsonic": "^0.3.0",
     "jszip": "^3.2.2",
     "lodash-es": "^4.17.15",
+    "memoize-one": "^5.2.1",
     "monaco-editor": "0.23.0",
     "neo4j-driver": "^4.3.1",
     "react": "^16.9.0",

diff --git a/src/browser/modules/Stream/CypherFrame/PlanView.tsx b/src/browser/modules/Stream/CypherFrame/PlanView.tsx
@@ -18,7 +18,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { Component, ReactNode } from 'react'
+import React, { Component, ReactNode, PureComponent } from 'react'
+import memoize from 'memoize-one'
 import { PlanSVG } from './PlanView.styled'
 import { dim } from 'browser-styles/constants'
 import { deepEquals, shallowEquals } from 'services/utils'
@@ -160,83 +161,56 @@ export class PlanView extends Component<PlanViewProps, PlanViewState> {
   }
 }
 
-type PlanStatusbarState = { extractedPlan: any }
 type PlanStatusbarProps = {
   result: any
   setPlanExpand: (p: PlanExpand) => void
 }
 
-export class PlanStatusbar extends Component<
-  PlanStatusbarProps,
-  PlanStatusbarState
-> {
-  state: PlanStatusbarState = {
-    extractedPlan: null
-  }
-
-  componentDidMount(): void {
-    if (this.props === undefined || this.props.result === undefined) return
-    const extractedPlan = bolt.extractPlan(this.props.result, true)
-    if (extractedPlan) this.setState({ extractedPlan })
-  }
-
-  componentDidUpdate(prevProps: PlanStatusbarProps): void {
-    if (this.props.result === undefined) return
-    if (
-      prevProps.result === undefined ||
-      !deepEquals(this.props.result.summary, prevProps.result.summary)
-    ) {
-      const extractedPlan = bolt.extractPlan(this.props.result, true)
-      this.setState({ extractedPlan })
-    }
-  }
-
-  shouldComponentUpdate(
-    _nextProps: PlanStatusbarProps,
-    nextState: PlanStatusbarState
-  ): boolean {
-    if (this.props.result === undefined) return true
-    return !deepEquals(nextState, this.state)
-  }
-
-  render(): ReactNode {
-    const plan = this.state.extractedPlan
-    if (!plan) return null
-    const { result = {} } = this.props
-    return (
-      <StyledOneRowStatsBar>
-        <StyledLeftPartial>
-          <Ellipsis>
-            Cypher version: {plan.root.version}, planner: {plan.root.planner},
-            runtime: {plan.root.runtime}.
-            {plan.root.totalDbHits
-              ? ` ${
-                  plan.root.totalDbHits
-                } total db hits in ${result.summary.resultAvailableAfter
-                  .add(result.summary.resultConsumedAfter)
-                  .toNumber() || 0} ms.`
-              : ''}
-          </Ellipsis>
-        </StyledLeftPartial>
-        <StyledRightPartial>
-          <StyledFrameTitlebarButtonSection>
-            <FrameButton
-              title="Collapse Plan"
-              data-testid="planCollapseButton"
-              onClick={() => this.props.setPlanExpand('COLLAPSE')}
-            >
-              <DoubleUpIcon />
-            </FrameButton>
-            <FrameButton
-              data-testid="planExpandButton"
-              title="Expand Plan"
-              onClick={() => this.props.setPlanExpand('EXPAND')}
-            >
-              <DoubleDownIcon />
-            </FrameButton>
-          </StyledFrameTitlebarButtonSection>
-        </StyledRightPartial>
-      </StyledOneRowStatsBar>
-    )
-  }
+export function PlanStatusbar(props: PlanStatusbarProps) {
+  const extractMemoizedPlan = memoize(
+    result => bolt.extractPlan(result, true),
+    (a: any, b: any) => deepEquals(a[0]?.result?.summary, b[0]?.result?.summary)
+  )
+
+  const { result } = props
+  if (!result || !result.summary) return null
+
+  const plan = extractMemoizedPlan(result)
+  if (!plan) return null
+
+  return (
+    <StyledOneRowStatsBar>
+      <StyledLeftPartial>
+        <Ellipsis>
+          Cypher version: {plan.root.version}, planner: {plan.root.planner},
+          runtime: {plan.root.runtime}.
+          {plan.root.totalDbHits
+            ? ` ${
+                plan.root.totalDbHits
+              } total db hits in ${result.summary.resultAvailableAfter
+                .add(result.summary.resultConsumedAfter)
+                .toNumber() || 0} ms.`
+            : ''}
+        </Ellipsis>
+      </StyledLeftPartial>
+      <StyledRightPartial>
+        <StyledFrameTitlebarButtonSection>
+          <FrameButton
+            title="Collapse Plan"
+            data-testid="planCollapseButton"
+            onClick={() => props.setPlanExpand('COLLAPSE')}
+          >
+            <DoubleUpIcon />
+          </FrameButton>
+          <FrameButton
+            data-testid="planExpandButton"
+            title="Expand Plan"
+            onClick={() => props.setPlanExpand('EXPAND')}
+          >
+            <DoubleDownIcon />
+          </FrameButton>
+        </StyledFrameTitlebarButtonSection>
+      </StyledRightPartial>
+    </StyledOneRowStatsBar>
+  )
 }
diff --git a/yarn.lock b/yarn.lock
@@ -8916,6 +8916,11 @@ memoize-one@^5.0.0:
   resolved "https://neo.jfrog.io/neo/api/npm/npm/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
   integrity sha1-BHtuMZm1COrsA1BN5xIpuOsddcA=
 
+memoize-one@^5.2.1:
+  version "5.2.1"
+  resolved "https://neo.jfrog.io/neo/api/npm/npm/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha1-gzeqPEM1WBg57AHD1ZQJDOvo8A4=
+
 memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://neo.jfrog.io/neo/api/npm/npm/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"