@splunk/visualizations 28.0.0 → 28.2.0

package/Markdown.js

@@ -123,59 +123,59 @@ var defaultImport7 = __toESM(require("styled-components"));
 __reExport(styled_components_exports, require("styled-components"));
 var styled_components_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
 
-// esm-externals:prop-types
-var prop_types_exports = {};
-__export(prop_types_exports, {
-  default: () => prop_types_default
-});
-var defaultImport8 = __toESM(require("prop-types"));
-__reExport(prop_types_exports, require("prop-types"));
-var prop_types_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
-
 // esm-externals:@splunk/themes
 var themes_exports = {};
 __export(themes_exports, {
   default: () => themes_default
 });
-var defaultImport9 = __toESM(require("@splunk/themes"));
+var defaultImport8 = __toESM(require("@splunk/themes"));
 __reExport(themes_exports, require("@splunk/themes"));
-var themes_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
+var themes_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
 
 // esm-externals:@splunk/react-ui/Heading
 var Heading_exports = {};
 __export(Heading_exports, {
   default: () => Heading_default
 });
-var defaultImport10 = __toESM(require("@splunk/react-ui/Heading"));
+var defaultImport9 = __toESM(require("@splunk/react-ui/Heading"));
 __reExport(Heading_exports, require("@splunk/react-ui/Heading"));
-var Heading_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
+var Heading_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
 
 // esm-externals:@splunk/react-ui/Paragraph
 var Paragraph_exports = {};
 __export(Paragraph_exports, {
   default: () => Paragraph_default
 });
-var defaultImport11 = __toESM(require("@splunk/react-ui/Paragraph"));
+var defaultImport10 = __toESM(require("@splunk/react-ui/Paragraph"));
 __reExport(Paragraph_exports, require("@splunk/react-ui/Paragraph"));
-var Paragraph_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
+var Paragraph_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
 
 // esm-externals:@splunk/react-ui/List
 var List_exports = {};
 __export(List_exports, {
   default: () => List_default
 });
-var defaultImport12 = __toESM(require("@splunk/react-ui/List"));
+var defaultImport11 = __toESM(require("@splunk/react-ui/List"));
 __reExport(List_exports, require("@splunk/react-ui/List"));
-var List_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
+var List_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
 
 // esm-externals:@splunk/react-ui/Code
 var Code_exports = {};
 __export(Code_exports, {
   default: () => Code_default
 });
-var defaultImport13 = __toESM(require("@splunk/react-ui/Code"));
+var defaultImport12 = __toESM(require("@splunk/react-ui/Code"));
 __reExport(Code_exports, require("@splunk/react-ui/Code"));
-var Code_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
+var Code_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
+
+// esm-externals:@splunk/react-ui/Button
+var Button_exports = {};
+__export(Button_exports, {
+  default: () => Button_default
+});
+var defaultImport13 = __toESM(require("@splunk/react-ui/Button"));
+__reExport(Button_exports, require("@splunk/react-ui/Button"));
+var Button_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
 
 // esm-externals:@splunk/themes/getSettingsFromThemedProps
 var getSettingsFromThemedProps_exports = {};
@@ -267,6 +267,15 @@ var defaultImport23 = __toESM(require("@splunk/ui-utils/id"));
 __reExport(id_exports, require("@splunk/ui-utils/id"));
 var id_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
 
