Hide hover and spike modebar buttons in plotly.js v2 by default and add config options to bring them back in#5654

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
archmoj merged 8 commits into from
May 14, 2021
Merged

Hide hover and spike modebar buttons in plotly.js v2 by default and add config options to bring them back in #5654

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b19d960
drop hover and spike modebars
archmoj May 10, 2021
992352b
add hover and spike modes to extra modes that could be enabled
archmoj May 10, 2021
f7d5a3a
adjust tests
archmoj May 10, 2021
74649d0
enable hover modebars using simplified strings
archmoj May 12, 2021
3602a51
use lowercase for exposed hover button names
archmoj May 12, 2021
cd6c5a1
bring back and adjust two noHover tests
archmoj May 12, 2021
2d4bc78
accept uppercase and camelCase strings modebar button strings
archmoj May 13, 2021
f4e6120
add v1hovermode option
archmoj May 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 33 additions & 2 deletions src/components/modebar/manage.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -170,19 +170,50 @@ function getButtonGroups(gd) {
dragModeGroup.push('select2d', 'lasso2d');
}

// accept pre-defined buttons as string
var enabledHoverGroup = [];
var enableHover = function(a) {
// return if already added
if(enabledHoverGroup.indexOf(a) !== -1) return;
// should be in hoverGroup
if(hoverGroup.indexOf(a) !== -1) {
enabledHoverGroup.push(a);
}
};

@alexcjohnsonalexcjohnsonMay 13, 2021

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.

So what you're saying is, we still calculate the hover entries you would have gotten, back in 1.x when we included them by default, and in 2.x you won't get them by default but you'll be allowed to re-include any of those exact buttons but no others.

I guess it makes sense to restrict to only the buttons we know will work, but as a user it may be hard to figure out what those buttons are in any given case. For example Sankey gets ['hoverClosestCartesian', 'hoverCompareCartesian']? And some multi-type plots just get ['toggleHover'] but others get something more specific?

What if we accept a special buttonsToAdd value 'hovermode', that copies all of hoverGroup into enabledHoverGroup - ie to get back 1.x behavior no matter what traces you have you can just use that one special value?

@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

What if we accept a special buttonsToAdd value 'hovermode'

this sounds like a good solution to me.

@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

maybe v1hovermode or something to clearly identify this as "the v1 behaviour" ?

@archmojarchmojMay 13, 2021

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.

So what you're saying is, we still calculate the hover entries you would have gotten, back in 1.x when we included them by default, and in 2.x you won't get them by default but you'll be allowed to re-include any of those exact buttons but no others.

Exactly.

@archmojarchmojMay 13, 2021•
edited
Loading

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.

What if we accept a special buttonsToAdd value 'hovermode', that copies all of hoverGroup into enabledHoverGroup - ie to get back 1.x behavior no matter what traces you have you can just use that one special value?

It is doable but at the same time rather confusing (and perhaps hard to maintain) as the v1 hoverGroup does include spike options too. Plus in that case we may restrict users to only include all of those buttons but not some?

@alexcjohnsonalexcjohnsonMay 13, 2021

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.

Right, if you want some subset of the v1 behavior you have to figure out the specific options you need and specify them explicitly.

Good point re: spikes. 'togglespikelines' is pretty simple and easy to document; so let's have 'v1hovermode' give you just the hovermode buttons - ie everything in hoverGroup except toggleSpikelines if it's there.

@archmojarchmojMay 13, 2021

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.

OK.
How about allhovermodes instead of v1hovermode?
Later on the road we may want to add extra buttons e.g. for unified hover options and having v1 would make it difficult to add those.

@alexcjohnsonalexcjohnsonMay 13, 2021

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.

If we call it allhovermodes it's wrong until we add unified. And unified is more a decision chart developers will make, whereas compare vs closest has times it's useful to viewers (mainly for charts that the developer didn't explicitly specify the best hovermode) so I don't see much need to add a button for unified.

@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

If we call it allhovermodes it's wrong until we add unified

Yes. I would favour v1hovermodes as it's clear that this is simply brining back the old mode without making any additional promises/implying anything else about "all" anything :)

@archmojarchmojMay 13, 2021

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.

Added in f4e6120.

if(Array.isArray(buttonsToAdd)) {
var newList = [];
for(var i = 0; i < buttonsToAdd.length; i++) {
var b = buttonsToAdd[i];
if(typeof b === 'string') {
b = b.toLowerCase();

if(DRAW_MODES.indexOf(b) !== -1) {
// accept pre-defined drag modes i.e. shape drawing features as string
if(
fullLayout._has('mapbox') || // draw shapes in paper coordinate (could be improved in future to support data coordinate, when there is no pitch)
fullLayout._has('cartesian') // draw shapes in data coordinate
) {
dragModeGroup.push(b);
}
} else if(b === 'togglespikelines') {
enableHover('toggleSpikelines');
} else if(b === 'togglehover') {
enableHover('toggleHover');
} else if(b === 'hovercompare') {
enableHover('hoverCompareCartesian');
} else if(b === 'hoverclosest') {
enableHover('hoverClosestCartesian');
enableHover('hoverClosestGeo');
enableHover('hoverClosest3d');
enableHover('hoverClosestGl2d');
enableHover('hoverClosestPie');
} else if(b === 'v1hovermode') {
enableHover('toggleHover');
enableHover('hoverClosestCartesian');
enableHover('hoverCompareCartesian');
enableHover('hoverClosestGeo');
enableHover('hoverClosest3d');
enableHover('hoverClosestGl2d');
enableHover('hoverClosestPie');
}
} else newList.push(b);
}
Expand All@@ -191,7 +222,7 @@ function getButtonGroups(gd) {

addGroup(dragModeGroup);
addGroup(zoomGroup.concat(resetGroup));
addGroup(hoverGroup);
addGroup(enabledHoverGroup);

return appendButtonsToGroups(groups, buttonsToAdd);
}
Expand Down
5 changes: 4 additions & 1 deletion test/jasmine/tests/gl3d_plot_interact_test.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -455,6 +455,9 @@ describe('Test gl3d modebar handlers - perspective case', function() {
},
aspectratio: { x: 3, y: 2, z: 1 }
}
},
config: {
modeBarButtonsToAdd: ['hoverclosest']
}
};

Expand DownExpand Up@@ -534,7 +537,7 @@ describe('Test gl3d modebar handlers - perspective case', function() {
expect(buttonOrbit.isActive()).toBe(false);
});

