Fix eslint issues for D3ForceGraph and test file

.eslintignore

@@ -42,16 +42,20 @@ src/Explorer/Controls/Editor/EditorComponent.ts
 src/Explorer/Controls/JsonEditor/JsonEditorComponent.ts
 src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
 src/Explorer/DataSamples/ContainerSampleGenerator.ts
+src/Explorer/DataSamples/DataSamplesUtil.test.ts
+src/Explorer/DataSamples/DataSamplesUtil.ts
 src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.test.ts
 src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.ts
-src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.test.ts
-src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts
+# src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.test.ts
+# src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts
 src/Explorer/Graph/GraphExplorerComponent/EdgeInfoCache.ts
 src/Explorer/Graph/GraphExplorerComponent/GraphData.test.ts
 src/Explorer/Graph/GraphExplorerComponent/GraphData.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinClient.test.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinClient.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.test.ts
+src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.ts
+src/Explorer/Menus/ContextMenu.ts
 src/Explorer/MostRecentActivity/MostRecentActivity.ts
 src/Explorer/Notebook/NotebookClientV2.ts
 src/Explorer/Notebook/NotebookComponent/NotebookContentProvider.ts
@@ -60,8 +64,11 @@ src/Explorer/Notebook/NotebookComponent/actions.ts
 src/Explorer/Notebook/NotebookComponent/epics.test.ts
 src/Explorer/Notebook/NotebookComponent/epics.ts
 src/Explorer/Notebook/NotebookComponent/loadTransform.ts
+src/Explorer/Notebook/NotebookComponent/reducers.ts
 src/Explorer/Notebook/NotebookComponent/store.ts
+src/Explorer/Notebook/NotebookComponent/types.ts
 src/Explorer/Notebook/NotebookContainerClient.ts
+src/Explorer/Notebook/NotebookContentClient.ts
 src/Explorer/Notebook/NotebookContentItem.ts
 src/Explorer/Notebook/NotebookUtil.ts
 src/Explorer/OpenActionsStubs.ts

src/Explorer/DataSamples/DataSamplesUtil.test.ts

