[Lens] Trigger a filter action on click in datatable visualization #63840

mbondyra · 2020-04-17T12:32:27Z

Summary

The design is aligned with inspector design, but here hover happens on cell, not on row:

Here's the little demo:
https://www.loom.com/share/6e5dd6fcd196494cb63216eceefaff8e

Closes #61417

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
Unit or functional tests were updated or added to match the most common scenarios
This was checked for keyboard-only and screenreader accessibility
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
This was checked for cross-browser compatibility, including a check against IE11

AlonaNadler · 2020-04-29T14:04:34Z

Thanks for the recorded video @mbondyra !!
Can the tool tip says include value or exclude value it currently writes filter this value

wylieconlon

LGTM, thanks!

mbondyra · 2020-04-29T16:57:55Z

@AlonaNadler it says 'filter out value' and 'filter for value' - consistent with the tooltips for datatable visualization but of course we can change it!

wylieconlon · 2020-04-29T19:06:47Z

The comment about tap behavior was confirming that it works as expected: no change needed for touch devices.

cchaos

Looks good to me. I also tested the functionality, layout and how the filters were saved with the vis. 👍 Just a couple things need to be added.

cchaos · 2020-04-29T21:22:27Z

x-pack/plugins/lens/public/datatable_visualization/_visualization.scss

