From f6bf58285ac492665ff7c2f1e52f37850d3fc99e Mon Sep 17 00:00:00 2001
From: "harshada.lingayat" <harshada_lingayat@persistent.com>
Date: Tue, 4 Oct 2022 12:53:08 +0000
Subject: [PATCH] Added tooltip in aggregation

---
 .../data_config_panel_fields.tsx              | 59 ++++++++++++++-----
 .../data_configurations_panel.tsx             | 51 +---------------
 2 files changed, 48 insertions(+), 62 deletions(-)

diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx
index 7d39c7de9..5f29f73e4 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx
@@ -3,7 +3,16 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React, { Fragment } from 'react';
-import { EuiButtonIcon, EuiLink, EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import {
+  EuiButtonIcon,
+  EuiIcon,
+  EuiLink,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+  EuiToolTip,
+} from '@elastic/eui';
 import { isArray } from 'lodash';
 import {
   ConfigListEntry,
@@ -25,16 +34,42 @@ export const DataConfigPanelFields = ({
   handleServiceRemove,
   handleServiceEdit,
 }: DataConfigPanelFieldProps) => {
+  const isAggregation = sectionName === AGGREGATIONS;
   const isHeatMapAddButton = (name: string) => {
     if (!list || !isArray(list) || visType !== VIS_CHART_TYPES.HeatMap) return false;
     return name === AGGREGATIONS ? list.length >= 1 : list.length >= 2;
   };
 
+  const tooltipIcon = <EuiIcon type="iInCircle" color="text" size="m" className="info-icon" />;
+  const crossIcon = (index: number) => (
+    <EuiButtonIcon
+      color="subdued"
+      iconType="cross"
+      aria-label="clear-field"
+      iconSize="s"
+      onClick={() => handleServiceRemove(index, sectionName)}
+    />
+  );
+
+  const aggregationToolTip = (iconToDisplay: JSX.Element) => (
+    <EuiToolTip
+      position="right"
+      content="At least one metric is required to render a chart"
+      delay="regular"
+      anchorClassName="eui-textTruncate"
+    >
+      {iconToDisplay}
+    </EuiToolTip>
+  );
+
   return (
     <div className="panel_section">
-      <EuiTitle size="xxs" className="panel_title">
-        <h3>{sectionName}</h3>
-      </EuiTitle>
+      <div style={{ display: 'flex' }}>
+        <EuiTitle size="xxs" className="panel_title">
+          <h3>{sectionName}</h3>
+        </EuiTitle>
+        {isAggregation && aggregationToolTip(tooltipIcon)}
+      </div>
       <EuiSpacer size="s" />
       {isArray(list) &&
         list.map((obj: ConfigListEntry, index: number) => (
@@ -46,17 +81,10 @@ export const DataConfigPanelFields = ({
                   tabIndex={0}
                   onClick={() => handleServiceEdit(false, index, sectionName)}
                 >
-                  {obj[CUSTOM_LABEL] ||
-                    `${sectionName === AGGREGATIONS ? obj.aggregation : ''} ${obj.label}`}
+                  {obj[CUSTOM_LABEL] || `${isAggregation ? obj.aggregation : ''} ${obj.label}`}
                 </EuiLink>
               </EuiText>
-              <EuiButtonIcon
-                color="subdued"
-                iconType="cross"
-                aria-label="clear-field"
-                iconSize="s"
-                onClick={() => handleServiceRemove(index, sectionName)}
-              />
+              {isAggregation ? aggregationToolTip(crossIcon(index)) : crossIcon(index)}
             </EuiPanel>
             <EuiSpacer size="s" />
           </Fragment>
@@ -69,7 +97,10 @@ export const DataConfigPanelFields = ({
             aria-label="add-field"
             iconSize="s"
             color="primary"
-            disabled={sectionName === GROUPBY && visType === VIS_CHART_TYPES.Line}
+            disabled={
+              (sectionName === GROUPBY && visType === VIS_CHART_TYPES.Line) ||
+              visType === VIS_CHART_TYPES.Scatter
+            }
             onClick={() => handleServiceAdd(sectionName)}
           />
         </EuiPanel>
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
index 43c389f0c..7dcaa36cf 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
@@ -62,15 +62,7 @@ export const DataConfigPanelItem = ({
   queryManager,
 }: DataConfigPanelProps) => {
   const dispatch = useDispatch();
-  const {
-    tabId,
-    handleQuerySearch,
-    handleQueryChange,
-    setTempQuery,
-    fetchData,
-    changeVisualizationConfig,
-    curVisId,
-  } = useContext<any>(TabContext);
+  const { tabId, handleQueryChange, fetchData, curVisId } = useContext<any>(TabContext);
   const { data } = visualizations;
   const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
   const {
@@ -89,43 +81,6 @@ export const DataConfigPanelItem = ({
       setConfigList({
         ...userConfigs.dataConfig,
       });
-    } else if (some(SPECIAL_RENDERING_VIZS, (visType) => visType === visualizations.vis.name)) {
-      // any vis that doesn't conform normal metrics/dimensions data confiurations
-      setConfigList({
-        ...DEFAULT_DATA_CONFIGS[visualizations.vis.name],
-      });
-    } else {
-      // default
-      const statsTokens = queryManager.queryParser().parse(data.query.rawQuery).getStats();
-      if (!statsTokens) {
-        setConfigList({
-          metrics: [],
-          dimensions: [],
-        });
-      } else {
-        const fieldInfo = statsTokens.groupby?.span?.span_expression?.field;
-        setConfigList({
-          metrics: statsTokens.aggregations.map((agg) => ({
-            alias: agg.alias,
-            label: agg.function?.value_expression,
-            name: agg.function?.value_expression,
-            aggregation: agg.function?.name,
-          })),
-          dimensions: statsTokens.groupby?.group_fields?.map((agg) => ({
-            label: agg.name ?? '',
-            name: agg.name ?? '',
-          })),
-          span: {
-            time_field: statsTokens.groupby?.span?.span_expression?.field
-              ? [getStandardedOuiField(fieldInfo, 'timestamp')]
-              : [],
-            interval: statsTokens.groupby?.span?.span_expression?.literal_value ?? '0',
-            unit: statsTokens.groupby?.span?.span_expression?.time_unit
-              ? [getStandardedOuiField(statsTokens.groupby?.span?.span_expression?.time_unit)]
-              : [],
-          },
-        });
-      }
     }
   }, [userConfigs?.dataConfig, visualizations.vis.name]);
 
@@ -386,7 +341,7 @@ export const DataConfigPanelItem = ({
     [configList[GROUPBY]]
   );
 
-  const Breakdowns = useMemo(() => {
+  const Breakdowns = () => {
     return (
       <>
         <div className="services">
@@ -414,7 +369,7 @@ export const DataConfigPanelItem = ({
         </div>
       </>
     );
-  }, [configList[GROUPBY], configList.breakdowns]);
+  };
 
   const DateHistogram = useMemo(() => {
     return (