From 0bee8e71e47f2232c0aaffc3a5e25807a327abcb Mon Sep 17 00:00:00 2001
From: Eric Wei <menwe@amazon.com>
Date: Fri, 4 Nov 2022 11:33:01 -0700
Subject: [PATCH] Fix for app analytics crash (#1255)

* fix for app analytics crash

Signed-off-by: Eric Wei <menwe@amazon.com>

* updated snapshots

Signed-off-by: Eric Wei <menwe@amazon.com>

* fix saved object issue and remove config options not in release

Signed-off-by: Eric Wei <menwe@amazon.com>

* update snapshots

Signed-off-by: Eric Wei <menwe@amazon.com>

Signed-off-by: Eric Wei <menwe@amazon.com>
---
 .../common/types/explorer.ts                  |   2 +-
 .../__snapshots__/utils.test.tsx.snap         |  63 --
 .../event_analytics/explorer/explorer.tsx     |  12 +-
 .../__snapshots__/config_panel.test.tsx.snap  | 842 ------------------
 .../__tests__/__snapshots__/bar.test.tsx.snap |   7 -
 .../__snapshots__/heatmap.test.tsx.snap       |   7 -
 .../__snapshots__/histogram.test.tsx.snap     |   7 -
 .../horizontal_bar.test.tsx.snap              |   7 -
 .../__snapshots__/line.test.tsx.snap          |   7 -
 .../__snapshots__/logs_view.test.tsx.snap     |   7 -
 .../__tests__/__snapshots__/pie.test.tsx.snap |   7 -
 .../__snapshots__/text.test.tsx.snap          |   7 -
 .../__snapshots__/treemap.test.tsx.snap       |   7 -
 .../visualizations/charts/bar/bar_type.ts     |   7 -
 .../charts/data_table/data_table_type.ts      |   7 -
 .../visualizations/charts/lines/line_type.ts  |   7 -
 .../visualizations/charts/pie/pie_type.ts     |   9 -
 17 files changed, 7 insertions(+), 1005 deletions(-)

diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts
index c1c6ccc07..3174d5c0b 100644
--- a/dashboards-observability/common/types/explorer.ts
+++ b/dashboards-observability/common/types/explorer.ts
@@ -139,7 +139,7 @@ export interface IExplorerProps {
   appBaseQuery?: string;
   callback?: any;
   callbackInApp?: any;
-  queryManager: QueryManager;
+  queryManager?: QueryManager;
 }
 
 export interface SavedQuery {
diff --git a/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
index 4d71b9e61..3b6fa66d6 100644
--- a/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
+++ b/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
@@ -402,13 +402,6 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                       },
                     ],
                   },
-                  Object {
-                    "editor": [Function],
-                    "id": "color-theme",
-                    "mapTo": "colorTheme",
-                    "name": "Color theme",
-                    "schemas": Array [],
-                  },
                 ],
               },
               Object {
@@ -864,13 +857,6 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                         },
                       ],
                     },
-                    Object {
-                      "editor": [Function],
-                      "id": "color-theme",
-                      "mapTo": "colorTheme",
-                      "name": "Color theme",
-                      "schemas": Array [],
-                    },
                   ],
                 },
                 Object {
@@ -1333,13 +1319,6 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                           },
                         ],
                       },
-                      Object {
-                        "editor": [Function],
-                        "id": "color-theme",
-                        "mapTo": "colorTheme",
-                        "name": "Color theme",
-                        "schemas": Array [],
-                      },
                     ],
                   },
                   Object {
@@ -2027,13 +2006,6 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                       },
                     ],
                   },
-                  Object {
-                    "editor": [Function],
-                    "id": "color-theme",
-                    "mapTo": "colorTheme",
-                    "name": "Color theme",
-                    "schemas": Array [],
-                  },
                   Object {
                     "defaultState": Array [],
                     "editor": [Function],
@@ -2557,13 +2529,6 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                         },
                       ],
                     },
-                    Object {
-                      "editor": [Function],
-                      "id": "color-theme",
-                      "mapTo": "colorTheme",
-                      "name": "Color theme",
-                      "schemas": Array [],
-                    },
                     Object {
                       "defaultState": Array [],
                       "editor": [Function],
@@ -3101,13 +3066,6 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                           },
                         ],
                       },
-                      Object {
-                        "editor": [Function],
-                        "id": "color-theme",
-                        "mapTo": "colorTheme",
-                        "name": "Color theme",
-                        "schemas": Array [],
-                      },
                       Object {
                         "defaultState": Array [],
                         "editor": [Function],
@@ -3796,13 +3754,6 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                       },
                     ],
                   },
