@perses-dev/tracing-gantt-chart-plugin 0.13.0 → 0.14.0-beta.2

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

@@ -1,129 +0,0 @@
-// 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, "DetailPane", {
-    enumerable: true,
-    get: function() {
-        return DetailPane;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-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 { 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, {
-                sx: {
-                    float: 'right'
-                },
-                onClick: onCloseBtnClick,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Close.default, {})
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                sx: {
-                    wordBreak: 'break-word'
-                },
-                children: span.resource.serviceName
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                variant: "h2",
-                sx: {
-                    wordBreak: 'break-word'
-                },
-                children: span.name
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                sx: {
-                    borderBottom: 1,
-                    borderColor: 'divider'
-                },
-                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Tabs, {
-                    value: tab,
-                    onChange: (_, tab)=>setTab(tab),
-                    variant: "scrollable",
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
-                            sx: {
-                                p: 0
-                            },
-                            value: "attributes",
-                            label: "Attributes"
-                        }),
-                        span.events.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
-                            value: "events",
-                            label: "Events",
-                            icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
-                                label: span.events.length
-                            }),
-                            iconPosition: "end",
-                            sx: {
-                                minHeight: 48,
-                                height: 48
-                            }
-                        }),
-                        span.links.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
-                            value: "links",
-                            label: "Links",
-                            icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
-                                label: span.links.length
-                            }),
-                            iconPosition: "end",
-                            sx: {
-                                minHeight: 48,
-                                height: 48
-                            }
-                        })
-                    ]
-                })
-            }),
-            tab === 'attributes' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Attributes.TraceAttributes, {
-                customLinks: customLinks,
-                trace: trace,
-                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

@@ -1,113 +0,0 @@
-// 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, "SpanEventList", {
-    enumerable: true,
-    get: function() {
-        return 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");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function SpanEventList(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.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 { customLinks, trace, event } = props;
-    const relativeTime = event.timeUnixMs - trace.startTimeUnixMs;
-    const [open, setOpen] = (0, _react.useState)(false);
-    const handleClick = ()=>{
-        setOpen(!open);
-    };
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.List, {
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.ListItemButton, {
-                onClick: handleClick,
-                sx: {
-                    px: 1
-                },
-                children: [
-                    /*#__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
-                            }
-                        }
-                    }),
-                    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

@@ -1,72 +0,0 @@
-// 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, "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

@@ -1,154 +0,0 @@
-// 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, "GanttTable", {
-    enumerable: true,
-    get: function() {
-        return GanttTable;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _reactvirtuoso = require("react-virtuoso");
-const _react = require("react");
-const _material = require("@mui/material");
-const _trace = require("../trace");
-const _GanttTableProvider = require("./GanttTableProvider");
-const _GanttTableRow = require("./GanttTableRow");
-const _GanttTableHeader = require("./GanttTableHeader");
-const _ResizableDivider = require("./ResizableDivider");
-function GanttTable(props) {
-    const { options, customLinks, trace, viewport, selectedSpan, onSpanClick, matchingSpanIds, focusedSpanId } = props;
-    const { collapsedSpans, setCollapsedSpans, setVisibleSpans } = (0, _GanttTableProvider.useGanttTableContext)();
-    const [nameColumnWidth, setNameColumnWidth] = (0, _react.useState)(0.25);
-    const tableRef = (0, _react.useRef)(null);
-    const virtuosoRef = (0, _react.useRef)(null);
-    const theme = (0, _material.useTheme)();
-    // Recursively flatten the span tree to a list of rows, hiding collapsed child spans.
-    const rows = (0, _react.useMemo)(()=>{
-        const rows = [];
-        (0, _trace.forEachSpan)(trace.rootSpans, (span)=>{
-            rows.push(span);
-            if (collapsedSpans.has(span.spanId)) {
-                return false;
-            }
-        });
-        return rows;
-    }, [
-        trace.rootSpans,
-        collapsedSpans
-    ]);
-    const matchingSpanIdSet = (0, _react.useMemo)(()=>new Set(matchingSpanIds ?? []), [
-        matchingSpanIds
-    ]);
-    // Auto-expand collapsed ancestors when focusing a search match
-    (0, _react.useEffect)(()=>{
-        if (!focusedSpanId) return;
-        const span = trace.spanById.get(focusedSpanId);
-        if (!span) return;
-        const ancestorIds = new Set();
-        let parent = span.parentSpan;
-        while(parent){
-            ancestorIds.add(parent.spanId);
-            parent = parent.parentSpan;
-        }
-        if (ancestorIds.size > 0) {
-            setCollapsedSpans((prev)=>{
-                const next = new Set(prev);
-                let changed = false;
-                for (const id of ancestorIds){
-                    if (next.delete(id)) changed = true;
-                }
-                return changed ? next : prev;
-            });
-        }
-    }, [
-        focusedSpanId,
-        trace.spanById,
-        setCollapsedSpans
-    ]);
-    // Scroll to focused span when using prev/next buttons in search bar.
-    (0, _react.useEffect)(()=>{
-        if (!focusedSpanId || !virtuosoRef.current) return;
-        const index = rows.findIndex((r)=>r.spanId === focusedSpanId);
-        if (index >= 0) {
-            virtuosoRef.current.scrollToIndex({
-                index,
-                align: 'center'
-            });
-        }
-    }, [
-        focusedSpanId,
-        rows
-    ]);
-    // Set the top most index in the Virtuoso table to the selected span
-    // Required e.g. when navigating from another page.
-    const initialTopMostSpanIndex = (0, _react.useMemo)(()=>{
-        if (!selectedSpan) return 0;
-        const index = rows.findIndex((r)=>r.spanId === selectedSpan.spanId);
-        return index >= 0 ? index : 0;
-    }, [
-        rows,
-        selectedSpan
-    ]);
-    const divider = /*#__PURE__*/ (0, _jsxruntime.jsx)(_ResizableDivider.ResizableDivider, {
-        parentRef: tableRef,
-        onMove: setNameColumnWidth
-    });
-    // update currently visible spans
-    function handleRangeChange({ startIndex, endIndex }) {
-        const visibleSpans = [];
-        for(let i = startIndex; i <= endIndex; i++){
-            visibleSpans.push(rows[i].spanId);
-        }
-        setVisibleSpans(visibleSpans);
-    }
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-        ref: tableRef,
-        sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            flexGrow: 1,
-            border: `1px solid ${theme.palette.divider}`,
-            borderRadius: `${theme.shape.borderRadius}px`
-        },
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_GanttTableHeader.GanttTableHeader, {
-                trace: trace,
-                viewport: viewport,
-                nameColumnWidth: nameColumnWidth,
-                divider: divider
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactvirtuoso.Virtuoso, {
-                ref: virtuosoRef,
-                data: rows,
-                initialTopMostItemIndex: initialTopMostSpanIndex,
-                itemContent: (_, span)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_GanttTableRow.GanttTableRow, {
-                        options: options,
-                        customLinks: customLinks,
-                        span: span,
-                        viewport: viewport,
-                        selected: span === selectedSpan,
-                        matched: matchingSpanIdSet.has(span.spanId),
-                        focused: span.spanId === focusedSpanId,
-                        nameColumnWidth: nameColumnWidth,
-                        divider: divider,
-                        onClick: onSpanClick
-                    }),
-                rangeChanged: handleRangeChange
-            })
-        ]
-    });
-}

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

