Skip to content

Enable & disable predefined modebar buttons via layout and template - #5660

Merged
archmoj merged 11 commits into
masterfrom
layout-modebar
May 18, 2021
Merged

Enable & disable predefined modebar buttons via layout and template#5660
archmoj merged 11 commits into
masterfrom
layout-modebar

Conversation

@archmoj

@archmojarchmoj commented May 14, 2021

Copy link
Copy Markdown
Contributor

This PR moves attributes and supply default files into component/modebar, register modebar in core.js and then
resolves#5623 by introducing modebar.add and modebar.remove options.

Also this PR help simplify use of config.modeBarButtonsToRemove by accepting short name variations.
For example one could use zoomin instead of zoomIn2d to disable zoom in buttun.

@plotly/plotly_js

"add": {"flags": ["v1hovermode","hoverclosest","hovercompare","togglehover","togglespikelines","drawclosedpath","drawopenpath","drawline","drawrect","drawcircle","eraseshape"]},"remove": {"flags": ["autoScale2d","autoscale","editInChartStudio","editinchartstudio","hoverCompareCartesian","hovercompare","lasso","lasso2d","orbitRotation","orbitrotation","pan","pan2d","pan3d","reset","resetCameraDefault3d","resetCameraLastSave3d","resetGeo","resetSankeyGroup","resetScale2d","resetViewMapbox","resetViews","resetcameradefault","resetcameralastsave","resetsankeygroup","resetscale","resetview","resetviews","select","select2d","sendDataToCloud","senddatatocloud","tableRotation","tablerotation","toImage","toggleHover","toggleSpikelines","togglehover","togglespikelines","toimage","zoom","zoom2d","zoom3d","zoomIn2d","zoomInGeo","zoomInMapbox","zoomOut2d","zoomOutGeo","zoomOutMapbox","zoomin","zoomout"]}

@archmojarchmoj added this to the NEXT milestone May 14, 2021
@nicolaskruchten

Copy link
Copy Markdown
Contributor

I thought we'd settled on layout.modebar.(add|remove) ? No "buttonsto"

@archmoj

Copy link
Copy Markdown
ContributorAuthor

I thought we'd settled on layout.modebar.(add|remove) ? No "buttonsto"

Renamed in aeb1626.

@nicolaskruchten

Copy link
Copy Markdown
Contributor

Thanks! Is implementing "remove" a lot of additional work?

@archmoj

Copy link
Copy Markdown
ContributorAuthor

Thanks! Is implementing "remove" a lot of additional work?

Maybe no. But the need for that is not clear? Is it to hide every possible button? Not these hidden by default ones?

@nicolaskruchten

Copy link
Copy Markdown
Contributor

For symmetry and yes, to be able to remove additional buttons like the zoom buttons for example or home/reset-axes

@nicolaskruchten

Copy link
Copy Markdown
Contributor

Basically a layout equivalent to config.modebarButtonsToRemove which gets used fairly often in the wild.

@archmojarchmoj changed the title Enable predefined shape drawing and hover modebar buttons via layout and templateEnable & disable predefined modebar buttons via layout and templateMay 15, 2021
Comment threadsrc/components/modebar/manage.js Outdated
var buttonsToAdd = context.modeBarButtonsToAdd
.concat(fullLayout.modebar.add.split('+'));
var buttonsToRemove = context.modeBarButtonsToRemove
.concat(fullLayout.modebar.remove.split('+'));

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Trying to think if there are any cases we need to explicitly deal with precedence of config over layout. That's the way we decided it should work, right?

If config adds a button that layout has asked to remove, it can add it via the full object, but the string versions aren't defined in the add section below.

And if config removes a button that layout has asked to add, since removal happens first it won't be available yet when it's expected to be removed, so it will appear anyway.

So it seems like these concat need to filter out layout items that are in the opposite context entry.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Good call. Addressed in 3daa2f3.