-                  Object {
-                    "editor": [Function],
-                    "id": "color-theme",
-                    "mapTo": "colorTheme",
-                    "name": "Color theme",
-                    "schemas": Array [],
-                  },
                 ],
               },
               Object {
@@ -4258,13 +4209,6 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                         },
                       ],
                     },
-                    Object {
-                      "editor": [Function],
-                      "id": "color-theme",
-                      "mapTo": "colorTheme",
-                      "name": "Color theme",
-                      "schemas": Array [],
-                    },
                   ],
                 },
                 Object {
@@ -4727,13 +4671,6 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                           },
                         ],
                       },
-                      Object {
-                        "editor": [Function],
-                        "id": "color-theme",
-                        "mapTo": "colorTheme",
-                        "name": "Color theme",
-                        "schemas": Array [],
-                      },
                     ],
                   },
                   Object {
diff --git a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx
index 82071906d..8090aa402 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx
@@ -104,6 +104,7 @@ import { Sidebar } from './sidebar';
 import { TimechartHeader } from './timechart_header';
 import { ExplorerVisualizations } from './visualizations';
 import { CountDistribution } from './visualizations/count_distribution';
+import { QueryManager } from '../../../../common/query_manager';
 
 const TYPE_TAB_MAPPING = {
   [SAVED_QUERY]: TAB_EVENT_ID,
@@ -132,7 +133,7 @@ export const Explorer = ({
   setEndTime,
   callback,
   callbackInApp,
-  queryManager,
+  queryManager = new QueryManager(),
 }: IExplorerProps) => {
   const dispatch = useDispatch();
   const requestParams = { tabId };
@@ -182,8 +183,6 @@ export const Explorer = ({
   const [liveTimestamp, setLiveTimestamp] = useState(DATE_PICKER_FORMAT);
   const [triggerAvailability, setTriggerAvailability] = useState(false);
   const [viewLogPatterns, setViewLogPatterns] = useState(false);
-  const [isValidDataConfigOptionSelected, setIsValidDataConfigOptionSelected] =
-    useState<boolean>(false);
   const [spanValue, setSpanValue] = useState(false);
   const [subType, setSubType] = useState('visualization');
   const [metricMeasure, setMetricMeasure] = useState('');
@@ -309,8 +308,9 @@ export const Explorer = ({
           // fill saved user configs
           if (objectData?.type) {
             let visConfig = {};
-            if (!isEmpty(objectData.user_configs) && !isEmpty(objectData.user_configs.series)) {
-              visConfig = JSON.parse(objectData.user_configs);
+            const customConfig = objectData.user_configs ? JSON.parse(objectData.user_configs) : {};
+            if (!isEmpty(customConfig.dataConfig) && !isEmpty(customConfig.dataConfig?.series)) {
+              visConfig = { ...customConfig };
             } else {
               const statsTokens = queryManager.queryParser().parse(objectData.query).getStats();
               visConfig = { dataConfig: { ...getDefaultVisConfig(statsTokens) } };
@@ -1350,7 +1350,7 @@ export const Explorer = ({
     delayTime: number
   ) => {
     setLiveTailName(name);
-    setLiveTailTabId(curSelectedTabId.current as unknown as string);
+    setLiveTailTabId((curSelectedTabId.current as unknown) as string);
     setIsLiveTailOn(true);
     setToast('Live tail On', 'success');
     setIsLiveTailPopoverOpen(false);
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
index 7283927bb..cc5cc9941 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
@@ -452,13 +452,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                     },
                   ],
                 },
-                Object {
-                  "editor": [Function],
-                  "id": "color-theme",
-                  "mapTo": "colorTheme",
-                  "name": "Color theme",
-                  "schemas": Array [],
-                },
               ],
             },
             Object {
@@ -775,13 +768,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           },
                         ],
                       },
-                      Object {
-                        "editor": [Function],
-                        "id": "color-theme",
-                        "mapTo": "colorTheme",
-                        "name": "Color theme",
-                        "schemas": Array [],
-                      },
                     ],
                   },
                   Object {
@@ -1081,13 +1067,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           },
                         ],
                       },
-                      Object {
-                        "editor": [Function],
-                        "id": "color-theme",
-                        "mapTo": "colorTheme",
-                        "name": "Color theme",
-                        "schemas": Array [],
-                      },
                     ],
                   },
                   Object {
@@ -1410,13 +1389,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           },
                         ],
                       },
-                      Object {
-                        "editor": [Function],
-                        "id": "color-theme",
-                        "mapTo": "colorTheme",
-                        "name": "Color theme",
-                        "schemas": Array [],
-                      },
                       Object {
                         "defaultState": Array [],
                         "editor": [Function],
@@ -1670,28 +1642,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                             "mapTo": "labelSize",
                             "name": "Label size",
                           },
