ATLAS-3031: UI : Allow user to export the lineage in PNG formatt

dashboardv2/public/css/scss/graph.scss

@@ -422,3 +422,7 @@ span#zoom_in {
         word-break: break-all;
     }
 }
+
+.hidden-svg {
+    visibility: hidden;
+}
\ No newline at end of file

dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html

@@ -90,6 +90,11 @@
     </div>
     <div class="graph-button-group pull-right">
         <div>
+            <button data-id="saveSvg" class="disabled btn btn-action btn-gray btn-sm" title="Export to PNG">
+                <i class="fa fa-camera"></i>
+            </button>
+        </div>
+        <div>
             <button type="button" data-id="setting-toggler" class="btn btn-action btn-gray btn-sm"><i class="fa fa-gear"></i></button>
         </div>
         <div>
@@ -127,12 +132,11 @@
     <div class="fontLoader">
         <i class="fa fa-refresh fa-spin-custom"></i>
     </div>
-    <canvas width="960" height="500" style="display:none; position: absolute;"></canvas>
     <div class="legends pull-left" style="height: 25px; padding: 2px;">
         <span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-circle-o fa-fw" aria-hidden="true"></i>Current Entity</span>
         <span style="margin-right: 8px; color:#df9b00;"><i class="fa fa-long-arrow-right fa-fw" aria-hidden="true"></i>Lineage</span>
         <span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-long-arrow-right fa-fw" aria-hidden="true"></i>Impact</span>
     </div>
-    <!-- <svg width="100%" height="calc(100% - 28px)" preserveAspectRatio="xMidYMid meet" viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg> -->
     <svg width="{{width}}" height="{{height}}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"></svg>
 </div>
+<div class="hidden-svg"></div>
\ No newline at end of file