GDB-8986 Fix svg downloads (#1095)

* GDB-8986 Fix svg downloads ## What On pages class relationships, class hierarchy and domain range graph, the export svg button yields a broken file ## Why The selector for the svg export is too broad "svg" and selects all svgs on the screen ## How - added a parameter to the export function to take a selector and passed appropriate selectors
Ontotext-AD · Oct 20, 2023 · 2c81d5e · 2c81d5e
1 parent 2c23353
commit 2c81d5e
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 12 deletions.
diff --git a/src/js/angular/graphexplore/directives/dependencies-chord.directive.js b/src/js/angular/graphexplore/directives/dependencies-chord.directive.js
@@ -197,8 +197,7 @@ function dependenciesChordDirective($repositories, GraphDataRestService) {
              */
             function prepareForSVGImageExport() {
                 // convert selected html to base64
-                const imgSrc = SVG.Export.generateBase64ImageSource();
-
+                const imgSrc = SVG.Export.generateBase64ImageSource('.dependencies-chord svg');
                 // set the binary image and a name for the downloadable file on the export button
                 d3.select(this).attr({
                     href: imgSrc,

diff --git a/src/js/angular/graphexplore/directives/domain-range-graph.directive.js b/src/js/angular/graphexplore/directives/domain-range-graph.directive.js
@@ -145,7 +145,7 @@ function domainRangeGraphDirective($rootScope, $window, $repositories, GraphData
             $("defs").append('<style type="text/css"><![CDATA[' + cssRules + ']]></style>');
 
             // convert selected html to base64
-            var imgSrc = SVG.Export.generateBase64ImageSource();
+            var imgSrc = SVG.Export.generateBase64ImageSource("#domain-range svg");
 
             // set the binary image and a name for the downloadable file on the export button
             d3.select(this).attr({

diff --git a/src/js/angular/graphexplore/directives/rdf-class-hierarchy.directive.js b/src/js/angular/graphexplore/directives/rdf-class-hierarchy.directive.js
@@ -106,7 +106,7 @@ function classHierarchyDirective($rootScope, $location, GraphDataRestService, $w
                 .style("opacity", 1);
 
             // convert selected html to base64
-            var imgSrc = SVG.Export.generateBase64ImageSource();
+            var imgSrc = SVG.Export.generateBase64ImageSource("#classChart svg");
 
             // set the binary image and a name for the downloadable file on the export button
             d3.select(this).attr({

diff --git a/src/js/lib/common/svg-export.js b/src/js/lib/common/svg-export.js
@@ -1,22 +1,25 @@
+import * as d3 from "d3/build/d3";
+
 var SVG = SVG || {};
 
 SVG.Export = function () {
     function getCSSRules(cssSourceFilePath) {
-        var cssRules = $('link[href="' + cssSourceFilePath + '"]')[0].sheet.rules;
-        var cssStr = "";
+        const cssRules = $('link[href="' + cssSourceFilePath + '"]')[0].sheet.rules;
+        let cssStr = "";
         _.each(cssRules, function (value) {
             cssStr += value.cssText;
         });
         return cssStr;
     }
 
-    function generateBase64ImageSource() {
+    function generateBase64ImageSource(svgSelectorClass) {
+        if (!svgSelectorClass) {
+            svgSelectorClass = "svg";
+        }
         // add needed xml namespace
-        var exportSvg = d3.selectAll("svg")
-            .attr({
-                version: "1.1",
-                xmlns: "http://www.w3.org/2000/svg"
-            })
+        const exportSvg = d3.selectAll(svgSelectorClass)
+            .attr("version", "1.1")
+            .attr("xmlns", "http://www.w3.org/2000/svg")
             .node().parentNode.innerHTML;
 
         // convert selected html to base64