-                          Object {
-                            "component": [Function],
-                            "defaultState": Object {
-                              "name": "default",
-                            },
-                            "eleType": "colorpicker",
-                            "isSingleSelection": true,
-                            "mapTo": "colorTheme",
-                            "name": "Color theme",
-                            "options": Array [
-                              Object {
-                                "title": "Default",
-                                "type": "text",
-                                "value": "default",
-                              },
-                              Object {
-                                "title": "Single Color",
-                                "type": "text",
-                                "value": "singleColor",
-                              },
-                            ],
-                          },
                         ],
                       },
                     ],
@@ -2507,13 +2457,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           },
                         ],
                       },
-                      Object {
-                        "editor": [Function],
-                        "id": "color-theme",
-                        "mapTo": "colorTheme",
-                        "name": "Color theme",
-                        "schemas": Array [],
-                      },
                     ],
                   },
                   Object {
@@ -2845,13 +2788,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                               },
                             ],
                           },
-                          Object {
-                            "editor": [Function],
-                            "id": "color-theme",
-                            "mapTo": "colorTheme",
-                            "name": "Color theme",
-                            "schemas": Array [],
-                          },
                         ],
                       },
                       Object {
@@ -3188,13 +3124,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                     },
                                   ],
                                 },
-                                Object {
-                                  "editor": [Function],
-                                  "id": "color-theme",
-                                  "mapTo": "colorTheme",
-                                  "name": "Color theme",
-                                  "schemas": Array [],
-                                },
                               ],
                             },
                             Object {
@@ -3466,13 +3395,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                       },
                                     ],
                                   },
-                                  Object {
-                                    "editor": [Function],
-                                    "id": "color-theme",
-                                    "mapTo": "colorTheme",
-                                    "name": "Color theme",
-                                    "schemas": Array [],
-                                  },
                                 ],
                               },
                               Object {
@@ -3810,13 +3732,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                       },
                                     ],
                                   },
-                                  Object {
-                                    "editor": [Function],
-                                    "id": "color-theme",
-                                    "mapTo": "colorTheme",
-                                    "name": "Color theme",
-                                    "schemas": Array [],
-                                  },
                                 ],
                               },
                               Object {
@@ -4124,13 +4039,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                           },
                                         ],
                                       },
-                                      Object {
-                                        "editor": [Function],
-                                        "id": "color-theme",
-                                        "mapTo": "colorTheme",
-                                        "name": "Color theme",
-                                        "schemas": Array [],
-                                      },
                                     ],
                                   },
                                   Object {
@@ -4606,13 +4514,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         },
                       ],
                     },
-                    Object {
-                      "editor": [Function],
-                      "id": "color-theme",
-                      "mapTo": "colorTheme",
-                      "name": "Color theme",
-                      "schemas": Array [],
-                    },
                   ],
                 }
               }
@@ -5064,13 +4965,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                 },
                               ],
                             },
-                            Object {
-                              "editor": [Function],
-                              "id": "color-theme",
-                              "mapTo": "colorTheme",
-                              "name": "Color theme",
-                              "schemas": Array [],
-                            },
                           ],
                         },
                         Object {
@@ -5397,13 +5291,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           },
                         ],
                       },
-                      Object {
-                        "editor": [Function],
-                        "id": "color-theme",
-                        "mapTo": "colorTheme",
-                        "name": "Color theme",
-                        "schemas": Array [],
-                      },
                     ],
                   }
                 }
@@ -5855,13 +5742,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   },
                                 ],
                               },
-                              Object {
-                                "editor": [Function],
-                                "id": "color-theme",
-                                "mapTo": "colorTheme",
-                                "name": "Color theme",
-                                "schemas": Array [],
-                              },
                             ],
                           },
                           Object {
@@ -6401,13 +6281,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   },
                                 ],
                               },
-                              Object {
-                                "editor": [Function],
-                                "id": "color-theme",
-                                "mapTo": "colorTheme",
-                                "name": "Color theme",
-                                "schemas": Array [],
-                              },
                             ],
                           },
                           Object {
@@ -6778,13 +6651,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         },
                       ],
                     },
-                    Object {
-                      "editor": [Function],
-                      "id": "color-theme",
-                      "mapTo": "colorTheme",
-                      "name": "Color theme",
-                      "schemas": Array [],
-                    },
                   ],
                 }
               }
@@ -7236,13 +7102,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                 },
                               ],
                             },
-                            Object {
-                              "editor": [Function],
-                              "id": "color-theme",
-                              "mapTo": "colorTheme",
-                              "name": "Color theme",
-                              "schemas": Array [],
-                            },
                           ],
                         },
                         Object {
@@ -7796,13 +7655,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               },
                                             ],
                                           },
