Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add treeGraph expand and download feature #500

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add treeGraph expand and download feature #500

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 91 additions & 24 deletions Graphs/TreeGraph/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
tree,
hierarchy
} from 'd3';
import * as htmlToImage from 'html-to-image';
import { styled } from '@material-ui/core/styles';

import WithConfigHOC from '../../HOC/WithConfigHOC';
Expand All @@ -17,6 +18,7 @@ import './styles.css';
import { isFunction } from '../../utils/helpers';
import { MARGIN_TOP, Text_Default_X, TREE_NODE_DEFAUKT_X, TREE_NODE_DEFAUKT_Y } from '../../constants';
import { isEmpty } from 'lodash';
import { Button } from 'ui-components';

let root = null;
let treeData = null;
Expand Down Expand Up @@ -208,6 +210,7 @@ const TreeGraph = (props) => {
xLabelRotate,
} = properties;

let count = 0;
const isFirst = useRef(true);
const [nodeElement, setNodeElement] = useState(null);
const [nodes, setNodes] = useState(null);
Expand All @@ -228,6 +231,67 @@ const TreeGraph = (props) => {
}
}, [props.params, props.data, nodeElement, pageNo, kids]);

const downloadTreeGraph = async (name) => {
count++;
await htmlToImage.toJpeg(document.getElementsByClassName('tree-graph').item(0), { quality: 0.95 })
.then(function (dataUrl) {
let link = document.createElement('a');
link.download = `${name}-snapshot-${count}.jpeg`;
link.href = dataUrl;
link.click();
});
await new Promise(resolve => setTimeout(resolve, 2000));
}

const onDownloadClick = async () => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could we use onClick to with useRef with toPng rather than use all jQuery to look up the internals of the node for this?

const enterpriseId = `node-${nodes[0].id}`;
const enterpriseName = nodes[0].data.name;
const enterprise = document.getElementById(enterpriseId);
await enterprise.firstChild.click();
await new Promise(resolve => setTimeout(resolve, 2000));
const domainIds = document.querySelectorAll('[id^=domain]');
if (domainIds.length) {
let domainCount = 0;
while (domainCount < domainIds.length) {
const domainName = await domainIds[domainCount].firstChild.firstChild.innerHTML;
const domainId = domainIds[domainCount].getAttribute('id');
document.getElementById(domainId).click();
await new Promise(resolve => setTimeout(resolve, 2000));
const zoneIds = document.querySelectorAll('[id^=zone]');
if (zoneIds.length) {
let zoneCount = 0;
while (zoneCount < zoneIds.length) {
const zoneId = zoneIds[zoneCount].getAttribute('id');
const zoneName = await zoneIds[zoneCount].firstChild.firstChild.innerHTML;
document.getElementById(zoneId).click();
await new Promise(resolve => setTimeout(resolve, 2000));
const subnetIds = document.querySelectorAll('[id^=subnet]');
if (subnetIds.length) {
let subnetCount = 0;
while (subnetCount < subnetIds.length) {
const subnetId = subnetIds[subnetCount].getAttribute('id');
const subnetName = await subnetIds[subnetCount].firstChild.firstChild.innerHTML;
document.getElementById(subnetId).click();
await new Promise(resolve => setTimeout(resolve, 2000));
await downloadTreeGraph(enterpriseName + '_' + domainName + '_' + zoneName + '_' + subnetName);
subnetCount++;
}
} else {
await downloadTreeGraph(enterpriseName + '_' + domainName + '_' + zoneName);
}
zoneCount++;
}
} else {
await downloadTreeGraph(enterpriseName + '_' + domainName);
}
domainCount++;
}
} else {
await downloadTreeGraph(enterpriseName);

}
}

// Toggle children on click.
const click = d => {
let collapseTree = false;
Expand Down Expand Up @@ -593,30 +657,33 @@ const TreeGraph = (props) => {
} = props;

return (
<div className='tree-graph' style={{ height: '100%', background: '#FCFCFC' }}>
{!isEmpty(nodes) && nodes.map((node) => {
return (
<div onClick={() => !graphRenderView ? click(node) : props.OnChangleContext(node)}>
{ renderRectNode(node, props, rectNode)}
</div>
);
})}
<svg
height={'100%'}
className='svgWidth'
ref={(node) => {
setNodeElement(node);
select(node)
.call(zoom()
.scaleExtent([1 / 2, 8])
.on('zoom', zoomed)
)
}
}
>
<g className='tree-graph-container' transform={transformAttr}></g>
</svg>
</div>
<>
<Button onClick={onDownloadClick} id="button-treeGraph" width={'50px'}>Download</Button>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Download should come from translation

<div className='tree-graph' style={{ height: '100%', background: '#FCFCFC' }}>
{!isEmpty(nodes) && nodes.map((node) => {
return (
<div onClick={() => !graphRenderView ? click(node) : props.OnChangleContext && props.OnChangleContext(node)}>
{renderRectNode(node, props, rectNode)}
</div>
);
})}
<svg
height={'100%'}
className='svgWidth'
ref={(node) => {
setNodeElement(node);
select(node)
.call(zoom()
.scaleExtent([1 / 2, 8])
.on('zoom', zoomed)
)
}
}
>
<g className='tree-graph-container' transform={transformAttr}></g>
</svg>
</div>
</>
)
}
TreeGraph.propTypes = {
Expand Down