From beaf6f53326fe8c148b7fa0283f588a61a9fc99b Mon Sep 17 00:00:00 2001
From: shashank-nx <shashank.dixit@successive.tech>
Date: Sat, 29 Apr 2023 01:37:39 +0530
Subject: [PATCH] Add treeGraph expand and download feature

---
 Graphs/TreeGraph/index.js | 115 ++++++++++++++++++++++++++++++--------
 1 file changed, 91 insertions(+), 24 deletions(-)

diff --git a/Graphs/TreeGraph/index.js b/Graphs/TreeGraph/index.js
index c0fa7624..1b222129 100644
--- a/Graphs/TreeGraph/index.js
+++ b/Graphs/TreeGraph/index.js
@@ -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';
@@ -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;
@@ -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);
@@ -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 () => {
+        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;
@@ -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>
+            <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 = {