-                                          Object {
-                                            "editor": [Function],
-                                            "id": "color-theme",
-                                            "mapTo": "colorTheme",
-                                            "name": "Color theme",
-                                            "schemas": Array [],
-                                          },
                                         ],
                                       },
                                       Object {
@@ -8623,13 +8475,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               },
                                             ],
                                           },
-                                          Object {
-                                            "editor": [Function],
-                                            "id": "color-theme",
-                                            "mapTo": "colorTheme",
-                                            "name": "Color theme",
-                                            "schemas": Array [],
-                                          },
                                         ],
                                       },
                                       Object {
@@ -9949,13 +9794,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               },
                                             ],
                                           },
-                                          Object {
-                                            "editor": [Function],
-                                            "id": "color-theme",
-                                            "mapTo": "colorTheme",
-                                            "name": "Color theme",
-                                            "schemas": Array [],
-                                          },
                                         ],
                                       },
                                       Object {
@@ -11296,13 +11134,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               },
                                             ],
                                           },
-                                          Object {
-                                            "editor": [Function],
-                                            "id": "color-theme",
-                                            "mapTo": "colorTheme",
-                                            "name": "Color theme",
-                                            "schemas": Array [],
-                                          },
                                         ],
                                       },
                                       Object {
@@ -13736,679 +13567,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         </div>
                       </div>
                     </EuiFormRow>
-                    <EuiFormRow
-                      describedByIds={Array []}
-                      display="row"
-                      fullWidth={true}
-                      hasChildLabel={true}
-                      hasEmptyLabelSpace={false}
-                      labelType="label"
-                    >
-                      <div
-                        className="euiFormRow euiFormRow--fullWidth"
-                        id="random_html_id-row"
-                      >
-                        <div
-                          className="euiFormRow__fieldWrapper"
-                        >
-                          <ConfigColorTheme
-                            handleConfigChange={[Function]}
-                            id="random_html_id"
-                            onBlur={[Function]}
-                            onFocus={[Function]}
-                            props={Object {}}
-                            schemas={Array []}
-                            sectionId="color-theme"
-                            sectionName="Color theme"
-                            visualizations={
-                              Object {
-                                "data": Object {
-                                  "appData": Object {
-                                    "fromApp": false,
-                                  },
-                                  "defaultAxes": Object {},
-                                  "indexFields": Object {
-                                    "availableFields": Array [
-                                      Object {
-                                        "name": "agent",
-                                        "type": "string",
-                                      },
-                                      Object {
-                                        "name": "bytes",
-                                        "type": "long",
-                                      },
-                                      Object {
-                                        "name": "clientip",
-                                        "type": "ip",
-                                      },
-                                      Object {
-                                        "name": "event",
-                                        "type": "struct",
-                                      },
-                                      Object {
-                                        "name": "extension",
-                                        "type": "string",
-                                      },
-                                      Object {
-                                        "name": "geo",
-                                        "type": "struct",
-                                      },
-                                      Object {
-                                        "name": "host",
-                                        "type": "string",
-                                      },
-                                      Object {
-                                        "name": "index",
-                                        "type": "string",
-                                      },
-                                      Object {
-                                        "name": "ip",
-                                        "type": "ip",
-                                      },
-                                      Object {
-                                        "name": "machine",
-                                        "type": "struct",
-                                      },
-                                      Object {
-                                        "name": "memory",
-                                        "type": "double",
-                                      },
-                                      Object {
-                                        "name": "message",
-                                        "type": "string",
-                                      },
-                                      Object {
-                                        "name": "phpmemory",
-                                        "type": "long",
-                                      },
-                                      Object {
-                                        "name": "referer",
-                                        "type": "string",
-                                      },
-                                      Object {
-                                        "name": "request",
-                                        "type": "string",
-                                      },
-                                      Object {
-                                        "name": "response",
-                                        "type": "string",
-                                      },
-                                      Object {
-                                        "name": "tags",
-                                        "type": "string",
-                                      },
-                                      Object {
-                                        "name": "timestamp",
-                                        "type": "timestamp",
-                                      },
-                                      Object {
-                                        "name": "url",
-                                        "type": "string",
-                                      },
-                                      Object {
-                                        "name": "utc_time",
-                                        "type": "timestamp",
-                                      },
-                                    ],
-                                    "queriedFields": Array [
-                                      Object {
-                                        "name": "double_per_ip_bytes",
-                                        "type": "long",
-                                      },
-                                      Object {
-                                        "name": "host",
-                                        "type": "text",
-                                      },
-                                      Object {
-                                        "name": "ip_count",
-                                        "type": "integer",
-                                      },
-                                      Object {
-                                        "name": "per_ip_bytes",
-                                        "type": "long",
-                                      },
-                                      Object {
-                                        "name": "resp_code",
-                                        "type": "text",
-                                      },
-                                      Object {
-                                        "name": "sum_bytes",
-                                        "type": "long",
-                                      },
-                                    ],
-                                    "selectedFields": Array [],
-                                    "unselectedFields": Array [],
-                                  },
-                                  "query": Object {},
-                                  "rawVizData": Object {
-                                    "data": Object {
-                                      "count()": Array [
-                                        154,
-                                        1753,
-                                        116,
-                                        468,
-                                        1964,
-                                        219,
-                                      ],
-                                      "tags": Array [
-                                        "error",
-                                        "info",
-                                        "login",
-                                        "security",
-                                        "success",
-                                        "warning",
-                                      ],
-                                    },
-                                    "jsonData": Array [
-                                      Object {
-                                        "count()": 154,
-                                        "tags": "error",
-                                      },
-                                      Object {
-                                        "count()": 1753,
-                                        "tags": "info",
-                                      },
-                                      Object {
-                                        "count()": 116,
-                                        "tags": "login",
-                                      },
-                                      Object {
-                                        "count()": 468,
-                                        "tags": "security",
-                                      },
-                                      Object {
-                                        "count()": 1964,
-                                        "tags": "success",
-                                      },
-                                      Object {
-                                        "count()": 219,
-                                        "tags": "warning",
-                                      },
-                                    ],
-                                    "metadata": Object {
-                                      "fields": Array [
-                                        Object {
-                                          "name": "count()",
-                                          "type": "integer",
-                                        },
-                                        Object {
-                                          "name": "tags",
-                                          "type": "text",
-                                        },
-                                      ],
-                                      "size": 6,
-                                      "status": 200,
-                                    },
-                                  },
-                                  "userConfigs": Object {
-                                    "dataConfig": Object {
-                                      "valueOptions": Object {
-                                        "dimensions": Array [
-                                          Object {
-                                            "label": "tags",
-                                            "name": "tags",
-                                            "type": "text",
-                                          },
-                                        ],
-                                        "metrics": Array [
-                                          Object {
-                                            "label": "count()",
-                                            "name": "count()",
-                                            "side": "left",
-                                            "type": "integer",
-                                          },
-                                        ],
-                                      },
-                                    },
-                                  },
-                                },
-                                "vis": Object {
-                                  "barwidth": 0.97,
-                                  "category": "Visualizations",
-                                  "categoryaxis": "xaxis",
-                                  "component": [Function],
-                                  "editorconfig": Object {
-                                    "panelTabs": Array [
-                                      Object {
-                                        "editor": [Function],
-                                        "id": "data-panel",
-                                        "mapTo": "dataConfig",
-                                        "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": "Series",
-                                                    },
-                                                  ],
-                                                },
-                                              },
-                                            ],
-                                          },
-                                          Object {
-                                            "editor": [Function],
-                                            "id": "legend",
-                                            "mapTo": "legend",
-                                            "name": "Legend",
-                                            "schemas": Array [
-                                              Object {
-                                                "component": null,
-                                                "mapTo": "showLegend",
-                                                "name": "Show legend",
-                                                "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": "position",
-                                                "name": "Position",
-                                                "props": Object {
-                                                  "defaultSelections": Array [
-                                                    Object {
-                                                      "id": "v",
-                                                      "name": "Right",
-                                                    },
-                                                  ],
-                                                  "options": Array [
-                                                    Object {
-                                                      "id": "v",
-                                                      "name": "Right",
-                                                    },
-                                                    Object {
-                                                      "id": "h",
-                                                      "name": "Bottom",
-                                                    },
-                                                  ],
-                                                },
-                                              },
-                                              Object {
-                                                "component": [Function],
-                                                "eleType": "input",
-                                                "mapTo": "legendSize",
-                                                "name": "Legend size",
-                                                "title": "Legend size",
-                                              },
-                                            ],
-                                          },
-                                          Object {
-                                            "editor": [Function],
-                                            "id": "chart_styles",
-                                            "mapTo": "chartStyles",
-                                            "name": "Chart styles",
-                                            "schemas": Array [
-                                              Object {
-                                                "component": [Function],
-                                                "eleType": "buttons",
-                                                "mapTo": "mode",
-                                                "name": "Mode",
-                                                "props": Object {
-                                                  "defaultSelections": Array [
-                                                    Object {
-                                                      "id": "group",
-                                                      "name": "Group",
-                                                    },
-                                                  ],
-                                                  "options": Array [
-                                                    Object {
-                                                      "id": "group",
-                                                      "name": "Group",
-                                                    },
-                                                    Object {
-                                                      "id": "stack",
-                                                      "name": "Stack",
-                                                    },
-                                                  ],
-                                                },
-                                              },
-                                              Object {
-                                                "component": [Function],
-                                                "eleType": "input",
-                                                "mapTo": "labelSize",
-                                                "name": "Label size",
-                                              },
-                                              Object {
-                                                "component": [Function],
-                                                "defaultState": 0,
-                                                "eleType": "slider",
-                                                "mapTo": "rotateBarLabels",
-                                                "name": "Rotate bar labels",
-                                                "props": Object {
-                                                  "max": 90,
-                                                  "min": -90,
-                                                  "showTicks": true,
-                                                  "ticks": Array [
-                                                    Object {
-                                                      "label": "-90°",
-                                                      "value": -90,
-                                                    },
-                                                    Object {
-                                                      "label": "-45°",
-                                                      "value": -45,
-                                                    },
-                                                    Object {
-                                                      "label": "0°",
-                                                      "value": 0,
-                                                    },
-                                                    Object {
-                                                      "label": "45°",
-                                                      "value": 45,
-                                                    },
-                                                    Object {
-                                                      "label": "90°",
-                                                      "value": 90,
-                                                    },
-                                                  ],
-                                                },
-                                              },
-                                              Object {
-                                                "component": [Function],
-                                                "defaultState": 0.7,
-                                                "eleType": "slider",
-                                                "mapTo": "groupWidth",
-                                                "name": "Group width",
-                                                "props": Object {
-                                                  "max": 1,
-                                                  "step": 0.01,
-                                                },
-                                              },
-                                              Object {
-                                                "component": [Function],
-                                                "defaultState": 0.97,
-                                                "eleType": "slider",
-                                                "mapTo": "barWidth",
-                                                "name": "Bar width",
-                                                "props": Object {
-                                                  "max": 1,
-                                                  "step": 0.01,
-                                                },
-                                              },
-                                              Object {
-                                                "component": [Function],
-                                                "defaultState": 2,
-                                                "eleType": "slider",
-                                                "mapTo": "lineWidth",
-                                                "name": "Line width",
-                                                "props": Object {
-                                                  "max": 10,
-                                                },
-                                              },
-                                              Object {
-                                                "component": [Function],
-                                                "defaultState": 70,
-                                                "eleType": "slider",
-                                                "mapTo": "fillOpacity",
-                                                "name": "Fill opacity",
-                                                "props": Object {
-                                                  "max": 100,
-                                                },
-                                              },
-                                            ],
-                                          },
-                                          Object {
-                                            "editor": [Function],
-                                            "id": "color-theme",
-                                            "mapTo": "colorTheme",
-                                            "name": "Color theme",
-                                            "schemas": Array [],
-                                          },
-                                        ],
-                                      },
-                                      Object {
-                                        "editor": [Function],
-                                        "id": "availability-panel",
-                                        "mapTo": "availabilityConfig",
-                                        "name": "Availability",
-                                      },
-                                    ],
-                                  },
-                                  "fillopacity": 70,
-                                  "fulllabel": "Vertical bar",
-                                  "groupwidth": 0.7,
-                                  "icon": [Function],
-                                  "icontype": "visBarVerticalStacked",
-                                  "id": "bar",
-                                  "label": "Vertical bar",
-                                  "labelangle": 0,
-                                  "legendposition": "v",
-                                  "linewidth": 2,
-                                  "mode": "group",
-                                  "name": "bar",
-                                  "orientation": "v",
-                                  "selection": Object {
-                                    "dataLoss": "nothing",
-                                  },
-                                  "seriesaxis": "yaxis",
-                                  "showlegend": "show",
-                                  "type": "bar",
-                                  "visconfig": Object {
-                                    "config": Object {
-                                      "displaylogo": false,
-                                      "responsive": true,
-                                    },
-                                    "isUniColor": false,
-                                    "layout": Object {
-                                      "height": 1180,
-                                      "legend": Object {
-                                        "orientation": "v",
-                                        "traceorder": "normal",
-                                      },
-                                      "margin": Object {
-                                        "b": 30,
-                                        "l": 60,
-                                        "pad": 0,
-                                        "r": 30,
-                                        "t": 50,
-                                      },
-                                      "showlegend": true,
-                                    },
-                                  },
-                                },
-                              }
-                            }
-                            vizState={Object {}}
-                          >
-                            <EuiAccordion
-                              arrowDisplay="left"
-                              buttonContent="Color theme"
-                              id="configPanel__Color theme"
-                              initialIsOpen={true}
-                              isLoading={false}
-                              isLoadingMessage={false}
-                              paddingSize="s"
-                            >
-                              <div
-                                className="euiAccordion euiAccordion-isOpen"
-                              >
-                                <div
-                                  className="euiAccordion__triggerWrapper"
-                                >
-                                  <button
-                                    aria-controls="configPanel__Color theme"
-                                    aria-expanded={true}
-                                    className="euiAccordion__button"
-                                    id="random_html_id"
-                                    onClick={[Function]}
-                                    type="button"
-                                  >
-                                    <span
-                                      className="euiAccordion__iconWrapper"
-                                    >
-                                      <EuiIcon
-                                        className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                        size="m"
-                                        type="arrowRight"
-                                      >
-                                        <EuiIconEmpty
-                                          aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
-                                          focusable="false"
-                                          role="img"
-                                          style={null}
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
-                                            focusable="false"
-                                            height={16}
-                                            role="img"
-                                            style={null}
-                                            viewBox="0 0 16 16"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          />
-                                        </EuiIconEmpty>
-                                      </EuiIcon>
-                                    </span>
-                                    <span
-                                      className="euiIEFlexWrapFix"
-                                    >
-                                      Color theme
-                                    </span>
-                                  </button>
-                                </div>
-                                <div
-                                  aria-labelledby="random_html_id"
-                                  className="euiAccordion__childWrapper"
-                                  id="configPanel__Color theme"
-                                  role="region"
-                                  tabIndex={-1}
-                                >
-                                  <EuiResizeObserver
-                                    onResize={[Function]}
-                                  >
-                                    <div>
-                                      <div
-                                        className="euiAccordion__padding--s"
-                                      >
-                                        <EuiButton
-                                          fullWidth={true}
-                                          onClick={[Function]}
-                                          size="s"
-                                        >
-                                          <EuiButtonDisplay
-                                            baseClassName="euiButton"
-                                            disabled={false}
-                                            element="button"
-                                            fullWidth={true}
-                                            isDisabled={false}
-                                            onClick={[Function]}
-                                            size="s"
-                                            type="button"
-                                          >
-                                            <button
-                                              className="euiButton euiButton--primary euiButton--small euiButton--fullWidth"
-                                              disabled={false}
-                                              onClick={[Function]}
-                                              style={
-                                                Object {
-                                                  "minWidth": undefined,
-                                                }
-                                              }
-                                              type="button"
-                                            >
-                                              <EuiButtonContent
-                                                className="euiButton__content"
-                                                iconSide="left"
-                                                textProps={
-                                                  Object {
-                                                    "className": "euiButton__text",
-                                                  }
-                                                }
-                                              >
-                                                <span
-                                                  className="euiButtonContent euiButton__content"
-                                                >
-                                                  <span
-                                                    className="euiButton__text"
-                                                  >
-                                                    + Add color theme
-                                                  </span>
-                                                </span>
-                                              </EuiButtonContent>
-                                            </button>
-                                          </EuiButtonDisplay>
-                                        </EuiButton>
-                                        <EuiSpacer
-                                          size="s"
-                                        >
-                                          <div
-                                            className="euiSpacer euiSpacer--s"
-                                          />
-                                        </EuiSpacer>
-                                      </div>
-                                    </div>
-                                  </EuiResizeObserver>
-                                </div>
-                              </div>
-                            </EuiAccordion>
-                          </ConfigColorTheme>
-                        </div>
-                      </div>
-                    </EuiFormRow>
                   </div>
                 </EuiForm>
               </div>
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
index bbbb71931..8c66dcbd0 100644
--- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
@@ -467,13 +467,6 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
                     },
                   ],
                 },