Comment threadsrc/components/modebar/attributes.js Outdated
].join(' ')
},
add: {
valType: 'flaglist',

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Using a flaglist here is convenient for validation, but it's different from the API we use for config, an array. Here we don't need to support the object form, which obviously wouldn't fit in a flaglist, I just wonder if ease of validation is sufficient reason to differ. @nicolaskruchten thoughts?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I prefer an array, like in config

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Addressed in 5c17d6b and 3293097.

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

💃 looks good. Great tests!

@archmoj
archmoj merged commit d8a1654 into masterMay 18, 2021
@archmoj
archmoj deleted the layout-modebar branch May 18, 2021 15:10
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add modebar buttons control into layout

3 participants

@archmoj@nicolaskruchten@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Enable & disable predefined modebar buttons via layout and template by archmoj · Pull Request #5660 · plotly/plotly.js · GitHub
Skip to content

Enable & disable predefined modebar buttons via layout and template - #5660

Merged
archmoj merged 11 commits into
masterfrom
layout-modebar
May 18, 2021
Merged

Enable & disable predefined modebar buttons via layout and template#5660
archmoj merged 11 commits into
masterfrom
layout-modebar

Conversation

@archmoj

@archmojarchmoj commented May 14, 2021

Copy link
Copy Markdown
Contributor

This PR moves attributes and supply default files into component/modebar, register modebar in core.js and then
resolves#5623 by introducing modebar.add and modebar.remove options.

Also this PR help simplify use of config.modeBarButtonsToRemove by accepting short name variations.
For example one could use zoomin instead of zoomIn2d to disable zoom in buttun.

@plotly/plotly_js

"add": {"flags": ["v1hovermode","hoverclosest","hovercompare","togglehover","togglespikelines","drawclosedpath","drawopenpath","drawline","drawrect","drawcircle","eraseshape"]},"remove": {"flags": ["autoScale2d","autoscale","editInChartStudio","editinchartstudio","hoverCompareCartesian","hovercompare","lasso","lasso2d","orbitRotation","orbitrotation","pan","pan2d","pan3d","reset","resetCameraDefault3d","resetCameraLastSave3d","resetGeo","resetSankeyGroup","resetScale2d","resetViewMapbox","resetViews","resetcameradefault","resetcameralastsave","resetsankeygroup","resetscale","resetview","resetviews","select","select2d","sendDataToCloud","senddatatocloud","tableRotation","tablerotation","toImage","toggleHover","toggleSpikelines","togglehover","togglespikelines","toimage","zoom","zoom2d","zoom3d","zoomIn2d","zoomInGeo","zoomInMapbox","zoomOut2d","zoomOutGeo","zoomOutMapbox","zoomin","zoomout"]}

@archmojarchmoj added this to the NEXT milestone May 14, 2021
@nicolaskruchten

Copy link
Copy Markdown
Contributor

I thought we'd settled on layout.modebar.(add|remove) ? No "buttonsto"

@archmoj

Copy link
Copy Markdown
ContributorAuthor

I thought we'd settled on layout.modebar.(add|remove) ? No "buttonsto"

Renamed in aeb1626.

@nicolaskruchten

Copy link
Copy Markdown
Contributor

Thanks! Is implementing "remove" a lot of additional work?

@archmoj

Copy link
Copy Markdown
ContributorAuthor

Thanks! Is implementing "remove" a lot of additional work?

Maybe no. But the need for that is not clear? Is it to hide every possible button? Not these hidden by default ones?

@nicolaskruchten

Copy link
Copy Markdown
Contributor

For symmetry and yes, to be able to remove additional buttons like the zoom buttons for example or home/reset-axes

@nicolaskruchten

Copy link
Copy Markdown
Contributor

Basically a layout equivalent to config.modebarButtonsToRemove which gets used fairly often in the wild.

@archmojarchmoj changed the title Enable predefined shape drawing and hover modebar buttons via layout and templateEnable & disable predefined modebar buttons via layout and templateMay 15, 2021
Comment threadsrc/components/modebar/manage.js Outdated
var buttonsToAdd = context.modeBarButtonsToAdd
.concat(fullLayout.modebar.add.split('+'));
var buttonsToRemove = context.modeBarButtonsToRemove
.concat(fullLayout.modebar.remove.split('+'));

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Trying to think if there are any cases we need to explicitly deal with precedence of config over layout. That's the way we decided it should work, right?

If config adds a button that layout has asked to remove, it can add it via the full object, but the string versions aren't defined in the add section below.

And if config removes a button that layout has asked to add, since removal happens first it won't be available yet when it's expected to be removed, so it will appear anyway.

So it seems like these concat need to filter out layout items that are in the opposite context entry.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Good call. Addressed in 3daa2f3.

Comment threadsrc/components/modebar/attributes.js Outdated
].join(' ')
},
add: {
valType: 'flaglist',

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Using a flaglist here is convenient for validation, but it's different from the API we use for config, an array. Here we don't need to support the object form, which obviously wouldn't fit in a flaglist, I just wonder if ease of validation is sufficient reason to differ. @nicolaskruchten thoughts?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I prefer an array, like in config

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Addressed in 5c17d6b and 3293097.

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

💃 looks good. Great tests!

@archmoj
archmoj merged commit d8a1654 into masterMay 18, 2021
@archmoj
archmoj deleted the layout-modebar branch May 18, 2021 15:10
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add modebar buttons control into layout

3 participants

@archmoj@nicolaskruchten@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Enable & disable predefined modebar buttons via layout and template by archmoj · Pull Request #5660 · plotly/plotly.js · GitHub
Skip to content

Enable & disable predefined modebar buttons via layout and template - #5660

Merged
archmoj merged 11 commits into
masterfrom
layout-modebar
May 18, 2021
Merged

Enable & disable predefined modebar buttons via layout and template#5660
archmoj merged 11 commits into
masterfrom
layout-modebar

Conversation

@archmoj

@archmojarchmoj commented May 14, 2021

Copy link
Copy Markdown
Contributor

This PR moves attributes and supply default files into component/modebar, register modebar in core.js and then
resolves#5623 by introducing modebar.add and modebar.remove options.

Also this PR help simplify use of config.modeBarButtonsToRemove by accepting short name variations.
For example one could use zoomin instead of zoomIn2d to disable zoom in buttun.

@plotly/plotly_js

"add": {"flags": ["v1hovermode","hoverclosest","hovercompare","togglehover","togglespikelines","drawclosedpath","drawopenpath","drawline","drawrect","drawcircle","eraseshape"]},"remove": {"flags": ["autoScale2d","autoscale","editInChartStudio","editinchartstudio","hoverCompareCartesian","hovercompare","lasso","lasso2d","orbitRotation","orbitrotation","pan","pan2d","pan3d","reset","resetCameraDefault3d","resetCameraLastSave3d","resetGeo","resetSankeyGroup","resetScale2d","resetViewMapbox","resetViews","resetcameradefault","resetcameralastsave","resetsankeygroup","resetscale","resetview","resetviews","select","select2d","sendDataToCloud","senddatatocloud","tableRotation","tablerotation","toImage","toggleHover","toggleSpikelines","togglehover","togglespikelines","toimage","zoom","zoom2d","zoom3d","zoomIn2d","zoomInGeo","zoomInMapbox","zoomOut2d","zoomOutGeo","zoomOutMapbox","zoomin","zoomout"]}

@archmojarchmoj added this to the NEXT milestone May 14, 2021
@nicolaskruchten

Copy link
Copy Markdown
Contributor

I thought we'd settled on layout.modebar.(add|remove) ? No "buttonsto"

@archmoj

Copy link
Copy Markdown
ContributorAuthor

I thought we'd settled on layout.modebar.(add|remove) ? No "buttonsto"

Renamed in aeb1626.

@nicolaskruchten

Copy link
Copy Markdown
Contributor

Thanks! Is implementing "remove" a lot of additional work?

@archmoj

Copy link
Copy Markdown
ContributorAuthor

Thanks! Is implementing "remove" a lot of additional work?

Maybe no. But the need for that is not clear? Is it to hide every possible button? Not these hidden by default ones?

@nicolaskruchten

Copy link
Copy Markdown
Contributor

For symmetry and yes, to be able to remove additional buttons like the zoom buttons for example or home/reset-axes

@nicolaskruchten

Copy link
Copy Markdown
Contributor

Basically a layout equivalent to config.modebarButtonsToRemove which gets used fairly often in the wild.

@archmojarchmoj changed the title Enable predefined shape drawing and hover modebar buttons via layout and templateEnable & disable predefined modebar buttons via layout and templateMay 15, 2021
Comment threadsrc/components/modebar/manage.js Outdated
var buttonsToAdd = context.modeBarButtonsToAdd
.concat(fullLayout.modebar.add.split('+'));
var buttonsToRemove = context.modeBarButtonsToRemove
.concat(fullLayout.modebar.remove.split('+'));

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Trying to think if there are any cases we need to explicitly deal with precedence of config over layout. That's the way we decided it should work, right?

If config adds a button that layout has asked to remove, it can add it via the full object, but the string versions aren't defined in the add section below.

And if config removes a button that layout has asked to add, since removal happens first it won't be available yet when it's expected to be removed, so it will appear anyway.

So it seems like these concat need to filter out layout items that are in the opposite context entry.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Good call. Addressed in 3daa2f3.

Comment threadsrc/components/modebar/attributes.js Outdated
].join(' ')
},
add: {
valType: 'flaglist',

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Using a flaglist here is convenient for validation, but it's different from the API we use for config, an array. Here we don't need to support the object form, which obviously wouldn't fit in a flaglist, I just wonder if ease of validation is sufficient reason to differ. @nicolaskruchten thoughts?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I prefer an array, like in config

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Addressed in 5c17d6b and 3293097.

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

💃 looks good. Great tests!

@archmoj
archmoj merged commit d8a1654 into masterMay 18, 2021
@archmoj
archmoj deleted the layout-modebar branch May 18, 2021 15:10
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add modebar buttons control into layout

3 participants

@archmoj@nicolaskruchten@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Enable & disable predefined modebar buttons via layout and template by archmoj · Pull Request #5660 · plotly/plotly.js · GitHub
Skip to content

Enable & disable predefined modebar buttons via layout and template - #5660

Merged
archmoj merged 11 commits into
masterfrom
layout-modebar
May 18, 2021
Merged

Enable & disable predefined modebar buttons via layout and template#5660
archmoj merged 11 commits into
masterfrom
layout-modebar

Conversation

@archmoj

@archmojarchmoj commented May 14, 2021

Copy link
Copy Markdown
Contributor

This PR moves attributes and supply default files into component/modebar, register modebar in core.js and then
resolves#5623 by introducing modebar.add and modebar.remove options.

Also this PR help simplify use of config.modeBarButtonsToRemove by accepting short name variations.
For example one could use zoomin instead of zoomIn2d to disable zoom in buttun.

@plotly/plotly_js

"add": {"flags": ["v1hovermode","hoverclosest","hovercompare","togglehover","togglespikelines","drawclosedpath","drawopenpath","drawline","drawrect","drawcircle","eraseshape"]},"remove": {"flags": ["autoScale2d","autoscale","editInChartStudio","editinchartstudio","hoverCompareCartesian","hovercompare","lasso","lasso2d","orbitRotation","orbitrotation","pan","pan2d","pan3d","reset","resetCameraDefault3d","resetCameraLastSave3d","resetGeo","resetSankeyGroup","resetScale2d","resetViewMapbox","resetViews","resetcameradefault","resetcameralastsave","resetsankeygroup","resetscale","resetview","resetviews","select","select2d","sendDataToCloud","senddatatocloud","tableRotation","tablerotation","toImage","toggleHover","toggleSpikelines","togglehover","togglespikelines","toimage","zoom","zoom2d","zoom3d","zoomIn2d","zoomInGeo","zoomInMapbox","zoomOut2d","zoomOutGeo","zoomOutMapbox","zoomin","zoomout"]}

@archmojarchmoj added this to the NEXT milestone May 14, 2021
@nicolaskruchten

Copy link
Copy Markdown
Contributor

I thought we'd settled on layout.modebar.(add|remove) ? No "buttonsto"

@archmoj

Copy link
Copy Markdown
ContributorAuthor

I thought we'd settled on layout.modebar.(add|remove) ? No "buttonsto"

Renamed in aeb1626.

@nicolaskruchten

Copy link
Copy Markdown
Contributor

Thanks! Is implementing "remove" a lot of additional work?

@archmoj

Copy link
Copy Markdown
ContributorAuthor

Thanks! Is implementing "remove" a lot of additional work?

Maybe no. But the need for that is not clear? Is it to hide every possible button? Not these hidden by default ones?

@nicolaskruchten

Copy link
Copy Markdown
Contributor

For symmetry and yes, to be able to remove additional buttons like the zoom buttons for example or home/reset-axes

@nicolaskruchten

Copy link
Copy Markdown
Contributor

Basically a layout equivalent to config.modebarButtonsToRemove which gets used fairly often in the wild.

@archmojarchmoj changed the title Enable predefined shape drawing and hover modebar buttons via layout and templateEnable & disable predefined modebar buttons via layout and templateMay 15, 2021
Comment threadsrc/components/modebar/manage.js Outdated
var buttonsToAdd = context.modeBarButtonsToAdd
.concat(fullLayout.modebar.add.split('+'));
var buttonsToRemove = context.modeBarButtonsToRemove
.concat(fullLayout.modebar.remove.split('+'));

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Trying to think if there are any cases we need to explicitly deal with precedence of config over layout. That's the way we decided it should work, right?

If config adds a button that layout has asked to remove, it can add it via the full object, but the string versions aren't defined in the add section below.

And if config removes a button that layout has asked to add, since removal happens first it won't be available yet when it's expected to be removed, so it will appear anyway.

So it seems like these concat need to filter out layout items that are in the opposite context entry.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Good call. Addressed in 3daa2f3.

Comment threadsrc/components/modebar/attributes.js Outdated
].join(' ')
},
add: {
valType: 'flaglist',

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Using a flaglist here is convenient for validation, but it's different from the API we use for config, an array. Here we don't need to support the object form, which obviously wouldn't fit in a flaglist, I just wonder if ease of validation is sufficient reason to differ. @nicolaskruchten thoughts?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I prefer an array, like in config

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Addressed in 5c17d6b and 3293097.

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

💃 looks good. Great tests!

@archmoj
archmoj merged commit d8a1654 into masterMay 18, 2021
@archmoj
archmoj deleted the layout-modebar branch May 18, 2021 15:10
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add modebar buttons control into layout

3 participants

@archmoj@nicolaskruchten@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ' Enable & disable predefined modebar buttons via layout and template by archmoj · Pull Request #5660 · plotly/plotly.js · GitHub
Skip to content

Enable & disable predefined modebar buttons via layout and template - #5660

Merged
archmoj merged 11 commits into
masterfrom
layout-modebar
May 18, 2021
Merged

Enable & disable predefined modebar buttons via layout and template#5660
archmoj merged 11 commits into
masterfrom
layout-modebar

Conversation

@archmoj

@archmojarchmoj commented May 14, 2021

Copy link
Copy Markdown
Contributor

This PR moves attributes and supply default files into component/modebar, register modebar in core.js and then
resolves#5623 by introducing modebar.add and modebar.remove options.

Also this PR help simplify use of config.modeBarButtonsToRemove by accepting short name variations.
For example one could use zoomin instead of zoomIn2d to disable zoom in buttun.

@plotly/plotly_js

"add": {"flags": ["v1hovermode","hoverclosest","hovercompare","togglehover","togglespikelines","drawclosedpath","drawopenpath","drawline","drawrect","drawcircle","eraseshape"]},"remove": {"flags": ["autoScale2d","autoscale","editInChartStudio","editinchartstudio","hoverCompareCartesian","hovercompare","lasso","lasso2d","orbitRotation","orbitrotation","pan","pan2d","pan3d","reset","resetCameraDefault3d","resetCameraLastSave3d","resetGeo","resetSankeyGroup","resetScale2d","resetViewMapbox","resetViews","resetcameradefault","resetcameralastsave","resetsankeygroup","resetscale","resetview","resetviews","select","select2d","sendDataToCloud","senddatatocloud","tableRotation","tablerotation","toImage","toggleHover","toggleSpikelines","togglehover","togglespikelines","toimage","zoom","zoom2d","zoom3d","zoomIn2d","zoomInGeo","zoomInMapbox","zoomOut2d","zoomOutGeo","zoomOutMapbox","zoomin","zoomout"]}

@archmojarchmoj added this to the NEXT milestone May 14, 2021
@nicolaskruchten

Copy link
Copy Markdown
Contributor

I thought we'd settled on layout.modebar.(add|remove) ? No "buttonsto"

@archmoj

Copy link
Copy Markdown
ContributorAuthor

I thought we'd settled on layout.modebar.(add|remove) ? No "buttonsto"

Renamed in aeb1626.

@nicolaskruchten

Copy link
Copy Markdown
Contributor

Thanks! Is implementing "remove" a lot of additional work?

@archmoj

Copy link
Copy Markdown
ContributorAuthor

Thanks! Is implementing "remove" a lot of additional work?

Maybe no. But the need for that is not clear? Is it to hide every possible button? Not these hidden by default ones?

@nicolaskruchten

Copy link
Copy Markdown
Contributor

For symmetry and yes, to be able to remove additional buttons like the zoom buttons for example or home/reset-axes

@nicolaskruchten

Copy link
Copy Markdown
Contributor

Basically a layout equivalent to config.modebarButtonsToRemove which gets used fairly often in the wild.

@archmojarchmoj changed the title Enable predefined shape drawing and hover modebar buttons via layout and templateEnable & disable predefined modebar buttons via layout and templateMay 15, 2021
Comment threadsrc/components/modebar/manage.js Outdated
var buttonsToAdd = context.modeBarButtonsToAdd
.concat(fullLayout.modebar.add.split('+'));
var buttonsToRemove = context.modeBarButtonsToRemove
.concat(fullLayout.modebar.remove.split('+'));

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Trying to think if there are any cases we need to explicitly deal with precedence of config over layout. That's the way we decided it should work, right?

If config adds a button that layout has asked to remove, it can add it via the full object, but the string versions aren't defined in the add section below.

And if config removes a button that layout has asked to add, since removal happens first it won't be available yet when it's expected to be removed, so it will appear anyway.

So it seems like these concat need to filter out layout items that are in the opposite context entry.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Good call. Addressed in 3daa2f3.

Comment threadsrc/components/modebar/attributes.js Outdated
].join(' ')
},
add: {
valType: 'flaglist',

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Using a flaglist here is convenient for validation, but it's different from the API we use for config, an array. Here we don't need to support the object form, which obviously wouldn't fit in a flaglist, I just wonder if ease of validation is sufficient reason to differ. @nicolaskruchten thoughts?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I prefer an array, like in config

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Addressed in 5c17d6b and 3293097.

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

💃 looks good. Great tests!

@archmoj
archmoj merged commit d8a1654 into masterMay 18, 2021
@archmoj
archmoj deleted the layout-modebar branch May 18, 2021 15:10
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add modebar buttons control into layout

3 participants

@archmoj@nicolaskruchten@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Enable & disable predefined modebar buttons via layout and template by archmoj · Pull Request #5660 · plotly/plotly.js · GitHub
Skip to content

Enable & disable predefined modebar buttons via layout and template - #5660

Merged
archmoj merged 11 commits into
masterfrom
layout-modebar
May 18, 2021
Merged

Enable & disable predefined modebar buttons via layout and template#5660
archmoj merged 11 commits into
masterfrom
layout-modebar

Conversation

@archmoj

@archmojarchmoj commented May 14, 2021

Copy link
Copy Markdown
Contributor

This PR moves attributes and supply default files into component/modebar, register modebar in core.js and then
resolves#5623 by introducing modebar.add and modebar.remove options.

Also this PR help simplify use of config.modeBarButtonsToRemove by accepting short name variations.
For example one could use zoomin instead of zoomIn2d to disable zoom in buttun.

@plotly/plotly_js

"add": {"flags": ["v1hovermode","hoverclosest","hovercompare","togglehover","togglespikelines","drawclosedpath","drawopenpath","drawline","drawrect","drawcircle","eraseshape"]},"remove": {"flags": ["autoScale2d","autoscale","editInChartStudio","editinchartstudio","hoverCompareCartesian","hovercompare","lasso","lasso2d","orbitRotation","orbitrotation","pan","pan2d","pan3d","reset","resetCameraDefault3d","resetCameraLastSave3d","resetGeo","resetSankeyGroup","resetScale2d","resetViewMapbox","resetViews","resetcameradefault","resetcameralastsave","resetsankeygroup","resetscale","resetview","resetviews","select","select2d","sendDataToCloud","senddatatocloud","tableRotation","tablerotation","toImage","toggleHover","toggleSpikelines","togglehover","togglespikelines","toimage","zoom","zoom2d","zoom3d","zoomIn2d","zoomInGeo","zoomInMapbox","zoomOut2d","zoomOutGeo","zoomOutMapbox","zoomin","zoomout"]}

@archmojarchmoj added this to the NEXT milestone May 14, 2021
@nicolaskruchten

Copy link
Copy Markdown
Contributor

I thought we'd settled on layout.modebar.(add|remove) ? No "buttonsto"

@archmoj

Copy link
Copy Markdown
ContributorAuthor

I thought we'd settled on layout.modebar.(add|remove) ? No "buttonsto"

Renamed in aeb1626.

@nicolaskruchten

Copy link
Copy Markdown
Contributor

Thanks! Is implementing "remove" a lot of additional work?

@archmoj

Copy link
Copy Markdown
ContributorAuthor

Thanks! Is implementing "remove" a lot of additional work?

Maybe no. But the need for that is not clear? Is it to hide every possible button? Not these hidden by default ones?

@nicolaskruchten

Copy link
Copy Markdown
Contributor

For symmetry and yes, to be able to remove additional buttons like the zoom buttons for example or home/reset-axes

@nicolaskruchten

Copy link
Copy Markdown
Contributor

Basically a layout equivalent to config.modebarButtonsToRemove which gets used fairly often in the wild.

@archmojarchmoj changed the title Enable predefined shape drawing and hover modebar buttons via layout and templateEnable & disable predefined modebar buttons via layout and templateMay 15, 2021
Comment threadsrc/components/modebar/manage.js Outdated
var buttonsToAdd = context.modeBarButtonsToAdd
.concat(fullLayout.modebar.add.split('+'));
var buttonsToRemove = context.modeBarButtonsToRemove
.concat(fullLayout.modebar.remove.split('+'));

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Trying to think if there are any cases we need to explicitly deal with precedence of config over layout. That's the way we decided it should work, right?

If config adds a button that layout has asked to remove, it can add it via the full object, but the string versions aren't defined in the add section below.

And if config removes a button that layout has asked to add, since removal happens first it won't be available yet when it's expected to be removed, so it will appear anyway.

So it seems like these concat need to filter out layout items that are in the opposite context entry.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Good call. Addressed in 3daa2f3.

Comment threadsrc/components/modebar/attributes.js Outdated
].join(' ')
},
add: {
valType: 'flaglist',

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Using a flaglist here is convenient for validation, but it's different from the API we use for config, an array. Here we don't need to support the object form, which obviously wouldn't fit in a flaglist, I just wonder if ease of validation is sufficient reason to differ. @nicolaskruchten thoughts?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I prefer an array, like in config

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Addressed in 5c17d6b and 3293097.

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

💃 looks good. Great tests!

@archmoj
archmoj merged commit d8a1654 into masterMay 18, 2021
@archmoj
archmoj deleted the layout-modebar branch May 18, 2021 15:10
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add modebar buttons control into layout

3 participants

@archmoj@nicolaskruchten@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Enable & disable predefined modebar buttons via layout and template by archmoj · Pull Request #5660 · plotly/plotly.js · GitHub
Skip to content

Enable & disable predefined modebar buttons via layout and template - #5660

Merged
archmoj merged 11 commits into
masterfrom
layout-modebar
May 18, 2021
Merged

Enable & disable predefined modebar buttons via layout and template#5660
archmoj merged 11 commits into
masterfrom
layout-modebar

Conversation

@archmoj

@archmojarchmoj commented May 14, 2021

Copy link
Copy Markdown
Contributor

This PR moves attributes and supply default files into component/modebar, register modebar in core.js and then
resolves#5623 by introducing modebar.add and modebar.remove options.

Also this PR help simplify use of config.modeBarButtonsToRemove by accepting short name variations.
For example one could use zoomin instead of zoomIn2d to disable zoom in buttun.

@plotly/plotly_js

"add": {"flags": ["v1hovermode","hoverclosest","hovercompare","togglehover","togglespikelines","drawclosedpath","drawopenpath","drawline","drawrect","drawcircle","eraseshape"]},"remove": {"flags": ["autoScale2d","autoscale","editInChartStudio","editinchartstudio","hoverCompareCartesian","hovercompare","lasso","lasso2d","orbitRotation","orbitrotation","pan","pan2d","pan3d","reset","resetCameraDefault3d","resetCameraLastSave3d","resetGeo","resetSankeyGroup","resetScale2d","resetViewMapbox","resetViews","resetcameradefault","resetcameralastsave","resetsankeygroup","resetscale","resetview","resetviews","select","select2d","sendDataToCloud","senddatatocloud","tableRotation","tablerotation","toImage","toggleHover","toggleSpikelines","togglehover","togglespikelines","toimage","zoom","zoom2d","zoom3d","zoomIn2d","zoomInGeo","zoomInMapbox","zoomOut2d","zoomOutGeo","zoomOutMapbox","zoomin","zoomout"]}

@archmojarchmoj added this to the NEXT milestone May 14, 2021
@nicolaskruchten

Copy link
Copy Markdown
Contributor

I thought we'd settled on layout.modebar.(add|remove) ? No "buttonsto"

@archmoj

Copy link
Copy Markdown
ContributorAuthor

I thought we'd settled on layout.modebar.(add|remove) ? No "buttonsto"

Renamed in aeb1626.

@nicolaskruchten

Copy link
Copy Markdown
Contributor

Thanks! Is implementing "remove" a lot of additional work?

@archmoj

Copy link
Copy Markdown
ContributorAuthor

Thanks! Is implementing "remove" a lot of additional work?

Maybe no. But the need for that is not clear? Is it to hide every possible button? Not these hidden by default ones?

@nicolaskruchten

Copy link
Copy Markdown
Contributor

For symmetry and yes, to be able to remove additional buttons like the zoom buttons for example or home/reset-axes

@nicolaskruchten

Copy link
Copy Markdown
Contributor

Basically a layout equivalent to config.modebarButtonsToRemove which gets used fairly often in the wild.

@archmojarchmoj changed the title Enable predefined shape drawing and hover modebar buttons via layout and templateEnable & disable predefined modebar buttons via layout and templateMay 15, 2021
Comment threadsrc/components/modebar/manage.js Outdated
var buttonsToAdd = context.modeBarButtonsToAdd
.concat(fullLayout.modebar.add.split('+'));
var buttonsToRemove = context.modeBarButtonsToRemove
.concat(fullLayout.modebar.remove.split('+'));

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Trying to think if there are any cases we need to explicitly deal with precedence of config over layout. That's the way we decided it should work, right?

If config adds a button that layout has asked to remove, it can add it via the full object, but the string versions aren't defined in the add section below.

And if config removes a button that layout has asked to add, since removal happens first it won't be available yet when it's expected to be removed, so it will appear anyway.

So it seems like these concat need to filter out layout items that are in the opposite context entry.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Good call. Addressed in 3daa2f3.

Comment threadsrc/components/modebar/attributes.js Outdated
].join(' ')
},
add: {
valType: 'flaglist',

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Using a flaglist here is convenient for validation, but it's different from the API we use for config, an array. Here we don't need to support the object form, which obviously wouldn't fit in a flaglist, I just wonder if ease of validation is sufficient reason to differ. @nicolaskruchten thoughts?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I prefer an array, like in config

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Addressed in 5c17d6b and 3293097.

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

💃 looks good. Great tests!

@archmoj
archmoj merged commit d8a1654 into masterMay 18, 2021
@archmoj
archmoj deleted the layout-modebar branch May 18, 2021 15:10
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add modebar buttons control into layout

3 participants

@archmoj@nicolaskruchten@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })(); Enable & disable predefined modebar buttons via layout and template by archmoj · Pull Request #5660 · plotly/plotly.js · GitHub
Skip to content

