Remove jQuery dependency (#1756)

* Replace jQuery calls with native JavaScript. Deep extend is performed by CCR.js js function. * Remove jQuery dependency.
ubccr · May 14, 2024 · 14a6d2e · 14a6d2e
1 parent 80bfe06
commit 14a6d2e
Show file tree

Hide file tree

Showing 18 changed files with 63 additions and 146 deletions.
diff --git a/NOTICE b/NOTICE
@@ -11,10 +11,10 @@ License: New BSD License
 Author:  Zend Technologies USA, Inc.
 Link:    http://framework.zend.com/
 
-Name:    jQuery
+Name:    youmightnotneedjquery
 License: MIT license
-Author:  jQuery Foundation and other contributors
-Link:    http://jquery.com/
+Author:  HubSpot, Inc.
+Link:    https://github.com/HubSpot/YouMightNotNeedjQuery
 
 Name:    Plotly.js
 License: MIT license

diff --git a/composer.json b/composer.json
@@ -4,12 +4,10 @@
     },
     "require": {
         "php": "^5.4 || ^7.2",
-        "carlo/jquery-base64-file": "^1.0",
         "egulias/email-validator": "^1.2",
         "google/recaptcha": "~1.1",
         "greenlion/php-sql-parser": "~4.2",
         "ircmaxell/password-compat": "~1",
-        "jquery/jquery-min-file": "^1.12.4",
         "justinrainbow/json-schema": "~5.2",
         "moment/moment-min-file": "^2.13.0",
         "moment/moment-timezone-min-file": "^0.5.4",
@@ -123,48 +121,6 @@
                 }
             }
         },
