Bug/range slider issue (#1122)

* range slide tootip and beyond range value bug Signed-off-by: Abhay Pandey <[email protected]> * removed unwanted code Signed-off-by: Abhay Pandey <[email protected]> * pr changes Signed-off-by: Abhay Pandey <[email protected]> * removed unused code Signed-off-by: Abhay Pandey <[email protected]> * snapshot updated Signed-off-by: Abhay Pandey <[email protected]> Signed-off-by: Abhay Pandey <[email protected]>
opensearch-project · Oct 13, 2022 · 249ab50 · 249ab50
1 parent 2989fe7
commit 249ab50
Showing 6 changed files with 370 additions and 72 deletions.
diff --git a/...s/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/...s/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
diff --git a/...orer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles.tsx b/...orer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles.tsx
@@ -21,12 +21,18 @@ export const ConfigBarChartStyles = ({
   const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
 
   const handleConfigurationChange = useCallback(
-    (stateFieldName) => {
+    (stateFieldName, max) => {
       return (changes) => {
-        handleConfigChange({
-          ...vizState,
-          [stateFieldName]: changes,
-        });
+        if (!max || changes <= max) {
+          handleConfigChange({
+            ...vizState,
+            [stateFieldName]: changes,
+          });
+        } else {
+          handleConfigChange({
+            ...vizState,
+          });
+        }
       };
     },
     [handleConfigChange, vizState]
@@ -68,15 +74,15 @@ export const ConfigBarChartStyles = ({
                 label: btn.name,
               })),
               idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.id,
-              handleButtonChange: handleConfigurationChange(schema.mapTo),
+              handleButtonChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
             };
             return createDimensionComponent(params);
           }
           if (schema.eleType === 'input') {
             params = {
               title: schema.name,
               numValue: vizState[schema.mapTo] || '',
-              handleInputChange: handleConfigurationChange(schema.mapTo),
+              handleInputChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
               vizState,
               ...schema.props,
             };
@@ -91,7 +97,7 @@ export const ConfigBarChartStyles = ({
               currentRange: vizState[schema.mapTo] || schema?.defaultState,
               ticks: schema?.props?.ticks,
               showTicks: schema?.props?.showTicks || false,
-              handleSliderChange: handleConfigurationChange(schema.mapTo),
+              handleSliderChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
             };
             return createDimensionComponent(params);
           }

diff --git a/...xplorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx b/...xplorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx
@@ -22,12 +22,18 @@ export const ConfigChartOptions = ({
   const { data: vizData = {}, metadata: { fields = [] } = {}, tree_map } = data?.rawVizData;
 
   const handleConfigurationChange = useCallback(
-    (stateFiledName) => {
+    (stateFiledName, max) => {
       return (changes) => {
-        handleConfigChange({
-          ...vizState,
-          [stateFiledName]: changes,
-        });
+        if (!max || changes <= max) {
+          handleConfigChange({
+            ...vizState,
+            [stateFiledName]: changes,
+          });
+        } else {
+          handleConfigChange({
+            ...vizState,
+          });
+        }
       };
     },
     [handleConfigChange, vizState]
@@ -60,15 +66,15 @@ export const ConfigChartOptions = ({
               ...params,
               colorPalettes: schema.options || [],
               selectedColor: vizState[schema.mapTo] || schema.defaultState,
-              onSelectChange: handleConfigurationChange(schema.mapTo),
+              onSelectChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
             };
             break;
 
           case ConfigChartOptionsEnum.singleColorPicker:
             params = {
               ...params,
               selectedColor: vizState[schema.mapTo] || schema.defaultState,
-              onSelectChange: handleConfigurationChange(schema.mapTo),
+              onSelectChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
             };
             break;
 
@@ -77,7 +83,7 @@ export const ConfigChartOptions = ({
               ...params,
               selectedColor: vizState[schema.mapTo] || schema?.defaultState,
               colorPalettes: schema.options || [],
-              onSelectChange: handleConfigurationChange(schema.mapTo),
+              onSelectChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
             };
             break;
 
@@ -89,7 +95,7 @@ export const ConfigChartOptions = ({
               numberOfParents:
                 (tree_map?.dataConfig?.dimensions !== undefined &&
                   tree_map?.dataConfig.dimensions[0].parentFields.length) | 0,
-              onSelectChange: handleConfigurationChange(schema.mapTo),
+              onSelectChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
             };
             break;
 
@@ -98,7 +104,7 @@ export const ConfigChartOptions = ({
               ...params,
               currentValue: vizState[schema.mapTo] || '',
               numValue: vizState[schema.mapTo] || '',
-              handleInputChange: handleConfigurationChange(schema.mapTo),
+              handleInputChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
               minLimit: schema.props?.hasOwnProperty('minLimit')
                 ? schema.props.minLimit
                 : NUMBER_INPUT_MIN_LIMIT,
@@ -110,7 +116,7 @@ export const ConfigChartOptions = ({
               ...params,
               currentValue: vizState[schema.mapTo] || '',
               name: schema.mapTo,
-              handleInputChange: handleConfigurationChange(schema.mapTo),
+              handleInputChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
             };
             break;
 
@@ -119,7 +125,7 @@ export const ConfigChartOptions = ({
               ...params,
               maxRange: schema.props.max,
               currentRange: vizState[schema.mapTo] || schema?.defaultState,
-              handleSliderChange: handleConfigurationChange(schema.mapTo),
+              handleSliderChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
             };
             break;
 
@@ -128,7 +134,7 @@ export const ConfigChartOptions = ({
               ...params,
               title: schema.name,
               currentValue: vizState[schema.mapTo],
-              onToggle: handleConfigurationChange(schema.mapTo),
+              onToggle: handleConfigurationChange(schema.mapTo, schema?.props?.max),
             };
             break;
 
@@ -142,7 +148,7 @@ export const ConfigChartOptions = ({
                 label: btn.name,
               })),
               idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.id,
-              handleButtonChange: handleConfigurationChange(schema.mapTo),
+              handleButtonChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
             };
             break;
 
@@ -152,7 +158,7 @@ export const ConfigChartOptions = ({
               paddingTitle: schema.name,
               advancedTitle: 'advancedTitle',
               dropdownList: schema?.options || fields,
-              onSelectChange: handleConfigurationChange(schema.mapTo),
+              onSelectChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
               isSingleSelection: schema.isSingleSelection,
               selectedAxis: vizState[schema.mapTo] || schema.defaultState,
             };

diff --git a/...rer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx b/...rer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx
@@ -21,12 +21,18 @@ export const ConfigLineChartStyles = ({
   const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
 
   const handleConfigurationChange = useCallback(
-    (stateFiledName) => {
+    (stateFiledName, max) => {
       return (changes) => {
-        handleConfigChange({
-          ...vizState,
-          [stateFiledName]: changes,
-        });
+        if (!max || changes <= max) {
+          handleConfigChange({
+            ...vizState,
+            [stateFiledName]: changes,
+          });
+        } else {
+          handleConfigChange({
+            ...vizState,
+          });
+        }
       };
     },
     [handleConfigChange, vizState]
@@ -82,7 +88,7 @@ export const ConfigLineChartStyles = ({
               label: btn.name,
             })),
             idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.id,
-            handleButtonChange: handleConfigurationChange(schema.mapTo),
+            handleButtonChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
           };
         } else if (schema.eleType === 'slider') {
           params = {
@@ -93,18 +99,18 @@ export const ConfigLineChartStyles = ({
             currentRange: vizState[schema.mapTo] || schema?.defaultState,
             ticks: schema?.props?.ticks,
             showTicks: schema?.props?.showTicks || false,
-            handleSliderChange: handleConfigurationChange(schema.mapTo),
+            handleSliderChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
           };
         } else if (schema.eleType === 'input') {
           params = {
             ...params,
             numValue: vizState[schema.mapTo] || '',
-            handleInputChange: handleConfigurationChange(schema.mapTo),
+            handleInputChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
           };
         }
         return (
           <Fragment key={`viz-series-${index}`}>
-            <DimensionComponent  {...params} />
+            <DimensionComponent {...params} />
             <EuiSpacer size="s" />
           </Fragment>
         );

diff --git a/...xplorer/visualizations/config_panel/config_panes/config_controls/config_panel_options.tsx b/...xplorer/visualizations/config_panel/config_panes/config_controls/config_panel_options.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { EuiFieldText, EuiForm, EuiFormRow, EuiTextArea, EuiAccordion } from '@elastic/eui';
 import { VIS_CHART_TYPES } from '../../../../../../../../common/constants/shared';
 import { DEFAULT_GAUGE_CHART_PARAMETERS } from '../../../../../../../../common/constants/explorer';

diff --git a/...explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx b/...explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx
@@ -4,7 +4,8 @@
  */
 
 import React, { ReactNode } from 'react';
-import { EuiTitle, EuiSpacer, EuiRange, htmlIdGenerator } from '@elastic/eui';
+import { EuiTitle, EuiSpacer, EuiRange, htmlIdGenerator, EuiToolTip, EuiIcon } from '@elastic/eui';
+const tooltipIcon = <EuiIcon type="iInCircle" color="text" size="m" className="info-icon" />;
 
 export interface EuiRangeTick {
   value: number;
@@ -24,6 +25,12 @@ interface Props {
   ) => void;
 }
 
+const rangeToolTip = (message: string) => (
+  <EuiToolTip position="top" content={message} delay="regular" anchorClassName="eui-textTruncate">
+    {tooltipIcon}
+  </EuiToolTip>
+);
+
 export const SliderConfig: React.FC<Props> = ({
   title,
   currentRange,
@@ -35,9 +42,12 @@ export const SliderConfig: React.FC<Props> = ({
   step,
 }) => (
   <>
-    <EuiTitle size="xxs">
-      <h3>{title}</h3>
-    </EuiTitle>
+    <div style={{ display: 'flex' }}>
+      <EuiTitle size="xxs">
+        <h3>{title}</h3>
+      </EuiTitle>
+      {rangeToolTip(`Value must be in the range of ${minRange} to ${maxRange}`)}
+    </div>
     <EuiSpacer size="s" />
     <EuiRange
       aria-label="change lineWidth slider"