fix textformat and color generation

grafana · Sep 2, 2021 · 4cb997e · 4cb997e
1 parent 294eae9
commit 4cb997e
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 28 deletions.
diff --git a/webapp/javascript/components/FlameGraph/FlameGraphComponent/color.js b/webapp/javascript/components/FlameGraph/FlameGraphComponent/color.js
@@ -30,7 +30,7 @@ const colors = [
   Color.rgb(128, 110, 183),
 ];
 
-export const defaultColor = colors[0];
+export const defaultColor = Color.rgb(148, 142, 142);
 export const diffColorRed = Color.rgb(200, 0, 0);
 export const diffColorGreen = Color.rgb(0, 170, 0);
 
@@ -53,5 +53,3 @@ export function colorBasedOnDiff(diff, left, a) {
 export function colorGreyscale(v, a) {
   return Color.rgb(v, v, v).alpha(a);
 }
-
-export default () => {};
diff --git a/webapp/javascript/components/FlameGraph/FlameGraphComponent/format.js b/webapp/javascript/components/FlameGraph/FlameGraphComponent/format.js
@@ -34,10 +34,6 @@ const durations = [
 // this is a class and not a function because we can save some time by
 //   precalculating divider and suffix and not doing it on each iteration
 export class DurationFormatter {
-  divider;
-
-  suffix;
-
   constructor(maxDur) {
     this.divider = 1;
     this.suffix = "second";
@@ -54,7 +50,9 @@ export class DurationFormatter {
 
   format(samples, sampleRate) {
     let number = samples / sampleRate / this.divider;
-    if (number < 0.01) {
+    if (number >= 0 && number < 0.01) {
+      number = "< 0.01";
+    } else if (number <= 0 && number > -0.01) {
       number = "< 0.01";
     } else {
       number = number.toFixed(2);
@@ -72,10 +70,6 @@ const bytes = [
 ];
 
 export class BytesFormatter {
-  divider;
-
-  suffix;
-
   constructor(maxBytes) {
     this.divider = 1;
     this.suffix = "bytes";
@@ -92,7 +86,9 @@ export class BytesFormatter {
 
   format(samples, sampleRate) {
     let number = samples / this.divider;
-    if (number < 0.01) {
+    if (number >= 0 && number < 0.01) {
+      number = "< 0.01";
+    } else if (number <= 0 && number > -0.01) {
       number = "< 0.01";
     } else {
       number = number.toFixed(2);
@@ -110,10 +106,6 @@ const objects = [
 ];
 
 export class ObjectsFormatter {
-  divider;
-
-  suffix;
-
   constructor(maxObjects) {
     this.divider = 1;
     this.suffix = "";
@@ -130,7 +122,9 @@ export class ObjectsFormatter {
 
   format(samples, sampleRate) {
     let number = samples / this.divider;
-    if (number > 0.01) {
+    if (number >= 0 && number < 0.01) {
+      number = "< 0.01";
+    } else if (number <= 0 && number > -0.01) {
       number = "< 0.01";
     } else {
       number = number.toFixed(2);
@@ -142,11 +136,13 @@ export class ObjectsFormatter {
 export function getPackageNameFromStackTrace(spyName, stackTrace) {
   // TODO: actually make sure these make sense and add tests
   const regexpLookup = {
+    default: /^(?<packageName>(.*\/)*)(?<filename>.*)(?<line_info>.*)$/,
+    dotnetspy: /^(?<packageName>.+)\.(.+)\.(.+)\(.*\)$/,
+    ebpfspy: /^(?<packageName>.+)$/,
+    gospy: /^(?<packageName>(.*\/)*)(?<filename>.*)(?<line_info>.*)$/,
+    phpspy: /^(?<packageName>(.*\/)*)(?<filename>.*\.php+)(?<line_info>.*)$/,
     pyspy: /^(?<packageName>(.*\/)*)(?<filename>.*\.py+)(?<line_info>.*)$/,
     rbspy: /^(?<packageName>(.*\/)*)(?<filename>.*\.rb+)(?<line_info>.*)$/,
-    gospy: /^(?<packageName>(.*\/)*)(?<filename>.*)(?<line_info>.*)$/,
-    ebpfspy: /^(?<packageName>.+)$/,
-    default: /^(?<packageName>(.*\/)*)(?<filename>.*)(?<line_info>.*)$/,
   };
 
   if (stackTrace.length === 0) {

diff --git a/webapp/javascript/components/FlameGraph/FlameGraphComponent/index.jsx b/webapp/javascript/components/FlameGraph/FlameGraphComponent/index.jsx
@@ -20,6 +20,8 @@ import {
 
 import "./styles.css";
 
+import { fitToCanvasRect } from "../../../util/fitMode";
+
 const formatSingle = {
   format: "single",
   jStep: 4,
@@ -154,10 +156,14 @@ class FlameGraph extends React.Component {
         prevProps.flamebearer !== this.props.flamebearer) ||
       this.props.width !== prevProps.width ||
       this.props.height !== prevProps.height ||
-      this.props.view !== prevProps.view
+      this.props.view !== prevProps.view ||
+      this.props.fitMode !== prevProps.fitMode
     ) {
       this.updateData();
     }
+    if (this.props.fitMode !== prevProps.fitMode) {
+      setTimeout(() => this.renderCanvas(), 0);
+    }
   }
 
   updateData = () => {
@@ -272,8 +278,10 @@ class FlameGraph extends React.Component {
 
     this.ctx.textBaseline = "middle";
     this.ctx.font =
-      '400 12px system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
-
+      "400 11.5px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace";
+    // Since this is a monospaced font
+    // any character would do
+    const characterSize = this.ctx.measureText("a").width;
     this.formatter = this.createFormatter();
     // i = level
     for (let i = 0; i < levels.length - this.topLevel; i += 1) {
@@ -353,14 +361,30 @@ class FlameGraph extends React.Component {
 
         if (!collapsed && sw >= LABEL_THRESHOLD) {
           const percent = formatPercent(ratio);
-          const name = `${
-            names[level[j + ff.jName]]
-          } (${percent}, ${this.formatter.format(numBarTicks, sampleRate)})`;
+          const shortName = names[level[j + ff.jName]];
+          const longName = `${shortName} (${percent}, ${this.formatter.format(
+            numBarTicks,
+            sampleRate
+          )})`;
+
+          const namePosX = Math.round(Math.max(x, 0));
+          const fitCalc = fitToCanvasRect({
+            mode: this.props.fitMode,
+            charSize: characterSize,
+            rectWidth: sw,
+            fullText: longName,
+            shortText: shortName,
+          });
 
           this.ctx.save();
           this.ctx.clip();
           this.ctx.fillStyle = "black";
-          this.ctx.fillText(name, Math.round(Math.max(x, 0) + 3), y + sh / 2);
+          // when showing the code, give it a space in the beginning
+          this.ctx.fillText(
+            fitCalc.text,
+            namePosX + fitCalc.marginLeft,
+            y + sh / 2 + 1
+          );
           this.ctx.restore();
         }
       }

diff --git a/webapp/javascript/components/FlameGraph/FlameGraphRenderer.jsx b/webapp/javascript/components/FlameGraph/FlameGraphRenderer.jsx
@@ -45,6 +45,7 @@ class FlameGraphRenderer extends React.Component {
       sortByDirection: "desc",
       view: "both",
       viewDiff: props.viewType === "diff" ? "diff" : undefined,
+      fitMode: props.fitMode ? props.fitMode : "HEAD",
       flamebearer: null,
     };
   }
@@ -97,6 +98,12 @@ class FlameGraphRenderer extends React.Component {
     }
   }
 
+  updateFitMode = (newFitMode) => {
+    this.setState({
+      fitMode: newFitMode,
+    });
+  };
+
   updateResetStyle = () => {
     // const emptyQuery = this.query === "";
     const topLevelSelected = this.selectedLevel === 0;
@@ -202,6 +209,7 @@ class FlameGraphRenderer extends React.Component {
           updateSortBy={this.updateSortBy}
           view={this.state.view}
           viewDiff={this.state.viewDiff}
+          fitMode={this.state.fitMode}
         />
       </div>
     );
@@ -215,6 +223,8 @@ class FlameGraphRenderer extends React.Component {
           view={this.state.view}
           ExportData={ExportData}
           label={this.props.query}
+          fitMode={this.state.fitMode}
+          viewType={this.props.viewType}
         />
       ) : null;
 
@@ -242,6 +252,8 @@ class FlameGraphRenderer extends React.Component {
             updateView={this.updateView}
             updateViewDiff={this.updateViewDiff}
             resetStyle={this.state.resetStyle}
+            updateFitMode={this.updateFitMode}
+            fitMode={this.state.fitMode}
           />
           {this.props.viewType === "double" ? (
             <>