[maps] fix drawing shapes #74689

nreese · 2020-08-10T17:46:47Z

This regression was caused by 2 changes that activated an existing bug.

First problem:
MapsAppView is re-rendered any time state changes because the connector returns a new function instance for each new state - https://github.com/elastic/kibana/blob/7.9/x-pack/plugins/maps/public/routing/routes/maps_app/index.js#L38. FYI - Redux state changes any time the mouse moves, so this causes a lot of re-renders

Second problem:
DrawControl is re-rendered any time MapsAppView is rendered because addFilters prop is assigned to a new function instance - https://github.com/elastic/kibana/blob/7.9/x-pack/plugins/maps/public/routing/routes/maps_app/maps_app_view.js#L459

Root problem:
These re-rendered exposed a problem where DrawControl would call this._mbDrawControl.changeMode an all updates even if the draw control was already in the right mode. Calling this._mbDrawControl.changeMode clears out any existing draw state so this reset your draw state.

The Fix:

Removing the function from MapsAppView connector so MapsAppView is not re-rendered on all redux state changes.
moves addFilters from an inline function to a class function to avoid DrawControl from re-rendering when MapsAppView re-renders.
Fixes the core problem by checking draw mode and only setting the draw mode if it is not the required draw mode for the selected filter.
Another part of the jerky fell was that _updateDrawControl was debounced by 256 milliseconds. This PR remove that debounce timeout. The denounce had to remain to ensure timing issues did not cause problems with mapbox-draw.
PR also updates mapbox-gl-draw to latest. Not required for the fix.

elasticmachine · 2020-08-10T17:46:50Z

Pinging @elastic/kibana-gis (Team:Geo)

kibanamachine · 2020-08-10T19:59:00Z

💚 Build Succeeded

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

Build metrics

@kbn/optimizer bundle module count

id	value	diff	baseline
maps	693	+1	692

async chunks size

id	value	diff	baseline
maps	3.3MB	-21.2KB	3.3MB

History

💚 Build #67331 succeeded f90963c

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

thomasneirynck

thx for fixing. I tested this and works well.

thomasneirynck · 2020-08-11T17:56:37Z

x-pack/plugins/maps/public/routing/routes/maps_app/maps_app_view.js

-              this._onFiltersChange([...filters, ...newFilters]);
-            }}
-          />
+          <MapContainer addFilters={this._addFilter} />


agreed that extracting this adds clarity, but isn't this functionally equivalent? The lambda makes sure this get bounds to the parent scope from this.render() call, which should be the React-component. What am I missing?

They are functionally equivalent. The change is that the original code created a new function on every render. The new code uses the same function reference on every render. This is important because down stream DrawControl componentDidUpdate will get called every time any of the props change. This means that even though the function is the same, componentDidUpdate gets called because the function reference has changed.

thomasneirynck · 2020-08-11T17:58:03Z

x-pack/plugins/maps/public/routing/routes/maps_app/maps_app_view.js

