From 3af32cd72f5b1cf238a6b2189298a5ffca2aed7e Mon Sep 17 00:00:00 2001 From: Maksim Hodasevich Date: Mon, 26 Sep 2022 11:01:13 +0200 Subject: [PATCH 1/3] fix: heatmap test warning --- webapp/javascript/components/Heatmap/utils.ts | 2 +- webapp/javascript/services/exemplarsTestData.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/webapp/javascript/components/Heatmap/utils.ts b/webapp/javascript/components/Heatmap/utils.ts index dbea9e412e..d288ea4a3f 100644 --- a/webapp/javascript/components/Heatmap/utils.ts +++ b/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, diff --git a/webapp/javascript/services/exemplarsTestData.ts b/webapp/javascript/services/exemplarsTestData.ts index 098b7b5dd6..79b31668bc 100644 --- a/webapp/javascript/services/exemplarsTestData.ts +++ b/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: [ From 226ce5508128ff4b64cb34cc4b83a46a52e30f09 Mon Sep 17 00:00:00 2001 From: Maksim Hodasevich Date: Mon, 26 Sep 2022 14:17:46 +0200 Subject: [PATCH 2/3] fix: 404 error after /exemplars/single, /exemplars/merge pages reload --- pkg/server/controller.go | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/pkg/server/controller.go b/pkg/server/controller.go index 0235c0eafb..00ca1fd8d5 100644 --- a/pkg/server/controller.go +++ b/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())) From c59503f4cca3a71fd85f928174de9a48585a2a9d Mon Sep 17 00:00:00 2001 From: Maksim Hodasevich Date: Mon, 26 Sep 2022 16:39:14 +0200 Subject: [PATCH 3/3] feat: start new selection from existed selected area --- .../javascript/components/Heatmap/index.tsx | 39 ++++++++++--------- .../Heatmap/useHeatmapSelection.hook.spec.tsx | 4 +- .../Heatmap/useHeatmapSelection.hook.ts | 26 +++++++++---- 3 files changed, 43 insertions(+), 26 deletions(-) diff --git a/webapp/javascript/components/Heatmap/index.tsx b/webapp/javascript/components/Heatmap/index.tsx index 3c8263000d..4ac6336c23 100644 --- a/webapp/javascript/components/Heatmap/index.tsx +++ b/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(null); const heatmapRef = useRef(null); + const resizedSelectedAreaRef = useRef(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 && ( - - )} + {heatmapGrid} ; 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 (
; +const resizedSelectedAreaRef = { current: divEl } as RefObject; 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), }); }); diff --git a/webapp/javascript/components/Heatmap/useHeatmapSelection.hook.ts b/webapp/javascript/components/Heatmap/useHeatmapSelection.hook.ts index 3d1b52f372..e9ff3dbc50 100644 --- a/webapp/javascript/components/Heatmap/useHeatmapSelection.hook.ts +++ b/webapp/javascript/components/Heatmap/useHeatmapSelection.hook.ts @@ -16,6 +16,7 @@ interface SelectedCoordinates { } interface UseHeatmapSelectionProps { canvasRef: RefObject; + resizedSelectedAreaRef: RefObject; 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(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, }; };