Enable & disable predefined modebar buttons via layout and template - #5660

Merged
archmoj merged 11 commits into
masterfrom
layout-modebar
May 18, 2021
Merged

Enable & disable predefined modebar buttons via layout and template#5660
archmoj merged 11 commits into
masterfrom
layout-modebar

Conversation

@archmoj

@archmojarchmoj commented May 14, 2021

Copy link
Copy Markdown
Contributor

This PR moves attributes and supply default files into component/modebar, register modebar in core.js and then
resolves#5623 by introducing modebar.add and modebar.remove options.

Also this PR help simplify use of config.modeBarButtonsToRemove by accepting short name variations.
For example one could use zoomin instead of zoomIn2d to disable zoom in buttun.

@plotly/plotly_js

"add": {"flags": ["v1hovermode","hoverclosest","hovercompare","togglehover","togglespikelines","drawclosedpath","drawopenpath","drawline","drawrect","drawcircle","eraseshape"]},"remove": {"flags": ["autoScale2d","autoscale","editInChartStudio","editinchartstudio","hoverCompareCartesian","hovercompare","lasso","lasso2d","orbitRotation","orbitrotation","pan","pan2d","pan3d","reset","resetCameraDefault3d","resetCameraLastSave3d","resetGeo","resetSankeyGroup","resetScale2d","resetViewMapbox","resetViews","resetcameradefault","resetcameralastsave","resetsankeygroup","resetscale","resetview","resetviews","select","select2d","sendDataToCloud","senddatatocloud","tableRotation","tablerotation","toImage","toggleHover","toggleSpikelines","togglehover","togglespikelines","toimage","zoom","zoom2d","zoom3d","zoomIn2d","zoomInGeo","zoomInMapbox","zoomOut2d","zoomOutGeo","zoomOutMapbox","zoomin","zoomout"]}

