René's URL Explorer Experiment


Title: SVG trace on selection perf by etpinard · Pull Request #2583 · plotly/plotly.js · GitHub

Open Graph Title: SVG trace on selection perf by etpinard · Pull Request #2583 · plotly/plotly.js

X Title: SVG trace on selection perf by etpinard · Pull Request #2583 · plotly/plotly.js

Description: resolves #2459 There's still plenty of room for improvements (for example via #2548), but this PR gets scatter selection perf back to a level comparable to before the persistent selection PR (in #2135). Unfortunately, this means adding yet another method on the trace module objects. I hope @alexcjohnson won't mind. In brief, the new styleOnSelect methods only update DOM styles corresponding the selected and unselected attributes and thus by-passes much of the regular style DOM updates. In numbers from the start to end of the selecting throttle using this codepen from #2459, before this PR we had ~300-400ms: and after: ~40-60ms In gifs: before after

Open Graph Description: resolves #2459 There's still plenty of room for improvements (for example via #2548), but this PR gets scatter selection perf back to a level comparable to before the persistent selection PR (i...

X Description: resolves #2459 There's still plenty of room for improvements (for example via #2548), but this PR gets scatter selection perf back to a level comparable to before the persistent selection P...

Opengraph URL: https://github.com/plotly/plotly.js/pull/2583

X: @github

direct link

Domain: github.com

route-pattern/:user_id/:repository/pull/:id/commits/:range(.:format)
route-controllerpull_requests
route-actioncommits
fetch-noncev2:600f9266-a7d6-2b06-9b65-e81656d25f02
current-catalog-service-hashae870bc5e265a340912cde392f23dad3671a0a881730ffdadd82f2f57d81641b
request-idEDBC:3AEBEF:1DF1D6E:28E3CF2:6A655127
html-safe-nonce140918793de18a1788a4a4c37eea3e3dff9dd8983118ac7a97a6eb22e3af7401
visitor-payloadeyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJFREJDOjNBRUJFRjoxREYxRDZFOjI4RTNDRjI6NkE2NTUxMjciLCJ2aXNpdG9yX2lkIjoiNTg1MDAxMzc0ODM2NDEzNjc0MyIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9
visitor-hmaca934595e1638c53882e8439598c10494040abf3f4a692b0400df7f24056005bf
hovercard-subject-tagpull_request:184636568
github-keyboard-shortcutsrepository,pull-request-list,pull-request-conversation,pull-request-files-changed,copilot
google-site-verificationApib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I
octolytics-urlhttps://collector.github.com/github/collect
analytics-location///pull_requests/show/commits
fb:app_id1401488693436528
apple-itunes-appapp-id=1477376905, app-argument=https://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c
twitter:imagehttps://avatars.githubusercontent.com/u/6675409?s=400&v=4
twitter:cardsummary_large_image
og:imagehttps://avatars.githubusercontent.com/u/6675409?s=400&v=4
og:image:altresolves #2459 There's still plenty of room for improvements (for example via #2548), but this PR gets scatter selection perf back to a level comparable to before the persistent selection PR (i...
og:site_nameGitHub
og:typeobject
hostnamegithub.com
expected-hostnamegithub.com
None52c76df668885aaff23b50bdca1fa1ea44ac9c1553e888ebc70ff1e4daa4625b
turbo-cache-controlno-preview
diff-viewunified
go-importgithub.com/plotly/plotly.js git https://github.com/plotly/plotly.js.git
octolytics-dimension-user_id5997976
octolytics-dimension-user_loginplotly
octolytics-dimension-repository_id45646037
octolytics-dimension-repository_nwoplotly/plotly.js
octolytics-dimension-repository_publictrue
octolytics-dimension-repository_is_forkfalse
octolytics-dimension-repository_network_root_id45646037
octolytics-dimension-repository_network_root_nwoplotly/plotly.js
turbo-body-classeslogged-out env-production page-responsive full-width
disable-turbofalse
browser-stats-urlhttps://api.github.com/_private/browser/stats
browser-errors-urlhttps://api.github.com/_private/browser/errors
release309153364422b3c499922d1a2a6404910a58ed8e
ui-targetfull
theme-color#1e2327
color-schemelight dark

Links:

