Merge pull request #4459 from plotly/plotly-config-showSources

Improve Plotly.plot config setup

Author: etpinard

shelly/plotlyjs/static/plotlyjs/src/addons/show_sources.js

@@ -0,0 +1,206 @@
+'use strict';
+
+/* global $:false */
+/* global pullf: false */
+
+// TODO remove jQuery dependency
+
+var Plotly = require('../plotly');
+var d3 = require('d3');
+var isNumeric = require('../isnumeric');
+
+function showSources(td) {
+    if(td._context && td._context.staticPlot) return;
+    // show the sources of data in the active tab
+    var allsources = td.sourcelist;
+    if(!allsources) {
+        getSources(td);
+        return;
+    }
+    var container = d3.select(td).select('.js-sourcelinks'),
+        extsources = allsources.filter(function(v){
+            return isNumeric(v.ref_fid);
+        }),
+        firstsource = extsources[0] || allsources[0];
+    container.text('');
+    td.shouldshowsources = false;
+    // no sources at all? quit
+    if(!firstsource) return;
+
+    // find number of unique internal and external sources
+    var extobj = {}, plotlyobj = {};
+    extsources.forEach(function(v){ extobj[v.url] = 1; });
+    allsources.forEach(function(v){
+        if(!isNumeric(v.ref_fid)) plotlyobj[v.ref_fid] = 1;
+    });
+
+    var fidparts = String(firstsource.ref_fid).split(':'),
+        isplot = Plotly.Lib.isPlotDiv(td),
+        workspace = !isplot || td._context.workspace,
+        mainlink,
+        extraslink;
+
+    if(isplot) { // svg version for plots
+        // only sources from the same user? also quit, if we're on a plot
+        var thisuser = firstsource.fid.split(':')[0];
+        if(allsources.every(function(v){
+                return String(v.ref_fid).split(':')[0]===thisuser;
+            })) {
+            return;
+        }
+        td.shouldshowsources = true;
+
+        /**
+         * in case someone REALLY doesn't want to show sources
+         * they can hide them...
+         * but you can always see them by going to the grid
+         */
+        if(td.layout.hidesources) return;
+        container.append('tspan').text('Source: ');
+        mainlink = container.append('a').attr({'xlink:xlink:href':'#'});
+        if(isNumeric(firstsource.ref_fid)) {
+            mainlink.attr({
+                'xlink:xlink:show':'new',
+                'xlink:xlink:href':firstsource.ref_url
+            });
+        }
+        else if(!workspace){
+            mainlink.attr({
+                'xlink:xlink:show':'new',
+                'xlink:xlink:href':'/'+fidparts[1]+'/~'+fidparts[0]
+            });
+        }
+
+        if(allsources.length>1) {
+            container.append('tspan').text(' - ');
+            extraslink = container.append('a')
+                .attr({'xlink:xlink:href':'#'});
+        }
+    }
+    else { // html version for grids (and scripts?)
+        if(!container.node()) {
+            container = d3.select(td).select('.grid-container')
+                .append('div')
+                    .attr('class', 'grid-sourcelinks js-sourcelinks');
+        }
+        container.append('span').text('Source: ');
+        mainlink = container.append('a').attr({
+            'href':'#',
+            'class': 'link--impt'
+        });
+        if(isNumeric(firstsource.ref_fid)) {
+            mainlink.attr({
+                'target':'_blank',
+                'href':firstsource.ref_url
+            });
+        }
+
+        if(allsources.length>1) {
+            container.append('span').text(' - ');
+            extraslink = container.append('a')
+                .attr({href: '#'})
+                .classed('link--impt', true);
+        }
+    }
+
+    mainlink.text(firstsource.ref_filename);
+
+    function pullSource(){
+        pullf({fid: firstsource.ref_fid});
+        return false;
+    }
+
+    function fullSourcing(){
+        var sourceModal = $('#sourceModal'),
+            sourceViewer = sourceModal.find('#source-viewer').empty();
+
+        sourceViewer.data('jsontree', '')
+            .jsontree(JSON.stringify(sourceObj),
+                {terminators: false, collapsibleOuter: false})
+            .show();
+        if(workspace) {
+            sourceModal.find('[data-fid]').click(function(){
+                sourceModal.modal('hide');
+                pullf({fid:$(this).attr('data-fid')});
+                return false;
+            });
+        }
+        else {
+            sourceModal.find('[data-fid]').each(function(){
+                fidparts = $(this).attr('data-fid').split(':');
+                $(this).attr({href:'/~'+fidparts[0]+'/'+fidparts[1]});
+            });
+            if(window.self !== window.top) {
+                // in an iframe: basically fill the frame
+                sourceModal.css({
+                    left: '10px',
+                    right: '10px',
+                    bottom: '10px',
+                    width: 'auto',
+                    height: 'auto',
+                    margin: 0
+                });
+            }
+        }
+        sourceModal.modal('show');
+
+        sourceModal.find('.close')
+            .off('click')
+            .on('click', function(){
+                sourceModal.modal('hide');
+                return false;
+            });
+        return false;
+    }
+
+    if(!isplot || workspace) mainlink.on('click', pullSource);
+
+    if(extraslink) extraslink.text('Full list').on('click', fullSourcing);
+
+    function makeSourceObj(container, refByUid) {
+        if(cnt < 0) {
+            console.log('infinite loop?');
+            return container;
+        }
+        cnt--;
+
+        allsources.forEach(function(src){
+            if(src.ref_by_uid === refByUid) {
+                var linkval;
+                if(isNumeric(src.ref_fid)) {
+                    linkval = '<a href="' + src.ref_url + '" target="_blank">' +
+                        src.ref_filename + '</a>';
+                }
+                else {
+                    var refUser = src.ref_fid.split(':')[0],
+                        fn = (refUser !== window.user ? refUser + ': ' : '') +
+                            src.ref_filename;
+                    linkval = '<a href="#" data-fid="' + src.ref_fid + '">'+
+                        fn + '</a>';
+                }
+                container[linkval] = makeSourceObj({}, src.uid);
+            }
+        });
+        return container;
+    }
+
+    var cnt = allsources.length,
+        sourceObj = makeSourceObj({}, null);
+}
+
+function getSources(td) {
+    var extrarefs = (td.ref_fids || []).join(',');
+    if(!td.fid && !extrarefs) return;
+    if(!window.PLOTLYENV || !window.PLOTLYENV.DOMAIN_WEBAPP) return;
+
+    $.get('/getsources', {fid: td.fid, extrarefs:extrarefs}, function(res) {
+        td.sourcelist = JSON.parse(res);
+        if(!Array.isArray(td.sourcelist)) {
+            console.log('sourcelist error',td.sourcelist);
+            td.sourcelist = [];
+        }
+        showSources(td);
+    });
+}
+
+module.exports = showSources;