@@ -103,7 +103,15 @@ export class MapsAppView extends React.Component {
  }

  _hasUnsavedChanges() {
-    return this.props.hasUnsavedChanges(this.props.savedMap, this.state.initialLayerListConfig);


thx for removing some indirection

* [maps] fix drawing shapes * prevent re-render on state change

…nes/processor-forms-a-d * 'master' of github.com:elastic/kibana: (25 commits) [ML] Removing full lodash library imports (elastic#74742) [Search] Server strategy example (elastic#71679) [Reporting] Fix and test for Listing of Reports (elastic#74453) [maps] fix drawing shapes (elastic#74689) [Resolver] Improve simulator. Add more click-through tests and panel tests. (elastic#74601) Deprecate schema-less specs in Vega (elastic#73805) [Security Solution] Rename Administration > Hosts subtab to Endpoints (elastic#74287) Timelion deprecation doc (elastic#74508) [Functional Tests] Adds a wait time between setting the index pattern and the time field on TSVB (elastic#74736) [Lens] Add styling options for x and y axes on the settings popover (elastic#71829) [Maps] add initial location option that fits to data bounds (elastic#74583) theme function (elastic#73451) [data.ui.query] Write filters to query log from default editor. (elastic#74474) [data.search.SearchSource] Move some SearchSource dependencies to the server. (elastic#74607) [Canvas][tech-debt] Convert renderers (elastic#74134) [security solutions][lists] Adds end to end tests (elastic#74473) pluralized for occurrences vs occurrence (elastic#74564) Update links that pointed to CONTRIBUTING.md (elastic#74757) [Ingest pipelines] Implement tabs in processor flyout (elastic#74469) [Event log] Use Alerts client & Actions client when fetching these types of SOs (elastic#73257) ... # Conflicts: # x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/field_components/text_editor.tsx # x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/manage_processor_form.tsx # x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/append.tsx # x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/bytes.tsx # x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/circle.tsx # x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/common_fields/field_name_field.tsx # x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/common_fields/ignore_missing_field.tsx # x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/convert.tsx # x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/csv.tsx # x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/date.tsx # x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/date_index_name.tsx # x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/dissect.tsx # x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/dot_expander.tsx # x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/drop.tsx # x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/index.ts # x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/shared.ts

* master: [Vega] add functional tests for Vega visualization (elastic#74097) [ML] Removing full lodash library imports (elastic#74742) [Search] Server strategy example (elastic#71679) [Reporting] Fix and test for Listing of Reports (elastic#74453) [maps] fix drawing shapes (elastic#74689) [Resolver] Improve simulator. Add more click-through tests and panel tests. (elastic#74601) Deprecate schema-less specs in Vega (elastic#73805) [Security Solution] Rename Administration > Hosts subtab to Endpoints (elastic#74287) Timelion deprecation doc (elastic#74508)

kibanamachine · 2020-08-13T18:28:45Z

Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync.

kibanamachine · 2020-08-14T18:38:43Z

Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync.

kibanamachine · 2020-08-17T18:48:44Z

Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync.

kibanamachine · 2020-08-18T18:58:43Z

Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync.

[maps] fix drawing shapes

f90963c

nreese added release_note:fix [Deprecated-Use Team:Presentation]Team:Geo Former Team Label for Geo Team. Now use Team:Presentation v8.0.0 v7.10.0 v7.9.1 labels Aug 10, 2020

nreese requested a review from thomasneirynck August 10, 2020 17:46

nreese requested a review from a team as a code owner August 10, 2020 17:46

prevent re-render on state change

bf176a9

thomasneirynck approved these changes Aug 11, 2020

View reviewed changes

nreese merged commit 7d3a1ff into elastic:master Aug 11, 2020

nreese added a commit to nreese/kibana that referenced this pull request Aug 11, 2020

[maps] fix drawing shapes (elastic#74689)

8d506b1

* [maps] fix drawing shapes * prevent re-render on state change

This was referenced Aug 11, 2020

[7.x] [maps] fix drawing shapes (#74689) #74793

Merged

[7.9] [maps] fix drawing shapes (#74689) #74794

Merged

nreese added a commit that referenced this pull request Aug 11, 2020

[maps] fix drawing shapes (#74689) (#74793)

b0eaaa3

* [maps] fix drawing shapes * prevent re-render on state change

kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Aug 13, 2020

kibanamachine removed the backport missing Added to PRs automatically when the are determined to be missing a backport. label Aug 18, 2020

nreese mentioned this pull request Aug 31, 2020

[Maps] fix drawing shapes in maps app broken in 7.9.1 #76329

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[maps] fix drawing shapes #74689

[maps] fix drawing shapes #74689

nreese commented Aug 10, 2020 •

edited

Loading

elasticmachine commented Aug 10, 2020

kibanamachine commented Aug 10, 2020

thomasneirynck left a comment

thomasneirynck Aug 11, 2020

nreese Aug 11, 2020

thomasneirynck Aug 11, 2020

kibanamachine commented Aug 13, 2020

kibanamachine commented Aug 14, 2020

kibanamachine commented Aug 17, 2020

kibanamachine commented Aug 18, 2020

[maps] fix drawing shapes #74689

[maps] fix drawing shapes #74689

Conversation

nreese commented Aug 10, 2020 • edited Loading

elasticmachine commented Aug 10, 2020

kibanamachine commented Aug 10, 2020

💚 Build Succeeded

Build metrics

@kbn/optimizer bundle module count

async chunks size

History

thomasneirynck left a comment

Choose a reason for hiding this comment

thomasneirynck Aug 11, 2020

Choose a reason for hiding this comment

nreese Aug 11, 2020

Choose a reason for hiding this comment

thomasneirynck Aug 11, 2020

Choose a reason for hiding this comment

kibanamachine commented Aug 13, 2020

kibanamachine commented Aug 14, 2020

kibanamachine commented Aug 17, 2020

kibanamachine commented Aug 18, 2020

nreese commented Aug 10, 2020 •

edited

Loading