fix: Persist timeseries sub display type selection from editor

Author: pulpdrew

packages/app/src/components/DBEditTimeChartForm/ChartPreviewPanel.tsx

@@ -179,6 +179,7 @@ type ChartPreviewPanelProps = {
   /** Required dashboard filters with nothing selected that block this tile. */
   missingRequiredFilterNames?: string[];
   setValue: (name: 'orderBy', value: string) => void;
+  setDisplayType: (displayType: DisplayType) => void;
   onSubmit: () => void;
 };
 
@@ -197,6 +198,7 @@ export function ChartPreviewPanel({
   dbTimeChartConfig,
   missingRequiredFilterNames,
   setValue,
+  setDisplayType,
   onSubmit,
 }: ChartPreviewPanelProps) {
   const [isSampleEventsOpen, setIsSampleEventsOpen] = useState(false);
@@ -305,6 +307,7 @@ export function ChartPreviewPanel({
           <DBTimeChart
             sourceId={sourceId}
             config={dbTimeChartConfig}
+            setDisplayType={setDisplayType}
             onTimeRangeSelect={onTimeRangeSelect}
             referenceLines={
               alert &&

packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx

@@ -15,6 +15,7 @@ import { isReducibleRangeQuery } from '@hyperdx/common-utils/dist/core/promql';
 import {
   displayTypeSupportsBuilderAlerts,
   displayTypeSupportsRawSqlAlerts,
+  isTimeSeriesDisplayType,
 } from '@hyperdx/common-utils/dist/core/utils';
 import {
   displayTypeRequiresSource,
@@ -1168,8 +1169,16 @@ export default function EditTimeChartForm({
             name="displayType"
             render={({ field: { onChange, value } }) => (
               <Tabs
-                value={value}
-                onChange={onChange}
+                // Stacked variants are picked from the preview's display
+                // switcher and live under the Time Series tab.
+                value={
+                  isTimeSeriesDisplayType(value) ? DisplayType.Line : value
+                }
+                onChange={v => {
+                  if (v === DisplayType.Line && isTimeSeriesDisplayType(value))
+                    return;
+                  onChange(v);
+                }}
                 radius={'xs'}
                 mb="md"
                 data-testid="chart-type-input"
@@ -1352,6 +1361,7 @@ export default function EditTimeChartForm({
             previewDashboardFilters?.missingRequiredFilterNames
           }
           setValue={(name, value) => setValue(name, value)}
+          setDisplayType={type => setValue('displayType', type)}
           onSubmit={onSubmit}
         />
         <SaveToDashboardModal

packages/app/src/components/DBEditTimeChartForm/__tests__/ChartPreviewPanel.test.tsx

@@ -114,6 +114,7 @@ const renderPanel = (
       showSampleEvents={false}
       showGeneratedPromql={false}
       setValue={jest.fn()}
+      setDisplayType={jest.fn()}
       onSubmit={jest.fn()}
       {...overrides}
     />,

packages/app/tests/e2e/components/ChartEditorComponent.ts

@@ -1255,6 +1255,11 @@ export class ChartEditorComponent {
     await this.applyDisplaySettings();
   }
 
+  /** Switch line / stacked bar / stacked line from the preview's toolbar. */
+  async setPreviewDisplayType(type: 'line' | 'stacked_bar' | 'stacked_line') {
+    await this.editorForm().getByTestId(`display-switcher-${type}`).click();
+  }
+
   /** A "Line interpolation" option's (visually hidden) radio in the open drawer. */
   lineInterpolationOption(mode: 'Smooth' | 'Linear' | 'Step'): Locator {
     return this.page

packages/app/tests/e2e/features/line-interpolation.spec.ts

@@ -43,4 +43,38 @@ test.describe('Line interpolation', { tag: ['@dashboard'] }, () => {
       await expect(editor.lineInterpolationOption('Step')).toBeChecked();
     });
   });
+
+  test('stacked line picked in the editor saves and defaults to linear', async ({
+    page,
+  }) => {
+    const dashboardPage = new DashboardPage(page);
+    const editor = dashboardPage.chartEditor;
+
+    await dashboardPage.goto();
+    await dashboardPage.createNewDashboard();
+    await dashboardPage.addTile();
+    await expect(editor.nameInput).toBeVisible();
+    await editor.waitForDataToLoad();
+    await editor.setChartName('Stacked line tile');
+    await editor.setPreviewDisplayType('stacked_line');
+
+    await editor.openDisplaySettings();
+    await expect(editor.lineInterpolationOption('Linear')).toBeChecked();
+    await editor.applyDisplaySettings();
+
+    await editor.save();
+    await expect(dashboardPage.getTiles()).toHaveCount(1, { timeout: 10000 });
+    await expect(
+      dashboardPage
+        .getTiles()
+        .first()
+        .getByTestId('display-switcher-stacked_line'),
+    ).toHaveAttribute('data-active', 'true');
+
+    await dashboardPage.editTile(0);
+    await expect(editor.nameInput).toBeVisible();
+    await editor.setPreviewDisplayType('stacked_bar');
+    await editor.openDisplaySettings();
+    await expect(page.getByTestId('line-interpolation-control')).toBeHidden();
+  });
 });