[TSVB] Filter by clicking on the timeseries chart #97426

stratoula · 2021-04-19T08:55:35Z

Summary

Adds support to create filters by clicking on a TSVB timeseries chart when is embedded on a dashboard. When the user edits/creates the visualization and clicks the chart, no filter is applied as the filter bar is not rendered.

As a bonus, the URL and dashboard drilldowns for click events are now supported 🎉

Filter by click on a dashboard:

Dasboard drilldowns - click event:

Checklist

Delete any items that are not applicable to this PR.

Unit or functional tests were updated or added to match the most common scenarios
This was checked for cross-browser compatibility

stratoula · 2021-05-06T05:51:56Z

@elasticmachine merge upstream

stratoula · 2021-05-10T05:33:07Z

@elasticmachine merge upstream

elasticmachine · 2021-05-10T11:58:52Z

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

stratoula · 2021-05-12T05:35:57Z

@elasticmachine merge upstream

flash1293

Found some nits but overall it's working great

flash1293 · 2021-05-12T09:20:11Z

...plugins/vis_type_timeseries/public/application/components/lib/convert_series_to_datatable.ts

+        id,
+        name: layer.metrics[0].field || seriesPerLayer[0].splitByLabel,
+        isMetric: true,
+        type: layer.metrics[0].type,


Can you explain why this is necessary? As there can be multiple metrics and the first one might not even be used, I'm not sure whether it would work in all cases.

Yes you are right, I changed it to the latest metric in the list. If I don't miss anything this is always the active one per layer on TSVB.
eb75702

flash1293 · 2021-05-12T09:23:22Z

src/plugins/vis_type_timeseries/public/application/components/lib/get_click_filter_data.ts

+    const table = tables[termArray[0]];
+
+    const layer = model.series.filter(({ id }) => id === termArray[0]);
+    let splitLabel = termArray.length > 1 ? termArray[1] : undefined;


Nit: Can you extract termArray.length > 1 into a constant like hasSplit or something similar? I tripped over this a few times.

I changed it to const [layerId, splitLabel] = specId.split(':');
and used the splitLabel instead. Are you ok with it?

eb75702

flash1293 · 2021-05-12T09:25:27Z

