@perses-dev/tracing-gantt-chart-plugin 0.8.0 → 0.9.0

package/lib/TracingGanttChartPanel.js

@@ -15,7 +15,7 @@ import { NoDataOverlay, TextOverlay, useChartsTheme } from '@perses-dev/componen
 import { Box } from '@mui/material';
 import { TracingGanttChart } from './TracingGanttChart/TracingGanttChart';
 export function TracingGanttChartPanel(props) {
-    const { spec, queryResults, attributeLinks } = props;
+    const { spec, queryResults } = props;
     const chartsTheme = useChartsTheme();
     const contentPadding = chartsTheme.container.padding.default;
     if (queryResults.length > 1) {
@@ -29,6 +29,14 @@ export function TracingGanttChartPanel(props) {
             resource: "trace"
         });
     }
+    const pluginSpec = queryResults[0]?.definition.spec.plugin.spec;
+    const datasourceName = pluginSpec?.datasource?.name;
+    const customLinks = spec.links ? {
+        variables: {
+            datasourceName: datasourceName ?? ''
+        },
+        links: spec.links
+    } : undefined;
     return /*#__PURE__*/ _jsx(Box, {
         sx: {
             height: '100%',
@@ -36,7 +44,7 @@ export function TracingGanttChartPanel(props) {
         },
         children: /*#__PURE__*/ _jsx(TracingGanttChart, {
             options: spec,
-            attributeLinks: attributeLinks,
+            customLinks: customLinks,
             trace: trace
         })
     });

package/lib/TracingGanttChartPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TracingGanttChartPanel.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PanelProps } from '@perses-dev/plugin-system';\nimport { NoDataOverlay, TextOverlay, useChartsTheme } from '@perses-dev/components';\nimport { Box } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { TraceData } from '@perses-dev/core';\nimport { TracingGanttChartOptions } from './gantt-chart-model';\nimport { TracingGanttChart } from './TracingGanttChart/TracingGanttChart';\nimport { AttributeLinks } from './TracingGanttChart/DetailPane/Attributes';\n\nexport interface TracingGanttChartPanelProps extends PanelProps<TracingGanttChartOptions, TraceData> {\n  /**\n   * Allows custom links for each attribute in the detail pane.\n   * Example:\n   * {\n   *   'k8s.pod.name': (attrs) => `/my/console/namespace/${attrs['k8s.namespace.name']?.stringValue}/${attrs['k8s.pod.name']?.stringValue}/detail`\n   * }\n   */\n  attributeLinks?: AttributeLinks;\n}\n\nexport function TracingGanttChartPanel(props: TracingGanttChartPanelProps): ReactElement {\n  const { spec, queryResults, attributeLinks } = props;\n  const chartsTheme = useChartsTheme();\n  const contentPadding = chartsTheme.container.padding.default;\n\n  if (queryResults.length > 1) {\n    return <TextOverlay message=\"This panel does not support more than one query.\" />;\n  }\n\n  const trace = queryResults[0]?.data.trace;\n  if (!trace) {\n    return <NoDataOverlay resource=\"trace\" />;\n  }\n\n  return (\n    <Box sx={{ height: '100%', padding: `${contentPadding}px` }}>\n      <TracingGanttChart options={spec} attributeLinks={attributeLinks} trace={trace} />\n    </Box>\n  );\n}\n"],"names":["NoDataOverlay","TextOverlay","useChartsTheme","Box","TracingGanttChart","TracingGanttChartPanel","props","spec","queryResults","attributeLinks","chartsTheme","contentPadding","container","padding","default","length","message","trace","data","resource","sx","height","options"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,aAAa,EAAEC,WAAW,EAAEC,cAAc,QAAQ,yBAAyB;AACpF,SAASC,GAAG,QAAQ,gBAAgB;AAIpC,SAASC,iBAAiB,QAAQ,wCAAwC;AAc1E,OAAO,SAASC,uBAAuBC,KAAkC;IACvE,MAAM,EAAEC,IAAI,EAAEC,YAAY,EAAEC,cAAc,EAAE,GAAGH;IAC/C,MAAMI,cAAcR;IACpB,MAAMS,iBAAiBD,YAAYE,SAAS,CAACC,OAAO,CAACC,OAAO;IAE5D,IAAIN,aAAaO,MAAM,GAAG,GAAG;QAC3B,qBAAO,KAACd;YAAYe,SAAQ;;IAC9B;IAEA,MAAMC,QAAQT,YAAY,CAAC,EAAE,EAAEU,KAAKD;IACpC,IAAI,CAACA,OAAO;QACV,qBAAO,KAACjB;YAAcmB,UAAS;;IACjC;IAEA,qBACE,KAAChB;QAAIiB,IAAI;YAAEC,QAAQ;YAAQR,SAAS,GAAGF,eAAe,EAAE,CAAC;QAAC;kBACxD,cAAA,KAACP;YAAkBkB,SAASf;YAAME,gBAAgBA;YAAgBQ,OAAOA;;;AAG/E"}
+{"version":3,"sources":["../../src/TracingGanttChartPanel.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PanelProps } from '@perses-dev/plugin-system';\nimport { NoDataOverlay, TextOverlay, useChartsTheme } from '@perses-dev/components';\nimport { Box } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { TraceData } from '@perses-dev/core';\nimport { CustomLinks, TracingGanttChartOptions } from './gantt-chart-model';\nimport { TracingGanttChart } from './TracingGanttChart/TracingGanttChart';\n\nexport type TracingGanttChartPanelProps = PanelProps<TracingGanttChartOptions, TraceData>;\n\nexport function TracingGanttChartPanel(props: TracingGanttChartPanelProps): ReactElement {\n  const { spec, queryResults } = props;\n  const chartsTheme = useChartsTheme();\n  const contentPadding = chartsTheme.container.padding.default;\n\n  if (queryResults.length > 1) {\n    return <TextOverlay message=\"This panel does not support more than one query.\" />;\n  }\n\n  const trace = queryResults[0]?.data.trace;\n  if (!trace) {\n    return <NoDataOverlay resource=\"trace\" />;\n  }\n\n  const pluginSpec = queryResults[0]?.definition.spec.plugin.spec as { datasource?: { name?: string } } | undefined;\n  const datasourceName = pluginSpec?.datasource?.name;\n  const customLinks: CustomLinks | undefined = spec.links\n    ? {\n        variables: {\n          datasourceName: datasourceName ?? '',\n        },\n        links: spec.links,\n      }\n    : undefined;\n\n  return (\n    <Box sx={{ height: '100%', padding: `${contentPadding}px` }}>\n      <TracingGanttChart options={spec} customLinks={customLinks} trace={trace} />\n    </Box>\n  );\n}\n"],"names":["NoDataOverlay","TextOverlay","useChartsTheme","Box","TracingGanttChart","TracingGanttChartPanel","props","spec","queryResults","chartsTheme","contentPadding","container","padding","default","length","message","trace","data","resource","pluginSpec","definition","plugin","datasourceName","datasource","name","customLinks","links","variables","undefined","sx","height","options"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,aAAa,EAAEC,WAAW,EAAEC,cAAc,QAAQ,yBAAyB;AACpF,SAASC,GAAG,QAAQ,gBAAgB;AAIpC,SAASC,iBAAiB,QAAQ,wCAAwC;AAI1E,OAAO,SAASC,uBAAuBC,KAAkC;IACvE,MAAM,EAAEC,IAAI,EAAEC,YAAY,EAAE,GAAGF;IAC/B,MAAMG,cAAcP;IACpB,MAAMQ,iBAAiBD,YAAYE,SAAS,CAACC,OAAO,CAACC,OAAO;IAE5D,IAAIL,aAAaM,MAAM,GAAG,GAAG;QAC3B,qBAAO,KAACb;YAAYc,SAAQ;;IAC9B;IAEA,MAAMC,QAAQR,YAAY,CAAC,EAAE,EAAES,KAAKD;IACpC,IAAI,CAACA,OAAO;QACV,qBAAO,KAAChB;YAAckB,UAAS;;IACjC;IAEA,MAAMC,aAAaX,YAAY,CAAC,EAAE,EAAEY,WAAWb,KAAKc,OAAOd;IAC3D,MAAMe,iBAAiBH,YAAYI,YAAYC;IAC/C,MAAMC,cAAuClB,KAAKmB,KAAK,GACnD;QACEC,WAAW;YACTL,gBAAgBA,kBAAkB;QACpC;QACAI,OAAOnB,KAAKmB,KAAK;IACnB,IACAE;IAEJ,qBACE,KAACzB;QAAI0B,IAAI;YAAEC,QAAQ;YAAQlB,SAAS,GAAGF,eAAe,EAAE,CAAC;QAAC;kBACxD,cAAA,KAACN;YAAkB2B,SAASxB;YAAMkB,aAAaA;YAAaT,OAAOA;;;AAGzE"}

package/lib/cjs/PanelActions.js

@@ -0,0 +1,88 @@
+// Copyright 2025 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DownloadTraceAction: function() {
+        return DownloadTraceAction;
+    },
+    getFilename: function() {
+        return getFilename;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _components = require("@perses-dev/components");
+const _DownloadOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DownloadOutline"));
+const _react = require("react");
+const _dashboards = require("@perses-dev/dashboards");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function DownloadTraceAction(props) {
+    const { queryResults } = props;
+    const trace = queryResults[0]?.data?.trace;
+    const handleClick = (0, _react.useCallback)(()=>{
+        if (!trace) return;
+        const data = JSON.stringify(trace, null, 2);
+        const filename = getFilename(trace);
+        downloadFile(filename, 'application/json', data);
+    }, [
+        trace
+    ]);
+    if (!trace) {
+        return;
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+        description: "download OTLP/JSON trace",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.HeaderIconButton, {
+            "aria-label": "download OTLP/JSON trace",
+            size: "small",
+            onClick: handleClick,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DownloadOutline.default, {
+                fontSize: "inherit"
+            })
+        })
+    });
+}
+function getFilename(trace) {
+    for (const resourceSpan of trace.resourceSpans){
+        for (const scopeSpan of resourceSpan.scopeSpans){
+            for (const span of scopeSpan.spans){
+                return `${span.traceId}.json`;
+            }
+        }
+    }
+    return 'trace.json';
+}
+function downloadFile(filename, type, data) {
+    const url = URL.createObjectURL(new Blob([
+        data
+    ], {
+        type
+    }));
+    const link = document.createElement('a');
+    link.download = filename;
+    link.href = url;
+    link.click();
+    URL.revokeObjectURL(url);
+}

package/lib/cjs/TracingGanttChart/DetailPane/Attributes.js

@@ -21,6 +21,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    AttributeItem: function() {
+        return AttributeItem;
+    },
+    AttributeItems: function() {
+        return AttributeItems;
+    },
     AttributeList: function() {
         return AttributeList;
     },
@@ -31,10 +37,10 @@ _export(exports, {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
-const _reactrouterdom = require("react-router-dom");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _utils = require("../utils");
 function TraceAttributes(props) {
-    const { trace, span, attributeLinks } = props;
+    const { customLinks, trace, span } = props;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.List, {
@@ -57,44 +63,77 @@ function TraceAttributes(props) {
             span.attributes.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(AttributeList, {
-                        attributeLinks: attributeLinks,
-                        attributes: span.attributes
+                        customLinks: customLinks,
+                        attributes: span.attributes.toSorted((a, b)=>a.key.localeCompare(b.key))
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {})
                 ]
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(AttributeList, {
-                attributeLinks: attributeLinks,
-                attributes: span.resource.attributes
+                customLinks: customLinks,
+                attributes: span.resource.attributes.toSorted((a, b)=>a.key.localeCompare(b.key))
             })
         ]
     });
 }
 function AttributeList(props) {
-    const { attributeLinks, attributes } = props;
-    const attributesMap = (0, _react.useMemo)(()=>Object.fromEntries(attributes.map((attr)=>[
-                attr.key,
-                attr.value
-            ])), [
+    const { customLinks, attributes } = props;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.List, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(AttributeItems, {
+            customLinks: customLinks,
+            attributes: attributes
+        })
+    });
+}
+function AttributeItems(props) {
+    const { customLinks, attributes } = props;
+    const variableValues = (0, _pluginsystem.useAllVariableValues)();
+    // turn array into map for fast access
+    const attributeLinks = (0, _react.useMemo)(()=>{
+        const attrs = (customLinks?.links.attributes ?? []).map((a)=>[
+                a.name,
+                a.link
+            ]);
+        return Object.fromEntries(attrs);
+    }, [
+        customLinks
+    ]);
+    // some links require access to other attributes, for example a pod link "/namespace/${k8s_namespace_name}/pod/${k8s_pod_name}"
+    const extraVariables = (0, _react.useMemo)(()=>{
+        // replace dot with underscore in attribute name, because dot is not allowed in variable names
+        const stringAttrs = attributes.map((attr)=>[
+                attr.key.replaceAll('.', '_'),
+                renderAttributeValue(attr.value)
+            ]);
+        return {
+            ...customLinks?.variables,
+            ...Object.fromEntries(stringAttrs)
+        };
+    }, [
+        customLinks,
         attributes
     ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.List, {
-        children: attributes.sort((a, b)=>a.key.localeCompare(b.key)).map((attribute, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(AttributeItem, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: attributes.map((attribute, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(AttributeItem, {
                 name: attribute.key,
                 value: renderAttributeValue(attribute.value),
-                link: attributeLinks?.[attribute.key]?.(attributesMap)
+                link: attributeLinks[attribute.key] ? (0, _pluginsystem.replaceVariablesInString)(attributeLinks[attribute.key], variableValues, extraVariables) : undefined
             }, i))
     });
 }
 function AttributeItem(props) {
     const { name, value, link } = props;
-    const valueComponent = link ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Link, {
-        component: _reactrouterdom.Link,
+    const { RouterComponent } = (0, _pluginsystem.useRouterContext)();
+    const valueComponent = RouterComponent && link ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Link, {
+        component: RouterComponent,
         to: link,
         children: value
     }) : value;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ListItem, {
-        disablePadding: true,
+        sx: {
+            px: 1,
+            py: 0
+        },
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ListItemText, {
             primary: name,
             secondary: valueComponent,

package/lib/cjs/TracingGanttChart/DetailPane/DetailPane.js

@@ -26,19 +26,24 @@ const _react = require("react");
 const _Close = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Close"));
 const _Attributes = require("./Attributes");
 const _SpanEvents = require("./SpanEvents");
+const _SpanLinks = require("./SpanLinks");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 function DetailPane(props) {
-    const { attributeLinks, trace, span, onCloseBtnClick } = props;
+    const { customLinks, trace, span, onCloseBtnClick } = props;
     const [tab, setTab] = (0, _react.useState)('attributes');
     // if the events tab is selected, and then a span without events is clicked,
     // we need to switch the current selected tab back to the attributes tab.
     if (tab === 'events' && span.events.length === 0) {
         setTab('attributes');
     }
+    // same as above, but for span links
+    if (tab === 'links' && span.links.length === 0) {
+        setTab('attributes');
+    }
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
@@ -80,18 +85,27 @@ function DetailPane(props) {
                         span.events.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
                             value: "events",
                             label: "Events"
+                        }),
+                        span.links.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
+                            value: "links",
+                            label: "Links"
                         })
                     ]
                 })
             }),
             tab === 'attributes' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Attributes.TraceAttributes, {
+                customLinks: customLinks,
                 trace: trace,
-                span: span,
-                attributeLinks: attributeLinks
+                span: span
             }),
             tab === 'events' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_SpanEvents.SpanEventList, {
+                customLinks: customLinks,
                 trace: trace,
                 span: span
+            }),
+            tab === 'links' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_SpanLinks.SpanLinkList, {
+                customLinks: customLinks,
+                span: span
             })
         ]
     });