-        {
-            "type": "package",
-            "package": {
-                "name": "jquery/jquery-min-file",
-                "type": "vanilla-plugin",
-                "version": "1.12.4",
-                "license": "MIT",
-                "homepage": "https://jquery.com",
-                "dist": {
-                    "url": "https://code.jquery.com/jquery-1.12.4.min.js",
-                    "type": "file",
-                    "shasum": "5a9dcfbef655a2668e78baebeaa8dc6f41d8dabb"
-                },
-                "require": {
-                    "composer/installers": "~1.0"
-                },
-                "extra": {
-                    "installer-name": "jquery"
-                }
-            }
-        },
-        {
-            "type": "package",
-            "package": {
-                "name": "carlo/jquery-base64-file",
-                "type": "vanilla-plugin",
-                "version": "1.0",
-                "license": "MIT",
-                "homepage": "https://github.com/carlo/jquery-base64",
-                "dist": {
-                    "url": "https://github.com/carlo/jquery-base64/raw/master/jquery.base64.js",
-                    "type": "file",
-                    "shasum": "7f0ba311c1676b1b730b29b06e1a9e9e55760acc"
-                },
-                "require": {
-                    "composer/installers": "~1.0"
-                },
-                "extra": {
-                    "installer-name": "base64"
-                }
-            }
-        },
         {
             "type": "package",
             "package": {
@@ -214,13 +170,9 @@
                 "sencha/extjs-gpl",
                 "moment/moment-min-file",
                 "moment/moment-timezone-min-file",
-                "jquery/jquery-min-file",
                 "tildeio/rsvpjs-min-file",
                 "plotly/plotly"
             ],
-            "html/gui/lib/jquery-plugins/{$name}": [
-                "carlo/jquery-base64-file"
-            ],
             "external_libraries/{$name}": [
                 "zendframework/zendframework-minimal"
             ]

diff --git a/composer.lock b/composer.lock
diff --git a/docs/notices.md b/docs/notices.md
@@ -14,8 +14,8 @@ where denoted. These software products are free for commercial use.
   available under the [GPL 3.0][gpl3].
 - [Zend Framework 1.12.0](http://framework.zend.com/), which is available
   under the [New BSD License][new-bsd].
-- [jQuery](http://jquery.com/), which is available under the
-  [MIT License][mit].
+- [youmightnotneedjquery](https://github.com/HubSpot/YouMightNotNeedjQuery),
+  which is available under the [MIT License][mit].
 - [RSVP.js](https://github.com/tildeio/rsvp.js), which is available
   under the [MIT License][mit].
 - [Silex](http://silex.sensiolabs.org), which is available under the
@@ -46,8 +46,6 @@ where denoted. These software products are free for commercial use.
   available under the [MIT License][mit].
 - [reCAPTCHA PHP Library](https://developers.google.com/recaptcha/old/docs/php),
   which is available under the [MIT License][mit].
-- [jquery-base64](https://github.com/carlo/jquery-base64), which is available
-  under the [MIT License][mit].
 - \*[Ext.ux.form.GroupComboBox](https://www.sencha.com/forum/showthread.php?45412-Ext-ux-form-GroupComboBox),
   which is available under a "BSD" license (it is not clear which BSD license
   is being referred to).

diff --git a/html/.eslintrc.json b/html/.eslintrc.json
@@ -14,7 +14,6 @@
     "ga": false,
     "moment": false,
     "_gaq": false,
-    "jQuery": false,
     "truncateText": false,
     "XDMoD": false,
     "Dashboard": false,

diff --git a/html/gui/js/AddDataPanel.js b/html/gui/js/AddDataPanel.js
@@ -82,8 +82,8 @@ Ext.apply(CCR.xdmod.ui.AddDataPanel, {
     },
     initRecord: function (store, config, selectedFilters, timeseries) {
         var conf = {};
-        jQuery.extend(true, conf, CCR.xdmod.ui.AddDataPanel.defaultConfig(timeseries));
-        if (config) jQuery.extend(true, conf, config);
+        XDMoD.utils.deepExtend(conf, CCR.xdmod.ui.AddDataPanel.defaultConfig(timeseries));
+        if (config) XDMoD.utils.deepExtend(conf, config);
         conf.id = CCR.randomInt(Number.MIN_SAFE_INTEGER, Number.MAX_SAFE_INTEGER);
         conf.z_index = store.getCount();
         conf.filters = selectedFilters ? selectedFilters : {
@@ -102,7 +102,7 @@ Ext.extend(CCR.xdmod.ui.AddDataPanel, Ext.Panel, {
         if (this.filtersStore) {
             this.filtersStore.each(
                 function (record) {
-                    var data = jQuery.extend({}, record.data);
+                    var data = { ...{}, ...record.data };
                     ret.push(data);
                 });
         }
@@ -129,7 +129,7 @@ Ext.extend(CCR.xdmod.ui.AddDataPanel, Ext.Panel, {
             this.record = CCR.xdmod.ui.AddDataPanel.initRecord(this.store, this.config, this.getSelectedFilters(), this.timeseries);
         }
         this.originalData = {};
-        jQuery.extend(this.originalData, this.record.data);
+        this.originalData = { ...this.originalData, ...this.record.data };
         this.filtersMenu = new Ext.menu.Menu({
             showSeparator: false,
             ignoreParentClicks: true
@@ -305,7 +305,7 @@ Ext.extend(CCR.xdmod.ui.AddDataPanel, Ext.Panel, {
             ])
         });
         if (this.record.data.filters) {
-            var currentFilters = jQuery.extend({}, this.record.data.filters);
+            var currentFilters = { ...{}, ...this.record.data.filters };
             this.filtersStore.loadData(currentFilters, false);
         }
         var selectAllButton = new Ext.Button({

diff --git a/html/gui/js/CCR.js b/html/gui/js/CCR.js
@@ -687,6 +687,38 @@ XDMoD.utils.format = {
     }
 };
 
+// Taken from: https://github.com/HubSpot/YouMightNotNeedjQuery, which
+// is available under the MIT license.
+// Recommended by @versable on https://github.com/ubccr/xdmod/pull/1542
+XDMoD.utils.deepExtend = function extend(out, ...arguments_) {
+  if (!out) {
+    return {};
+  }
+
+  for (let i = 0; i < arguments_.length; i++) {
+    const obj = arguments_[i];
+    if (!obj) {
+      continue;
+    }
+
+    Object.entries(obj).forEach(([key, value]) => {
+      switch (Object.prototype.toString.call(value)) {
+        case '[object Object]':
+          out[key] = out[key] || {};
+          out[key] = XDMoD.utils.deepExtend(out[key], value);
+          break;
+        case '[object Array]':
+          out[key] = XDMoD.utils.deepExtend(new Array(value.length), value);
+          break;
+        default:
+          out[key] = value;
+      }
+    });
+  }
+
+  return out;
+};
+
 // =====================================================================
 
 Ext.Ajax.timeout = 86400000;

diff --git a/html/gui/js/PlotlyChartWrapper.js b/html/gui/js/PlotlyChartWrapper.js
@@ -17,7 +17,7 @@ Ext.namespace('XDMoD.utils');
 XDMoD.utils.createChart = function (chartOptions, extraHandlers) {
     const baseChartOptions = {};
     const configs = { displayModeBar: false, doubleClick: 'reset', doubleClickDelay: 500 };
-    jQuery.extend(true, baseChartOptions, chartOptions);
+    XDMoD.utils.deepExtend(baseChartOptions, chartOptions);
     const isEmpty = (!baseChartOptions.data) || (baseChartOptions.data && baseChartOptions.data.length === 0);
 
     // Configure plot for 'No Data' image. We want to wipe the layout object except for a couple things

diff --git a/html/gui/js/PlotlyPanel.js b/html/gui/js/PlotlyPanel.js
@@ -36,7 +36,7 @@ Ext.extend(CCR.xdmod.ui.PlotlyPanel, Ext.Panel, {
             }
         };
 
-        this.baseChartOptions = jQuery.extend(true, {}, defaultOptions, this.baseChartOptions);
+        this.baseChartOptions = XDMoD.utils.deepExtend({}, defaultOptions, this.baseChartOptions);
 
         this.on('render', function () {
             this.initNewChart.call(this);
@@ -51,7 +51,7 @@ Ext.extend(CCR.xdmod.ui.PlotlyPanel, Ext.Panel, {
                     if (t.getCount() <= 0) {
                         return;
                     }
-                    this.chartOptions = jQuery.extend(true, {}, t.getAt(0).data, this.baseChartOptions);
+                    this.chartOptions = XDMoD.utils.deepExtend({}, t.getAt(0).data, this.baseChartOptions);
                     this.chartOptions.credits = this.credits;
                     this.initNewChart.call(this);
 
@@ -279,9 +279,9 @@ Ext.extend(CCR.xdmod.ui.PlotlyPanel, Ext.Panel, {
     initNewChart: function (chartOptions) { /* eslint object-shorthand: "off" */
         const finalChartOptions = {};
         if (chartOptions) {
-            jQuery.extend(true, finalChartOptions, this.baseChartOptions, chartOptions);
+            XDMoD.utils.deepExtend(finalChartOptions, this.baseChartOptions, chartOptions);
         } else {
-            jQuery.extend(true, finalChartOptions, this.baseChartOptions, this.chartOptions);
+            XDMoD.utils.deepExtend(finalChartOptions, this.baseChartOptions, this.chartOptions);
         }
         this.chart = XDMoD.utils.createChart(finalChartOptions);
     },

diff --git a/html/gui/js/modules/Summary.js b/html/gui/js/modules/Summary.js
@@ -638,8 +638,7 @@ Ext.extend(XDMoD.Module.Summary, XDMoD.PortalModule, {
                             t: 22,
                             b: 0
                         }
-                    },
-                    data: []
+                    }
                 },
                 store: new CCR.xdmod.CustomJsonStore({
 

diff --git a/html/gui/js/modules/Usage.js b/html/gui/js/modules/Usage.js
@@ -1510,7 +1510,7 @@ Ext.extend(XDMoD.Module.Usage, XDMoD.PortalModule, {
                                 if (chartRecords.length > 0) {
                                     chartOptions = chartRecords[0].get('hc_jsonstore');
                                 }
-                                jQuery.extend(true, chartOptions, baseChartOptions);
+                                chartOptions = XDMoD.utils.deepExtend({}, chartOptions, baseChartOptions);
 
                                 let axisLabels;
                                 const isEmpty = chartOptions.data && chartOptions.data.length === 0;
@@ -2707,7 +2707,6 @@ Ext.extend(XDMoD.Module.Usage, XDMoD.PortalModule, {
                                     width: chartWidth * chartScale,
                                     height: chartHeight * chartScale
                                 },
-                                data: [],
                                 exporting: {
                                     enabled: false
                                 },
@@ -2718,7 +2717,7 @@ Ext.extend(XDMoD.Module.Usage, XDMoD.PortalModule, {
 
                             var chartOptions = r.get('hc_jsonstore');
 
-                            jQuery.extend(true, chartOptions, baseChartOptions);
+                            chartOptions = XDMoD.utils.deepExtend({}, chartOptions, baseChartOptions);
                             chartOptions.exporting.enabled = false;
                             chartOptions.credits.enabled = true;
 

diff --git a/html/gui/js/modules/dashboard/ChartComponent.js b/html/gui/js/modules/dashboard/ChartComponent.js
@@ -43,7 +43,7 @@ XDMoD.Module.Dashboard.ChartComponent = Ext.extend(CCR.xdmod.ui.Portlet, {
         this.title += ' - ' + this.config.chart.start_date + ' to ' + this.config.chart.end_date;
 
         var chartConfig = {};
-        jQuery.extend(true, chartConfig, this.config.chart);
+        XDMoD.utils.deepExtend(chartConfig, this.config.chart);
         chartConfig.title = '';
 
         this.store = new CCR.xdmod.CustomJsonStore({

diff --git a/html/gui/js/modules/job_viewer/ChartTab.js b/html/gui/js/modules/job_viewer/ChartTab.js
@@ -109,7 +109,7 @@ XDMoD.Module.JobViewer.ChartTab = Ext.extend(Ext.Panel, {
             }
         };
 
-        var storeSettings = jQuery.extend(true, {}, defaultStoreSettings, this.panelSettings.store);
+        var storeSettings = XDMoD.utils.deepExtend({}, defaultStoreSettings, this.panelSettings.store);
 
         this.store = new Ext.data.JsonStore(storeSettings);
 

diff --git a/html/gui/js/modules/metric_explorer/MetricExplorer.js b/html/gui/js/modules/metric_explorer/MetricExplorer.js
@@ -756,9 +756,9 @@ Ext.apply(XDMoD.Module.MetricExplorer, {
                                 if (datasetCount === 1) {
                                     instance.filtersStore.add(new instance.filtersStore.recordType(filter));
                                 } else if (datasetCount > 1) {
-                                    var filters = jQuery.extend(true, {}, record.get('filters')),
-                                        found = false;
-                                    for (var i = 0; i < filters.length; i++) {
+                                    var filters = XDMoD.utils.deepExtend({}, record.get('filters'));
+                                    let found = false;
+                                    for (let i = 0; i < filters.length; i++) {
                                         if (filters[i].id == filter.id) {
                                             found = true;
                                             break;
@@ -812,9 +812,9 @@ Ext.apply(XDMoD.Module.MetricExplorer, {
                                 id: Math.random(),
                                 metric: this.met,
                                 color: 'auto'
-                            };
-                        jQuery.extend(config, record.data);
-                        jQuery.extend(config, defaultConfig);
+                           };
+                        config = { ...config, ...record.data };
+                        config = { ...config, ...defaultConfig };
                         var newRecord = CCR.xdmod.ui.AddDataPanel.initRecord(
                             instance.datasetStore,
                             config,
@@ -1138,9 +1138,9 @@ Ext.apply(XDMoD.Module.MetricExplorer, {
             });
             if (dimension !== 'none') {
                 if (instance.filtersStore.getById(drillFilter.id) === undefined) {
-                    var filters = jQuery.extend(true, {}, record.get('filters')),
-                        found = false;
-                    for (var k = 0; k < filters.length; k++) {
+                    var filters = XDMoD.utils.deepExtend({}, record.get('filters'));
+                    var found = false;
+                    for (let k = 0; k < filters.length; k++) {
                         if (filters[k].id == drillFilter.id) {
                             found = true;
                             break;