Fix reset view (#414)

* frontend: fix reset view function * cypress: add test for 'Reset View' button
grafana · Sep 23, 2021 · f8da10f · f8da10f
1 parent 1a4741c
commit f8da10f
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 31 deletions.
diff --git a/cypress/fixtures/simple-golang-app-cpu.json b/cypress/fixtures/simple-golang-app-cpu.json
@@ -0,0 +1,74 @@
+{
+  "flamebearer": {
+    "names": [
+      "total",
+      "runtime.main",
+      "main.slowFunction",
+      "main.work",
+      "main.main",
+      "main.fastFunction"
+    ],
+    "levels": [
+      [
+        0,
+        988,
+        0,
+        0
+      ],
+      [
+        0,
+        988,
+        0,
+        1
+      ],
+      [
+        0,
+        214,
+        0,
+        5,
+        0,
+        3,
+        2,
+        4,
+        0,
+        771,
+        0,
+        2
+      ],
+      [
+        0,
+        214,
+        214,
+        3,
+        2,
+        1,
+        1,
+        5,
+        0,
+        771,
+        771,
+        3
+      ]
+    ],
+    "numTicks": 988,
+    "maxSelf": 771,
+    "spyName": "gospy",
+    "sampleRate": 100,
+    "units": "samples",
+    "format": "single"
+  },
+  "metadata": {
+    "format": "single",
+    "sampleRate": 100,
+    "spyName": "gospy",
+    "units": "samples"
+  },
+  "timeline": {
+    "startTime": 1632335270,
+    "samples": [
+      989
+    ],
+    "durationDelta": 10
+  }
+}
+
diff --git a/cypress/integration/basic.ts b/cypress/integration/basic.ts
@@ -1,3 +1,4 @@
+import { BAR_HEIGHT } from '../../webapp/javascript/components/FlameGraph/FlameGraphComponent/index.jsx'
 /// <reference types="cypress" />
 describe('basic test', () => {
   it('successfully loads', () => {
@@ -156,5 +157,19 @@ describe('basic test', () => {
       })
   });
 
+  it('validates "Reset View" works', () => {
+    cy.intercept('**/render*', {
+      fixture: 'simple-golang-app-cpu.json',
+    }).as('render')
+
+    cy.visit('/')
+
+    cy.findByTestId('reset-view').should('not.be.visible');
+    cy.findByTestId('flamegraph-canvas')
+      .click(0, BAR_HEIGHT)
+    cy.findByTestId('reset-view').should('be.visible');
+    cy.findByTestId('reset-view').click();
+    cy.findByTestId('reset-view').should('not.be.visible');
+  });
 })
 
diff --git a/webapp/__tests__/__snapshots__/ProfilerHeader.spec.js.snap b/webapp/__tests__/__snapshots__/ProfilerHeader.spec.js.snap
@@ -33,6 +33,7 @@ exports[`ProfilerHeader render correctly ProfilerHeader component 1`] = `
   </select>
   <button
     className="btn"
+    data-testid="reset-view"
     id="reset"
     type="button"
   >

diff --git a/webapp/javascript/components/FlameGraph/FlameGraphComponent/index.jsx b/webapp/javascript/components/FlameGraph/FlameGraphComponent/index.jsx
@@ -42,8 +42,6 @@ import {
   diffColorRed,
 } from "./color";
 
-import "./styles.css";
-
 import { fitToCanvasRect } from "../../../util/fitMode";
 
 const formatSingle = {
@@ -104,6 +102,7 @@ const COLLAPSE_THRESHOLD = 5;
 const LABEL_THRESHOLD = 20;
 const HIGHLIGHT_NODE_COLOR = "#48CE73"; // green
 const GAP = 0.5;
+export const BAR_HEIGHT = PX_PER_LEVEL - GAP;
 
 const unitsToFlamegraphTitle = {
   objects: "amount of objects in RAM per function",
@@ -343,7 +342,7 @@ class FlameGraph extends React.Component {
         }
         // ticks are samples
         const sw = numBarTicks * this.pxPerTick - (collapsed ? 0 : GAP);
-        const sh = PX_PER_LEVEL - GAP;
+        const sh = BAR_HEIGHT;
 
         // if (x < -1 || x + sw > this.graphWidth + 1 || sw < HIDE_THRESHOLD) continue;
 
@@ -516,7 +515,8 @@ class FlameGraph extends React.Component {
       this.rangeMin = 0;
       this.rangeMax = 1;
     }
-    this.updateResetStyle();
+
+    this.props.onZoom(this.selectedLevel);
   }
 
   // binary search of a block in a stack level

diff --git a/webapp/javascript/components/FlameGraph/FlameGraphRenderer.jsx b/webapp/javascript/components/FlameGraph/FlameGraphRenderer.jsx
@@ -52,6 +52,10 @@ class FlameGraphRenderer extends React.Component {
       // query used in the 'search' checkbox
       highlightQuery: "",
     };
+
+    // generally not a good idea
+    // but we need to access the graph's reset function
+    this.graphRef = React.createRef();
   }
 
   componentDidMount() {
@@ -114,14 +118,6 @@ class FlameGraphRenderer extends React.Component {
     });
   };
 
-  updateResetStyle = () => {
-    // const emptyQuery = this.query === "";
-    const topLevelSelected = this.selectedLevel === 0;
-    this.setState({
-      resetStyle: { visibility: topLevelSelected ? "hidden" : "visible" },
-    });
-  };
-
   handleSearchChange = (e) => {
     this.setState({
       highlightQuery: e
@@ -130,7 +126,7 @@ class FlameGraphRenderer extends React.Component {
   };
 
   reset = () => {
-    this.updateZoom(0, 0);
+    this.graphRef.current.reset();
   };
 
   updateView = (newView) => {
@@ -158,24 +154,11 @@ class FlameGraphRenderer extends React.Component {
     });
   }
 
-  updateZoom(i, j) {
-    const ff = this.parseFormat();
-    if (!Number.isNaN(i) && !Number.isNaN(j)) {
-      this.selectedLevel = i;
-      this.topLevel = 0;
-      this.rangeMin =
-        ff.getBarOffset(this.state.levels[i], j) / this.state.numTicks;
-      this.rangeMax =
-        (ff.getBarOffset(this.state.levels[i], j) +
-          ff.getBarTotal(this.state.levels[i], j)) /
-        this.state.numTicks;
-    } else {
-      this.selectedLevel = 0;
-      this.topLevel = 0;
-      this.rangeMin = 0;
-      this.rangeMax = 1;
-    }
-    this.updateResetStyle();
+  onZoom = (selectedLevel) => {
+    const topLevelSelected = selectedLevel === 0;
+    this.setState({
+      resetStyle: { visibility: topLevelSelected ? "hidden" : "visible" },
+    });
   }
 
   parseFormat(format) {
@@ -249,13 +232,15 @@ class FlameGraphRenderer extends React.Component {
       this.state.flamebearer && dataExists ? (
         <Graph
           key="flamegraph-pane"
+          ref={this.graphRef}
           flamebearer={this.state.flamebearer}
           format={this.parseFormat(this.state.flamebearer.format)}
           view={this.state.view}
           ExportData={ExportData}
           query={this.state.highlightQuery}
           fitMode={this.state.fitMode}
           viewType={this.props.viewType}
+          onZoom={this.onZoom}
           label={this.props.query}
         />
       ) : null;

diff --git a/webapp/javascript/components/ProfilerHeader.jsx b/webapp/javascript/components/ProfilerHeader.jsx
@@ -53,6 +53,7 @@ export default function ProfilerHeader({
         type="button"
         className={clsx("btn")}
         style={resetStyle}
+        data-testid="reset-view"
         id="reset"
         onClick={reset}
       >