fix: reset fontSize on click of reset

Signed-off-by: SivaprasadAluri <sivaprasad_aluri@persistent.com>
opensearch-project · Sep 1, 2022 · d54d6ed · d54d6ed
1 parent e8edc0c
commit d54d6ed
Show file tree

Hide file tree

Showing 4 changed files with 165 additions and 89 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
@@ -9634,7 +9634,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                 "editor": [Function],
                                                 "id": "data-panel",
                                                 "mapTo": "dataConfig",
-                                                "name": "Data",
+                                                "name": "Style",
                                                 "sections": Array [
                                                   Object {
                                                     "editor": [Function],
@@ -13204,8 +13204,8 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                   />
                                                 </EuiSpacer>
                                                 <InputFieldItem
-                                                  currentValue=""
                                                   handleInputChange={[Function]}
+                                                  numValue=""
                                                   title="Label size"
                                                   vizState={Object {}}
                                                 >
@@ -13233,6 +13233,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                     onBlur={[Function]}
                                                     onChange={[Function]}
                                                     placeholder="auto"
+                                                    value=""
                                                   >
                                                     <EuiFormControlLayout
                                                       compressed={false}
@@ -13256,6 +13257,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                               onChange={[Function]}
                                                               placeholder="auto"
                                                               type="number"
+                                                              value=""
                                                             />
                                                           </EuiValidatableControl>
                                                           <EuiFormControlLayoutIcons

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
@@ -9,95 +9,104 @@ import { ButtonGroupItem } from './config_button_group';
 import { IConfigPanelOptionSection } from '../../../../../../../../common/types/explorer';
 
 export const ConfigBarChartStyles = ({
-    visualizations,
-    schemas,
-    vizState,
-    handleConfigChange,
-    sectionName,
-    sectionId = 'chartStyles'
+  visualizations,
+  schemas,
+  vizState,
+  handleConfigChange,
+  sectionName,
+  sectionId = 'chartStyles',
 }: any) => {
-    const { data } = visualizations;
-    const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
+  const { data } = visualizations;
+  const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
 
-    const handleConfigurationChange = useCallback(
-        (stateFieldName) => {
-            return (changes) => {
-                handleConfigChange({
-                    ...vizState,
-                    [stateFieldName]: changes,
-                });
-            };
-        },
-        [handleConfigChange, vizState]
-    );
+  const handleConfigurationChange = useCallback(
+    (stateFieldName) => {
+      return (changes) => {
+        handleConfigChange({
+          ...vizState,
+          [stateFieldName]: changes,
+        });
+      };
+    },
+    [handleConfigChange, vizState]
+  );
 
-    /* To update the schema options based on current style mode selection */
-    const currentSchemas = useMemo(() => {
-        if (vizState?.orientation === 'h') {
-            return schemas.filter((schema: IConfigPanelOptionSection) => schema.mapTo !== 'rotateBarLabels');
-        }
-        return schemas;
-    }, [vizState]);
+  /* To update the schema options based on current style mode selection */
+  const currentSchemas = useMemo(() => {
+    if (vizState?.orientation === 'h') {
+      return schemas.filter(
+        (schema: IConfigPanelOptionSection) => schema.mapTo !== 'rotateBarLabels'
+      );
+    }
+    return schemas;
+  }, [vizState]);
 
-    const dimensions = useMemo(() =>
-        currentSchemas.map((schema: IConfigPanelOptionSection, index: number) => {
-            let params = {
-                title: schema.name,
-                vizState,
-                ...schema.props,
-            }
-            const DimensionComponent = schema.component || ButtonGroupItem;
+  const dimensions = useMemo(
+    () =>
+      currentSchemas
+        .map((schema: IConfigPanelOptionSection, index: number) => {
+          let params = {
+            title: schema.name,
+            vizState,
+            ...schema.props,
+          };
+          const DimensionComponent = schema.component || ButtonGroupItem;
 
-            const createDimensionComponent = (dimProps) => (
-                <Fragment key={`viz-series-${index}`}>
-                    <DimensionComponent  {...dimProps} />
-                    <EuiSpacer size="s" />
-                </Fragment>
-            )
-            if (schema.eleType === 'buttons') {
-                params = {
-                    ...params,
-                    legend: schema.name,
-                    groupOptions: schema?.props?.options.map((btn: { name: string }) => ({ ...btn, label: btn.name })),
-                    idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.id,
-                    handleButtonChange: handleConfigurationChange(schema.mapTo),
-                };
-                return createDimensionComponent(params);
-            }
-            if (schema.eleType === 'input') {
-                params = {
-                    title: schema.name,
-                    currentValue: vizState[schema.mapTo] || '',
-                    handleInputChange: handleConfigurationChange(schema.mapTo),
-                    vizState,
-                    ...schema.props,
-                };
-                return createDimensionComponent(params);
-            }
-            if (schema.eleType === 'slider') {
-                params = {
-                    ...params,
-                    minRange: schema?.props?.min || 0,
-                    maxRange: schema?.props?.max || 100,
-                    step: schema?.props?.step || 1,
-                    currentRange: vizState[schema.mapTo] || schema?.defaultState,
-                    ticks: schema?.props?.ticks,
-                    showTicks: schema?.props?.showTicks || false,
-                    handleSliderChange: handleConfigurationChange(schema.mapTo),
-                };
-                return createDimensionComponent(params);
-            }
-        }).filter(item => item)
-        , [schemas, vizState, handleConfigurationChange]);
+          const createDimensionComponent = (dimProps) => (
+            <Fragment key={`viz-series-${index}`}>
+              <DimensionComponent {...dimProps} />
+              <EuiSpacer size="s" />
+            </Fragment>
+          );
+          if (schema.eleType === 'buttons') {
+            params = {
+              ...params,
+              legend: schema.name,
+              groupOptions: schema?.props?.options.map((btn: { name: string }) => ({
+                ...btn,
+                label: btn.name,
+              })),
+              idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.id,
+              handleButtonChange: handleConfigurationChange(schema.mapTo),
+            };
+            return createDimensionComponent(params);
+          }
+          if (schema.eleType === 'input') {
+            params = {
+              title: schema.name,
+              numValue: vizState[schema.mapTo] || '',
+              handleInputChange: handleConfigurationChange(schema.mapTo),
+              vizState,
+              ...schema.props,
+            };
+            return createDimensionComponent(params);
+          }
+          if (schema.eleType === 'slider') {
+            params = {
+              ...params,
+              minRange: schema?.props?.min || 0,
+              maxRange: schema?.props?.max || 100,
+              step: schema?.props?.step || 1,
+              currentRange: vizState[schema.mapTo] || schema?.defaultState,
+              ticks: schema?.props?.ticks,
+              showTicks: schema?.props?.showTicks || false,
+              handleSliderChange: handleConfigurationChange(schema.mapTo),
+            };
+            return createDimensionComponent(params);
+          }
+        })
+        .filter((item) => item),
+    [schemas, vizState, handleConfigurationChange]
+  );
 
-    return (
-        <EuiAccordion
-            initialIsOpen
-            id={`configPanel__${sectionId}`}
-            buttonContent={sectionName}
-            paddingSize="s"
-        >
-            {dimensions}
-        </EuiAccordion>
-    );
+  return (
+    <EuiAccordion
+      initialIsOpen
+      id={`configPanel__${sectionId}`}
+      buttonContent={sectionName}
+      paddingSize="s"
+    >
+      {dimensions}
+    </EuiAccordion>
+  );
 };
diff --git a/...explorer/visualizations/config_panel/config_panes/config_controls/config_number_input.tsx b/...explorer/visualizations/config_panel/config_panes/config_controls/config_number_input.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { EuiFieldNumber, EuiTitle, EuiSpacer, htmlIdGenerator } from '@elastic/eui';
 
 interface InputFieldProps {
@@ -19,6 +19,13 @@ export const InputFieldItem: React.FC<InputFieldProps> = ({
 }) => {
   const [fieldValue, setFieldValue] = useState<number | string>(numValue);
 
+  useEffect(() => {
+    setFieldValue('');
+    if (numValue !== undefined || numValue !== '') {
+      setFieldValue(numValue);
+    }
+  }, [numValue]);
+
   return (
     <>
       <EuiTitle size="xxs">

diff --git a/...y/public/components/visualizations/charts/__tests__/__snapshots__/logs_view.test.tsx.snap b/...y/public/components/visualizations/charts/__tests__/__snapshots__/logs_view.test.tsx.snap
@@ -212,8 +212,66 @@ exports[`Logs View component Renders logs view component 1`] = `
               "editor": [Function],
               "id": "data-panel",
               "mapTo": "dataConfig",
-              "name": "Data",
+              "name": "Style",
               "sections": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "tooltip_options",
+                  "mapTo": "tooltipOptions",
+                  "name": "Tooltip options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipMode",
+                      "name": "Tooltip mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                          Object {
+                            "id": "hidden",
+                            "name": "Hidden",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipText",
+                      "name": "Tooltip text",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                          Object {
+                            "id": "x",
+                            "name": "Dimension",
+                          },
+                          Object {
+                            "id": "y",
+                            "name": "Metrics",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
                 Object {
                   "editor": [Function],
                   "id": "legend",