Expose Plotly.purge method

devtools/test_dashboard/buttons.js

@@ -2,7 +2,7 @@
 
 var Lib = require('@src/lib');
 
-var plotlist = document.getElementById('plot-list');
+var plotList = document.getElementById('plot-list');
 var anchor = document.getElementById('embedded-graph');
 var image = document.getElementById('embedded-image');
 
@@ -14,31 +14,27 @@ anchor.style.height = '600px';
 anchor.style.width = '1000px';
 
 function plotButtons(plots, figDir) {
-
     Object.keys(plots).forEach(function(plotname) {
-
         var button = document.createElement('button');
 
         button.style.cssFloat = 'left';
         button.style.width = '100px';
         button.style.height = '40px';
-
         button.innerHTML = plotname;
 
-        plotlist.appendChild(button);
+        plotList.appendChild(button);
 
         button.addEventListener('click', function() {
-
             var myImage = new Image();
             myImage.src = figDir + plotname + '.png';
 
             image.innerHTML = '';
             image.appendChild(myImage);
 
+            gd = document.createElement('div');
+            gd.id = 'graph';
 
             anchor.innerHTML = '';
-
-            gd = document.createElement('div');
             anchor.appendChild(gd);
 
             var plot = plots[plotname];
@@ -58,7 +54,7 @@ function plotButtons(plots, figDir) {
     snapshot.innerHTML = 'snapshot';
     snapshot.style.background = 'blue';
 
-    plotlist.appendChild(snapshot);
+    plotList.appendChild(snapshot);
 
     snapshot.addEventListener('click', function() {
 
@@ -111,7 +107,7 @@ function plotButtons(plots, figDir) {
     pummelButton.style.marginLeft = '25px';
     pummelButton.innerHTML = 'pummel3d';
     pummelButton.style.background = 'blue';
-    plotlist.appendChild(pummelButton);
+    plotList.appendChild(pummelButton);
 
     var i = 0;
     var mock = require('@mocks/gl3d_marker-color.json');
@@ -147,7 +143,7 @@ function plotButtons(plots, figDir) {
     scrapeButton.style.marginLeft = '25px';
     scrapeButton.innerHTML = 'scrape SVG';
     scrapeButton.style.background = 'blue';
-    plotlist.appendChild(scrapeButton);
+    plotList.appendChild(scrapeButton);
 
     scrapeButton.addEventListener('click', function() {
         Plotly.Snapshot.toSVG(Tabs.get());

devtools/test_dashboard/index.html

@@ -27,6 +27,7 @@
         getGraph: function() {
             return document.getElementById('embedded-graph').children[0];
         },
+
         fresh: function() {
             var anchor = document.getElementById('embedded-graph'),
                 graphDiv = Tabs.getGraph();
@@ -37,6 +38,7 @@
 
             return graphDiv;
         },
+
         plotMock: function(mockName) {
             var mockURL = '../../test/image/mocks/' + mockName + '.json';
 

src/core.js

@@ -28,6 +28,7 @@ exports.prependTraces = Plotly.prependTraces;
 exports.addTraces = Plotly.addTraces;
 exports.deleteTraces = Plotly.deleteTraces;
 exports.moveTraces = Plotly.moveTraces;
+exports.purge = Plotly.purge;
 exports.setPlotConfig = require('./plot_api/set_plot_config');
 exports.register = Plotly.register;
 

src/plot_api/plot_api.js

@@ -2394,6 +2394,26 @@ Plotly.relayout = function relayout(gd, astr, val) {
     });
 };
 
+Plotly.purge = function purge(gd) {
+    gd = getGraphDiv(gd);
+
+    var fullLayout = gd._fullLayout || {},
+        fullData = gd._fullData || [];
+
+    // remove gl contexts
+    Plots.cleanPlot([], {}, fullData, fullLayout);
+
+    // purge properties
+    Plots.purge(gd);
+
+    // remove plot container
+    if(fullLayout._container) fullLayout._container.remove();
+
+    // other stuff to delete ???
+
+    return gd;
+};
+
 /**
  * Reduce all reserved margin objects to a single required margin reservation.
  *
@@ -2493,7 +2513,7 @@ function makePlotFramework(gd) {
     // Make the svg container
     fullLayout._paperdiv = fullLayout._container.selectAll('.svg-container').data([0]);
     fullLayout._paperdiv.enter().append('div')
-        .classed('svg-container',true)
+        .classed('svg-container', true)
         .style('position','relative');
 
     // Initial autosize

src/plots/gl2d/index.js

@@ -65,3 +65,17 @@ exports.plot = function plotGl2d(gd) {
         scene.plot(fullSubplotData, fullLayout, gd.layout);
     }
 };
+
+exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout) {
+    var oldSceneKeys = Plots.getSubplotIds(oldFullLayout, 'gl2d');
+
+    for(var i = 0; i < oldSceneKeys.length; i++) {
+        var oldSubplot = oldFullLayout._plots[oldSceneKeys[i]],
+            xaName = oldSubplot.xaxis._name,
+            yaName = oldSubplot.yaxis._name;
+
+        if(!!oldSubplot._scene2d && (!newFullLayout[xaName] || !newFullLayout[yaName])) {
+            oldSubplot._scene2d.destroy();
+        }
+    }
+};

src/plots/gl2d/scene2d.js

@@ -292,6 +292,13 @@ proto.cameraChanged = function() {
 
 proto.destroy = function() {
     this.glplot.dispose();
+
+    this.container.removeChild(this.canvas);
+    this.container.removeChild(this.svgContainer);
+    this.container.removeChild(this.mouseContainer);
+
+    this.glplot = null;
+    this.stopped = true;
 };
 
 proto.plot = function(fullData, fullLayout) {
@@ -405,6 +412,7 @@ proto.plot = function(fullData, fullLayout) {
 
 proto.draw = function() {
     if(this.stopped) return;
+
     requestAnimationFrame(this.redraw);
 
     var glplot = this.glplot,

src/plots/plots.js

@@ -492,7 +492,7 @@ plots.supplyDefaults = function(gd) {
     plots.supplyLayoutModuleDefaults(newLayout, newFullLayout, newFullData);
 
     // clean subplots and other artifacts from previous plot calls
-    cleanPlot(newFullData, newFullLayout, oldFullData, oldFullLayout);
+    plots.cleanPlot(newFullData, newFullLayout, oldFullData, oldFullLayout);
 
     /*
      * Relink functions and underscore attributes to promote consistency between
@@ -520,7 +520,7 @@ plots.supplyDefaults = function(gd) {
     }
 };
 
-function cleanPlot(newFullData, newFullLayout, oldFullData, oldFullLayout) {
+plots.cleanPlot = function(newFullData, newFullLayout, oldFullData, oldFullLayout) {
     var i, j;
 
     var plotTypes = Object.keys(subplotsRegistry);
@@ -560,7 +560,7 @@ function cleanPlot(newFullData, newFullLayout, oldFullData, oldFullLayout) {
             oldFullLayout._infolayer.selectAll('.cb' + oldUid).remove();
         }
     }
-}
+};
 
 /**
  * Relink private _keys and keys with a function value from one layout
@@ -755,16 +755,13 @@ plots.supplyLayoutModuleDefaults = function(layoutIn, layoutOut, fullData) {
     }
 };
 
+// Remove all plotly attributes from a div so it can be replotted fresh
+// TODO: these really need to be encapsulated into a much smaller set...
 plots.purge = function(gd) {
-    // remove all plotly attributes from a div so it can be replotted fresh
-    // TODO: these really need to be encapsulated into a much smaller set...
 
     // note: we DO NOT remove _context because it doesn't change when we insert
     // a new plot, and may have been set outside of our scope.
 
-    // clean up the gl and geo containers
-    // TODO unify subplot creation/update with d3.selection.order
-    // and/or subplot ids
     var fullLayout = gd._fullLayout || {};
     if(fullLayout._glcontainer !== undefined) fullLayout._glcontainer.remove();
     if(fullLayout._geocontainer !== undefined) fullLayout._geocontainer.remove();