Skip to content

Fix hover for mesh3d, isosurface and volume #4534

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
merged 5 commits into from
Jan 31, 2020
Merged

Fix hover for mesh3d, isosurface and volume #4534

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c77ec0f
fix pick in gl-mesh3d to take into account plotGlPixelRatio
archmoj Jan 30, 2020
a39a859
correct mesh3d, isosurface and volume hover label tests
archmoj Jan 30, 2020
bc01dc0
add mesh3d mock with different coloring and hover template
archmoj Jan 29, 2020
30532bd
add hover test on mesh3d with face colors
archmoj Jan 30, 2020
e386e5f
bump gl-mesh3d v2.2.1
archmoj Jan 31, 2020
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
6 changes: 3 additions & 3 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
"gl-heatmap2d": "^1.0.5",
"gl-line3d": "^1.1.11",
"gl-mat4": "^1.2.0",
"gl-mesh3d": "^2.2.0",
"gl-mesh3d": "^2.2.1",
"gl-plot2d": "^1.4.2",
"gl-plot3d": "^2.4.0",
"gl-pointcloud2d": "^1.0.2",
Expand Down
Binary file added test/image/baselines/gl3d_mesh3d_coloring.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
139 changes: 139 additions & 0 deletions test/image/mocks/gl3d_mesh3d_coloring.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
{
"data": [{
"showlegend": true,
"x": [0, 1, 0, 1, 0, 1, 0, 1],
"y": [0, 0, 1, 1, 0, 0, 1, 1],
"z": [0, 0, 0, 0, 1, 1, 1, 1],
"i": [0, 3, 4, 7, 0, 6, 1, 7, 0, 5, 2, 7],
"j": [1, 2, 5, 6, 2, 4, 3, 5, 4, 1, 6, 3],
"k": [3, 0, 7, 4, 6, 0, 7, 1, 5, 0, 7, 2],
"vertexcolor": ["#000", "#00F", "#0F0", "#0FF", "#F00", "#F0F", "#FF0", "#FFF"],
"hovertemplate": "x: %{x}<br>y: %{y}<br>z: %{z}<br>vertex color: %{vertexcolor}",
"flatshading": true,
"lightposition": { "x": 1000, "y": 1000, "z": 0 },
"type": "mesh3d",
"name": "vertex color",
"scene": "scene1"
}, {
"showlegend": true,
"x": [0, 1, 0, 1, 0, 1, 0, 1],
"y": [0, 0, 1, 1, 0, 0, 1, 1],
"z": [0, 0, 0, 0, 1, 1, 1, 1],
"i": [0, 3, 4, 7, 0, 6, 1, 7, 0, 5, 2, 7],
"j": [1, 2, 5, 6, 2, 4, 3, 5, 4, 1, 6, 3],
"k": [3, 0, 7, 4, 6, 0, 7, 1, 5, 0, 7, 2],
"facecolor": [
"#000", "#000",
"#00F", "#00F",
"#0F0", "#0F0",
"#0FF", "#0FF",
"#F00", "#F00",
"#F0F", "#F0F",
"#FF0", "#FF0",
"#FFF", "#FFF"
],
"hovertemplate": "x: %{x}<br>y: %{y}<br>z: %{z}<br>face color: %{facecolor}",
"flatshading": true,
"lightposition": { "x": 1000, "y": 1000, "z": 0 },
"type": "mesh3d",
"name": "face color",
"scene": "scene2"
}, {
"showlegend": true,
"x": [0, 1, 0, 1, 0, 1, 0, 1],
"y": [0, 0, 1, 1, 0, 0, 1, 1],
"z": [0, 0, 0, 0, 1, 1, 1, 1],
"i": [0, 3, 4, 7, 0, 6, 1, 7, 0, 5, 2, 7],
"j": [1, 2, 5, 6, 2, 4, 3, 5, 4, 1, 6, 3],
"k": [3, 0, 7, 4, 6, 0, 7, 1, 5, 0, 7, 2],
"intensity": [1, 2, 3, 4, 5, 6, 7, 8],
"hovertemplate": "x: %{x}<br>y: %{y}<br>z: %{z}<br>vertex intensity: %{intensity}",
"showscale": true,
"colorscale": "Portland",
"colorbar": {
"title": "vertex<br>intensity",
"len": 0.5,
"y": 0,
"yanchor": "bottom"
},
"flatshading": true,
"lightposition": { "x": 1000, "y": 1000, "z": 0 },
"type": "mesh3d",
"name": "vertex intensity",
"scene": "scene3"
}, {
"showlegend": true,
"x": [0, 1, 0, 1, 0, 1, 0, 1],
"y": [0, 0, 1, 1, 0, 0, 1, 1],
"z": [0, 0, 0, 0, 1, 1, 1, 1],
"i": [0, 3, 4, 7, 0, 6, 1, 7, 0, 5, 2, 7],
"j": [1, 2, 5, 6, 2, 4, 3, 5, 4, 1, 6, 3],
"k": [3, 0, 7, 4, 6, 0, 7, 1, 5, 0, 7, 2],
"intensity": [
1, 1,
2, 2,
3, 3,
4, 4,
5, 5,
6, 6
],
"intensitymode": "cell",
"hovertemplate": "x: %{x}<br>y: %{y}<br>z: %{z}<br>cell intensity: %{intensity}",
"showscale": true,
"colorbar": {
"title": "cell<br>intensity",
"len": 0.5,
"y": 0.5,
"yanchor": "bottom"
},
"flatshading": true,
"lightposition": { "x": 1000, "y": 1000, "z": 0 },
"type": "mesh3d",
"name": "cell intensity",
"scene": "scene4"
}],
"layout": {
"width": 800,
"height": 800,
"legend": {
"bgcolor": "#eee",
"orientation": "h",
"title": {
"text": "<b>mesh3d with different coloring:</b>",
"side": "top left"
}
},
"scene1": {
"bgcolor": "#eee",
"domain": {
"x": [0, 0.5],
"y": [0, 0.5]
},
"camera": { "eye": { "x": 2, "y": -1.5, "z": 1 } }
},
"scene2": {
"bgcolor": "#eee",
"domain": {
"x": [0, 0.5],
"y": [0.5, 1]
},
"camera": { "eye": { "x": 2, "y": -1.5, "z": 1 } }
},
"scene3": {
"bgcolor": "#eee",
"domain": {
"x": [0.5, 1],
"y": [0, 0.5]
},
"camera": { "eye": { "x": 2, "y": -1.5, "z": 1 } }
},
"scene4": {
"bgcolor": "#eee",
"domain": {
"x": [0.5, 1],
"y": [0.5, 1]
},
"camera": { "eye": { "x": 2, "y": -1.5, "z": 1 } }
}
}
}
66 changes: 60 additions & 6 deletions test/jasmine/tests/gl3d_hover_click_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ var assertHoverLabelStyle = customAssertions.assertHoverLabelStyle;
var assertHoverLabelContent = customAssertions.assertHoverLabelContent;

