Replace lodash with a pure debounce implementation

dashboard_frontend/package.json

@@ -15,13 +15,13 @@
     "bootstrap-vue": "^2.18.1",
     "chart.js": "^2.9.4",
     "chartjs-plugin-datalabels": "^0.7.0",
+    "debounce": "^1.2.0",
     "dropzone": "^5.7.2",
     "headroom.js": "^0.12.0",
     "matomo-tracker": "^2.2.4",
     "patternomaly": "^1.3.2",
     "portal-vue": "^2.1.7",
     "vue-i18n": "^8.22.1",
-    "vue-lodash": "^2.1.2",
     "vue-moment": "^4.1.0",
     "vue-router": "^3.4.8",
     "vue-select": "^3.10.8",

dashboard_frontend/src/components/charts/chart_mixin.vue

@@ -1,5 +1,5 @@
 <script>
-import _ from 'lodash'
+import { debounce } from "debounce";
 import field_translations from "@/components/field_translations";
 
 export default {
@@ -74,9 +74,9 @@ export default {
         // This also prevents some of the "me.getDatasetMeta(...).controller is null" errors in charts.js (nov 2019)
         // You cannot add a debounce on a watch:
         // https://stackoverflow.com/questions/47172952/vuejs-2-debounce-not-working-on-a-watch-option
-        this.unwatch = this.$watch('chart_data', _.debounce(() => {
+        this.unwatch = this.$watch('chart_data', debounce(() => {
             this.renderData();
-        }, 300), {
+        }, 500), {
             // Note that you don’t need to do so to listen for in-Array mutations as they won't happen and the
             // arrays are too complex and big.
             deep: false

dashboard_frontend/src/components/reports/Report.vue

@@ -126,9 +126,6 @@
 // Done: store filter options for reports (as generic or per report? or as a re-applicable set?) Per user account.
 // Done: how to add a item for legacy views?
 // Done: how to translate graphs?
-
-import _ from 'lodash'
-
 import field_translations from './../field_translations'
 
 import ReportCharts from './ReportCharts'
@@ -233,9 +230,6 @@ export default {
             // settings
             report_category: '',
 
-            // such basic functionality missing in vue, it even got removed.
-            debounce_timer: 0,
-
             available_recent_reports: [],
 
             // the filtered set only shows the same type as the first scan shown. It's not possible to open
@@ -298,15 +292,6 @@ export default {
         }, 1500)
     },
 
-    // common issue that debounce does not work on a watch.
-    // todo: there is probably a vue thing that is smaller than lodash that can debounce.
-    // https://stackoverflow.com/questions/47172952/vuejs-2-debounce-not-working-on-a-watch-option
-    created() {
-        this.debounce = _.debounce((func) => {
-            // console.log('Debounced term: ' + func);
-            func.apply();
-        }, 300)
-    },
     methods: {
 
         make_downloadlink: function (report_id, filetype) {

package.json

@@ -5,14 +5,14 @@
     "bootstrap-vue": "^2.18.1",
     "chart.js": "^2.9.4",
     "chartjs-plugin-datalabels": "^0.7.0",
+    "debounce": "^1.2.0",
     "dropzone": "^5.7.2",
     "headroom.js": "^0.12.0",
     "matomo-tracker": "^2.2.4",
     "patternomaly": "^1.3.2",
     "portal-vue": "^2.1.7",
     "vue": "^2.6.12",
     "vue-i18n": "^8.22.1",
-    "vue-lodash": "^2.1.2",
     "vue-moment": "^4.1.0",
     "vue-router": "^3.4.8",
     "vue-select": "^3.10.8",