#15 - Add possibility of erasing all buffered data from the UI

Linkurious · Jul 5, 2015 · 9f09df5 · 9f09df5
1 parent 845415d
commit 9f09df5
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 14 deletions.
diff --git a/extension/src/panel/panel.html b/extension/src/panel/panel.html
@@ -54,6 +54,9 @@
                     <li>
                         <a id="detailTimingTabButton" href="#"><i class="fa fa-dashboard fa-fw"></i> Function Timing</a>
                     </li>
+                    <li>
+                        <a id="settingsTabButton" href="#"><i class="fa fa-cogs fa-fw"></i> Settings</a>
+                    </li>
                 </ul>
             </div>
             <!-- /.sidebar-collapse -->
@@ -297,6 +300,7 @@
             <!-- /.row -->
         </div>
         <!-- Main Tab -->
+
         <div id="detailTimingTab" style="display: none;">
             <div class="row">
                 <div class="col-lg-12">
@@ -323,6 +327,14 @@
                 </div>
             </div>
         </div>
+        <div id="settingsTab" style="display: none;">
+            <div class="row">
+                <div class="col-lg-12">
+                    <p>Tweak extension settings and refresh data.</p>
+                    <button id="clearDataButton" type="button" class="btn btn-danger">Clear Data</button>
+                </div>
+            </div>
+        </div>
     </div>
     <!-- /#page-wrapper -->
 </div>

diff --git a/panelApp/main.js b/panelApp/main.js
@@ -11,6 +11,7 @@ var
   TabsHandler = require('./tabHandler'),
   Plots = require('./plots'),
   InstantMetrics = require('./instantMetrics'),
+  SettingsPanelCtrl = require('./settingsPanelController'),
   backgroundPageConnection = chrome.runtime.connect({
     name: "angular-performance-panel"
   });
@@ -23,7 +24,10 @@ var
 InstantMetrics.initRegistry(registry);
 Plots.initRegistry(registry);
 