-                Object {
-                  "editor": [Function],
-                  "id": "color-theme",
-                  "mapTo": "colorTheme",
-                  "name": "Color theme",
-                  "schemas": Array [],
-                },
               ],
             },
             Object {
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
index 967f3492e..497c9aa43 100644
--- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
@@ -467,13 +467,6 @@ exports[`Heatmap component Renders heatmap component 1`] = `
                     },
                   ],
                 },
-                Object {
-                  "editor": [Function],
-                  "id": "color-theme",
-                  "mapTo": "colorTheme",
-                  "name": "Color theme",
-                  "schemas": Array [],
-                },
               ],
             },
             Object {
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
index 419ff3c03..17bdfda8c 100644
--- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
@@ -467,13 +467,6 @@ exports[`Histogram component Renders histogram component 1`] = `
                     },
                   ],
                 },
-                Object {
-                  "editor": [Function],
-                  "id": "color-theme",
-                  "mapTo": "colorTheme",
-                  "name": "Color theme",
-                  "schemas": Array [],
-                },
               ],
             },
             Object {
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
index c8115cee2..8b6fbceae 100644
--- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
@@ -467,13 +467,6 @@ exports[`Horizontal bar component Renders horizontal bar component 1`] = `
                     },
                   ],
                 },
-                Object {
-                  "editor": [Function],
-                  "id": "color-theme",
-                  "mapTo": "colorTheme",
-                  "name": "Color theme",
-                  "schemas": Array [],
-                },
               ],
             },
             Object {
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
index 9694c40d7..4f4735aef 100644
--- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
@@ -467,13 +467,6 @@ exports[`Line component Renders line component 1`] = `
                     },
                   ],
                 },
