feat: add new tooltip design (grafana#1246)

* add new tooltip design * fix jest tests * Update packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/Tooltip.tsx * makes it use the same mono font everywhere, some stylistic changes Co-authored-by: Ryan Perry <[email protected]> Co-authored-by: Dmitry Filimonov <[email protected]>
yzhaoyu · Jul 13, 2022 · 8345168 · 8345168
1 parent c41479f
commit 8345168
Show file tree

Hide file tree

Showing 7 changed files with 413 additions and 247 deletions.
diff --git a/.gitignore b/.gitignore
@@ -25,6 +25,7 @@ benchmark/fixtures
 cypress/snapshots/**/__diff_output__
 cypress/videos
 cypress/screenshots
+coverage
 # this file may contain sensitive credentials
 pkg/server/testdata/oauth-config.yml
 dist
diff --git a/cypress/integration/webapp/basic.ts b/cypress/integration/webapp/basic.ts
@@ -169,13 +169,13 @@ describe('basic test', () => {
 
       cy.findByTestId('flamegraph-tooltip').should('not.be.visible');
 
-      cy.waitForFlamegraphToRender().trigger('mousemove', 0, 0);
+      cy.waitForFlamegraphToRender().trigger('mousemove');
       cy.findByTestId('flamegraph-tooltip').should('be.visible');
 
       cy.findByTestId('flamegraph-tooltip-title').should('have.text', 'total');
-      cy.findByTestId('flamegraph-tooltip-body').should(
+      cy.findByTestId('flamegraph-tooltip-table').should(
         'have.text',
-        '100%, 988 samples, 9.88 seconds'
+        'Share of CPU:100%CPU Time:9.88 secondsSamples:988'
       );
 
       cy.waitForFlamegraphToRender().trigger('mouseout');
@@ -212,18 +212,21 @@ describe('basic test', () => {
         .findByTestId('flamegraph-tooltip')
         .should('not.be.visible');
 
-      findFlamegraph(1).waitForFlamegraphToRender().trigger('mousemove', 0, 0);
+      findFlamegraph(1).waitForFlamegraphToRender().trigger('mousemove');
 
       findFlamegraph(1).findByTestId('flamegraph-tooltip').should('be.visible');
 
       findFlamegraph(1)
         .findByTestId('flamegraph-tooltip-title')
         .should('have.text', 'total');
       findFlamegraph(1)
-        .findByTestId('flamegraph-tooltip-body')
-        .should('have.text', '100%, 991 samples, 9.91 seconds');
+        .findByTestId('flamegraph-tooltip-table')
+        .should(
+          'have.text',
+          'Share of CPU:100%CPU Time:9.91 secondsSamples:991'
+        );
 
-      findFlamegraph(1).waitForFlamegraphToRender().trigger('mousemove', 0, 0);
+      findFlamegraph(1).waitForFlamegraphToRender().trigger('mousemove');
       findFlamegraph(1).waitForFlamegraphToRender().trigger('mouseout');
 
       findFlamegraph(1)
@@ -246,8 +249,11 @@ describe('basic test', () => {
         .findByTestId('flamegraph-tooltip-title')
         .should('have.text', 'total');
       findFlamegraph(2)
-        .findByTestId('flamegraph-tooltip-body')
-        .should('have.text', '100%, 988 samples, 9.88 seconds');
+        .findByTestId('flamegraph-tooltip-table')
+        .should(
+          'have.text',
+          'Share of CPU:100%CPU Time:9.88 secondsSamples:988'
+        );
 
       findFlamegraph(2)
         .waitForFlamegraphToRender()
@@ -281,13 +287,9 @@ describe('basic test', () => {
       cy.findByTestId('flamegraph-tooltip').should('be.visible');
 
       cy.findByTestId('flamegraph-tooltip-title').should('have.text', 'total');
-      cy.findByTestId('flamegraph-tooltip-left').should(
-        'have.text',
-        'Baseline: 991 samples, 9.91 seconds (100%)'
-      );
-      cy.findByTestId('flamegraph-tooltip-right').should(
+      cy.findByTestId('flamegraph-tooltip-table').should(
         'have.text',
-        'Comparison: 987 samples, 9.87 seconds (100%)'
+        'BaselineComparisonDiffShare of CPU:100%100%CPU Time:9.91 seconds9.87 secondsSamples:991987'
       );
     });
   });

diff --git a/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/Tooltip.module.scss b/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/Tooltip.module.scss
@@ -1,21 +1,59 @@
 .flamegraphTooltip {
-  max-width: 80%;
-
+  width: 420px;
   position: fixed;
-  background: #ffffff;
-  white-space: nowrap;
+  background: var(--ps-neutral-2);
   box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.3);
   border-radius: 4px;
-  padding: 3px 5px;
-  color: #333;
+  color: var(--ps-neutral-1);
   font-size: 12px;
   visibility: hidden;
-  z-index: 1;
-}
+  z-index: 2;
+
+  &.flamegraphDiffTooltip {
+    width: 450px;
+  }
+
+  .flamegraphTooltipName {
+    color: var(--ps-neutral-1);
+    background-color: var(--ps-tooltip-header-bg);
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    font-weight: bold;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 8px 10px;
+    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  }
+
+  .functionName {
+    padding: 8px 10px 0;
+    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+
+    white-space: break-spaces;
+    word-break: break-all;
+  }
+
+  .tooltipTable {
+    width: calc(100% - 10px * 2);
+    margin: 10px 10px 16px;
+
+    th,
+    td {
+      border: 1px solid var(--ps-tooltip-header-bg);
+      padding: 5px;
+    }
+
+    td {
+      width: 50%;
+    }
 
-.flamegraphTooltipName {
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+    &.tooltipDiffTable {
+      th,
+      td {
+        width: 25%;
+        font-weight: normal;
+      }
+    }
+  }
 }