From 18372228bab4237177afc88c4a25c495f4838916 Mon Sep 17 00:00:00 2001 From: Axel Bocciarelli Date: Fri, 3 May 2024 11:32:22 +0200 Subject: [PATCH] Remove debounce on dimension mapping state to reduce lag --- packages/app/src/__tests__/DimensionMapper.test.tsx | 6 +++--- packages/app/src/dimension-mapper/hooks.ts | 13 +++++-------- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/app/src/__tests__/DimensionMapper.test.tsx b/packages/app/src/__tests__/DimensionMapper.test.tsx index 30f1825a6..45d8f2355 100644 --- a/packages/app/src/__tests__/DimensionMapper.test.tsx +++ b/packages/app/src/__tests__/DimensionMapper.test.tsx @@ -1,5 +1,5 @@ import { screen, within } from '@testing-library/react'; -import { expect, test, vi } from 'vitest'; +import { expect, test } from 'vitest'; import { renderApp, waitForAllLoaders } from '../test-utils'; import { Vis } from '../vis-packs/core/visualizations'; @@ -30,7 +30,7 @@ test('control mapping for X axis when visualizing 2D dataset as Line', async () // Change mapping from [0, 'x'] to ['x', 0] await user.click(xDimsButtons[0]); - await vi.waitFor(() => expect(xDimsButtons[0]).toBeChecked()); + expect(xDimsButtons[0]).toBeChecked(); expect(xDimsButtons[1]).not.toBeChecked(); // Ensure that the dimension slider is now for D1 @@ -63,7 +63,7 @@ test('control mapping for X and Y axes when visualizing 2D dataset as Heatmap', // Change mapping from ['y', 'x'] to ['x', 'y'] await user.click(xD0Button); - await vi.waitFor(() => expect(xD0Button).toBeChecked()); + expect(xD0Button).toBeChecked(); expect(xD1Button).not.toBeChecked(); expect(yD0Button).not.toBeChecked(); expect(yD1Button).toBeChecked(); diff --git a/packages/app/src/dimension-mapper/hooks.ts b/packages/app/src/dimension-mapper/hooks.ts index ee9529574..69ea890db 100644 --- a/packages/app/src/dimension-mapper/hooks.ts +++ b/packages/app/src/dimension-mapper/hooks.ts @@ -1,13 +1,10 @@ -import { useDebouncedState } from '@react-hookz/web'; +import { useState } from 'react'; import type { DimensionMapping } from './models'; export function useDimMappingState(dims: number[], axesCount: number) { - return useDebouncedState( - [ - ...Array.from({ length: dims.length - axesCount }, () => 0), - ...['y' as const, 'x' as const].slice(-axesCount), - ], - 100, - ); + return useState([ + ...Array.from({ length: dims.length - axesCount }, () => 0), + ...['y' as const, 'x' as const].slice(-axesCount), + ]); }