random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2024-11-28 16:36:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix eslint issues for D3ForceGraph and test file

Browse Source
This commit is contained in:
vaidankarswapnil 2021-10-19 13:54:57 +05:30
parent 55837db65b
commit 5b6a1b345f
3 changed files with 61 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.eslintignore
View File

@ -46,8 +46,8 @@ src/Explorer/DataSamples/DataSamplesUtil.test.ts
src/Explorer/DataSamples/DataSamplesUtil.ts src/Explorer/DataSamples/DataSamplesUtil.ts
src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.test.ts src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.test.ts
src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.ts src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.ts
src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.test.ts # src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.test.ts
src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts # src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts
src/Explorer/Graph/GraphExplorerComponent/EdgeInfoCache.ts src/Explorer/Graph/GraphExplorerComponent/EdgeInfoCache.ts
src/Explorer/Graph/GraphExplorerComponent/GraphData.test.ts src/Explorer/Graph/GraphExplorerComponent/GraphData.test.ts
src/Explorer/Graph/GraphExplorerComponent/GraphData.ts src/Explorer/Graph/GraphExplorerComponent/GraphData.ts

4
src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.test.ts
View File

@ -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 GraphTab from "../../Tabs/GraphTab";
import { D3Link, D3Node, GraphData } from "../GraphExplorerComponent/GraphData"; import { D3Link, D3Node, GraphData } from "../GraphExplorerComponent/GraphData";
import { D3ForceGraph, D3GraphNodeData, LoadMoreDataAction } from "./D3ForceGraph"; import { D3ForceGraph, D3GraphNodeData, LoadMoreDataAction } from "./D3ForceGraph";
@ -70,6 +71,7 @@ describe("D3ForceGraph", () => {
forceGraph = new D3ForceGraph({ forceGraph = new D3ForceGraph({
igraphConfig: GraphTab.createIGraphConfig(), igraphConfig: GraphTab.createIGraphConfig(),
onHighlightedNode: sinon.spy(), onHighlightedNode: sinon.spy(),
//eslint-disable-next-line
onLoadMoreData: (action: LoadMoreDataAction): void => {}, onLoadMoreData: (action: LoadMoreDataAction): void => {},
// parent to graph // parent to graph

111
src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts
View File

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