@@ -19,7 +19,7 @@ describe("DataSampleUtils", () => {
     const explorer = {} as Explorer;
     useDatabases.getState().addDatabases([database]);
     const dataSamplesUtil = new DataSamplesUtil(explorer);
-    //eslint-disable-next-line
+
     const fakeGenerator = sinon.createStubInstance<ContainerSampleGenerator>(ContainerSampleGenerator as any);
     fakeGenerator.getCollectionId.returns(sampleCollectionId);
     fakeGenerator.getDatabaseId.returns(sampleDatabaseId);

src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.test.ts

@@ -1,4 +1,5 @@
-import * as sinon from "sinon";
+/*eslint-disable jest/no-test-callback */
+import * as sinon from "sinon";
 import GraphTab from "../../Tabs/GraphTab";
 import { D3Link, D3Node, GraphData } from "../GraphExplorerComponent/GraphData";
 import { D3ForceGraph, D3GraphNodeData, LoadMoreDataAction } from "./D3ForceGraph";
@@ -70,6 +71,7 @@ describe("D3ForceGraph", () => {
       forceGraph = new D3ForceGraph({
         igraphConfig: GraphTab.createIGraphConfig(),
         onHighlightedNode: sinon.spy(),
+        //eslint-disable-next-line
         onLoadMoreData: (action: LoadMoreDataAction): void => {},
 
         // parent to graph

src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts

@@ -1,4 +1,6 @@
-import { BaseType } from "d3";
+/*eslint-disable @typescript-eslint/no-explicit-any*/
+/*eslint-disable @typescript-eslint/no-this-alias*/
+import { BaseType } from "d3";
 import { map as d3Map } from "d3-collection";
 import { D3DragEvent, drag } from "d3-drag";
 import { forceCollide, forceLink, forceManyBody, forceSimulation } from "d3-force";
@@ -261,10 +263,10 @@ export class D3ForceGraph implements GraphRenderer {
         return;
       }
 
-      var self = this;
+      const self = this;
       // Select this node id
       selectAll(".node")
-        .filter(function (d: D3Node, i) {
+        .filter((d: D3Node) => {
           return d.id === newVal;
         })
         .each(function (d: D3Node) {
@@ -277,15 +279,15 @@ export class D3ForceGraph implements GraphRenderer {
   } // initialize
 
   private updateUniqueValues(key: string) {
-    for (var i = 0; i < this.graphDataWrapper.vertices.length; i++) {
-      let vertex = this.graphDataWrapper.vertices[i];
+    for (let i = 0; i < this.graphDataWrapper.vertices.length; i++) {
+      const vertex = this.graphDataWrapper.vertices[i];
 
-      let props = D3ForceGraph.getNodeProperties(vertex);
+      const props = D3ForceGraph.getNodeProperties(vertex);
       if (props.indexOf(key) === -1) {
         // Vertex doesn't have the property
         continue;
       }
-      let val = GraphData.getNodePropValue(vertex, key);
+      const val = GraphData.getNodePropValue(vertex, key);
       if (typeof val !== "string" && typeof val !== "number") {
         // Not a type we can map
         continue;
@@ -313,7 +315,7 @@ export class D3ForceGraph implements GraphRenderer {
    */
   private static getNodeProperties(node: D3Node): string[] {
     let props = ["id", "label"];
-
+    //eslint-disable-next-line
     if (node.hasOwnProperty("properties")) {
       props = props.concat(Object.keys(node.properties));
     }
@@ -405,7 +407,7 @@ export class D3ForceGraph implements GraphRenderer {
     // Remember nodes current position
     const posMap = new Map<string, Point2D>();
     this.simulation.nodes().forEach((d: D3Node) => {
-      if (d.x == undefined || d.y == undefined) {
+      if (d.x === undefined || d.y === undefined) {
         return;
       }
       posMap.set(d.id, { x: d.x, y: d.y });
@@ -549,7 +551,7 @@ export class D3ForceGraph implements GraphRenderer {
       .transition()
       .delay(D3ForceGraph.TRANSITION_STEP3_MS - 100)
       .duration(D3ForceGraph.TRANSITION_STEP3_MS)
-      .attrTween("fill", (t: any) => {
+      .attrTween("fill", () => {
         const ic = interpolate("#ffffff", "#000000");
         return (t: number) => {
           return ic(t);
@@ -567,7 +569,7 @@ export class D3ForceGraph implements GraphRenderer {
     // Distribute nodes initial position before simulation
     const nodes = graph.vertices;
     for (let i = 0; i < nodes.length; i++) {
-      let v = nodes[i];
+      const v = nodes[i];
 
       if (v._isRoot) {
         this.rootVertex = v;
@@ -611,6 +613,20 @@ export class D3ForceGraph implements GraphRenderer {
 
     const self = this;
 
+    const ticked = () => {
+      self.linkSelection.select(".link").attr("d", (l: D3Link) => {
+        return self.positionLink(l);
+      });
+      if (!D3ForceGraph.useSvgMarkerEnd()) {
+        self.linkSelection.select(".markerEnd").attr("transform", (l: D3Link) => {
+          return self.positionLinkEnd(l);
+        });
+      }
+      self.nodeSelection.attr("transform", (d: D3Node) => {
+        return self.positionNode(d);
+      });
+    };
+
     this.simulation.nodes(nodes).on("tick", ticked);
 
     this.simulation.force<d3.ForceLink<D3Node, D3Link>>("link").links(graph.edges);
@@ -634,20 +650,6 @@ export class D3ForceGraph implements GraphRenderer {
       this.simulation.alpha(1).restart();
       this.params.onGraphUpdated(new Date().getTime());
     });
-
-    function ticked() {
-      self.linkSelection.select(".link").attr("d", (l: D3Link) => {
-        return self.positionLink(l);
-      });
-      if (!D3ForceGraph.useSvgMarkerEnd()) {
-        self.linkSelection.select(".markerEnd").attr("transform", (l: D3Link) => {
-          return self.positionLinkEnd(l);
-        });
-      }
-      self.nodeSelection.attr("transform", (d: D3Node) => {
-        return self.positionNode(d);
-      });
-    }
   }
 
   private addNewLinks(): d3.Selection<Element, any, any, any> {
@@ -677,7 +679,7 @@ export class D3ForceGraph implements GraphRenderer {
   }
 
   private addNewNodes(): d3.Selection<Element, any, any, any> {
-    var self = this;
+    const self = this;
 
     const newNodes = this.nodeSelection
       .enter()
@@ -705,7 +707,7 @@ export class D3ForceGraph implements GraphRenderer {
         this.highlightNode(this, d);
         this.simulation.stop();
       })
-      .on("mouseout", (_: MouseEvent, d: D3Node) => {
+      .on("mouseout", () => {
         if (this.isHighlightDisabled || this.selectedNode || this.isDragging) {
           return;
         }
@@ -726,7 +728,7 @@ export class D3ForceGraph implements GraphRenderer {
       .attr("class", "main")
       .attr("r", this.igraphConfig.nodeSize);
 
-    var iconGroup = newNodes
+    const iconGroup = newNodes
       .append("g")
       .attr("class", "iconContainer")
       .attr("tabindex", 0)
@@ -749,8 +751,8 @@ export class D3ForceGraph implements GraphRenderer {
           self.onNodeClicked(this.parentNode, d);
         }
       });
-    var nodeSize = this.igraphConfig.nodeSize;
-    var bgsize = nodeSize + 1;
+    const nodeSize = this.igraphConfig.nodeSize;
+    const bgsize = nodeSize + 1;
 
     iconGroup
       .append("rect")
@@ -758,7 +760,7 @@ export class D3ForceGraph implements GraphRenderer {
       .attr("y", -bgsize)
       .attr("width", bgsize * 2)
       .attr("height", bgsize * 2)
-      .attr("fill-opacity", (d: D3Node) => {
+      .attr("fill-opacity", () => {
         return this.igraphConfig.nodeIconKey ? 1 : 0;
       })
       .attr("class", "icon-background");
@@ -830,10 +832,10 @@ export class D3ForceGraph implements GraphRenderer {
           self.loadNeighbors(d, PAGE_ACTION.NEXT_PAGE);
         }
       }) as any)
-      .on("mouseover", ((e: MouseEvent, d: D3Node) => {
+      .on("mouseover", ((e: MouseEvent) => {
         select(e.target as any).classed("active", true);
       }) as any)
-      .on("mouseout", ((e: MouseEvent, d: D3Node) => {
+      .on("mouseout", ((e: MouseEvent) => {
         select(e.target as any).classed("active", false);
       }) as any)
       .attr("visibility", (d: D3Node) => (!d._outEAllLoaded || !d._inEAllLoaded ? "visible" : "hidden"));
@@ -859,10 +861,10 @@ export class D3ForceGraph implements GraphRenderer {
           self.loadNeighbors(d, PAGE_ACTION.PREVIOUS_PAGE);
         }
       }) as any)
-      .on("mouseover", ((e: MouseEvent, d: D3Node) => {
+      .on("mouseover", ((e: MouseEvent) => {
         select(e.target as any).classed("active", true);
       }) as any)
-      .on("mouseout", ((e: MouseEvent, d: D3Node) => {
+      .on("mouseout", ((e: MouseEvent) => {
         select(e.target as any).classed("active", false);
       }) as any)
       .attr("visibility", (d: D3Node) =>
@@ -955,10 +957,10 @@ export class D3ForceGraph implements GraphRenderer {
           self.loadNeighbors(d, PAGE_ACTION.FIRST_PAGE);
         }
       }) as any)
-      .on("mouseover", ((e: MouseEvent, d: D3Node) => {
+      .on("mouseover", ((e: MouseEvent) => {
         select(e.target as any).classed("active", true);
       }) as any)
-      .on("mouseout", ((e: MouseEvent, d: D3Node) => {
+      .on("mouseout", ((e: MouseEvent) => {
         select(e.target as any).classed("active", false);
       }) as any);
   }
@@ -967,10 +969,9 @@ export class D3ForceGraph implements GraphRenderer {
    * Remove LoadMore subassembly for existing nodes that show all their children in the graph
    */
   private updateLoadMore(nodeSelection: d3.Selection<Element, any, any, any>) {
-    const self = this;
     nodeSelection.selectAll(".loadmore").remove();
 
-    var nodeSize = this.igraphConfig.nodeSize;
+    const nodeSize = this.igraphConfig.nodeSize;
     const rootSelectionG = nodeSelection
       .filter((d: D3Node) => {
         return !!d._isRoot && !!d._pagination;
@@ -1090,7 +1091,7 @@ export class D3ForceGraph implements GraphRenderer {
 
   private fadeNonNeighbors(nodeId: string) {
     this.g.selectAll(".node").classed("inactive", (d: D3Node) => {
-      var neighbors = ((showNeighborType) => {
+      const neighbors = ((showNeighborType) => {
         switch (showNeighborType) {
           case NeighborType.SOURCES_ONLY:
             return this.graphDataWrapper.getSourcesForId(nodeId);
@@ -1151,7 +1152,7 @@ export class D3ForceGraph implements GraphRenderer {
   }
 
   private retrieveNodeCaption(d: D3Node) {
-    let key = this.igraphConfig.nodeCaption;
+    const key = this.igraphConfig.nodeCaption;
     let value: string = d.id || d.label;
     if (key) {
       value = <string>GraphData.getNodePropValue(d, key) || "";
@@ -1202,14 +1203,14 @@ export class D3ForceGraph implements GraphRenderer {
       y: (<D3Node>l.target).y,
     };
     const d1 = D3ForceGraph.calculateControlPoint(source, target);
-    var radius = this.igraphConfig.nodeSize + 3;
+    const radius = this.igraphConfig.nodeSize + 3;
 
     // End
     const dx = target.x - d1.x;
     const dy = target.y - d1.y;
     const angle = Math.atan2(dy, dx);
-    var ux = target.x - Math.cos(angle) * radius;
-    var uy = target.y - Math.sin(angle) * radius;
+    const ux = target.x - Math.cos(angle) * radius;
+    const uy = target.y - Math.sin(angle) * radius;
 
     return `translate(${ux},${uy}) rotate(${(angle * 180) / Math.PI})`;
   }
@@ -1224,21 +1225,21 @@ export class D3ForceGraph implements GraphRenderer {
       y: (<D3Node>l.target).y,
     };
     const d1 = D3ForceGraph.calculateControlPoint(source, target);
-    var radius = this.igraphConfig.nodeSize + 3;
+    const radius = this.igraphConfig.nodeSize + 3;
 
     // Start
-    var dx = d1.x - source.x;
-    var dy = d1.y - source.y;
-    var angle = Math.atan2(dy, dx);
-    var tx = source.x + Math.cos(angle) * radius;
-    var ty = source.y + Math.sin(angle) * radius;
+    let dx = d1.x - source.x;
+    let dy = d1.y - source.y;
+    let angle = Math.atan2(dy, dx);
+    const tx = source.x + Math.cos(angle) * radius;
+    const ty = source.y + Math.sin(angle) * radius;
 
     // End
     dx = target.x - d1.x;
     dy = target.y - d1.y;
     angle = Math.atan2(dy, dx);
-    var ux = target.x - Math.cos(angle) * radius;
-    var uy = target.y - Math.sin(angle) * radius;
+    const ux = target.x - Math.cos(angle) * radius;
+    const uy = target.y - Math.sin(angle) * radius;
 
     return "M" + tx + "," + ty + "S" + d1.x + "," + d1.y + " " + ux + "," + uy;
   }
@@ -1260,9 +1261,9 @@ export class D3ForceGraph implements GraphRenderer {
   }
 
   private static computeImageData(d: D3Node, config: IGraphConfig): string {
-    let propValue = <string>GraphData.getNodePropValue(d, config.nodeIconKey) || "";
+    const propValue = <string>GraphData.getNodePropValue(d, config.nodeIconKey) || "";
     // Trim leading and trailing spaces to make comparison more forgiving.
-    let value = config.iconsMap[propValue.trim()];
+    const value = config.iconsMap[propValue.trim()];
     if (!value) {
       return undefined;
     }
@@ -1288,7 +1289,7 @@ export class D3ForceGraph implements GraphRenderer {
       // clear icons
       this.g.selectAll(".node .icon").attr("xlink:href", undefined);
     }
-    this.g.selectAll(".node .icon-background").attr("fill-opacity", (d: D3Node) => {
+    this.g.selectAll(".node .icon-background").attr("fill-opacity", () => {
       return config.nodeIconKey ? 1 : 0;
     });
     this.g.selectAll(".node text.caption").text((d: D3Node) => {

src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.ts

@@ -18,7 +18,6 @@ export interface GremlinSimpleClientParameters {
 
 export interface Result {
   requestId: string; // Can be null
-  //eslint-disable-next-line
   data: any;
   requestCharge: number; // RU cost
 }
@@ -31,7 +30,6 @@ export interface GremlinRequestMessage {
   args:
     | {
         gremlin: string;
-        //eslint-disable-next-line
         bindings: {};
         language: string;
       }
@@ -56,7 +54,6 @@ export interface GremlinResponseMessage {
     message: string;
   };
   result: {
-    //eslint-disable-next-line
     data: any;
   };
 }
@@ -77,7 +74,7 @@ export class GremlinSimpleClient {
     this.requestsToSend = {};
   }
 
-  public connect(): void {
+  public connect() {
     if (this.ws) {
       if (this.ws.readyState === WebSocket.CONNECTING) {
         // Wait until it connects to execute all requests
@@ -109,10 +106,9 @@ export class GremlinSimpleClient {
     return new WebSocket(endpoint);
   }
 
-  public close(): void {
+  public close() {
     if (this.ws && this.ws.readyState !== WebSocket.CLOSING && this.ws.readyState !== WebSocket.CLOSED) {
       const msg = `Disconnecting from ${this.params.endpoint} as ${this.params.user}`;
-      //eslint-disable-next-line
       console.log(msg);
       if (this.params.infoCallback) {
         this.params.infoCallback(msg);
@@ -147,7 +143,7 @@ export class GremlinSimpleClient {
     }
   }
 
-  public onMessage(msg: MessageEvent): void {
+  public onMessage(msg: MessageEvent) {
     if (!msg) {
       if (this.params.failureCallback) {
         this.params.failureCallback(null, "onMessage called with no message");
@@ -198,10 +194,8 @@ export class GremlinSimpleClient {
         }
         break;
       case 407: // Request authentication
-        {
-          const challengeResponse = this.buildChallengeResponse(this.pendingRequests[requestId]);
-          this.sendGremlinMessage(challengeResponse);
-        }
+        const challengeResponse = this.buildChallengeResponse(this.pendingRequests[requestId]);
+        this.sendGremlinMessage(challengeResponse);
         break;
       case 401: // Unauthorized
         delete this.pendingRequests[requestId];
@@ -273,7 +267,7 @@ export class GremlinSimpleClient {
   }
 
   public buildChallengeResponse(request: GremlinRequestMessage): GremlinRequestMessage {
-    const args = {
+    var args = {
       SASL: GremlinSimpleClient.utf8ToB64("\0" + this.params.user + "\0" + this.params.password),
     };
     return {
@@ -284,9 +278,9 @@ export class GremlinSimpleClient {
     };
   }
 
-  public static utf8ToB64(utf8Str: string): string {
+  public static utf8ToB64(utf8Str: string) {
     return btoa(
-      encodeURIComponent(utf8Str).replace(/%([0-9A-F]{2})/g, (match, p1) => {
+      encodeURIComponent(utf8Str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
         return String.fromCharCode(parseInt(p1, 16));
       })
     );
@@ -297,13 +291,12 @@ export class GremlinSimpleClient {
    * mimeLength + mimeType + serialized message
    * @param requestMessage
    */
-  //eslint-disable-next-line
   public static buildGremlinMessage(requestMessage: {}): Uint8Array {
     const mimeType = "application/json";
-    const serializedMessage = mimeType + JSON.stringify(requestMessage);
+    let serializedMessage = mimeType + JSON.stringify(requestMessage);
     const encodedMessage = new TextEncoder().encode(serializedMessage);
 
-    const binaryMessage = new Uint8Array(1 + encodedMessage.length);
+    let binaryMessage = new Uint8Array(1 + encodedMessage.length);
     binaryMessage[0] = mimeType.length;
 
     for (let i = 0; i < encodedMessage.length; i++) {
@@ -312,19 +305,19 @@ export class GremlinSimpleClient {
     return binaryMessage;
   }
 
-  private onOpen() {
+  private onOpen(event: any) {
     this.executeRequestsToSend();
   }
 
   private executeRequestsToSend() {
-    for (const requestId in this.requestsToSend) {
+    for (let requestId in this.requestsToSend) {
       const request = this.requestsToSend[requestId];
       this.sendGremlinMessage(request);
       this.pendingRequests[request.requestId] = request;
       delete this.requestsToSend[request.requestId];
     }
   }
-  //eslint-disable-next-line
+
   private onError(err: any) {
     if (this.params.failureCallback) {
       this.params.failureCallback(null, err);
@@ -346,9 +339,9 @@ export class GremlinSimpleClient {
    * RFC4122 version 4 compliant UUID
    */
   private static uuidv4() {
-    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
-      const r = (Math.random() * 16) | 0,
-        v = c === "x" ? r : (r & 0x3) | 0x8;
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+      var r = (Math.random() * 16) | 0,
+        v = c == "x" ? r : (r & 0x3) | 0x8;
       return v.toString(16);
     });
   }

src/Explorer/Notebook/NotebookComponent/reducers.ts

@@ -50,7 +50,6 @@ export const coreReducer = (state: CoreRecord, action: Action) => {
         .setIn(path.concat("language"), kernelspecs.language);
     }
     default:
-      //eslint-disable-next-line
       return nteractReducers.core(state as any, action as any);
   }
 };

src/Explorer/Notebook/NotebookContentClient.ts

@@ -228,12 +228,11 @@ export class NotebookContentClient {
 
   public async readFileContent(filePath: string): Promise<string> {
     const xhr = await this.contentProvider.get(this.getServerConfig(), filePath, { content: 1 }).toPromise();
-    //eslint-disable-next-line
     const content = (xhr.response as any).content;
     if (!content) {
       throw new Error("No content read");
     }
-    //eslint-disable-next-line
+
     const format = (xhr.response as any).format;
     switch (format) {
       case "text":