-                Object {
-                  "editor": [Function],
-                  "id": "color-theme",
-                  "mapTo": "colorTheme",
-                  "name": "Color theme",
-                  "schemas": Array [],
-                },
               ],
             },
             Object {
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/logs_view.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/logs_view.test.tsx.snap
index 1a1281d6e..0cf1a216c 100644
--- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/logs_view.test.tsx.snap
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/logs_view.test.tsx.snap
@@ -467,13 +467,6 @@ exports[`Logs View component Renders logs view component 1`] = `
                     },
                   ],
                 },
-                Object {
-                  "editor": [Function],
-                  "id": "color-theme",
-                  "mapTo": "colorTheme",
-                  "name": "Color theme",
-                  "schemas": Array [],
-                },
               ],
             },
             Object {
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
index 4bcc7e430..41d7f3d02 100644
--- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
@@ -467,13 +467,6 @@ exports[`Pie component Renders pie component 1`] = `
                     },
                   ],
                 },
-                Object {
-                  "editor": [Function],
-                  "id": "color-theme",
-                  "mapTo": "colorTheme",
-                  "name": "Color theme",
-                  "schemas": Array [],
-                },
               ],
             },
             Object {
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap
index 762a46316..41c61aece 100644
--- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap
@@ -450,13 +450,6 @@ exports[`Text component Renders text component 1`] = `
                     },
                   ],
                 },
-                Object {
-                  "editor": [Function],
-                  "id": "color-theme",
-                  "mapTo": "colorTheme",
-                  "name": "Color theme",
-                  "schemas": Array [],
-                },
               ],
             },
             Object {
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
index 23d4f693a..2b6713d8b 100644
--- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
@@ -467,13 +467,6 @@ exports[`Treemap component Renders treemap component 1`] = `
                     },
                   ],
                 },
