@splunk/visualizations 24.6.0 → 24.7.0

package/Area.js

@@ -582,7 +582,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "24.6.0 - 539dff0ca",
+      "data-splunk-visualization-version": "24.7.0 - c7389a161",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -1555,7 +1555,7 @@ var Cover = styled_components_1.default.div.withConfig({
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "24.6.0 - 539dff0ca"
+  'data-splunk-visualization-version': "24.7.0 - c7389a161"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"

package/Bar.js

@@ -582,7 +582,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "24.6.0 - 539dff0ca",
+      "data-splunk-visualization-version": "24.7.0 - c7389a161",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -1555,7 +1555,7 @@ var Cover = styled_components_1.default.div.withConfig({
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "24.6.0 - 539dff0ca"
+  'data-splunk-visualization-version': "24.7.0 - c7389a161"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"

package/Bubble.js

@@ -582,7 +582,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "24.6.0 - 539dff0ca",
+      "data-splunk-visualization-version": "24.7.0 - c7389a161",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -1555,7 +1555,7 @@ var Cover = styled_components_1.default.div.withConfig({
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "24.6.0 - 539dff0ca"
+  'data-splunk-visualization-version': "24.7.0 - c7389a161"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"

package/ChoroplethSvg.js

@@ -582,7 +582,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "24.6.0 - 539dff0ca",
+      "data-splunk-visualization-version": "24.7.0 - c7389a161",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -1550,7 +1550,7 @@ var Cover = styled_components_1.default.div.withConfig({
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "24.6.0 - 539dff0ca"
+  'data-splunk-visualization-version': "24.7.0 - c7389a161"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -2391,9 +2391,19 @@ var SvgMutator = /*#__PURE__*/function () {
       var NONCE = window.crypto.getRandomValues(new Uint32Array(4)).join('');
       var PARENT_ID = window.crypto.getRandomValues(new Uint32Array(4)).join('');
       var html = SvgMutator.getIframeHtml(NONCE, PARENT_ID, svgNode);
-      var b64 = btoa(html);
+      /**
+       * In the previous implementation, we encoded the html into base64 format and constructed a Data URI from it,
+       * but Chrome has a size limit of 2MB for Data URIs, therefore SVGs of size > 2MB do not render (https://splunk.atlassian.net/browse/SCP-54560)
+       * Alternatively, Chrome has a higher size limit for Blobs (500Mib? - https://source.chromium.org/chromium/chromium/src/+/main:storage/browser/blob/README.md)
+       * and we can create Blob URLs via URL.createObjectURL(), using the URL API together with blobs via the File API
+       */
+
+      var blob = new Blob([html], {
+        type: 'text/html'
+      });
+      var blobURL = URL.createObjectURL(blob);
       var iframe = React.createElement('iframe', {
-        src: "data:text/html;base64,".concat(b64),
+        src: blobURL,
         style: {
           position: 'absolute',
           height: '100%',
@@ -2422,6 +2432,11 @@ var SvgMutator = /*#__PURE__*/function () {
           if (!div) {
             // called on unmount
             SvgMutator.removeIframeEventListener(div, messageListener, intervalID, refCallback);
+
+            if (blobURL) {
+              URL.revokeObjectURL(blobURL);
+            }
+
             return;
           }