Skip to content

N
nexpie-grafana-theme
Commit f2327baf by Ryan McKinley Committed by GitHub
Options

DataFrame: cache frame/field index in field state (#30529)

parent f97348ff
Showing with 259 additions and 193 deletions
packages/grafana-data/src/types/dataFrame.ts
......@@ -162,6 +162,13 @@ export interface FieldState {
* Useful for assigning color to series by looking up a color in a palette using this index
*/
seriesIndex?: number;
/**
* Location of this field within the context frames results
*
* @internal -- we will try to make this unnecessary
*/
origin?: DataFrameFieldIndex;
}
export interface NumericRange {
......@@ -206,7 +213,8 @@ export const TIME_SERIES_METRIC_FIELD_NAME = 'Metric';
/**
* Describes where a specific data frame field is located within a
* dataset of type DataFrame[]
* @public
*
* @internal -- we will try to make this unnecessary
*/
export interface DataFrameFieldIndex {
frameIndex: number;
......
packages/grafana-ui/src/components/GraphNG/GraphNG.tsx
......@@ -12,7 +12,7 @@ import {
reduceField,
TimeRange,
} from '@grafana/data';
import { alignDataFrames } from './utils';
import { joinDataFrames } from './utils';
import { useTheme } from '../../themes';
import { UPlotChart } from '../uPlot/Plot';
import { PlotProps } from '../uPlot/types';
......@@ -64,9 +64,7 @@ export const GraphNG: React.FC<GraphNGProps> = ({
const theme = useTheme();
const hasLegend = useRef(legend && legend.displayMode !== LegendDisplayMode.Hidden);
const alignedFrameWithGapTest = useMemo(() => alignDataFrames(data, fields), [data, fields]);
const alignedFrame = alignedFrameWithGapTest?.frame;
const getDataFrameFieldIndex = alignedFrameWithGapTest?.getDataFrameFieldIndex;
const frame = useMemo(() => joinDataFrames(data, fields), [data, fields]);
const compareFrames = useCallback((a?: DataFrame | null, b?: DataFrame | null) => {
if (a && b) {
......@@ -98,17 +96,17 @@ export const GraphNG: React.FC<GraphNGProps> = ({
currentTimeRange.current = timeRange;
}, [timeRange]);
const configRev = useRevision(alignedFrame, compareFrames);
const configRev = useRevision(frame, compareFrames);
const configBuilder = useMemo(() => {
const builder = new UPlotConfigBuilder();
if (!alignedFrame) {
if (!frame) {
return builder;
}
// X is the first field in the aligned frame
const xField = alignedFrame.fields[0];
const xField = frame.fields[0];
if (xField.type === FieldType.time) {
builder.addScale({
......@@ -141,8 +139,8 @@ export const GraphNG: React.FC<GraphNGProps> = ({
}
let indexByName: Map<string, number> | undefined = undefined;
for (let i = 0; i < alignedFrame.fields.length; i++) {
const field = alignedFrame.fields[i];
for (let i = 0; i < frame.fields.length; i++) {
const field = frame.fields[i];
const config = field.config as FieldConfig<GraphFieldConfig>;
const customConfig: GraphFieldConfig = {
...defaultConfig,
......@@ -182,14 +180,13 @@ export const GraphNG: React.FC<GraphNGProps> = ({
}
const showPoints = customConfig.drawStyle === DrawStyle.Points ? PointVisibility.Always : customConfig.showPoints;
const dataFrameFieldIndex = getDataFrameFieldIndex ? getDataFrameFieldIndex(i) : undefined;
let { fillOpacity } = customConfig;
if (customConfig.fillBelowTo) {
if (!indexByName) {
indexByName = getNamesToFieldIndex(alignedFrame);
indexByName = getNamesToFieldIndex(frame);
}
const t = indexByName.get(getFieldDisplayName(field, alignedFrame));
const t = indexByName.get(getFieldDisplayName(field, frame));
const b = indexByName.get(customConfig.fillBelowTo);
if (isNumber(b) && isNumber(t)) {
builder.addBand({
......@@ -221,15 +218,15 @@ export const GraphNG: React.FC<GraphNGProps> = ({
thresholds: config.thresholds,
// The following properties are not used in the uPlot config, but are utilized as transport for legend config
dataFrameFieldIndex,
fieldName: getFieldDisplayName(field, alignedFrame),
dataFrameFieldIndex: field.state?.origin,
fieldName: getFieldDisplayName(field, frame),
hideInLegend: customConfig.hideFrom?.legend,
});
}
return builder;
}, [configRev, timeZone]);
if (alignedFrameWithGapTest == null) {
if (!frame) {
return (
<div className="panel-empty">
<p>No data found in response</p>
......@@ -299,7 +296,7 @@ export const GraphNG: React.FC<GraphNGProps> = ({
<VizLayout width={width} height={height} legend={legendElement}>
{(vizWidth: number, vizHeight: number) => (
<UPlotChart
data={alignedFrameWithGapTest}
data={frame}
config={configBuilder}
width={vizWidth}
height={vizHeight}
......
packages/grafana-ui/src/components/GraphNG/utils.test.ts
import { ArrayVector, DataFrame, FieldType, toDataFrame } from '@grafana/data';
import { AlignedFrameWithGapTest } from '../uPlot/types';
import { alignDataFrames, isLikelyAscendingVector } from './utils';
import { joinDataFrames, isLikelyAscendingVector } from './utils';
describe('alignDataFrames', () => {
describe('aligned frame', () => {
describe('joinDataFrames', () => {
describe('joined frame', () => {
it('should align multiple data frames into one data frame', () => {
const data: DataFrame[] = [
toDataFrame({
......@@ -20,37 +19,64 @@ describe('alignDataFrames', () => {
}),
];
const aligned = alignDataFrames(data);
expect(aligned?.frame.fields).toEqual([
{
config: {},
state: {},
name: 'time',
type: FieldType.time,
values: new ArrayVector([1000, 2000, 3000, 4000]),
},
{
config: {},
state: {
displayName: 'temperature A',
seriesIndex: 0,
const joined = joinDataFrames(data);
expect(joined?.fields).toMatchInlineSnapshot(`
Array [
Object {
"config": Object {},
"name": "time",
"state": Object {
"origin": undefined,
},
"type": "time",
"values": Array [
1000,
2000,
3000,
4000,
],
},
Object {
"config": Object {},
"name": "temperature A",
"state": Object {
"displayName": "temperature A",
"origin": Object {
"fieldIndex": 1,
"frameIndex": 0,
},
"seriesIndex": 0,
},
"type": "number",
"values": Array [
1,
3,
5,
7,
],
},
name: 'temperature A',
type: FieldType.number,
values: new ArrayVector([1, 3, 5, 7]),
},
{
config: {},
state: {
displayName: 'temperature B',
seriesIndex: 1,
Object {
"config": Object {},
"name": "temperature B",
"state": Object {
"displayName": "temperature B",
"origin": Object {
"fieldIndex": 1,
"frameIndex": 1,
},
"seriesIndex": 1,
},
"type": "number",
"values": Array [
0,
2,
6,
7,
],
},
name: 'temperature B',
type: FieldType.number,
values: new ArrayVector([0, 2, 6, 7]),
},
]);
]
`);
});
it('should align multiple data frames into one data frame but only keep first time field', () => {
......@@ -69,37 +95,64 @@ describe('alignDataFrames', () => {
}),
];
const aligned = alignDataFrames(data);
expect(aligned?.frame.fields).toEqual([
{
config: {},
state: {},
name: 'time',
type: FieldType.time,
values: new ArrayVector([1000, 2000, 3000, 4000]),
},
{
config: {},
state: {
displayName: 'temperature',
seriesIndex: 0,
const aligned = joinDataFrames(data);
expect(aligned?.fields).toMatchInlineSnapshot(`
Array [
Object {
"config": Object {},
"name": "time",
"state": Object {
"origin": undefined,
},
"type": "time",
"values": Array [
1000,
2000,
3000,
4000,
],
},
Object {
"config": Object {},
"name": "temperature",
"state": Object {
"displayName": "temperature",
"origin": Object {
"fieldIndex": 1,
"frameIndex": 0,
},
"seriesIndex": 0,
},
"type": "number",
"values": Array [
1,
3,
5,
7,
],
},
name: 'temperature',
type: FieldType.number,
values: new ArrayVector([1, 3, 5, 7]),
},
{
config: {},
state: {
displayName: 'temperature B',
seriesIndex: 1,
Object {
"config": Object {},
"name": "temperature B",
"state": Object {
"displayName": "temperature B",
"origin": Object {
"fieldIndex": 1,
"frameIndex": 1,
},
"seriesIndex": 1,
},
"type": "number",
"values": Array [
0,
2,
6,
7,
],
},
name: 'temperature B',
type: FieldType.number,
values: new ArrayVector([0, 2, 6, 7]),
},
]);
]
`);
});
it('should align multiple data frames into one data frame and skip non-numeric fields', () => {
......@@ -113,27 +166,45 @@ describe('alignDataFrames', () => {
}),
];
const aligned = alignDataFrames(data);
expect(aligned?.frame.fields).toEqual([
{
config: {},
state: {},
name: 'time',
type: FieldType.time,
values: new ArrayVector([1000, 2000, 3000, 4000]),
},
{
config: {},
state: {
displayName: 'temperature',
seriesIndex: 0,
const aligned = joinDataFrames(data);
expect(aligned?.fields).toMatchInlineSnapshot(`
Array [
Object {
"config": Object {},
"name": "time",
"state": Object {
"origin": undefined,
},
"type": "time",
"values": Array [
1000,
2000,
3000,
4000,
],
},
Object {
"config": Object {},
"name": "temperature",
"state": Object {
"displayName": "temperature",
"origin": Object {
"fieldIndex": 1,
"frameIndex": 0,
},
"seriesIndex": 0,
},
"type": "number",
"values": Array [
1,
3,
5,
7,
],
},
name: 'temperature',
type: FieldType.number,
values: new ArrayVector([1, 3, 5, 7]),
},
]);
]
`);
});
it('should align multiple data frames into one data frame and skip non-numeric fields', () => {
......@@ -147,32 +218,50 @@ describe('alignDataFrames', () => {
}),
];
const aligned = alignDataFrames(data);
expect(aligned?.frame.fields).toEqual([
{
config: {},
state: {},
name: 'time',
type: FieldType.time,
values: new ArrayVector([1000, 2000, 3000, 4000]),
},
{
config: {},
state: {
displayName: 'temperature',
seriesIndex: 0,
const aligned = joinDataFrames(data);
expect(aligned?.fields).toMatchInlineSnapshot(`
Array [
Object {
"config": Object {},
"name": "time",
"state": Object {
"origin": undefined,
},
"type": "time",
"values": Array [
1000,
2000,
3000,
4000,
],
},
Object {
"config": Object {},
"name": "temperature",
"state": Object {
"displayName": "temperature",
"origin": Object {
"fieldIndex": 1,
"frameIndex": 0,
},
"seriesIndex": 0,
},
"type": "number",
"values": Array [
1,
3,
5,
7,
],
},
name: 'temperature',
type: FieldType.number,
values: new ArrayVector([1, 3, 5, 7]),
},
]);
]
`);
});
});
describe('getDataFrameFieldIndex', () => {
let aligned: AlignedFrameWithGapTest | null;
let aligned: DataFrame | null;
beforeAll(() => {
const data: DataFrame[] = [
......@@ -197,7 +286,7 @@ describe('alignDataFrames', () => {
}),
];
aligned = alignDataFrames(data);
aligned = joinDataFrames(data);
});
it.each`
......@@ -209,7 +298,7 @@ describe('alignDataFrames', () => {
`('should return correct index for yDim', ({ yDim, index }) => {
const [frameIndex, fieldIndex] = index;
expect(aligned?.getDataFrameFieldIndex(yDim)).toEqual({
expect(aligned?.fields[yDim].state?.origin).toEqual({
frameIndex,
fieldIndex,
});
......
packages/grafana-ui/src/components/GraphNG/utils.ts
......@@ -12,7 +12,6 @@ import {
sortDataFrame,
Vector,
} from '@grafana/data';
import { AlignedFrameWithGapTest } from '../uPlot/types';
import uPlot, { AlignedData, JoinNullMode } from 'uplot';
import { XYFieldMatchers } from './GraphNG';
......@@ -44,7 +43,7 @@ export function mapDimesions(match: XYFieldMatchers, frame: DataFrame, frames?:
*
* @alpha
*/
export function alignDataFrames(frames: DataFrame[], fields?: XYFieldMatchers): AlignedFrameWithGapTest | null {
export function joinDataFrames(frames: DataFrame[], fields?: XYFieldMatchers): DataFrame | null {
const valuesFromFrames: AlignedData[] = [];
const sourceFields: Field[] = [];
const sourceFieldsRefs: Record<number, DataFrameFieldIndex> = {};
......@@ -118,39 +117,34 @@ export function alignDataFrames(frames: DataFrame[], fields?: XYFieldMatchers):
}
// do the actual alignment (outerJoin on the first arrays)
let alignedData = uPlot.join(valuesFromFrames, nullModes);
let joinedData = uPlot.join(valuesFromFrames, nullModes);
if (alignedData!.length !== sourceFields.length) {
if (joinedData!.length !== sourceFields.length) {
throw new Error('outerJoinValues lost a field?');
}
let seriesIdx = 0;
// Replace the values from the outer-join field
return {
frame: {
length: alignedData![0].length,
fields: alignedData!.map((vals, idx) => {
let state: FieldState = { ...sourceFields[idx].state };
if (sourceFields[idx].type !== FieldType.time) {
state.seriesIndex = seriesIdx;
seriesIdx++;
}
return {
...sourceFields[idx],
state,
values: new ArrayVector(vals),
};
}),
},
getDataFrameFieldIndex: (alignedFieldIndex: number) => {
const index = sourceFieldsRefs[alignedFieldIndex];
if (!index) {
throw new Error(`Could not find index for ${alignedFieldIndex}`);
...frames[0],
length: joinedData![0].length,
fields: joinedData!.map((vals, idx) => {
let state: FieldState = {
...sourceFields[idx].state,
origin: sourceFieldsRefs[idx],
};
if (sourceFields[idx].type !== FieldType.time) {
state.seriesIndex = seriesIdx;
seriesIdx++;
}
return index;
},
return {
...sourceFields[idx],
state,
values: new ArrayVector(vals),
};
}),
};
}
......
packages/grafana-ui/src/components/Sparkline/Sparkline.tsx
......@@ -160,10 +160,7 @@ export class Sparkline extends PureComponent<Props, State> {
return (
<UPlotChart
data={{
frame: data,
getDataFrameFieldIndex: () => undefined,
}}
data={data}
config={configBuilder}
width={width}
height={height}
......
packages/grafana-ui/src/components/uPlot/Plot.test.tsx
import React from 'react';
import { UPlotChart } from './Plot';
import { act, render } from '@testing-library/react';
import { ArrayVector, DataFrame, dateTime, FieldConfig, FieldType, MutableDataFrame } from '@grafana/data';
import { ArrayVector, dateTime, FieldConfig, FieldType, MutableDataFrame } from '@grafana/data';
import { GraphFieldConfig, DrawStyle } from '../uPlot/config';
import uPlot from 'uplot';
import createMockRaf from 'mock-raf';
import { UPlotConfigBuilder } from './config/UPlotConfigBuilder';
import { AlignedFrameWithGapTest } from './types';
const mockRaf = createMockRaf();
const setDataMock = jest.fn();
......@@ -69,11 +68,10 @@ describe('UPlotChart', () => {
it('destroys uPlot instance when component unmounts', () => {
const { data, timeRange, config } = mockData();
const uPlotData = createPlotData(data);
const { unmount } = render(
<UPlotChart
data={uPlotData}
data={data} // mock
config={config}
timeRange={timeRange}
timeZone={'browser'}
......@@ -95,11 +93,10 @@ describe('UPlotChart', () => {
describe('data update', () => {
it('skips uPlot reinitialization when there are no field config changes', () => {
const { data, timeRange, config } = mockData();
const uPlotData = createPlotData(data);
const { rerender } = render(
<UPlotChart
data={uPlotData}
data={data} // mock
config={config}
timeRange={timeRange}
timeZone={'browser'}
......@@ -116,11 +113,10 @@ describe('UPlotChart', () => {
expect(uPlot).toBeCalledTimes(1);
data.fields[1].values.set(0, 1);
uPlotData.frame = data;
rerender(
<UPlotChart
data={uPlotData}
data={data} // changed
config={config}
timeRange={timeRange}
timeZone={'browser'}
......@@ -136,10 +132,9 @@ describe('UPlotChart', () => {
describe('config update', () => {
it('skips uPlot intialization for width and height equal 0', async () => {
const { data, timeRange, config } = mockData();
const uPlotData = createPlotData(data);
const { queryAllByTestId } = render(
<UPlotChart data={uPlotData} config={config} timeRange={timeRange} timeZone={'browser'} width={0} height={0} />
<UPlotChart data={data} config={config} timeRange={timeRange} timeZone={'browser'} width={0} height={0} />
);
expect(queryAllByTestId('uplot-main-div')).toHaveLength(1);
......@@ -148,11 +143,10 @@ describe('UPlotChart', () => {
it('reinitializes uPlot when config changes', () => {
const { data, timeRange, config } = mockData();
const uPlotData = createPlotData(data);
const { rerender } = render(
<UPlotChart
data={uPlotData}
data={data} // frame
config={config}
timeRange={timeRange}
timeZone={'browser'}
......@@ -170,7 +164,7 @@ describe('UPlotChart', () => {
rerender(
<UPlotChart
data={uPlotData}
data={data}
config={new UPlotConfigBuilder()}
timeRange={timeRange}
timeZone={'browser'}
......@@ -185,11 +179,10 @@ describe('UPlotChart', () => {
it('skips uPlot reinitialization when only dimensions change', () => {
const { data, timeRange, config } = mockData();
const uPlotData = createPlotData(data);
const { rerender } = render(
<UPlotChart
data={uPlotData}
data={data} // frame
config={config}
timeRange={timeRange}
timeZone={'browser'}
......@@ -205,7 +198,7 @@ describe('UPlotChart', () => {
rerender(
<UPlotChart
data={uPlotData}
data={data} // frame
config={new UPlotConfigBuilder()}
timeRange={timeRange}
timeZone={'browser'}
......@@ -220,10 +213,3 @@ describe('UPlotChart', () => {
});
});
});
const createPlotData = (frame: DataFrame): AlignedFrameWithGapTest => {
return {
frame,
getDataFrameFieldIndex: () => undefined,
};
};
packages/grafana-ui/src/components/uPlot/Plot.tsx
......@@ -39,7 +39,7 @@ export const UPlotChart: React.FC<PlotProps> = (props) => {
// 1. When config is ready and there is no uPlot instance, create new uPlot and return
if (isConfigReady && !plotInstance.current) {
plotInstance.current = initializePlot(prepareData(props.data.frame), currentConfig.current, canvasRef.current);
plotInstance.current = initializePlot(prepareData(props.data), currentConfig.current, canvasRef.current);
setIsPlotReady(true);
return;
}
......@@ -60,12 +60,12 @@ export const UPlotChart: React.FC<PlotProps> = (props) => {
pluginLog('uPlot core', false, 'destroying instance');
plotInstance.current.destroy();
}
plotInstance.current = initializePlot(prepareData(props.data.frame), currentConfig.current, canvasRef.current);
plotInstance.current = initializePlot(prepareData(props.data), currentConfig.current, canvasRef.current);
return;
}
// 4. Otherwise, assume only data has changed and update uPlot data
updateData(props.data.frame, props.config, plotInstance.current, prepareData(props.data.frame));
updateData(props.data, props.config, plotInstance.current, prepareData(props.data));
}, [props, isConfigReady]);
// When component unmounts, clean the existing uPlot instance
......@@ -86,7 +86,7 @@ export const UPlotChart: React.FC<PlotProps> = (props) => {
);
};
function prepareData(frame: DataFrame) {
function prepareData(frame: DataFrame): AlignedData {
return frame.fields.map((f) => f.values.toArray()) as AlignedData;
}
......
packages/grafana-ui/src/components/uPlot/context.ts
import React, { useCallback, useContext } from 'react';
import uPlot, { Series } from 'uplot';
import { PlotPlugin, AlignedFrameWithGapTest } from './types';
import { PlotPlugin } from './types';
import { DataFrame, Field, FieldConfig } from '@grafana/data';
interface PlotCanvasContextType {
......@@ -26,7 +26,7 @@ interface PlotContextType extends PlotPluginsContextType {
getSeries: () => Series[];
getCanvas: () => PlotCanvasContextType;
canvasRef: any;
data: AlignedFrameWithGapTest;
data: DataFrame;
}
export const PlotContext = React.createContext<PlotContextType>({} as PlotContextType);
......@@ -76,7 +76,7 @@ export const usePlotData = (): PlotDataAPI => {
if (!ctx) {
throwWhenNoContext('usePlotData');
}
return ctx!.data.frame.fields[idx];
return ctx!.data.fields[idx];
},
[ctx]
);
......@@ -109,7 +109,7 @@ export const usePlotData = (): PlotDataAPI => {
}
// by uPlot convention x-axis is always first field
// this may change when we introduce non-time x-axis and multiple x-axes (https://leeoniya.github.io/uPlot/demos/time-periods.html)
return ctx!.data.frame.fields.slice(1);
return ctx!.data.fields.slice(1);
}, [ctx]);
if (!ctx) {
......@@ -117,7 +117,7 @@ export const usePlotData = (): PlotDataAPI => {
}
return {
data: ctx.data.frame,
data: ctx.data,
getField,
getFieldValue,
getFieldConfig,
......@@ -129,7 +129,7 @@ export const usePlotData = (): PlotDataAPI => {
export const buildPlotContext = (
isPlotReady: boolean,
canvasRef: any,
data: AlignedFrameWithGapTest,
data: DataFrame,
registerPlugin: any,
getPlotInstance: () => uPlot | undefined
): PlotContextType => {
......
packages/grafana-ui/src/components/uPlot/types.ts
import React from 'react';
import uPlot, { Options, Hooks } from 'uplot';
import { DataFrame, DataFrameFieldIndex, TimeRange, TimeZone } from '@grafana/data';
import { DataFrame, TimeRange, TimeZone } from '@grafana/data';
import { UPlotConfigBuilder } from './config/UPlotConfigBuilder';
export type PlotSeriesConfig = Pick<Options, 'series' | 'scales' | 'axes' | 'cursor' | 'bands'>;
......@@ -16,7 +16,7 @@ export interface PlotPluginProps {
}
export interface PlotProps {
data: AlignedFrameWithGapTest;
data: DataFrame;
timeRange: TimeRange;
timeZone: TimeZone;
width: number;
......@@ -29,8 +29,3 @@ export abstract class PlotConfigBuilder<P, T> {
constructor(public props: P) {}
abstract getConfig(): T;
}
export interface AlignedFrameWithGapTest {
frame: DataFrame;
getDataFrameFieldIndex: (alignedFieldIndex: number) => DataFrameFieldIndex | undefined;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment