Merge pull request #1788 from plotly/annotations-mathjax

fix and test annotations with mathjax

Author: alexcjohnson

src/components/annotations/draw.js

@@ -237,7 +237,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
         // at the end, even if their position changes
         annText.selectAll('tspan.line').attr({y: 0, x: 0});
 
-        var mathjaxGroup = annTextGroupInner.select('.annotation-math-group');
+        var mathjaxGroup = annTextGroupInner.select('.annotation-text-math-group');
         var hasMathjax = !mathjaxGroup.empty();
         var anntextBB = Drawing.bBox(
                 (hasMathjax ? mathjaxGroup : annText).node());

src/lib/svg_text_utils.js

@@ -30,7 +30,10 @@ exports.convertToTspans = function(_context, gd, _callback) {
 
     // Until we get tex integrated more fully (so it can be used along with non-tex)
     // allow some elements to prohibit it by attaching 'data-notex' to the original
-    var tex = (!_context.attr('data-notex')) && str.match(FIND_TEX);
+    var tex = (!_context.attr('data-notex')) &&
+        (typeof MathJax !== 'undefined') &&
+        str.match(FIND_TEX);
+
     var parent = d3.select(_context.node().parentNode);
     if(parent.empty()) return;
     var svgClass = (_context.attr('class')) ? _context.attr('class').split(' ')[0] : 'text';

src/plots/cartesian/dragbox.js

@@ -22,6 +22,8 @@ var setCursor = require('../../lib/setcursor');
 var dragElement = require('../../components/dragelement');
 var FROM_TL = require('../../constants/alignment').FROM_TL;
 
+var Plots = require('../plots');
+
 var doTicks = require('./axes').doTicks;
 var getFromId = require('./axis_ids').getFromId;
 var prepSelect = require('./select');
@@ -655,7 +657,13 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
         // be repositioning the data in the relayout. But DON'T call
         // ticksAndAnnotations again - it's unnecessary and would overwrite `updates`
         updateSubplots([0, 0, pw, ph]);
-        Plotly.relayout(gd, updates);
+
+        // since we may have been redrawing some things during the drag, we may have
+        // accumulated MathJax promises - wait for them before we relayout.
+        Lib.syncOrAsync([
+            Plots.previousPromises,
+            function() { Plotly.relayout(gd, updates); }
+        ], gd);
     }
 
     // updateSubplots - find all plot viewboxes that should be

test/jasmine/tests/annotations_test.js

@@ -159,6 +159,12 @@ describe('annotations relayout', function() {
         var mockData = Lib.extendDeep([], mock.data),
             mockLayout = Lib.extendDeep({}, mock.layout);
 
+        // insert some MathJax text - to make sure we fall back correctly
+        // when MathJax is not provided (as is the case in our normal
+        // jasmine test suite)
+        expect(typeof MathJax).toBe('undefined');
+        mockLayout.annotations[14].text = '$x+y+z$';
+
         Plotly.plot(gd, mockData, mockLayout).then(done);
 
         spyOn(Loggers, 'warn');