From 67a47dbead2ea4e06c637bc50c64fbdc2c66a546 Mon Sep 17 00:00:00 2001 From: "Yolanda M. Davis" Date: Wed, 31 Aug 2016 21:04:49 -0400 Subject: [PATCH] NIFI-2251 - Initial commit for client side provenance lineage svg download. - css styling adjustments, changes for svg replace - Addressing some style/spacing. - This closes #982. --- .../provenance/provenance-content.jsp | 3 +- .../src/main/webapp/css/provenance.css | 7 +- .../main/webapp/images/iconExportLineage.png | Bin 405 -> 0 bytes .../js/nf/provenance/nf-provenance-lineage.js | 160 +++++++++++------- 4 files changed, 105 insertions(+), 65 deletions(-) delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/iconExportLineage.png diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-content.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-content.jsp index 6312f69c02..79269d827c 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-content.jsp +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-content.jsp @@ -56,7 +56,7 @@
- +
@@ -71,4 +71,5 @@
+ \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/provenance.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/provenance.css index f65011d51f..d787c4b081 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/provenance.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/provenance.css @@ -372,9 +372,11 @@ div.content-detail-value { float: left; height: 16px; width: 16px; - background: url("../images/iconExportLineage.png") no-repeat scroll left center transparent; + font-size: 16px; + color: #004849; cursor: pointer; - margin-right: 2px; + margin-right: 4px; + margin-top: 2px; } #provenance-lineage-closer { @@ -385,6 +387,7 @@ div.content-detail-value { color: #004849; cursor: pointer; margin-right: 5px; + margin-top: 2px; } #provenance-lineage-slider-container { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/iconExportLineage.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/iconExportLineage.png deleted file mode 100755 index 19a436018d8643b2c890bf19062bd3cfd66b0cbc..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 405 zcmV;G0c!qqHPP{Xr0HY?Am0 zK7o0JbT$^Jm8A>YZ+rr^5fc$2CTWatsD+m%7T$*Q$Y~@_wKMzMkDcEPOc@41(JJMD z3n1au>q?44zc5TQ1CUH_o@cU!{O;a9iDZh0`_|TKYNOF^H6Jw~OcU|$&Fvi%fLMHy zOs)W627WtMqXAB@`!rJax*Y%~02rrfYY!^X=$xHcPtogkcz=7<08>eEQ?yDIz*bTi zK2NRy(_dHvs=zf+1M(iE?&T;cjI=BdTh^KJZ3@9CTBUiQ;X!oRN{WNDEDr%R#Q5vn zH9$j*NrXQ|]*?)d="M[\s]?([^\s]+?)[\s,]([^\s]+?)[\s]?L[\s]?([^\s]+?)[\s,]([^\s]+?)[\s]?"(.*?)>/g, function (match, before, rawMoveX, rawMoveY, rawLineX, rawLineY, after) { - // // this regex captures the content before and after the d attribute in order to ensure that it contains the link class. - // // within the svg image, there are other paths that are (within markers) that we do not want to offset - // if (before.indexOf('link') === -1 && after.indexOf('link') === -1) { - // return match; - // } - // - // var moveX = parseFloat(rawMoveX) - offsetX; - // var moveY = parseFloat(rawMoveY) - offsetY; - // var lineX = parseFloat(rawLineX) - offsetX; - // var lineY = parseFloat(rawLineY) - offsetY; - // return ''; - // }); - // - // // adjust node positioning based on the offset of the bounding box - // svg = svg.replace(/]*?)transform="translate\([\s]?([^\s]+?)[\s,]([^\s]+?)[\s]?\)"(.*?)>/g, function (match, before, rawX, rawY, after) { - // // this regex captures the content before and after the transform attribute in order to ensure that it contains the - // // node class. only node groups are translated with absolute coordinates since all other translated groups fall under - // // a parent that is already positioned. this makes their translation relative and not appropriate for this adjustment - // if (before.indexOf('node') === -1 && after.indexOf('node') === -1) { - // return match; - // } - // - // var x = parseFloat(rawX) - offsetX; - // var y = parseFloat(rawY) - offsetY; - // return ''; - // }); - // - // // namespaces - // svg = svg.replace(/^]*?)d="M[\s]?([^\s]+?)[\s,]([^\s]+?)[\s]?L[\s]?([^\s]+?)[\s,]([^\s]+?)[\s]?"(.*?)>/g, function (match, before, rawMoveX, rawMoveY, rawLineX, rawLineY, after) { + // this regex captures the content before and after the d attribute in order to ensure that it contains the link class. + // within the svg image, there are other paths that are (within markers) that we do not want to offset + if (before.indexOf('link') === -1 && after.indexOf('link') === -1) { + return match; + } + + var moveX = parseFloat(rawMoveX) - offsetX; + var moveY = parseFloat(rawMoveY) - offsetY; + var lineX = parseFloat(rawLineX) - offsetX; + var lineY = parseFloat(rawLineY) - offsetY; + return ''; + }); + + // adjust node positioning based on the offset of the bounding box + svg = svg.replace(/]*?)transform="translate\([\s]?([^\s]+?)[\s,]([^\s]+?)[\s]?\)"(.*?)>/g, function (match, before, rawX, rawY, after) { + // this regex captures the content before and after the transform attribute in order to ensure that it contains the + // node class. only node groups are translated with absolute coordinates since all other translated groups fall under + // a parent that is already positioned. this makes their translation relative and not appropriate for this adjustment + if (before.indexOf('node') === -1 && after.indexOf('node') === -1) { + return match; + } + + var x = parseFloat(rawX) - offsetX; + var y = parseFloat(rawY) - offsetY; + return ''; + }); + + // namespaces + svg = svg.replace(/]*)/, function (match) { + var svgString = match; + var nsSVG = ' xmlns="http://www.w3.org/2000/svg"'; + var nsXlink = ' xmlns:xlink="http://www.w3.org/1999/xlink"'; + var version = ' version="1.1"'; + + if (svgString.indexOf(nsSVG) === -1) { + svgString += nsSVG; + } + + if (svgString.indexOf(nsXlink) === -1) { + svgString += nsXlink; + } + + if (svgString.indexOf(version) === -1) { + svgString += version; + } + + return svgString; + }); + + // doctype + svg = '\n' + svg; + + downloadSvgFile(svg); + }); initLineageQueryDialog(); },