@perses-dev/dashboards 0.53.0 → 0.54.0-beta.0

package/dist/cjs/components/DashboardShortcuts/useDashboardShortcuts.js

@@ -0,0 +1,373 @@
+// Copyright 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, "useDashboardShortcuts", {
+    enumerable: true,
+    get: function() {
+        return useDashboardShortcuts;
+    }
+});
+const _react = require("react");
+const _spec = require("@perses-dev/spec");
+const _components = require("@perses-dev/components");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _reacthotkeys = require("@tanstack/react-hotkeys");
+const _keyboardshortcuts = require("../../keyboard-shortcuts");
+const _DashboardProvider = require("../../context/DashboardProvider");
+const SAVE_SHORTCUT_EDIT_MODE_MESSAGE = 'Enter edit mode to save this dashboard.';
+const SAVE_SHORTCUT_READONLY_MESSAGE = 'This dashboard is read-only. Keyboard save is disabled.';
+const SAVE_SHORTCUT_UNAVAILABLE_MESSAGE = 'Save action is unavailable for this dashboard.';
+function parsePanelKey(panelKey) {
+    const dashIndex = panelKey.indexOf('-');
+    if (dashIndex === -1) return null;
+    const panelGroupId = parseInt(panelKey.substring(0, dashIndex), 10);
+    const panelGroupItemLayoutId = panelKey.substring(dashIndex + 1);
+    if (isNaN(panelGroupId)) return null;
+    return {
+        panelGroupId,
+        panelGroupItemLayoutId
+    };
+}
+// Zoom limits: 1 second minimum, 10 years maximum
+const MIN_ZOOM_DURATION_MS = 1_000;
+const MAX_ZOOM_DURATION_MS = 10 * 365.25 * 24 * 60 * 60 * 1_000;
+function resolveAbsoluteRange(timeRange) {
+    const absoluteRange = (0, _spec.isRelativeTimeRange)(timeRange) ? (0, _spec.toAbsoluteTimeRange)(timeRange) : timeRange;
+    const startMs = absoluteRange.start.getTime();
+    const endMs = absoluteRange.end.getTime();
+    const durationMs = endMs - startMs;
+    const midpointMs = Math.round(startMs + durationMs / 2);
+    return {
+        absoluteRange,
+        durationMs,
+        midpointMs
+    };
+}
+const selectPanelStoreActions = (state)=>({
+        openEditPanel: state.openEditPanel,
+        duplicatePanel: state.duplicatePanel,
+        openDeletePanelDialog: state.openDeletePanelDialog,
+        setViewPanel: state.setViewPanel,
+        panelEditor: state.panelEditor
+    });
+function useDashboardShortcuts({ onSave, onRefresh, isReadonly, onEditButtonClick, onCancelButtonClick, disabled = false }) {
+    const focusedPanelKey = (0, _keyboardshortcuts.useFocusedPanel)();
+    const { isEditMode, setEditMode } = (0, _DashboardProvider.useEditMode)();
+    const { timeRange, setTimeRange, refresh } = (0, _pluginsystem.useTimeRange)();
+    const { infoSnackbar, warningSnackbar } = (0, _components.useSnackbar)();
+    const viewPanel = (0, _DashboardProvider.useViewPanelGroup)();
+    const { openEditPanel, duplicatePanel, openDeletePanelDialog, setViewPanel, panelEditor } = (0, _DashboardProvider.useDashboardStore)(selectPanelStoreActions);
+    const { saveDashboard } = (0, _DashboardProvider.useSaveDashboard)(onSave);
+    const panelFocused = focusedPanelKey !== null;
+    // --- Handlers ---
+    const handleSave = (0, _react.useCallback)(()=>{
+        if (isReadonly) {
+            warningSnackbar(SAVE_SHORTCUT_READONLY_MESSAGE);
+            return;
+        }
+        if (!isEditMode) {
+            infoSnackbar(SAVE_SHORTCUT_EDIT_MODE_MESSAGE);
+            return;
+        }
+        if (!onSave) {
+            warningSnackbar(SAVE_SHORTCUT_UNAVAILABLE_MESSAGE);
+            return;
+        }
+        saveDashboard();
+    }, [
+        infoSnackbar,
+        isEditMode,
+        isReadonly,
+        onSave,
+        saveDashboard,
+        warningSnackbar
+    ]);
+    const handleRefresh = (0, _react.useCallback)(()=>{
+        refresh();
+        infoSnackbar('Dashboard refreshed.');
+        if (onRefresh) {
+            onRefresh();
+        }
+    }, [
+        refresh,
+        infoSnackbar,
+        onRefresh
+    ]);
+    const handleToggleEditMode = (0, _react.useCallback)(()=>{
+        if (isEditMode) {
+            // Switching from edit to view: delegate to cancel flow (shows discard dialog if needed)
+            if (onCancelButtonClick) {
+                onCancelButtonClick();
+            } else {
+                setEditMode(false);
+            }
+        } else {
+            // Switching from view to edit: delegate to edit flow (saves original state)
+            if (onEditButtonClick) {
+                onEditButtonClick();
+            } else {
+                setEditMode(true);
+            }
+        }
+    }, [
+        isEditMode,
+        setEditMode,
+        onCancelButtonClick,
+        onEditButtonClick
+    ]);
+    // Time range handlers
+    const handleTimeZoomOut = (0, _react.useCallback)(()=>{
+        const { durationMs, midpointMs } = resolveAbsoluteRange(timeRange);
+        const newDuration = Math.min(durationMs * 2, MAX_ZOOM_DURATION_MS);
+        const halfNew = Math.round(newDuration / 2);
+        setTimeRange({
+            start: new Date(midpointMs - halfNew),
+            end: new Date(midpointMs + halfNew)
+        });
+    }, [
+        timeRange,
+        setTimeRange
+    ]);
+    const handleTimeZoomIn = (0, _react.useCallback)(()=>{
+        const { durationMs, midpointMs } = resolveAbsoluteRange(timeRange);
+        const newDuration = Math.max(Math.round(durationMs / 2), MIN_ZOOM_DURATION_MS);
+        const halfNew = Math.round(newDuration / 2);
+        setTimeRange({
+            start: new Date(midpointMs - halfNew),
+            end: new Date(midpointMs + halfNew)
+        });
+    }, [
+        timeRange,
+        setTimeRange
+    ]);
+    const handleTimeShiftBack = (0, _react.useCallback)(()=>{
+        const { absoluteRange, durationMs } = resolveAbsoluteRange(timeRange);
+        const shift = Math.round(durationMs / 2);
+        setTimeRange({
+            start: new Date(absoluteRange.start.getTime() - shift),
+            end: new Date(absoluteRange.end.getTime() - shift)
+        });
+    }, [
+        timeRange,
+        setTimeRange
+    ]);
+    const handleTimeShiftForward = (0, _react.useCallback)(()=>{
+        const { absoluteRange, durationMs } = resolveAbsoluteRange(timeRange);
+        const shift = Math.round(durationMs / 2);
+        setTimeRange({
+            start: new Date(absoluteRange.start.getTime() + shift),
+            end: new Date(absoluteRange.end.getTime() + shift)
+        });
+    }, [
+        timeRange,
+        setTimeRange
+    ]);
+    const handleTimeMakeAbsolute = (0, _react.useCallback)(()=>{
+        if ((0, _spec.isRelativeTimeRange)(timeRange)) {
+            setTimeRange((0, _spec.toAbsoluteTimeRange)(timeRange));
+        }
+    }, [
+        timeRange,
+        setTimeRange
+    ]);
+    const handleTimeCopy = (0, _react.useCallback)(()=>{
+        const absoluteRange = (0, _spec.isRelativeTimeRange)(timeRange) ? (0, _spec.toAbsoluteTimeRange)(timeRange) : timeRange;
+        const text = `${absoluteRange.start.toISOString()} - ${absoluteRange.end.toISOString()}`;
+        navigator.clipboard.writeText(text).then(()=>{
+            infoSnackbar('Time range copied to clipboard.');
+        }).catch(()=>{
+            warningSnackbar('Failed to copy time range to clipboard.');
+        });
+    }, [
+        timeRange,
+        infoSnackbar,
+        warningSnackbar
+    ]);
+    const handleTimePaste = (0, _react.useCallback)(()=>{
+        const FORMAT_HINT = 'Expected format: "<ISO date format> - <ISO date format>".';
+        navigator.clipboard.readText().then((text)=>{
+            const parts = text.split(' - ');
+            if (parts.length !== 2) {
+                warningSnackbar(`Clipboard does not contain a valid time range. ${FORMAT_HINT}`);
+                return;
+            }
+            const [startStr, endStr] = parts;
+            const start = new Date(startStr.trim());
+            const end = new Date(endStr.trim());
+            if (isNaN(start.getTime()) || isNaN(end.getTime())) {
+                warningSnackbar(`Clipboard does not contain a valid time range. ${FORMAT_HINT}`);
+                return;
+            }
+            if (start >= end) {
+                warningSnackbar('Invalid time range: start must be before end.');
+                return;
+            }
+            const newRange = {
+                start,
+                end
+            };
+            setTimeRange(newRange);
+            infoSnackbar('Time range pasted from clipboard.');
+        }).catch(()=>{
+            warningSnackbar('Unable to read from clipboard. Check browser permissions.');
+        });
+    }, [
+        setTimeRange,
+        infoSnackbar,
+        warningSnackbar
+    ]);
+    // Panel handlers
+    const handlePanelEditToggle = (0, _react.useCallback)(()=>{
+        if (panelEditor !== undefined) {
+            panelEditor.close();
+            return;
+        }
+        if (focusedPanelKey && isEditMode) {
+            const panelId = parsePanelKey(focusedPanelKey);
+            if (panelId) {
+                openEditPanel(panelId);
+            }
+        }
+    }, [
+        focusedPanelKey,
+        isEditMode,
+        openEditPanel,
+        panelEditor
+    ]);
+    const handlePanelFullscreenToggle = (0, _react.useCallback)(()=>{
+        if (viewPanel !== undefined) {
+            setViewPanel(undefined);
+            return;
+        }
+        if (focusedPanelKey) {
+            const panelId = parsePanelKey(focusedPanelKey);
+            if (panelId) {
+                setViewPanel(panelId);
+            }
+        }
+    }, [
+        focusedPanelKey,
+        setViewPanel,
+        viewPanel
+    ]);
+    const handlePanelDuplicate = (0, _react.useCallback)(()=>{
+        if (focusedPanelKey && isEditMode) {
+            const panelId = parsePanelKey(focusedPanelKey);
+            if (panelId) {
+                duplicatePanel(panelId);
+            }
+        }
+    }, [
+        focusedPanelKey,
+        isEditMode,
+        duplicatePanel
+    ]);
+    const handlePanelDelete = (0, _react.useCallback)(()=>{
+        if (focusedPanelKey && isEditMode) {
+            const panelId = parsePanelKey(focusedPanelKey);
+            if (panelId) {
+                openDeletePanelDialog(panelId);
+            }
+        }
+    }, [
+        focusedPanelKey,
+        isEditMode,
+        openDeletePanelDialog
+    ]);
+    // Register shortcuts
+    (0, _reacthotkeys.useHotkeys)([
+        {
+            def: _keyboardshortcuts.SAVE_DASHBOARD_SHORTCUT,
+            enabled: !disabled,
+            callback: handleSave
+        },
+        {
+            def: _keyboardshortcuts.PANEL_EDIT_SHORTCUT,
+            enabled: !disabled && (panelFocused || panelEditor !== undefined),
+            callback: handlePanelEditToggle
+        },
+        {
+            def: _keyboardshortcuts.PANEL_FULLSCREEN_SHORTCUT,
+            enabled: !disabled && (panelFocused || viewPanel !== undefined),
+            callback: handlePanelFullscreenToggle
+        }
+    ].map(({ def, enabled, callback })=>({
+            hotkey: (0, _keyboardshortcuts.requireShortcutHotkey)(def),
+            callback,
+            options: (0, _keyboardshortcuts.buildShortcutOptions)(def, enabled)
+        })));
+    (0, _reacthotkeys.useHotkeySequences)([
+        {
+            def: _keyboardshortcuts.REFRESH_DASHBOARD_SHORTCUT,
+            enabled: !disabled,
+            callback: handleRefresh
+        },
+        {
+            def: _keyboardshortcuts.TOGGLE_EDIT_MODE_SHORTCUT,
+            enabled: !disabled,
+            callback: handleToggleEditMode
+        },
+        {
+            def: _keyboardshortcuts.TIME_ZOOM_OUT_SHORTCUT,
+            enabled: !disabled,
+            callback: handleTimeZoomOut
+        },
+        {
+            def: _keyboardshortcuts.TIME_ZOOM_IN_SHORTCUT,
+            enabled: !disabled,
+            callback: handleTimeZoomIn
+        },
+        {
+            def: _keyboardshortcuts.TIME_SHIFT_BACK_SHORTCUT,
+            enabled: !disabled,
+            callback: handleTimeShiftBack
+        },
+        {
+            def: _keyboardshortcuts.TIME_SHIFT_FORWARD_SHORTCUT,
+            enabled: !disabled,
+            callback: handleTimeShiftForward
+        },
+        {
+            def: _keyboardshortcuts.TIME_MAKE_ABSOLUTE_SHORTCUT,
+            enabled: !disabled,
+            callback: handleTimeMakeAbsolute
+        },
+        {
+            def: _keyboardshortcuts.TIME_COPY_SHORTCUT,
+            enabled: !disabled,
+            callback: handleTimeCopy
+        },
+        {
+            def: _keyboardshortcuts.TIME_PASTE_SHORTCUT,
+            enabled: !disabled,
+            callback: handleTimePaste
+        },
+        {
+            def: _keyboardshortcuts.PANEL_DUPLICATE_SHORTCUT,
+            enabled: !disabled && panelFocused,
+            callback: handlePanelDuplicate
+        },
+        {
+            def: _keyboardshortcuts.PANEL_DELETE_SHORTCUT,
+            enabled: !disabled && panelFocused,
+            callback: handlePanelDelete
+        }
+    ].map(({ def, enabled, callback })=>({
+            sequence: (0, _keyboardshortcuts.requireShortcutSequence)(def),
+            callback,
+            options: (0, _keyboardshortcuts.buildShortcutOptions)(def, enabled)
+        })));
+}