...plugins/vis_type_timeseries/public/application/components/lib/convert_series_to_datatable.ts

 }

 export const addMetaToColumns = (
  columns: TSVBColumns[],
-  indexPattern: IndexPattern,
-  metricsType: string
+  indexPattern: IndexPattern
 ): DatatableColumn[] => {
  return columns.map((column) => {
    const field = indexPattern.getFieldByName(column.name);
    const type = (field?.spec.type as DatatableColumnType) || 'number';


Not sure whether it matters, but this isn't correct for filters - it will assume type as number because there is no field in this case.

@flash1293 this is now the case on viz, here is the example of the meta on a filters column (taken by xy axis)

type === number

I see, guess we should fix this on esaggs side as well. Anyway, for consistency reasons it makes sense to keep it for now 👍

flash1293 · 2021-05-12T09:27:50Z

...plugins/vis_type_timeseries/public/application/components/lib/convert_series_to_datatable.ts

+    };
+    if (column.type === BUCKET_TYPES.FILTERS && column.params) {
+      const filters = column.params.map((col) => ({
+        input: col.filter,


nit: I think if you add label: col.label in here, it will pick it up as custom label for the filter pill (this is what happens for Lens/Visualize as well)

You are absolutely right

Fixed eb75702

kibanamachine · 2021-05-12T12:56:55Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`visTypeTimeseries`	503	504	+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.7MB	+2.9KB
`visualizations`	101.1KB	101.2KB	+92.0B
total			+3.0KB

Page load bundle

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

id	before	after	diff
`visTypeTimeseries`	27.4KB	27.5KB	+82.0B

Unknown metric groups

References to deprecated APIs

id	before	after	diff
`globalSearch`	4	2	-2
`indexManagement`	12	7	-5
`infra`	5	3	-2
`licensing`	18	15	-3
`monitoring`	109	56	-53
total			-65

History

💚 Build #125474 succeeded 92ad097
💚 Build #124980 succeeded 84ea244
💔 Build #124953 failed 01bf898
💛 Build #124651 was flaky 837db57
💚 Build #124642 succeeded ea6896e

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

flash1293

Tested and works as expected - LGTM

* WIP TSVB filter by click * Disable filter click when showBar is set to false * Exclude metric columns as they are not filtered * Allow filters group by filter click event * Fix CI and unit tests * Add some comments * Move to separate function for easier testing * Add more unit tests * Add a functional test * Improve types * Fix bug with group by filters and user applies custom labels * fix time filter bug * Address PR comments Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

* WIP TSVB filter by click * Disable filter click when showBar is set to false * Exclude metric columns as they are not filtered * Allow filters group by filter click event * Fix CI and unit tests * Add some comments * Move to separate function for easier testing * Add more unit tests * Add a functional test * Improve types * Fix bug with group by filters and user applies custom labels * fix time filter bug * Address PR comments Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

stratoula and others added 6 commits April 6, 2021 14:47

WIP TSVB filter by click

b7e9178

Disable filter click when showBar is set to false

8239f51

Merge with master and resolve conflicts

4ebdc5c

Exclude metric columns as they are not filtered

d76b9d9

Allow filters group by filter click event

2811767

Merge branch 'master' into tsvb-click-filter

9df82a8

stratoula changed the title ~~Tsvb click filter~~ [TSVB] Filter by clicking on the timeseries chart Apr 19, 2021

kibanamachine and others added 6 commits April 27, 2021 07:30

Merge branch 'master' into tsvb-click-filter

0361a09

Merge branch 'master' into tsvb-click-filter

8ad57b0

Fix CI and unit tests

c38f93a

Add some comments

08f18f0

Move to separate function for easier testing

da99718

Add more unit tests

ba3adc3

kibanamachine and others added 2 commits May 6, 2021 01:51

Merge branch 'master' into tsvb-click-filter

ea6896e

Add a functional test

837db57

kibanamachine and others added 2 commits May 10, 2021 01:33

Merge branch 'master' into tsvb-click-filter

01bf898

Improve types

3d40138

stratoula added the release_note:feature Makes this part of the condensed release notes label May 10, 2021

stratoula added 2 commits May 10, 2021 12:03

Fix bug with group by filters and user applies custom labels

2bf2fae

fix time filter bug

84ea244

stratoula marked this pull request as ready for review May 10, 2021 11:58

stratoula requested a review from a team May 10, 2021 11:58

stratoula added the Team:Visualizations Visualization editors, elastic-charts and infrastructure label May 10, 2021

Merge branch 'master' into tsvb-click-filter

92ad097

flash1293 reviewed May 12, 2021

View reviewed changes

Address PR comments

eb75702

flash1293 approved these changes May 12, 2021

View reviewed changes

stratoula merged commit a900110 into elastic:master May 12, 2021

stratoula mentioned this pull request May 12, 2021

[7.x] [TSVB] Filter by clicking on the timeseries chart (#97426) #99927

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TSVB] Filter by clicking on the timeseries chart #97426

[TSVB] Filter by clicking on the timeseries chart #97426

stratoula commented Apr 19, 2021 •

edited

Loading

stratoula commented May 6, 2021

stratoula commented May 10, 2021

elasticmachine commented May 10, 2021

stratoula commented May 12, 2021

flash1293 left a comment

flash1293 May 12, 2021

stratoula May 12, 2021

flash1293 May 12, 2021

stratoula May 12, 2021

flash1293 May 12, 2021

stratoula May 12, 2021

flash1293 May 12, 2021

flash1293 May 12, 2021

stratoula May 12, 2021

kibanamachine commented May 12, 2021

References to deprecated APIs

flash1293 left a comment

[TSVB] Filter by clicking on the timeseries chart #97426

[TSVB] Filter by clicking on the timeseries chart #97426

Conversation

stratoula commented Apr 19, 2021 • edited Loading

Summary

Checklist

stratoula commented May 6, 2021

stratoula commented May 10, 2021

elasticmachine commented May 10, 2021

stratoula commented May 12, 2021

flash1293 left a 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kibanamachine commented May 12, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

References to deprecated APIs

History

flash1293 left a comment

Choose a reason for hiding this comment

stratoula commented Apr 19, 2021 •

edited

Loading