random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-28 05:11:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initial Move from Azure DevOps to GitHub

Browse Source
This commit is contained in:
Steve Faulkner
2020-05-25 21:30:55 -05:00
commit 36581fb6d9
986 changed files with 195242 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
src/Explorer/Graph/GraphExplorerComponent/GraphVizComponent.tsx Normal file
View File

@@ -0,0 +1,172 @@
import * as React from "react";
import { D3ForceGraph, D3ForceGraphParameters } from "./D3ForceGraph";
export interface GraphVizComponentProps {
forceGraphParams: D3ForceGraphParameters;
}
/**
* Both React and D3 are modifying the DOM and therefore should not share control.
* The approach taken here is to block React updates and let d3 take control of the dom and do its thing.
*/
export class GraphVizComponent extends React.Component<GraphVizComponentProps> {
private forceGraph: D3ForceGraph;
private rootNode: Element;
public constructor(props: GraphVizComponentProps) {
super(props);
this.forceGraph = new D3ForceGraph(this.props.forceGraphParams);
}
public componentDidMount(): void {
this.forceGraph.init(this.rootNode);
}
public shouldComponentUpdate(): boolean {
// Prevents component re-rendering
return false;
}
public componentWillUnmount(): void {
this.forceGraph.destroy();
}
public render(): JSX.Element {
return (
<svg id="maingraph" ref={(elt: Element) => this.setRef(elt)}>
<title>Main Graph</title>
<defs>
<g id="loadMoreIcon">
{/* svg load more icon inlined as-is here: remove the style="fill:#374649;" so we can override it */}
<svg
role="img"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="30px"
height="16px"
viewBox="0 0 30 16"
style={
{
/*enableBackground: 'new 0 0 30 16'*/
}
}
xmlSpace="preserve"
>
<g style={{ opacity: 1 }}>
<g>
<g style={{ opacity: 0.4 }}>
<ellipse
transform="matrix(0.9903 -0.1393 0.1393 0.9903 -1.4513 2.1015)"
cx="14.3"
cy="11.4"
rx="4.1"
ry="4.1"
/>
</g>
<g style={{ opacity: 0.4 }}>
<ellipse
transform="matrix(0.3256 -0.9455 0.9455 0.3256 11.2761 30.3703)"
cx="26.9"
cy="7.3"
rx="3.1"
ry="3.1"
/>
</g>
<line
style={{ opacity: 0.5, fill: "none", stroke: "#BABCBE", strokeMiterlimit: 10 }}
x1="14.4"
y1="7.3"
x2="14.6"
y2="2.5"
/>
<line
style={{ opacity: 0.5, fill: "none", stroke: "#BABCBE", strokeMiterlimit: 10 }}
x1="17.6"
y1="1.1"
x2="24.5"
y2="5.4"
/>
<g style={{ opacity: 0.4 }}>
<ellipse
transform="matrix(0.932 -0.3625 0.3625 0.932 -0.9642 1.3456)"
cx="3.1"
cy="3.2"
rx="3.1"
ry="3.1"
/>
</g>
<line
style={{ opacity: 0.5, fill: "none", stroke: "#BABCBE", strokeMiterlimit: 10 }}
x1="10.6"
y1="1.1"
x2="6.1"
y2="2.5"
/>
</g>
</g>
</svg>
{/* <!-- End of load more icon --> */}
{/* <!-- Make whole area clickable instead of the shape --> */}
<rect x="0px" y="0px" width="32px" height="17px" style={{ fillOpacity: 0 }} />
</g>
<marker
id={`${this.forceGraph.getArrowHeadSymbolId()}-marker`}
viewBox="0 -5 10 10"
refX="8"
refY="0"
markerWidth="10"
markerHeight="10"
orient="auto"
markerUnits="userSpaceOnUse"
fill="#aaa"
stroke="#aaa"
fillOpacity="1"
strokeOpacity="1"
>
<path d="M0,-4L10,0L0,4" style={{ stroke: "none" }} />
</marker>
</defs>
<symbol>
<g id="triangleRight">
<svg
role="img"
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 6 10"
style={
{
/*enableBackground: 'new 0 0 6 10'*/
}
}
xmlSpace="preserve"
width="20px"
height="20px"
>
<polygon points="0.5,10 0.5,0 5.2,5 " />
</svg>
{/*<!-- Make whole area clickable instead of the shape -->*/}
<rect x="0px" y="0px" width="15px" height="20px" style={{ fillOpacity: 0 }} />
</g>
</symbol>
<symbol>
<g id={`${this.forceGraph.getArrowHeadSymbolId()}-nonMarker`}>
<polygon points="0,0 -8,-3 -8,3 " />
</g>
</symbol>
</svg>
);
}
private setRef(element: Element): void {
this.rootNode = element;
}
}