@perses-dev/components 0.0.0-snapshot-scatter-chart-embed-8efdfab → 0.0.0-snapshot-explorer-plugin-c4a7621

package/dist/cjs/Table/hooks/useVirtualizedTableKeyboardNav.js

@@ -21,21 +21,19 @@ Object.defineProperty(exports, "useVirtualizedTableKeyboardNav", {
     }
 });
 const _useTableKeyboardNav = require("./useTableKeyboardNav");
-function useVirtualizedTableKeyboardNav({ visibleRange , virtualTable , maxRows , maxColumns  }) {
+function useVirtualizedTableKeyboardNav({ visibleRange, virtualTable, maxRows, maxColumns }) {
     const baseKeyboard = (0, _useTableKeyboardNav.useTableKeyboardNav)({
         maxRows,
         maxColumns,
         onActiveCellChange: (e, currentPosition, defaultNewPosition)=>{
             const key = e.key;
             const defaultValueChanged = defaultNewPosition && (currentPosition.column !== defaultNewPosition.column || currentPosition.row !== defaultNewPosition.row);
-            var _defaultNewPosition_row;
-            const nextRow = (_defaultNewPosition_row = defaultNewPosition === null || defaultNewPosition === void 0 ? void 0 : defaultNewPosition.row) !== null && _defaultNewPosition_row !== void 0 ? _defaultNewPosition_row : currentPosition.row;
+            const nextRow = defaultNewPosition?.row ?? currentPosition.row;
             if (key === 'ArrowDown' && defaultValueChanged) {
                 // Use default cell position. Shift the virtual table scroll position
                 // when needed to make the active cell visible.
                 if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {
-                    var _virtualTable_current;
-                    (_virtualTable_current = virtualTable.current) === null || _virtualTable_current === void 0 ? void 0 : _virtualTable_current.scrollToIndex({
+                    virtualTable.current?.scrollToIndex({
                         index: nextRow - 1,
                         align: 'end'
                     });
@@ -44,28 +42,25 @@ function useVirtualizedTableKeyboardNav({ visibleRange , virtualTable , maxRows
                 // Use default cell position. Shift the virtual table scroll position
                 // when needed to make the active cell visible.
                 if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {
-                    var _virtualTable_current1;
-                    (_virtualTable_current1 = virtualTable.current) === null || _virtualTable_current1 === void 0 ? void 0 : _virtualTable_current1.scrollToIndex({
+                    virtualTable.current?.scrollToIndex({
                         index: nextRow - 1,
                         align: 'start'
                     });
                 }
             } else if (defaultValueChanged && (key === 'Home' || key === 'End')) {
-                var // Use default cell position. Shift the virtual table scroll position
+                // Use default cell position. Shift the virtual table scroll position
                 // when needed to make the active cell visible.
-                _virtualTable_current2;
-                (_virtualTable_current2 = virtualTable.current) === null || _virtualTable_current2 === void 0 ? void 0 : _virtualTable_current2.scrollToIndex({
+                virtualTable.current?.scrollToIndex({
                     index: Math.max(nextRow - 1, 0),
                     align: 'start'
                 });
             } else if (key === 'PageDown') {
-                var _virtualTable_current3;
                 // Full handling of logic for `PageDown` because there is no default.
                 e.preventDefault();
                 let nextRow = currentPosition.row;
                 // Add 1 to account for header
                 nextRow = Math.min(maxRows - 1, visibleRange.current.endIndex + 1);
-                (_virtualTable_current3 = virtualTable.current) === null || _virtualTable_current3 === void 0 ? void 0 : _virtualTable_current3.scrollToIndex({
+                virtualTable.current?.scrollToIndex({
                     index: nextRow - 1,
                     align: 'start'
                 });
@@ -74,12 +69,11 @@ function useVirtualizedTableKeyboardNav({ visibleRange , virtualTable , maxRows
                     column: currentPosition.column
                 };
             } else if (key === 'PageUp') {
-                var _virtualTable_current4;
                 // Full handling of logic for `PageUp` because there is no default.
                 let nextRow = currentPosition.row;
                 // Minus 1 to account for header
                 nextRow = Math.max(0, visibleRange.current.startIndex - 1);
-                (_virtualTable_current4 = virtualTable.current) === null || _virtualTable_current4 === void 0 ? void 0 : _virtualTable_current4.scrollToIndex({
+                virtualTable.current?.scrollToIndex({
                     index: nextRow - 1,
                     align: 'end'
                 });

package/dist/cjs/Table/index.js

@@ -14,14 +14,8 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "getTableCellLayout", {
-    enumerable: true,
-    get: function() {
-        return _tablemodel.getTableCellLayout;
-    }
-});
 _export_star(require("./Table"), exports);
-const _tablemodel = require("./model/table-model");
+_export_star(require("./model/table-model"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/Table/model/table-model.js

@@ -21,6 +21,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    DEFAULT_COLUMN_WIDTH: function() {
+        return DEFAULT_COLUMN_WIDTH;
+    },
     getTableCellLayout: function() {
         return getTableCellLayout;
     },
@@ -28,44 +31,50 @@ _export(exports, {
         return persesColumnsToTanstackColumns;
     }
 });
+const DEFAULT_COLUMN_WIDTH = 150;
 function calculateTableCellHeight(lineHeight, paddingY) {
     // Doing a bunch of math to enforce height to avoid weirdness with mismatched
     // heights based on customization of cell contents.
-    const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : lineHeight !== null && lineHeight !== void 0 ? lineHeight : 0;
+    const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : lineHeight ?? 0;
     const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;
     return lineHeightNum + verticalPaddingNum * 2;
 }
-function getTableCellLayout(theme, density, { isLastColumn , isFirstColumn  } = {}) {
+function getTableCellLayout(theme, density, { isLastColumn, isFirstColumn } = {}) {
+    // Density Standard
+    let paddingY = theme.spacing(1);
+    let basePaddingX = theme.spacing(1.25);
+    let edgePaddingX = theme.spacing(2);
+    let paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
+    let paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
+    let lineHeight = theme.typography.body1.lineHeight;
+    let fontSize = theme.typography.body1.fontSize;
     if (density === 'compact') {
-        const paddingY = theme.spacing(0.5);
-        const basePaddingX = theme.spacing(0.5);
-        const edgePaddingX = theme.spacing(1);
-        const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
-        const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
-        const lineHeight = theme.typography.body2.lineHeight;
-        return {
-            padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,
-            height: calculateTableCellHeight(lineHeight, paddingY),
-            fontSize: theme.typography.body2.fontSize,
-            lineHeight: lineHeight
-        };
+        paddingY = theme.spacing(0.5);
+        basePaddingX = theme.spacing(0.5);
+        edgePaddingX = theme.spacing(1);
+        paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
+        paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
+        lineHeight = theme.typography.body2.lineHeight;
+        fontSize = theme.typography.body2.fontSize;
+    }
+    if (density === 'comfortable') {
+        paddingY = theme.spacing(2);
+        basePaddingX = theme.spacing(1.5);
+        edgePaddingX = theme.spacing(2);
+        paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
+        paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
+        lineHeight = theme.typography.body1.lineHeight;
+        fontSize = theme.typography.body1.fontSize;
     }
-    // standard density
-    const paddingY = theme.spacing(1);
-    const basePaddingX = theme.spacing(1.25);
-    const edgePaddingX = theme.spacing(2);
-    const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
-    const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
-    const lineHeight = theme.typography.body1.lineHeight;
     return {
         padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,
         height: calculateTableCellHeight(lineHeight, paddingY),
-        fontSize: theme.typography.body1.fontSize,
+        fontSize: fontSize,
         lineHeight: lineHeight
     };
 }
 function persesColumnsToTanstackColumns(columns) {
-    const tableCols = columns.map(({ width , align , headerDescription , cellDescription , enableSorting , ...otherProps })=>{
+    const tableCols = columns.map(({ width, align, headerDescription, cellDescription, enableSorting, ...otherProps })=>{
         // Tanstack Table does not support an "auto" value to naturally size to fit
         // the space in a table. We translate our custom "auto" setting to 0 size
         // for these columns, so it is easy to fall back to auto when rendering.

package/dist/cjs/ThresholdsEditor/ThresholdInput.js

@@ -24,13 +24,13 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 const _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DeleteOutline"));
-const _ThresholdColorPicker = require("./ThresholdColorPicker");
+const _OptionsColorPicker = require("../ColorPicker/OptionsColorPicker");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function ThresholdInput({ inputRef , label , color , value , mode , onChange , onColorChange , onBlur , onDelete  }) {
+function ThresholdInput({ inputRef, label, color, value, mode, onChange, onColorChange, onBlur, onDelete }) {
     const [key, setKey] = (0, _react.useState)(0); // use key to cause input to lose focus when pressing enter
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         flex: 1,
@@ -39,7 +39,7 @@ function ThresholdInput({ inputRef , label , color , value , mode , onChange , o
         justifyContent: "space-between",
         spacing: 1,
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_ThresholdColorPicker.ThresholdColorPicker, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsColorPicker.OptionsColorPicker, {
                 label: label,
                 color: color,
                 onColorChange: onColorChange

package/dist/cjs/ThresholdsEditor/ThresholdsEditor.js

@@ -29,7 +29,7 @@ const _system = require("@mui/system");
 const _ChartsProvider = require("../context/ChartsProvider");
 const _OptionsEditorLayout = require("../OptionsEditorLayout");
 const _InfoTooltip = require("../InfoTooltip");
-const _ThresholdColorPicker = require("./ThresholdColorPicker");
+const _OptionsColorPicker = require("../ColorPicker/OptionsColorPicker");
 const _ThresholdInput = require("./ThresholdInput");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -57,7 +57,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -76,31 +78,29 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const DEFAULT_STEP = 10;
-function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercentMode  }) {
+function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMode }) {
     const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
-    const { thresholds: { defaultColor , palette  }  } = chartsTheme;
-    var _thresholds_defaultColor;
-    const defaultThresholdColor = (_thresholds_defaultColor = thresholds === null || thresholds === void 0 ? void 0 : thresholds.defaultColor) !== null && _thresholds_defaultColor !== void 0 ? _thresholds_defaultColor : defaultColor;
-    const [steps, setSteps] = (0, _react.useState)(thresholds === null || thresholds === void 0 ? void 0 : thresholds.steps);
+    const { thresholds: { defaultColor, palette } } = chartsTheme;
+    const defaultThresholdColor = thresholds?.defaultColor ?? defaultColor;
+    const [steps, setSteps] = (0, _react.useState)(thresholds?.steps);
     (0, _react.useEffect)(()=>{
-        setSteps(thresholds === null || thresholds === void 0 ? void 0 : thresholds.steps);
+        setSteps(thresholds?.steps);
     }, [
-        thresholds === null || thresholds === void 0 ? void 0 : thresholds.steps
+        thresholds?.steps
     ]);
     // every time a new threshold is added, we want to focus the recently added input
     const recentlyAddedInputRef = (0, _react.useRef)(null);
     const focusRef = (0, _react.useRef)(false);
     (0, _react.useEffect)(()=>{
-        var _recentlyAddedInputRef_current;
         if (!recentlyAddedInputRef.current || !focusRef.current) return;
-        (_recentlyAddedInputRef_current = recentlyAddedInputRef.current) === null || _recentlyAddedInputRef_current === void 0 ? void 0 : _recentlyAddedInputRef_current.focus();
+        recentlyAddedInputRef.current?.focus();
         focusRef.current = false;
     }, [
-        steps === null || steps === void 0 ? void 0 : steps.length
+        steps?.length
     ]);
     const handleThresholdValueChange = (e, i)=>{
         setSteps((0, _immer.default)(steps, (draft)=>{
-            const step = draft === null || draft === void 0 ? void 0 : draft[i];
+            const step = draft?.[i];
             if (step) {
                 step.value = Number(e.target.value);
             }
@@ -174,14 +174,12 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
         } else {
             onChange((0, _immer.default)(thresholds, (draft)=>{
                 const steps = draft.steps;
-                if (steps === null || steps === void 0 ? void 0 : steps.length) {
+                if (steps?.length) {
                     const lastStep = steps[steps.length - 1];
-                    var _palette_steps_length;
-                    const color = (_palette_steps_length = palette[steps.length]) !== null && _palette_steps_length !== void 0 ? _palette_steps_length : getRandomColor(); // we will assign color from the palette first, then generate random color
-                    var _lastStep_value;
+                    const color = palette[steps.length] ?? getRandomColor(); // we will assign color from the palette first, then generate random color
                     steps.push({
                         color,
-                        value: ((_lastStep_value = lastStep === null || lastStep === void 0 ? void 0 : lastStep.value) !== null && _lastStep_value !== void 0 ? _lastStep_value : 0) + DEFAULT_STEP
+                        value: (lastStep?.value ?? 0) + DEFAULT_STEP
                     }); // set new threshold value to last step value + 10
                 } else if (steps) {
                     steps.push({
@@ -203,11 +201,10 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
             });
         }
     };
-    var _thresholds_mode, _step_color, _ref;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_OptionsEditorLayout.OptionsEditorGroup, {
         title: "Thresholds",
         icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InfoTooltip.InfoTooltip, {
-            description: 'Add threshold',
+            description: "Add threshold",
             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                 size: "small",
                 "aria-label": "add threshold",
@@ -222,7 +219,7 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
                 control: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.ToggleButtonGroup, {
                     exclusive: true,
                     disabled: disablePercentMode,
-                    value: (_thresholds_mode = thresholds === null || thresholds === void 0 ? void 0 : thresholds.mode) !== null && _thresholds_mode !== void 0 ? _thresholds_mode : 'absolute',
+                    value: thresholds?.mode ?? 'absolute',
                     onChange: handleModeChange,
                     sx: {
                         height: '36px',
@@ -248,13 +245,12 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
                     ]
                 })
             }),
-            steps && steps.map((step, i)=>{
-                /*#__PURE__*/ return (0, _jsxruntime.jsx)(_ThresholdInput.ThresholdInput, {
+            steps && steps.map((step, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_ThresholdInput.ThresholdInput, {
                     inputRef: i === steps.length - 1 ? recentlyAddedInputRef : undefined,
                     label: `T${i + 1}`,
-                    color: (_ref = (_step_color = step.color) !== null && _step_color !== void 0 ? _step_color : palette[i]) !== null && _ref !== void 0 ? _ref : defaultThresholdColor,
+                    color: step.color ?? palette[i] ?? defaultThresholdColor,
                     value: step.value,
-                    mode: thresholds === null || thresholds === void 0 ? void 0 : thresholds.mode,
+                    mode: thresholds?.mode,
                     onColorChange: (color)=>handleThresholdColorChange(color, i),
                     onChange: (e)=>{
                         handleThresholdValueChange(e, i);
@@ -263,15 +259,14 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
                         deleteThreshold(i);
                     },
                     onBlur: handleThresholdBlur
-                }, i);
-            }).reverse(),
+                }, i)).reverse(),
             !hideDefault && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_system.Stack, {
                 flex: 1,
                 direction: "row",
                 alignItems: "center",
                 spacing: 1,
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_ThresholdColorPicker.ThresholdColorPicker, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsColorPicker.OptionsColorPicker, {
                         label: "default",
                         color: defaultThresholdColor,
                         onColorChange: handleDefaultColorChange

package/dist/cjs/TimeChart/TimeChart.js

@@ -56,9 +56,8 @@ function _interop_require_default(obj) {
     _components.TooltipComponent,
     _renderers.CanvasRenderer
 ]);
-const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ height , data , seriesMapping , timeScale: timeScaleProp , yAxis , format , grid , isStackedBar =false , tooltipConfig =_TimeSeriesTooltip.DEFAULT_TOOLTIP_CONFIG , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }, ref) {
-    var _option_tooltip;
-    const { chartsTheme , enablePinning , lastTooltipPinnedCoords , setLastTooltipPinnedCoords  } = (0, _ChartsProvider.useChartsContext)();
+const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ height, data, seriesMapping, timeScale: timeScaleProp, yAxis, format, grid, isStackedBar = false, tooltipConfig = _TimeSeriesTooltip.DEFAULT_TOOLTIP_CONFIG, noDataVariant = 'message', syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride }, ref) {
+    const { chartsTheme, enablePinning, lastTooltipPinnedCoords, setLastTooltipPinnedCoords } = (0, _ChartsProvider.useChartsContext)();
     const isPinningEnabled = tooltipConfig.enablePinning && enablePinning;
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
@@ -66,7 +65,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
     const [pinnedCrosshair, setPinnedCrosshair] = (0, _react.useState)(null);
     const [isDragging, setIsDragging] = (0, _react.useState)(false);
     const [startX, setStartX] = (0, _react.useState)(0);
-    const { timeZone  } = (0, _TimeZoneProvider.useTimeZone)();
+    const { timeZone } = (0, _TimeZoneProvider.useTimeZone)();
     let timeScale;
     if (timeScaleProp === undefined) {
         const commonTimeScale = (0, _core.getCommonTimeScale)(data);
@@ -91,7 +90,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
     }
     (0, _react.useImperativeHandle)(ref, ()=>{
         return {
-            highlightSeries ({ name  }) {
+            highlightSeries ({ name }) {
                 if (!chartRef.current) {
                     // when chart undef, do not highlight series when hovering over legend
                     return;
@@ -140,7 +139,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
         onDataZoom,
         setTooltipPinnedCoords
     ]);
-    const { noDataOption  } = chartsTheme;
+    const { noDataOption } = chartsTheme;
     const option = (0, _react.useMemo)(()=>{
         // The "chart" `noDataVariant` is only used when the `timeSeries` is an
         // empty array because a `null` value will throw an error.
@@ -172,7 +171,6 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
             ...seriesMapping,
             pinnedCrosshair
         ] : seriesMapping;
-        var _timeScale_rangeMs;
         const option = {
             dataset: dataset,
             series: updatedSeriesMapping,
@@ -182,7 +180,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                 max: isLocalTimeZone ? timeScale.endMs : (0, _datefnstz.utcToZonedTime)(timeScale.endMs, timeZone),
                 axisLabel: {
                     hideOverlap: true,
-                    formatter: (0, _utils.getFormattedAxisLabel)((_timeScale_rangeMs = timeScale.rangeMs) !== null && _timeScale_rangeMs !== void 0 ? _timeScale_rangeMs : 0)
+                    formatter: (0, _utils.getFormattedAxisLabel)(timeScale.rangeMs ?? 0)
                 },
                 axisPointer: {
                     snap: false
@@ -196,7 +194,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                 // Stacked bar uses ECharts tooltip so subgroup data shows correctly.
                 showContent: isStackedBar,
                 trigger: isStackedBar ? 'item' : 'axis',
-                appendToBody: true
+                appendToBody: isStackedBar
             },
             // https://echarts.apache.org/en/option.html#axisPointer
             axisPointer: {
@@ -255,7 +253,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
         seriesMapping
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-        sx: {
+        style: {
             height
         },
         // onContextMenu={(e) => {
@@ -302,10 +300,9 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                 setPinnedCrosshair((current)=>{
                     // Only add pinned crosshair line series when there is not one already in seriesMapping.
                     if (current === null) {
-                        var _data_;
                         const cursorX = pointInGrid[0];
                         // Only need to loop through first dataset source since getCommonTimeScale ensures xAxis timestamps are consistent
-                        const firstTimeSeriesValues = (_data_ = data[0]) === null || _data_ === void 0 ? void 0 : _data_.values;
+                        const firstTimeSeriesValues = data[0]?.values;
                         const closestTimestamp = (0, _utils.getClosestTimestamp)(firstTimeSeriesValues, cursorX);
                         // Crosshair snaps to nearest timestamp since cursor may be slightly to left or right
                         const pinnedCrosshair = (0, _merge.default)({}, _model.DEFAULT_PINNED_CROSSHAIR, {
@@ -329,7 +326,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
             }
         },
         onMouseDown: (e)=>{
-            const { clientX  } = e;
+            const { clientX } = e;
             setIsDragging(true);
             setStartX(clientX);
         },
@@ -338,7 +335,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
             if (!(e.target instanceof HTMLCanvasElement)) {
                 return;
             }
-            const { clientX  } = e;
+            const { clientX } = e;
             if (isDragging) {
                 const deltaX = clientX - startX;
                 if (deltaX > 0) {
@@ -378,7 +375,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
             }
         },
         children: [
-            showTooltip === true && ((_option_tooltip = option.tooltip) === null || _option_tooltip === void 0 ? void 0 : _option_tooltip.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeSeriesTooltip.TimeChartTooltip, {
+            showTooltip === true && option.tooltip?.showContent === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeSeriesTooltip.TimeChartTooltip, {
                 containerId: chartsTheme.tooltipPortalContainerId,
                 chartRef: chartRef,
                 data: data,

package/dist/cjs/{DateTimeRangePicker/AbsoluteTimePicker.js → TimeRangeSelector/DateTimeRangePicker.js}

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -14,10 +14,10 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "AbsoluteTimePicker", {
+Object.defineProperty(exports, "DateTimeRangePicker", {
     enumerable: true,
     get: function() {
-        return AbsoluteTimePicker;
+        return DateTimeRangePicker;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -25,23 +25,24 @@ const _react = require("react");
 const _material = require("@mui/material");
 const _xdatepickers = require("@mui/x-date-pickers");
 const _AdapterDateFns = require("@mui/x-date-pickers/AdapterDateFns");
-const _TimeZoneProvider = require("../context/TimeZoneProvider");
+const _context = require("../context");
+const _ErrorBoundary = require("../ErrorBoundary");
+const _ErrorAlert = require("../ErrorAlert");
 const _utils = require("./utils");
-const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
-const AbsoluteTimePicker = ({ initialTimeRange , onChange , onCancel  })=>{
-    const { formatWithUserTimeZone  } = (0, _TimeZoneProvider.useTimeZone)();
+const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel })=>{
+    const { formatWithUserTimeZone } = (0, _context.useTimeZone)();
     // Time range values as dates that can be used as a time range.
     const [timeRange, setTimeRange] = (0, _react.useState)(initialTimeRange);
     // Time range values as strings used to populate the text inputs. May not
     // be valid as dates when the user is typing.
     const [timeRangeInputs, setTimeRangeInputs] = (0, _react.useState)({
-        start: formatWithUserTimeZone(initialTimeRange.start, DATE_TIME_FORMAT),
-        end: formatWithUserTimeZone(initialTimeRange.end, DATE_TIME_FORMAT)
+        start: formatWithUserTimeZone(initialTimeRange.start, _utils.DATE_TIME_FORMAT),
+        end: formatWithUserTimeZone(initialTimeRange.end, _utils.DATE_TIME_FORMAT)
     });
     const [showStartCalendar, setShowStartCalendar] = (0, _react.useState)(true);
     const changeTimeRange = (newTime, segment)=>{
         const isInputChange = typeof newTime === 'string';
-        const newInputTime = isInputChange ? newTime : formatWithUserTimeZone(newTime, DATE_TIME_FORMAT);
+        const newInputTime = isInputChange ? newTime : formatWithUserTimeZone(newTime, _utils.DATE_TIME_FORMAT);
         setTimeRangeInputs((prevTimeRangeInputs)=>{
             return {
                 ...prevTimeRangeInputs,
@@ -159,27 +160,33 @@ const AbsoluteTimePicker = ({ initialTimeRange , onChange , onCancel  })=>{
                     pl: 1,
                     pr: 1,
                     children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                            onChange: (event)=>{
-                                // TODO: add helperText, fix validation after we decide on form state solution
-                                onChangeStartTime(event.target.value);
-                            },
-                            onBlur: ()=>updateDateRange(),
-                            value: timeRangeInputs.start,
-                            label: "Start Time",
-                            placeholder: DATE_TIME_FORMAT,
-                            // tel used to match MUI DateTimePicker, may change in future: https://github.com/mui/material-ui/issues/27590
-                            type: "tel"
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ErrorBoundary.ErrorBoundary, {
+                            FallbackComponent: _ErrorAlert.ErrorAlert,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_xdatepickers.DateTimeField, {
+                                label: "Start Time",
+                                value: new Date(timeRangeInputs.start),
+                                onChange: (event)=>{
+                                    if (event) {
+                                        onChangeStartTime(event);
+                                    }
+                                },
+                                onBlur: ()=>updateDateRange(),
+                                format: _utils.DATE_TIME_FORMAT
+                            })
                         }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                            onChange: (event)=>{
-                                onChangeEndTime(event.target.value);
-                            },
-                            onBlur: ()=>updateDateRange(),
-                            value: timeRangeInputs.end,
-                            label: "End Time",
-                            placeholder: DATE_TIME_FORMAT,
-                            type: "tel"
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ErrorBoundary.ErrorBoundary, {
+                            FallbackComponent: _ErrorAlert.ErrorAlert,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_xdatepickers.DateTimeField, {
+                                label: "End Time",
+                                value: new Date(timeRangeInputs.end),
+                                onChange: (event)=>{
+                                    if (event) {
+                                        onChangeEndTime(event);
+                                    }
+                                },
+                                onBlur: ()=>updateDateRange(),
+                                format: _utils.DATE_TIME_FORMAT
+                            })
                         })
                     ]
                 }),