package/lib/cjs/TracingGanttChart/DetailPane/SpanEvents.js

@@ -22,6 +22,8 @@ Object.defineProperty(exports, "SpanEventList", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
+const _react = require("react");
+const _ChevronUp = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronUp"));
 const _ChevronDown = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronDown"));
 const _utils = require("../utils");
 const _Attributes = require("./Attributes");
@@ -31,36 +33,80 @@ function _interop_require_default(obj) {
     };
 }
 function SpanEventList(props) {
-    const { trace, span } = props;
+    const { customLinks, trace, span } = props;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-        children: span.events.sort((a, b)=>a.timeUnixMs - b.timeUnixMs).map((event, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(SpanEventItem, {
-                trace: trace,
-                event: event
+        children: span.events.sort((a, b)=>a.timeUnixMs - b.timeUnixMs).map((event, i)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
+                children: [
+                    i > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(SpanEventItem, {
+                        customLinks: customLinks,
+                        trace: trace,
+                        event: event
+                    })
+                ]
             }, i))
     });
 }
 function SpanEventItem(props) {
-    const { trace, event } = props;
+    const { customLinks, trace, event } = props;
     const relativeTime = event.timeUnixMs - trace.startTimeUnixMs;
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Accordion, {
-        disableGutters: true,
+    const [open, setOpen] = (0, _react.useState)(false);
+    const handleClick = ()=>{
+        setOpen(!open);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.List, {
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.AccordionSummary, {
-                expandIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronDown.default, {}),
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                    children: (0, _utils.formatDuration)(relativeTime)
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.AccordionDetails, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.ListItemButton, {
+                onClick: handleClick,
+                sx: {
+                    px: 1
+                },
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                        variant: "subtitle1",
-                        children: event.name
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ListItemText, {
+                        primary: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)("strong", {
+                                    children: [
+                                        (0, _utils.formatDuration)(relativeTime),
+                                        ":"
+                                    ]
+                                }),
+                                " ",
+                                event.name
+                            ]
+                        }),
+                        slotProps: {
+                            primary: {
+                                noWrap: true
+                            }
+                        }
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Attributes.AttributeList, {
-                        attributes: event.attributes
-                    })
+                    open ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronUp.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronDown.default, {})
                 ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Collapse, {
+                in: open,
+                timeout: "auto",
+                unmountOnExit: true,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.List, {
+                    sx: {
+                        px: 1
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Attributes.AttributeItem, {
+                            name: "name",
+                            value: event.name
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Attributes.AttributeItem, {
+                            name: "time",
+                            value: (0, _utils.formatDuration)(relativeTime)
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Attributes.AttributeItems, {
+                            customLinks: customLinks,
+                            attributes: event.attributes
+                        })
+                    ]
+                })
             })
         ]
     });

