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

package/dist/cjs/GaugeChart/GaugeChart.js

@@ -34,7 +34,7 @@ const _core1 = require("echarts/core");
 const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
-const _ChartsProvider = require("../context/ChartsProvider");
+const _context = require("../context");
 const _EChart = require("../EChart");
 (0, _core1.use)([
     _charts.GaugeChart,
@@ -47,15 +47,13 @@ const PROGRESS_WIDTH = 16;
 // adjusts when to show pointer icon
 const GAUGE_SMALL_BREAKPOINT = 170;
 function GaugeChart(props) {
-    const { width , height , data , format , axisLine , max  } = props;
-    const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
+    const { width, height, data, format, axisLine, max } = props;
+    const chartsTheme = (0, _context.useChartsTheme)();
     // useDeepMemo ensures value size util does not rerun everytime you hover on the chart
     const option = (0, _core.useDeepMemo)(()=>{
-        var _chartsTheme_echartsTheme_textStyle;
         if (data.value === undefined) return chartsTheme.noDataOption;
         // adjusts fontSize depending on number of characters
         const valueSizeClamp = getResponsiveValueSize(data.value, format, width, height);
-        var _chartsTheme_echartsTheme_textStyle_color;
         return {
             title: {
                 show: false
@@ -91,7 +89,7 @@ function GaugeChart(props) {
                             color: [
                                 [
                                     1,
-                                    '#e1e5e9'
+                                    'rgba(127,127,127,0.35)'
                                 ]
                             ],
                             width: PROGRESS_WIDTH
@@ -185,7 +183,7 @@ function GaugeChart(props) {
                             // https://echarts.apache.org/en/option.html#series-gauge.data.title
                             title: {
                                 show: true,
-                                color: (_chartsTheme_echartsTheme_textStyle_color = (_chartsTheme_echartsTheme_textStyle = chartsTheme.echartsTheme.textStyle) === null || _chartsTheme_echartsTheme_textStyle === void 0 ? void 0 : _chartsTheme_echartsTheme_textStyle.color) !== null && _chartsTheme_echartsTheme_textStyle_color !== void 0 ? _chartsTheme_echartsTheme_textStyle_color : 'inherit',
+                                color: chartsTheme.echartsTheme.textStyle?.color ?? 'inherit',
                                 offsetCenter: [
                                     0,
                                     '55%'
@@ -223,8 +221,7 @@ function getResponsiveValueSize(value, format, width, height) {
     const MAX_SIZE = 24;
     const SIZE_MULTIPLIER = 0.7;
     const formattedValue = typeof value === 'number' ? (0, _core.formatValue)(value, format) : `${value}`;
-    var _formattedValue_length;
-    const valueCharacters = (_formattedValue_length = formattedValue.length) !== null && _formattedValue_length !== void 0 ? _formattedValue_length : 2;
+    const valueCharacters = formattedValue.length ?? 2;
     const valueSize = Math.min(width, height) / valueCharacters * SIZE_MULTIPLIER;
     return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;
 }

package/dist/cjs/InfoTooltip/InfoTooltip.js

@@ -21,14 +21,8 @@ Object.defineProperty(exports, "InfoTooltip", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _material = require("@mui/material");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-const InfoTooltip = ({ id , title , description , placement , children , enterDelay , enterNextDelay  })=>{
+const InfoTooltip = ({ id, title, description, placement, children, enterDelay, enterNextDelay })=>{
     // Wrap children in a span to cover the following use cases:
     //  - Disabled buttons. MUI console.errors on putting these inside a tooltip.
     //  - Non-element tooltip children (e.g. text). The tooltip needs something that
@@ -41,17 +35,17 @@ const InfoTooltip = ({ id , title , description , placement , children , enterDe
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(StyledTooltip, {
         arrow: true,
         id: id,
-        placement: placement !== null && placement !== void 0 ? placement : 'top',
+        placement: placement ?? 'top',
         title: /*#__PURE__*/ (0, _jsxruntime.jsx)(TooltipContent, {
             title: title,
             description: description
         }),
-        enterDelay: enterDelay !== null && enterDelay !== void 0 ? enterDelay : 500,
-        enterNextDelay: enterNextDelay !== null && enterNextDelay !== void 0 ? enterNextDelay : 500,
+        enterDelay: enterDelay ?? 500,
+        enterNextDelay: enterNextDelay ?? 500,
         children: wrappedChildren
     });
 };
-const TooltipContent = ({ title , description  })=>{
+const TooltipContent = ({ title, description })=>{
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
@@ -72,12 +66,12 @@ const TooltipContent = ({ title , description  })=>{
         ]
     });
 };
-const StyledTooltip = (0, _material.styled)(({ className , ...props })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+const StyledTooltip = (0, _material.styled)(({ className, ...props })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
         ...props,
         classes: {
             popper: className
         }
-    }))(({ theme  })=>({
+    }))(({ theme })=>({
         [`& .${_material.tooltipClasses.tooltip}`]: {
             backgroundColor: theme.palette.background.tooltip,
             color: theme.palette.text.primary,

package/dist/cjs/Legend/CompactLegend.js

@@ -24,7 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _ListLegendItem = require("./ListLegendItem");
 const _legendmodel = require("./legend-model");
-function CompactLegend({ height , items , selectedItems , onLegendItemClick , onItemMouseOver , onItemMouseOut  }) {
+function CompactLegend({ height, items, selectedItems, onLegendItemClick, onItemMouseOver, onItemMouseOut }) {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         component: "ul",
         sx: {

package/dist/cjs/Legend/Legend.js

@@ -33,7 +33,7 @@ const _TableLegend = require("./TableLegend");
 // Set this number based on testing, but it may need to be tuned a bit on the
 // future as people test this out on different machines.
 const NEED_VIRTUALIZATION_LIMIT = 500;
-function Legend({ width , height , options , data , selectedItems , onSelectedItemsChange , onItemMouseOver , onItemMouseOut , tableProps  }) {
+function Legend({ width, height, options, data, selectedItems, onSelectedItemsChange, onItemMouseOver, onItemMouseOut, tableProps }) {
     const onLegendItemClick = (e, seriesId)=>{
         const isModifiedClick = e.metaKey || e.shiftKey;
         const newSelected = (0, _immer.produce)(selectedItems, (draft)=>{
@@ -102,9 +102,11 @@ function Legend({ width , height , options , data , selectedItems , onSelectedIt
     }
     if (options.position === 'right') {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-            sx: {
+            style: {
                 width: width,
-                height: height,
+                height: height
+            },
+            sx: {
                 position: 'absolute',
                 top: 0,
                 right: 0
@@ -114,9 +116,11 @@ function Legend({ width , height , options , data , selectedItems , onSelectedIt
     }
     // Position bottom
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-        sx: {
+        style: {
             width: width,
-            height: height,
+            height: height
+        },
+        sx: {
             position: 'absolute',
             bottom: 0
         },

package/dist/cjs/Legend/LegendColorBadge.js

@@ -21,15 +21,10 @@ Object.defineProperty(exports, "LegendColorBadge", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _react = require("react");
 const _material = require("@mui/material");
 const _utils = require("../utils");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-const LegendColorBadge = /*#__PURE__*/ _react.default.memo(function LegendColorBadge({ color , sx , ...others }) {
+const LegendColorBadge = /*#__PURE__*/ (0, _react.memo)(function LegendColorBadge({ color, sx, ...others }) {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         ...others,
         sx: (0, _utils.combineSx)({

package/dist/cjs/Legend/ListLegend.js

@@ -24,7 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _reactvirtuoso = require("react-virtuoso");
 const _ListLegendItem = require("./ListLegendItem");
 const _legendmodel = require("./legend-model");
-function ListLegend({ items , height , width , selectedItems , onLegendItemClick , onItemMouseOver , onItemMouseOut  }) {
+function ListLegend({ items, height, width, selectedItems, onLegendItemClick, onItemMouseOver, onItemMouseOut }) {
     // show full labels on hover when there are many total series
     const truncateLabels = items.length > 5;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactvirtuoso.Virtuoso, {

package/dist/cjs/Legend/ListLegendItem.js

@@ -21,50 +21,11 @@ Object.defineProperty(exports, "ListLegendItem", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _react = require("react");
 const _material = require("@mui/material");
 const _utils = require("../utils");
 const _LegendColorBadge = require("./LegendColorBadge");
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {};
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
-const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLegendItem({ item , sx , truncateLabel , onClick , isVisuallySelected , onMouseOver , onMouseOut , index , ...others }, ref) {
+const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLegendItem({ item, sx, truncateLabel, onClick, isVisuallySelected, onMouseOver, onMouseOut, index, ...others }, ref) {
     const [noWrap, setNoWrap] = (0, _react.useState)(truncateLabel);
     function handleTextMouseOver() {
         if (truncateLabel) {
@@ -77,33 +38,26 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
         }
     }
     const handleClick = (e)=>{
-        var _item_onClick;
         onClick(e, item.id);
-        (_item_onClick = item.onClick) === null || _item_onClick === void 0 ? void 0 : _item_onClick.call(item, e);
+        item.onClick?.(e);
     };
-    return /*#__PURE__*/ (0, _react.createElement)(_material.ListItem, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.ListItemButton, {
         ...others,
-        component: "div",
         role: "listitem",
         sx: (0, _utils.combineSx)({
             padding: 0,
             cursor: 'pointer'
         }, sx),
         dense: true,
-        key: item.id,
         onClick: handleClick,
-        onMouseOver: (e)=>{
-            return onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(e, {
+        onMouseOver: (e)=>onMouseOver?.(e, {
                 id: item.id,
                 index
-            });
-        },
-        onMouseOut: (e)=>{
-            return onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(e, {
+            }),
+        onMouseOut: (e)=>onMouseOut?.(e, {
                 id: item.id,
                 index
-            });
-        },
+            }),
         selected: isVisuallySelected,
         ref: ref,
         children: [
@@ -127,4 +81,4 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
         ]
     });
 });
-const ListLegendItem = /*#__PURE__*/ _react.default.memo(ListLegendItemBase);
+const ListLegendItem = /*#__PURE__*/ (0, _react.memo)(ListLegendItemBase);

package/dist/cjs/Legend/TableLegend.js

@@ -31,7 +31,7 @@ const COLUMNS = [
         // Starting with `title` attr instead of a tooltip because it is easier to
         // implement. We should try adding a tooltip in the future, but we'll need
         // to be very careful about performance when doing so with large tables.
-        cell: ({ getValue  })=>/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+        cell: ({ getValue })=>/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                 title: getValue(),
                 children: getValue()
             })
@@ -43,7 +43,7 @@ const getRowId = (data)=>{
 const getCheckboxColor = (data)=>{
     return data.color;
 };
-function TableLegend({ items , selectedItems: initRowSelection , onSelectedItemsChange , onItemMouseOver , onItemMouseOut , height , width , columns: additionalColumns = [] , sorting , onSortingChange  }) {
+function TableLegend({ items, selectedItems: initRowSelection, onSelectedItemsChange, onItemMouseOver, onItemMouseOut, height, width, columns: additionalColumns = [], sorting, onSortingChange }) {
     const rowSelection = (0, _react.useMemo)(()=>{
         return typeof initRowSelection !== 'string' ? initRowSelection : // items for checkboxes.
         // TODO: clean this up if we switch to also using checkboxes in list legend.
@@ -75,6 +75,7 @@ function TableLegend({ items , selectedItems: initRowSelection , onSelectedItems
         data: items,
         columns: columns,
         density: "compact",
+        defaultColumnWidth: "auto",
         getRowId: getRowId,
         getCheckboxColor: getCheckboxColor,
         checkboxSelection: true,

package/dist/cjs/LineChart/LineChart.js

@@ -28,9 +28,8 @@ const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _EChart = require("../EChart");
-const _ChartsProvider = require("../context/ChartsProvider");
+const _context = require("../context");
 const _TimeSeriesTooltip = require("../TimeSeriesTooltip");
-const _TimeZoneProvider = require("../context/TimeZoneProvider");
 const _utils = require("../utils");
 (0, _core.use)([
     _charts.LineChart,
@@ -45,18 +44,17 @@ const _utils = require("../utils");
     _components.LegendComponent,
     _renderers.CanvasRenderer
 ]);
-const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ height , data , yAxis , format , grid , legend , tooltipConfig =_TimeSeriesTooltip.DEFAULT_TOOLTIP_CONFIG , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }, ref) {
-    var _option_tooltip;
-    const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
+const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ height, data, yAxis, format, grid, legend, tooltipConfig = _TimeSeriesTooltip.DEFAULT_TOOLTIP_CONFIG, noDataVariant = 'message', syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride }, ref) {
+    const chartsTheme = (0, _context.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
     const [tooltipPinnedCoords, setTooltipPinnedCoords] = (0, _react.useState)(null);
-    const { timeZone  } = (0, _TimeZoneProvider.useTimeZone)();
+    const { timeZone } = (0, _context.useTimeZone)();
     const [isDragging, setIsDragging] = (0, _react.useState)(false);
     const [startX, setStartX] = (0, _react.useState)(0);
     (0, _react.useImperativeHandle)(ref, ()=>{
         return {
-            highlightSeries ({ id  }) {
+            highlightSeries ({ id }) {
                 if (!chartRef.current) {
                     // when chart undef, do not highlight series when hovering over legend
                     return;
@@ -85,10 +83,8 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
                     }, 10);
                 }
                 if (onDataZoom === undefined || params.batch[0] === undefined) return;
-                var _params_batch__startValue;
-                const startIndex = (_params_batch__startValue = params.batch[0].startValue) !== null && _params_batch__startValue !== void 0 ? _params_batch__startValue : 0;
-                var _params_batch__endValue;
-                const endIndex = (_params_batch__endValue = params.batch[0].endValue) !== null && _params_batch__endValue !== void 0 ? _params_batch__endValue : data.xAxis.length - 1;
+                const startIndex = params.batch[0].startValue ?? 0;
+                const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;
                 const xAxisStartValue = data.xAxis[startIndex];
                 const xAxisEndValue = data.xAxis[endIndex];
                 if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {
@@ -110,14 +106,13 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
     if (chartRef.current !== undefined) {
         (0, _utils.enableDataZoom)(chartRef.current);
     }
-    const { noDataOption  } = chartsTheme;
+    const { noDataOption } = chartsTheme;
     const option = (0, _react.useMemo)(()=>{
         if (data.timeSeries === undefined) return {};
         // The "chart" `noDataVariant` is only used when the `timeSeries` is an
         // empty array because a `null` value will throw an error.
         if (data.timeSeries === null || data.timeSeries.length === 0 && noDataVariant === 'message') return noDataOption;
-        var _data_rangeMs;
-        const rangeMs = (_data_rangeMs = data.rangeMs) !== null && _data_rangeMs !== void 0 ? _data_rangeMs : (0, _utils.getDateRange)(data.xAxis);
+        const rangeMs = data.rangeMs ?? (0, _utils.getDateRange)(data.xAxis);
         const option = {
             series: data.timeSeries,
             xAxis: {
@@ -172,7 +167,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
         noDataVariant
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-        sx: {
+        style: {
             height
         },
         onClick: (e)=>{
@@ -202,7 +197,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
             }
         },
         onMouseDown: (e)=>{
-            const { clientX  } = e;
+            const { clientX } = e;
             setIsDragging(true);
             setStartX(clientX);
         },
@@ -211,7 +206,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
             if (!(e.target instanceof HTMLCanvasElement)) {
                 return;
             }
-            const { clientX  } = e;
+            const { clientX } = e;
             if (isDragging) {
                 const deltaX = clientX - startX;
                 if (deltaX > 0) {
@@ -251,7 +246,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ 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.LineChartTooltip, {
+            showTooltip === true && option.tooltip?.showContent === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeSeriesTooltip.LineChartTooltip, {
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: tooltipConfig.wrapLabels,

package/dist/cjs/LinksEditor/LinksEditor.js

@@ -0,0 +1,174 @@
+// 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LinksEditor", {
+    enumerable: true,
+    get: function() {
+        return LinksEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _reacthookform = require("react-hook-form");
+const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
+const _Minus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Minus"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function LinksEditor({ control, ...props }) {
+    const { fields, append, remove } = (0, _reacthookform.useFieldArray)({
+        control: control,
+        name: 'panelDefinition.spec.links'
+    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        ...props,
+        gap: 3,
+        children: [
+            fields && fields.length > 0 ? fields.map((field, index)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            direction: "row",
+                            gap: 1,
+                            alignItems: "center",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(LinkControl, {
+                                    control: control,
+                                    index: index
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                    style: {
+                                        width: 'fit-content',
+                                        height: 'fit-content'
+                                    },
+                                    onClick: ()=>remove(index),
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Minus.default, {})
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {})
+                    ]
+                }, field.id)) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                variant: "subtitle1",
+                mb: 2,
+                fontStyle: "italic",
+                children: "No links defined"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                style: {
+                    width: 'fit-content',
+                    height: 'fit-content'
+                },
+                onClick: ()=>append({
+                        url: ''
+                    }),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {})
+            })
+        ]
+    });
+}
+function LinkControl({ control, index }) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        gap: 2,
+        flexGrow: 1,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                direction: "row",
+                gap: 2,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                        control: control,
+                        name: `panelDefinition.spec.links.${index}.url`,
+                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                ...field,
+                                required: true,
+                                fullWidth: true,
+                                label: "URL",
+                                error: !!fieldState.error,
+                                helperText: fieldState.error?.message,
+                                onChange: (event)=>{
+                                    field.onChange(event);
+                                }
+                            })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                        control: control,
+                        name: `panelDefinition.spec.links.${index}.name`,
+                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                ...field,
+                                fullWidth: true,
+                                label: "Name",
+                                defaultValue: "",
+                                error: !!fieldState.error,
+                                helperText: fieldState.error?.message,
+                                onChange: (event)=>{
+                                    field.onChange(event);
+                                }
+                            })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                        control: control,
+                        name: `panelDefinition.spec.links.${index}.tooltip`,
+                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                ...field,
+                                fullWidth: true,
+                                label: "Tooltip",
+                                defaultValue: "",
+                                error: !!fieldState.error,
+                                helperText: fieldState.error?.message,
+                                onChange: (event)=>{
+                                    field.onChange(event);
+                                }
+                            })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                gap: 2,
+                direction: "row",
+                alignItems: "center",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                        control: control,
+                        name: `panelDefinition.spec.links.${index}.renderVariables`,
+                        render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                                label: "Render Variables",
+                                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+                                    ...field,
+                                    checked: field.value,
+                                    onChange: (e)=>field.onChange(e.target.checked)
+                                })
+                            })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                        control: control,
+                        name: `panelDefinition.spec.links.${index}.targetBlank`,
+                        render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                                label: "Open in new tab",
+                                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+                                    ...field,
+                                    checked: field.value,
+                                    onChange: (e)=>field.onChange(e.target.checked)
+                                })
+                            })
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/cjs/LinksEditor/index.js

@@ -0,0 +1,30 @@
+// 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./LinksEditor"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/ModeSelector/ModeSelector.js

@@ -33,8 +33,8 @@ const MODE_OPTIONS = [
         label: 'Percentage'
     }
 ];
-function ModeSelector({ disablePercentageMode , onChange , value ='value'  }) {
-    const handleModeChange = (_, { id  })=>{
+function ModeSelector({ disablePercentageMode, onChange, value = 'value' }) {
+    const handleModeChange = (_, { id })=>{
         onChange(id);
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {

package/dist/cjs/OptionsEditorLayout/OptionsEditorColumn.js

@@ -22,7 +22,7 @@ Object.defineProperty(exports, "OptionsEditorColumn", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const OptionsEditorColumn = ({ children  })=>{
+const OptionsEditorColumn = ({ children })=>{
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
         item: true,
         xs: 4,

package/dist/cjs/OptionsEditorLayout/OptionsEditorControl.js

@@ -31,7 +31,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const OptionsEditorControl = ({ label , control , description  })=>{
+const OptionsEditorControl = ({ label, control, description })=>{
     // Make sure we have a unique ID we can use for associating labels and
     // controls for a11y.
     const generatedControlId = (0, _utils.useId)('EditorSectionControl');

package/dist/cjs/OptionsEditorLayout/OptionsEditorGrid.js

@@ -22,7 +22,7 @@ Object.defineProperty(exports, "OptionsEditorGrid", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const OptionsEditorGrid = ({ children  })=>{
+const OptionsEditorGrid = ({ children })=>{
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
         container: true,
         spacing: 8,