+// esm-externals:prop-types
+var prop_types_exports = {};
+__export(prop_types_exports, {
+  default: () => prop_types_default
+});
+var defaultImport24 = __toESM(require("prop-types"));
+__reExport(prop_types_exports, require("prop-types"));
+var prop_types_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
+
 // src/common/interfaces/VizActionHandler.ts
 var DefaultVizActionHandler = class {
   focus() {
@@ -360,7 +369,7 @@ SplunkVisualization.propTypes = {
 /**
  *
  */
-SplunkVisualization.defaultProps = {
+SplunkVisualization.defaults = {
   // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
   width: "100%",
   height: INITIAL_HEIGHT,
@@ -381,13 +390,13 @@ var SplunkVisualization_default = SplunkVisualization;
 // src/common/interfaces/DataSource.ts
 var validSortDirs = ["asc", "desc", "none"];
 
-// src/common/hooks/getSorting.ts
+// src/common/hooks/useSorting.ts
 var SortParamsPropTypes = prop_types_exports.shape({
   currentSortKey: prop_types_exports.string,
   currentSortDir: prop_types_exports.oneOf(validSortDirs),
   onSort: prop_types_exports.func
 });
-var getSortingParams = ({ requestParams, onRequestParamsChange }) => {
+var useSortingParams = ({ requestParams, onRequestParamsChange }) => {
   let currentSortKey;
   let currentSortDir;
   const nextSortDirMap = {
@@ -417,14 +426,14 @@ var getSortingParams = ({ requestParams, onRequestParamsChange }) => {
   };
 };
 
-// src/common/hooks/getPagination.ts
+// src/common/hooks/usePagination.ts
 var PaginatorParamsPropTypes = prop_types_exports.shape({
   isPaging: prop_types_exports.bool,
   current: prop_types_exports.number,
   totalPages: prop_types_exports.number,
   onChange: prop_types_exports.func
 });
-var getPaginationParams = ({
+var usePaginationParams = ({
   requestParams,
   meta,
   onRequestParamsChange
@@ -473,18 +482,9 @@ var Message_exports = {};
 __export(Message_exports, {
   default: () => Message_default
 });
-var defaultImport24 = __toESM(require("@splunk/visualizations-shared/Message"));
+var defaultImport25 = __toESM(require("@splunk/visualizations-shared/Message"));
 __reExport(Message_exports, require("@splunk/visualizations-shared/Message"));
-var Message_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
-
-// esm-externals:@splunk/visualizations-shared/colorUtils
-var colorUtils_exports = {};
-__export(colorUtils_exports, {
-  default: () => colorUtils_default
-});
-var defaultImport25 = __toESM(require("@splunk/visualizations-shared/colorUtils"));
-__reExport(colorUtils_exports, require("@splunk/visualizations-shared/colorUtils"));
-var colorUtils_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
+var Message_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
 
 // esm-externals:@splunk/visualizations-shared/SizeAwareWrapper
 var SizeAwareWrapper_exports = {};
@@ -495,6 +495,94 @@ var defaultImport26 = __toESM(require("@splunk/visualizations-shared/SizeAwareWr
 __reExport(SizeAwareWrapper_exports, require("@splunk/visualizations-shared/SizeAwareWrapper"));
 var SizeAwareWrapper_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
 
+// src/common/components/MissingPropsMessage.tsx
+var isMissing = (v) => {
+  return v === null || v === void 0;
+};
+var missingKeys = (keys, target) => keys.filter((k) => isMissing(target[k]));
+var MissingPropsMessage = (props) => {
+  const {
+    width = SplunkVisualization_default.defaults.width,
+    height = SplunkVisualization_default.defaults.height,
+    missingProps,
+    backgroundColor
+  } = props;
+  const cachedHandleResize = react_exports.useCallback((w, h) => {
+    setContainerWidth(w);
+    setContainerHeight(h);
+  }, []);
+  const [containerWidth, setContainerWidth] = react_exports.useState(Number(width));
+  const [containerHeight, setContainerHeight] = react_exports.useState(Number(height));
+  return /* @__PURE__ */ react_exports.createElement("div", { style: { width: containerWidth, height: containerHeight, background: backgroundColor } }, /* @__PURE__ */ react_exports.createElement(SizeAwareWrapper_default, { width, height, onResize: cachedHandleResize }), /* @__PURE__ */ react_exports.createElement(
+    Message_default,
+    {
+      "data-test": "message",
+      width,
+      height,
+      message: (0, i18n_exports._)(`Missing property: ${missingProps.join(", ")}`),
+      level: "error"
+    }
+  ));
+};
+var MissingPropsMessage_default = MissingPropsMessage;
+
+// src/common/utils/hocUtils.ts
+var extendStaticWrapperProps = ({
+  Wrapper,
+  Visualization
+}) => {
+  const extendProperties = ["propTypes", "config"];
+  extendProperties.forEach((prop) => {
+    if (Visualization[prop]) {
+      Wrapper[prop] = Visualization[prop];
+    }
+  });
+};
+
+// src/common/hocs/withEditModeCover.tsx
+var Cover = styled_components_default.div`
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+`;
+var Blocker = styled_components_default.div.attrs({
+  "data-splunk-visualization-version": "28.2.0 - 7eea200d8"
+})`
+    position: relative;
+    width: 100%;
+    height: 100%;
+`;
+var withEditModeCover = (Visualization, disableEditModeCover) => {
+  const Wrapper = (props) => {
+    const { mode } = props;
+    const showEditCover = mode === "edit" && !disableEditModeCover;
+    return /* @__PURE__ */ react_exports.createElement(Blocker, null, /* @__PURE__ */ react_exports.createElement(Visualization, __spreadValues({}, props)), showEditCover && /* @__PURE__ */ react_exports.createElement(Cover, { "data-test": "edit-mode-cover" }));
+  };
+  extendStaticWrapperProps({ Wrapper, Visualization });
+  return Wrapper;
+};
+var withEditModeCover_default = withEditModeCover;
+
+// esm-externals:@splunk/visualizations-shared/colorUtils
+var colorUtils_exports = {};
+__export(colorUtils_exports, {
+  default: () => colorUtils_default
+});
+var defaultImport27 = __toESM(require("@splunk/visualizations-shared/colorUtils"));
+__reExport(colorUtils_exports, require("@splunk/visualizations-shared/colorUtils"));
+var colorUtils_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
+
+// esm-externals:@splunk/themes/variables
+var variables_exports = {};
+__export(variables_exports, {
+  default: () => variables_default
+});
+var defaultImport28 = __toESM(require("@splunk/themes/variables"));
+__reExport(variables_exports, require("@splunk/themes/variables"));
+var variables_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
+
 // src/common/hocs/FixedSizeContainer.tsx
 var Item = styled_components_default.div.attrs(({ width }) => ({
   style: {
@@ -545,7 +633,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.0.0 - 0c5f07712",
+        "data-splunk-visualization-version": "28.2.0 - 7eea200d8",
         width,
         height,
         backgroundColor
@@ -558,85 +646,6 @@ var withFixedSizeContainer = (Viz) => {
 };
 var FixedSizeContainer_default = withFixedSizeContainer;
 
-// src/common/components/MissingPropsMessage.tsx
-var isMissing = (v) => {
-  return v === null || v === void 0;
-};
-var missingKeys = (keys, target) => keys.filter((k) => isMissing(target[k]));
-var propTypes = {
-  width: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
-  height: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
-  // eslint-disable-next-line react/no-unused-prop-types
-  backgroundColor: prop_types_exports.string,
-  missingProps: prop_types_exports.arrayOf(prop_types_exports.string)
-};
-var MissingPropsMessage = (props) => {
-  const { width, height, missingProps } = props;
-  return /* @__PURE__ */ react_exports.createElement(
-    Message_default,
-    {
-      "data-test": "message",
-      width,
-      height,
-      message: (0, i18n_exports._)(`Missing property: ${missingProps.join(", ")}`)
-    }
-  );
-};
-MissingPropsMessage.propTypes = propTypes;
-MissingPropsMessage.defaultProps = {
-  width: "100%",
-  height: 250
-};
-var MissingPropsMessage_default = FixedSizeContainer_default(MissingPropsMessage);
-
-// src/common/utils/hocUtils.ts
-var extendStaticWrapperProps = ({
-  Wrapper,
-  Visualization
-}) => {
-  const extendProperties = ["propTypes", "defaultProps", "config"];
-  extendProperties.forEach((prop) => {
-    if (Visualization[prop]) {
-      Wrapper[prop] = Visualization[prop];
-    }
-  });
-};
-
-// src/common/hocs/withEditModeCover.tsx
-var Cover = styled_components_default.div`
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-`;
-var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.0.0 - 0c5f07712"
-})`
-    position: relative;
-    width: 100%;
-    height: 100%;
-`;
-var withEditModeCover = (Visualization, disableEditModeCover) => {
-  const Wrapper = (props) => {
-    const { mode } = props;
-    const showEditCover = mode === "edit" && !disableEditModeCover;
-    return /* @__PURE__ */ react_exports.createElement(Blocker, null, /* @__PURE__ */ react_exports.createElement(Visualization, __spreadValues({}, props)), showEditCover && /* @__PURE__ */ react_exports.createElement(Cover, { "data-test": "edit-mode-cover" }));
-  };
-  extendStaticWrapperProps({ Wrapper, Visualization });
-  return Wrapper;
-};
-var withEditModeCover_default = withEditModeCover;
-
-// esm-externals:@splunk/themes/variables
-var variables_exports = {};
-__export(variables_exports, {
-  default: () => variables_default
-});
-var defaultImport27 = __toESM(require("@splunk/themes/variables"));
-__reExport(variables_exports, require("@splunk/themes/variables"));
-var variables_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
-
 // src/common/components/IconPlaceholder.tsx
 var shouldShowIconPlaceholder = (dataSources, loading = false) => {
   const data = (0, lodash_exports.get)(dataSources, "primary.data.columns[0]", void 0);
@@ -645,18 +654,23 @@ var shouldShowIconPlaceholder = (dataSources, loading = false) => {
   const noFields = fields === void 0;
   return loading || noData || noFields;
 };
-var propTypes2 = {
-  icon: prop_types_exports.func,
-  width: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
-  height: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
-  // eslint-disable-next-line react/no-unused-prop-types
-  backgroundColor: prop_types_exports.string,
-  iconColor: prop_types_exports.string
-};
 var IconPlaceholder = (props) => {
-  const { width, height, icon, iconColor } = props;
+  const {
+    width = SplunkVisualization_default.defaults.width,
+    height = SplunkVisualization_default.defaults.height,
+    icon,
+    iconColor,
+    backgroundColor
+  } = props;
+  const cachedHandleResize = react_exports.useCallback((w, h) => {
+    setContainerWidth(w);
+    setContainerHeight(h);
+  }, []);
+  const [containerWidth, setContainerWidth] = react_exports.useState(Number(width));
+  const [containerHeight, setContainerHeight] = react_exports.useState(Number(height));
+  let content = /* @__PURE__ */ react_exports.createElement(Message_default, { width, height, level: "warning", message: (0, i18n_exports._)("No DataSource Connected") });
   if (icon) {
-    return react_exports.createElement(icon, {
+    content = react_exports.createElement(icon, {
       style: {
         left: "50%",
         top: "50%",
@@ -670,12 +684,7 @@ var IconPlaceholder = (props) => {
       "data-test": "icon-placeholder"
     });
   }
-  return /* @__PURE__ */ react_exports.createElement(Message_default, { width, height, level: "warning", message: (0, i18n_exports._)("No DataSource Connected") });
-};
-IconPlaceholder.propTypes = propTypes2;
-IconPlaceholder.defaultProps = {
-  width: "100%",
-  height: 250
+  return /* @__PURE__ */ react_exports.createElement("div", { style: { width: containerWidth, height: containerHeight, background: backgroundColor } }, /* @__PURE__ */ react_exports.createElement(SizeAwareWrapper_default, { width, height, onResize: cachedHandleResize }), content);
 };
 var IconPlaceholder_default = FixedSizeContainer_default(IconPlaceholder);
 
@@ -685,11 +694,17 @@ var withPlaceholder = (Visualization, useIconPlaceholder = shouldShowIconPlaceho
   const { themes: themes3 } = config2;
   const Wrapper = (props) => {
     var _a, _b;
-    const { dataSources, loading, options, height, width } = props;
+    const {
+      dataSources,
+      loading,
+      options,
+      height = SplunkVisualization_default.defaults.height,
+      width = SplunkVisualization_default.defaults.width
+    } = props;
     const showPlaceholder = useIconPlaceholder(dataSources, loading, options);
-    const bgColorFromTheme = (0, colorUtils_exports.isColor)(options == null ? void 0 : options.backgroundColor) ? options == null ? void 0 : options.backgroundColor : (_a = themes3 == null ? void 0 : themes3.defaultBackgroundColor) == null ? void 0 : _a.call(themes3, props);
-    const icon = (_b = config2.placeholderIcon) != null ? _b : config2.icon;
+    const icon = (_a = config2.placeholderIcon) != null ? _a : config2.icon;
     const iconColor = variables_default.contentColorActive(props);
+    const bgColorFromTheme = (0, colorUtils_exports.isColor)(options == null ? void 0 : options.backgroundColor) ? options == null ? void 0 : options.backgroundColor : (_b = themes3 == null ? void 0 : themes3.defaultBackgroundColor) == null ? void 0 : _b.call(themes3, props);
     if (config2.supports.includes("placeholder" /* PLACEHOLDER */) && showPlaceholder) {
       return /* @__PURE__ */ react_exports.createElement(
         IconPlaceholder_default,
@@ -715,9 +730,9 @@ var numberUtils_exports = {};
 __export(numberUtils_exports, {
   default: () => numberUtils_default
 });
-var defaultImport28 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
+var defaultImport29 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
 __reExport(numberUtils_exports, require("@splunk/visualizations-shared/numberUtils"));
-var numberUtils_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
+var numberUtils_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
 
 // src/common/utils/dataUtils.ts
 var largestTriangleThreeBuckets = (data, threshold, preferredDownsampleIndices) => {
@@ -1097,9 +1112,9 @@ var FeatureFlags_exports = {};
 __export(FeatureFlags_exports, {
   default: () => FeatureFlags_default
 });
-var defaultImport29 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
+var defaultImport30 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
 __reExport(FeatureFlags_exports, require("@splunk/visualization-context/FeatureFlags"));
-var FeatureFlags_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
+var FeatureFlags_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
 
 // src/common/utils/featureFlagUtils.ts
 var getFeatureFlag = (context, flagName) => {
@@ -1117,9 +1132,9 @@ var trellisUtils_exports = {};
 __export(trellisUtils_exports, {
   default: () => trellisUtils_default
 });
-var defaultImport30 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
+var defaultImport31 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
 __reExport(trellisUtils_exports, require("@splunk/visualizations-shared/trellisUtils"));
-var trellisUtils_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+var trellisUtils_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
 
 // src/common/utils/trellisUtils.ts
 var turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
@@ -1131,6 +1146,382 @@ var turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
   return {};
 };
 
+// esm-externals:@splunk/visualization-canvas
+var visualization_canvas_exports = {};
+__export(visualization_canvas_exports, {
+  default: () => visualization_canvas_default
+});
+var defaultImport32 = __toESM(require("@splunk/visualization-canvas"));
+__reExport(visualization_canvas_exports, require("@splunk/visualization-canvas"));
+var visualization_canvas_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+
+// src/common/components/VizStyleWrapper.jsx
+var VizStyleWrapper = styled_components_default.div.attrs(({ dataTestKey }) => ({
+  "data-test": dataTestKey,
+  "data-testid": dataTestKey
+}))`
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background-color: ${(props) => props.backgroundColor};
+`;
+VizStyleWrapper.displayName = "VizStyleWrapper";
+var VizStyleWrapper_default = VizStyleWrapper;
+
+// esm-externals:@splunk/react-icons/Triangle
+var Triangle_exports = {};
+__export(Triangle_exports, {
+  default: () => Triangle_default
+});
+var defaultImport33 = __toESM(require("@splunk/react-icons/Triangle"));
+__reExport(Triangle_exports, require("@splunk/react-icons/Triangle"));
+var Triangle_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+
+// src/common/chartingUtils.ts
+var DEFAULT_LINE_WIDTH = 2;
+var getAnnotationsForCanvas = ({
+  annotationX,
+  annotationColor,
+  annotationLabel
+}) => (annotationX == null ? void 0 : annotationX.length) ? annotationX.map((timestamp, i) => ({
+  key: annotationLabel == null ? void 0 : annotationLabel[i],
+  time: timestamp,
+  color: annotationColor == null ? void 0 : annotationColor[i]
+})) : [];
+var StyledTriangle = styled_components_default(Triangle_default)`
+    color: ${(props) => props.eventColor || variables_default.severityColorNotice(props)};
+`;
+var triangleEventAnnotationRenderer = ({ event }) => {
+  const eventWithColor = event;
+  return react_default.createElement(StyledTriangle, {
+    viewBox: "0 0 24 24",
+    variant: "filled",
+    eventColor: eventWithColor.color
+  });
+};
+var canvasSupportedTimeSeriesCharts = ["splunk.line"];
+var isTimeSeriesCanvasRenderSupported = (vizConfigKey) => {
+  return canvasSupportedTimeSeriesCharts.indexOf(vizConfigKey) > -1;
+};
+var filterChartDataFromInternalFields = (chartData) => {
+  const { fields, columns } = chartData;
+  const keepIndexes = fields.reduce((acc, field, index) => {
+    const fieldName = typeof field === "object" ? field == null ? void 0 : field.name : field;
+    if (!(fieldName == null ? void 0 : fieldName.startsWith("_")) || fieldName === "_time") {
+      acc.push(index);
+    }
+    return acc;
+  }, []);
+  const filteredFields = keepIndexes.map((index) => fields[index]);
+  const filteredColumns = keepIndexes.map((index) => columns[index]);
+  return { fields: filteredFields, columns: filteredColumns };
+};
+var convert2DArrayToNumbers = (arr) => {
+  return arr.map((subArray) => subArray.map((element) => parseFloat(element)));
+};
+var SideLegendWidth = 75;
+var commonLegendProps = { center: true, fontSize: 12, largerTiles: true, hideSeriesValue: true };
+var getLegend = (props) => {
+  const legendPlacement = props == null ? void 0 : props.legendDisplay;
+  switch (legendPlacement) {
+    case "off":
+      return false;
+    case "left":
+      return (0, visualization_canvas_exports.LeftLegendFactory)(__spreadValues({
+        width: SideLegendWidth
+      }, commonLegendProps));
+    case "bottom":
+      return (0, visualization_canvas_exports.BottomLegendFactory)(__spreadValues({
+        wrap: true
+      }, commonLegendProps));
+    case "top":
+      return (0, visualization_canvas_exports.TopLegendFactory)(__spreadValues({
+        wrap: true
+      }, commonLegendProps));
+    default:
+      return (0, visualization_canvas_exports.SideLegendFactory)(__spreadValues({
+        width: SideLegendWidth
+      }, commonLegendProps));
+  }
+};
+var getComputedAxisTitles = (inputAxisTitle, fields, axisTitleVisibility) => {
+  if (axisTitleVisibility === "collapsed") {
+    return "";
+  }
+  let fieldTitle = fields.length > 1 ? "" : fields[0];
+  if (!fieldTitle) {
+    fieldTitle = "";
+  }
+  return (inputAxisTitle == null ? void 0 : inputAxisTitle.length) ? inputAxisTitle.trim() : fieldTitle;
+};
+var ellipsisAxisTitle = (axisTitle, containerSpacing, fontSize = 12) => {
+  if (!axisTitle) {
+    return "";
+  }
+  if (Number.isNaN(containerSpacing) || containerSpacing <= 0) {
+    return axisTitle;
+  }
+  const availableHeight = containerSpacing * 0.6;
+  const avgCharWidth = fontSize * 0.55;
+  const maxChars = Math.floor(availableHeight / avgCharWidth);
+  if (axisTitle.length <= maxChars) {
+    return axisTitle;
+  }
+  if (maxChars <= 3) {
+    return "...";
+  }
+  const availableChars = maxChars - 3;
+  const halfChars = Math.floor(availableChars / 2);
+  const start = axisTitle.slice(0, halfChars);
+  const end = axisTitle.slice(-halfChars);
+  return `${start}...${end}`;
+};
+var getFieldName = (field) => {
+  const fieldName = typeof field === "object" ? field == null ? void 0 : field.name : field;
+  return fieldName;
+};
+var getFieldNames = (fields) => {
+  return fields.map((field) => getFieldName(field));
+};
+var getXScaleConfig = (label) => {
+  const xConfig = { x: {} };
+  xConfig.x.label = label;
+  return xConfig;
+};
+var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale) => {
+  const scaleType = yAxisScale != null ? yAxisScale : "linear";
+  const yConfig = { y: {} };
+  yConfig.y.label = label;
+  yConfig.y.type = scaleType;
+  if (yAxisAbbreviation !== "none") {
+    yConfig.y.tickFmt = (v) => (0, visualization_canvas_exports.shortenNumber)(v, 1);
+  }
+  if (yAxisAbbreviation === "none") {
+    yConfig.y.width = 55;
+  } else {
+    yConfig.y.width = label && label.length > 0 ? 30 : 10;
+  }
+  return yConfig;
+};
+var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInteger) => {
+  const y2Config = { y2: {} };
+  const scaleType = axisScale != null ? axisScale : "linear";
+  y2Config.y2.label = label;
+  y2Config.y2.side = "right";
+  y2Config.y2.showGrid = false;
+  y2Config.y2.type = scaleType;
+  if (axisAbbreviation !== "none") {
+    y2Config.y2.tickFmt = (v) => (0, visualization_canvas_exports.shortenNumber)(v, 1, roundAxisLabelsToInteger);
+  } else if (roundAxisLabelsToInteger) {
+    y2Config.y2.tickFmt = (v) => roundAxisLabelsToInteger ? Math.round(v).toString() : v.toString();
+  }
+  return y2Config;
+};
+var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode) => {
+  const seriesConfig = {};
+  let spanGaps;
+  let replaceNullsWithZero;
+  if (nullValueMode === "gaps") {
+    spanGaps = false;
+  } else if (nullValueMode === "connect" || nullValueMode === "zero") {
+    spanGaps = true;
+    if (nullValueMode === "zero") {
+      replaceNullsWithZero = true;
+    }
+  }
+  yfields.forEach((field) => {
+    seriesConfig[field] = {
+      overrides: { width: lineWidth != null ? lineWidth : DEFAULT_LINE_WIDTH }
+    };
+    if (spanGaps !== void 0) {
+      seriesConfig[field].overrides.spanGaps = spanGaps;
+    }
+    if (y2Enabled) {
+      const shouldAssignToY2 = (
+        // If y2Fields are present, assign all y2Fields to y2 scale
+        (y2fields == null ? void 0 : y2fields.length) > 0 && y2fields.includes(field) || // Else, assign all overlayFields to y2 scale
+        (!y2fields || y2fields.length === 0) && (overlayFields == null ? void 0 : overlayFields.includes(field))
+      );
+      if (shouldAssignToY2) {
+        seriesConfig[field].overrides.scale = "y2";
+      }
+    }
+    if (overlayFields == null ? void 0 : overlayFields.includes(field)) {
+      seriesConfig[field].type = "line";
+    }
+    if (replaceNullsWithZero !== void 0) {
+      seriesConfig[field].replaceNullsWithZero = replaceNullsWithZero;
+    }
+  });
+  return seriesConfig;
+};
+
+// src/common/TimeSeriesChartWrapper.tsx
+var TimeSeriesChartContainer = styled_components_default.div`
+    overflow: hidden;
+    ${(props) => (0, style_exports.toDimension)((0, lodash_exports.pick)(props, ["width", "height"]))};
+
+    canvas {
+        position: absolute !important; // This is needed for canvas element export pdf/png to work correctly
+    }
+`;
+var handleClick = (chartEvent, props) => {
+  const payload = __spreadProps(__spreadValues({}, (0, lodash_exports.pick)(chartEvent, "value", "seriesKey")), {
+    name: chartEvent.seriesKey
+  });
+  delete payload.seriesKey;
+  const clickHandler = props == null ? void 0 : props.onClick;
+  if (clickHandler) {
+    clickHandler({
+      type: "point.click",
+      originalEvent: chartEvent,
+      payload
+    });
+  }
+};
+var handleLegendClick = (chartEvent, props) => {
+  const payload = {
+    name: chartEvent
+  };
+  const clickHandler = props == null ? void 0 : props.onClick;
+  if (clickHandler) {
+    clickHandler({
+      type: "legend.click",
+      originalEvent: chartEvent,
+      payload
+    });
+  }
+};
+var TimeSeriesChartWrapper = (props) => {
+  const { width, height, chartData, options, userLocale, annotationX, annotationLabel, annotationColor } = props;
+  const {
+    backgroundColor,
+    seriesColors: seriesColorsStr,
+    fieldColors,
+    "axisTitleX.text": xAxisTitleText,
+    "axisTitleY.text": yAxisTitleText,
+    "axisTitleY2.text": y2AxisTitleText,
+    "axisTitleX.visibility": xAxisTitleVisibility,
+    "axisTitleY.visibility": yAxisTitleVisibility,
+    "axisTitleY2.visibility": y2AxisTitleVisibility,
+    "axisY.abbreviation": yAxisAbbreviation,
+    "axisY.scale": yAxisScale,
+    "axisY2.abbreviation": y2AxisAbbreviation,
+    "axisY2.fields": y2FieldsStr,
+    "axisY2.scale": y2AxisScale,
+    "axisY2.enabled": y2Enabled,
+    "axisLabelsY2.integerUnits": y2IntegerUnits,
+    "chart.overlayFields": overlayFieldsStr,
+    "chart.nullValueMode": nullValueMode,
+    lineWidth
+  } = options;
+  const seriesColors = seriesColorsStr ? JSON.parse(seriesColorsStr) : void 0;
+  const seriesColorsByField = fieldColors ? JSON.parse(fieldColors) : void 0;
+  const [containerWidth, setContainerWidth] = react_exports.useState(Number(props.width));
+  const [containerHeight, setContainerHeight] = react_exports.useState(Number(props.height));
+  const cachedHandleResize = react_exports.useCallback((w, h) => {
+    setContainerWidth(w);
+    setContainerHeight(h);
+  }, []);
+  const filteredChartData = filterChartDataFromInternalFields({
+    fields: chartData.fields,
+    columns: chartData.seriesList
+  });
+  const xField = getFieldName(filteredChartData.fields[0]);
+  const yFields = getFieldNames(
+    filteredChartData.fields.length > 1 ? filteredChartData.fields.slice(1) : []
+  );
+  const y2Fields = y2FieldsStr ? y2FieldsStr.split(",").map((f) => f.trim()) : [];
+  const overlayFields = overlayFieldsStr ? overlayFieldsStr.split(",").map((f) => f.trim()) : [];
+  let xAxisTitle = getComputedAxisTitles(xAxisTitleText, [xField], xAxisTitleVisibility);
+  xAxisTitle = ellipsisAxisTitle(xAxisTitle, containerWidth);
+  let yAxisTitle = getComputedAxisTitles(yAxisTitleText, yFields, yAxisTitleVisibility);
+  yAxisTitle = ellipsisAxisTitle(yAxisTitle, containerHeight);
+  const fieldsForY2Axis = y2Fields.length > 0 ? y2Fields : overlayFields;
+  let y2AxisTitle = getComputedAxisTitles(y2AxisTitleText, fieldsForY2Axis, y2AxisTitleVisibility);
+  y2AxisTitle = ellipsisAxisTitle(y2AxisTitle, containerHeight);
+  const xScaleConfig = getXScaleConfig(xAxisTitle);
+  const yScaleConfig = getYScaleConfig(yAxisTitle, yAxisAbbreviation, yAxisScale);
+  let y2ScaleConfig = {};
+  if (y2Enabled) {
+    y2ScaleConfig = getY2ScaleConfig(y2AxisTitle, y2AxisAbbreviation, y2AxisScale, y2IntegerUnits);
+  }
+  const uplotContainerElement = (0, react_exports.useRef)(null);
+  const seriesDataFormatted = [
+    filteredChartData.columns[0],
+    ...convert2DArrayToNumbers(filteredChartData.columns.slice(1))
+  ];
+  chartData.fields = filteredChartData.fields;
+  chartData.columns = seriesDataFormatted;
+  const seriesOverrides = getSeriesOverrides(
+    yFields,
+    y2Fields,
+    lineWidth,
+    overlayFields,
+    y2Enabled,
+    nullValueMode
+  );
+  const chartingEventAnnotations = getAnnotationsForCanvas({
+    annotationX,
+    annotationColor,
+    annotationLabel
+  });
+  const MemoizedChart = react_exports.memo(visualization_canvas_exports.TimeSeriesChart);
+  const scaleConfig = __spreadValues(__spreadValues(__spreadValues({}, xScaleConfig), yScaleConfig), y2ScaleConfig);
+  const memoizedChart = (0, react_exports.useMemo)(
+    () => /* @__PURE__ */ react_exports.createElement(
+      MemoizedChart,
+      {
+        data: chartData,
+        width: containerWidth,
+        height: containerHeight,
+        seriesColors,
+        seriesColorsByField,
+        seriesConfig: seriesOverrides,
+        legend: getLegend(props),
+        scaleConfig,
+        timestampFormat: "expanded",
+        onCrosshairClick: (event) => handleClick(event, props),
+        onSeriesClick: (event) => handleLegendClick(event, props),
+        userLocale,
+        events: chartingEventAnnotations,
+        eventsConfig: { renderer: triangleEventAnnotationRenderer }
+      }
+    ),
+    [
+      MemoizedChart,
+      chartData,
+      containerWidth,
+      containerHeight,
+      seriesColors,
+      seriesColorsByField,
+      seriesOverrides,
+      lineWidth,
+      props,
+      scaleConfig,
+      userLocale,
+      chartingEventAnnotations
+    ]
+  );
+  const memoizedVisualization = (0, react_exports.useMemo)(() => {
+    return /* @__PURE__ */ react_exports.createElement(VizStyleWrapper_default, { backgroundColor }, memoizedChart);
+  }, [backgroundColor]);
+  return /* @__PURE__ */ react_exports.createElement(
+    TimeSeriesChartContainer,
+    {
+      height,
+      width,
+      ref: uplotContainerElement,
+      "data-test": "timeseries-chart-wrapper"
+    },
+    /* @__PURE__ */ react_exports.createElement(SizeAwareWrapper_default, { width, height, onResize: cachedHandleResize }),
+    memoizedVisualization
+  );
+};
+var TimeSeriesChartWrapper_default = TimeSeriesChartWrapper;
+
 // src/common/withDashboardViz.tsx
 var withDashboardViz = (opts) => {
   const {
@@ -1148,30 +1539,29 @@ var withDashboardViz = (opts) => {
   const DashboardViz = (props) => {
     var _a;
     const {
-      mode,
+      mode = "view",
       hasEventHandlers,
       dataSources,
       // type of { [key: string]: DataSource }
-      options,
+      options = {},
       context = {},
       width,
       height,
-      onComputedProps,
-      onEventTrigger,
+      onComputedProps = lodash_exports.noop,
+      onEventTrigger = SplunkVisualization_default.defaults.onEventTrigger,
       theme,
-      onRequestParamsChange
+      onRequestParamsChange = lodash_exports.noop
     } = props;
-    const { serializedTimezone } = react_exports.useContext(TimezoneContext_default);
-    if (serializedTimezone) {
+    const localeContext = react_exports.useContext(TimezoneContext_default);
+    if (localeContext.serializedTimezone) {
       if (!moment_default.getDefaultSplunkTimezone()) {
-        moment_default.setDefaultSplunkTimezone(serializedTimezone);
+        moment_default.setDefaultSplunkTimezone(localeContext.serializedTimezone);
       }
     }
     const themeFunc = (themeVar) => {
       var _a2, _b;
       return (_b = (_a2 = vizConfig.themes)[themeVar]) == null ? void 0 : _b.call(_a2, props);
     };
-    const bgColorFromTheme = themeFunc("defaultBackgroundColor");
     const {
       family: currentThemeFamily,
       colorScheme: currentThemeColorScheme,
@@ -1193,6 +1583,10 @@ var withDashboardViz = (opts) => {
       featureFlagContext && featureFlagContext.visualizations_enableTrellis
     );
     const isTrellisOn = isTrellisFeatureFlagOn && ((_a = vizConfig == null ? void 0 : vizConfig.supports) == null ? void 0 : _a.includes("trellis" /* TRELLIS */)) && (options == null ? void 0 : options.splitByLayout) === "trellis" /* TRELLIS */;
+    const isAcceleratedRenderFeatureFlagOn = Boolean(
+      featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableAcceleratedRender
+    );
+    const isAcceleratedRenderOn = isAcceleratedRenderFeatureFlagOn && isTimeSeriesCanvasRenderSupported(vizConfig.key) && (options == null ? void 0 : options.acceleratedRender) === true;
     const isMounted = react_exports.useRef(true);
     const optionsToEvaluate = react_exports.useMemo(() => {
       var _a2;
@@ -1287,10 +1681,34 @@ var withDashboardViz = (opts) => {
       currentThemeDensity,
       optionsToEvaluate,
       downsampledDataSources,
-      serializedTimezone,
+      localeContext.serializedTimezone,
       useAsyncEvaluatedOptions
     ]);
     const evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync;
+    let dataSourceMetadata = {};
+    const OptionKey = "paginateDataSourceKey";
+    const optsKey = (0, lodash_exports.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey];
+    const paginateDataSourceKey = typeof optsKey === "string" ? optsKey : "primary";
+    const requestParams = (0, lodash_exports.get)(dataSources, [paginateDataSourceKey, "requestParams"], {});
+    const meta = (0, lodash_exports.get)(dataSources, [paginateDataSourceKey, "meta"], {});
+    const handleRequestParamsChange = (payload) => onRequestParamsChange(paginateDataSourceKey, payload);
+    const sortParams = useSortingParams({
+      requestParams,
+      meta,
+      onRequestParamsChange: handleRequestParamsChange
+    });
+    const paginatorParams = usePaginationParams({
+      requestParams,
+      meta,
+      onRequestParamsChange: handleRequestParamsChange
+    });
+    dataSourceMetadata = {
+      sortParams,
+      paginatorParams
+    };
+    if (vizConfig.supports.indexOf("page-and-sort" /* PAGE_AND_SORT */) === -1 && !(0, lodash_exports.has)(dataSources, paginateDataSourceKey)) {
+      dataSourceMetadata = {};
+    }
     const clonedEvaluatedOptions = __spreadValues({}, evaluatedOptionsToUse);
     if (isTrellisOn) {
       clonedEvaluatedOptions.backgroundColor = clonedEvaluatedOptions == null ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor;
@@ -1316,7 +1734,7 @@ var withDashboardViz = (opts) => {
           width,
           height,
           missingProps: missing,
-          backgroundColor: bgColorFromTheme
+          backgroundColor: themeFunc("defaultBackgroundColor")
         }
       );
     }
@@ -1334,7 +1752,7 @@ var withDashboardViz = (opts) => {
         }
         eventCallbackProps[eventCallbackPropName] = (ev) => {
           if (ev && ev.payload) {
-            payload = ev.payload;
+            payload = __spreadValues({}, ev.payload);
           }
           return onEventTrigger({
             originalEvent: ev,
@@ -1354,45 +1772,27 @@ var withDashboardViz = (opts) => {
     const computedVizProps = computeVizProps2(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, props), evaluatedOptionsToUse), eventCallbackProps), {
       themeFunc
     }));
-    let dataSourceMetadata = {};
-    const OptionKey = "paginateDataSourceKey";
-    const optsKey = (0, lodash_exports.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey];
-    const paginateDataSourceKey = typeof optsKey === "string" ? optsKey : "primary";
-    if (vizConfig.supports.indexOf("page-and-sort" /* PAGE_AND_SORT */) > -1 && (0, lodash_exports.has)(dataSources, paginateDataSourceKey)) {
-      const requestParams = (0, lodash_exports.get)(dataSources, [paginateDataSourceKey, "requestParams"], {});
-      const meta = (0, lodash_exports.get)(dataSources, [paginateDataSourceKey, "meta"], {});
-      const handleRequestParamsChange = (payload) => onRequestParamsChange(paginateDataSourceKey, payload);
-      const sortParams = getSortingParams({
-        requestParams,
-        meta,
-        onRequestParamsChange: handleRequestParamsChange
-      });
-      const paginatorParams = getPaginationParams({
-        requestParams,
-        meta,
-        onRequestParamsChange: handleRequestParamsChange
-      });
-      dataSourceMetadata = {
-        sortParams,
-        paginatorParams
-      };
-    }
     if (useAsyncEvaluatedOptions && Object.keys(evaluatedOptionsToUse).length === 0) {
       return null;
     }
+    let SanitizedViz = SanitizedReactViz;
+    if (isAcceleratedRenderOn) {
+      SanitizedViz = (0, SanitizeProps_exports.withSanitizedProps)(TimeSeriesChartWrapper_default);
+    }
     return /* @__PURE__ */ react_exports.createElement(
-      SanitizedReactViz,
-      __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+      SanitizedViz,
+      __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, SplunkVisualization_default.defaults), {
         mode,
-        width,
-        height
-      }, downsamplingProps), evaluatedOptionsToUse), computedVizProps), eventCallbackProps), dataSourceMetadata)
+        width: width || SplunkVisualization_default.defaults.width,
+        height: height || SplunkVisualization_default.defaults.height,
+        userLocale: localeContext
+      }), downsamplingProps), evaluatedOptionsToUse), computedVizProps), eventCallbackProps), dataSourceMetadata)
     );
   };
   DashboardViz.propTypes = __spreadValues(__spreadValues({}, SplunkVisualization_default.propTypes), ReactViz.propTypes);
-  DashboardViz.defaultProps = __spreadProps(__spreadValues(__spreadValues({}, SplunkVisualization_default.defaultProps), ReactViz.defaultProps), {
-    // using withTheme requires component to receive theme prop. In case the consumer did not provide ThemeProvider, a default empty object will prevent warnings.
-    theme: {}
+  DashboardViz.defaultProps = __spreadProps(__spreadValues({}, ReactViz.defaultProps), {
+    // we still need ReactViz.defaultProps for the visualizations that still have them
+    onEventTrigger: SplunkVisualization_default.defaults.onEventTrigger
   });
   DashboardViz.config = vizConfig;
   return (0, styled_components_exports.withTheme)(
@@ -1406,18 +1806,18 @@ var visualization_schemas_exports = {};
 __export(visualization_schemas_exports, {
   default: () => visualization_schemas_default
 });
-var defaultImport31 = __toESM(require("@splunk/visualization-schemas"));
+var defaultImport34 = __toESM(require("@splunk/visualization-schemas"));
 __reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
-var visualization_schemas_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+var visualization_schemas_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
 
 // esm-externals:@splunk/visualizations-shared/configUtils
 var configUtils_exports = {};
 __export(configUtils_exports, {
   default: () => configUtils_default
 });
-var defaultImport32 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+var defaultImport35 = __toESM(require("@splunk/visualizations-shared/configUtils"));
 __reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
-var configUtils_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+var configUtils_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
 // src/common/utils/configUtils.ts
 function enhanceConfig(vizConfig) {
@@ -1638,22 +2038,25 @@ var MarkdownContainer = styled_components_default.div`
         color: ${(props) => props.fontColor};
     }
     ${({ startsWithHeader }) => startsWithHeader && `
-        h${startsWithHeader >= 4 ? 4 : startsWithHeader}:first-of-type { 
+        h${startsWithHeader >= 4 ? 4 : startsWithHeader}:first-of-type {
             margin-top: 0px;
         }
     `};
     section {
         min-width: 0;
     }
+    section[data-test='markdown'] {
+        max-width: 100%;
+    }
 `;
 var CodeBlockContainer = styled_components_default.div`
     // from: https://cd.splunkdev.com/devplat/splunk-ui/-/blob/develop/packages/react-ui/src/Markdown/MarkdownStyles.ts
     padding: ${(0, themes_exports.pick)({
-  enterprise: themes_exports.variables.spacingHalf,
+  enterprise: themes_exports.variables.spacingSmall,
   prisma: styled_components_exports.css`10px ${themes_exports.variables.spacingLarge}`
 })};
     margin: ${(0, themes_exports.pick)({
-  enterprise: themes_exports.variables.spacingHalf,
+  enterprise: themes_exports.variables.spacingSmall,
   prisma: themes_exports.variables.spacingLarge
 })}
         0;
@@ -1673,7 +2076,9 @@ var CodeBlockContainer = styled_components_default.div`
     // add font-size, as span elements did not inherit <code /> font size in SSC testing
     code {
         font-size: ${(props) => props.fontSize}px !important;
-        line-height: ${(props) => props.fontSize}px !important;
+        white-space: pre-wrap;
+        word-break: break-word;
+        overflow-wrap: break-word;
     }
 `;
 var CodeInlineContainer = styled_components_default.code`
@@ -1702,6 +2107,16 @@ var handleLinkClick = (e) => e.stopPropagation();
 var StyledA = styled_components_default.a`
     text-decoration: underlined;
 `;
+var StyledButton = styled_components_default(Button_default)`
+    ${themes_exports.mixins.skipLink()}
+    /**
+     * Need to override the secondary Button's specificity to set a background color
+     * because it's explicitly set as transparent by default
+     */
+    &:not([disabled], [aria-disabled="true"]) {
+        background-color: ${themes_exports.variables.backgroundColorSection};
+    }
+`;
 var getMarkdownRenderer = (fontFamilyStyle, fontSize, customFontSize) => {
   const cleanedCustomFontSize = (0, types_exports.isNumber)(customFontSize) ? customFontSize : 14;
   const isCustomFontSize = fontSize === "custom";
@@ -1770,16 +2185,16 @@ var getMarkdownRenderer = (fontFamilyStyle, fontSize, customFontSize) => {
 };
 var MarkdownVisualization = ({
   height,
-  width,
-  markdown,
-  backgroundColor,
-  fontColor,
-  fontFamily,
-  fontSize,
-  customFontSize,
-  rotation,
-  hasEventHandlers,
-  onMarkdownClick
+  width = "100%",
+  markdown = "",
+  backgroundColor = "transparent",
+  fontColor = "rgba(255, 255, 255, 0.7)",
+  fontFamily = "Splunk Platform Sans",
+  fontSize = "default",
+  customFontSize = 14,
+  rotation = 0,
+  hasEventHandlers = false,
+  onMarkdownClick = lodash_exports.noop
 }) => {
   var _a;
   const { fontFamily: defaultFontFamily } = (0, themes_exports.useSplunkTheme)();
@@ -1804,6 +2219,7 @@ var MarkdownVisualization = ({
       fontColor,
       startsWithHeader: (_a = stringifiedMarkdown.trim().match(/^#+/)) == null ? void 0 : _a[0].length
     },
+    hasEventHandlers && /* @__PURE__ */ react_exports.createElement(StyledButton, { onClick: onMarkdownClick, appearance: "secondary" }, "Drilldown"),
     /* @__PURE__ */ react_exports.createElement(
       Markdown_default,
       {
@@ -1823,35 +2239,6 @@ var MarkdownVisualization = ({
     )
   );
 };
-var propTypes3 = {
-  width: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
-  height: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
-  markdown: prop_types_exports.string,
-  backgroundColor: prop_types_exports.string,
-  fontColor: prop_types_exports.string,
-  fontFamily: prop_types_exports.string,
-  fontSize: prop_types_exports.string,
-  customFontSize: prop_types_exports.number,
-  rotation: prop_types_exports.number,
-  hasEventHandlers: prop_types_exports.bool,
-  onMarkdownClick: prop_types_exports.func
-};
-var defaultProps = {
-  width: "100%",
-  height: void 0,
-  markdown: "",
-  backgroundColor: "transparent",
-  fontColor: "rgba(255, 255, 255, 0.7)",
-  fontFamily: "Splunk Platform Sans",
-  fontSize: "default",
-  customFontSize: 14,
-  rotation: 0,
-  hasEventHandlers: false,
-  onMarkdownClick: () => {
-  }
-};
-MarkdownVisualization.propTypes = propTypes3;
-MarkdownVisualization.defaultProps = defaultProps;
 var computeVizProps = (props) => {
   return props;
 };