DataFrame: Deprecate MutableDataFrame (grafana#67569)

Author: ryantxu

.betterer.results

@@ -86,7 +86,9 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "18"],
       [0, 0, 0, "Do not use any type assertions.", "19"],
       [0, 0, 0, "Do not use any type assertions.", "20"],
-      [0, 0, 0, "Do not use any type assertions.", "21"]
+      [0, 0, 0, "Do not use any type assertions.", "21"],
+      [0, 0, 0, "Do not use any type assertions.", "22"],
+      [0, 0, 0, "Do not use any type assertions.", "23"]
     ],
     "packages/grafana-data/src/datetime/datemath.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],

packages/grafana-data/src/dataframe/MutableDataFrame.ts

@@ -10,10 +10,16 @@ import { guessFieldTypeFromValue, guessFieldTypeForField, toDataFrameDTO } from
 /** @deprecated */
 export type MutableField<T = any> = Field<T>;
 
+/** @deprecated */
 type MutableVectorCreator = (buffer?: any[]) => any[];
 
 export const MISSING_VALUE = undefined; // Treated as connected in new graph panel
 
+/**
+ * MutableDataFrame is a complex wrapper around the DataFrame interface
+ *
+ * @deprecated use standard DataFrame, or create one with PartialDataFrame
+ */
 export class MutableDataFrame<T = any> extends FunctionalVector<T> implements DataFrame {
   name?: string;
   refId?: string;

packages/grafana-data/src/dataframe/processDataFrame.test.ts

@@ -2,8 +2,8 @@ import { dateTime } from '../datetime/moment_wrapper';
 import { DataFrameDTO, FieldType, TableData, TimeSeries } from '../types/index';
 
 import { ArrayDataFrame } from './ArrayDataFrame';
-import { MutableDataFrame } from './MutableDataFrame';
 import {
+  createDataFrame,
   guessFieldTypeFromValue,
   guessFieldTypes,
   isDataFrame,
@@ -130,7 +130,7 @@ describe('toDataFrame', () => {
   });
 
   it('Guess Column Types from series', () => {
-    const series = new MutableDataFrame({
+    const series = createDataFrame({
       fields: [
         { name: 'A (number)', values: [123, null] },
         { name: 'B (strings)', values: [null, 'Hello'] },

packages/grafana-data/src/dataframe/processDataFrame.ts

@@ -27,7 +27,6 @@ import {
 
 import { arrayToDataFrame } from './ArrayDataFrame';
 import { dataFrameFromJSON } from './DataFrameJSON';
-import { MutableDataFrame } from './MutableDataFrame';
 
 function convertTableToDataFrame(table: TableData): DataFrame {
   const fields = table.columns.map((c) => {
@@ -315,7 +314,7 @@ export function toDataFrame(data: any): DataFrame {
     }
 
     // This will convert the array values into Vectors
-    return new MutableDataFrame(data as DataFrameDTO);
+    return createDataFrame(data as DataFrameDTO);
   }
 
   // Handle legacy docs/json type
@@ -567,3 +566,35 @@ export function preProcessPanelData(data: PanelData, lastResult?: PanelData): Pa
     timings: { dataProcessingTime: STOPTIME - STARTTIME },
   };
 }
+
+export interface PartialDataFrame extends Omit<DataFrame, 'fields' | 'length'> {
+  fields: Array<Partial<Field>>;
+}
+
+export function createDataFrame(input: PartialDataFrame): DataFrame {
+  let length = 0;
+  const fields = input.fields.map((p, idx) => {
+    const { state, ...field } = p;
+    if (!field.name) {
+      field.name = `Field ${idx + 1}`;
+    }
+    if (!field.config) {
+      field.config = {};
+    }
+    if (!field.values) {
+      field.values = new Array(length);
+    } else if (field.values.length > length) {
+      length = field.values.length;
+    }
+    if (!field.type) {
+      field.type = guessFieldTypeForField(field as Field) ?? FieldType.other;
+    }
+    return field as Field;
+  });
+
+  return {
+    ...input,
+    fields,
+    length,
+  };
+}

packages/grafana-data/src/field/fieldDisplay.test.ts

@@ -508,8 +508,25 @@ function createEmptyDisplayOptions(extend = {}): GetFieldDisplayValuesOptions {
 }
 
 function createDisplayOptions(extend: Partial<GetFieldDisplayValuesOptions> = {}): GetFieldDisplayValuesOptions {
-  const options: GetFieldDisplayValuesOptions = {
-    data: [
+  const options = merge(
+    {
+      replaceVariables: (value: string) => {
+        return value;
+      },
+      reduceOptions: {
+        calcs: [],
+      },
+      fieldConfig: {
+        overrides: [],
+        defaults: {},
+      },
+      theme: createTheme(),
+    },
+    extend
+  );
+
+  if (!options.data?.length) {
+    options.data = [
       toDataFrame({
         name: 'Series Name',
         fields: [
@@ -518,21 +535,9 @@ function createDisplayOptions(extend: Partial<GetFieldDisplayValuesOptions> = {}
           { name: 'Field 3', values: [2, 4, 6] },
         ],
       }),
-    ],
-    replaceVariables: (value: string) => {
-      return value;
-    },
-    reduceOptions: {
-      calcs: [],
-    },
-    fieldConfig: {
-      overrides: [],
-      defaults: {},
-    },
-    theme: createTheme(),
-  };
-
-  return merge(options, extend);
+    ];
+  }
+  return options;
 }
 
 describe('fixCellTemplateExpressions', () => {

packages/grafana-data/src/field/fieldOverrides.test.ts

@@ -1,4 +1,4 @@
-import { ArrayDataFrame, MutableDataFrame, toDataFrame } from '../dataframe';
+import { ArrayDataFrame, createDataFrame, toDataFrame } from '../dataframe';
 import { rangeUtil } from '../datetime';
 import { createTheme } from '../themes';
 import { FieldMatcherID } from '../transformations';
@@ -177,11 +177,11 @@ describe('applyFieldOverrides', () => {
   };
 
   describe('given multiple data frames', () => {
-    const f0 = new MutableDataFrame({
+    const f0 = createDataFrame({
       name: 'A',
       fields: [{ name: 'message', type: FieldType.string, values: [10, 20] }],
     });
-    const f1 = new MutableDataFrame({
+    const f1 = createDataFrame({
       name: 'B',
       fields: [{ name: 'info', type: FieldType.string, values: [10, 20] }],
     });
@@ -676,7 +676,7 @@ describe('getLinksSupplier', () => {
       getTimeRangeForUrl: () => ({ from: 'now-7d', to: 'now' }),
     });
 
-    const f0 = new MutableDataFrame({
+    const f0 = createDataFrame({
       name: 'A',
       fields: [
         {
@@ -712,7 +712,7 @@ describe('getLinksSupplier', () => {
     });
 
     const datasourceUid = '1234';
-    const f0 = new MutableDataFrame({
+    const f0 = createDataFrame({
       name: 'A',
       fields: [
         {
@@ -766,7 +766,7 @@ describe('getLinksSupplier', () => {
 
     const datasourceUid = '1234';
     const range = rangeUtil.relativeToTimeRange({ from: 600, to: 0 });
-    const f0 = new MutableDataFrame({
+    const f0 = createDataFrame({
       name: 'A',
       fields: [
         {
@@ -827,7 +827,7 @@ describe('getLinksSupplier', () => {
     it('handles link click handlers', () => {
       const onClickSpy = jest.fn();
       const replaceSpy = jest.fn();
-      const f0 = new MutableDataFrame({
+      const f0 = createDataFrame({
         name: 'A',
         fields: [
           {
@@ -867,7 +867,7 @@ describe('getLinksSupplier', () => {
       const replaceSpy = jest.fn().mockReturnValue('url interpolated 10');
       const onBuildUrlSpy = jest.fn();
 
-      const f0 = new MutableDataFrame({
+      const f0 = createDataFrame({
         name: 'A',
         fields: [
           {

packages/grafana-data/src/field/getFieldDisplayValuesProxy.test.tsx

@@ -1,4 +1,4 @@
-import { MutableDataFrame, toDataFrame } from '../dataframe';
+import { createDataFrame, toDataFrame } from '../dataframe';
 import { createTheme } from '../themes';
 
 import { applyFieldOverrides } from './fieldOverrides';
@@ -85,7 +85,7 @@ describe('getFieldDisplayValuesProxy', () => {
 
   it('should use default display processor if display is not defined', () => {
     const p = getFieldDisplayValuesProxy({
-      frame: new MutableDataFrame({ fields: [{ name: 'test', values: [1, 2] }] }),
+      frame: createDataFrame({ fields: [{ name: 'test', values: [1, 2] }] }),
       rowIndex: 0,
     });
     expect(p.test.text).toBe('1');

packages/grafana-data/src/transformations/fieldReducer.test.ts

@@ -1,7 +1,6 @@
 import { difference } from 'lodash';
 
-import { MutableDataFrame } from '../dataframe/MutableDataFrame';
-import { guessFieldTypeFromValue } from '../dataframe/processDataFrame';
+import { createDataFrame, guessFieldTypeFromValue } from '../dataframe/processDataFrame';
 import { Field, FieldType } from '../types/index';
 
 import { fieldReducers, ReducerID, reduceField } from './fieldReducer';
@@ -24,7 +23,7 @@ function createField<T>(name: string, values?: T[], type?: FieldType): Field<T>
 }
 
 describe('Stats Calculators', () => {
-  const basicTable = new MutableDataFrame({
+  const basicTable = createDataFrame({
     fields: [
       { name: 'a', values: [10, 20] },
       { name: 'b', values: [20, 30] },

packages/grafana-data/src/transformations/transformers/groupingToMatrix.ts

@@ -1,6 +1,5 @@
 import { map } from 'rxjs/operators';
 
-import { MutableDataFrame } from '../../dataframe';
 import { getFieldDisplayName } from '../../field/fieldState';
 import { DataFrame, DataTransformerInfo, Field, FieldType, SpecialValue } from '../../types';
 import { fieldMatchers } from '../matchers';
@@ -75,13 +74,14 @@ export const groupingToMatrixTransformer: DataTransformerInfo<GroupingToMatrixTr
           matrixValues[columnName][rowName] = value;
         }
 
-        const resultFrame = new MutableDataFrame();
-
-        resultFrame.addField({
-          name: rowColumnField,
-          values: rowValues,
-          type: FieldType.string,
-        });
+        const fields: Field[] = [
+          {
+            name: rowColumnField,
+            values: rowValues,
+            type: FieldType.string,
+            config: {},
+          },
+        ];
 
         for (const columnName of columnValues) {
           let values = [];
@@ -98,15 +98,20 @@ export const groupingToMatrixTransformer: DataTransformerInfo<GroupingToMatrixTr
             valueField.config = { ...valueField.config, displayNameFromDS: undefined };
           }
 
-          resultFrame.addField({
+          fields.push({
             name: columnName.toString(),
             values: values,
             config: valueField.config,
             type: valueField.type,
           });
         }
 
-        return [resultFrame];
+        return [
+          {
+            fields,
+            length: rowValues.length,
+          },
+        ];
       })
     ),
 };

packages/grafana-data/src/utils/flotPairs.test.ts

@@ -1,11 +1,11 @@
-import { MutableDataFrame } from '../dataframe/MutableDataFrame';
+import { createDataFrame } from '../dataframe';
 import { dateTime } from '../datetime/moment_wrapper';
 import { TimeRange } from '../types/time';
 
 import { getFlotPairs, getFlotPairsConstant } from './flotPairs';
 
 describe('getFlotPairs', () => {
-  const series = new MutableDataFrame({
+  const series = createDataFrame({
     fields: [
       { name: 'a', values: [1, 2, 3] },
       { name: 'b', values: [100, 200, 300] },

packages/grafana-runtime/src/utils/DataSourceWithBackend.test.ts

@@ -8,7 +8,7 @@ import {
   DataSourceInstanceSettings,
   DataSourceJsonData,
   DataSourceRef,
-  MutableDataFrame,
+  createDataFrame,
 } from '@grafana/data';
 
 import {
@@ -240,10 +240,12 @@ describe('DataSourceWithBackend', () => {
     let obs = toStreamingDataResponse(rsp, request, standardStreamOptionsProvider);
     expect(obs).toBeDefined();
 
-    let frame = new MutableDataFrame();
-    frame.meta = {
-      channel: 'a/b/c',
-    };
+    let frame = createDataFrame({
+      meta: {
+        channel: 'a/b/c',
+      },
+      fields: [],
+    });
     rsp.data = [frame];
     obs = toStreamingDataResponse(rsp, request, standardStreamOptionsProvider);
     expect(obs).toBeDefined();