Feat/diff palette (grafana#740)

* chore(frontend): remove function 'colorBasedOnDiff' which appears to be not used * feat(frontend): add a function to create a linear color scale * support color palettes * put all together * don't allow percentages to go over 100% * highlight active palette * apply same colors to profilertable * fix tests and generate screenshots * address comments
tianlin · Jan 19, 2022 · d005a73 · d005a73
1 parent 918eaa5
commit d005a73
Show file tree

Hide file tree

Showing 23 changed files with 664 additions and 138 deletions.
diff --git a/cypress/snapshots/e2e.ts/e2e-comparison-diff-flamegraph.snap.png b/cypress/snapshots/e2e.ts/e2e-comparison-diff-flamegraph.snap.png
diff --git a/jest.config.js b/jest.config.js
@@ -30,8 +30,9 @@ const project = {
     '\\.svg$': 'svg-jest',
   },
   transformIgnorePatterns: [
-    // force us to transpile these dependenciesmyth
-    'node_modules/(?!(true-myth|react-notifications-component)/)',
+    // force us to not transpile these dependencies
+    // https://stackoverflow.com/a/69150188
+    'node_modules/(?!(true-myth|d3|d3-array|internmap|d3-scale|react-notifications-component))',
   ],
   globals: {
     'ts-jest': {

diff --git a/package.json b/package.json
@@ -70,6 +70,7 @@
     "@testing-library/react": "^12.1.1",
     "@testing-library/user-event": "^13.2.1",
     "@types/color": "^3.0.2",
+    "@types/d3-scale": "^4.0.2",
     "@types/jest": "^27.0.2",
     "@types/jest-image-snapshot": "^4.3.1",
     "@types/lodash": "^4.14.176",
@@ -157,6 +158,10 @@
     "color": "^3.1.3",
     "copy-webpack-plugin": "^6.3.2",
     "css-loader": "^4.0.0",
+    "d3": "^7.3.0",
+    "d3-array": "^3.1.1",
+    "d3-scale": "^4.0.2",
+    "d3-time": "^3.0.0",
     "date-fns": "^2.27.0",
     "esbuild-loader": "^2.18.0",
     "eslint-import-resolver-webpack": "^0.13.2",

diff --git a/setupAfterEnv.ts b/setupAfterEnv.ts
@@ -4,6 +4,7 @@ import timezoneMock from 'timezone-mock';
 import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
 import type { MatchImageSnapshotOptions } from 'jest-image-snapshot';
 import nodeFetch from 'node-fetch';
+import 'regenerator-runtime/runtime';
 
 expect.extend({
   toMatchImageSnapshot(received: string, options: MatchImageSnapshotOptions) {

diff --git a/stories/DiffLegend.stories.tsx b/stories/DiffLegend.stories.tsx
@@ -0,0 +1,15 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import {
+  DefaultPalette,
+  ColorBlindPalette,
+} from '../webapp/javascript/components/FlameGraph/FlameGraphComponent/colorPalette';
+import DiffLegend from '../webapp/javascript/components/FlameGraph/FlameGraphComponent/DiffLegend';
+
+export default {
+  title: 'DiffLegend',
+} as ComponentMeta<typeof DiffLegend>;
+
+export const Default = () => <DiffLegend palette={DefaultPalette} />;
+export const ColorBlind = () => <DiffLegend palette={ColorBlindPalette} />;
diff --git a/webapp/__tests__/color.spec.js b/webapp/__tests__/color.spec.js
diff --git a/webapp/javascript/components/FlameGraph/FlameGraphComponent/DiffLegend.tsx b/webapp/javascript/components/FlameGraph/FlameGraphComponent/DiffLegend.tsx
@@ -1,33 +1,40 @@
 import React from 'react';
 import useResizeObserver from '@react-hook/resize-observer';
-import { colorFromPercentage } from './color';
+import { NewDiffColor } from './color';
+import { FlamegraphPalette } from './colorPalette';
 import styles from './DiffLegend.module.css';
 
-export default function DiffLegend() {
+// TODO
+interface DiffLegendProps {
+  palette: FlamegraphPalette;
+}
+
+export default function DiffLegend(props: DiffLegendProps) {
+  const { palette } = props;
   const legendRef = React.useRef();
   const showMode = useSizeMode(legendRef);
   const values = decideLegend(showMode);
 
+  const color = NewDiffColor(palette);
+
   return (
     <div
-      className={`row ${styles['flamegraph-legend']}`}
       data-testid="flamegraph-legend"
+      className={`${styles['flamegraph-legend']} ${styles['flamegraph-legend-list']}`}
       ref={legendRef}
     >
-      <div className={styles['flamegraph-legend-list']}>
-        {values.map((v) => (
-          <div
-            key={v}
-            className={styles['flamegraph-legend-item']}
-            style={{
-              backgroundColor: colorFromPercentage(v, 0.8).string(),
-            }}
-          >
-            {v > 0 ? '+' : ''}
-            {v}%
-          </div>
-        ))}
-      </div>
+      {values.map((v) => (
+        <div
+          key={v}
+          className={styles['flamegraph-legend-item']}
+          style={{
+            backgroundColor: color(v).rgb().toString(),
+          }}
+        >
+          {v > 0 ? '+' : ''}
+          {v}%
+        </div>
+      ))}
     </div>
   );
 }

diff --git a/webapp/javascript/components/FlameGraph/FlameGraphComponent/Flamegraph.spec.ts b/webapp/javascript/components/FlameGraph/FlameGraphComponent/Flamegraph.spec.ts
@@ -1,6 +1,7 @@
 import { Maybe, throwUnwrapErr } from '@utils/fp';
 import Flamegraph from './Flamegraph';
 import { BAR_HEIGHT } from './constants';
+import { DefaultPalette } from './colorPalette';
 import TestData from './testData';
 
 jest.mock('./Flamegraph_render');
@@ -31,7 +32,8 @@ describe('Flamegraph', () => {
         focusedNode,
         fitMode,
         highlightQuery,
-        zoom
+        zoom,
+        DefaultPalette
       );
 
       flame.render();
@@ -76,7 +78,8 @@ describe('Flamegraph', () => {
           focusedNode,
           fitMode,
           highlightQuery,
-          zoom
+          zoom,
+          DefaultPalette
         );
 
         flame.render();
@@ -166,7 +169,8 @@ describe('Flamegraph', () => {
             focusedNode,
             fitMode,
             highlightQuery,
-            zoom
+            zoom,
+            DefaultPalette
           );
 
           flame.render();
@@ -246,7 +250,8 @@ describe('Flamegraph', () => {
             focusedNode,
             fitMode,
             highlightQuery,
-            zoom
+            zoom,
+            DefaultPalette
           );
 
           flame.render();
@@ -312,7 +317,8 @@ describe('Flamegraph', () => {
             focusedNode,
             fitMode,
             highlightQuery,
-            zoom
+            zoom,
+            DefaultPalette
           );
 
           flame.render();
@@ -391,7 +397,8 @@ describe('Flamegraph', () => {
             focusedNode,
             fitMode,
             highlightQuery,
-            zoom
+            zoom,
+            DefaultPalette
           );
 
           flame.render();
@@ -473,7 +480,8 @@ describe('Flamegraph', () => {
             focusedNode,
             fitMode,
             highlightQuery,
-            zoom
+            zoom,
+            DefaultPalette
           );
 
           flame.render();

diff --git a/webapp/javascript/components/FlameGraph/FlameGraphComponent/Flamegraph.ts b/webapp/javascript/components/FlameGraph/FlameGraphComponent/Flamegraph.ts
@@ -3,6 +3,7 @@ import { Flamebearer } from '@models/flamebearer';
 import { DeepReadonly } from 'ts-essentials';
 import { Maybe } from '@utils/fp';
 import { PX_PER_LEVEL, BAR_HEIGHT, COLLAPSE_THRESHOLD } from './constants';
+import type { FlamegraphPalette } from './colorPalette';
 // there's a dependency cycle here but it should be fine
 /* eslint-disable-next-line import/no-cycle */
 import RenderCanvas from './Flamegraph_render';
@@ -38,7 +39,9 @@ export default class Flamegraph {
      * otherwise it will be greyish.
      */
     private readonly highlightQuery: string,
-    private zoom: Maybe<DeepReadonly<{ i: number; j: number }>>
+    private zoom: Maybe<DeepReadonly<{ i: number; j: number }>>,
+
+    private palette: FlamegraphPalette
   ) {
     // TODO
     // these were only added because storybook is not setting
@@ -82,6 +85,7 @@ export default class Flamegraph {
       focusedNode: this.focusedNode,
       pxPerTick: this.pxPerTick(),
       tickToX: this.tickToX,
+      palette: this.palette,
     };
 
     const { format: viewType } = this.flamebearer;

diff --git a/webapp/javascript/components/FlameGraph/FlameGraphComponent/Flamegraph_render.spec.tsx b/webapp/javascript/components/FlameGraph/FlameGraphComponent/Flamegraph_render.spec.tsx
@@ -3,6 +3,7 @@ import { createCanvas } from 'canvas';
 import { Maybe } from '@utils/fp';
 import TestData from './testData';
 import Flamegraph from './Flamegraph';
+import { DefaultPalette } from './colorPalette';
 
 type focusedNodeType = ConstructorParameters<typeof Flamegraph>[2];
 type zoomType = ConstructorParameters<typeof Flamegraph>[5];
@@ -23,7 +24,8 @@ describe("render group:snapshot'", () => {
       focusedNode,
       fitMode,
       highlightQuery,
-      zoom
+      zoom,
+      DefaultPalette
     );
 
     flame.render();
@@ -38,7 +40,8 @@ describe("render group:snapshot'", () => {
       focusedNode,
       fitMode,
       highlightQuery,
-      zoom
+      zoom,
+      DefaultPalette
     );
 
     flame.render();
@@ -52,7 +55,8 @@ describe("render group:snapshot'", () => {
       focusedNode,
       fitMode,
       highlightQuery,
-      zoom
+      zoom,
+      DefaultPalette
     );
 
     flame.render();
@@ -69,7 +73,8 @@ describe("render group:snapshot'", () => {
       focusedNode,
       fitMode,
       highlightQuery,
-      zoom
+      zoom,
+      DefaultPalette
     );
 
     flame.render();
@@ -86,7 +91,8 @@ describe("render group:snapshot'", () => {
       focusedNode,
       fitMode,
       highlightQuery,
-      zoom
+      zoom,
+      DefaultPalette
     );
 
     flame.render();
@@ -103,7 +109,8 @@ describe("render group:snapshot'", () => {
       focusedNode,
       fitMode,
       highlightQuery,
-      zoom
+      zoom,
+      DefaultPalette
     );
 
     flame.render();
@@ -123,7 +130,8 @@ describe("render group:snapshot'", () => {
       focusedNode,
       fitMode,
       highlightQuery,
-      zoom
+      zoom,
+      DefaultPalette
     );
 
     flame.render();
@@ -141,7 +149,8 @@ describe("render group:snapshot'", () => {
         focusedNode,
         fitMode,
         highlightQuery,
-        zoom
+        zoom,
+        DefaultPalette
       );
 
       flame.render();
@@ -158,7 +167,8 @@ describe("render group:snapshot'", () => {
         focusedNode,
         fitMode,
         highlightQuery,
-        zoom
+        zoom,
+        DefaultPalette
       );
 
       flame.render();
@@ -175,7 +185,8 @@ describe("render group:snapshot'", () => {
         focusedNode,
         fitMode,
         highlightQuery,
-        zoom
+        zoom,
+        DefaultPalette
       );
 
       flame.render();