Skip to content
This repository has been archived by the owner on Dec 8, 2022. It is now read-only.

Optimize layer panel #333

Merged
merged 13 commits into from
Sep 20, 2021
Merged

Optimize layer panel #333

merged 13 commits into from
Sep 20, 2021

Conversation

stazrad
Copy link
Contributor

@stazrad stazrad commented Aug 24, 2021

Resolves: #280

PR Safety Checklist:

  • Added the task to the appropriate release doc under Enhancements or Bug Fixes
  • Bump package.json & package-lock.json version numbers to appropriate release
  • (optional) All external API changes have been documented
  • (optional) Build docs: npm run docs

Quick Description of Changes (+ screenshots for ui changes):

This optimization improves performance in LayerPanel when large feature sets are being rendered.

BEFORE (delay to expand after click is not obvious in the screen capture):

Screen.Recording.2021-08-25.at.1.33.14.AM.mov

AFTER (features list renders instantly on click without blocking threads):

Screen.Recording.2021-08-25.at.1.32.32.AM.mov

}
})

handleFeatureDoubleClick = memo(this.props.handleFeatureDoubleClick)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the memo wrappers here make sure that every feature item that is rendered have callbacks pointing to the same instance of these methods (instead of instantiating a new function for each feature)

@stazrad stazrad added pending changes This is on hold until change requests are pushed team reviewed 👀 PR reviewed by maintainers labels Aug 25, 2021
package.json Outdated
@@ -100,6 +100,7 @@
"react-hook-form": "~5.7.2",
"react-select": "~3.1.0",
"react-viewer": "^3.2.2",
"react-virtuoso": "^1.10.8",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

change ^ to ~

ref={this.virtuoso}
itemContent={this.renderFeatureRow}
rangeChanged={this.handleRangeChange}
initialItemCount={data.length > 6 ? 6 : data.length}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

make this a prop

@stazrad stazrad added ready to ship 🚀 All systems go- merge + ship! and removed pending changes This is on hold until change requests are pushed labels Sep 20, 2021
@stazrad stazrad merged commit 9dd6ae3 into master Sep 20, 2021
@stazrad stazrad deleted the optimize-layer-panel branch September 20, 2021 19:58
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
ready to ship 🚀 All systems go- merge + ship! team reviewed 👀 PR reviewed by maintainers
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Layer Panel chokes on layers with many children
2 participants