fall back to plot subtitle if title is not suitable for filename

Author: emilykl

src/snapshot/download.js

@@ -8,6 +8,13 @@ var toImage = require('../plot_api/to_image');
 var fileSaver = require('./filesaver');
 var helpers = require('./helpers');
 
+// Maximum length of filename (without extension) when deriving filename from plot title.
+// 40 is somewhat arbitrary, just trying to strike a balance between being informative
+// while still generating a reasonable-length filename.
+// Technically, this is actually the number of code points rather than characters, which only differs
+// from character count in the case of certain emojis or special characters containing multiple code points
+const MAX_FILENAME_LENGTH_CHARS = 40;
+
 /**
  * Plotly.downloadImage
  *
@@ -30,7 +37,7 @@ function downloadImage(gd, opts) {
 
     return new Promise(function(resolve, reject) {
         if(_gd && _gd._snapshotInProgress) {
-            reject(new Error('Snapshotting already in progress.'));
+            reject(new Error('Image capture already in progress.'));
         }
 
         if(_gd) _gd._snapshotInProgress = true;
@@ -41,8 +48,14 @@ function downloadImage(gd, opts) {
             const plotTitle = helpers.getPlotTitle(gd);
             // Trying to slugify a LaTeX string can result in weird ugly filenames,
             // so ignore the title entirely if it contains LaTeX markup
-            if (!svgTextUtils.matchTex(plotTitle)) {
-                potentialFilename = Lib.slugify(plotTitle, 40);
+            if (plotTitle && !svgTextUtils.matchTex(plotTitle)) {
+                potentialFilename = Lib.slugify(plotTitle, MAX_FILENAME_LENGTH_CHARS);
+            } else {
+                // If the title is empty or contains LaTeX, fall back to subtitle
+                const plotSubtitle = helpers.getPlotSubtitle(gd);
+                if (plotSubtitle && !svgTextUtils.matchTex(plotSubtitle)) {
+                    potentialFilename = Lib.slugify(plotSubtitle, MAX_FILENAME_LENGTH_CHARS);
+                }
             }
         }
 

src/snapshot/helpers.js

@@ -68,6 +68,18 @@ exports.getPlotTitle = function(gd) {
     return gd.layout?.title?.text;
 };
 
+/**
+ * Get the resolved plot subtitle, or undefined if there is none.
+ */
+exports.getPlotSubtitle = function(gd) {
+    var fullLayout = gd._fullLayout;
+    if(fullLayout) {
+        var subtitle = fullLayout.title?.subtitle?.text;
+        return subtitle === fullLayout._dfltTitle?.subtitle ? undefined : subtitle;
+    }
+    return gd.layout?.title?.subtitle?.text;
+};
+
 // Taken from https://bl.ocks.org/nolanlawson/0eac306e4dac2114c752
 function fixBinary(b) {
     var len = b.length;

test/jasmine/tests/download_test.js

@@ -128,7 +128,28 @@ describe('Plotly.downloadImage', function() {
             .then(done, done.fail);
         }, LONG_TIMEOUT_INTERVAL);
 
-        it('falls back to plot-image as filename when there is no title', function(done) {
+        it('falls back to subtitle when title contains MathJax', function(done) {
+            downloadDefault({
+                title: {
+                    text: '$Ax^2 + bx + c$',
+                    subtitle: {text: 'Quadratic Equation'}
+                },
+            })
+            .then(function(filename) {
+                expect(filename).toBe('quadratic-equation.png');
+            })
+            .then(done, done.fail);
+        }, LONG_TIMEOUT_INTERVAL);
+
+        it('falls back to plot-image as filename when title contains MathJax and there is no subtitle', function(done) {
+            downloadDefault({title: {text: '$Ax^2 + bx + c$'}})
+            .then(function(filename) {
+                expect(filename).toBe('plot-image.png');
+            })
+            .then(done, done.fail);
+        }, LONG_TIMEOUT_INTERVAL);
+
+        it('falls back to plot-image as filename when there is no title or subtitle', function(done) {
             downloadDefault({})
             .then(function(filename) {
                 expect(filename).toBe('plot-image.png');