Skip to contenthttps://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#start-of-content
https://github.com/
Sign in https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fplotly%2Fplotly.js%2Fpull%2F2583%2Fcommits%2Fb6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c
GitHub CopilotWrite better code with AIhttps://github.com/features/copilot
GitHub Copilot appDirect agents from issue to mergehttps://github.com/features/ai/github-app
MCP RegistryNewIntegrate external toolshttps://github.com/mcp
ActionsAutomate any workflowhttps://github.com/features/actions
CodespacesInstant dev environmentshttps://github.com/features/codespaces
IssuesPlan and track workhttps://github.com/features/issues
Code ReviewManage code changeshttps://github.com/features/code-review
Code QualityEnforce quality at mergehttps://github.com/features/code-quality
GitHub Advanced SecurityFind and fix vulnerabilitieshttps://github.com/security/advanced-security
Code securitySecure your code as you buildhttps://github.com/security/advanced-security/code-security
Secret protectionStop leaks before they starthttps://github.com/security/advanced-security/secret-protection
Why GitHubhttps://github.com/why-github
Documentationhttps://docs.github.com
Bloghttps://github.blog
Changeloghttps://github.blog/changelog
Marketplacehttps://github.com/marketplace
View all featureshttps://github.com/features
Enterpriseshttps://github.com/enterprise
Small and medium teamshttps://github.com/team
Startupshttps://github.com/enterprise/startups
Nonprofitshttps://github.com/solutions/industry/nonprofits
App Modernizationhttps://github.com/solutions/use-case/app-modernization
DevSecOpshttps://github.com/solutions/use-case/devsecops
DevOpshttps://github.com/solutions/use-case/devops
CI/CDhttps://github.com/solutions/use-case/ci-cd
View all use caseshttps://github.com/solutions/use-case
Healthcarehttps://github.com/solutions/industry/healthcare
Financial serviceshttps://github.com/solutions/industry/financial-services
Manufacturinghttps://github.com/solutions/industry/manufacturing
Governmenthttps://github.com/solutions/industry/government
View all industrieshttps://github.com/solutions/industry
View all solutionshttps://github.com/solutions
AIhttps://github.com/resources/articles?topic=ai
Software Developmenthttps://github.com/resources/articles?topic=software-development
DevOpshttps://github.com/resources/articles?topic=devops
Securityhttps://github.com/resources/articles?topic=security
View all topicshttps://github.com/resources/articles
Customer storieshttps://github.com/customer-stories
Events & webinarshttps://github.com/resources/events
Ebooks & reportshttps://github.com/resources/whitepapers
Business insightshttps://github.com/solutions/executive-insights
GitHub Skillshttps://skills.github.com
Documentationhttps://docs.github.com
Customer supporthttps://support.github.com
Community forumhttps://github.com/orgs/community/discussions
Trust centerhttps://github.com/trust-center
Partnershttps://github.com/partners
View all resourceshttps://github.com/resources
GitHub SponsorsFund open source developershttps://github.com/open-source/sponsors
Security Labhttps://securitylab.github.com
Maintainer Communityhttps://maintainers.github.com
Acceleratorhttps://github.com/open-source/accelerator
GitHub Starshttps://stars.github.com
Archive Programhttps://archiveprogram.github.com
Topicshttps://github.com/topics
Trendinghttps://github.com/trending
Collectionshttps://github.com/collections
Enterprise platformAI-powered developer platformhttps://github.com/enterprise
GitHub Advanced SecurityEnterprise-grade security featureshttps://github.com/security/advanced-security
Copilot for BusinessEnterprise-grade AI featureshttps://github.com/features/copilot/copilot-business
Premium SupportEnterprise-grade 24/7 supporthttps://github.com/enterprise/premium-support
Pricinghttps://github.com/pricing
Search syntax tipshttps://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax
documentationhttps://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax
Sign in https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fplotly%2Fplotly.js%2Fpull%2F2583%2Fcommits%2Fb6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c
Sign up https://github.com/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F%3Cuser-name%3E%2F%3Crepo-name%3E%2Fpull_requests%2Fshow%2Fcommits&source=header-repo&source_repo=plotly%2Fplotly.js
Reloadhttps://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c
Reloadhttps://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c
Reloadhttps://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c
Please reload this pagehttps://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c
plotly https://github.com/plotly
plotly.jshttps://github.com/plotly/plotly.js
Please reload this pagehttps://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c
Notifications https://github.com/login?return_to=%2Fplotly%2Fplotly.js
Fork 2k https://github.com/login?return_to=%2Fplotly%2Fplotly.js
Star 18.3k https://github.com/login?return_to=%2Fplotly%2Fplotly.js
Code https://github.com/plotly/plotly.js
Issues 774 https://github.com/plotly/plotly.js/issues
Pull requests 54 https://github.com/plotly/plotly.js/pulls
Actions https://github.com/plotly/plotly.js/actions
Security and quality 0 https://github.com/plotly/plotly.js/security
Insights https://github.com/plotly/plotly.js/pulse
Code https://github.com/plotly/plotly.js
Issues https://github.com/plotly/plotly.js/issues
Pull requests https://github.com/plotly/plotly.js/pulls
Actions https://github.com/plotly/plotly.js/actions
Security and quality https://github.com/plotly/plotly.js/security
Insights https://github.com/plotly/plotly.js/pulse
Sign up for GitHub https://github.com/signup?return_to=%2Fplotly%2Fplotly.js%2Fissues%2Fnew%2Fchoose
terms of servicehttps://docs.github.com/terms
privacy statementhttps://docs.github.com/privacy
Sign inhttps://github.com/login?return_to=%2Fplotly%2Fplotly.js%2Fissues%2Fnew%2Fchoose
etpinardhttps://github.com/etpinard
masterhttps://github.com/plotly/plotly.js/tree/master
scatter-select-perfhttps://github.com/plotly/plotly.js/tree/scatter-select-perf
Conversation 13 https://github.com/plotly/plotly.js/pull/2583
Commits 12 https://github.com/plotly/plotly.js/pull/2583/commits
Checks 0 https://github.com/plotly/plotly.js/pull/2583/checks
Files changed https://github.com/plotly/plotly.js/pull/2583/files
Please reload this pagehttps://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c
SVG trace on selection perf https://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#top
Show all changes 12 commits https://github.com/plotly/plotly.js/pull/2583/files
53a5a64 lookup in _plots instead of indexOf in array of ids etpinard Apr 19, 2018 https://github.com/plotly/plotly.js/pull/2583/commits/53a5a648033f7dbdf89e58425a0829b72c68e0b1
b6d4ebc add 'styleOnSelect' method to Scatter* module etpinard Apr 26, 2018 https://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c
6c86e08 split Box & Bar .style + add .styleOnSelect etpinard Apr 26, 2018 https://github.com/plotly/plotly.js/pull/2583/commits/6c86e08e3f1eef63b57553033236fbd518401e1f
0a50295 use Scatter.selectOnStyle directly for violin traces etpinard Apr 26, 2018 https://github.com/plotly/plotly.js/pull/2583/commits/0a502951d4033708537dc1e5059d50a681d5f1a7
7103fab add styleOnSelect for geo traces etpinard Apr 27, 2018 https://github.com/plotly/plotly.js/pull/2583/commits/7103fab18f09c70a550f6fc3a9b09a7d5028c0d9
01df2d2 style selected text nodes with selectedTextStyle + add test etpinard Apr 30, 2018 https://github.com/plotly/plotly.js/pull/2583/commits/01df2d2179d0a117fc17deee288047a637cffab0
3776e8f refactor selected points drawing methods etpinard Apr 30, 2018 https://github.com/plotly/plotly.js/pull/2583/commits/3776e8f20299cd9b3ecb5db59950a3355481a075
4adc091 add styleOnSelect test etpinard Apr 30, 2018 https://github.com/plotly/plotly.js/pull/2583/commits/4adc091791645b69841e420c59e088e3d588575d
46858a7 Merge branch 'master' into scatter-select-perf etpinard Apr 30, 2018 https://github.com/plotly/plotly.js/pull/2583/commits/46858a70f2c3a3e540ca95a300f2900a439afb51
0e91c6e lint (fn rename) etpinard Apr 30, 2018 https://github.com/plotly/plotly.js/pull/2583/commits/0e91c6e422d3c81bade5e44ec87c92782d8c27fc
84ca51f fixup merge master commit (candlestick can't use Box.styleOnSelect) etpinard Apr 30, 2018 https://github.com/plotly/plotly.js/pull/2583/commits/84ca51f88294380e6d49db517a4cf500425de6b4
3e32b23 minor perf boost in Drawing.selectedPointStyle etpinard Apr 30, 2018 https://github.com/plotly/plotly.js/pull/2583/commits/3e32b234ab561b2be3ec29be5be9cfaa9ca083ee
Clear filters https://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c
Please reload this pagehttps://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c
Please reload this pagehttps://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c
select.js https://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#diff-bd7d37269e85636499f7ab275126298608f098fa35eb9e56375b97463f17683d
index.js https://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#diff-4f6914453039dda612f03f75053625af661360bac4cdeb2ef3579345272860cd
style.js https://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#diff-dc1c14713038bb369d27e17840c5f6240144e26d566b915b360ac6aa6138e383
index.js https://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#diff-ec56a7c5e4e0c868228534e802ed6dd47aeb0b4d21587d3c0fd6d2424a295154
index.js https://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#diff-c0c6db9d5615a8ce3eb04e8936ae394bbd929ee88c448cbf938660a30c31be9e
Prev https://github.com/plotly/plotly.js/pull/2583/commits/53a5a648033f7dbdf89e58425a0829b72c68e0b1
Next https://github.com/plotly/plotly.js/pull/2583/commits/6c86e08e3f1eef63b57553033236fbd518401e1f
Please reload this pagehttps://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c
https://github.com/etpinard
etpinardhttps://github.com/plotly/plotly.js/commits?author=etpinard
src/plots/cartesian/select.jshttps://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#diff-bd7d37269e85636499f7ab275126298608f098fa35eb9e56375b97463f17683d
View file https://github.com/plotly/plotly.js/blob/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c/src/plots/cartesian/select.js
Open in desktop https://desktop.github.com
https://github.co/hiddenchars
https://github.com/plotly/plotly.js/pull/2583/commits/{{ revealButtonHref }}
https://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#diff-bd7d37269e85636499f7ab275126298608f098fa35eb9e56375b97463f17683d
alexcjohnsonhttps://github.com/alexcjohnson
Apr 27, 2018https://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#r184709640
Learn morehttps://docs.github.com/articles/managing-disruptive-comments/#hiding-a-comment
Please reload this pagehttps://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c
etpinardhttps://github.com/etpinard
Apr 27, 2018https://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#r184710927
Learn morehttps://docs.github.com/articles/managing-disruptive-comments/#hiding-a-comment
Please reload this pagehttps://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c
etpinardhttps://github.com/etpinard
Apr 30, 2018https://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#r185118537
Learn morehttps://docs.github.com/articles/managing-disruptive-comments/#hiding-a-comment
0e91c6ehttps://github.com/plotly/plotly.js/commit/0e91c6e422d3c81bade5e44ec87c92782d8c27fc
Please reload this pagehttps://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c
https://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#diff-bd7d37269e85636499f7ab275126298608f098fa35eb9e56375b97463f17683d
src/traces/scatter/index.jshttps://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#diff-4f6914453039dda612f03f75053625af661360bac4cdeb2ef3579345272860cd
View file https://github.com/plotly/plotly.js/blob/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c/src/traces/scatter/index.js
Open in desktop https://desktop.github.com
https://github.co/hiddenchars
https://github.com/plotly/plotly.js/pull/2583/commits/{{ revealButtonHref }}
https://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#diff-4f6914453039dda612f03f75053625af661360bac4cdeb2ef3579345272860cd
https://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#diff-4f6914453039dda612f03f75053625af661360bac4cdeb2ef3579345272860cd
src/traces/scatter/style.jshttps://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#diff-dc1c14713038bb369d27e17840c5f6240144e26d566b915b360ac6aa6138e383
View file https://github.com/plotly/plotly.js/blob/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c/src/traces/scatter/style.js
Open in desktop https://desktop.github.com
https://github.co/hiddenchars
https://github.com/plotly/plotly.js/pull/2583/commits/{{ revealButtonHref }}
https://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#diff-dc1c14713038bb369d27e17840c5f6240144e26d566b915b360ac6aa6138e383
src/traces/scattercarpet/index.jshttps://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#diff-ec56a7c5e4e0c868228534e802ed6dd47aeb0b4d21587d3c0fd6d2424a295154
View file https://github.com/plotly/plotly.js/blob/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c/src/traces/scattercarpet/index.js
Open in desktop https://desktop.github.com
https://github.co/hiddenchars
https://github.com/plotly/plotly.js/pull/2583/commits/{{ revealButtonHref }}
https://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#diff-ec56a7c5e4e0c868228534e802ed6dd47aeb0b4d21587d3c0fd6d2424a295154
https://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#diff-ec56a7c5e4e0c868228534e802ed6dd47aeb0b4d21587d3c0fd6d2424a295154
src/traces/scatterternary/index.jshttps://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#diff-c0c6db9d5615a8ce3eb04e8936ae394bbd929ee88c448cbf938660a30c31be9e
View file https://github.com/plotly/plotly.js/blob/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c/src/traces/scatterternary/index.js
Open in desktop https://desktop.github.com
https://github.co/hiddenchars
https://github.com/plotly/plotly.js/pull/2583/commits/{{ revealButtonHref }}
https://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#diff-c0c6db9d5615a8ce3eb04e8936ae394bbd929ee88c448cbf938660a30c31be9e
https://github.com/plotly/plotly.js/pull/2583/commits/b6d4ebce2d69a4ffa3d8392dcd4adc41e08caf3c#diff-c0c6db9d5615a8ce3eb04e8936ae394bbd929ee88c448cbf938660a30c31be9e
https://github.com
Termshttps://docs.github.com/site-policy/github-terms/github-terms-of-service
Privacyhttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement
Securityhttps://github.com/security
Statushttps://www.githubstatus.com/
Communityhttps://github.community/
Docshttps://docs.github.com/
Contacthttps://support.github.com?tags=dotcom-footer

Viewport: width=device-width

URLs of crawlers that visited me.