Updated breakdowns with updated UI of configuration panel (#1077)

Signed-off-by: ruchika-narang <[email protected]> Signed-off-by: ruchika-narang <[email protected]>
opensearch-project · Oct 6, 2022 · 5cfca38 · 5cfca38
1 parent 1267ae9
commit 5cfca38
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 59 deletions.
diff --git a/common/constants/explorer.ts b/common/constants/explorer.ts
@@ -245,3 +245,4 @@ export enum ConfigChartOptionsEnum {
 }
 
 export const CUSTOM_LABEL = 'customLabel';
+export const BREAKDOWNS = 'breakdowns';
diff --git a/common/types/explorer.ts b/common/types/explorer.ts
@@ -20,6 +20,7 @@ import {
   GROUPBY,
   AGGREGATIONS,
   CUSTOM_LABEL,
+  BREAKDOWNS,
 } from '../constants/explorer';
 import {
   CoreStart,
@@ -301,7 +302,7 @@ export interface DimensionSpan {
 export interface ConfigList {
   [GROUPBY]?: ConfigListEntry[] | HistogramConfigList[];
   [AGGREGATIONS]?: ConfigListEntry[];
-  breakdowns?: ConfigListEntry[] | HistogramConfigList[];
+  [BREAKDOWNS]?: ConfigListEntry[] | HistogramConfigList[];
   span?: DimensionSpan;
 }
 

diff --git a/...er/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx b/...er/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
@@ -23,6 +23,7 @@ import { batch, useDispatch } from 'react-redux';
 import {
   AGGREGATIONS,
   AGGREGATION_OPTIONS,
+  BREAKDOWNS,
   CUSTOM_LABEL,
   GROUPBY,
   RAW_QUERY,
@@ -36,6 +37,7 @@ import {
   ConfigListEntry,
   DataConfigPanelFieldProps,
   DataConfigPanelProps,
+  SelectedConfigItem,
 } from '../../../../../../../../common/types/explorer';
 import { TabContext } from '../../../../../hooks';
 import { changeQuery } from '../../../../../redux/slices/query_slice';
@@ -128,10 +130,15 @@ export const DataConfigPanelItem = ({
     setIsAddConfigClicked(true);
     const list = {
       ...configList,
-      [name]: [
-        ...configList[name],
-        name === AGGREGATIONS ? initialSeriesEntry : initialDimensionEntry,
-      ],
+      [name]:
+        name !== `${BREAKDOWNS}`
+          ? [
+              ...configList[name],
+              name === AGGREGATIONS ? initialSeriesEntry : initialDimensionEntry,
+            ]
+          : configList[name] !== undefined
+          ? [...configList[name], initialDimensionEntry]
+          : [initialDimensionEntry],
     };
     setSelectedConfigItem({ index: list[name].length - 1, name });
     setConfigList(list);
@@ -197,7 +204,7 @@ export const DataConfigPanelItem = ({
                 ...userConfigs.dataConfig,
                 [GROUPBY]: updatedConfigList[GROUPBY],
                 [AGGREGATIONS]: updatedConfigList[AGGREGATIONS],
-                breakdowns: updatedConfigList.breakdowns,
+                [BREAKDOWNS]: updatedConfigList[BREAKDOWNS],
                 span: updatedConfigList.span,
               },
             },
@@ -220,13 +227,15 @@ export const DataConfigPanelItem = ({
       : visualizations.vis.name === VIS_CHART_TYPES.Line ||
         visualizations.vis.name === VIS_CHART_TYPES.Scatter
       ? unselectedFields.filter((i) => i.type === 'timestamp')
+      : sectionName === BREAKDOWNS
+      ? configList[GROUPBY]
       : unselectedFields;
   };
 
   const getCommonUI = (title: string) => {
     const { index, name } = selectedConfigItem;
     const selectedObj = configList[name][index];
-    const isDimensions = name === GROUPBY;
+    const isAggregations = name === AGGREGATIONS;
     return (
       <>
         <div className="services">
@@ -238,7 +247,7 @@ export const DataConfigPanelItem = ({
             />
             <EuiPanel color="subdued" style={{ padding: '0px' }}>
               {/* Aggregation input for Series */}
-              {!isDimensions && (
+              {isAggregations && (
                 <EuiFormRow label="Aggregation">
                   <EuiComboBox
                     aria-label="aggregation input"
@@ -259,7 +268,7 @@ export const DataConfigPanelItem = ({
                 </EuiFormRow>
               )}
               {/* Show input fields for Series when aggregation is not empty  */}
-              {!isDimensions && selectedObj.aggregation !== '' && (
+              {isAggregations && selectedObj.aggregation !== '' && (
                 <>
                   {getCommonDimensionsField(selectedObj, name)}
                   <EuiFormRow label="Custom label">
@@ -273,7 +282,7 @@ export const DataConfigPanelItem = ({
                 </>
               )}
               {/* Show input fields for dimensions */}
-              {isDimensions && getCommonDimensionsField(selectedObj, name)}
+              {!isAggregations && getCommonDimensionsField(selectedObj, name)}
               {isPositionButtonVisible(name) && (
                 <EuiFormRow label="Side">
                   <ButtonGroupItem
@@ -334,43 +343,6 @@ export const DataConfigPanelItem = ({
     </>
   );
 
-  const getBreakDownFields = useCallback(
-    (configList: ConfigList) => {
-      return configList[GROUPBY];
-    },
-    [configList[GROUPBY]]
-  );
-
-  const Breakdowns = () => {
-    return (
-      <>
-        <div className="services">
-          <div className="first-division">
-            <EuiPanel color="subdued" style={{ padding: '0px' }}>
-              <EuiFormRow label="Fields">
-                <EuiComboBox
-                  aria-label="Accessible screen reader label"
-                  placeholder="Select fields"
-                  singleSelection={false}
-                  options={configList[GROUPBY]}
-                  selectedOptions={configList.breakdowns ?? []}
-                  onChange={(fields) => {
-                    setConfigList((staleState) => {
-                      return {
-                        ...staleState,
-                        breakdowns: fields,
-                      };
-                    });
-                  }}
-                />
-              </EuiFormRow>
-            </EuiPanel>
-          </div>
-        </div>
-      </>
-    );
-  };
-
   const DateHistogram = useMemo(() => {
     return (
       <>
@@ -455,7 +427,7 @@ export const DataConfigPanelItem = ({
 
   const getRenderFieldsObj = (sectionName: string): DataConfigPanelFieldProps => {
     return {
-      list: configList[sectionName],
+      list: configList[sectionName] ?? [],
       sectionName,
       visType: visualizations.vis.name,
       addButtonText: 'Click to add',
@@ -485,12 +457,7 @@ export const DataConfigPanelItem = ({
           <EuiSpacer size="s" />
           {(visualizations.vis.name === VIS_CHART_TYPES.Bar ||
             visualizations.vis.name === VIS_CHART_TYPES.HorizontalBar) && (
-            <>
-              <EuiTitle size="xxs">
-                <h3>Breakdowns</h3>
-              </EuiTitle>
-              {Breakdowns}
-            </>
+            <>{DataConfigPanelFields(getRenderFieldsObj(BREAKDOWNS))}</>
           )}
         </>
       ) : (

diff --git a/public/components/visualizations/charts/bar/bar.tsx b/public/components/visualizations/charts/bar/bar.tsx
@@ -15,7 +15,7 @@ import { AvailabilityUnitType } from '../../../event_analytics/explorer/visualiz
 import { ThresholdUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds';
 import { getPropName, hexToRgb } from '../../../event_analytics/utils/utils';
 import { EmptyPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder';
-import { AGGREGATIONS, GROUPBY } from '../../../../../common/constants/explorer';
+import { AGGREGATIONS, BREAKDOWNS, GROUPBY } from '../../../../../common/constants/explorer';
 import { IVisualizationContainerProps } from '../../../../../common/types/explorer';
 
 export const Bar = ({ visualizations, layout, config }: any) => {
@@ -40,7 +40,7 @@ export const Bar = ({ visualizations, layout, config }: any) => {
     isEmpty(queriedVizData) ||
     !Array.isArray(dataConfig[GROUPBY]) ||
     !Array.isArray(dataConfig[AGGREGATIONS]) ||
-    (dataConfig.breakdowns && !Array.isArray(dataConfig.breakdowns))
+    (dataConfig[BREAKDOWNS] && !Array.isArray(dataConfig[BREAKDOWNS]))
   )
     return <EmptyPlaceholder icon={visMetaData?.icontype} />;
 
@@ -79,11 +79,11 @@ export const Bar = ({ visualizations, layout, config }: any) => {
    */
   const xaxes = useMemo(() => {
     // breakdown selections
-    if (dataConfig.breakdowns) {
+    if (dataConfig[BREAKDOWNS]) {
       return [
         ...dataConfig[GROUPBY].filter(
           (dimension) =>
-            !some(dataConfig.breakdowns, (breakdown) => breakdown.label === dimension.label)
+            !some(dataConfig[BREAKDOWNS], (breakdown) => breakdown.label === dimension.label)
         ),
       ];
     }
@@ -95,7 +95,7 @@ export const Bar = ({ visualizations, layout, config }: any) => {
     }
 
     return [...dataConfig[GROUPBY]];
-  }, [dataConfig[GROUPBY], dataConfig.breakdowns]);
+  }, [dataConfig[GROUPBY], dataConfig[BREAKDOWNS]]);
 
   /**
    * determine y axis
Original file line number	Diff line number	Diff line change
Expand Up		@@ -245,3 +245,4 @@ export enum ConfigChartOptionsEnum {
		}

		export const CUSTOM_LABEL = 'customLabel';
		export const BREAKDOWNS = 'breakdowns';