[Explore vis] visualization fixes and improvements (#10836)

1. Optimize discover vis performance by turn off visual interactions for data point cound > 1000
2. Fix useDebounceValue bug which onChange get called for initial value
3. Fix discover vis tooltip issue for multiple series data that if field contains vega reserved charaters
4. Fix React missing key warnings
5. Discover vis map PPL field type ip as category
6. Tweaks the label text of vis style panel
7. Fix explore embeddable initially display a "No result" screen

---------

Signed-off-by: Yulong Ruan <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

Author: ruanyl

changelogs/fragments/10836.yml

@@ -0,0 +1,8 @@
+fix:
+- Optimize discover vis performance by turn off visual interactions for data point cound > 1000 ([#10836](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10836))
+- UseDebounceValue bug which onChange get called for initial value ([#10836](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10836))
+- Discover vis tooltip issue for multiple series data that if field contains vega reserved charaters ([#10836](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10836))
+- React missing key warnings ([#10836](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10836))
+- Tweaks the label text of vis style panel ([#10836](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10836))
+- Explore embeddable initially display a "No result" screen ([#10836](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10836))
+- Discover vis map PPL field type `ip` as category ([#10836](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10836))

src/plugins/explore/public/application/legacy/discover/application/components/no_results/no_results.tsx

@@ -223,12 +223,12 @@ export const DiscoverNoResults = ({ queryString, query, savedQuery, timeFieldNam
   const tabs = useMemo(() => {
     const buildSampleQueryBlock = (sampleTitle: string, sampleQuery: string) => {
       return (
-        <>
+        <Fragment key={sampleQuery}>
           <EuiText size="s">{sampleTitle}</EuiText>
           <EuiSpacer size="s" />
           <EuiCodeBlock isCopyable>{sampleQuery}</EuiCodeBlock>
           <EuiSpacer size="s" />
-        </>
+        </Fragment>
       );
     };
     return [

src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_exclusive_vis_options.test.tsx

@@ -45,7 +45,7 @@ describe('BarGaugeExclusiveVisOptions', () => {
     });
   });
 
-  it('should call onChange when display mode is changed', () => {
+  it('should call onChange when display style is changed', () => {
     const { getByText } = render(
       <BarGaugeExclusiveVisOptions
         styles={defaultStyles}

src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_exclusive_vis_options.tsx

@@ -119,13 +119,13 @@ export const BarGaugeExclusiveVisOptions = ({
       </EuiFormRow>
 
       <EuiFormRow
-        label={i18n.translate('explore.stylePanel.barGauge.exclusive.displayMode', {
-          defaultMessage: 'Display mode',
+        label={i18n.translate('explore.stylePanel.barGauge.exclusive.displayStyle', {
+          defaultMessage: 'Display style',
         })}
       >
         <EuiButtonGroup
-          legend={i18n.translate('explore.stylePanel.barGauge.exclusive.displayMode', {
-            defaultMessage: 'Display mode',
+          legend={i18n.translate('explore.stylePanel.barGauge.exclusive.displayStyle', {
+            defaultMessage: 'Display style',
           })}
           isFullWidth
           options={displayModeOption}

src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_utils.test.ts

@@ -118,7 +118,7 @@ describe('bar_gauge_utils', () => {
       expect(result).toEqual({ x1: 1, y1: 1, x2: 1, y2: 0 });
     });
 
-    it('returns undefined for non-gradient display mode', () => {
+    it('returns undefined for non-gradient display style', () => {
       const result = getGradientConfig('horizontal', 'basic', false);
       expect(result).toBeUndefined();
     });

src/plugins/explore/public/components/visualizations/constants.ts

@@ -58,7 +58,7 @@ export const FIELD_TYPE_MAP: Partial<Record<string, VisFieldType>> = {
   [PPL_FIELD_TYPES.TIMESTAMP]: VisFieldType.Date,
   [PPL_FIELD_TYPES.TIME]: VisFieldType.Date,
   [PPL_FIELD_TYPES.INTERVAL]: VisFieldType.Unknown,
-  [PPL_FIELD_TYPES.IP]: VisFieldType.Unknown,
+  [PPL_FIELD_TYPES.IP]: VisFieldType.Categorical,
   [PPL_FIELD_TYPES.GEO_POINT]: VisFieldType.Unknown,
   [PPL_FIELD_TYPES.BINARY]: VisFieldType.Unknown,
   [PPL_FIELD_TYPES.STRUCT]: VisFieldType.Unknown,

src/plugins/explore/public/components/visualizations/style_panel/axes/axes.tsx

@@ -303,10 +303,9 @@ export const AxesOptions: React.FC<AxesOptionsProps> = ({
       {isRule2
         ? // Special rendering for Rule 2: Show both axes with clear labels
           valueAxes.slice(0, 2).map((axis, index) => (
-            <>
+            <React.Fragment key={axis.id}>
               <EuiSplitPanel.Inner
                 paddingSize="s"
-                key={axis.id}
                 color="subdued"
                 data-test-subj="twoValueAxesPanel"
               >
@@ -469,17 +468,12 @@ export const AxesOptions: React.FC<AxesOptionsProps> = ({
                   </>
                 )}
               </EuiSplitPanel.Inner>
-            </>
+            </React.Fragment>
           ))
         : // Standard rendering for other rules
           valueAxes.map((axis, index) => (
-            <>
-              <EuiSplitPanel.Inner
-                paddingSize="s"
-                key={axis.id}
-                color="subdued"
-                data-test-subj="ValueAxisPanel"
-              >
+            <React.Fragment key={axis.id}>
+              <EuiSplitPanel.Inner paddingSize="s" color="subdued" data-test-subj="ValueAxisPanel">
                 <EuiText size="s" style={{ fontWeight: 600 }}>
                   {i18n.translate('explore.vis.gridOptions.valueAxis', {
                     defaultMessage: 'Y-Axis',
@@ -627,7 +621,7 @@ export const AxesOptions: React.FC<AxesOptionsProps> = ({
                   </>
                 )}
               </EuiSplitPanel.Inner>
-            </>
+            </React.Fragment>
           ))}
     </StyleAccordion>
   );

src/plugins/explore/public/components/visualizations/table/table_vis_options.tsx

@@ -123,8 +123,8 @@ export const TableVisStyleControls: React.FC<TableVisStyleControlsProps> = ({
             />
           </EuiFormRow>
           <EuiFormRow
-            label={i18n.translate('explore.stylePanel.table.cellTypes', {
-              defaultMessage: 'Cell types',
+            label={i18n.translate('explore.stylePanel.table.cellStyle', {
+              defaultMessage: 'Cell style',
             })}
           >
             <TableCellTypeOptions

src/plugins/explore/public/components/visualizations/utils/__snapshots__/create_hover_state.test.ts.snap

@@ -28,7 +28,7 @@ interface Options {
 function createTooltip(fields: Field[]) {
   const tooltip = fields.map((f) => {
     return {
-      field: f.name,
+      field: `["${f.name}"]`,
       type: f.type,
       title: f.title,
       ...(f.format && { format: f.format }),
@@ -37,6 +37,8 @@ function createTooltip(fields: Field[]) {
   return tooltip;
 }
 
+const MAX_DATA_POINTS_NUM = 1000;
+
 function createPointLayer(xField: Field, yFields: Field[], colorField?: Field) {
   let color = null;
   if (colorField) {
@@ -133,6 +135,7 @@ function createHiddenBarLayer(axisConfig: AxisConfig, options: Options & { barOp
         axisConfig.x,
         ...[...uniqueColorFieldValues].map((v) => ({
           name: v,
+          title: v,
           type: (axisConfig.y as Field).type,
         })),
       ]);
@@ -177,6 +180,11 @@ function createHiddenBarLayer(axisConfig: AxisConfig, options: Options & { barOp
 }
 
 export function createCrosshairLayers(axisConfig: AxisConfig, options: Options) {
+  // For better performance, don't create crosshair layers if too many data points
+  if (options.data && options.data.length > MAX_DATA_POINTS_NUM) {
+    return [];
+  }
+
   const colors = getColors();
   const layers = [];
   const yFields = Array<Field>().concat(axisConfig.y);
@@ -224,6 +232,11 @@ export function createCrosshairLayers(axisConfig: AxisConfig, options: Options)
 }
 
 export function createHighlightBarLayers(axisConfig: AxisConfig, options: Options) {
+  // For better performance, don't create highlight bar layers if too many data points
+  if (options.data && options.data.length > MAX_DATA_POINTS_NUM) {
+    return [];
+  }
+
   const layers = [];
   const yFields = Array<Field>().concat(axisConfig.y);
   const y1Fields = Array<Field>().concat(axisConfig.y1 ? axisConfig.y1 : []);