[graph-ng] add temporal DataFrame alignment/outerJoin & move null-asZero pass inside

[leeoniya]

What this PR does / why we need it:

uPlot requires data to be aligned along x.

this changeset adds an alignment pass over a DataFrame[] and emits a single temporally-aligned DataFrame, in addition to a closured isGap null-testing function which uPlot needs to discern which nulls represent actual gaps from the original DataFrames, and which nulls are alignment artifacts.

the code is largely based on my alignment code used in example 3, here: https://leeoniya.github.io/uPlot/demos/path-gap-clip.html

additionally, the zero-fill pass is moved into the the alignment function, since it felt like it belonged there.

Special notes for your reviewer:

something that still needs to be addressed is the requirement for isGap on every initialized series to be updated just prior to any .setData() call, since these must always be kept in sync. something like this should be sufficient:

u.series.forEach(s => {
  s.isGap = newIsGap;
});

u.setData(newData);

[CLAassistant]

All committers have signed the CLA.

[leeoniya]

not sure what's going on here. VSCode doesnt seem to have issues. maybe it's not upgrading uPlot to 1.4.2?

https://github.com/leeoniya/uPlot/blob/9ab576f67139567551e3a8dfc507b282f6b594fc/dist/uPlot.d.ts#L538-L543

Summary of all failing tests
FAIL packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts
  ● UPlotConfigBuilder › allows axes configuration

    TypeError: Cannot read property 'Side' of undefined

      57 |       label: 'test label',
      58 |       timeZone: 'browser',
    > 59 |       side: Axis.Side.Bottom,
         |                  ^
      60 |       isTime: false,
      61 |       formatValue: () => 'test value',
      62 |       grid: false,

      at Object.<anonymous> (packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts:59:18)

[torkelo]

Wow! Did some tests,

50 series x 10000 data points = before 580ms, this PR: 68ms
50 series x 2000 data points = before 100ms, this PR 8ms

That's what I call a perf boost :)

The legend looks a bit wrong :)

[leeoniya]

@torkelo

how are you measuring?

10x is surprising to me. i'd expect something closer to 3x speedup, in line with raw Flot [1] unless there are some drastic perf cliffs when adding more series, or you guys have accidenrally introduced some slowdowns through flot customization.

it's also worth noting that starting with 1.4.0, uPlot uses a deferred/async rendering strategy via a microTask queue. so a simple console.timeEnd() will no longer give you the full render time. you have to queue it up either via window.queueMicrotask or a resolved promise:

https://github.com/leeoniya/uPlot/blob/master/bench/uPlot.html#L135

i'd like to perf test this myself but yarn start always emits unoptimized dev builds, so i don't know how to get representative numbers for the overall improvement.

i'll dig into the Flot panel a bit today and add a few console.time calls to see. maybe some of the improvement you're seeing is from other panel-related changes and not just the graph?

[1] https://leeoniya.github.io/uPlot/demos/multi-bars.html

[torkelo]

I used the performance capture feature in chrome dev tools

[torkelo]

you can use yarn build to get an optimized build

[leeoniya]

@torkelo sorry, i think we've been talking past each other. i thought you were comparing to Flot, not the previous alignment strategy. in retrospect it should have been obvious.

i think the main speedup here probably comes from the fast-path exit for single dataframes (which are already naturally aligned):

grafana/packages/grafana-ui/src/components/GraphNG/utils.ts

Lines 86 to 91 in 3eca6e2

	if (tables.length === 1) {
	return {
	data: tables[0],
	isGap: () => true,
	};
	}

[ryantxu]

Names look good now -- still something funky with enums and uPlot typescript, but let's fix that in a different issue