@@ -1,64 +0,0 @@
-// 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, "GanttTableHeader", {
-    enumerable: true,
-    get: function() {
-        return GanttTableHeader;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _utils = require("../utils");
-const _Ticks = require("../Ticks");
-function GanttTableHeader(props) {
-    const { trace, viewport, nameColumnWidth, divider } = props;
-    const theme = (0, _material.useTheme)();
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-        direction: "row",
-        alignItems: "center",
-        sx: {
-            height: _utils.rowHeight,
-            fontSize: '0.9rem',
-            borderBottom: `1px solid ${theme.palette.divider}`
-        },
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                style: {
-                    width: `${nameColumnWidth * 100}%`
-                },
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                    style: {
-                        padding: '.25rem'
-                    },
-                    children: "Service & Operation"
-                })
-            }),
-            divider,
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                sx: {
-                    position: 'relative',
-                    height: '100%',
-                    flexGrow: 1
-                },
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Ticks.TicksHeader, {
-                    trace: trace,
-                    viewport: viewport
-                })
-            })
-        ]
-    });
-}

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

@@ -1,60 +0,0 @@
-// 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
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get GanttTableContext () {
-        return GanttTableContext;
-    },
-    get GanttTableProvider () {
-        return GanttTableProvider;
-    },
-    get useGanttTableContext () {
-        return useGanttTableContext;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const GanttTableContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
-function GanttTableProvider(props) {
-    const { children } = props;
-    const [collapsedSpans, setCollapsedSpans] = (0, _react.useState)(new Set());
-    const [visibleSpans, setVisibleSpans] = (0, _react.useState)([]);
-    const [hoveredParent, setHoveredParent] = (0, _react.useState)(undefined);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(GanttTableContext.Provider, {
-        value: {
-            collapsedSpans,
-            setCollapsedSpans,
-            visibleSpans,
-            setVisibleSpans,
-            hoveredParent,
-            setHoveredParent
-        },
-        children: children
-    });
-}
-function useGanttTableContext() {
-    const ctx = (0, _react.useContext)(GanttTableContext);
-    if (ctx === undefined) {
-        throw new Error('No GanttTableContext found. Did you forget a Provider?');
-    }
-    return ctx;
-}

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

@@ -1,77 +0,0 @@
-// 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, "GanttTableRow", {
-    enumerable: true,
-    get: function() {
-        return GanttTableRow;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _react = require("react");
-const _utils = require("../utils");
-const _SpanName = require("./SpanName");
-const _SpanDuration = require("./SpanDuration");
-const GanttTableRow = /*#__PURE__*/ (0, _react.memo)(function GanttTableRow(props) {
-    const { options, customLinks, span, viewport, selected, matched, focused, nameColumnWidth, divider, onClick } = props;
-    const theme = (0, _material.useTheme)();
-    const handleOnClick = ()=>{
-        // ignore event if triggered by selecting text
-        if (document.getSelection()?.type === 'Range') return;
-        onClick(span);
-    };
-    let backgroundColor;
-    if (selected) {
-        backgroundColor = theme.palette.action.focus;
-    } else if (focused) {
-        backgroundColor = theme.palette.action.selected;
-    } else if (matched) {
-        backgroundColor = theme.palette.action.hover;
-    }
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(RowContainer, {
-        sx: {
-            backgroundColor,
-            // overwrite hover if background color is set (selected, focused or matched)
-            '&:hover': backgroundColor ? {
-                backgroundColor
-            } : undefined
-        },
-        direction: "row",
-        onClick: handleOnClick,
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_SpanName.SpanName, {
-                customLinks: customLinks,
-                span: span,
-                nameColumnWidth: nameColumnWidth
-            }),
-            divider,
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_SpanDuration.SpanDuration, {
-                options: options,
-                span: span,
-                viewport: viewport
-            })
-        ]
-    });
-});
-const RowContainer = (0, _material.styled)(_material.Stack)(({ theme })=>({
-        height: _utils.rowHeight,
-        '&:hover': {
-            backgroundColor: theme.palette.action.hover,
-            borderTop: `1px solid ${theme.palette.divider}`,
-            borderBottom: `1px solid ${theme.palette.divider}`
-        }
-    }));