+
+.lnsDataTable__filter {
+  opacity: 0;
+  transition: opacity 250ms ease-in-out;


Suggested change

transition: opacity 250ms ease-in-out;

transition: opacity $euiAnimSpeedNormal ease-in-out;

cchaos · 2020-04-29T21:25:22Z

x-pack/plugins/lens/public/datatable_visualization/_visualization.scss

+  transition: opacity 250ms ease-in-out;
+}
+
+.lnsDataTable__cell:hover  {


The icons need to reveal on focus as well.

Suggested change

.lnsDataTable__cell:hover {

.lnsDataTable__cell:hover,

.lnsDataTable__cell:focus-within {

cchaos · 2020-04-29T21:29:58Z

x-pack/plugins/lens/public/datatable_visualization/expression.tsx

+                              aria-label={i18n.translate(
+                                'xpack.lens.filterForValueButtonAriaLabel',
+                                {
+                                  defaultMessage: 'Filter for value',


For the aria-labels only, I'm wondering if we should include the value here like Filter for geo.src: AE?

mbondyra · 2020-04-30T09:48:45Z

@elasticmachine merge upstream

x-pack/plugins/lens/public/datatable_visualization/_visualization.scss

…ion.scss Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

kibanamachine · 2020-04-30T21:29:39Z

💚 Build Succeeded

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

History

💚 Build #44521 succeeded 1dcdfa2
💚 Build #44453 succeeded dab164a
💚 Build #44373 succeeded 3e9b878
💔 Build #44353 failed 594210d
💚 Build #44286 succeeded 1615f23

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

cchaos

👍 Thanks for making those changes.

…lastic#63840) * wip: datatable * fix: empty values * fix: empty values * translations * using dataPlugin to get buckets * one more time, passing aggs data * tests: added * feat: new design applied * remove icon * feat: old design * CR corrections * better name * Fix merge issue * fix: design changes * feat: correction * fix: copy changes * Update x-pack/plugins/lens/public/datatable_visualization/_visualization.scss Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update _visualization.scss Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Wylie Conlon <wylieconlon@gmail.com> Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

…63840) (#64967)

* upstream/master: (315 commits) [APM] Fix failing `ApmIndices` test (elastic#64965) [APM] Fix paths for ts optimization script (elastic#65012) Use HDR for percentiles (elastic#64758) [EPM] fix updates available filter (elastic#64957) [Uptime] Certificates page (elastic#64059) load lens app lazily (elastic#64769) [legacy/server/config] remove unnecessary deps for simple helper (elastic#64954) Fixed alert Edit flyout shows the error message when one of this actions has a preconfigured action type (elastic#64742) [data.search.aggs] Remove legacy aggs APIs. (elastic#64719) Fixed `AddAlert` flyout does not immediately update state to reflect new props (elastic#64927) [Discover] Show doc viewer action buttons on focus (elastic#64912) [EPM] restrict package install endpoint from installing/updating to old packages (elastic#64932) [Metrics UI] Add inventory metric threshold alerts (elastic#64292) [Canvas] Adds edit menu (elastic#64738) [Canvas] Adds refresh and autoplay options to view menu (elastic#64375) [Lens] Trigger a filter action on click in datatable visualization (elastic#63840) [SIEM][CASE] Refactor Connectors - Jira Connector (elastic#63450) [APM] Client new platform migration (elastic#64046) [Monitoring] NP Migration complete client cutover (elastic#62908) Ingest Node Pipelines UI (elastic#62321) ...

…or-part-mvp-2 * 'master' of github.com:elastic/kibana: (51 commits) [APM] Fix failing `ApmIndices` test (elastic#64965) [APM] Fix paths for ts optimization script (elastic#65012) Use HDR for percentiles (elastic#64758) [EPM] fix updates available filter (elastic#64957) [Uptime] Certificates page (elastic#64059) load lens app lazily (elastic#64769) [legacy/server/config] remove unnecessary deps for simple helper (elastic#64954) Fixed alert Edit flyout shows the error message when one of this actions has a preconfigured action type (elastic#64742) [data.search.aggs] Remove legacy aggs APIs. (elastic#64719) Fixed `AddAlert` flyout does not immediately update state to reflect new props (elastic#64927) [Discover] Show doc viewer action buttons on focus (elastic#64912) [EPM] restrict package install endpoint from installing/updating to old packages (elastic#64932) [Metrics UI] Add inventory metric threshold alerts (elastic#64292) [Canvas] Adds edit menu (elastic#64738) [Canvas] Adds refresh and autoplay options to view menu (elastic#64375) [Lens] Trigger a filter action on click in datatable visualization (elastic#63840) [SIEM][CASE] Refactor Connectors - Jira Connector (elastic#63450) [APM] Client new platform migration (elastic#64046) [Monitoring] NP Migration complete client cutover (elastic#62908) Ingest Node Pipelines UI (elastic#62321) ... # Conflicts: # x-pack/plugins/ingest_pipelines/common/types.ts # x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx # x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx # x-pack/plugins/ingest_pipelines/public/shared_imports.ts

* master: (44 commits) onEvent prop for expression component (elastic#64995) [APM] Fix failing `ApmIndices` test (elastic#64965) [APM] Fix paths for ts optimization script (elastic#65012) Use HDR for percentiles (elastic#64758) [EPM] fix updates available filter (elastic#64957) [Uptime] Certificates page (elastic#64059) load lens app lazily (elastic#64769) [legacy/server/config] remove unnecessary deps for simple helper (elastic#64954) Fixed alert Edit flyout shows the error message when one of this actions has a preconfigured action type (elastic#64742) [data.search.aggs] Remove legacy aggs APIs. (elastic#64719) Fixed `AddAlert` flyout does not immediately update state to reflect new props (elastic#64927) [Discover] Show doc viewer action buttons on focus (elastic#64912) [EPM] restrict package install endpoint from installing/updating to old packages (elastic#64932) [Metrics UI] Add inventory metric threshold alerts (elastic#64292) [Canvas] Adds edit menu (elastic#64738) [Canvas] Adds refresh and autoplay options to view menu (elastic#64375) [Lens] Trigger a filter action on click in datatable visualization (elastic#63840) [SIEM][CASE] Refactor Connectors - Jira Connector (elastic#63450) [APM] Client new platform migration (elastic#64046) [Monitoring] NP Migration complete client cutover (elastic#62908) ...

…63840) (#64993) * wip: datatable * fix: empty values * fix: empty values * translations * using dataPlugin to get buckets * one more time, passing aggs data * tests: added * feat: new design applied * remove icon * feat: old design * CR corrections * better name * Fix merge issue * fix: design changes * feat: correction * fix: copy changes * Update x-pack/plugins/lens/public/datatable_visualization/_visualization.scss Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update _visualization.scss Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Wylie Conlon <wylieconlon@gmail.com> Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Wylie Conlon <wylieconlon@gmail.com> Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

botelastic bot added the Feature:Embedding Embedding content via iFrame label Apr 17, 2020

mbondyra added Feature:Lens release_note:enhancement v7.8.0 v8.0.0 labels Apr 17, 2020

mbondyra force-pushed the lens/clicking-datatable-filter branch 6 times, most recently from 392e754 to 8ddf676 Compare April 24, 2020 11:03

mbondyra added 9 commits April 24, 2020 13:05

wip: datatable

be57365

fix: empty values

7475198

fix: empty values

a6183a6

translations

abe63e1

using dataPlugin to get buckets

093c6c7

one more time, passing aggs data

af89e27

tests: added

9647389

feat: new design applied

d6a65bc

remove icon

632e096

mbondyra force-pushed the lens/clicking-datatable-filter branch from 8ddf676 to 632e096 Compare April 24, 2020 11:06

feat: old design

a57d980

mbondyra marked this pull request as ready for review April 24, 2020 11:24

mbondyra requested a review from a team April 24, 2020 11:24

mbondyra requested a review from a team as a code owner April 24, 2020 11:24

mbondyra requested review from wylieconlon, flash1293 and timroes April 24, 2020 11:24

elastic deleted a comment from kibanamachine Apr 24, 2020

wylieconlon approved these changes Apr 29, 2020

View reviewed changes

Merge remote-tracking branch 'origin/master' into datatable-click

6a94994

cchaos reviewed Apr 29, 2020

View reviewed changes

wylieconlon and others added 4 commits April 29, 2020 19:23

Merge remote-tracking branch 'origin/master' into datatable-click

fb8c322

Fix merge issue

1615f23

fix: design changes

594210d

feat: correction

35deebb

elasticmachine and others added 2 commits April 30, 2020 05:48

Merge branch 'master' into lens/clicking-datatable-filter

3e9b878

fix: copy changes

dab164a

cchaos reviewed Apr 30, 2020

View reviewed changes

x-pack/plugins/lens/public/datatable_visualization/_visualization.scss Outdated Show resolved Hide resolved

mbondyra and others added 3 commits April 30, 2020 18:28

Update x-pack/plugins/lens/public/datatable_visualization/_visualizat…

47d0e1b

…ion.scss Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Update _visualization.scss

1dcdfa2

Merge remote-tracking branch 'origin/master' into datatable-click

ea231fb

cchaos approved these changes Apr 30, 2020

View reviewed changes

wylieconlon merged commit c4e6789 into elastic:master Apr 30, 2020

wylieconlon mentioned this pull request Apr 30, 2020

[7.x] [Lens] Trigger a filter action on click in datatable visualization (#63840) #64967

Merged

mbondyra mentioned this pull request May 1, 2020

[7.x] [Lens] Trigger a filter action on click in datatable visualization (#63840) #64993

Merged

mbondyra pushed a commit that referenced this pull request May 1, 2020

[Lens] Trigger a filter action on click in datatable visualization (#…

dd54453

…63840) (#64967)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Lens] Trigger a filter action on click in datatable visualization #63840

[Lens] Trigger a filter action on click in datatable visualization #63840

mbondyra commented Apr 17, 2020 •

edited

Loading

AlonaNadler commented Apr 29, 2020

wylieconlon left a comment

mbondyra commented Apr 29, 2020

wylieconlon commented Apr 29, 2020

cchaos left a comment

cchaos Apr 29, 2020

cchaos Apr 29, 2020

cchaos Apr 29, 2020

mbondyra Apr 30, 2020

mbondyra commented Apr 30, 2020

kibanamachine commented Apr 30, 2020

cchaos left a comment

	transition: opacity 250ms ease-in-out;
	transition: opacity $euiAnimSpeedNormal ease-in-out;

	.lnsDataTable__cell:hover {
	.lnsDataTable__cell:hover,
	.lnsDataTable__cell:focus-within {

[Lens] Trigger a filter action on click in datatable visualization #63840

[Lens] Trigger a filter action on click in datatable visualization #63840

Conversation

mbondyra commented Apr 17, 2020 • edited Loading

Summary

Checklist

AlonaNadler commented Apr 29, 2020

wylieconlon left a comment

Choose a reason for hiding this comment

mbondyra commented Apr 29, 2020

wylieconlon commented Apr 29, 2020

cchaos left a comment

Choose a reason for hiding this comment

cchaos Apr 29, 2020

Choose a reason for hiding this comment

cchaos Apr 29, 2020

Choose a reason for hiding this comment

cchaos Apr 29, 2020

Choose a reason for hiding this comment

mbondyra Apr 30, 2020

Choose a reason for hiding this comment

mbondyra commented Apr 30, 2020

kibanamachine commented Apr 30, 2020

💚 Build Succeeded

History

cchaos left a comment

Choose a reason for hiding this comment

mbondyra commented Apr 17, 2020 •

edited

Loading