fix: heatmap small fixes

pkg/server/controller.go

@@ -258,7 +258,8 @@ func (ctrl *Controller) serverMux() (http.Handler, error) {
 		{"/settings", ih},
 		{"/settings/{page}", ih},
 		{"/settings/{page}/{subpage}", ih},
-		{"/forbidden", ih},
+		{"/exemplars/single", ih},
+		{"/exemplars/merge", ih},
 		{"/explore", ih}},
 		ctrl.drainMiddleware,
 		ctrl.authMiddleware(ctrl.indexHandler()))

webapp/javascript/components/Heatmap/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useMemo, useEffect } from 'react';
+import React, { useState, useRef, useMemo, useEffect, RefObject } from 'react';
 import useResizeObserver from '@react-hook/resize-observer';
 import Color from 'color';
 import cl from 'classnames';
@@ -33,14 +33,17 @@ interface HeatmapProps {
 export function Heatmap({ heatmap, onSelection }: HeatmapProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const heatmapRef = useRef<HTMLDivElement>(null);
+  const resizedSelectedAreaRef = useRef<HTMLDivElement>(null);
   const [heatmapW, setHeatmapW] = useState(0);
 
-  const {
-    selectedCoordinates,
-    selectedAreaToHeatmapRatio,
-    hasSelectedArea,
-    resetSelection,
-  } = useHeatmapSelection({ canvasRef, heatmapW, heatmap, onSelection });
+  const { selectedCoordinates, selectedAreaToHeatmapRatio, resetSelection } =
+    useHeatmapSelection({
+      canvasRef,
+      resizedSelectedAreaRef,
+      heatmapW,
+      heatmap,
+      onSelection,
+    });
 
   useEffect(() => {
     if (heatmapRef.current) {
@@ -126,17 +129,14 @@ export function Heatmap({ heatmap, onSelection }: HeatmapProps) {
         max={heatmap.maxValue}
         ticksNumber={5}
       />
-      {hasSelectedArea &&
-        selectedCoordinates.end &&
-        selectedCoordinates.start && (
-          <ResizedSelectedArea
-            start={selectedCoordinates.start}
-            end={selectedCoordinates.end}
-            containerW={heatmapW}
-            resizeRatio={selectedAreaToHeatmapRatio}
-            handleClick={resetSelection}
-          />
-        )}
+      <ResizedSelectedArea
+        resizedSelectedAreaRef={resizedSelectedAreaRef}
+        start={selectedCoordinates.start || { x: 0, y: 0 }}
+        end={selectedCoordinates.end || { x: 0, y: 0 }}
+        containerW={heatmapW}
+        resizeRatio={selectedAreaToHeatmapRatio}
+        handleClick={resetSelection}
+      />
       <svg role="img" className={styles.heatmapSvg} height={HEATMAP_HEIGHT}>
         {heatmapGrid}
         <foreignObject
@@ -184,6 +184,7 @@ export function Heatmap({ heatmap, onSelection }: HeatmapProps) {
 }
 
 interface ResizedSelectedArea {
+  resizedSelectedAreaRef: RefObject<HTMLDivElement>;
   containerW: number;
   start: SelectedAreaCoordsType;
   end: SelectedAreaCoordsType;
@@ -192,6 +193,7 @@ interface ResizedSelectedArea {
 }
 
 function ResizedSelectedArea({
+  resizedSelectedAreaRef,
   containerW,
   start,
   end,
@@ -207,6 +209,7 @@ function ResizedSelectedArea({
 
   return (
     <div
+      ref={resizedSelectedAreaRef}
       data-testid="selection-resizable-canvas"
       onClick={handleClick}
       className={styles.selectedAreaBlock}

webapp/javascript/components/Heatmap/useHeatmapSelection.hook.spec.tsx

@@ -9,7 +9,9 @@ import { useHeatmapSelection } from './useHeatmapSelection.hook';
 import { heatmapMockData } from '../../services/exemplarsTestData';
 
 const canvasEl = document.createElement('canvasEl');
+const divEl = document.createElement('div');
 const canvasRef = { current: canvasEl } as RefObject<HTMLCanvasElement>;
+const resizedSelectedAreaRef = { current: divEl } as RefObject<HTMLDivElement>;
 
 function createStore(preloadedState: any) {
   const store = configureStore({
@@ -29,6 +31,7 @@ describe('Hook: useHeatmapSelection', () => {
       () =>
         useHeatmapSelection({
           canvasRef,
+          resizedSelectedAreaRef,
           heatmapW: 1234,
           heatmap: heatmapMockData,
           onSelection: () => ({}),
@@ -55,7 +58,6 @@ describe('Hook: useHeatmapSelection', () => {
     expect(current).toMatchObject({
       selectedCoordinates: { start: null, end: null },
       selectedAreaToHeatmapRatio: 1,
-      hasSelectedArea: false,
       resetSelection: expect.any(Function),
     });
   });

webapp/javascript/components/Heatmap/useHeatmapSelection.hook.ts

@@ -16,6 +16,7 @@ interface SelectedCoordinates {
 }
 interface UseHeatmapSelectionProps {
   canvasRef: RefObject<HTMLCanvasElement>;
+  resizedSelectedAreaRef: RefObject<HTMLDivElement>;
   heatmapW: number;
   heatmap: Heatmap;
   onSelection: (
@@ -27,23 +28,21 @@ interface UseHeatmapSelectionProps {
 }
 interface UseHeatmapSelection {
   selectedCoordinates: SelectedCoordinates;
-  hasSelectedArea: boolean;
   selectedAreaToHeatmapRatio: number;
   resetSelection: () => void;
 }
 
 export const useHeatmapSelection = ({
   canvasRef,
+  resizedSelectedAreaRef,
   heatmapW,
   heatmap,
   onSelection,
 }: UseHeatmapSelectionProps): UseHeatmapSelection => {
-  const [hasSelectedArea, setHasSelectedArea] = useState(false);
   const [selectedCoordinates, setSelectedCoordinates] =
     useState<SelectedCoordinates>(DEFAULT_SELECTED_COORDINATES);
 
   const resetSelection = () => {
-    setHasSelectedArea(false);
     setSelectedCoordinates(DEFAULT_SELECTED_COORDINATES);
     startCoords = null;
     endCoords = null;
@@ -108,7 +107,6 @@ export const useHeatmapSelection = ({
     if (startCoords) {
       const canvas = canvasRef.current as HTMLCanvasElement;
       const { left, top, width, height } = canvas.getBoundingClientRect();
-      setHasSelectedArea(true);
       clearRect(canvas);
 
       const xCursorPosition = e.clientX - left;
@@ -188,12 +186,27 @@ export const useHeatmapSelection = ({
       canvasRef.current.addEventListener('mousedown', startDrawing);
     }
 
+    if (resizedSelectedAreaRef.current) {
+      resizedSelectedAreaRef.current.addEventListener(
+        'mousedown',
+        startDrawing
+      );
+    }
+
     return () => {
       if (canvasRef.current) {
         canvasRef.current.removeEventListener('mousedown', startDrawing);
-        window.removeEventListener('mousemove', handleDrawingEvent);
-        window.removeEventListener('mouseup', endDrawing);
       }
+
+      if (resizedSelectedAreaRef.current) {
+        resizedSelectedAreaRef.current.removeEventListener(
+          'mousedown',
+          startDrawing
+        );
+      }
+
+      window.removeEventListener('mousemove', handleDrawingEvent);
+      window.removeEventListener('mouseup', endDrawing);
     };
   }, [heatmap, heatmapW]);
 
@@ -210,7 +223,6 @@ export const useHeatmapSelection = ({
   return {
     selectedCoordinates,
     selectedAreaToHeatmapRatio,
-    hasSelectedArea,
     resetSelection,
   };
 };

webapp/javascript/components/Heatmap/utils.ts

@@ -1,8 +1,8 @@
 import type { Heatmap } from '@webapp/services/render';
 
+import { getTimelineFormatDate } from '@webapp/util/formatDate';
 import { SELECTED_AREA_BACKGROUND, HEATMAP_HEIGHT } from './constants';
 import type { SelectedAreaCoordsType } from './useHeatmapSelection.hook';
-import { getTimelineFormatDate } from '@webapp/util/formatDate';
 
 export const drawRect = (
   canvas: HTMLCanvasElement,

webapp/javascript/services/exemplarsTestData.ts

@@ -1,10 +1,10 @@
 export const heatmapMockData = {
-  endTime: 1659642600000,
+  endTime: 1859642600000000,
   maxDepth: 23077,
   maxValue: 110,
   minDepth: 1,
   minValue: 1,
-  startTime: 1659642000000,
+  startTime: 1659642000000000,
   timeBuckets: 60,
   valueBuckets: 32,
   values: [