-var tabs = new TabsHandler(Plots);
+var
+  tabs = new TabsHandler(Plots),
+  // For now the reference of the settings is not used by the other services but it could in the future.
+  settingsPanelCtrl = new SettingsPanelCtrl(registry, Plots, tabs);
 
 // Listen to the message sent by the injected script
 backgroundPageConnection.onMessage.addListener(function(message){
@@ -126,7 +130,7 @@ Plots.setMainPlotsSettings([
   }
 ]);
 
-Plots.buildMainPlots(registry);
+Plots.buildMainPlots();
 tabs.bindTabs();
 
 

diff --git a/panelApp/plots.js b/panelApp/plots.js
@@ -59,8 +59,19 @@ Plots.buildMainPlots = function(){
 
   _.forEach(_mainPlotsSettings, function(plot){
 
+    $('#' + plot.id).empty();
+
+    if (plot.eventTimelineId)
+      $('#' + plot.eventTimelineId).empty();
+    if (plot.rangeSliderId)
+      $('#' + plot.rangeSliderId).empty();
+
+
     // Controls of the start en end date
     if (plot.pauseButton && plot.liveButton) {
+      $(plot.liveButton).unbind();
+      $(plot.pauseButton).unbind();
+
       $(plot.liveButton).click(function () {
         plot.live = true;
         $(plot.pauseButton).removeClass('active');
@@ -84,7 +95,7 @@ Plots.buildMainPlots = function(){
       series: [
         {
           color: _COLOR_PALETTE.color(),
-          data:  plot.dataFunction(),
+          data: plot.dataFunction(),
           name: plot.plotName
         }
       ]
@@ -148,4 +159,19 @@ Plots.buildMainPlots = function(){
   });
 };
 
+/**
+ * Cleans up annotations registered in the event bar .
+ */
+Plots.clearAnnotations = function(){
+  _.forEach(_mainPlotsSettings, function(plot){
+    if (plot.annotator) {
+      _.forEach(Object.keys(plot.annotator.data), function(timestamp){
+        delete plot.annotator.data[timestamp];
+      })
+    }
+  });
+
+  $('.annotation').remove();
+};
+
 module.exports = Plots;
diff --git a/panelApp/registry.js b/panelApp/registry.js
@@ -33,6 +33,33 @@ function Registry(){
     _locationMap = {},
     _locationCount = 0;
 
+  // ------------------------------------------------------------------------------------------
+  //                                    Registry helpers
+  // ------------------------------------------------------------------------------------------
+
+  /**
+   * Cleans up all data of the registry to start fresh. We clean the existing object to keep
+   * the references so that we don't have to re instantiate Rickshaw plots.
+   */
+  self.clearData = function(){
+
+    _.forEach([_digestTiming, _events, _watcherCount, _digestTimingDistributionPlotData,
+      _digestTimingPlotData, _digestRatePlotData, _watcherCountPlotData,
+      _watcherCountDistributionPlotData], function(array){
+
+      for (var i = 0, len = array.length; i <len ; i++){
+        array.shift();
+      }
+    });
+
+    _.forEach([_digestTimingDistribution, _watcherCountDistribution, _functionTimings, _locationMap], function(obj){
+      _.forEach(Object.keys(obj), function(key){
+        delete obj[key];
+      })
+    });
+
+    _locationCount = 0;
+  };
 
   // ------------------------------------------------------------------------------------------
   //                                     Angular Digest
@@ -238,8 +265,16 @@ function Registry(){
       start;
 
     if (chart === 'digest-time-chart'){
+      if (_digestTimingPlotData.length === 0){
+        return data;
+      }
+
       start = _digestTimingPlotData[_digestTimingPlotData.length - 1].x;
     } else if (chart === 'digest-rate-chart'){
+      if (_digestRatePlotData.length === 0){
+        return data;
+      }
+
       start = _digestRatePlotData[_digestRatePlotData.length - 1].x;
     }
 

diff --git a/panelApp/settingsPanelController.js b/panelApp/settingsPanelController.js
@@ -0,0 +1,15 @@
+'use strict';
+
+var
+  $ = require('jquery');
+
+function SettingsPanelCtrl(registry, plots, tabs){
+
+  $('#clearDataButton').click(function(){
+    registry.clearData();
+    plots.clearAnnotations();
+    tabs.goToTab(tabs.TABS.HOME);
+  });
+}
+
+module.exports = SettingsPanelCtrl;
diff --git a/panelApp/tabHandler.js b/panelApp/tabHandler.js
@@ -13,15 +13,17 @@ function tabHandler(plots){
 
   var self = this;
 
-  var
-    _TABS = {
+
+  self.TABS = {
       HOME: 'homeTab',
       SCOPE: 'scopeTab',
-      TIMING: 'detailTimingTab'
-    },
+      TIMING: 'detailTimingTab',
+      SETTINGS: 'settingsTab'
+    };
 
+  var
     _plots = plots,
-    _currentTab = _TABS.HOME;
+    _currentTab = self.TABS.HOME;
 
   /**
    * This method allows navigation through tabs in the panel.
@@ -33,11 +35,11 @@ function tabHandler(plots){
     if (tabName === _currentTab ){
       return;
     }
-    if (tabName !== _TABS.HOME && tabName !== _TABS.SCOPE && tabName !== _TABS.TIMING) {
+    if (!_.includes(_.values(self.TABS), tabName)) {
       throw new Error('tabHandler.js - Unrecognized tab name');
     }
 
-    if (_currentTab === _TABS.HOME){
+    if (_currentTab === self.TABS.HOME){
       _plots.stopMainPlotRendering();
     }
 
@@ -46,7 +48,7 @@ function tabHandler(plots){
     $('#' + tabName).show();
     $('#' + tabName + 'Button').addClass('active');
 
-    if (tabName === _TABS.HOME){
+    if (tabName === self.TABS.HOME){
       _plots.startMainPlotRendering();
     }
 
@@ -57,9 +59,9 @@ function tabHandler(plots){
    * Binds the tabs to the the click listeners.
    */
   self.bindTabs = function(){
-    _.forEach(Object.keys(_TABS), function(TAB){
-      $('#' + _TABS[TAB] + 'Button').click(function(){
-        self.goToTab(_TABS[TAB]);
+    _.forEach(Object.keys(self.TABS), function(TAB){
+      $('#' + self.TABS[TAB] + 'Button').click(function(){
+        self.goToTab(self.TABS[TAB]);
       })
     });
   };