package/dist/cjs/components/DashboardToolbar/DashboardToolbar.js

@@ -34,10 +34,13 @@ const _EditButton = require("../EditButton");
 const _EditJsonButton = require("../EditJsonButton");
 const _SaveDashboardButton = require("../SaveDashboardButton");
 const _DashboardStickyToolbar = require("../DashboardStickyToolbar");
+const _DashboardLinks = require("../DashboardLinks");
+const _LinksDisplay = require("../LinksDisplay");
 const DashboardToolbar = (props)=>{
-    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, isVariableEnabled, isDatasourceEnabled, onEditButtonClick, onCancelButtonClick, onSave } = props;
+    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, isVariableEnabled, isDatasourceEnabled, isLinksEnabled = true, onEditButtonClick, onCancelButtonClick, onSave } = props;
     const { isEditMode } = (0, _context.useEditMode)();
     const { timeZone, setTimeZone } = (0, _pluginsystem.useTimeZoneParams)('local');
+    const dashboardLinks = (0, _context.useDashboardLinks)();
     const isBiggerThanSm = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('sm'));
     const isBiggerThanMd = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('md'));
     const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
@@ -54,10 +57,21 @@ const DashboardToolbar = (props)=>{
                     py: 1.5,
                     display: "flex",
                     sx: {
+                        gap: 2,
                         backgroundColor: (theme)=>theme.palette.primary.main + (isEditMode ? '30' : '0')
                     },
                     children: [
                         dashboardTitle,
+                        isLinksEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                            display: "flex",
+                            justifyItems: "center",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_LinksDisplay.LinksDisplay, {
+                                links: dashboardLinks,
+                                variant: "dashboard"
+                            })
+                        }),
                         isEditMode ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                             direction: "row",
                             gap: 1,