var mock = require('@mocks/gl3d_marker-arrays.json');
var mesh3dcoloringMock = require('@mocks/gl3d_mesh3d_coloring.json');
var multipleScatter3dMock = require('@mocks/gl3d_multiple-scatter3d-traces.json');

// lines, markers, text, error bars and surfaces each
Expand Down Expand Up @@ -466,7 +467,7 @@ describe('Test gl3d trace click/hover:', function() {
.then(_click)
.then(delay(20))
.then(function() {
assertEventData(134.03, -163.59, -163.59, 0, 3);
assertEventData(140.72, -96.97, -96.97, 0, 2);
})
.then(done);
});
Expand Down Expand Up @@ -501,21 +502,21 @@ describe('Test gl3d trace click/hover:', function() {
.then(_hover)
.then(delay(20))
.then(function() {
assertHoverText('x: 4', 'y: 5', 'z: 3.5', 'ts: 4\nhz: 5\nftt:3.5');
assertHoverText('x: 3', 'y: 4', 'z: 5', 'ts: 3\nhz: 4\nftt:5');
})
.then(function() {
return Plotly.restyle(gd, 'hoverinfo', 'x+y');
})
.then(delay(20))
.then(function() {
assertHoverText('(4, 5)');
assertHoverText('(3, 4)');
})
.then(function() {
return Plotly.restyle(gd, 'hoverinfo', 'text');
})
.then(delay(20))
.then(function() {
assertHoverText('ts: 4\nhz: 5\nftt:3.5');
assertHoverText('ts: 3\nhz: 4\nftt:5');
})
.then(function() {
return Plotly.restyle(gd, 'text', 'yo!');
Expand All @@ -531,14 +532,67 @@ describe('Test gl3d trace click/hover:', function() {
})
.then(delay(20))
.then(function() {
assertHoverText(null, null, null, 'ts: 4\nhz: 5\nftt:3.5 !!');
assertHoverText(null, null, null, 'ts: 3\nhz: 4\nftt:5 !!');
})
.then(function() {
return Plotly.restyle(gd, 'hovertemplate', '%{x}-%{y}-%{z}<extra></extra>');
})
.then(delay(20))
.then(function() {
assertHoverText(null, null, null, '4-5-3.5');
assertHoverText(null, null, null, '3-4-5');
})
.catch(failTest)
.then(done);
});

it('@gl should display correct face colors', function(done) {
var fig = mesh3dcoloringMock;

Plotly.newPlot(gd, fig)
.then(delay(20))
.then(function() { mouseEvent('mouseover', 200, 200); })
.then(delay(20))
.then(function() {
assertHoverText(
'x: 1',
'y: 0',
'z: 1',
'face color: #0F0',
'face color'
);
})
.then(function() { mouseEvent('mouseover', 300, 200); })
.then(delay(20))
.then(function() {
assertHoverText(
'x: 1',
'y: 1',
'z: 1',
'face color: #0FF',
'face color'
);
})
.then(function() { mouseEvent('mouseover', 300, 300); })
.then(delay(20))
.then(function() {
assertHoverText(
'x: 1',
'y: 1',
'z: 0',
'face color: #00F',
'face color'
);
})
.then(function() { mouseEvent('mouseover', 200, 300); })
.then(delay(20))
.then(function() {
assertHoverText(
'x: 0',
'y: 0',
'z: 0',
'face color: #000',
'face color'
);
})
.catch(failTest)
.then(done);
Expand Down
61 changes: 43 additions & 18 deletions test/jasmine/tests/isosurface_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,16 +324,27 @@ describe('Test isosurface', function() {

function _hover1() {
mouseEvent('mouseover', 200, 200);
return delay(20)();
}

function _hover2() {
mouseEvent('mouseover', 100, 100);
return delay(20)();
}

function _hover3() {
mouseEvent('mouseover', 300, 150);
return delay(20)();
}

function _hover4() {
mouseEvent('mouseover', 150, 300);
return delay(20)();
}

Plotly.plot(gd, fig)
.then(delay(20))
.then(_hover1)
.then(delay(20))
.then(function() {
assertHoverLabelContent({
nums: [
Expand All @@ -346,47 +357,61 @@ describe('Test isosurface', function() {
})
.then(delay(20))
.then(_hover2)
.then(delay(20))
.then(function() {
assertHoverLabelContent({
nums: [
'x: 0.4',
'x: 0.3',
'y: 0.001',
'z: −8',
'value: −1.28'
'z: −16',
'value: −0.27'
].join('\n')
});
})
.then(delay(20))
.then(_hover3)
.then(function() {
return Plotly.restyle(gd, 'hovertext', [
fig.data[0].value.map(function(v) { return '!! ' + v + ' !!'; })
]);
assertHoverLabelContent({
nums: [
'x: 0.2',
'y: 100μ',
'z: −16',
'value: −1.12'
].join('\n')
});
})
.then(delay(20))
.then(_hover2)
.then(_hover4)
.then(function() {
assertHoverLabelContent({
nums: [
'x: 0.4',
'y: 0.001',
'z: −8',
'value: −1.28',
'!! -1.28 !!'
'y: 100μ',
'z: −4',
'value: −1.3'
].join('\n')
});
})
.then(function() {
return Plotly.restyle(gd, 'hovertemplate', '%{value}<br>(%{x},%{y},%{z})<extra>!!</extra>');
return Plotly.restyle(gd, 'hovertext', [
fig.data[0].value.map(function(v) { return '!! ' + v + ' !!'; })
]);
})
.then(delay(20))
.then(_hover2)
.then(delay(20))
.then(_hover4)
.then(function() {
assertHoverLabelContent({
nums: '−1.28\n(0.4,0.001,−8)',
name: '!!'
nums: [
'x: 0.4',
'y: 100μ',
'z: −4',
'value: −1.3',
'!! -1.3 !!'
].join('\n')
});
})
.then(function() {
return Plotly.restyle(gd, 'hovertemplate', '%{value}<br>(%{x},%{y},%{z})<extra>!!</extra>');
})
.catch(failTest)
.then(done);
});
Expand Down
Loading