[Explore Vis] state timeline remaining fixes and delete pound_mass from unit (#10843)

* fix legend in statetimeline

Signed-off-by: Qxisylolo <[email protected]>

* Changeset file for PR #10843 created/updated

* squash

Signed-off-by: Qxisylolo <[email protected]>

---------

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

Author: Qxisylolo

changelogs/fragments/10843.yml

@@ -0,0 +1,2 @@
+fix:
+- Fix legend name configuration in state timeline ([#10843](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10843))

src/plugins/explore/public/components/visualizations/bar/bucket_options.tsx

@@ -84,6 +84,7 @@ export const BucketOptionsPanel = ({ styles, onChange, bucketType }: BucketOptio
               compressed
               value={styles?.bucketSize}
               placeholder="auto"
+              min={0}
               onChange={(value) => updateBucketOption('bucketSize', value)}
             />
           </EuiFormRow>
@@ -96,6 +97,7 @@ export const BucketOptionsPanel = ({ styles, onChange, bucketType }: BucketOptio
             <DebouncedFieldNumber
               compressed
               value={styles?.bucketCount}
+              min={0}
               onChange={(value) => updateBucketOption('bucketCount', value)}
               placeholder="30"
             />

src/plugins/explore/public/components/visualizations/scatter/scatter_vis_options.tsx

@@ -10,6 +10,7 @@ import { ScatterChartStyle, ScatterChartStyleOptions } from './scatter_vis_confi
 import { ScatterExclusiveVisOptions } from './scatter_exclusive_vis_options';
 import { AllAxesOptions } from '../style_panel/axes/standard_axes_options';
 import { StyleControlsProps } from '../utils/use_visualization_types';
+import { LegendOptionsPanel } from '../style_panel/legend/legend';
 import { LegendOptionsWrapper } from '../style_panel/legend/legend_options_wrapper';
 import { TooltipOptionsPanel } from '../style_panel/tooltip/tooltip';
 import { AxesSelectPanel } from '../style_panel/axes/axes_selector';

src/plugins/explore/public/components/visualizations/state_timeline/state_timeline_config.test.ts

@@ -48,6 +48,8 @@ describe('createStateTimelineConfig', () => {
       threshold: '1h',
     });
 
+    expect(defaults.legendTitle).toBe('');
+
     // Verify axes
     expect(defaults.standardAxes).toHaveLength(2);
     const xAxis = defaults.standardAxes.find((axis) => axis.axisRole === AxisRole.X);

src/plugins/explore/public/components/visualizations/state_timeline/state_timeline_config.ts

@@ -33,6 +33,7 @@ export interface StateTimeLineChartStyleOptions {
   tooltipOptions?: TooltipOptions;
   addLegend?: boolean;
   legendPosition?: Positions;
+  legendTitle?: string;
   // Axes configuration
   standardAxes?: StandardAxes[];
 
@@ -54,6 +55,7 @@ export const defaultStateTimeLineChartStyles: StateTimeLineChartStyle = {
   },
   addLegend: true,
   legendPosition: Positions.RIGHT,
+  legendTitle: '',
 
   // exclusive
   exclusive: {

src/plugins/explore/public/components/visualizations/state_timeline/state_timeline_exclusive_vis_options.test.tsx

@@ -59,7 +59,7 @@ describe('StateTimeLineExclusiveVisOptions', () => {
       />
     );
 
-    expect(screen.getByText('Show values')).toBeInTheDocument();
+    expect(screen.getByText('Show display text')).toBeInTheDocument();
     expect(screen.getByText('Row height')).toBeInTheDocument();
     expect(screen.getByTestId('connectValuesGroupButton')).toBeInTheDocument();
     expect(screen.getByTestId('disconnectValuesGroupButton')).toBeInTheDocument();

src/plugins/explore/public/components/visualizations/state_timeline/state_timeline_exclusive_vis_options.tsx

@@ -75,7 +75,7 @@ export const StateTimeLineExclusiveVisOptions = ({
       <EuiFormRow>
         <EuiSwitch
           compressed
-          label={i18n.translate('explore.vis.scatter.useThresholdColor', {
+          label={i18n.translate('explore.vis.statetimeline.useThresholdColor', {
             defaultMessage: 'Use threshold colors',
           })}
           data-test-subj="useThresholdColorButton"
@@ -88,7 +88,7 @@ export const StateTimeLineExclusiveVisOptions = ({
         <EuiSwitch
           compressed
           label={i18n.translate('explore.vis.stateTimeline.exclusive.showValues', {
-            defaultMessage: 'Show values',
+            defaultMessage: 'Show display text',
           })}
           checked={styles?.showValues ?? false}
           onChange={(e) => updateStyle('showValues', e.target.checked)}

src/plugins/explore/public/components/visualizations/state_timeline/state_timeline_vis_options.test.tsx

@@ -80,25 +80,45 @@ jest.mock('../style_panel/axes/axes_selector', () => ({
   )),
 }));
 
-jest.mock('../style_panel/legend/legend', () => {
+jest.mock('../style_panel/legend/legend_options_wrapper', () => {
   const { Positions: PositionsEnum } = jest.requireActual('../types');
   return {
-    LegendOptionsPanel: jest.fn(({ legendOptions, onLegendOptionsChange }) => (
-      <div data-test-subj="mockLegendOptionsPanel">
-        <button
-          data-test-subj="mockLegendShow"
-          onClick={() => onLegendOptionsChange({ show: !legendOptions.show })}
-        >
-          Toggle Legend
-        </button>
-        <button
-          data-test-subj="mockLegendPosition"
-          onClick={() => onLegendOptionsChange({ position: PositionsEnum.BOTTOM })}
-        >
-          Change Position
-        </button>
-      </div>
-    )),
+    LegendOptionsWrapper: jest.fn(
+      ({ styleOptions, updateStyleOption, hasSizeLegend, shouldShow }) => {
+        if (!shouldShow) {
+          return null;
+        }
+
+        return (
+          <div data-test-subj="mockLegendOptionsWrapper">
+            <button
+              data-test-subj="mockLegendShow"
+              onClick={() => updateStyleOption('addLegend', !styleOptions.addLegend)}
+            >
+              Toggle Legend
+            </button>
+            <button
+              data-test-subj="mockLegendPosition"
+              onClick={() => updateStyleOption('legendPosition', PositionsEnum.BOTTOM)}
+            >
+              Change Position
+            </button>
+            <input
+              data-test-subj="legend-title-input"
+              placeholder="Legend Title"
+              onChange={(e) => updateStyleOption('legendTitle', e.target.value)}
+            />
+            {hasSizeLegend && (
+              <input
+                data-test-subj="legend-title-for-size-input"
+                placeholder="Legend Title for Size"
+                onChange={(e) => updateStyleOption('legendTitleForSize', e.target.value)}
+              />
+            )}
+          </div>
+        );
+      }
+    ),
   };
 });
 
@@ -217,7 +237,7 @@ describe('StateTimeLineVisStyleControls', () => {
     expect(screen.getByTestId('allAxesOptions')).toBeInTheDocument();
     expect(screen.getByTestId('mockTooltipOptionsPanel')).toBeInTheDocument();
     expect(screen.getByTestId('mockStateTimelineExclusiveOptions')).toBeInTheDocument();
-    expect(screen.queryByTestId('mockLegendOptionsPanel')).toBeInTheDocument();
+    expect(screen.queryByTestId('mockLegendOptionsWrapper')).toBeInTheDocument();
     expect(screen.getByTestId('mockTitleOptionsPanel')).toBeInTheDocument();
     expect(screen.getByTestId('mockValueMappingOption')).toBeInTheDocument();
   });
@@ -329,4 +349,15 @@ describe('StateTimeLineVisStyleControls', () => {
       },
     });
   });
+
+  it('updates legend title correctly', async () => {
+    render(<StateTimeLineVisStyleControls {...mockProps} />);
+
+    const legendTitleInput = screen.getByTestId('legend-title-input');
+    await userEvent.type(legendTitleInput, 'New Legend Title');
+
+    await waitFor(() => {
+      expect(mockProps.onStyleChange).toHaveBeenCalledWith({ legendTitle: 'New Legend Title' });
+    });
+  });
 });

src/plugins/explore/public/components/visualizations/state_timeline/state_timeline_vis_options.tsx

@@ -9,7 +9,7 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { StateTimeLineChartStyle, StateTimeLineChartStyleOptions } from './state_timeline_config';
 import { AllAxesOptions } from '../style_panel/axes/standard_axes_options';
 import { StyleControlsProps } from '../utils/use_visualization_types';
-import { LegendOptionsPanel } from '../style_panel/legend/legend';
+import { LegendOptionsWrapper } from '../style_panel/legend/legend_options_wrapper';
 import { TooltipOptionsPanel } from '../style_panel/tooltip/tooltip';
 import { AxesSelectPanel } from '../style_panel/axes/axes_selector';
 import { TitleOptionsPanel } from '../style_panel/title/title';
@@ -88,22 +88,11 @@ export const StateTimeLineVisStyleControls: React.FC<StateTimeLineVisStyleContro
             />
           </EuiFlexItem>
 
-          <EuiFlexItem grow={false}>
-            <LegendOptionsPanel
-              legendOptions={{
-                show: styleOptions.addLegend,
-                position: styleOptions.legendPosition,
-              }}
-              onLegendOptionsChange={(legendOptions) => {
-                if (legendOptions.show !== undefined) {
-                  updateStyleOption('addLegend', legendOptions.show);
-                }
-                if (legendOptions.position !== undefined) {
-                  updateStyleOption('legendPosition', legendOptions.position);
-                }
-              }}
-            />
-          </EuiFlexItem>
+          <LegendOptionsWrapper
+            styleOptions={styleOptions}
+            updateStyleOption={updateStyleOption}
+            shouldShow={true}
+          />
 
           <EuiFlexItem grow={false}>
             <TitleOptionsPanel

src/plugins/explore/public/components/visualizations/state_timeline/to_expression.test.ts

@@ -119,6 +119,7 @@ const mockStyleOptions = defaultStateTimeLineChartStyles;
 describe('to_expression', () => {
   describe('createNumericalStateTimeline', () => {
     it('should create a state timeline chart with one date one cate and one metric', () => {
+      const rangeMappings = [{ type: 'range', range: { min: 0 } }];
       const mockAxisColumnMappings: AxisColumnMappings = {
         [AxisRole.COLOR]: mockNumericalColumns[0],
         [AxisRole.Y]: mockCateColumns[0],
@@ -130,7 +131,7 @@ describe('to_expression', () => {
         mockNumericalColumns,
         mockCateColumns,
         mockTimeColumns,
-        mockStyleOptions,
+        { ...mockStyleOptions, valueMappingOptions: { valueMappings: rangeMappings } },
         mockAxisColumnMappings
       );
 
@@ -164,6 +165,52 @@ describe('to_expression', () => {
       expect(markLayer).toHaveProperty('encoding.color.field', 'mergedLabel');
     });
 
+    it('should fallback to categorical state timeline when no range mappings are provided', () => {
+      const mockAxisColumnMappings: AxisColumnMappings = {
+        [AxisRole.COLOR]: mockNumericalColumns[0],
+        [AxisRole.Y]: mockCateColumns[0],
+        [AxisRole.X]: mockTimeColumns[0],
+      };
+
+      const result = createNumericalStateTimeline(
+        mockData,
+        mockNumericalColumns,
+        mockCateColumns,
+        mockTimeColumns,
+        mockStyleOptions,
+        mockAxisColumnMappings
+      );
+
+      // Verify the basic structure
+      expect(result).toHaveProperty('$schema', VEGASCHEMA);
+      expect(result).toHaveProperty('data.values', [
+        {
+          timestamp: '2023-01-01',
+          start: '2023-01-01',
+          end: '2023-01-02',
+          category: 'A',
+          category2: 'true',
+        },
+      ]);
+      expect(result).toHaveProperty('layer');
+      expect(Array.isArray(result.layer)).toBe(true);
+
+      // Verify the mark layer
+      const markLayer = result.layer[0];
+      expect(markLayer).toHaveProperty('mark.type', 'rect');
+      expect(markLayer).toHaveProperty('mark.tooltip', true);
+
+      // Verify encoding
+      expect(markLayer).toHaveProperty('encoding.x.field', 'timestamp');
+      expect(markLayer).toHaveProperty('encoding.x.type', 'temporal');
+      expect(markLayer).toHaveProperty('encoding.x.type', 'temporal');
+      expect(markLayer).toHaveProperty('encoding.x2.field', 'end');
+
+      expect(markLayer).toHaveProperty('encoding.y.field', 'category');
+      expect(markLayer).toHaveProperty('encoding.y.type', 'nominal');
+      expect(markLayer).toHaveProperty('encoding.color.field', 'mappingValue');
+    });
+
     it('includes text layer when showValues is true', () => {
       const styleWithText = {
         ...mockStyleOptions,
@@ -173,6 +220,24 @@ describe('to_expression', () => {
       const result = createNumericalStateTimeline(mockData, [], [], [], styleWithText);
       expect(result.layer).toHaveLength(2);
     });
+    it('should display Ranges when customized legend title is not set', () => {
+      const rangeMappings = [{ type: 'range', range: { min: 0 } }];
+      const styleWithLegend = {
+        ...mockStyleOptions,
+        valueMappingOptions: { valueMappings: rangeMappings },
+      };
+      const result = createNumericalStateTimeline(mockData, [], [], [], styleWithLegend);
+      expect(result.layer[0].encoding.color.legend.title).toBe('Ranges');
+    });
+
+    it('should display customized legend title', () => {
+      const styleWithLegend = {
+        ...mockStyleOptions,
+        legendTitle: 'default',
+      };
+      const result = createNumericalStateTimeline(mockData, [], [], [], styleWithLegend);
+      expect(result.layer[0].encoding.color.legend.title).toBe('default');
+    });
   });
 
   describe('createCategoricalStateTimeline', () => {
@@ -229,6 +294,14 @@ describe('to_expression', () => {
       const result = createCategoricalStateTimeline(mockData, [], [], [], styleWithTitle);
       expect(result.title).toBe('Test Title');
     });
+    it('should display customized legend title', () => {
+      const styleWithLegend = {
+        ...mockStyleOptions,
+        legendTitle: 'default',
+      };
+      const result = createCategoricalStateTimeline(mockData, [], [], [], styleWithLegend);
+      expect(result.layer[0].encoding.color.legend.title).toBe('default');
+    });
   });
 
   describe('createSingleCategoricalStateTimeline', () => {
@@ -283,5 +356,13 @@ describe('to_expression', () => {
       const result = createSingleCategoricalStateTimeline(mockData, [], [], [], styleWithThreshold);
       expect(result).toHaveProperty('data.values');
     });
+    it('should display customized legend title', () => {
+      const styleWithLegend = {
+        ...mockStyleOptions,
+        legendTitle: 'default',
+      };
+      const result = createSingleCategoricalStateTimeline(mockData, [], [], [], styleWithLegend);
+      expect(result.layer[0].encoding.color.legend.title).toBe('default');
+    });
   });
 });