@@ -79,6 +93,7 @@ const DashboardToolbar = (props)=>{
                                     children: [
                                         isVariableEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variables.EditVariablesButton, {}),
                                         isDatasourceEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Datasources.EditDatasourcesButton, {}),
+                                        isLinksEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardLinks.EditDashboardLinksButton, {}),
                                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_AddPanelButton.AddPanelButton, {}),
                                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_AddGroupButton.AddGroupButton, {})
                                     ]

package/dist/cjs/components/Datasources/EditDatasourcesButton.js

@@ -58,13 +58,7 @@ function EditDatasourcesButton() {
             obj[key] = datasources[key];
             return obj;
         }, {});
-        setDashboard(dashboard.kind === 'Dashboard' ? {
-            ...dashboard,
-            spec: {
-                ...dashboard.spec,
-                datasources: datasources
-            }
-        } : {
+        setDashboard({
             ...dashboard,
             spec: {
                 ...dashboard.spec,

package/dist/cjs/components/GridLayout/GridItemContent.js

@@ -27,6 +27,7 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _core = require("@perses-dev/core");
 const _context = require("../../context");
+const _keyboardshortcuts = require("../../keyboard-shortcuts");
 const _Panel = require("../Panel");
 const _QueryViewerDialog = require("../QueryViewerDialog");
 function _getRequireWildcardCache(nodeInterop) {
@@ -77,11 +78,19 @@ function GridItemContent(props) {
     const { isEditMode } = (0, _context.useEditMode)();
     const { openEditPanel, openDeletePanelDialog, duplicatePanel, viewPanel } = (0, _context.usePanelActions)(panelGroupItemId);
     const viewPanelGroupItemId = (0, _context.useViewPanelGroup)();
-    const { ref, inView } = (0, _reactintersectionobserver.useInView)({
-        threshold: 0.2,
+    // Panel focus tracking for keyboard shortcuts
+    const { onMouseEnter, onMouseLeave } = (0, _keyboardshortcuts.usePanelFocusHandlers)(`${panelGroupItemId.panelGroupId}-${panelGroupItemId.panelGroupItemLayoutId}`);
+    const { ref: queryRef, inView: shouldQuery } = (0, _reactintersectionobserver.useInView)({
+        threshold: 0,
         initialInView: false,
         triggerOnce: true
     });
+    const { ref: renderRef, inView: shouldRender } = (0, _reactintersectionobserver.useInView)({
+        threshold: 0.2,
+        initialInView: false,
+        triggerOnce: false
+    });
+    const mergedRef = (0, _material.useForkRef)(renderRef, queryRef);
     const [openQueryViewer, setOpenQueryViewer] = (0, _react.useState)(false);
     const viewQueriesHandler = (0, _react.useMemo)(()=>{
         return isEditMode || !queries?.length ? undefined : {
@@ -124,10 +133,14 @@ function GridItemContent(props) {
     });
     const pluginQueryOptions = typeof plugin?.queryOptions === 'function' ? plugin?.queryOptions(panelDefinition.spec.plugin.spec) : plugin?.queryOptions;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-        ref: ref,
+        ref: mergedRef,
+        tabIndex: -1,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
         sx: {
             width: '100%',
-            height: '100%'
+            height: '100%',
+            outline: 'none'
         },
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
@@ -137,9 +150,9 @@ function GridItemContent(props) {
                     ...pluginQueryOptions
                 },
                 queryOptions: {
-                    enabled: inView
+                    enabled: shouldQuery
                 },
-                children: inView && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Panel.Panel, {
+                children: shouldRender && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Panel.Panel, {
                     definition: panelDefinition,
                     readHandlers: readHandlers,
                     editHandlers: editHandlers,

package/dist/cjs/components/{Panel/PanelLinks.js → LinksDisplay/LinksDisplay.js}

@@ -14,10 +14,10 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "PanelLinks", {
+Object.defineProperty(exports, "LinksDisplay", {
     enumerable: true,
     get: function() {
-        return PanelLinks;
+        return LinksDisplay;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -31,7 +31,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function PanelLinks({ links }) {
+function LinksDisplay({ links, variant }) {
     const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
     const isMenuOpened = Boolean(anchorEl);
     const handleOpenMenu = (event)=>{
@@ -40,21 +40,48 @@ function PanelLinks({ links }) {
     const handleClose = ()=>{
         setAnchorEl(null);
     };
-    // If there is only one link, show it directly
-    if (links.length === 1 && links[0]) {
-        const link = links[0];
+    if (links.length === 0) {
+        return null;
+    }
+    // Panel variant: single link shows as icon button
+    if (variant === 'panel' && links.length === 1 && links[0]) {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)(LinkButton, {
-            link: link
+            link: links[0]
+        });
+    }
+    // Dashboard variant: 1-3 links show as chips
+    // Max character limit for the name and url to prevent overflow
+    // in the dashboard title area, but if either the name or url is too long,
+    // we will fall back to showing the links in a dropdown menu
+    if (variant === 'dashboard' && links.length <= 3) {
+        const canRenderAsChips = links.every((link)=>{
+            if (link.name) {
+                return link.name.length < 30;
+            }
+            if (link.url) {
+                return link.url.length < 70;
+            }
+            return false;
         });
+        if (canRenderAsChips) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                direction: "row",
+                spacing: 1,
+                children: links.map((link)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(LinkChip, {
+                        link: link
+                    }, link.url))
+            });
+        }
     }
-    // Else we show a menu with a list of all links
+    // Default: show dropdown menu for multiple links
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                 description: `${links.length} links`,
                 enterDelay: 100,
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                    "aria-label": "Panel links",
+                    "aria-label": `${(0, _material.capitalize)(variant)}-links`,
+                    id: `${variant}-links-button`,
                     size: "small",
                     onClick: handleOpenMenu,
                     sx: (theme)=>({
@@ -75,7 +102,7 @@ function PanelLinks({ links }) {
                 open: isMenuOpened,
                 onClose: handleClose,
                 MenuListProps: {
-                    'aria-labelledby': 'panel-links'
+                    'aria-labelledby': `${variant}-links-button`
                 },
                 children: links.map((link)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(LinkMenuItem, {
                         link: link
@@ -84,6 +111,28 @@ function PanelLinks({ links }) {
         ]
     });
 }
+function LinkChip({ link }) {
+    const { url, name, tooltip, targetBlank } = useLink(link);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+        description: tooltip ?? url,
+        enterDelay: 100,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+            label: name ?? url,
+            component: "a",
+            href: url,
+            target: targetBlank ? '_blank' : '_self',
+            clickable: true,
+            size: "medium",
+            icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Launch.default, {
+                color: "inherit",
+                fontSize: "small"
+            }),
+            sx: (theme)=>({
+                    height: theme.spacing(3)
+                })
+        })
+    });
+}
 function LinkButton({ link }) {
     const { url, name, tooltip, targetBlank } = useLink(link);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {

package/dist/cjs/components/LinksDisplay/index.js

@@ -0,0 +1,30 @@
+// Copyright 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("./LinksDisplay"), 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;
+}