package/lib/cjs/TracingGanttChart/DetailPane/SpanLinks.js

@@ -0,0 +1,72 @@
+// Copyright 2025 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, "SpanLinkList", {
+    enumerable: true,
+    get: function() {
+        return SpanLinkList;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _Attributes = require("./Attributes");
+function SpanLinkList(props) {
+    const { customLinks, span } = props;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: span.links.map((link, i)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
+                children: [
+                    i > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(SpanLinkItem, {
+                        link: link,
+                        customLinks: customLinks
+                    })
+                ]
+            }, i))
+    });
+}
+function SpanLinkItem(props) {
+    const { customLinks, link } = props;
+    const variableValues = (0, _pluginsystem.useAllVariableValues)();
+    const traceLink = customLinks?.links.trace ? (0, _pluginsystem.replaceVariablesInString)(customLinks.links.trace, variableValues, {
+        ...customLinks?.variables,
+        traceId: link.traceId
+    }) : undefined;
+    const spanLink = customLinks?.links.span ? (0, _pluginsystem.replaceVariablesInString)(customLinks.links.span, variableValues, {
+        ...customLinks?.variables,
+        traceId: link.traceId,
+        spanId: link.spanId
+    }) : undefined;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.List, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Attributes.AttributeItem, {
+                name: "trace ID",
+                value: link.traceId,
+                link: traceLink
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Attributes.AttributeItem, {
+                name: "span ID",
+                value: link.spanId,
+                link: spanLink
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Attributes.AttributeItems, {
+                customLinks: customLinks,
+                attributes: link.attributes
+            })
+        ]
+    });
+}