@archmojarchmoj added this to the NEXT milestone May 14, 2021
@nicolaskruchten

Copy link
Copy Markdown
Contributor

I thought we'd settled on layout.modebar.(add|remove) ? No "buttonsto"

@archmoj

Copy link
Copy Markdown
ContributorAuthor

I thought we'd settled on layout.modebar.(add|remove) ? No "buttonsto"

Renamed in aeb1626.

@nicolaskruchten

Copy link
Copy Markdown
Contributor

Thanks! Is implementing "remove" a lot of additional work?

@archmoj

Copy link
Copy Markdown
ContributorAuthor

Thanks! Is implementing "remove" a lot of additional work?

Maybe no. But the need for that is not clear? Is it to hide every possible button? Not these hidden by default ones?

@nicolaskruchten

Copy link
Copy Markdown
Contributor

For symmetry and yes, to be able to remove additional buttons like the zoom buttons for example or home/reset-axes

@nicolaskruchten

Copy link
Copy Markdown
Contributor

Basically a layout equivalent to config.modebarButtonsToRemove which gets used fairly often in the wild.

@archmojarchmoj changed the title Enable predefined shape drawing and hover modebar buttons via layout and templateEnable & disable predefined modebar buttons via layout and templateMay 15, 2021
Comment threadsrc/components/modebar/manage.js Outdated
var buttonsToAdd = context.modeBarButtonsToAdd
.concat(fullLayout.modebar.add.split('+'));
var buttonsToRemove = context.modeBarButtonsToRemove
.concat(fullLayout.modebar.remove.split('+'));

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Trying to think if there are any cases we need to explicitly deal with precedence of config over layout. That's the way we decided it should work, right?

If config adds a button that layout has asked to remove, it can add it via the full object, but the string versions aren't defined in the add section below.

And if config removes a button that layout has asked to add, since removal happens first it won't be available yet when it's expected to be removed, so it will appear anyway.

So it seems like these concat need to filter out layout items that are in the opposite context entry.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Good call. Addressed in 3daa2f3.

Comment threadsrc/components/modebar/attributes.js Outdated
].join(' ')
},
add: {
valType: 'flaglist',

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Using a flaglist here is convenient for validation, but it's different from the API we use for config, an array. Here we don't need to support the object form, which obviously wouldn't fit in a flaglist, I just wonder if ease of validation is sufficient reason to differ. @nicolaskruchten thoughts?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I prefer an array, like in config

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Addressed in 5c17d6b and 3293097.

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

💃 looks good. Great tests!

@archmoj
archmoj merged commit d8a1654 into masterMay 18, 2021
@archmoj
archmoj deleted the layout-modebar branch May 18, 2021 15:10
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add modebar buttons control into layout

3 participants

@archmoj@nicolaskruchten@alexcjohnson