[BUGFIX] (table): expand time series for PivotByLabel transforms

table/src/TableExportAction.tsx

@@ -21,7 +21,7 @@ import React, { useCallback, useMemo } from 'react';
 
 import type { TableProps } from './components';
 import type { TableOptions } from './models';
-import { buildRawTableData } from './table-data-utils';
+import { buildRawTableData, getTablePanelQueryMode, needsTimeSeriesExpansion } from './table-data-utils';
 
 export interface ExportColumn {
   key: string;
@@ -37,8 +37,11 @@ export function buildTableData(
   queryResults: Array<PanelData<QueryDataType>>,
   spec: TableOptions,
 ): { data: Array<Record<string, unknown>>; columns: ExportColumn[] } {
-  // Use shared utility with forExport=true to get raw scalar values
-  const rawData = buildRawTableData(queryResults, spec, { forExport: true });
+  const rawData = buildRawTableData(queryResults, spec, {
+    forExport: true,
+    expandTimeSeries: needsTimeSeriesExpansion(spec),
+    queryMode: getTablePanelQueryMode(spec),
+  });
 
   const transformed = transformData(rawData, spec.transforms ?? []);
 

table/src/components/TablePanel.tsx

@@ -26,7 +26,7 @@ import { createPortal } from 'react-dom';
 
 import type { CellSettings, ColumnSettings, TableOptions } from '../models';
 import { evaluateConditionalFormatting } from '../models';
-import { buildRawTableData, getTablePanelQueryMode } from '../table-data-utils';
+import { buildRawTableData, getTablePanelQueryMode, needsTimeSeriesExpansion } from '../table-data-utils';
 import { EmbeddedPanel } from './EmbeddedPanel';
 
 type FilterValuesType<T> = Array<{ original: T; formatted: T }>;
@@ -431,8 +431,10 @@ export function TablePanel({ contentDimensions, spec, queryResults }: TableProps
 
   // TODO: handle other query types
   const rawData: Array<Record<string, unknown>> = useMemo(() => {
-    // Transform query results to a tabular format using shared utility
-    return buildRawTableData(queryResults, spec);
+    return buildRawTableData(queryResults, spec, {
+      expandTimeSeries: needsTimeSeriesExpansion(spec),
+      queryMode: getTablePanelQueryMode(spec),
+    });
   }, [queryResults, spec]);
 
   // Transform will be applied by their orders on the original data

table/src/table-data-utils.test.ts

@@ -15,7 +15,12 @@ import type { PanelData } from '@perses-dev/plugin-system';
 import type { JsonData, TimeSeriesData } from '@perses-dev/spec';
 
 import type { TableOptions } from './models';
-import { buildJsonTableData, buildRawTableData, getTablePanelQueryMode } from './table-data-utils';
+import {
+  buildJsonTableData,
+  buildRawTableData,
+  getTablePanelQueryMode,
+  needsTimeSeriesExpansion,
+} from './table-data-utils';
 
 function makeTsPanelData(series: TimeSeriesData['series']): PanelData<TimeSeriesData> {
   return {
@@ -41,6 +46,49 @@ function makeJsonPanelData(payload: unknown): PanelData<JsonData> {
   };
 }
 
+describe('needsTimeSeriesExpansion', () => {
+  it('is false when there are no transforms', () => {
+    expect(needsTimeSeriesExpansion({})).toBe(false);
+  });
+
+  it('is true when MergeSeries runs before PivotByLabel', () => {
+    const spec: TableOptions = {
+      transforms: [
+        { kind: 'MergeSeries', spec: {} },
+        { kind: 'PivotByLabel', spec: { columnLabel: 'farm' } },
+      ],
+    };
+    expect(needsTimeSeriesExpansion(spec)).toBe(true);
+  });
+
+  it('is true when a transform follows PivotByLabel', () => {
+    const spec: TableOptions = {
+      transforms: [
+        { kind: 'PivotByLabel', spec: { columnLabel: 'farm' } },
+        { kind: 'MergeSeries', spec: {} },
+      ],
+    };
+    expect(needsTimeSeriesExpansion(spec)).toBe(true);
+  });
+
+  it('skips disabled trailing transforms', () => {
+    const spec: TableOptions = {
+      transforms: [
+        { kind: 'PivotByLabel', spec: { columnLabel: 'farm' } },
+        { kind: 'MergeSeries', spec: { disabled: true } },
+      ],
+    };
+    expect(needsTimeSeriesExpansion(spec)).toBe(true);
+  });
+
+  it('is false when PivotByLabel is disabled', () => {
+    const spec: TableOptions = {
+      transforms: [{ kind: 'PivotByLabel', spec: { columnLabel: 'farm', disabled: true } }],
+    };
+    expect(needsTimeSeriesExpansion(spec)).toBe(false);
+  });
+});
+
 describe('getTablePanelQueryMode', () => {
   it('returns instant when there are no column settings', () => {
     expect(getTablePanelQueryMode({})).toBe('instant');
@@ -64,6 +112,23 @@ describe('getTablePanelQueryMode', () => {
     };
     expect(getTablePanelQueryMode(spec)).toBe('range');
   });
+
+  it('returns range when last enabled transform is PivotByLabel', () => {
+    const spec: TableOptions = {
+      transforms: [{ kind: 'PivotByLabel', spec: { columnLabel: 'farm' } }],
+    };
+    expect(getTablePanelQueryMode(spec)).toBe('range');
+  });
+
+  it('returns range when a transform follows PivotByLabel', () => {
+    const spec: TableOptions = {
+      transforms: [
+        { kind: 'PivotByLabel', spec: { columnLabel: 'farm' } },
+        { kind: 'MergeSeries', spec: {} },
+      ],
+    };
+    expect(getTablePanelQueryMode(spec)).toBe('range');
+  });
 });
 
 describe('buildJsonTableData', () => {
@@ -221,4 +286,51 @@ describe('buildRawTableData', () => {
     } as PanelData<TimeSeriesData>;
     expect(buildRawTableData([pending], {})).toEqual([]);
   });
+
+  it('expands one row per timestamp when expandTimeSeries is true', () => {
+    const result = buildRawTableData(
+      [
+        makeTsPanelData([
+          {
+            name: 's',
+            values: [
+              [1000, 1],
+              [2000, 2],
+            ],
+            labels: { farm: 'a' },
+          },
+        ]),
+      ],
+      {},
+      { expandTimeSeries: true, queryMode: 'range' },
+    );
+    expect(result).toEqual([
+      { timestamp: 1000, value: 1, farm: 'a' },
+      { timestamp: 2000, value: 2, farm: 'a' },
+    ]);
+  });
+
+  it('keeps last sample when expandTimeSeries is false even if PivotByLabel is last', () => {
+    const spec: TableOptions = {
+      transforms: [{ kind: 'PivotByLabel', spec: { columnLabel: 'farm' } }],
+    };
+    const result = buildRawTableData(
+      [
+        makeTsPanelData([
+          {
+            name: 's',
+            values: [
+              [1000, 1],
+              [2000, 2],
+            ],
+            labels: { farm: 'a' },
+          },
+        ]),
+      ],
+      spec,
+      { expandTimeSeries: false, queryMode: 'instant' },
+    );
+    expect(result).toHaveLength(1);
+    expect(result[0]).toMatchObject({ timestamp: 2000, value: 2, farm: 'a' });
+  });
 });

table/src/table-data-utils.ts

@@ -15,6 +15,7 @@ import type { Labels, PanelData } from '@perses-dev/plugin-system';
 import type { JsonData, TimeSeries, TimeSeriesData } from '@perses-dev/spec';
 
 import type { TableOptions } from './models';
+import { transformRequiresEachSample } from './transform-requirements';
 
 /**
  * Options for building raw table data.
@@ -25,14 +26,31 @@ export interface BuildRawTableDataOptions {
    * When false, plugin columns will contain embedded PanelData objects (for rendering).
    */
   forExport?: boolean;
+  /** One row per sample. Defaults to needsTimeSeriesExpansion. */
+  expandTimeSeries?: boolean;
+  /** Query mode already resolved for this panel. Defaults to getTablePanelQueryMode. */
+  queryMode?: 'instant' | 'range';
+}
+
+/** True when an enabled transform needs one row per timestamp. */
+export function needsTimeSeriesExpansion(spec: TableOptions): boolean {
+  return (spec.transforms ?? []).some(
+    (transform) => transform.spec?.disabled !== true && transformRequiresEachSample(transform.kind),
+  );
 }
 
 /**
  * Determines the query mode based on table options.
- * If any column has a plugin (embedded panel), use range mode; otherwise instant.
+ * If any column has a plugin (embedded panel), or a transform needs every sample, use range mode; otherwise instant.
  */
 export function getTablePanelQueryMode(spec: TableOptions): 'instant' | 'range' {
-  return (spec.columnSettings ?? []).some((c) => c.plugin) ? 'range' : 'instant';
+  if ((spec.columnSettings ?? []).some((c) => c.plugin)) {
+    return 'range';
+  }
+  if (needsTimeSeriesExpansion(spec)) {
+    return 'range';
+  }
+  return 'instant';
 }
 
 /**
@@ -67,21 +85,11 @@ function buildTimeSeriesTableData(
   options: BuildRawTableDataOptions = {},
 ): Array<Record<string, unknown>> {
   const { forExport = false } = options;
-  const queryMode = getTablePanelQueryMode(spec);
-
-  return queryResults
-    .flatMap((data: PanelData<TimeSeriesData>, queryIndex: number) =>
-      (data.data?.series ?? []).map((ts: TimeSeries) => ({ data, ts, queryIndex })),
-    )
-    .map(({ data, ts, queryIndex }: { data: PanelData<TimeSeriesData>; ts: TimeSeries; queryIndex: number }) => {
-      // Pick the last (most recent) data point. For range responses the last
-      // value covers the window ending at the selected time range's end.
-      const lastPoint = ts.values[ts.values.length - 1];
-      if (lastPoint === undefined) {
-        return { ...ts.labels };
-      }
+  const queryMode = options.queryMode ?? getTablePanelQueryMode(spec);
+  const expandTime = options.expandTimeSeries ?? needsTimeSeriesExpansion(spec);
 
-      // If there are multiple queries, add query index to value key and label keys to avoid conflicts
+  return queryResults.flatMap((data: PanelData<TimeSeriesData>, queryIndex: number) =>
+    (data.data?.series ?? []).flatMap((ts: TimeSeries) => {
       const valueColumnName = queryResults.length === 1 ? 'value' : `value #${queryIndex + 1}`;
       const labels =
         queryResults.length === 1
@@ -91,8 +99,24 @@ function buildTimeSeriesTableData(
               return acc;
             }, {} as Labels);
 
-      // For export: always use raw scalar values
-      // For rendering: plugin columns get embedded PanelData objects
+      const points = ts.values ?? [];
+      if (points.length === 0) {
+        return [{ ...labels }];
+      }
+
+      if (expandTime) {
+        return points.map(([tsMs, value]) => ({
+          timestamp: tsMs,
+          [valueColumnName]: value,
+          ...labels,
+        }));
+      }
+
+      const lastPoint = points[points.length - 1];
+      if (lastPoint === undefined) {
+        return [{ ...labels }];
+      }
+
       let columnValue: unknown;
       if (forExport) {
         columnValue = lastPoint[1];
@@ -104,11 +128,11 @@ function buildTimeSeriesTableData(
       }
 
       if (queryMode === 'instant') {
-        return { timestamp: lastPoint[0], [valueColumnName]: columnValue, ...labels };
-      } else {
-        return { [valueColumnName]: columnValue, ...labels };
+        return [{ timestamp: lastPoint[0], [valueColumnName]: columnValue, ...labels }];
       }
-    });
+      return [{ [valueColumnName]: columnValue, ...labels }];
+    }),
+  );
 }
 
 function safeStringify(v: object): string {

table/src/transform-requirements.ts

@@ -0,0 +1,18 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+const TRANSFORMS_REQUIRING_EACH_SAMPLE = new Set(['PivotByLabel']);
+
+export function transformRequiresEachSample(kind: string): boolean {
+  return TRANSFORMS_REQUIRING_EACH_SAMPLE.has(kind);
+}