package/lib/cjs/TracingGanttChart/GanttTable/GanttTable.js

@@ -29,7 +29,7 @@ const _GanttTableRow = require("./GanttTableRow");
 const _GanttTableHeader = require("./GanttTableHeader");
 const _ResizableDivider = require("./ResizableDivider");
 function GanttTable(props) {
-    const { options, trace, viewport, selectedSpan, onSpanClick } = props;
+    const { options, customLinks, trace, viewport, selectedSpan, onSpanClick } = props;
     const { collapsedSpans, setVisibleSpans } = (0, _GanttTableProvider.useGanttTableContext)();
     const [nameColumnWidth, setNameColumnWidth] = (0, _react.useState)(0.25);
     const tableRef = (0, _react.useRef)(null);
@@ -44,6 +44,18 @@ function GanttTable(props) {
         trace.rootSpans,
         collapsedSpans
     ]);
+    const selectedSpanIndex = (0, _react.useMemo)(()=>{
+        if (!selectedSpan) return undefined;
+        for(let i = 0; i < rows.length; i++){
+            if (rows[i]?.spanId === selectedSpan.spanId) {
+                return i;
+            }
+        }
+        return undefined;
+    }, [
+        rows,
+        selectedSpan
+    ]);
     const divider = /*#__PURE__*/ (0, _jsxruntime.jsx)(_ResizableDivider.ResizableDivider, {
         parentRef: tableRef,
         onMove: setNameColumnWidth
@@ -74,8 +86,10 @@ function GanttTable(props) {
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactvirtuoso.Virtuoso, {
                 data: rows,
+                initialTopMostItemIndex: selectedSpanIndex ?? 0,
                 itemContent: (_, span)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_GanttTableRow.GanttTableRow, {
                         options: options,
+                        customLinks: customLinks,
                         span: span,
                         viewport: viewport,
                         selected: span === selectedSpan,

package/lib/cjs/TracingGanttChart/GanttTable/GanttTableRow.js

@@ -27,7 +27,7 @@ const _utils = require("../utils");
 const _SpanName = require("./SpanName");
 const _SpanDuration = require("./SpanDuration");
 const GanttTableRow = /*#__PURE__*/ (0, _react.memo)(function GanttTableRow(props) {
-    const { options, span, viewport, selected, nameColumnWidth, divider, onClick } = props;
+    const { options, customLinks, span, viewport, selected, nameColumnWidth, divider, onClick } = props;
     const theme = (0, _material.useTheme)();
     const handleOnClick = ()=>{
         // ignore event if triggered by selecting text
@@ -42,6 +42,7 @@ const GanttTableRow = /*#__PURE__*/ (0, _react.memo)(function GanttTableRow(prop
         onClick: handleOnClick,
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_SpanName.SpanName, {
+                customLinks: customLinks,
                 span: span,
                 nameColumnWidth: nameColumnWidth
             }),

package/lib/cjs/TracingGanttChart/GanttTable/SpanLinksButton.js

@@ -0,0 +1,108 @@
+// Copyright 2025 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, "SpanLinksButton", {
+    enumerable: true,
+    get: function() {
+        return SpanLinksButton;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const _Launch = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Launch"));
+const _components = require("@perses-dev/components");
+const _pluginsystem = require("@perses-dev/plugin-system");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function SpanLinksButton(props) {
+    const { customLinks, span } = props;
+    const variableValues = (0, _pluginsystem.useAllVariableValues)();
+    const { RouterComponent } = (0, _pluginsystem.useRouterContext)();
+    const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+    const isOpen = Boolean(anchorEl);
+    if (!RouterComponent || !customLinks.links.span) {
+        return;
+    }
+    // if there is a single span link, render the button directly without a menu
+    if (span.links.length == 1 && span.links[0]) {
+        const link = span.links[0];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+            description: "open linked span",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                size: "small",
+                component: RouterComponent,
+                to: (0, _pluginsystem.replaceVariablesInString)(customLinks.links.span, variableValues, {
+                    ...customLinks.variables,
+                    traceId: link.traceId,
+                    spanId: link.spanId
+                }),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Launch.default, {
+                    fontSize: "inherit"
+                })
+            })
+        });
+    }
+    const handleOpenMenu = (event)=>{
+        // do not propagate onClick event to the table row (otherwise, the detail pane would open)
+        event.stopPropagation();
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = (event)=>{
+        // Closing the menu, i.e. clicking on the fullscreen transparent MUI backdrop element, does trigger a click on the table row (which opens the detail pane).
+        // Therefore, stop propagating this event
+        event.stopPropagation();
+        setAnchorEl(null);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                description: `${span.links.length} linked spans`,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                    "aria-label": "span links",
+                    "aria-haspopup": "true",
+                    "aria-expanded": isOpen ? 'true' : undefined,
+                    size: "small",
+                    onClick: handleOpenMenu,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Launch.default, {
+                        fontSize: "inherit"
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Menu, {
+                anchorEl: anchorEl,
+                open: isOpen,
+                onClose: handleClose,
+                children: span.links.map((link)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.MenuItem, {
+                        component: RouterComponent,
+                        onClick: handleClose,
+                        to: (0, _pluginsystem.replaceVariablesInString)(customLinks.links.span, variableValues, {
+                            ...customLinks.variables,
+                            traceId: link.traceId,
+                            spanId: link.spanId
+                        }),
+                        children: [
+                            "Open linked span ",
+                            link.spanId
+                        ]
+                    }, link.spanId))
+            })
+        ]
+    });
+}