-                Object {
-                  "editor": [Function],
-                  "id": "color-theme",
-                  "mapTo": "colorTheme",
-                  "name": "Color theme",
-                  "schemas": Array [],
-                },
               ],
             },
             Object {
diff --git a/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts b/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts
index f07555159..8fc51ce22 100644
--- a/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts
+++ b/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts
@@ -197,13 +197,6 @@ export const createBarTypeDefinition = (params: any) => ({
               },
             ],
           },
-          {
-            id: 'color-theme',
-            name: 'Color theme',
-            editor: ConfigColorTheme,
-            mapTo: 'colorTheme',
-            schemas: [],
-          },
         ],
       },
       {
diff --git a/dashboards-observability/public/components/visualizations/charts/data_table/data_table_type.ts b/dashboards-observability/public/components/visualizations/charts/data_table/data_table_type.ts
index effa7b716..7ad582ccd 100644
--- a/dashboards-observability/public/components/visualizations/charts/data_table/data_table_type.ts
+++ b/dashboards-observability/public/components/visualizations/charts/data_table/data_table_type.ts
@@ -97,13 +97,6 @@ export const createDatatableTypeDefinition = (params: any = {}) => ({
           },
         ],
       },
-      {
-        id: 'style-panel',
-        name: 'Layout',
-        mapTo: 'layoutConfig',
-        editor: ConfigEditor,
-        content: [],
-      },
     ],
   },
   visconfig: {
diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts
index d02558b66..b82e44eb0 100644
--- a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts
+++ b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts
@@ -204,13 +204,6 @@ export const createLineTypeDefinition = (params: any = {}) => ({
               },
             ],
           },
-          {
-            id: 'color-theme',
-            name: 'Color theme',
-            editor: ConfigColorTheme,
-            mapTo: 'colorTheme',
-            schemas: [],
-          },
           {
             id: 'thresholds',
             name: 'Thresholds',
diff --git a/dashboards-observability/public/components/visualizations/charts/pie/pie_type.ts b/dashboards-observability/public/components/visualizations/charts/pie/pie_type.ts
index 690754556..2ec2dc1e7 100644
--- a/dashboards-observability/public/components/visualizations/charts/pie/pie_type.ts
+++ b/dashboards-observability/public/components/visualizations/charts/pie/pie_type.ts
@@ -121,15 +121,6 @@ export const createPieTypeDefinition = (params: any) => ({
                 mapTo: 'labelSize',
                 eleType: 'input',
               },
-              {
-                name: 'Color theme',
-                isSingleSelection: true,
-                component: ColorPalettePicker,
-                mapTo: 'colorTheme',
-                eleType: 'colorpicker',
-                options: PIE_PALETTES,
-                defaultState: { name: DEFAULT_PALETTE },
-              },
             ],
           },
         ],