[TSVB] Custom renderer #83554

sulemanof · 2020-11-17T15:59:49Z

Summary

Part of #46801

Implement own renderer for TSVB visualization;
remove NoDataComponent, changed to use common for all visualizations VisualizationNoResults component;
lazy load the timeseries visualization component -> shrink initial bundle size, split with more chunks - for the visualization and the editor itself:
1. dashboard mode -> tsvb panel without data -> visualization is not loaded
1. extend timerange to show data -> additional visualization's chunks loaded
1. edit the visualization -> the last and the heaviest chunk loaded
Implement toExpressionAst function for building pipeline;
cleanup the code, remove extra wrappers, convert to typescript

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

# Conflicts: # src/plugins/vis_type_timeseries/common/constants.ts # src/plugins/vis_type_timeseries/public/metrics_type.ts

sulemanof · 2020-11-18T11:48:48Z

src/plugins/vis_type_timeseries/common/vis_schema.ts

@@ -267,7 +267,6 @@ export const visPayloadSchema = schema.object({
      })
    ),
  }),
-  savedObjectId: schema.maybe(schema.string()),


I didn't found any usage of this param, removed as legacy

src/plugins/vis_type_timeseries/common/panel_types.ts

src/plugins/vis_type_timeseries/public/types.ts

alexwizp · 2020-11-18T21:16:10Z

src/plugins/vis_type_timeseries/public/application/components/vis_types/index.ts

+ */
+
+// @ts-expect-error
+import { TimeseriesVisualization as timeseries } from './timeseries/vis';


what do you think about lazy loading of these components? I just think if the user sees only one type on the dashboard, why do we need to load all

This is a good idea. I tried to implement this approach, but noticed that it creates a lot of small chunks.
So I have a concern, what is a better approach here..
You could take a look at 2 screenshots below:

lazy load each visualization type, present couple of them in dashboard mode -> 13 small sized chunks for 4 vis types:

current approach -> 2 chunks, but they are not so huge also

So I wonder, is it worthy to do such a split?.. What are your thoughts?

@stratoula what do you think? I like idea with small chunks cause not sure that users use all tabs of TSVB on dashboard. But I'm ok with both solutions.

I like the idea too 🙂 I don't think that they load each TSVB chart type on a dashboard too. But as Daniil said the two chunks are not so big so I don't have strong objections here

@sulemanof please do what you think is right =)

@alexwizp @stratoula I'll pay more attention at the loading time of both variants in that case, and will post a comparison )

Sounds great

src/plugins/vis_type_timeseries/server/routes/vis.ts

src/plugins/vis_type_timeseries/public/timeseries_vis_renderer.tsx

elasticmachine · 2020-11-19T16:07:21Z

Pinging @elastic/kibana-app (Team:KibanaApp)

alexwizp

LGTM! thank you

stratoula · 2020-11-20T11:28:53Z

src/plugins/vis_type_timeseries/server/lib/get_vis_data.ts

