[Explore Vis]delete debounce for add threshold and deletion (#10880)

* fix debounce

Signed-off-by: Qxisylolo <[email protected]>

* Changeset file for PR #10880 created/updated

* fix

Signed-off-by: Qxisylolo <[email protected]>

---------

Signed-off-by: Qxisylolo <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

Author: Qxisylolo

changelogs/fragments/10880.yml

@@ -0,0 +1,2 @@
+fix:
+- Delete debounce for add threshold and deletion ([#10880](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10880))

src/plugins/explore/public/components/visualizations/style_panel/threshold/threshold_custom_values.test.tsx

@@ -30,11 +30,10 @@ describe('ThresholdCustomValues component', () => {
     expect(screen.getByTestId('exploreVisThreshold-0')).toBeInTheDocument();
   });
 
-  it('adds a new range when "+ Add threshold" is clicked', async () => {
+  it('adds a new range when "+ Add threshold" is clicked', () => {
     const { handleChange } = setup([{ value: 0, color: '#f8f8f8ff' }]);
 
     fireEvent.click(screen.getByText('+ Add threshold'));
-    await new Promise((resolve) => setTimeout(resolve, 1000));
     expect(handleChange).toHaveBeenCalledWith([
       { value: 0, color: '#f8f8f8ff' },
       { value: 100, color: '#FF6A3D' },
@@ -51,11 +50,10 @@ describe('ThresholdCustomValues component', () => {
     expect(handleChange).toHaveBeenCalledWith([{ value: 5, color: '#f8f8f8ff' }]);
   });
 
-  it('deletes a threshold when trash icon is clicked', async () => {
+  it('deletes a threshold when trash icon is clicked', () => {
     const { handleChange } = setup([{ value: 0, color: '#f8f8f8ff' }]);
     const deleteButton = screen.getByTestId('exploreVisThresholdDeleteButton-0');
     fireEvent.click(deleteButton);
-    await new Promise((resolve) => setTimeout(resolve, 1000));
     expect(handleChange).toHaveBeenCalledWith([]);
   });
 

src/plugins/explore/public/components/visualizations/style_panel/threshold/threshold_custom_values.tsx

@@ -142,8 +142,9 @@ export const ThresholdCustomValues: React.FC<ThresholdCustomValuesProps> = ({
     const newRange = { value: newDefaultValue, color: getNextColor(curRangeLength + 1) };
 
     const updated = [...ranges, newRange];
-    debouncedSort(updated);
-  }, [ranges, debouncedSort]);
+    setRanges(updated);
+    onThresholdValuesChange(updated);
+  }, [ranges, onThresholdValuesChange]);
 
   const getNextColor = (rangesLength: number): string => {
     const index = rangesLength % THRESHOLD_COLORS.length;
@@ -153,9 +154,10 @@ export const ThresholdCustomValues: React.FC<ThresholdCustomValuesProps> = ({
   const handleDeleteRange = useCallback(
     (index: number) => {
       const updated = ranges.filter((_, i) => i !== index);
-      debouncedSort(updated);
+      setRanges(updated);
+      onThresholdValuesChange(updated);
     },
-    [debouncedSort, ranges]
+    [onThresholdValuesChange, ranges]
   );
 
   const [localBaseColor, setLocalBaseColor] = useDebouncedValue<string>(