Merge pull request #974 from mkzia/addChartLinkButton

Add chart link button to metric explorer
ubccr · Jul 16, 2019 · 8fbd8fe · 8fbd8fe
2 parents e745696 + 4b4ae0a
commit 8fbd8fe
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 5 deletions.
diff --git a/html/gui/css/viewer.css b/html/gui/css/viewer.css
@@ -352,6 +352,9 @@ h3 {
 .blank {
     background-image: url(../images/s.gif) !important;
 }
+.chart_bar_link {
+    background-image: url(../images/chart_bar_link.png) !important;
+}
 .xd-toolbar {
 	background-color:#ffffff !important;
 	background-image: none !important;

diff --git a/html/gui/images/chart_bar_link.png b/html/gui/images/chart_bar_link.png
diff --git a/html/gui/js/PortalModule.js b/html/gui/js/PortalModule.js
@@ -23,7 +23,8 @@ XDMoD.ToolbarItem = {
    DURATION_SELECTOR: 1,
    EXPORT_MENU: 2,
    PRINT_BUTTON: 3,
-   REPORT_CHECKBOX: 4
+   REPORT_CHECKBOX: 4,
+   CHART_LINK_BUTTON: 5
 
 };//XDMoD.ToolbarItem
 
@@ -57,7 +58,8 @@ XDMoD.PortalModule = Ext.extend(Ext.Panel,  {
       durationSelector: false,
       exportMenu: false,
       printButton: false,
-      reportCheckbox: false
+      reportCheckbox: false,
+      chartLinkButton: false
 
    },//toolbarItems
 
@@ -69,7 +71,8 @@ XDMoD.PortalModule = Ext.extend(Ext.Panel,  {
       XDMoD.ToolbarItem.DURATION_SELECTOR,
       XDMoD.ToolbarItem.EXPORT_MENU,
       XDMoD.ToolbarItem.PRINT_BUTTON,
-      XDMoD.ToolbarItem.REPORT_CHECKBOX
+      XDMoD.ToolbarItem.REPORT_CHECKBOX,
+      XDMoD.ToolbarItem.CHART_LINK_BUTTON
 
    ],   
 
@@ -190,6 +193,27 @@ XDMoD.PortalModule = Ext.extend(Ext.Panel,  {
 
       // ----------------------------------------
 
+      var createChartLinkButton = function () {
+         var chartLinkButton = new Ext.Button({
+
+             text: 'Link to Current Chart',
+             iconCls: 'chart_bar_link',
+             tooltip: 'Link to Current Chart',
+             scope: this,
+             handler: function () {
+                 self.fireEvent('chart_link_clicked');
+             } // handler
+
+         }); // chartLinkButton
+
+         self.getChartLinkButton = function () {
+             return chartLinkButton;
+         };
+
+         return chartLinkButton;
+     }; // createChartLinkButton
+
+     // ----------------------------------------
       var moduleConfig = {
 
          layout: 'border',
@@ -329,7 +353,18 @@ XDMoD.PortalModule = Ext.extend(Ext.Panel,  {
                   }
 
                   break;
-
+
+               case XDMoD.ToolbarItem.CHART_LINK_BUTTON:
+
+                  if (self.toolbarItems.chartLinkButton === true) {
+                        if (moduleConfig.tbar.items.getCount() > 1 && employSeparator) {
+                           moduleConfig.tbar.addItem('-');
+                        }
+                        moduleConfig.tbar.addItem(createChartLinkButton(self.module_id));
+                  }
+
+                  break;
+
                default:
 
                   if (moduleConfig.tbar.items.getCount() > 1 && employSeparator)

diff --git a/html/gui/js/modules/metric_explorer/MetricExplorer.js b/html/gui/js/modules/metric_explorer/MetricExplorer.js
@@ -2007,7 +2007,8 @@ Ext.extend(XDMoD.Module.MetricExplorer, XDMoD.PortalModule, {
         durationSelector: true,
         exportMenu: true,
         printButton: true,
-        reportCheckbox: true
+        reportCheckbox: true,
+        chartLinkButton: true
 
     },
 
@@ -5494,6 +5495,8 @@ Ext.extend(XDMoD.Module.MetricExplorer, XDMoD.PortalModule, {
 
             self.getReportCheckbox().setDisabled(noData);
 
+            self.getChartLinkButton().setDisabled(noData);
+
             var reportGeneratorMeta = chartStore.getAt(0).get('reportGeneratorMeta');
 
             self.getReportCheckbox().storeChartArguments(reportGeneratorMeta.chart_args,
@@ -6236,6 +6239,20 @@ Ext.extend(XDMoD.Module.MetricExplorer, XDMoD.PortalModule, {
 
         // ---------------------------------------------------------
 
+        self.on('chart_link_clicked', function () {
+            var encodedData = window.btoa(JSON.stringify(this.getConfig()));
+            var link = window.location.protocol + '//' + window.location.host + '/#main_tab_panel:metric_explorer?config=' + encodedData;
+            var msg = 'Use the following link to share the current chart. Note that the link does not override the access controls. So if you send the link to someone who does not have access to the data, they will still not be able to see the data. <br> We recommend using Chrome or Firefox if the link does not work in Internet Explorer.<br><b>' + link + '</b>';
+            Ext.Msg.show({
+                title: 'Link to Chart',
+                minWidth: 700,
+                msg: msg,
+                buttons: Ext.Msg.OK
+            });
+        }); // self.on('chart_link_clicked', ...
+
+        // ---------------------------------------------------------
+
         this.loadAll = function() {
             this.queries_store_loaded_handler = function() {
                 this.createQueryFunc.call(this, null, null, null, null, null, null, false);
@@ -6286,6 +6303,10 @@ Ext.extend(XDMoD.Module.MetricExplorer, XDMoD.PortalModule, {
     listeners: {
         activate: function( /*panel*/ ) {
             this.updateRawDataWindowVisibility();
+            if (location.hash.split('config=')[1]) {
+                var config = JSON.parse(window.atob(location.hash.split('config=')[1]));
+                XDMoD.Module.MetricExplorer.setConfig(config, config.title, false);
+            }
         }, // activate
 
         deactivate: function( /*panel*/ ) {