Fixed toast implementation and no result found for heatmap

Signed-off-by: ruchika-narang <ruchika_narang@persistent.com>
opensearch-project · Jun 8, 2022 · cb22392 · cb22392
1 parent ff22965
commit cb22392
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 4 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
@@ -863,6 +863,9 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                     "value": "opacity",
                                   },
                                 ],
+                                "props": Object {
+                                  "isClearable": false,
+                                },
                               },
                               Object {
                                 "component": [Function],

diff --git a/...y/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx b/...y/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx
@@ -74,6 +74,8 @@ export const ConfigPanel = ({ visualizations, setCurVisId, callback, changeIsVal
     if (curVisId === visChartTypes.TreeMap) {
       chartBasedAxes["childField"] = data.defaultAxes.xaxis ?? [];
       chartBasedAxes["valueField"] = [valueField];
+    } else if(curVisId === visChartTypes.HeatMap){
+      chartBasedAxes["zaxis"] = [valueField];
     } else {
       chartBasedAxes = { ...data.defaultAxes };
     }
@@ -92,7 +94,7 @@ export const ConfigPanel = ({ visualizations, setCurVisId, callback, changeIsVal
   useEffect(() => {
     setVizConfigs({
       ...userConfigs,
-      dataConfig: { ...vizConfigs.dataConfig, ...(userConfigs?.dataConfig ? userConfigs.dataConfig : getDefaultAxisSelected()) },
+      dataConfig: {...(userConfigs?.dataConfig ? userConfigs.dataConfig : getDefaultAxisSelected()) },
       layoutConfig: userConfigs?.layoutConfig
         ? hjson.stringify({ ...userConfigs.layoutConfig }, HJSON_STRINGIFY_OPTIONS)
         : getDefaultSpec(),

diff --git a/...s/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_item.tsx b/...s/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_item.tsx
@@ -13,6 +13,7 @@ export const PanelItem = ({
   dropdownList,
   onSelectChange,
   isSingleSelection = false,
+  isClearable = true,
 }: any) => {
   const options = dropdownList.map((item) => {
     return {
@@ -33,6 +34,7 @@ export const PanelItem = ({
         options={options}
         selectedOptions={selectedAxis}
         isInvalid={isEmpty(selectedAxis)}
+        isClearable={isClearable}
         singleSelection={isSingleSelection}
         onChange={onSelectChange}
         aria-label="Use aria labels when no actual label is in use"

diff --git a/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx b/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useMemo } from 'react';
-import { uniq, has, isEmpty } from 'lodash';
+import { uniq, has, isEmpty, indexOf } from 'lodash';
 import Plotly from 'plotly.js-dist';
 import { colorPalette } from '@elastic/eui';
 import { Plt } from '../../plotly/plot';
@@ -16,13 +16,16 @@ import {
   HEATMAP_SINGLE_COLOR,
 } from '../../../../../common/constants/colors';
 import { hexToRgb, lightenColor } from '../../../../components/event_analytics/utils/utils';
+import { NUMERICAL_FIELDS } from '../../../../../common/constants/shared';
 
 export const HeatMap = ({ visualizations, layout, config }: any) => {
   const {
     data,
     metadata: { fields },
   } = visualizations.data.rawVizData;
+  const { defaultAxes } = visualizations.data;
   const { dataConfig = {}, layoutConfig = {} } = visualizations?.data?.userConfigs;
+  const yaxis = defaultAxes.yaxis ?? [];
 
   if (fields.length < 3) return <EmptyPlaceholder icon={visualizations?.vis?.iconType} />;
 
@@ -31,6 +34,8 @@ export const HeatMap = ({ visualizations, layout, config }: any) => {
   const zMetrics =
     dataConfig?.valueOptions && dataConfig?.valueOptions.zaxis
       ? dataConfig?.valueOptions.zaxis[0]
+      : yaxis.length > 0
+      ? yaxis[0]
       : fields[fields.length - 3];
   const uniqueYaxis = uniq(data[yaxisField.name]);
   const uniqueXaxis = uniq(data[xaxisField.name]);
@@ -43,7 +48,8 @@ export const HeatMap = ({ visualizations, layout, config }: any) => {
     isEmpty(zMetrics) ||
     isEmpty(data[xaxisField.name]) ||
     isEmpty(data[yaxisField.name]) ||
-    isEmpty(data[zMetrics.name])
+    isEmpty(data[zMetrics.name]) ||
+    indexOf(NUMERICAL_FIELDS, zMetrics.type) < 0
   )
     return <EmptyPlaceholder icon={visualizations?.vis?.iconType} />;
 
@@ -116,7 +122,7 @@ export const HeatMap = ({ visualizations, layout, config }: any) => {
   const mergedLayout = {
     ...layout,
     ...(layoutConfig.layout && layoutConfig.layout),
-    title: dataConfig?.panelOptions?.title || layoutConfig.layout?.title || zMetrics.name || '',
+    title: dataConfig?.panelOptions?.title || layoutConfig.layout?.title || '',
   };
 
   const mergedConfigs = {

diff --git a/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts b/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts
@@ -75,6 +75,9 @@ export const createMapsVisDefinition = () => ({
                   { name: 'opacity', label: 'opacity', value: 'opacity' },
                 ],
                 defaultState: [{ name: 'spectrum', label: 'spectrum', value: 'spectrum' }],
+                props: {
+                  isClearable: false,
+                },
               },
               {
                 name: 'Scheme',