Fixes diff view color issue (#383)

* fixes diff colors issue

* lints js files

* trying to make linter happy

jest.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  transformIgnorePatterns: []
+  transformIgnorePatterns: [],
 };

scripts/webpack/webpack.panel.js

@@ -1,11 +1,12 @@
 const { merge } = require("webpack-merge");
 
-const prod = require("./webpack.prod.js");
 const path = require("path");
+const prod = require("./webpack.prod.js");
 
 module.exports = merge(prod, {
   entry: {
-    flamegraphComponent: "./webapp/javascript/components/FlameGraph/FlameGraphComponent/index.jsx",
+    flamegraphComponent:
+      "./webapp/javascript/components/FlameGraph/FlameGraphComponent/index.jsx",
   },
 
   output: {
@@ -15,7 +16,7 @@ module.exports = merge(prod, {
     clean: true,
 
     library: "pyroscope",
-    libraryTarget: 'umd',
-    umdNamedDefine: true
+    libraryTarget: "umd",
+    umdNamedDefine: true,
   },
 });

webapp/__tests__/color.spec.js

@@ -0,0 +1,17 @@
+import {colorBasedOnDiff} from '../javascript/components/FlameGraph/FlameGraphComponent/color';
+
+describe.each([
+  [ -300, 100, 'rgba(0, 200, 0, 0.8)' ],
+  [ -200, 100, 'rgba(0, 200, 0, 0.8)' ],
+  [ -100, 100, 'rgba(0, 200, 0, 0.8)'     ],
+  [ -50,  100, 'rgba(59, 200, 59, 0.8)'   ],
+  [ 0,    100, 'rgba(200, 200, 200, 0.8)' ],
+  [ 50,   100, 'rgba(200, 59, 59, 0.8)'   ],
+  [ 100,  100, 'rgba(200, 0, 0, 0.8)'     ],
+  [ 200,  100, 'rgba(200, 0, 0, 0.8)' ],
+  [ 300,  100, 'rgba(200, 0, 0, 0.8)' ],
+])('.colorBasedOnDiff(%i, %i)', (a, b, expected) => {
+  it(`returns ${expected}`, () => {
+    expect(colorBasedOnDiff(a,b,0.8).toString()).toBe(expected);
+  });
+});

webapp/javascript/components/FlameGraph/FlameGraphComponent/color.js

@@ -45,7 +45,9 @@ export function colorBasedOnPackageName(name, a) {
 // if left == 0 || Math.abs(diff) > left, we use the color of 100%
 export function colorBasedOnDiff(diff, left, a) {
   const v =
-    !left || Math.abs(diff) > left ? 1 : 200 * Math.sqrt(Math.abs(diff / left));
+    !left || Math.abs(diff) > left
+      ? 200
+      : 200 * Math.sqrt(Math.abs(diff / left));
   if (diff >= 0) return Color.rgb(200, 200 - v, 200 - v).alpha(a);
   return Color.rgb(200 - v, 200, 200 - v).alpha(a);
 }

webapp/javascript/components/FlameGraph/FlameGraphComponent/index.jsx

@@ -488,7 +488,10 @@ class FlameGraph extends React.Component {
     tooltipEl.children[1].children[1].style.color = tooltipDiffColor;
 
     // makes it so that tooltip is always visible even if mouse is close to the right edge
-    const tooltipX = Math.min(e.clientX + 12, window.innerWidth - tooltipEl.clientWidth - 20);
+    const tooltipX = Math.min(
+      e.clientX + 12,
+      window.innerWidth - tooltipEl.clientWidth - 20
+    );
     tooltipEl.style.left = `${tooltipX}px`;
     tooltipEl.style.top = `${e.clientY + 20}px`;
   };

webapp/javascript/components/Footer.jsx

@@ -48,7 +48,9 @@ function Footer() {
             rel="noreferrer"
             target="_blank"
           >
-            <FontAwesomeIcon icon={faDownload} />&nbsp;<span>Newer Version Available ({latestVersion})</span>
+            <FontAwesomeIcon icon={faDownload} />
+            &nbsp;
+            <span>{`Newer Version Available (${latestVersion})`}</span>
           </a>
         </span>
       )}

webapp/javascript/components/ProfilerHeader.jsx

@@ -7,7 +7,7 @@ import { faColumns } from "@fortawesome/free-solid-svg-icons/faColumns";
 import { faIcicles } from "@fortawesome/free-solid-svg-icons/faIcicles";
 import { faListUl } from "@fortawesome/free-solid-svg-icons/faListUl";
 import { faTable } from "@fortawesome/free-solid-svg-icons/faTable";
-import { FitModes } from "../util/fitMode"
+import { FitModes } from "../util/fitMode";
 
 export default function ProfilerHeader({
   view,

webapp/javascript/components/ProfilerTable.jsx

@@ -4,7 +4,7 @@
 import React from "react";
 import clsx from "clsx";
 import { getFormatter, getPackageNameFromStackTrace } from "../util/format";
-import { colorBasedOnPackageName, defaultColor, diffColorGreen, diffColorRed } from "../util/color";
+import { colorBasedOnPackageName, defaultColor, diffColorGreen, diffColorRed } from "./FlameGraph/FlameGraphComponent/color";
 import { parseFlamebearerFormat } from "../util/flamebearer";
 import { fitIntoTableCell } from "../util/fitMode";
 

webapp/javascript/components/PyroscopeApp.jsx

@@ -8,7 +8,11 @@ import TimelineChartWrapper from "./TimelineChartWrapper";
 import Header from "./Header";
 import Footer from "./Footer";
 import { buildRenderURL } from "../util/updateRequests";
-import { fetchNames, fetchTimeline, abortTimelineRequest } from "../redux/actions";
+import {
+  fetchNames,
+  fetchTimeline,
+  abortTimelineRequest,
+} from "../redux/actions";
 
 function PyroscopeApp(props) {
   const { actions, renderURL } = props;

webapp/javascript/components/Sidebar.jsx

@@ -164,15 +164,15 @@ function Sidebar(props) {
           <FontAwesomeIcon icon={faKeyboard} />
         </button>
       </SidebarItem>
-      {
-        window.isAuthRequired ? (
-          <SidebarItem tooltipText="Sign Out">
-            <button type="button" onClick={() => signOut()}>
-              <FontAwesomeIcon icon={faSignOutAlt} />
-            </button>
-          </SidebarItem>
-        ) : []
-      }
+      {window.isAuthRequired ? (
+        <SidebarItem tooltipText="Sign Out">
+          <button type="button" onClick={() => signOut()}>
+            <FontAwesomeIcon icon={faSignOutAlt} />
+          </button>
+        </SidebarItem>
+      ) : (
+        []
+      )}
       <Modal
         isOpen={state.shortcutsModalOpen}
         style={modalStyle}

webapp/javascript/components/TagsBar.jsx

@@ -4,7 +4,13 @@ import { connect } from "react-redux";
 import "react-dom";
 import { Menu, SubMenu, MenuItem, MenuButton } from "@szhsin/react-menu";
 
-import { fetchTags, fetchTagValues, setQuery, abortFetchTags, abortFetchTagValues } from "../redux/actions";
+import {
+  fetchTags,
+  fetchTagValues,
+  setQuery,
+  abortFetchTags,
+  abortFetchTagValues,
+} from "../redux/actions";
 import "../util/prism";
 
 function TagsBar({ query, actions, tags, tagValuesLoading }) {
@@ -42,10 +48,12 @@ function TagsBar({ query, actions, tags, tagValuesLoading }) {
   const loadTagValues = (tag) => {
     actions.fetchTagValues(query, tag);
   };
-  useEffect(() => {
-    // since fetchTagValues may be running
-    return actions.abortFetchTagValues;
-  }, [])
+  useEffect(
+    () =>
+      // since fetchTagValues may be running
+      actions.abortFetchTagValues,
+    []
+  );
 
   const onTagsValueChange = (tagKey, tagValue) => {
     let newQuery;