-  filters?: any;
-  state?: any;
-  query?: any;
+  timerange: {


Well done for anys removal 👏

stratoula

LGTM, tested it locally on Safari, no regressions found. This seems to be our last renderer! Conrats @sulemanof, great job 💯

sulemanof · 2020-11-23T12:21:49Z

@stratoula @alexwizp
I did a non-deep analysis of loading time between both variants and concluded there is no critical difference between those in the current frame of loading the tsvb app.
But when the other steps of optimizing will be done, I believe we could save more.
I created an issue to track those optimizations #84063

kibanamachine · 2020-11-23T13:44:51Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: af49c78

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`visTypeTimeseries`	469	470	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`visTypeTimeseries`	1.7MB	1.8MB	+83.9KB

Distributable file count

id	before	after	diff
`default`	43023	43056	+33
`oss`	22550	22583	+33

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`visTypeTimeseries`	135.0KB	137.1KB	+2.1KB
`visualizations`	169.9KB	169.0KB	-946.0B
total			+1.2KB

Unknown metric groups

async chunk count

id	before	after	diff
`visTypeTimeseries`	1	12	+11

History

💚 Build #89181 succeeded 4383a41
💔 Build #88972 failed 3909685
💚 Build #88567 succeeded bdfb4b4
💔 Build #88525 failed b553eab
💔 Build #88336 failed c23834a

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

* Implement custom renderer * Remove legacy code * Use custom expression * Convert to typescript * Remove savedObjectId extra param * Other updates * Fix types * Cleanup * Fix functional tests * Bind uiSettings * Update snapshot * Update types * Remove extra params * Move common types * Return back validation error message * Use panel types enum * Fix types * Lazy load visualizations

sulemanof added 12 commits November 16, 2020 17:59

Implement custom renderer

c2bfdff

Remove legacy code

bcebcdb

Use custom expression

ce016d5

Convert to typescript

ce34e0d

Remove savedObjectId extra param

20eb918

Other updates

2cbd545

Merge remote-tracking branch 'upstream/master' into feat/tsvb_renderer

5bb1dc3

# Conflicts: # src/plugins/vis_type_timeseries/common/constants.ts # src/plugins/vis_type_timeseries/public/metrics_type.ts

Fix types

c23834a

Cleanup

99163c5

Fix functional tests

c7b55bd

Bind uiSettings

01cf485

Merge remote-tracking branch 'upstream/master' into feat/tsvb_renderer

b553eab

sulemanof commented Nov 18, 2020

View reviewed changes

sulemanof mentioned this pull request Nov 18, 2020

Renderers for all visualizations #46801

Closed

13 tasks

sulemanof added 2 commits November 18, 2020 16:30

Update snapshot

ea6c8a5

Update types

bdfb4b4

sulemanof requested review from DianaDerevyankina, VladLasitsa, stratoula and alexwizp November 18, 2020 14:54

sulemanof added release_note:skip Skip the PR/issue when compiling release notes Team:Visualizations Visualization editors, elastic-charts and infrastructure v7.11.0 v8.0.0 Feature:TSVB TSVB (Time Series Visual Builder) labels Nov 18, 2020

alexwizp reviewed Nov 18, 2020

View reviewed changes

src/plugins/vis_type_timeseries/common/panel_types.ts Outdated Show resolved Hide resolved

alexwizp reviewed Nov 18, 2020

View reviewed changes

src/plugins/vis_type_timeseries/public/types.ts Outdated Show resolved Hide resolved

alexwizp reviewed Nov 18, 2020

View reviewed changes

alexwizp reviewed Nov 19, 2020

View reviewed changes

src/plugins/vis_type_timeseries/server/routes/vis.ts Show resolved Hide resolved

alexwizp reviewed Nov 19, 2020

View reviewed changes

src/plugins/vis_type_timeseries/public/timeseries_vis_renderer.tsx Outdated Show resolved Hide resolved

sulemanof added 5 commits November 19, 2020 16:27

Merge remote-tracking branch 'upstream/master' into feat/tsvb_renderer

d7084bf

Remove extra params

dd02f42

Move common types

c25825e

Return back validation error message

9fcab26

Use panel types enum

3909685

sulemanof marked this pull request as ready for review November 19, 2020 16:07

sulemanof requested a review from a team November 19, 2020 16:07

Fix types

4383a41

alexwizp approved these changes Nov 20, 2020

View reviewed changes

stratoula reviewed Nov 20, 2020

View reviewed changes

stratoula approved these changes Nov 20, 2020

View reviewed changes

sulemanof added 2 commits November 23, 2020 11:45

Merge remote-tracking branch 'upstream/master' into feat/tsvb_renderer

316c905

Lazy load visualizations

af49c78

sulemanof merged commit bb023c5 into elastic:master Nov 23, 2020

sulemanof deleted the feat/tsvb_renderer branch November 23, 2020 16:41

sulemanof mentioned this pull request Nov 23, 2020

[7.x] [TSVB] Custom renderer (#83554) #84118

Merged

alexwizp mentioned this pull request Dec 2, 2020

[TSVB] [Cleanup] Remove extra dateFormat props #84749

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TSVB] Custom renderer #83554

[TSVB] Custom renderer #83554

sulemanof commented Nov 17, 2020 •

edited

Loading

sulemanof Nov 18, 2020

alexwizp Nov 18, 2020

sulemanof Nov 19, 2020

alexwizp Nov 20, 2020

stratoula Nov 20, 2020

alexwizp Nov 20, 2020

sulemanof Nov 20, 2020

stratoula Nov 20, 2020

elasticmachine commented Nov 19, 2020

alexwizp left a comment

stratoula Nov 20, 2020

stratoula left a comment

sulemanof commented Nov 23, 2020

kibanamachine commented Nov 23, 2020

async chunk count

[TSVB] Custom renderer #83554

[TSVB] Custom renderer #83554

Conversation

sulemanof commented Nov 17, 2020 • edited Loading

Summary

Checklist

For maintainers

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

elasticmachine commented Nov 19, 2020

alexwizp left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stratoula left a comment

Choose a reason for hiding this comment

sulemanof commented Nov 23, 2020

kibanamachine commented Nov 23, 2020

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Distributable file count

Page load bundle

async chunk count

History

sulemanof commented Nov 17, 2020 •

edited

Loading