De-angularize visLegend #50613

nickofthyme · 2019-11-14T04:40:53Z

Summary

De-angularize visLegend component.

Move legend into separate directory
Replace old angular vislib-legend directive with reactDirective
Update vislibVisController to pass props/attributes to new legend

Update components with EUI

Checklist

This was checked for cross-browser compatibility, including a check against IE11
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

For maintainers

This was checked for breaking API changes and was labeled appropriately
This includes a feature addition or change that requires a release note and was labeled appropriately

elasticmachine · 2019-11-14T05:58:55Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 5f920e4

elasticmachine · 2019-11-17T20:05:37Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 2d583eb

flash1293 · 2019-11-18T13:29:19Z

@nickofthyme I merged upstream into your branch, just FYI.

flash1293 · 2019-11-18T13:36:54Z

src/legacy/ui/public/vis/vis_types/vislib_vis_legend/vislib_vis_legend_item.tsx

+ aria-selected={color === getColor(legendItem.label)}
+ onClick={setColor(legendItem.label, color)}
+ onKeyPress={setColor(legendItem.label, color)}
+ className={classNames([


nit: You don't need the array, classNames also works on the arguments array

Good to know! c002d9f

flash1293 · 2019-11-18T13:45:06Z

src/legacy/ui/public/vis/vis_types/vislib_vis_legend/vislib_vis_legend.tsx

+
+export const VisLegend = memo(
+ VisLegendComponent,
+ (prev, next) => prev.refreshLegend === next.refreshLegend


This looks dangerous - I'm not sure whether it can happen, but what if the control flow is changed in the future and the vis object changes without refreshLegend being bumped? Is there something that prevents us from using the default implementation of memo?

deleted in efb60da

flash1293 · 2019-11-18T13:48:23Z

src/legacy/ui/public/vis/vis_types/vislib_vis_legend/vislib_vis_legend.tsx

+
+ useEffect(() => {
+ if (visData) {
+ refresh();


Do we need this refresh-hack in react? IIRC the refreshLegend thing is there to re-render the legend because vis and uiState are mutable objects that are not replaced but just mutated. But it seems like having refreshLegend as a prop on the react component will make sure the component is re-rendered every time refreshLegend is changed, so we don't need a separate refresh function but can retrieve the labels and table aggs directly in the render function (without state and refresh hook). I'm always in favor of keeping state out of the components and it seems like this is possible here.

Now only calling refresh in componentDidMount see comment below.

flash1293 · 2019-11-18T13:49:37Z

src/legacy/ui/public/vis/vis_types/vislib_vis_legend/vislib_vis_legend.tsx

+ }
+
+ if (vislibVis.visConfig) {
+ getColor = vislibVis.visConfig.data.getColorFunc();


this shouldn't go into a module-scoped variable because it can cause errors if multiple visualizations with different vis objects are active at the same time. It seems like we can use a local variable here.

Good point, I pulled it inside class component see efb60da

flash1293 · 2019-11-18T13:52:30Z

src/legacy/ui/public/vis/vis_types/vislib_vis_legend/vislib_vis_legend_item.tsx

+};
+
+export const VisLegendItem = memo(VisLegendItemComponent, (prev, next) => {
+ return (


Is there a specific reason for the custom equality check? IMHO these are dangerous because a change in the logic can cause an error in the future which is hard to track down. If it's just to save a few CPU cycles, we should err on the side of calculating the items too often instead of too seldom. 👍 for using memo though, that's a quick and easy optimization.

Yeah I was just testing the render cycles. I didn't know the memo automatically does a shallow compare.

removed in efb60da

flash1293 · 2019-11-18T14:03:49Z

src/legacy/ui/public/vis/vis_types/vislib_vis_legend/vislib_vis_legend.tsx

+ const bwcAddLegend = vis.params.addLegend;
+ const bwcLegendStateDefault = bwcAddLegend == null ? true : bwcAddLegend;
+ const newOpen = !uiState.get('vis.legendOpen', bwcLegendStateDefault);
+ setOpen(newOpen);


Can you check whether anything bad happens in we don't even hold the open state locally in the component but just use vis.legendOpen directly? I know it's not exactly like the old behavior but this is probably in place because of some weird angular behavior and I would be glad to get rid of it to be able to don't have unnecessary local state in the component.

I'll check it out.

looks to work fine c913d98

elasticmachine · 2019-11-18T14:53:21Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 3229aae

nickofthyme · 2019-11-19T03:58:54Z

@timroes & @flash1293 I got it to work using the mountReactNode function. see efb60da

From what I can tell the component is basically acting like a separate App once mounted, essentially cutting off any external prop updates. This requires the unmount and remount of the legend component.

I tried calling forceUpdate on the VislibLegend component from the external ref after incrementing refreshLegend but it would not receive the updated prop, thus why I removed the refreshLegend prop.

I don't know if there are any implications from effectively cutting off the legend prop changes, I hope the functional tests will help with that. The nested prop mutations will still be updated but might not ever trigger a rerender, unless forced.

If you guys know of a better way to do this lmk, I'm open to ideas 🤔.

elasticmachine · 2019-11-19T05:31:34Z

💔 Build Failed

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

elasticmachine · 2019-11-19T16:15:16Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 82ace3c

elasticmachine · 2019-11-27T03:20:29Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 81669d4

elasticmachine · 2019-11-27T05:23:52Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 1ae28b0

elasticmachine · 2019-11-27T16:51:37Z

💚 Build Succeeded

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

cchaos

Moving back to standard <button> for the legend toggle is fine for now. I just had one comment about inconsistent focus states. But when that's done, it will LGTM from a UI/EUI perspective.

cchaos · 2019-11-27T16:55:18Z

src/legacy/ui/public/vis/vis_types/vislib_vis_legend/vislib_vis_legend.tsx

+ <button
+ type="button"
+ onClick={this.toggleLegend}
+ className={classNames('visLegend__toggle', {


Just one extra thing to match that of the overflow menu button. Can you add this class

Suggested change

className={classNames('visLegend__toggle', {

className={classNames('visLegend__toggle kbn-resetFocusState', {

elasticmachine · 2019-11-27T19:45:58Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 67d3172

elasticmachine · 2019-11-27T21:35:58Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 7718fed

nickofthyme · 2019-11-27T21:54:33Z

@elasticmachine merge upstream

elasticmachine · 2019-11-27T23:09:08Z

💚 Build Succeeded

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

…ra/kibana into IS-46410_remove-@kbn/ui-framework * 'IS-46410_remove-@kbn/ui-framework' of github.com:mbondyra/kibana: (49 commits) [ML] Re-activate after method in transform test (elastic#51815) [SIEM] [Detection Engine] Add edit on rule creation (elastic#51670) De-angularize visLegend (elastic#50613) [SIEM][Detection Engine] Change security model to use SIEM permissions [Monitoring] Sass cleanup (elastic#51100) Move errors and validate index pattern ⇒ NP (elastic#51805) fixes pagination tests (elastic#51822) Split legacy plugin discovery, expose SavedObjects scopedClient, wrappers, repository (elastic#48882) [SIEM][Detection Engine] Adds ecs threat properties to rules (elastic#51782) [Lens] Remove client-side reference to server source code (elastic#51763) Fix infinite redirect loop when multiple cookies are sent (elastic#50452) fixes drag and drop in tests (elastic#51806) [Console] Proxy fallback (elastic#50185) Query String(Bar) Input - cleanup (elastic#51598) shim visualizations plugin (elastic#50624) Expressions service fixes: better error and loading states handling (elastic#51183) fixes url state tests (elastic#51746) fixes browser field tests (elastic#51738) [ML] Fix anomaly detection test suite (elastic#51712) [SIEM] Fix Timeline drag and drop behavior (elastic#51558) ...

…license-management * 'master' of github.com:elastic/kibana: (48 commits) Enable alerting and actions plugin by default (elastic#51254) Fix error returned when creating an alert with ES security disabled (elastic#51639) [Discover] Improve Percy functional tests (elastic#51699) fixes timeline data providers tests (elastic#51862) [Dependencies]: upgrade react to latest v16.12.0 (elastic#51145) Allow routes to define some payload config values (elastic#50783) Move saved queries service + language switcher ⇒ NP (elastic#51812) [ML] Re-activate after method in transform test (elastic#51815) [SIEM] [Detection Engine] Add edit on rule creation (elastic#51670) De-angularize visLegend (elastic#50613) [SIEM][Detection Engine] Change security model to use SIEM permissions [Monitoring] Sass cleanup (elastic#51100) Move errors and validate index pattern ⇒ NP (elastic#51805) fixes pagination tests (elastic#51822) Split legacy plugin discovery, expose SavedObjects scopedClient, wrappers, repository (elastic#48882) [SIEM][Detection Engine] Adds ecs threat properties to rules (elastic#51782) [Lens] Remove client-side reference to server source code (elastic#51763) Fix infinite redirect loop when multiple cookies are sent (elastic#50452) fixes drag and drop in tests (elastic#51806) [Console] Proxy fallback (elastic#50185) ...

* deangularize visLegend * update vislib controller to mount react legend directly * convert legend components to eui * Position popover based on legend position * Styles cleanup including removing of unused/unnecessary styles

* De-angularize visLegend (#50613) * deangularize visLegend * update vislib controller to mount react legend directly * convert legend components to eui * Position popover based on legend position * Styles cleanup including removing of unused/unnecessary styles * Fix type error with jest tests (#51925)

* deangularize visLegend * update vislib controller to mount react legend directly * convert legend components to eui * Position popover based on legend position * Styles cleanup including removing of unused/unnecessary styles

deangularize visLegend, initial wip

5f920e4

nickofthyme added the Feature:New Platform label Nov 14, 2019

nickofthyme requested review from kertal, flash1293 and TinaHeiligers November 14, 2019 04:40

nickofthyme added 2 commits November 14, 2019 17:34

Cleanup lengend logic

e779982

Add tests to replace angular tests

2d583eb

Merge remote-tracking branch 'upstream/master' into kpm-legend

3229aae

flash1293 previously requested changes Nov 18, 2019

View reviewed changes

nickofthyme added 2 commits November 18, 2019 14:58

Merge branch 'master' into kpm-legend

5cca140

update vislib controller to mount react legend directly

efb60da

update jest tests

a76da22

fix i18n message checks

82ace3c

nickofthyme marked this pull request as ready for review November 19, 2019 15:19

nickofthyme requested a review from a team as a code owner November 19, 2019 15:19

update open to read directly from uiState object

c913d98

nickofthyme added v7.6.0 v8.0.0 release_note:skip Skip the PR/issue when compiling release notes labels Nov 19, 2019

update classname calls

c002d9f

Merge branch 'master' into kpm-legend

81669d4

revert legend toggle due to tab issues

1ae28b0

nickofthyme requested a review from cchaos November 27, 2019 14:41

update snapshots

c213faa

cchaos approved these changes Nov 27, 2019

View reviewed changes

nickofthyme added 2 commits November 27, 2019 12:27

Merge branch 'master' into kpm-legend

67d3172

fix merge import error

9f9a6e9

update snapshots

7718fed

Merge branch 'master' into kpm-legend

e2d214a

nickofthyme merged commit 3ed18b4 into elastic:master Nov 28, 2019

nickofthyme deleted the kpm-legend branch November 28, 2019 02:07

nickofthyme mentioned this pull request Nov 29, 2019

[7.x] De-angularize visLegend (#50613) #51920

Closed

This was referenced Nov 29, 2019

[7.x] De-angularize visLegend (#50613) #51922

Closed

[7.x] De-angularize visLegend (#50613) #51951

Merged

nickofthyme mentioned this pull request Nov 10, 2020

Create vis_type_xy plugin to replace histogram, area and line charts #78154

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

De-angularize visLegend #50613

De-angularize visLegend #50613

nickofthyme commented Nov 14, 2019 •

edited

Loading

elasticmachine commented Nov 14, 2019

elasticmachine commented Nov 17, 2019

flash1293 commented Nov 18, 2019

flash1293 Nov 18, 2019

nickofthyme Nov 19, 2019

flash1293 Nov 18, 2019

nickofthyme Nov 19, 2019

flash1293 Nov 18, 2019

nickofthyme Nov 19, 2019 •

edited

Loading

flash1293 Nov 18, 2019

nickofthyme Nov 19, 2019

flash1293 Nov 18, 2019

nickofthyme Nov 19, 2019

flash1293 Nov 18, 2019

nickofthyme Nov 19, 2019

nickofthyme Nov 19, 2019

elasticmachine commented Nov 18, 2019

nickofthyme commented Nov 19, 2019

elasticmachine commented Nov 19, 2019

elasticmachine commented Nov 19, 2019

elasticmachine commented Nov 27, 2019

elasticmachine commented Nov 27, 2019

elasticmachine commented Nov 27, 2019

cchaos left a comment

cchaos Nov 27, 2019

nickofthyme Nov 27, 2019

elasticmachine commented Nov 27, 2019

elasticmachine commented Nov 27, 2019

nickofthyme commented Nov 27, 2019

elasticmachine commented Nov 27, 2019

	className={classNames('visLegend__toggle', {
	className={classNames('visLegend__toggle kbn-resetFocusState', {

De-angularize visLegend #50613

De-angularize visLegend #50613

Conversation

nickofthyme commented Nov 14, 2019 • edited Loading

Summary

Checklist

For maintainers

elasticmachine commented Nov 14, 2019

💔 Build Failed

elasticmachine commented Nov 17, 2019

💔 Build Failed

flash1293 commented Nov 18, 2019

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

nickofthyme Nov 19, 2019 • edited Loading

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 18, 2019

💔 Build Failed

nickofthyme commented Nov 19, 2019

elasticmachine commented Nov 19, 2019

💔 Build Failed

elasticmachine commented Nov 19, 2019

💔 Build Failed

elasticmachine commented Nov 27, 2019

💚 Build Succeeded

elasticmachine commented Nov 27, 2019

💔 Build Failed

elasticmachine commented Nov 27, 2019

💚 Build Succeeded

cchaos left a 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 27, 2019

💔 Build Failed

elasticmachine commented Nov 27, 2019

💔 Build Failed

nickofthyme commented Nov 27, 2019

elasticmachine commented Nov 27, 2019

💚 Build Succeeded

nickofthyme commented Nov 14, 2019 •

edited

Loading

nickofthyme Nov 19, 2019 •

edited

Loading