Add showEditInChartStudio config option

build/ploticon.js

@@ -121,6 +121,12 @@ module.exports = {
         'path': 'M512 409c0-57-46-104-103-104-57 0-104 47-104 104 0 57 47 103 104 103 57 0 103-46 103-103z m-327-39l92 0 0 92-92 0z m-185 0l92 0 0 92-92 0z m370-186l92 0 0 93-92 0z m0-184l92 0 0 92-92 0z',
         'transform': 'matrix(1.5 0 0 -1.5 0 850)'
     },
+    'pencil': {
+        'width': 1792,
+        'height': 1792,
+        'path': 'M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z',
+        'transform': 'matrix(1 0 0 1 0 1)'
+    },
     'newplotlylogo': {
         'name': 'newplotlylogo',
         'svg': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 132 132\'><defs><style>.cls-1 {fill: #119dff;} .cls-2 {fill: #25fefd;} .cls-3 {fill: #fff;}</style></defs><title>plotly-logomark</title><g id=\'symbol\'><rect class=\'cls-1\' width=\'132\' height=\'132\' rx=\'6\' ry=\'6\'/><circle class=\'cls-2\' cx=\'78\' cy=\'54\' r=\'6\'/><circle class=\'cls-2\' cx=\'102\' cy=\'30\' r=\'6\'/><circle class=\'cls-2\' cx=\'78\' cy=\'30\' r=\'6\'/><circle class=\'cls-2\' cx=\'54\' cy=\'30\' r=\'6\'/><circle class=\'cls-2\' cx=\'30\' cy=\'30\' r=\'6\'/><circle class=\'cls-2\' cx=\'30\' cy=\'54\' r=\'6\'/><path class=\'cls-3\' d=\'M30,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,30,72Z\'/><path class=\'cls-3\' d=\'M78,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,78,72Z\'/><path class=\'cls-3\' d=\'M54,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,54,48Z\'/><path class=\'cls-3\' d=\'M102,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,102,48Z\'/></g></svg>'

src/components/modebar/buttons.js

@@ -89,6 +89,15 @@ modeBarButtons.sendDataToCloud = {
     }
 };
 
+modeBarButtons.editInChartStudio = {
+    name: 'editInChartStudio',
+    title: function(gd) { return _(gd, 'Edit in Chart Studio'); },
+    icon: Icons.pencil,
+    click: function(gd) {
+        Plots.sendDataToCloud(gd);
+    }
+};
+
 modeBarButtons.zoom2d = {
     name: 'zoom2d',
     title: function(gd) { return _(gd, 'Zoom'); },

src/components/modebar/manage.js

@@ -59,22 +59,20 @@ module.exports = function manageModeBar(gd) {
     } else if(!context.displayModeBar && context.watermark) {
         buttonGroups = [];
     } else {
-        buttonGroups = getButtonGroups(
-            gd,
-            context.modeBarButtonsToRemove,
-            context.modeBarButtonsToAdd,
-            context.showSendToCloud
-        );
+        buttonGroups = getButtonGroups(gd);
     }
 
     if(modeBar) modeBar.update(gd, buttonGroups);
     else fullLayout._modeBar = createModeBar(gd, buttonGroups);
 };
 
 // logic behind which buttons are displayed by default
