Skip to content

Commit 11fbcc0

Browse files
archmojarchmoj
authored
Merge pull request #4534 from plotly/mesh3d-hover-fix4533
Fix hover for mesh3d, isosurface and volume
2 parents 6cf8b64 + e386e5f commit 11fbcc0

File tree

7 files changed

+259
-41
lines changed

7 files changed

+259
-41
lines changed

‎package-lock.json

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
"gl-heatmap2d": "^1.0.5",
8181
"gl-line3d": "^1.1.11",
8282
"gl-mat4": "^1.2.0",
83-
"gl-mesh3d": "^2.2.0",
83+
"gl-mesh3d": "^2.2.1",
8484
"gl-plot2d": "^1.4.2",
8585
"gl-plot3d": "^2.4.0",
8686
"gl-pointcloud2d": "^1.0.2",

‎test/image/baselines/gl3d_mesh3d_coloring.png

93.3 KB
Loading

‎test/image/mocks/gl3d_mesh3d_coloring.json

+139
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
{
2+
"data": [{
3+
"showlegend": true,
4+
"x": [0, 1, 0, 1, 0, 1, 0, 1],
5+
"y": [0, 0, 1, 1, 0, 0, 1, 1],
6+
"z": [0, 0, 0, 0, 1, 1, 1, 1],
7+
"i": [0, 3, 4, 7, 0, 6, 1, 7, 0, 5, 2, 7],
8+
"j": [1, 2, 5, 6, 2, 4, 3, 5, 4, 1, 6, 3],
9+
"k": [3, 0, 7, 4, 6, 0, 7, 1, 5, 0, 7, 2],
10+
"vertexcolor": ["#000", "#00F", "#0F0", "#0FF", "#F00", "#F0F", "#FF0", "#FFF"],
11+
"hovertemplate": "x: %{x}<br>y: %{y}<br>z: %{z}<br>vertex color: %{vertexcolor}",
12+
"flatshading": true,
13+
"lightposition": { "x": 1000, "y": 1000, "z": 0 },
14+
"type": "mesh3d",
15+
"name": "vertex color",
16+
"scene": "scene1"
17+
}, {
18+
"showlegend": true,
19+
"x": [0, 1, 0, 1, 0, 1, 0, 1],
20+
"y": [0, 0, 1, 1, 0, 0, 1, 1],
21+
"z": [0, 0, 0, 0, 1, 1, 1, 1],
22+
"i": [0, 3, 4, 7, 0, 6, 1, 7, 0, 5, 2, 7],
23+
"j": [1, 2, 5, 6, 2, 4, 3, 5, 4, 1, 6, 3],
24+
"k": [3, 0, 7, 4, 6, 0, 7, 1, 5, 0, 7, 2],
25+
"facecolor": [
26+
"#000", "#000",
27+
"#00F", "#00F",
28+
"#0F0", "#0F0",
29+
"#0FF", "#0FF",
30+
"#F00", "#F00",
31+
"#F0F", "#F0F",
32+
"#FF0", "#FF0",
33+
"#FFF", "#FFF"
34+
],
35+
"hovertemplate": "x: %{x}<br>y: %{y}<br>z: %{z}<br>face color: %{facecolor}",
36+
"flatshading": true,
37+
"lightposition": { "x": 1000, "y": 1000, "z": 0 },
38+
"type": "mesh3d",
39+
"name": "face color",
40+
"scene": "scene2"
41+
}, {
42+
"showlegend": true,
43+
"x": [0, 1, 0, 1, 0, 1, 0, 1],
44+
"y": [0, 0, 1, 1, 0, 0, 1, 1],
45+
"z": [0, 0, 0, 0, 1, 1, 1, 1],
46+
"i": [0, 3, 4, 7, 0, 6, 1, 7, 0, 5, 2, 7],
47+
"j": [1, 2, 5, 6, 2, 4, 3, 5, 4, 1, 6, 3],
48+
"k": [3, 0, 7, 4, 6, 0, 7, 1, 5, 0, 7, 2],
49+
"intensity": [1, 2, 3, 4, 5, 6, 7, 8],
50+
"hovertemplate": "x: %{x}<br>y: %{y}<br>z: %{z}<br>vertex intensity: %{intensity}",
51+
"showscale": true,
52+
"colorscale": "Portland",
53+
"colorbar": {
54+
"title": "vertex<br>intensity",
55+
"len": 0.5,
56+
"y": 0,
57+
"yanchor": "bottom"
58+
},
59+
"flatshading": true,
60+
"lightposition": { "x": 1000, "y": 1000, "z": 0 },
61+
"type": "mesh3d",
62+
"name": "vertex intensity",
63+
"scene": "scene3"
64+
}, {
65+
"showlegend": true,
66+
"x": [0, 1, 0, 1, 0, 1, 0, 1],
67+
"y": [0, 0, 1, 1, 0, 0, 1, 1],
68+
"z": [0, 0, 0, 0, 1, 1, 1, 1],
69+
"i": [0, 3, 4, 7, 0, 6, 1, 7, 0, 5, 2, 7],
70+
"j": [1, 2, 5, 6, 2, 4, 3, 5, 4, 1, 6, 3],
71+
"k": [3, 0, 7, 4, 6, 0, 7, 1, 5, 0, 7, 2],
72+
"intensity": [
73+
1, 1,
74+
2, 2,
75+
3, 3,
76+
4, 4,
77+
5, 5,
78+
6, 6
79+
],
80+
"intensitymode": "cell",
81+
"hovertemplate": "x: %{x}<br>y: %{y}<br>z: %{z}<br>cell intensity: %{intensity}",
82+
"showscale": true,
83+
"colorbar": {
84+
"title": "cell<br>intensity",
85+
"len": 0.5,
86+
"y": 0.5,
87+
"yanchor": "bottom"
88+
},
89+
"flatshading": true,
90+
"lightposition": { "x": 1000, "y": 1000, "z": 0 },
91+
"type": "mesh3d",
92+
"name": "cell intensity",
93+
"scene": "scene4"
94+
}],
95+
"layout": {
96+
"width": 800,
97+
"height": 800,
98+
"legend": {
99+
"bgcolor": "#eee",
100+
"orientation": "h",
101+
"title": {
102+
"text": "<b>mesh3d with different coloring:</b>",
103+
"side": "top left"
104+
}
105+
},
106+
"scene1": {
107+
"bgcolor": "#eee",
108+
"domain": {
109+
"x": [0, 0.5],
110+
"y": [0, 0.5]
111+
},
112+
"camera": { "eye": { "x": 2, "y": -1.5, "z": 1 } }
113+
},
114+
"scene2": {
115+
"bgcolor": "#eee",
116+
"domain": {
117+
"x": [0, 0.5],
118+
"y": [0.5, 1]
119+
},
120+
"camera": { "eye": { "x": 2, "y": -1.5, "z": 1 } }
121+
},
122+
"scene3": {
123+
"bgcolor": "#eee",
124+
"domain": {
125+
"x": [0.5, 1],
126+
"y": [0, 0.5]
127+
},
128+
"camera": { "eye": { "x": 2, "y": -1.5, "z": 1 } }
129+
},
130+
"scene4": {
131+
"bgcolor": "#eee",
132+
"domain": {
133+
"x": [0.5, 1],
134+
"y": [0.5, 1]
135+
},
136+
"camera": { "eye": { "x": 2, "y": -1.5, "z": 1 } }
137+
}
138+
}
139+
}