shelly/plotlyjs/static/plotlyjs/src/config.js renamed to shelly/plotlyjs/static/plotlyjs/src/fonts/mathjax_config.js

@@ -1,10 +1,8 @@
 'use strict';
-/* jshint camelcase: false */
 
 // ---external global dependencies
 /* global Promise:false */
 
-
 var Plotly = require('./plotly'),
     d3 = require('d3'),
     m4FromQuat = require('gl-mat4/fromQuat'),
@@ -241,63 +239,13 @@ plots.redrawText = function(gd) {
     });
 };
 
-// where and how the background gets set can be overridden by context
-// so we define the default (plotlyjs) behavior here
-function defaultSetBackground(gd, bgColor) {
-    try {
-        gd._fullLayout._paper.style('background', bgColor);
-    }
-    catch(e) { console.log(e); }
-}
-
 function opaqueSetBackground(gd, bgColor) {
     gd._fullLayout._paperdiv.style('background', 'white');
-    defaultSetBackground(gd, bgColor);
+    Plotly.defaultConfig.setBackground(gd, bgColor);
 }
 
-// this will be transfered over to gd and overridden by
-// config args to Plotly.plot
-// the defaults are the appropriate settings for plotly.js,
-// so we get the right experience without any config argument
-plots.defaultConfig = {
-    // no interactivity, for export or image generation
-    staticPlot: false,
-    // we're in the workspace, so need toolbar etc
-    // TODO describe functionality instead?
-    workspace: false,
-    // we can edit titles, move annotations, etc
-    editable: false,
-    // plot will respect layout.autosize=true and infer its container size
-    autosizable: false,
-    // if we DO autosize, do we fill the container or the screen?
-    fillFrame: false,
-    // if we DO autosize, set the frame margins in percents of plot size
-    frameMargins: 0,
-    // mousewheel or two-finger scroll zooms the plot
-    scrollZoom: false,
-    // double click interaction (false, 'reset', 'autosize' or 'reset+autosize')
-    doubleClick: 'reset+autosize',
-    // new users see some hints about interactivity
-    showTips: true,
-    // link to open this plot in plotly
-    showLink: true,
-    // if we show a link, does it contain data or just link to a plotly file?
-    sendData: true,
-    // text appearing in the sendData link
-    linkText: 'Edit chart',
-    // display the modebar (true, false, or 'hover')
-    displayModeBar: 'hover',
-    // add the plotly logo on the end of the modebar
-    displaylogo: true,
-    // increase the pixel ratio for Gl plot images
-    plotGlPixelRatio: 2,
-    // fn to add the background color to a different container
-    // or 'opaque' to ensure there's white behind it
-    setBackground: defaultSetBackground
-};
-
 function setPlotContext(gd, config) {
-    if(!gd._context) gd._context = Plotly.Lib.extendFlat({}, plots.defaultConfig);
+    if(!gd._context) gd._context = Plotly.Lib.extendFlat({}, Plotly.defaultConfig);
     var context = gd._context;
 
     if(config) {
@@ -323,7 +271,6 @@ function setPlotContext(gd, config) {
 
     //staticPlot forces a bunch of others:
     if(context.staticPlot) {
-        context.workspace = false;
         context.editable = false;
         context.autosizable = false;
         context.scrollZoom = false;
@@ -334,14 +281,20 @@ function setPlotContext(gd, config) {
     }
 }
 
-// the 'view in plotly' and source links - note that now plot() calls this
-// so it can regenerate whenever it replots
+/**
+ * Adds the 'Edit chart' link.
+ * Note that now Plotly.plot() calls this so it can regenerate whenever it replots
+ *
+ * Add source links to your graph inside the 'showSources' config argument.
+ */
 plots.addLinks = function(gd) {
     var fullLayout = gd._fullLayout;
-    var linkContainer = fullLayout._paper.selectAll('text.js-plot-link-container').data([0]);
+
+    var linkContainer = fullLayout._paper
+        .selectAll('text.js-plot-link-container').data([0]);
 
     linkContainer.enter().append('text')
-        .classed('js-plot-link-container',true)
+        .classed('js-plot-link-container', true)
         .style({
             'font-family':'"Open Sans",Arial,sans-serif',
             'font-size':'12px',
@@ -350,9 +303,9 @@ plots.addLinks = function(gd) {
         })
         .each(function(){
             var links = d3.select(this);
-            links.append('tspan').classed('js-link-to-tool',true);
-            links.append('tspan').classed('js-link-spacer',true);
-            links.append('tspan').classed('js-sourcelinks',true);
+            links.append('tspan').classed('js-link-to-tool', true);
+            links.append('tspan').classed('js-link-spacer', true);
+            links.append('tspan').classed('js-sourcelinks', true);
         });
 
     // The text node inside svg
@@ -371,24 +324,23 @@ plots.addLinks = function(gd) {
         // Align the text at the left
         attrs['text-anchor'] = 'start';
         attrs.x = 5;
-    } else {
+    }
+    else {
         // Align the text at the right
         attrs['text-anchor'] = 'end';
         attrs.x = fullLayout._paper.attr('width') - 7;
     }
 
     linkContainer.attr(attrs);
 
-
     var toolspan = linkContainer.select('.js-link-to-tool'),
         spacespan = linkContainer.select('.js-link-spacer'),
         sourcespan = linkContainer.select('.js-sourcelinks');
 
-    // data source links
-    Plotly.Lib.showSources(gd);
+    if(gd._context.showSources) gd._context.showSources(gd);
 
     // 'view in plotly' link for embedded plots
-    if(gd._context.showLink) positionPlayWithData(gd,toolspan);
+    if(gd._context.showLink) positionPlayWithData(gd, toolspan);
 
     // separator if we have both sources and tool link
     spacespan.text((toolspan.text() && sourcespan.text()) ? ' - ' : '');