-function getButtonGroups(gd, buttonsToRemove, buttonsToAdd, showSendToCloud) {
+function getButtonGroups(gd) {
     var fullLayout = gd._fullLayout;
     var fullData = gd._fullData;
+    var context = gd._context;
+    var buttonsToRemove = context.modeBarButtonsToRemove;
+    var buttonsToAdd = context.modeBarButtonsToAdd;
 
     var hasCartesian = fullLayout._has('cartesian');
     var hasGL3D = fullLayout._has('gl3d');
@@ -106,7 +104,8 @@ function getButtonGroups(gd, buttonsToRemove, buttonsToAdd, showSendToCloud) {
 
     // buttons common to all plot types
     var commonGroup = ['toImage'];
-    if(showSendToCloud) commonGroup.push('sendDataToCloud');
+    if(context.showEditInChartStudio) commonGroup.push('editInChartStudio');
+    else if(context.showSendToCloud) commonGroup.push('sendDataToCloud');
     addGroup(commonGroup);
 
     var zoomGroup = [];

src/plot_api/plot_config.js

@@ -257,6 +257,15 @@ var configAttributes = {
             'until you arrive at the Chart Studio and explicitly click "Save".'
         ].join(' ')
     },
+    showEditInChartStudio: {
+        valType: 'boolean',
+        dflt: false,
+        description: [
+            'Same as `showSendToCloud`, but use a pencil icon instead of a floppy-disk.',
+            'Note that if both `showSendToCloud` and `showEditInChartStudio` are turned,',
+            'only `showEditInChartStudio` will be honored.'
+        ].join(' ')
+    },
     modeBarButtonsToRemove: {
         valType: 'any',
         dflt: [],

tasks/util/pull_font_svg.js

@@ -16,13 +16,23 @@ module.exports = function pullFontSVG(data, pathOut) {
 
         fontObj.glyph.forEach(function(glyph) {
             var name = glyph.$['glyph-name'];
-            var transform = name === 'spikeline' ?
-                'matrix(1.5 0 0 -1.5 0 ' + ascent + ')' :
-                'matrix(1 0 0 -1 0 ' + ascent + ')';
+            var transform;
+
+            switch(name) {
+                case 'spikeline':
+                    transform = 'matrix(1.5 0 0 -1.5 0 ' + ascent + ')';
+                    break;
+                case 'pencil':
+                    transform = 'matrix(1 0 0 1 0 1)';
+                    break;
+                default:
+                    transform = 'matrix(1 0 0 -1 0 ' + ascent + ')';
+                    break;
+            }
 
             chars[name] = {
                 width: Number(glyph.$['horiz-adv-x']) || defaultWidth,
-                height: ascent - descent,
+                height: Number(glyph.$['vert-adv-y']) || ascent - descent,
                 path: glyph.$.d,
                 transform: transform,
             };

test/jasmine/tests/modebar_test.js

@@ -52,6 +52,7 @@ describe('ModeBar', function() {
             _context: {
                 displaylogo: true,
                 showSendToCloud: false,
+                showEditInChartStudio: false,
                 displayModeBar: true,
                 modeBarButtonsToRemove: [],
                 modeBarButtonsToAdd: [],
@@ -804,7 +805,7 @@ describe('ModeBar', function() {
             expect(countLogo(gd._fullLayout._modeBar)).toEqual(0);
         });
 
-        it('displays/hides cloud link according to showSendToCloud config arg', function() {
+        it('displays/hides cloud link according to showSendToCloud and/or showEditInChartStudio config arg', function() {
             var gd = getMockGraphInfo();
             gd._fullLayout._basePlotModules = [{ name: 'pie' }];
             gd._fullData = [{type: 'pie'}];
@@ -815,11 +816,28 @@ describe('ModeBar', function() {
             ]), 1);
 
             gd._context.showSendToCloud = true;
+            gd._context.showEditInChartStudio = false;
             manageModeBar(gd);
             checkButtons(gd._fullLayout._modeBar, getButtons([
                 ['toImage', 'sendDataToCloud'],
                 ['hoverClosestPie']
             ]), 1);
+
+            gd._context.showSendToCloud = false;
+            gd._context.showEditInChartStudio = true;
+            manageModeBar(gd);
+            checkButtons(gd._fullLayout._modeBar, getButtons([
+                ['toImage', 'editInChartStudio'],
+                ['hoverClosestPie']
+            ]), 1);
+
+            gd._context.showSendToCloud = true;
+            gd._context.showEditInChartStudio = true;
+            manageModeBar(gd);
+            checkButtons(gd._fullLayout._modeBar, getButtons([
+                ['toImage', 'editInChartStudio'],
+                ['hoverClosestPie']
+            ]), 1);
         });
 
         it('always displays the logo if watermark config arg is true', function() {