[ZEPPELIN-6054] Eliminate no-invalid-this warnings

### What is this PR for?
This PR aims to refactor several parts of the Zeppelin project codebase to eliminate no-invalid-this warnings reported by ESLint. These warnings indicate that the this keyword is being used in ways that might lead to unexpected behavior or bugs, particularly within nested callbacks or when this loses its intended context. By addressing these warnings, we improve the stability, readability, and maintainability of the codebase.

**Note on `note-action.service.js`**:
Initially, I aimed to refactor `note-action.service.js` to eliminate ESLint warnings. However, during testing, it was found that the note actions on the default page were not displaying correctly after the changes. To ensure the stability of the project, I have reverted the changes made to `note-action.service.js`. I plan to revisit this refactor to address the ESLint warnings while ensuring no issues arise in the build process.

### What type of PR is it?
Refactoring

### Todos
* [x] - Resolve ESLint warnings of files in zeppelin-web/src/app
* [ ] - Resolve ESLint warnings of files in zeppelin-web/src/components
* [x] - Check if project compiles successfully

### What is the Jira issue?
[ZEPPELIN-6054](https://issues.apache.org/jira/browse/ZEPPELIN-6054)

### How should this be tested?
* CI
* Build and run 

### Screenshots (if appropriate)
*Current Warnings*:
<img width="1102" alt="image" src="https://github.com/user-attachments/assets/4a928656-ec97-4553-a12c-2cd0fbd46350">


### Questions:
* Does the license files need to update? - No
* Is there breaking changes for older versions? - No
* Does this needs documentation? - No


Closes apache#4788 from cherrie-k/fix/minor-warnings.

Signed-off-by: Cheng Pan <[email protected]>

zeppelin-web/src/app/visualization/builtins/visualization-d3network.js

@@ -164,25 +164,27 @@ export default class NetworkVisualization extends Visualization {
         .append(html.join(''));
     };
 
+    let clickedOnDOMElement;
     const drag = d3.behavior.drag()
       .origin((d) => d)
-      .on('dragstart', function(d) {
+      .on('dragstart', (d) => {
         console.log('dragstart');
         d3.event.sourceEvent.stopPropagation();
-        d3.select(this).classed('dragging', true);
+        clickedOnDOMElement = d3.event.sourceEvent.target;
+        d3.select(clickedOnDOMElement).classed('dragging', true);
         self.force.stop();
       })
-      .on('drag', function(d) {
+      .on('drag', (d) => {
         console.log('drag');
         d.px += d3.event.dx;
         d.py += d3.event.dy;
         d.x += d3.event.dx;
         d.y += d3.event.dy;
       })
-      .on('dragend', function(d) {
+      .on('dragend', (d) => {
         console.log('dragend');
         d.fixed = true;
-        d3.select(this).classed('dragging', false);
+        d3.select(clickedOnDOMElement).classed('dragging', false);
         self.force.resume();
       });
 

zeppelin-web/src/app/visualization/builtins/visualization-table.js

@@ -364,14 +364,13 @@ export default class TableVisualization extends Visualization {
       gridApi.colResizable.on.columnSizeChanged(scope, () => {
         self.persistConfigWithGridState(self.config);
       });
-      gridApi.edit.on.beginCellEdit(scope, function(rowEntity, colDef, triggerEvent) {
+      gridApi.edit.on.beginCellEdit(scope, (rowEntity, colDef, triggerEvent) => {
         let textArea = triggerEvent.currentTarget.children[1].children[0].children[0];
         textArea.style.height = textArea.scrollHeight + 'px';
-        textArea.addEventListener('keydown', function() {
-          let elem = this;
-          setTimeout(function() {
-            elem.style.height = 'auto';
-            elem.style.height = elem.scrollHeight + 'px';
+        textArea.addEventListener('keydown', () => {
+          setTimeout(() => {
+            textArea.style.height = 'auto';
+            textArea.style.height = textArea.scrollHeight + 'px';
           });
         }, 0);
       });