‎test/jasmine/tests/gl3d_hover_click_test.js

+60-6
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ var assertHoverLabelStyle = customAssertions.assertHoverLabelStyle;
1313
var assertHoverLabelContent = customAssertions.assertHoverLabelContent;
1414

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

1819
// lines, markers, text, error bars and surfaces each
@@ -466,7 +467,7 @@ describe('Test gl3d trace click/hover:', function() {
466467
.then(_click)
467468
.then(delay(20))
468469
.then(function() {
469-
assertEventData(134.03, -163.59, -163.59, 0, 3);
470+
assertEventData(140.72, -96.97, -96.97, 0, 2);
470471
})
471472
.then(done);
472473
});
@@ -501,21 +502,21 @@ describe('Test gl3d trace click/hover:', function() {
501502
.then(_hover)
502503
.then(delay(20))
503504
.then(function() {
504-
assertHoverText('x: 4', 'y: 5', 'z: 3.5', 'ts: 4\nhz: 5\nftt:3.5');
505+
assertHoverText('x: 3', 'y: 4', 'z: 5', 'ts: 3\nhz: 4\nftt:5');
505506
})
506507
.then(function() {
507508
return Plotly.restyle(gd, 'hoverinfo', 'x+y');
508509
})
509510
.then(delay(20))
510511
.then(function() {
511-
assertHoverText('(4, 5)');
512+
assertHoverText('(3, 4)');
512513
})
513514
.then(function() {
514515
return Plotly.restyle(gd, 'hoverinfo', 'text');
515516
})
516517
.then(delay(20))
517518
.then(function() {
518-
assertHoverText('ts: 4\nhz: 5\nftt:3.5');
519+
assertHoverText('ts: 3\nhz: 4\nftt:5');
519520
})
520521
.then(function() {
521522
return Plotly.restyle(gd, 'text', 'yo!');
@@ -531,14 +532,67 @@ describe('Test gl3d trace click/hover:', function() {
531532
})
532533
.then(delay(20))
533534
.then(function() {
534-
assertHoverText(null, null, null, 'ts: 4\nhz: 5\nftt:3.5 !!');
535+
assertHoverText(null, null, null, 'ts: 3\nhz: 4\nftt:5 !!');
535536
})
536537
.then(function() {
537538
return Plotly.restyle(gd, 'hovertemplate', '%{x}-%{y}-%{z}<extra></extra>');
538539
})
539540
.then(delay(20))
540541
.then(function() {
541-
assertHoverText(null, null, null, '4-5-3.5');
542+
assertHoverText(null, null, null, '3-4-5');
543+
})
544+
.catch(failTest)
545+
.then(done);
546+
});
547+
548+
it('@gl should display correct face colors', function(done) {
549+
var fig = mesh3dcoloringMock;
550+
551+
Plotly.newPlot(gd, fig)
552+
.then(delay(20))
553+
.then(function() { mouseEvent('mouseover', 200, 200); })
554+
.then(delay(20))
555+
.then(function() {
556+
assertHoverText(
557+
'x: 1',
558+
'y: 0',
559+
'z: 1',
560+
'face color: #0F0',
561+
'face color'
562+
);
563+
})
564+
.then(function() { mouseEvent('mouseover', 300, 200); })
565+
.then(delay(20))
566+
.then(function() {
567+
assertHoverText(
568+
'x: 1',
569+
'y: 1',
570+
'z: 1',
571+
'face color: #0FF',
572+
'face color'
573+
);
574+
})
575+
.then(function() { mouseEvent('mouseover', 300, 300); })
576+
.then(delay(20))
577+
.then(function() {
578+
assertHoverText(
579+
'x: 1',
580+
'y: 1',
581+
'z: 0',
582+
'face color: #00F',
583+
'face color'
584+
);
585+
})
586+
.then(function() { mouseEvent('mouseover', 200, 300); })
587+
.then(delay(20))
588+
.then(function() {
589+
assertHoverText(
590+
'x: 0',
591+
'y: 0',
592+
'z: 0',
593+
'face color: #000',
594+
'face color'
595+
);
542596
})
543597
.catch(failTest)
544598
.then(done);

‎test/jasmine/tests/isosurface_test.js

+43-18
Original file line numberDiff line numberDiff line change
@@ -324,16 +324,27 @@ describe('Test isosurface', function() {
324324

325325
function _hover1() {
326326
mouseEvent('mouseover', 200, 200);
327+
return delay(20)();
327328
}
328329

329330
function _hover2() {
330331
mouseEvent('mouseover', 100, 100);
332+
return delay(20)();
333+
}
334+
335+
function _hover3() {
336+
mouseEvent('mouseover', 300, 150);
337+
return delay(20)();
338+
}
339+
340+
function _hover4() {
341+
mouseEvent('mouseover', 150, 300);
342+
return delay(20)();
331343
}
332344

333345
Plotly.plot(gd, fig)
334346
.then(delay(20))
335347
.then(_hover1)
336-
.then(delay(20))
337348
.then(function() {
338349
assertHoverLabelContent({
339350
nums: [
@@ -346,47 +357,61 @@ describe('Test isosurface', function() {
346357
})
347358
.then(delay(20))
348359
.then(_hover2)
349-
.then(delay(20))
350360
.then(function() {
351361
assertHoverLabelContent({
352362
nums: [
353-
'x: 0.4',
363+
'x: 0.3',
354364
'y: 0.001',
355-
'z: −8',
356-
'value: −1.28'
365+
'z: −16',
366+
'value: −0.27'
357367
].join('\n')
358368
});
359369
})
370+
.then(delay(20))
371+
.then(_hover3)
360372
.then(function() {
361-
return Plotly.restyle(gd, 'hovertext', [
362-
fig.data[0].value.map(function(v) { return '!! ' + v + ' !!'; })
363-
]);
373+
assertHoverLabelContent({
374+
nums: [
375+
'x: 0.2',
376+
'y: 100μ',
377+
'z: −16',
378+
'value: −1.12'
379+
].join('\n')
380+
});
364381
})
365382
.then(delay(20))
366-
.then(_hover2)
383+
.then(_hover4)
367384
.then(function() {
368385
assertHoverLabelContent({
369386
nums: [
370387
'x: 0.4',
371-
'y: 0.001',
372-
'z: −8',
373-
'value: −1.28',
374-
'!! -1.28 !!'
388+
'y: 100μ',
389+
'z: −4',
390+
'value: −1.3'
375391
].join('\n')
376392
});
377393
})
378394
.then(function() {
379-
return Plotly.restyle(gd, 'hovertemplate', '%{value}<br>(%{x},%{y},%{z})<extra>!!</extra>');
395+
return Plotly.restyle(gd, 'hovertext', [
396+
fig.data[0].value.map(function(v) { return '!! ' + v + ' !!'; })
397+
]);
380398
})
381399
.then(delay(20))
382-
.then(_hover2)
383-
.then(delay(20))
400+
.then(_hover4)
384401
.then(function() {
385402
assertHoverLabelContent({
386-
nums: '−1.28\n(0.4,0.001,−8)',
387-
name: '!!'
403+
nums: [
404+
'x: 0.4',
405+
'y: 100μ',
406+
'z: −4',
407+
'value: −1.3',
408+
'!! -1.3 !!'
409+
].join('\n')
388410
});
389411
})
412+
.then(function() {
413+
return Plotly.restyle(gd, 'hovertemplate', '%{value}<br>(%{x},%{y},%{z})<extra>!!</extra>');
414+
})
390415
.catch(failTest)
391416
.then(done);
392417
});

0 commit comments

Comments
 (0)