fix(frontend): comparison diff ui fixes (#627)

* fix(frontend): comparison diff ui fixes

* bring back that table | both | flamegraph in toolbar
* reduce legend size for smaller screens

webapp/javascript/components/ComparisonDiffApp.jsx

@@ -31,7 +31,11 @@ function ComparisonDiffApp(props) {
           viewSide="both"
         />
         <Box>
-          <FlameGraphRenderer viewType="diff" flamebearer={diff.flamebearer}>
+          <FlameGraphRenderer
+            display="both"
+            viewType="diff"
+            flamebearer={diff.flamebearer}
+          >
             <div className="diff-instructions-wrapper">
               <div className="diff-instructions-wrapper-side">
                 <InstructionText viewType="diff" viewSide="left" />

webapp/javascript/components/FlameGraph/FlameGraphComponent/DiffLegend.tsx

@@ -1,14 +1,18 @@
 import React from 'react';
+import useResizeObserver from '@react-hook/resize-observer';
 import { colorFromPercentage } from './color';
 import styles from './DiffLegend.module.css';
 
 export default function DiffLegend() {
-  const values = [100, 80, 60, 40, 20, 10, 0, -10, -20, -40, -60, -80, -100];
+  const legendRef = React.useRef();
+  const showMode = useSizeMode(legendRef);
+  const values = decideLegend(showMode);
 
   return (
     <div
       className={`row ${styles['flamegraph-legend']}`}
       data-testid="flamegraph-legend"
+      ref={legendRef}
     >
       <div className={styles['flamegraph-legend-list']}>
         {values.map((v) => (
@@ -27,3 +31,53 @@ export default function DiffLegend() {
     </div>
   );
 }
+
+function decideLegend(showMode: ReturnType<typeof useSizeMode>) {
+  switch (showMode) {
+    case 'large': {
+      return [100, 80, 60, 40, 20, 10, 0, -10, -20, -40, -60, -80, -100];
+    }
+
+    case 'small': {
+      return [100, 40, 20, 0, -20, -40, -100];
+    }
+
+    default:
+      throw new Error(`Unsupported ${showMode}`);
+  }
+}
+
+/**
+ * TODO: unify this and toolbar's
+ * Custom hook that returns the size ('large' | 'small')
+ * that should be displayed
+ * based on the toolbar width
+ */
+// arbitrary value
+// as a simple heuristic, try to run the comparison view
+// and see when the buttons start to overlap
+const WIDTH_THRESHOLD = 600;
+const useSizeMode = (target: React.RefObject<HTMLDivElement>) => {
+  const [size, setSize] = React.useState<'large' | 'small'>('large');
+
+  const calcMode = (width: number) => {
+    if (width < WIDTH_THRESHOLD) {
+      return 'small';
+    }
+    return 'large';
+  };
+
+  React.useLayoutEffect(() => {
+    if (target.current) {
+      const { width } = target.current.getBoundingClientRect();
+
+      setSize(calcMode(width));
+    }
+  }, [target.current]);
+
+  useResizeObserver(target, (entry: ResizeObserverEntry) => {
+    setSize(calcMode(entry.contentRect.width));
+  });
+
+  return size;
+};

webapp/javascript/components/FlameGraph/FlameGraphComponent/styles.css

@@ -24,9 +24,8 @@ THIS SOFTWARE.
 .pane-wrapper .flamegraph-pane,
 .flamegraph-pane {
   flex: 1;
-  width: 100%;
   position: relative;
-  /*  margin: 0 6px; */
+  width: 50%;
 }
 
 /*.flamegraph-pane.vertical-orientation {