it('@gl button hoverClosest3d should update the scene hovermode and spikes', function() {
it('@gl button hoverClosest should update the scene hovermode and spikes', function() {
var buttonHover = selectButton(modeBar, 'hoverClosest3d');

assertScenes(gd._fullLayout, 'hovermode', 'closest');
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n 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;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Hide hover and spike modebar buttons in plotly.js v2 by default and add config options to bring them back in#5654

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

archmoj
merged 8 commits into

from

May 14, 2021
 Merged


Hide hover and spike modebar buttons in plotly.js v2 by default and add config options to bring them back in
#5654
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


8 commits


Select commit
Hold shift + click to select a range
b19d960

drop hover and spike modebars


archmoj May 10, 2021
992352b

add hover and spike modes to extra modes that could be enabled


archmoj May 10, 2021
f7d5a3a

adjust tests


archmoj May 10, 2021
74649d0

enable hover modebars using simplified strings


archmoj May 12, 2021
3602a51

use lowercase for exposed hover button names


archmoj May 12, 2021
cd6c5a1

bring back and adjust two noHover tests


archmoj May 12, 2021
2d4bc78

accept uppercase and camelCase strings modebar button strings


archmoj May 13, 2021
f4e6120

add v1hovermode option


archmoj May 13, 2021

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


35 changes: 33 additions & 2 deletions
src/components/modebar/manage.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -170,19 +170,50 @@ function getButtonGroups(gd) {
 dragModeGroup.push('select2d', 'lasso2d');
 }

 // accept pre-defined buttons as string
 var enabledHoverGroup = [];
 var enableHover = function(a) {
 // return if already added
 if(enabledHoverGroup.indexOf(a) !== -1) return;
 // should be in hoverGroup
 if(hoverGroup.indexOf(a) !== -1) {
 enabledHoverGroup.push(a);
 }
 };
@alexcjohnsonalexcjohnsonMay 13, 2021

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.

So what you're saying is, we still calculate the hover entries you would have gotten, back in 1.x when we included them by default, and in 2.x you won't get them by default but you'll be allowed to re-include any of those exact buttons but no others.
I guess it makes sense to restrict to only the buttons we know will work, but as a user it may be hard to figure out what those buttons are in any given case. For example Sankey gets ['hoverClosestCartesian', 'hoverCompareCartesian']? And some multi-type plots just get ['toggleHover'] but others get something more specific?
What if we accept a special buttonsToAdd value 'hovermode', that copies all of hoverGroup into enabledHoverGroup - ie to get back 1.x behavior no matter what traces you have you can just use that one special value?
@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

What if we accept a special buttonsToAdd value 'hovermode'
this sounds like a good solution to me.
@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

maybe v1hovermode or something to clearly identify this as "the v1 behaviour" ?
@archmojarchmojMay 13, 2021

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.

So what you're saying is, we still calculate the hover entries you would have gotten, back in 1.x when we included them by default, and in 2.x you won't get them by default but you'll be allowed to re-include any of those exact buttons but no others.
Exactly.
@archmojarchmojMay 13, 2021•

edited

Loading

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.

What if we accept a special buttonsToAdd value 'hovermode', that copies all of hoverGroup into enabledHoverGroup - ie to get back 1.x behavior no matter what traces you have you can just use that one special value?
It is doable but at the same time rather confusing (and perhaps hard to maintain) as the v1 hoverGroup does include spike options too. Plus in that case we may restrict users to only include all of those buttons but not some?
@alexcjohnsonalexcjohnsonMay 13, 2021

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.

Right, if you want some subset of the v1 behavior you have to figure out the specific options you need and specify them explicitly.
Good point re: spikes. 'togglespikelines' is pretty simple and easy to document; so let's have 'v1hovermode' give you just the hovermode buttons - ie everything in hoverGroup except toggleSpikelines if it's there.
@archmojarchmojMay 13, 2021

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.

OK.

How about allhovermodes instead of v1hovermode?

Later on the road we may want to add extra buttons e.g. for unified hover options and having v1 would make it difficult to add those.
@alexcjohnsonalexcjohnsonMay 13, 2021

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.

If we call it allhovermodes it's wrong until we add unified. And unified is more a decision chart developers will make, whereas compare vs closest has times it's useful to viewers (mainly for charts that the developer didn't explicitly specify the best hovermode) so I don't see much need to add a button for unified.
@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

If we call it allhovermodes it's wrong until we add unified
Yes. I would favour v1hovermodes as it's clear that this is simply brining back the old mode without making any additional promises/implying anything else about "all" anything :)
@archmojarchmojMay 13, 2021

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.

Added in f4e6120.
 if(Array.isArray(buttonsToAdd)) {
 var newList = [];
 for(var i = 0; i < buttonsToAdd.length; i++) {
 var b = buttonsToAdd[i];
 if(typeof b === 'string') {
 b = b.toLowerCase();

 if(DRAW_MODES.indexOf(b) !== -1) {
 // accept pre-defined drag modes i.e. shape drawing features as string
 if(
 fullLayout._has('mapbox') || // draw shapes in paper coordinate (could be improved in future to support data coordinate, when there is no pitch)
 fullLayout._has('cartesian') // draw shapes in data coordinate
 ) {
 dragModeGroup.push(b);
 }
 } else if(b === 'togglespikelines') {
 enableHover('toggleSpikelines');
 } else if(b === 'togglehover') {
 enableHover('toggleHover');
 } else if(b === 'hovercompare') {
 enableHover('hoverCompareCartesian');
 } else if(b === 'hoverclosest') {
 enableHover('hoverClosestCartesian');
 enableHover('hoverClosestGeo');
 enableHover('hoverClosest3d');
 enableHover('hoverClosestGl2d');
 enableHover('hoverClosestPie');
 } else if(b === 'v1hovermode') {
 enableHover('toggleHover');
 enableHover('hoverClosestCartesian');
 enableHover('hoverCompareCartesian');
 enableHover('hoverClosestGeo');
 enableHover('hoverClosest3d');
 enableHover('hoverClosestGl2d');
 enableHover('hoverClosestPie');
 }
 } else newList.push(b);
 }
Expand All@@ -191,7 +222,7 @@ function getButtonGroups(gd) {

 addGroup(dragModeGroup);
 addGroup(zoomGroup.concat(resetGroup));
 addGroup(hoverGroup);
 addGroup(enabledHoverGroup);

 return appendButtonsToGroups(groups, buttonsToAdd);
}
Expand Down

5 changes: 4 additions & 1 deletion
test/jasmine/tests/gl3d_plot_interact_test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -455,6 +455,9 @@ describe('Test gl3d modebar handlers - perspective case', function() {
 },
 aspectratio: { x: 3, y: 2, z: 1 }
 }
 },
 config: {
 modeBarButtonsToAdd: ['hoverclosest']
 }
 };

Expand DownExpand Up@@ -534,7 +537,7 @@ describe('Test gl3d modebar handlers - perspective case', function() {
 expect(buttonOrbit.isActive()).toBe(false);
 });

 it('@gl button hoverClosest3d should update the scene hovermode and spikes', function() {
 it('@gl button hoverClosest should update the scene hovermode and spikes', function() {
 var buttonHover = selectButton(modeBar, 'hoverClosest3d');

 assertScenes(gd._fullLayout, 'hovermode', 'closest');
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Hide hover and spike modebar buttons in plotly.js v2 by default and add config options to bring them back in#5654

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

archmoj
merged 8 commits into

from

May 14, 2021
 Merged


Hide hover and spike modebar buttons in plotly.js v2 by default and add config options to bring them back in
#5654
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


8 commits


Select commit
Hold shift + click to select a range
b19d960

drop hover and spike modebars


archmoj May 10, 2021
992352b

add hover and spike modes to extra modes that could be enabled


archmoj May 10, 2021
f7d5a3a

adjust tests


archmoj May 10, 2021
74649d0

enable hover modebars using simplified strings


archmoj May 12, 2021
3602a51

use lowercase for exposed hover button names


archmoj May 12, 2021
cd6c5a1

bring back and adjust two noHover tests


archmoj May 12, 2021
2d4bc78

accept uppercase and camelCase strings modebar button strings


archmoj May 13, 2021
f4e6120

add v1hovermode option


archmoj May 13, 2021

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


35 changes: 33 additions & 2 deletions
src/components/modebar/manage.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -170,19 +170,50 @@ function getButtonGroups(gd) {
 dragModeGroup.push('select2d', 'lasso2d');
 }

 // accept pre-defined buttons as string
 var enabledHoverGroup = [];
 var enableHover = function(a) {
 // return if already added
 if(enabledHoverGroup.indexOf(a) !== -1) return;
 // should be in hoverGroup
 if(hoverGroup.indexOf(a) !== -1) {
 enabledHoverGroup.push(a);
 }
 };
@alexcjohnsonalexcjohnsonMay 13, 2021

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.

So what you're saying is, we still calculate the hover entries you would have gotten, back in 1.x when we included them by default, and in 2.x you won't get them by default but you'll be allowed to re-include any of those exact buttons but no others.
I guess it makes sense to restrict to only the buttons we know will work, but as a user it may be hard to figure out what those buttons are in any given case. For example Sankey gets ['hoverClosestCartesian', 'hoverCompareCartesian']? And some multi-type plots just get ['toggleHover'] but others get something more specific?
What if we accept a special buttonsToAdd value 'hovermode', that copies all of hoverGroup into enabledHoverGroup - ie to get back 1.x behavior no matter what traces you have you can just use that one special value?
@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

What if we accept a special buttonsToAdd value 'hovermode'
this sounds like a good solution to me.
@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

maybe v1hovermode or something to clearly identify this as "the v1 behaviour" ?
@archmojarchmojMay 13, 2021

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.

So what you're saying is, we still calculate the hover entries you would have gotten, back in 1.x when we included them by default, and in 2.x you won't get them by default but you'll be allowed to re-include any of those exact buttons but no others.
Exactly.
@archmojarchmojMay 13, 2021•

edited

Loading

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.

What if we accept a special buttonsToAdd value 'hovermode', that copies all of hoverGroup into enabledHoverGroup - ie to get back 1.x behavior no matter what traces you have you can just use that one special value?
It is doable but at the same time rather confusing (and perhaps hard to maintain) as the v1 hoverGroup does include spike options too. Plus in that case we may restrict users to only include all of those buttons but not some?
@alexcjohnsonalexcjohnsonMay 13, 2021

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.

Right, if you want some subset of the v1 behavior you have to figure out the specific options you need and specify them explicitly.
Good point re: spikes. 'togglespikelines' is pretty simple and easy to document; so let's have 'v1hovermode' give you just the hovermode buttons - ie everything in hoverGroup except toggleSpikelines if it's there.
@archmojarchmojMay 13, 2021

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.

OK.

How about allhovermodes instead of v1hovermode?

Later on the road we may want to add extra buttons e.g. for unified hover options and having v1 would make it difficult to add those.
@alexcjohnsonalexcjohnsonMay 13, 2021

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.

If we call it allhovermodes it's wrong until we add unified. And unified is more a decision chart developers will make, whereas compare vs closest has times it's useful to viewers (mainly for charts that the developer didn't explicitly specify the best hovermode) so I don't see much need to add a button for unified.
@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

If we call it allhovermodes it's wrong until we add unified
Yes. I would favour v1hovermodes as it's clear that this is simply brining back the old mode without making any additional promises/implying anything else about "all" anything :)
@archmojarchmojMay 13, 2021

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.

Added in f4e6120.
 if(Array.isArray(buttonsToAdd)) {
 var newList = [];
 for(var i = 0; i < buttonsToAdd.length; i++) {
 var b = buttonsToAdd[i];
 if(typeof b === 'string') {
 b = b.toLowerCase();

 if(DRAW_MODES.indexOf(b) !== -1) {
 // accept pre-defined drag modes i.e. shape drawing features as string
 if(
 fullLayout._has('mapbox') || // draw shapes in paper coordinate (could be improved in future to support data coordinate, when there is no pitch)
 fullLayout._has('cartesian') // draw shapes in data coordinate
 ) {
 dragModeGroup.push(b);
 }
 } else if(b === 'togglespikelines') {
 enableHover('toggleSpikelines');
 } else if(b === 'togglehover') {
 enableHover('toggleHover');
 } else if(b === 'hovercompare') {
 enableHover('hoverCompareCartesian');
 } else if(b === 'hoverclosest') {
 enableHover('hoverClosestCartesian');
 enableHover('hoverClosestGeo');
 enableHover('hoverClosest3d');
 enableHover('hoverClosestGl2d');
 enableHover('hoverClosestPie');
 } else if(b === 'v1hovermode') {
 enableHover('toggleHover');
 enableHover('hoverClosestCartesian');
 enableHover('hoverCompareCartesian');
 enableHover('hoverClosestGeo');
 enableHover('hoverClosest3d');
 enableHover('hoverClosestGl2d');
 enableHover('hoverClosestPie');
 }
 } else newList.push(b);
 }
Expand All@@ -191,7 +222,7 @@ function getButtonGroups(gd) {

 addGroup(dragModeGroup);
 addGroup(zoomGroup.concat(resetGroup));
 addGroup(hoverGroup);
 addGroup(enabledHoverGroup);

 return appendButtonsToGroups(groups, buttonsToAdd);
}
Expand Down

5 changes: 4 additions & 1 deletion
test/jasmine/tests/gl3d_plot_interact_test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -455,6 +455,9 @@ describe('Test gl3d modebar handlers - perspective case', function() {
 },
 aspectratio: { x: 3, y: 2, z: 1 }
 }
 },
 config: {
 modeBarButtonsToAdd: ['hoverclosest']
 }
 };

Expand DownExpand Up@@ -534,7 +537,7 @@ describe('Test gl3d modebar handlers - perspective case', function() {
 expect(buttonOrbit.isActive()).toBe(false);
 });

 it('@gl button hoverClosest3d should update the scene hovermode and spikes', function() {
 it('@gl button hoverClosest should update the scene hovermode and spikes', function() {
 var buttonHover = selectButton(modeBar, 'hoverClosest3d');

 assertScenes(gd._fullLayout, 'hovermode', 'closest');
Expand Down
Loading

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

Skip to content
Hide hover and spike modebar buttons in plotly.js v2 by default and add config options to bring them back in#5654

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

archmoj
merged 8 commits into

from

May 14, 2021
 Merged


Hide hover and spike modebar buttons in plotly.js v2 by default and add config options to bring them back in
#5654
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


8 commits


Select commit
Hold shift + click to select a range
b19d960

drop hover and spike modebars


archmoj May 10, 2021
992352b

add hover and spike modes to extra modes that could be enabled


archmoj May 10, 2021
f7d5a3a

adjust tests


archmoj May 10, 2021
74649d0

enable hover modebars using simplified strings


archmoj May 12, 2021
3602a51

use lowercase for exposed hover button names


archmoj May 12, 2021
cd6c5a1

bring back and adjust two noHover tests


archmoj May 12, 2021
2d4bc78

accept uppercase and camelCase strings modebar button strings


archmoj May 13, 2021
f4e6120

add v1hovermode option


archmoj May 13, 2021

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


35 changes: 33 additions & 2 deletions
src/components/modebar/manage.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -170,19 +170,50 @@ function getButtonGroups(gd) {
 dragModeGroup.push('select2d', 'lasso2d');
 }

 // accept pre-defined buttons as string
 var enabledHoverGroup = [];
 var enableHover = function(a) {
 // return if already added
 if(enabledHoverGroup.indexOf(a) !== -1) return;
 // should be in hoverGroup
 if(hoverGroup.indexOf(a) !== -1) {
 enabledHoverGroup.push(a);
 }
 };
@alexcjohnsonalexcjohnsonMay 13, 2021

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.

So what you're saying is, we still calculate the hover entries you would have gotten, back in 1.x when we included them by default, and in 2.x you won't get them by default but you'll be allowed to re-include any of those exact buttons but no others.
I guess it makes sense to restrict to only the buttons we know will work, but as a user it may be hard to figure out what those buttons are in any given case. For example Sankey gets ['hoverClosestCartesian', 'hoverCompareCartesian']? And some multi-type plots just get ['toggleHover'] but others get something more specific?
What if we accept a special buttonsToAdd value 'hovermode', that copies all of hoverGroup into enabledHoverGroup - ie to get back 1.x behavior no matter what traces you have you can just use that one special value?
@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

What if we accept a special buttonsToAdd value 'hovermode'
this sounds like a good solution to me.
@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

maybe v1hovermode or something to clearly identify this as "the v1 behaviour" ?
@archmojarchmojMay 13, 2021

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.

So what you're saying is, we still calculate the hover entries you would have gotten, back in 1.x when we included them by default, and in 2.x you won't get them by default but you'll be allowed to re-include any of those exact buttons but no others.
Exactly.
@archmojarchmojMay 13, 2021•

edited

Loading

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.

What if we accept a special buttonsToAdd value 'hovermode', that copies all of hoverGroup into enabledHoverGroup - ie to get back 1.x behavior no matter what traces you have you can just use that one special value?
It is doable but at the same time rather confusing (and perhaps hard to maintain) as the v1 hoverGroup does include spike options too. Plus in that case we may restrict users to only include all of those buttons but not some?
@alexcjohnsonalexcjohnsonMay 13, 2021

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.

Right, if you want some subset of the v1 behavior you have to figure out the specific options you need and specify them explicitly.
Good point re: spikes. 'togglespikelines' is pretty simple and easy to document; so let's have 'v1hovermode' give you just the hovermode buttons - ie everything in hoverGroup except toggleSpikelines if it's there.
@archmojarchmojMay 13, 2021

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.

OK.

How about allhovermodes instead of v1hovermode?

Later on the road we may want to add extra buttons e.g. for unified hover options and having v1 would make it difficult to add those.
@alexcjohnsonalexcjohnsonMay 13, 2021

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.

If we call it allhovermodes it's wrong until we add unified. And unified is more a decision chart developers will make, whereas compare vs closest has times it's useful to viewers (mainly for charts that the developer didn't explicitly specify the best hovermode) so I don't see much need to add a button for unified.
@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

If we call it allhovermodes it's wrong until we add unified
Yes. I would favour v1hovermodes as it's clear that this is simply brining back the old mode without making any additional promises/implying anything else about "all" anything :)
@archmojarchmojMay 13, 2021

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.

Added in f4e6120.
 if(Array.isArray(buttonsToAdd)) {
 var newList = [];
 for(var i = 0; i < buttonsToAdd.length; i++) {
 var b = buttonsToAdd[i];
 if(typeof b === 'string') {
 b = b.toLowerCase();

 if(DRAW_MODES.indexOf(b) !== -1) {
 // accept pre-defined drag modes i.e. shape drawing features as string
 if(
 fullLayout._has('mapbox') || // draw shapes in paper coordinate (could be improved in future to support data coordinate, when there is no pitch)
 fullLayout._has('cartesian') // draw shapes in data coordinate
 ) {
 dragModeGroup.push(b);
 }
 } else if(b === 'togglespikelines') {
 enableHover('toggleSpikelines');
 } else if(b === 'togglehover') {
 enableHover('toggleHover');
 } else if(b === 'hovercompare') {
 enableHover('hoverCompareCartesian');
 } else if(b === 'hoverclosest') {
 enableHover('hoverClosestCartesian');
 enableHover('hoverClosestGeo');
 enableHover('hoverClosest3d');
 enableHover('hoverClosestGl2d');
 enableHover('hoverClosestPie');
 } else if(b === 'v1hovermode') {
 enableHover('toggleHover');
 enableHover('hoverClosestCartesian');
 enableHover('hoverCompareCartesian');
 enableHover('hoverClosestGeo');
 enableHover('hoverClosest3d');
 enableHover('hoverClosestGl2d');
 enableHover('hoverClosestPie');
 }
 } else newList.push(b);
 }
Expand All@@ -191,7 +222,7 @@ function getButtonGroups(gd) {

 addGroup(dragModeGroup);
 addGroup(zoomGroup.concat(resetGroup));
 addGroup(hoverGroup);
 addGroup(enabledHoverGroup);

 return appendButtonsToGroups(groups, buttonsToAdd);
}
Expand Down

5 changes: 4 additions & 1 deletion
test/jasmine/tests/gl3d_plot_interact_test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -455,6 +455,9 @@ describe('Test gl3d modebar handlers - perspective case', function() {
 },
 aspectratio: { x: 3, y: 2, z: 1 }
 }
 },
 config: {
 modeBarButtonsToAdd: ['hoverclosest']
 }
 };

Expand DownExpand Up@@ -534,7 +537,7 @@ describe('Test gl3d modebar handlers - perspective case', function() {
 expect(buttonOrbit.isActive()).toBe(false);
 });

 it('@gl button hoverClosest3d should update the scene hovermode and spikes', function() {
 it('@gl button hoverClosest should update the scene hovermode and spikes', function() {
 var buttonHover = selectButton(modeBar, 'hoverClosest3d');

 assertScenes(gd._fullLayout, 'hovermode', 'closest');
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Hide hover and spike modebar buttons in plotly.js v2 by default and add config options to bring them back in#5654

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

archmoj
merged 8 commits into

from

May 14, 2021
 Merged


Hide hover and spike modebar buttons in plotly.js v2 by default and add config options to bring them back in
#5654
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


8 commits


Select commit
Hold shift + click to select a range
b19d960

drop hover and spike modebars


archmoj May 10, 2021
992352b

add hover and spike modes to extra modes that could be enabled


archmoj May 10, 2021
f7d5a3a

adjust tests


archmoj May 10, 2021
74649d0

enable hover modebars using simplified strings


archmoj May 12, 2021
3602a51

use lowercase for exposed hover button names


archmoj May 12, 2021
cd6c5a1

bring back and adjust two noHover tests


archmoj May 12, 2021
2d4bc78

accept uppercase and camelCase strings modebar button strings


archmoj May 13, 2021
f4e6120

add v1hovermode option


archmoj May 13, 2021

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


35 changes: 33 additions & 2 deletions
src/components/modebar/manage.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -170,19 +170,50 @@ function getButtonGroups(gd) {
 dragModeGroup.push('select2d', 'lasso2d');
 }

 // accept pre-defined buttons as string
 var enabledHoverGroup = [];
 var enableHover = function(a) {
 // return if already added
 if(enabledHoverGroup.indexOf(a) !== -1) return;
 // should be in hoverGroup
 if(hoverGroup.indexOf(a) !== -1) {
 enabledHoverGroup.push(a);
 }
 };
@alexcjohnsonalexcjohnsonMay 13, 2021

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.

So what you're saying is, we still calculate the hover entries you would have gotten, back in 1.x when we included them by default, and in 2.x you won't get them by default but you'll be allowed to re-include any of those exact buttons but no others.
I guess it makes sense to restrict to only the buttons we know will work, but as a user it may be hard to figure out what those buttons are in any given case. For example Sankey gets ['hoverClosestCartesian', 'hoverCompareCartesian']? And some multi-type plots just get ['toggleHover'] but others get something more specific?
What if we accept a special buttonsToAdd value 'hovermode', that copies all of hoverGroup into enabledHoverGroup - ie to get back 1.x behavior no matter what traces you have you can just use that one special value?
@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

What if we accept a special buttonsToAdd value 'hovermode'
this sounds like a good solution to me.
@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

maybe v1hovermode or something to clearly identify this as "the v1 behaviour" ?
@archmojarchmojMay 13, 2021

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.

So what you're saying is, we still calculate the hover entries you would have gotten, back in 1.x when we included them by default, and in 2.x you won't get them by default but you'll be allowed to re-include any of those exact buttons but no others.
Exactly.
@archmojarchmojMay 13, 2021•

edited

Loading

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.

What if we accept a special buttonsToAdd value 'hovermode', that copies all of hoverGroup into enabledHoverGroup - ie to get back 1.x behavior no matter what traces you have you can just use that one special value?
It is doable but at the same time rather confusing (and perhaps hard to maintain) as the v1 hoverGroup does include spike options too. Plus in that case we may restrict users to only include all of those buttons but not some?
@alexcjohnsonalexcjohnsonMay 13, 2021

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.

Right, if you want some subset of the v1 behavior you have to figure out the specific options you need and specify them explicitly.
Good point re: spikes. 'togglespikelines' is pretty simple and easy to document; so let's have 'v1hovermode' give you just the hovermode buttons - ie everything in hoverGroup except toggleSpikelines if it's there.
@archmojarchmojMay 13, 2021

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.

OK.

How about allhovermodes instead of v1hovermode?

Later on the road we may want to add extra buttons e.g. for unified hover options and having v1 would make it difficult to add those.
@alexcjohnsonalexcjohnsonMay 13, 2021

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.

If we call it allhovermodes it's wrong until we add unified. And unified is more a decision chart developers will make, whereas compare vs closest has times it's useful to viewers (mainly for charts that the developer didn't explicitly specify the best hovermode) so I don't see much need to add a button for unified.
@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

If we call it allhovermodes it's wrong until we add unified
Yes. I would favour v1hovermodes as it's clear that this is simply brining back the old mode without making any additional promises/implying anything else about "all" anything :)
@archmojarchmojMay 13, 2021

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.

Added in f4e6120.
 if(Array.isArray(buttonsToAdd)) {
 var newList = [];
 for(var i = 0; i < buttonsToAdd.length; i++) {
 var b = buttonsToAdd[i];
 if(typeof b === 'string') {
 b = b.toLowerCase();

 if(DRAW_MODES.indexOf(b) !== -1) {
 // accept pre-defined drag modes i.e. shape drawing features as string
 if(
 fullLayout._has('mapbox') || // draw shapes in paper coordinate (could be improved in future to support data coordinate, when there is no pitch)
 fullLayout._has('cartesian') // draw shapes in data coordinate
 ) {
 dragModeGroup.push(b);
 }
 } else if(b === 'togglespikelines') {
 enableHover('toggleSpikelines');
 } else if(b === 'togglehover') {
 enableHover('toggleHover');
 } else if(b === 'hovercompare') {
 enableHover('hoverCompareCartesian');
 } else if(b === 'hoverclosest') {
 enableHover('hoverClosestCartesian');
 enableHover('hoverClosestGeo');
 enableHover('hoverClosest3d');
 enableHover('hoverClosestGl2d');
 enableHover('hoverClosestPie');
 } else if(b === 'v1hovermode') {
 enableHover('toggleHover');
 enableHover('hoverClosestCartesian');
 enableHover('hoverCompareCartesian');
 enableHover('hoverClosestGeo');
 enableHover('hoverClosest3d');
 enableHover('hoverClosestGl2d');
 enableHover('hoverClosestPie');
 }
 } else newList.push(b);
 }
Expand All@@ -191,7 +222,7 @@ function getButtonGroups(gd) {

 addGroup(dragModeGroup);
 addGroup(zoomGroup.concat(resetGroup));
 addGroup(hoverGroup);
 addGroup(enabledHoverGroup);

 return appendButtonsToGroups(groups, buttonsToAdd);
}
Expand Down

5 changes: 4 additions & 1 deletion
test/jasmine/tests/gl3d_plot_interact_test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -455,6 +455,9 @@ describe('Test gl3d modebar handlers - perspective case', function() {
 },
 aspectratio: { x: 3, y: 2, z: 1 }
 }
 },
 config: {
 modeBarButtonsToAdd: ['hoverclosest']
 }
 };

Expand DownExpand Up@@ -534,7 +537,7 @@ describe('Test gl3d modebar handlers - perspective case', function() {
 expect(buttonOrbit.isActive()).toBe(false);
 });

 it('@gl button hoverClosest3d should update the scene hovermode and spikes', function() {
 it('@gl button hoverClosest should update the scene hovermode and spikes', function() {
 var buttonHover = selectButton(modeBar, 'hoverClosest3d');

 assertScenes(gd._fullLayout, 'hovermode', 'closest');
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Hide hover and spike modebar buttons in plotly.js v2 by default and add config options to bring them back in#5654

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

archmoj
merged 8 commits into

from

May 14, 2021
 Merged


Hide hover and spike modebar buttons in plotly.js v2 by default and add config options to bring them back in
#5654
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


8 commits


Select commit
Hold shift + click to select a range
b19d960

drop hover and spike modebars


archmoj May 10, 2021
992352b

add hover and spike modes to extra modes that could be enabled


archmoj May 10, 2021
f7d5a3a

adjust tests


archmoj May 10, 2021
74649d0

enable hover modebars using simplified strings


archmoj May 12, 2021
3602a51

use lowercase for exposed hover button names


archmoj May 12, 2021
cd6c5a1

bring back and adjust two noHover tests


archmoj May 12, 2021
2d4bc78

accept uppercase and camelCase strings modebar button strings


archmoj May 13, 2021
f4e6120

add v1hovermode option


archmoj May 13, 2021

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


35 changes: 33 additions & 2 deletions
src/components/modebar/manage.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -170,19 +170,50 @@ function getButtonGroups(gd) {
 dragModeGroup.push('select2d', 'lasso2d');
 }

 // accept pre-defined buttons as string
 var enabledHoverGroup = [];
 var enableHover = function(a) {
 // return if already added
 if(enabledHoverGroup.indexOf(a) !== -1) return;
 // should be in hoverGroup
 if(hoverGroup.indexOf(a) !== -1) {
 enabledHoverGroup.push(a);
 }
 };
@alexcjohnsonalexcjohnsonMay 13, 2021

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.

So what you're saying is, we still calculate the hover entries you would have gotten, back in 1.x when we included them by default, and in 2.x you won't get them by default but you'll be allowed to re-include any of those exact buttons but no others.
I guess it makes sense to restrict to only the buttons we know will work, but as a user it may be hard to figure out what those buttons are in any given case. For example Sankey gets ['hoverClosestCartesian', 'hoverCompareCartesian']? And some multi-type plots just get ['toggleHover'] but others get something more specific?
What if we accept a special buttonsToAdd value 'hovermode', that copies all of hoverGroup into enabledHoverGroup - ie to get back 1.x behavior no matter what traces you have you can just use that one special value?
@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

What if we accept a special buttonsToAdd value 'hovermode'
this sounds like a good solution to me.
@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

maybe v1hovermode or something to clearly identify this as "the v1 behaviour" ?
@archmojarchmojMay 13, 2021

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.

So what you're saying is, we still calculate the hover entries you would have gotten, back in 1.x when we included them by default, and in 2.x you won't get them by default but you'll be allowed to re-include any of those exact buttons but no others.
Exactly.
@archmojarchmojMay 13, 2021•

edited

Loading

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.

What if we accept a special buttonsToAdd value 'hovermode', that copies all of hoverGroup into enabledHoverGroup - ie to get back 1.x behavior no matter what traces you have you can just use that one special value?
It is doable but at the same time rather confusing (and perhaps hard to maintain) as the v1 hoverGroup does include spike options too. Plus in that case we may restrict users to only include all of those buttons but not some?
@alexcjohnsonalexcjohnsonMay 13, 2021

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.

Right, if you want some subset of the v1 behavior you have to figure out the specific options you need and specify them explicitly.
Good point re: spikes. 'togglespikelines' is pretty simple and easy to document; so let's have 'v1hovermode' give you just the hovermode buttons - ie everything in hoverGroup except toggleSpikelines if it's there.
@archmojarchmojMay 13, 2021

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.

OK.

How about allhovermodes instead of v1hovermode?

Later on the road we may want to add extra buttons e.g. for unified hover options and having v1 would make it difficult to add those.
@alexcjohnsonalexcjohnsonMay 13, 2021

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.

If we call it allhovermodes it's wrong until we add unified. And unified is more a decision chart developers will make, whereas compare vs closest has times it's useful to viewers (mainly for charts that the developer didn't explicitly specify the best hovermode) so I don't see much need to add a button for unified.
@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

If we call it allhovermodes it's wrong until we add unified
Yes. I would favour v1hovermodes as it's clear that this is simply brining back the old mode without making any additional promises/implying anything else about "all" anything :)
@archmojarchmojMay 13, 2021

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.

Added in f4e6120.
 if(Array.isArray(buttonsToAdd)) {
 var newList = [];
 for(var i = 0; i < buttonsToAdd.length; i++) {
 var b = buttonsToAdd[i];
 if(typeof b === 'string') {
 b = b.toLowerCase();

 if(DRAW_MODES.indexOf(b) !== -1) {
 // accept pre-defined drag modes i.e. shape drawing features as string
 if(
 fullLayout._has('mapbox') || // draw shapes in paper coordinate (could be improved in future to support data coordinate, when there is no pitch)
 fullLayout._has('cartesian') // draw shapes in data coordinate
 ) {
 dragModeGroup.push(b);
 }
 } else if(b === 'togglespikelines') {
 enableHover('toggleSpikelines');
 } else if(b === 'togglehover') {
 enableHover('toggleHover');
 } else if(b === 'hovercompare') {
 enableHover('hoverCompareCartesian');
 } else if(b === 'hoverclosest') {
 enableHover('hoverClosestCartesian');
 enableHover('hoverClosestGeo');
 enableHover('hoverClosest3d');
 enableHover('hoverClosestGl2d');
 enableHover('hoverClosestPie');
 } else if(b === 'v1hovermode') {
 enableHover('toggleHover');
 enableHover('hoverClosestCartesian');
 enableHover('hoverCompareCartesian');
 enableHover('hoverClosestGeo');
 enableHover('hoverClosest3d');
 enableHover('hoverClosestGl2d');
 enableHover('hoverClosestPie');
 }
 } else newList.push(b);
 }
Expand All@@ -191,7 +222,7 @@ function getButtonGroups(gd) {

 addGroup(dragModeGroup);
 addGroup(zoomGroup.concat(resetGroup));
 addGroup(hoverGroup);
 addGroup(enabledHoverGroup);

 return appendButtonsToGroups(groups, buttonsToAdd);
}
Expand Down

5 changes: 4 additions & 1 deletion
test/jasmine/tests/gl3d_plot_interact_test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -455,6 +455,9 @@ describe('Test gl3d modebar handlers - perspective case', function() {
 },
 aspectratio: { x: 3, y: 2, z: 1 }
 }
 },
 config: {
 modeBarButtonsToAdd: ['hoverclosest']
 }
 };

Expand DownExpand Up@@ -534,7 +537,7 @@ describe('Test gl3d modebar handlers - perspective case', function() {
 expect(buttonOrbit.isActive()).toBe(false);
 });

 it('@gl button hoverClosest3d should update the scene hovermode and spikes', function() {
 it('@gl button hoverClosest should update the scene hovermode and spikes', function() {
 var buttonHover = selectButton(modeBar, 'hoverClosest3d');

 assertScenes(gd._fullLayout, 'hovermode', 'closest');
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Hide hover and spike modebar buttons in plotly.js v2 by default and add config options to bring them back in#5654

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

archmoj
merged 8 commits into

from

May 14, 2021
 Merged


Hide hover and spike modebar buttons in plotly.js v2 by default and add config options to bring them back in
#5654
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


8 commits


Select commit
Hold shift + click to select a range
b19d960

drop hover and spike modebars


archmoj May 10, 2021
992352b

add hover and spike modes to extra modes that could be enabled


archmoj May 10, 2021
f7d5a3a

adjust tests


archmoj May 10, 2021
74649d0

enable hover modebars using simplified strings


archmoj May 12, 2021
3602a51

use lowercase for exposed hover button names


archmoj May 12, 2021
cd6c5a1

bring back and adjust two noHover tests


archmoj May 12, 2021
2d4bc78

accept uppercase and camelCase strings modebar button strings


archmoj May 13, 2021
f4e6120

add v1hovermode option


archmoj May 13, 2021

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


35 changes: 33 additions & 2 deletions
src/components/modebar/manage.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -170,19 +170,50 @@ function getButtonGroups(gd) {
 dragModeGroup.push('select2d', 'lasso2d');
 }

 // accept pre-defined buttons as string
 var enabledHoverGroup = [];
 var enableHover = function(a) {
 // return if already added
 if(enabledHoverGroup.indexOf(a) !== -1) return;
 // should be in hoverGroup
 if(hoverGroup.indexOf(a) !== -1) {
 enabledHoverGroup.push(a);
 }
 };
@alexcjohnsonalexcjohnsonMay 13, 2021

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.

So what you're saying is, we still calculate the hover entries you would have gotten, back in 1.x when we included them by default, and in 2.x you won't get them by default but you'll be allowed to re-include any of those exact buttons but no others.
I guess it makes sense to restrict to only the buttons we know will work, but as a user it may be hard to figure out what those buttons are in any given case. For example Sankey gets ['hoverClosestCartesian', 'hoverCompareCartesian']? And some multi-type plots just get ['toggleHover'] but others get something more specific?
What if we accept a special buttonsToAdd value 'hovermode', that copies all of hoverGroup into enabledHoverGroup - ie to get back 1.x behavior no matter what traces you have you can just use that one special value?
@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

What if we accept a special buttonsToAdd value 'hovermode'
this sounds like a good solution to me.
@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

maybe v1hovermode or something to clearly identify this as "the v1 behaviour" ?
@archmojarchmojMay 13, 2021

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.

So what you're saying is, we still calculate the hover entries you would have gotten, back in 1.x when we included them by default, and in 2.x you won't get them by default but you'll be allowed to re-include any of those exact buttons but no others.
Exactly.
@archmojarchmojMay 13, 2021•

edited

Loading

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.

What if we accept a special buttonsToAdd value 'hovermode', that copies all of hoverGroup into enabledHoverGroup - ie to get back 1.x behavior no matter what traces you have you can just use that one special value?
It is doable but at the same time rather confusing (and perhaps hard to maintain) as the v1 hoverGroup does include spike options too. Plus in that case we may restrict users to only include all of those buttons but not some?
@alexcjohnsonalexcjohnsonMay 13, 2021

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.

Right, if you want some subset of the v1 behavior you have to figure out the specific options you need and specify them explicitly.
Good point re: spikes. 'togglespikelines' is pretty simple and easy to document; so let's have 'v1hovermode' give you just the hovermode buttons - ie everything in hoverGroup except toggleSpikelines if it's there.
@archmojarchmojMay 13, 2021

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.

OK.

How about allhovermodes instead of v1hovermode?

Later on the road we may want to add extra buttons e.g. for unified hover options and having v1 would make it difficult to add those.
@alexcjohnsonalexcjohnsonMay 13, 2021

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.

If we call it allhovermodes it's wrong until we add unified. And unified is more a decision chart developers will make, whereas compare vs closest has times it's useful to viewers (mainly for charts that the developer didn't explicitly specify the best hovermode) so I don't see much need to add a button for unified.
@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

If we call it allhovermodes it's wrong until we add unified
Yes. I would favour v1hovermodes as it's clear that this is simply brining back the old mode without making any additional promises/implying anything else about "all" anything :)
@archmojarchmojMay 13, 2021

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.

Added in f4e6120.
 if(Array.isArray(buttonsToAdd)) {
 var newList = [];
 for(var i = 0; i < buttonsToAdd.length; i++) {
 var b = buttonsToAdd[i];
 if(typeof b === 'string') {
 b = b.toLowerCase();

 if(DRAW_MODES.indexOf(b) !== -1) {
 // accept pre-defined drag modes i.e. shape drawing features as string
 if(
 fullLayout._has('mapbox') || // draw shapes in paper coordinate (could be improved in future to support data coordinate, when there is no pitch)
 fullLayout._has('cartesian') // draw shapes in data coordinate
 ) {
 dragModeGroup.push(b);
 }
 } else if(b === 'togglespikelines') {
 enableHover('toggleSpikelines');
 } else if(b === 'togglehover') {
 enableHover('toggleHover');
 } else if(b === 'hovercompare') {
 enableHover('hoverCompareCartesian');
 } else if(b === 'hoverclosest') {
 enableHover('hoverClosestCartesian');
 enableHover('hoverClosestGeo');
 enableHover('hoverClosest3d');
 enableHover('hoverClosestGl2d');
 enableHover('hoverClosestPie');
 } else if(b === 'v1hovermode') {
 enableHover('toggleHover');
 enableHover('hoverClosestCartesian');
 enableHover('hoverCompareCartesian');
 enableHover('hoverClosestGeo');
 enableHover('hoverClosest3d');
 enableHover('hoverClosestGl2d');
 enableHover('hoverClosestPie');
 }
 } else newList.push(b);
 }
Expand All@@ -191,7 +222,7 @@ function getButtonGroups(gd) {

 addGroup(dragModeGroup);
 addGroup(zoomGroup.concat(resetGroup));
 addGroup(hoverGroup);
 addGroup(enabledHoverGroup);

 return appendButtonsToGroups(groups, buttonsToAdd);
}
Expand Down

5 changes: 4 additions & 1 deletion
test/jasmine/tests/gl3d_plot_interact_test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -455,6 +455,9 @@ describe('Test gl3d modebar handlers - perspective case', function() {
 },
 aspectratio: { x: 3, y: 2, z: 1 }
 }
 },
 config: {
 modeBarButtonsToAdd: ['hoverclosest']
 }
 };

Expand DownExpand Up@@ -534,7 +537,7 @@ describe('Test gl3d modebar handlers - perspective case', function() {
 expect(buttonOrbit.isActive()).toBe(false);
 });

 it('@gl button hoverClosest3d should update the scene hovermode and spikes', function() {
 it('@gl button hoverClosest should update the scene hovermode and spikes', function() {
 var buttonHover = selectButton(modeBar, 'hoverClosest3d');

 assertScenes(gd._fullLayout, 'hovermode', 'closest');
Expand Down
Loading

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

Skip to content
Hide hover and spike modebar buttons in plotly.js v2 by default and add config options to bring them back in#5654

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

archmoj
merged 8 commits into

from

May 14, 2021
 Merged


Hide hover and spike modebar buttons in plotly.js v2 by default and add config options to bring them back in
#5654
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


8 commits


Select commit
Hold shift + click to select a range
b19d960

drop hover and spike modebars


archmoj May 10, 2021
992352b

add hover and spike modes to extra modes that could be enabled


archmoj May 10, 2021
f7d5a3a

adjust tests


archmoj May 10, 2021
74649d0

enable hover modebars using simplified strings


archmoj May 12, 2021
3602a51

use lowercase for exposed hover button names


archmoj May 12, 2021
cd6c5a1

bring back and adjust two noHover tests


archmoj May 12, 2021
2d4bc78

accept uppercase and camelCase strings modebar button strings


archmoj May 13, 2021
f4e6120

add v1hovermode option


archmoj May 13, 2021

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


35 changes: 33 additions & 2 deletions
src/components/modebar/manage.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -170,19 +170,50 @@ function getButtonGroups(gd) {
 dragModeGroup.push('select2d', 'lasso2d');
 }

 // accept pre-defined buttons as string
 var enabledHoverGroup = [];
 var enableHover = function(a) {
 // return if already added
 if(enabledHoverGroup.indexOf(a) !== -1) return;
 // should be in hoverGroup
 if(hoverGroup.indexOf(a) !== -1) {
 enabledHoverGroup.push(a);
 }
 };
@alexcjohnsonalexcjohnsonMay 13, 2021

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.

So what you're saying is, we still calculate the hover entries you would have gotten, back in 1.x when we included them by default, and in 2.x you won't get them by default but you'll be allowed to re-include any of those exact buttons but no others.
I guess it makes sense to restrict to only the buttons we know will work, but as a user it may be hard to figure out what those buttons are in any given case. For example Sankey gets ['hoverClosestCartesian', 'hoverCompareCartesian']? And some multi-type plots just get ['toggleHover'] but others get something more specific?
What if we accept a special buttonsToAdd value 'hovermode', that copies all of hoverGroup into enabledHoverGroup - ie to get back 1.x behavior no matter what traces you have you can just use that one special value?
@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

What if we accept a special buttonsToAdd value 'hovermode'
this sounds like a good solution to me.
@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

maybe v1hovermode or something to clearly identify this as "the v1 behaviour" ?
@archmojarchmojMay 13, 2021

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.

So what you're saying is, we still calculate the hover entries you would have gotten, back in 1.x when we included them by default, and in 2.x you won't get them by default but you'll be allowed to re-include any of those exact buttons but no others.
Exactly.
@archmojarchmojMay 13, 2021•

edited

Loading

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.

What if we accept a special buttonsToAdd value 'hovermode', that copies all of hoverGroup into enabledHoverGroup - ie to get back 1.x behavior no matter what traces you have you can just use that one special value?
It is doable but at the same time rather confusing (and perhaps hard to maintain) as the v1 hoverGroup does include spike options too. Plus in that case we may restrict users to only include all of those buttons but not some?
@alexcjohnsonalexcjohnsonMay 13, 2021

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.

Right, if you want some subset of the v1 behavior you have to figure out the specific options you need and specify them explicitly.
Good point re: spikes. 'togglespikelines' is pretty simple and easy to document; so let's have 'v1hovermode' give you just the hovermode buttons - ie everything in hoverGroup except toggleSpikelines if it's there.
@archmojarchmojMay 13, 2021

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.

OK.

How about allhovermodes instead of v1hovermode?

Later on the road we may want to add extra buttons e.g. for unified hover options and having v1 would make it difficult to add those.
@alexcjohnsonalexcjohnsonMay 13, 2021

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.

If we call it allhovermodes it's wrong until we add unified. And unified is more a decision chart developers will make, whereas compare vs closest has times it's useful to viewers (mainly for charts that the developer didn't explicitly specify the best hovermode) so I don't see much need to add a button for unified.
@nicolaskruchtennicolaskruchtenMay 13, 2021

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.

If we call it allhovermodes it's wrong until we add unified
Yes. I would favour v1hovermodes as it's clear that this is simply brining back the old mode without making any additional promises/implying anything else about "all" anything :)
@archmojarchmojMay 13, 2021

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.

Added in f4e6120.
 if(Array.isArray(buttonsToAdd)) {
 var newList = [];
 for(var i = 0; i < buttonsToAdd.length; i++) {
 var b = buttonsToAdd[i];
 if(typeof b === 'string') {
 b = b.toLowerCase();

 if(DRAW_MODES.indexOf(b) !== -1) {
 // accept pre-defined drag modes i.e. shape drawing features as string
 if(
 fullLayout._has('mapbox') || // draw shapes in paper coordinate (could be improved in future to support data coordinate, when there is no pitch)
 fullLayout._has('cartesian') // draw shapes in data coordinate
 ) {
 dragModeGroup.push(b);
 }
 } else if(b === 'togglespikelines') {
 enableHover('toggleSpikelines');
 } else if(b === 'togglehover') {
 enableHover('toggleHover');
 } else if(b === 'hovercompare') {
 enableHover('hoverCompareCartesian');
 } else if(b === 'hoverclosest') {
 enableHover('hoverClosestCartesian');
 enableHover('hoverClosestGeo');
 enableHover('hoverClosest3d');
 enableHover('hoverClosestGl2d');
 enableHover('hoverClosestPie');
 } else if(b === 'v1hovermode') {
 enableHover('toggleHover');
 enableHover('hoverClosestCartesian');
 enableHover('hoverCompareCartesian');
 enableHover('hoverClosestGeo');
 enableHover('hoverClosest3d');
 enableHover('hoverClosestGl2d');
 enableHover('hoverClosestPie');
 }
 } else newList.push(b);
 }
Expand All@@ -191,7 +222,7 @@ function getButtonGroups(gd) {

 addGroup(dragModeGroup);
 addGroup(zoomGroup.concat(resetGroup));
 addGroup(hoverGroup);
 addGroup(enabledHoverGroup);

 return appendButtonsToGroups(groups, buttonsToAdd);
}
Expand Down

5 changes: 4 additions & 1 deletion
test/jasmine/tests/gl3d_plot_interact_test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -455,6 +455,9 @@ describe('Test gl3d modebar handlers - perspective case', function() {
 },
 aspectratio: { x: 3, y: 2, z: 1 }
 }
 },
 config: {
 modeBarButtonsToAdd: ['hoverclosest']
 }
 };

Expand DownExpand Up@@ -534,7 +537,7 @@ describe('Test gl3d modebar handlers - perspective case', function() {
 expect(buttonOrbit.isActive()).toBe(false);
 });

 it('@gl button hoverClosest3d should update the scene hovermode and spikes', function() {
 it('@gl button hoverClosest should update the scene hovermode and spikes', function() {
 var buttonHover = selectButton(modeBar, 'hoverClosest3d');

 assertScenes(gd._fullLayout, 'hovermode', 'closest');
Expand Down
Loading