@perses-dev/tracing-gantt-chart-plugin 0.12.0 → 0.13.0-beta.0

package/lib/TracingGanttChart/Search.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 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.
+import { IconButton, InputAdornment, Stack, TextField } from '@mui/material';
+import ChevronUp from 'mdi-material-ui/ChevronUp';
+import ChevronDown from 'mdi-material-ui/ChevronDown';
+import Close from 'mdi-material-ui/Close';
+import { useCallback, useMemo, useState } from 'react';
+import { renderAttributeValue } from './DetailPane/Attributes';
+import { forEachSpan } from './trace';
+export function SearchBar(props) {
+    const { search } = props;
+    const { searchQuery, setSearchQuery, matchingSpanIds, focusedMatchIndex, setFocusedMatchIndex } = search;
+    const hasQuery = searchQuery.length > 0;
+    const matchCount = matchingSpanIds.length;
+    const hasMatches = matchCount > 0;
+    function handlePrev() {
+        if (!hasMatches) return;
+        setFocusedMatchIndex((focusedMatchIndex - 1 + matchCount) % matchCount);
+    }
+    function handleNext() {
+        if (!hasMatches) return;
+        setFocusedMatchIndex((focusedMatchIndex + 1) % matchCount);
+    }
+    function handleKeyDown(e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            if (e.shiftKey) {
+                handlePrev();
+            } else {
+                handleNext();
+            }
+        }
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        sx: {
+            alignItems: 'center',
+            gap: 0.5,
+            minWidth: 300
+        },
+        children: [
+            /*#__PURE__*/ _jsx(TextField, {
+                size: "small",
+                placeholder: "Search spans...",
+                value: searchQuery,
+                onChange: (e)=>setSearchQuery(e.target.value),
+                onKeyDown: handleKeyDown,
+                slotProps: {
+                    input: {
+                        endAdornment: /*#__PURE__*/ _jsx(InputAdornment, {
+                            position: "end",
+                            sx: {
+                                visibility: hasQuery ? 'visible' : 'hidden',
+                                whiteSpace: 'nowrap'
+                            },
+                            children: hasMatches ? `${focusedMatchIndex + 1}/${matchCount}` : '0/0'
+                        })
+                    }
+                },
+                sx: {
+                    minWidth: 200
+                }
+            }),
+            /*#__PURE__*/ _jsx(IconButton, {
+                size: "small",
+                disabled: !hasMatches,
+                "aria-label": "Previous match",
+                onClick: handlePrev,
+                children: /*#__PURE__*/ _jsx(ChevronUp, {})
+            }),
+            /*#__PURE__*/ _jsx(IconButton, {
+                size: "small",
+                disabled: !hasMatches,
+                "aria-label": "Next match",
+                onClick: handleNext,
+                children: /*#__PURE__*/ _jsx(ChevronDown, {})
+            }),
+            /*#__PURE__*/ _jsx(IconButton, {
+                size: "small",
+                disabled: !hasQuery,
+                "aria-label": "Clear search",
+                onClick: ()=>setSearchQuery(''),
+                children: /*#__PURE__*/ _jsx(Close, {})
+            })
+        ]
+    });
+}
+function spanMatchesQuery(span, query) {
+    const attrMatches = (attr)=>attr.key.toLowerCase().includes(query) || renderAttributeValue(attr.value).toLowerCase().includes(query);
+    return span.resource.serviceName?.toLowerCase().includes(query) || span.name.toLowerCase().includes(query) || span.spanId.toLowerCase().includes(query) || span.attributes.some(attrMatches) || span.resource.attributes.some(attrMatches);
+}
+export function useSpanSearch(trace) {
+    const [searchQuery, setSearchQueryRaw] = useState('');
+    const [focusedMatchIndex, setFocusedMatchIndex] = useState(0);
+    const matchingSpanIds = useMemo(()=>{
+        if (searchQuery.length === 0) return [];
+        const query = searchQuery.toLowerCase();
+        const matches = [];
+        forEachSpan(trace.rootSpans, (span)=>{
+            if (spanMatchesQuery(span, query)) {
+                matches.push(span.spanId);
+            }
+        });
+        return matches;
+    }, [
+        searchQuery,
+        trace.rootSpans
+    ]);
+    const setSearchQuery = useCallback((query)=>{
+        setSearchQueryRaw(query);
+        setFocusedMatchIndex(0);
+    }, []);
+    return {
+        searchQuery,
+        setSearchQuery,
+        matchingSpanIds,
+        focusedMatchIndex,
+        setFocusedMatchIndex
+    };
+}
+
+//# sourceMappingURL=Search.js.map

package/lib/TracingGanttChart/Search.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/TracingGanttChart/Search.tsx"],"sourcesContent":["// Copyright 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 { IconButton, InputAdornment, Stack, TextField } from '@mui/material';\nimport ChevronUp from 'mdi-material-ui/ChevronUp';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport Close from 'mdi-material-ui/Close';\nimport { ReactElement, useCallback, useMemo, useState } from 'react';\nimport { otlpcommonv1 } from '@perses-dev/core';\nimport { renderAttributeValue } from './DetailPane/Attributes';\nimport { Span, Trace, forEachSpan } from './trace';\n\nexport interface SearchBarProps {\n  search: SpanSearch;\n}\n\nexport function SearchBar(props: SearchBarProps): ReactElement {\n  const { search } = props;\n  const { searchQuery, setSearchQuery, matchingSpanIds, focusedMatchIndex, setFocusedMatchIndex } = search;\n\n  const hasQuery = searchQuery.length > 0;\n  const matchCount = matchingSpanIds.length;\n  const hasMatches = matchCount > 0;\n\n  function handlePrev(): void {\n    if (!hasMatches) return;\n    setFocusedMatchIndex((focusedMatchIndex - 1 + matchCount) % matchCount);\n  }\n\n  function handleNext(): void {\n    if (!hasMatches) return;\n    setFocusedMatchIndex((focusedMatchIndex + 1) % matchCount);\n  }\n\n  function handleKeyDown(e: React.KeyboardEvent): void {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      if (e.shiftKey) {\n        handlePrev();\n      } else {\n        handleNext();\n      }\n    }\n  }\n\n  return (\n    <Stack direction=\"row\" sx={{ alignItems: 'center', gap: 0.5, minWidth: 300 }}>\n      <TextField\n        size=\"small\"\n        placeholder=\"Search spans...\"\n        value={searchQuery}\n        onChange={(e) => setSearchQuery(e.target.value)}\n        onKeyDown={handleKeyDown}\n        slotProps={{\n          input: {\n            endAdornment: (\n              <InputAdornment position=\"end\" sx={{ visibility: hasQuery ? 'visible' : 'hidden', whiteSpace: 'nowrap' }}>\n                {hasMatches ? `${focusedMatchIndex + 1}/${matchCount}` : '0/0'}\n              </InputAdornment>\n            ),\n          },\n        }}\n        sx={{ minWidth: 200 }}\n      />\n      <IconButton size=\"small\" disabled={!hasMatches} aria-label=\"Previous match\" onClick={handlePrev}>\n        <ChevronUp />\n      </IconButton>\n      <IconButton size=\"small\" disabled={!hasMatches} aria-label=\"Next match\" onClick={handleNext}>\n        <ChevronDown />\n      </IconButton>\n      <IconButton size=\"small\" disabled={!hasQuery} aria-label=\"Clear search\" onClick={() => setSearchQuery('')}>\n        <Close />\n      </IconButton>\n    </Stack>\n  );\n}\n\nfunction spanMatchesQuery(span: Span, query: string): boolean {\n  const attrMatches = (attr: otlpcommonv1.KeyValue): boolean =>\n    attr.key.toLowerCase().includes(query) || renderAttributeValue(attr.value).toLowerCase().includes(query);\n\n  return (\n    span.resource.serviceName?.toLowerCase().includes(query) ||\n    span.name.toLowerCase().includes(query) ||\n    span.spanId.toLowerCase().includes(query) ||\n    span.attributes.some(attrMatches) ||\n    span.resource.attributes.some(attrMatches)\n  );\n}\n\nexport interface SpanSearch {\n  searchQuery: string;\n  setSearchQuery: (query: string) => void;\n  matchingSpanIds: string[];\n  focusedMatchIndex: number;\n  setFocusedMatchIndex: (index: number) => void;\n}\n\nexport function useSpanSearch(trace: Trace): SpanSearch {\n  const [searchQuery, setSearchQueryRaw] = useState('');\n  const [focusedMatchIndex, setFocusedMatchIndex] = useState(0);\n\n  const matchingSpanIds = useMemo(() => {\n    if (searchQuery.length === 0) return [];\n\n    const query = searchQuery.toLowerCase();\n    const matches: string[] = [];\n    forEachSpan(trace.rootSpans, (span) => {\n      if (spanMatchesQuery(span, query)) {\n        matches.push(span.spanId);\n      }\n    });\n    return matches;\n  }, [searchQuery, trace.rootSpans]);\n\n  const setSearchQuery = useCallback((query: string) => {\n    setSearchQueryRaw(query);\n    setFocusedMatchIndex(0);\n  }, []);\n\n  return { searchQuery, setSearchQuery, matchingSpanIds, focusedMatchIndex, setFocusedMatchIndex };\n}\n"],"names":["IconButton","InputAdornment","Stack","TextField","ChevronUp","ChevronDown","Close","useCallback","useMemo","useState","renderAttributeValue","forEachSpan","SearchBar","props","search","searchQuery","setSearchQuery","matchingSpanIds","focusedMatchIndex","setFocusedMatchIndex","hasQuery","length","matchCount","hasMatches","handlePrev","handleNext","handleKeyDown","e","key","preventDefault","shiftKey","direction","sx","alignItems","gap","minWidth","size","placeholder","value","onChange","target","onKeyDown","slotProps","input","endAdornment","position","visibility","whiteSpace","disabled","aria-label","onClick","spanMatchesQuery","span","query","attrMatches","attr","toLowerCase","includes","resource","serviceName","name","spanId","attributes","some","useSpanSearch","trace","setSearchQueryRaw","matches","rootSpans","push"],"mappings":"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"}

package/lib/TracingGanttChart/TraceHeaderBar.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { Trace } from './trace';
+import { SpanSearch } from './Search';
+export interface TraceHeaderBarProps {
+    trace: Trace;
+    search: SpanSearch;
+}
+export declare function TraceHeaderBar(props: TraceHeaderBarProps): ReactElement;
+//# sourceMappingURL=TraceHeaderBar.d.ts.map

package/lib/TracingGanttChart/TraceHeaderBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TraceHeaderBar.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/TraceHeaderBar.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAa,UAAU,EAAE,MAAM,UAAU,CAAC;AAajD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,YAAY,CAuCvE"}

package/lib/TracingGanttChart/TraceHeaderBar.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 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.
+import { IconButton, Stack, Typography } from '@mui/material';
+import MagnifyIcon from 'mdi-material-ui/Magnify';
+import { useMemo, useState } from 'react';
+import { useTimeZone } from '@perses-dev/components';
+import { formatDuration } from './utils';
+import { SearchBar } from './Search';
+const DATE_FORMAT_OPTIONS = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    fractionalSecondDigits: 3,
+    timeZoneName: 'short'
+};
+export function TraceHeaderBar(props) {
+    const { trace, search } = props;
+    const { dateFormatOptionsWithUserTimeZone } = useTimeZone();
+    const dateFormatter = useMemo(()=>{
+        const dateFormatOptions = dateFormatOptionsWithUserTimeZone(DATE_FORMAT_OPTIONS);
+        return new Intl.DateTimeFormat(undefined, dateFormatOptions);
+    }, [
+        dateFormatOptionsWithUserTimeZone
+    ]);
+    const [showSearch, setShowSearch] = useState(false);
+    const rootSpan = trace.rootSpans[0];
+    if (!rootSpan) {
+        return /*#__PURE__*/ _jsx(Typography, {
+            children: "Trace contains no spans."
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "column",
+        sx: {
+            gap: 1
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                sx: {
+                    justifyContent: 'space-between'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        sx: {
+                            gap: 1,
+                            alignItems: 'center'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsxs(Typography, {
+                                variant: "h3",
+                                children: [
+                                    rootSpan.resource.serviceName,
+                                    ": ",
+                                    rootSpan.name,
+                                    " (",
+                                    formatDuration(trace.endTimeUnixMs - trace.startTimeUnixMs),
+                                    ")"
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(IconButton, {
+                                size: "small",
+                                onClick: ()=>setShowSearch((prev)=>!prev),
+                                "aria-label": "Toggle search",
+                                children: /*#__PURE__*/ _jsx(MagnifyIcon, {
+                                    fontSize: "small"
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(Typography, {
+                        variant: "h4",
+                        children: [
+                            /*#__PURE__*/ _jsxs(Typography, {
+                                component: "span",
+                                sx: {
+                                    px: 1
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("strong", {
+                                        children: "Start:"
+                                    }),
+                                    " ",
+                                    dateFormatter.format(trace.startTimeUnixMs)
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(Typography, {
+                                component: "span",
+                                sx: {
+                                    px: 1
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("strong", {
+                                        children: "Trace ID:"
+                                    }),
+                                    " ",
+                                    rootSpan.traceId
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            showSearch && /*#__PURE__*/ _jsx(SearchBar, {
+                search: search
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=TraceHeaderBar.js.map

package/lib/TracingGanttChart/TraceHeaderBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/TracingGanttChart/TraceHeaderBar.tsx"],"sourcesContent":["// Copyright 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 { IconButton, Stack, Typography } from '@mui/material';\nimport MagnifyIcon from 'mdi-material-ui/Magnify';\nimport { ReactElement, useMemo, useState } from 'react';\nimport { useTimeZone } from '@perses-dev/components';\nimport { formatDuration } from './utils';\nimport { Trace } from './trace';\nimport { SearchBar, SpanSearch } from './Search';\n\nconst DATE_FORMAT_OPTIONS: Intl.DateTimeFormatOptions = {\n  year: 'numeric',\n  month: 'long',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  fractionalSecondDigits: 3,\n  timeZoneName: 'short',\n};\n\nexport interface TraceHeaderBarProps {\n  trace: Trace;\n  search: SpanSearch;\n}\n\nexport function TraceHeaderBar(props: TraceHeaderBarProps): ReactElement {\n  const { trace, search } = props;\n\n  const { dateFormatOptionsWithUserTimeZone } = useTimeZone();\n  const dateFormatter = useMemo(() => {\n    const dateFormatOptions = dateFormatOptionsWithUserTimeZone(DATE_FORMAT_OPTIONS);\n    return new Intl.DateTimeFormat(undefined, dateFormatOptions);\n  }, [dateFormatOptionsWithUserTimeZone]);\n  const [showSearch, setShowSearch] = useState(false);\n\n  const rootSpan = trace.rootSpans[0];\n  if (!rootSpan) {\n    return <Typography>Trace contains no spans.</Typography>;\n  }\n\n  return (\n    <Stack direction=\"column\" sx={{ gap: 1 }}>\n      <Stack direction=\"row\" sx={{ justifyContent: 'space-between' }}>\n        <Stack direction=\"row\" sx={{ gap: 1, alignItems: 'center' }}>\n          <Typography variant=\"h3\">\n            {rootSpan.resource.serviceName}: {rootSpan.name} (\n            {formatDuration(trace.endTimeUnixMs - trace.startTimeUnixMs)})\n          </Typography>\n          <IconButton size=\"small\" onClick={() => setShowSearch((prev) => !prev)} aria-label=\"Toggle search\">\n            <MagnifyIcon fontSize=\"small\" />\n          </IconButton>\n        </Stack>\n        <Typography variant=\"h4\">\n          <Typography component=\"span\" sx={{ px: 1 }}>\n            <strong>Start:</strong> {dateFormatter.format(trace.startTimeUnixMs)}\n          </Typography>\n          <Typography component=\"span\" sx={{ px: 1 }}>\n            <strong>Trace ID:</strong> {rootSpan.traceId}\n          </Typography>\n        </Typography>\n      </Stack>\n      {showSearch && <SearchBar search={search} />}\n    </Stack>\n  );\n}\n"],"names":["IconButton","Stack","Typography","MagnifyIcon","useMemo","useState","useTimeZone","formatDuration","SearchBar","DATE_FORMAT_OPTIONS","year","month","day","hour","minute","second","fractionalSecondDigits","timeZoneName","TraceHeaderBar","props","trace","search","dateFormatOptionsWithUserTimeZone","dateFormatter","dateFormatOptions","Intl","DateTimeFormat","undefined","showSearch","setShowSearch","rootSpan","rootSpans","direction","sx","gap","justifyContent","alignItems","variant","resource","serviceName","name","endTimeUnixMs","startTimeUnixMs","size","onClick","prev","aria-label","fontSize","component","px","strong","format","traceId"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,UAAU,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAC9D,OAAOC,iBAAiB,0BAA0B;AAClD,SAAuBC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AACxD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,cAAc,QAAQ,UAAU;AAEzC,SAASC,SAAS,QAAoB,WAAW;AAEjD,MAAMC,sBAAkD;IACtDC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,MAAM;IACNC,QAAQ;IACRC,QAAQ;IACRC,wBAAwB;IACxBC,cAAc;AAChB;AAOA,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGF;IAE1B,MAAM,EAAEG,iCAAiC,EAAE,GAAGhB;IAC9C,MAAMiB,gBAAgBnB,QAAQ;QAC5B,MAAMoB,oBAAoBF,kCAAkCb;QAC5D,OAAO,IAAIgB,KAAKC,cAAc,CAACC,WAAWH;IAC5C,GAAG;QAACF;KAAkC;IACtC,MAAM,CAACM,YAAYC,cAAc,GAAGxB,SAAS;IAE7C,MAAMyB,WAAWV,MAAMW,SAAS,CAAC,EAAE;IACnC,IAAI,CAACD,UAAU;QACb,qBAAO,KAAC5B;sBAAW;;IACrB;IAEA,qBACE,MAACD;QAAM+B,WAAU;QAASC,IAAI;YAAEC,KAAK;QAAE;;0BACrC,MAACjC;gBAAM+B,WAAU;gBAAMC,IAAI;oBAAEE,gBAAgB;gBAAgB;;kCAC3D,MAAClC;wBAAM+B,WAAU;wBAAMC,IAAI;4BAAEC,KAAK;4BAAGE,YAAY;wBAAS;;0CACxD,MAAClC;gCAAWmC,SAAQ;;oCACjBP,SAASQ,QAAQ,CAACC,WAAW;oCAAC;oCAAGT,SAASU,IAAI;oCAAC;oCAC/CjC,eAAea,MAAMqB,aAAa,GAAGrB,MAAMsB,eAAe;oCAAE;;;0CAE/D,KAAC1C;gCAAW2C,MAAK;gCAAQC,SAAS,IAAMf,cAAc,CAACgB,OAAS,CAACA;gCAAOC,cAAW;0CACjF,cAAA,KAAC3C;oCAAY4C,UAAS;;;;;kCAG1B,MAAC7C;wBAAWmC,SAAQ;;0CAClB,MAACnC;gCAAW8C,WAAU;gCAAOf,IAAI;oCAAEgB,IAAI;gCAAE;;kDACvC,KAACC;kDAAO;;oCAAe;oCAAE3B,cAAc4B,MAAM,CAAC/B,MAAMsB,eAAe;;;0CAErE,MAACxC;gCAAW8C,WAAU;gCAAOf,IAAI;oCAAEgB,IAAI;gCAAE;;kDACvC,KAACC;kDAAO;;oCAAkB;oCAAEpB,SAASsB,OAAO;;;;;;;YAIjDxB,4BAAc,KAACpB;gBAAUa,QAAQA;;;;AAGxC"}

package/lib/TracingGanttChart/TracingGanttChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TracingGanttChart.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/TracingGanttChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAU7E,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,wBAAwB,CAAC;IAClC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC;CAC/B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CAwD7E"}
+{"version":3,"file":"TracingGanttChart.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/TracingGanttChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAW7E,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,wBAAwB,CAAC;IAClC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC;CAC/B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CAiE7E"}

package/lib/TracingGanttChart/TracingGanttChart.js

@@ -12,14 +12,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useMemo, useRef, useState } from 'react';
-import { Box, Stack, useTheme } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 import { MiniGanttChart } from './MiniGanttChart/MiniGanttChart';
 import { DetailPane } from './DetailPane/DetailPane';
 import { GanttTable } from './GanttTable/GanttTable';
 import { GanttTableProvider } from './GanttTable/GanttTableProvider';
 import { ResizableDivider } from './GanttTable/ResizableDivider';
 import { getTraceModel } from './trace';
-import { TraceDetails } from './TraceDetails';
+import { TraceHeaderBar } from './TraceHeaderBar';
+import { useSpanSearch } from './Search';
 /**
  * The core GanttChart panel for Perses.
  *
@@ -27,7 +28,6 @@ import { TraceDetails } from './TraceDetails';
  * https://github.com/jaegertracing/jaeger-ui
  */ export function TracingGanttChart(props) {
     const { options, customLinks, trace: otlpTrace } = props;
-    const theme = useTheme();
     const trace = useMemo(()=>{
         try {
             return getTraceModel(otlpTrace);
@@ -42,11 +42,13 @@ import { TraceDetails } from './TraceDetails';
         endTimeUnixMs: trace.endTimeUnixMs
     });
     const [selectedSpan, setSelectedSpan] = useState(()=>options.selectedSpanId ? trace.spanById.get(options.selectedSpanId) : undefined);
+    const search = useSpanSearch(trace);
     const ganttChart = useRef(null);
     // tableWidth only comes to effect if the detail pane is visible.
     // setTableWidth() is only called by <ResizableDivider />
     const [tableWidth, setTableWidth] = useState(0.82);
     const gap = 2;
+    const spacing = ganttChart.current ? parseFloat(getComputedStyle(ganttChart.current).columnGap) || 0 : 0;
     return /*#__PURE__*/ _jsxs(Stack, {
         ref: ganttChart,
         direction: "row",
@@ -62,8 +64,9 @@ import { TraceDetails } from './TraceDetails';
                     gap
                 },
                 children: [
-                    /*#__PURE__*/ _jsx(TraceDetails, {
-                        trace: trace
+                    /*#__PURE__*/ _jsx(TraceHeaderBar, {
+                        trace: trace,
+                        search: search
                     }),
                     /*#__PURE__*/ _jsx(MiniGanttChart, {
                         options: options,
@@ -78,7 +81,9 @@ import { TraceDetails } from './TraceDetails';
                             trace: trace,
                             viewport: viewport,
                             selectedSpan: selectedSpan,
-                            onSpanClick: setSelectedSpan
+                            onSpanClick: setSelectedSpan,
+                            matchingSpanIds: search.matchingSpanIds,
+                            focusedSpanId: search.matchingSpanIds[search.focusedMatchIndex]
                         })
                     })
                 ]
@@ -87,12 +92,13 @@ import { TraceDetails } from './TraceDetails';
                 children: [
                     /*#__PURE__*/ _jsx(ResizableDivider, {
                         parentRef: ganttChart,
-                        spacing: parseInt(theme.spacing(gap)),
+                        spacing: spacing,
                         onMove: setTableWidth
                     }),
                     /*#__PURE__*/ _jsx(Box, {
                         style: {
-                            width: `${(1 - tableWidth) * 100}%`
+                            width: `${(1 - tableWidth) * 100}%`,
+                            minWidth: `${(1 - tableWidth) * 100}%`
                         },
                         sx: {
                             overflow: 'auto'

package/lib/TracingGanttChart/TracingGanttChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/TracingGanttChart/TracingGanttChart.tsx"],"sourcesContent":["// Copyright 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 { ReactElement, useMemo, useRef, useState } from 'react';\nimport { Box, Stack, useTheme } from '@mui/material';\nimport { otlptracev1 } from '@perses-dev/core';\nimport { CustomLinks, TracingGanttChartOptions } from '../gantt-chart-model';\nimport { MiniGanttChart } from './MiniGanttChart/MiniGanttChart';\nimport { DetailPane } from './DetailPane/DetailPane';\nimport { Viewport } from './utils';\nimport { GanttTable } from './GanttTable/GanttTable';\nimport { GanttTableProvider } from './GanttTable/GanttTableProvider';\nimport { ResizableDivider } from './GanttTable/ResizableDivider';\nimport { getTraceModel, Span } from './trace';\nimport { TraceDetails } from './TraceDetails';\n\nexport interface TracingGanttChartProps {\n  options: TracingGanttChartOptions;\n  customLinks?: CustomLinks;\n  trace: otlptracev1.TracesData;\n}\n\n/**\n * The core GanttChart panel for Perses.\n *\n * The UI/UX of this panel is based on Jaeger UI, licensed under Apache License, Version 2.0.\n * https://github.com/jaegertracing/jaeger-ui\n */\nexport function TracingGanttChart(props: TracingGanttChartProps): ReactElement {\n  const { options, customLinks, trace: otlpTrace } = props;\n\n  const theme = useTheme();\n  const trace = useMemo(() => {\n    try {\n      return getTraceModel(otlpTrace);\n    } catch (e) {\n      throw new Error(`Error: unable to parse trace: ${e}`);\n    }\n  }, [otlpTrace]);\n  const [viewport, setViewport] = useState<Viewport>({\n    startTimeUnixMs: trace.startTimeUnixMs,\n    endTimeUnixMs: trace.endTimeUnixMs,\n  });\n  const [selectedSpan, setSelectedSpan] = useState<Span | undefined>(() =>\n    options.selectedSpanId ? trace.spanById.get(options.selectedSpanId) : undefined\n  );\n\n  const ganttChart = useRef<HTMLDivElement>(null);\n  // tableWidth only comes to effect if the detail pane is visible.\n  // setTableWidth() is only called by <ResizableDivider />\n  const [tableWidth, setTableWidth] = useState<number>(0.82);\n  const gap = 2;\n\n  return (\n    <Stack ref={ganttChart} direction=\"row\" sx={{ height: '100%', minHeight: '240px', gap }}>\n      <Stack sx={{ flexGrow: 1, gap }}>\n        <TraceDetails trace={trace} />\n        <MiniGanttChart options={options} trace={trace} viewport={viewport} setViewport={setViewport} />\n        <GanttTableProvider>\n          <GanttTable\n            options={options}\n            customLinks={customLinks}\n            trace={trace}\n            viewport={viewport}\n            selectedSpan={selectedSpan}\n            onSpanClick={setSelectedSpan}\n          />\n        </GanttTableProvider>\n      </Stack>\n      {selectedSpan && (\n        <>\n          <ResizableDivider parentRef={ganttChart} spacing={parseInt(theme.spacing(gap))} onMove={setTableWidth} />\n          <Box style={{ width: `${(1 - tableWidth) * 100}%` }} sx={{ overflow: 'auto' }}>\n            <DetailPane\n              customLinks={customLinks}\n              trace={trace}\n              span={selectedSpan}\n              onCloseBtnClick={() => setSelectedSpan(undefined)}\n            />\n          </Box>\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["useMemo","useRef","useState","Box","Stack","useTheme","MiniGanttChart","DetailPane","GanttTable","GanttTableProvider","ResizableDivider","getTraceModel","TraceDetails","TracingGanttChart","props","options","customLinks","trace","otlpTrace","theme","e","Error","viewport","setViewport","startTimeUnixMs","endTimeUnixMs","selectedSpan","setSelectedSpan","selectedSpanId","spanById","get","undefined","ganttChart","tableWidth","setTableWidth","gap","ref","direction","sx","height","minHeight","flexGrow","onSpanClick","parentRef","spacing","parseInt","onMove","style","width","overflow","span","onCloseBtnClick"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAAuBA,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAChE,SAASC,GAAG,EAAEC,KAAK,EAAEC,QAAQ,QAAQ,gBAAgB;AAGrD,SAASC,cAAc,QAAQ,kCAAkC;AACjE,SAASC,UAAU,QAAQ,0BAA0B;AAErD,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,aAAa,QAAc,UAAU;AAC9C,SAASC,YAAY,QAAQ,iBAAiB;AAQ9C;;;;;CAKC,GACD,OAAO,SAASC,kBAAkBC,KAA6B;IAC7D,MAAM,EAAEC,OAAO,EAAEC,WAAW,EAAEC,OAAOC,SAAS,EAAE,GAAGJ;IAEnD,MAAMK,QAAQd;IACd,MAAMY,QAAQjB,QAAQ;QACpB,IAAI;YACF,OAAOW,cAAcO;QACvB,EAAE,OAAOE,GAAG;YACV,MAAM,IAAIC,MAAM,CAAC,8BAA8B,EAAED,GAAG;QACtD;IACF,GAAG;QAACF;KAAU;IACd,MAAM,CAACI,UAAUC,YAAY,GAAGrB,SAAmB;QACjDsB,iBAAiBP,MAAMO,eAAe;QACtCC,eAAeR,MAAMQ,aAAa;IACpC;IACA,MAAM,CAACC,cAAcC,gBAAgB,GAAGzB,SAA2B,IACjEa,QAAQa,cAAc,GAAGX,MAAMY,QAAQ,CAACC,GAAG,CAACf,QAAQa,cAAc,IAAIG;IAGxE,MAAMC,aAAa/B,OAAuB;IAC1C,iEAAiE;IACjE,yDAAyD;IACzD,MAAM,CAACgC,YAAYC,cAAc,GAAGhC,SAAiB;IACrD,MAAMiC,MAAM;IAEZ,qBACE,MAAC/B;QAAMgC,KAAKJ;QAAYK,WAAU;QAAMC,IAAI;YAAEC,QAAQ;YAAQC,WAAW;YAASL;QAAI;;0BACpF,MAAC/B;gBAAMkC,IAAI;oBAAEG,UAAU;oBAAGN;gBAAI;;kCAC5B,KAACvB;wBAAaK,OAAOA;;kCACrB,KAACX;wBAAeS,SAASA;wBAASE,OAAOA;wBAAOK,UAAUA;wBAAUC,aAAaA;;kCACjF,KAACd;kCACC,cAAA,KAACD;4BACCO,SAASA;4BACTC,aAAaA;4BACbC,OAAOA;4BACPK,UAAUA;4BACVI,cAAcA;4BACdgB,aAAaf;;;;;YAIlBD,8BACC;;kCACE,KAAChB;wBAAiBiC,WAAWX;wBAAYY,SAASC,SAAS1B,MAAMyB,OAAO,CAACT;wBAAOW,QAAQZ;;kCACxF,KAAC/B;wBAAI4C,OAAO;4BAAEC,OAAO,GAAG,AAAC,CAAA,IAAIf,UAAS,IAAK,IAAI,CAAC,CAAC;wBAAC;wBAAGK,IAAI;4BAAEW,UAAU;wBAAO;kCAC1E,cAAA,KAAC1C;4BACCS,aAAaA;4BACbC,OAAOA;4BACPiC,MAAMxB;4BACNyB,iBAAiB,IAAMxB,gBAAgBI;;;;;;;AAOrD"}
+{"version":3,"sources":["../../../src/TracingGanttChart/TracingGanttChart.tsx"],"sourcesContent":["// Copyright 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 { ReactElement, useMemo, useRef, useState } from 'react';\nimport { Box, Stack } from '@mui/material';\nimport { otlptracev1 } from '@perses-dev/core';\nimport { CustomLinks, TracingGanttChartOptions } from '../gantt-chart-model';\nimport { MiniGanttChart } from './MiniGanttChart/MiniGanttChart';\nimport { DetailPane } from './DetailPane/DetailPane';\nimport { Viewport } from './utils';\nimport { GanttTable } from './GanttTable/GanttTable';\nimport { GanttTableProvider } from './GanttTable/GanttTableProvider';\nimport { ResizableDivider } from './GanttTable/ResizableDivider';\nimport { getTraceModel, Span } from './trace';\nimport { TraceHeaderBar } from './TraceHeaderBar';\nimport { useSpanSearch } from './Search';\n\nexport interface TracingGanttChartProps {\n  options: TracingGanttChartOptions;\n  customLinks?: CustomLinks;\n  trace: otlptracev1.TracesData;\n}\n\n/**\n * The core GanttChart panel for Perses.\n *\n * The UI/UX of this panel is based on Jaeger UI, licensed under Apache License, Version 2.0.\n * https://github.com/jaegertracing/jaeger-ui\n */\nexport function TracingGanttChart(props: TracingGanttChartProps): ReactElement {\n  const { options, customLinks, trace: otlpTrace } = props;\n\n  const trace = useMemo(() => {\n    try {\n      return getTraceModel(otlpTrace);\n    } catch (e) {\n      throw new Error(`Error: unable to parse trace: ${e}`);\n    }\n  }, [otlpTrace]);\n  const [viewport, setViewport] = useState<Viewport>({\n    startTimeUnixMs: trace.startTimeUnixMs,\n    endTimeUnixMs: trace.endTimeUnixMs,\n  });\n  const [selectedSpan, setSelectedSpan] = useState<Span | undefined>(() =>\n    options.selectedSpanId ? trace.spanById.get(options.selectedSpanId) : undefined\n  );\n  const search = useSpanSearch(trace);\n\n  const ganttChart = useRef<HTMLDivElement>(null);\n  // tableWidth only comes to effect if the detail pane is visible.\n  // setTableWidth() is only called by <ResizableDivider />\n  const [tableWidth, setTableWidth] = useState<number>(0.82);\n  const gap = 2;\n  const spacing = ganttChart.current ? parseFloat(getComputedStyle(ganttChart.current).columnGap) || 0 : 0;\n\n  return (\n    <Stack ref={ganttChart} direction=\"row\" sx={{ height: '100%', minHeight: '240px', gap }}>\n      <Stack sx={{ flexGrow: 1, gap }}>\n        <TraceHeaderBar trace={trace} search={search} />\n        <MiniGanttChart options={options} trace={trace} viewport={viewport} setViewport={setViewport} />\n        <GanttTableProvider>\n          <GanttTable\n            options={options}\n            customLinks={customLinks}\n            trace={trace}\n            viewport={viewport}\n            selectedSpan={selectedSpan}\n            onSpanClick={setSelectedSpan}\n            matchingSpanIds={search.matchingSpanIds}\n            focusedSpanId={search.matchingSpanIds[search.focusedMatchIndex]}\n          />\n        </GanttTableProvider>\n      </Stack>\n      {selectedSpan && (\n        <>\n          <ResizableDivider parentRef={ganttChart} spacing={spacing} onMove={setTableWidth} />\n          <Box\n            style={{\n              width: `${(1 - tableWidth) * 100}%`,\n              minWidth: `${(1 - tableWidth) * 100}%`,\n            }}\n            sx={{ overflow: 'auto' }}\n          >\n            <DetailPane\n              customLinks={customLinks}\n              trace={trace}\n              span={selectedSpan}\n              onCloseBtnClick={() => setSelectedSpan(undefined)}\n            />\n          </Box>\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["useMemo","useRef","useState","Box","Stack","MiniGanttChart","DetailPane","GanttTable","GanttTableProvider","ResizableDivider","getTraceModel","TraceHeaderBar","useSpanSearch","TracingGanttChart","props","options","customLinks","trace","otlpTrace","e","Error","viewport","setViewport","startTimeUnixMs","endTimeUnixMs","selectedSpan","setSelectedSpan","selectedSpanId","spanById","get","undefined","search","ganttChart","tableWidth","setTableWidth","gap","spacing","current","parseFloat","getComputedStyle","columnGap","ref","direction","sx","height","minHeight","flexGrow","onSpanClick","matchingSpanIds","focusedSpanId","focusedMatchIndex","parentRef","onMove","style","width","minWidth","overflow","span","onCloseBtnClick"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAAuBA,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAChE,SAASC,GAAG,EAAEC,KAAK,QAAQ,gBAAgB;AAG3C,SAASC,cAAc,QAAQ,kCAAkC;AACjE,SAASC,UAAU,QAAQ,0BAA0B;AAErD,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,aAAa,QAAc,UAAU;AAC9C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,aAAa,QAAQ,WAAW;AAQzC;;;;;CAKC,GACD,OAAO,SAASC,kBAAkBC,KAA6B;IAC7D,MAAM,EAAEC,OAAO,EAAEC,WAAW,EAAEC,OAAOC,SAAS,EAAE,GAAGJ;IAEnD,MAAMG,QAAQjB,QAAQ;QACpB,IAAI;YACF,OAAOU,cAAcQ;QACvB,EAAE,OAAOC,GAAG;YACV,MAAM,IAAIC,MAAM,CAAC,8BAA8B,EAAED,GAAG;QACtD;IACF,GAAG;QAACD;KAAU;IACd,MAAM,CAACG,UAAUC,YAAY,GAAGpB,SAAmB;QACjDqB,iBAAiBN,MAAMM,eAAe;QACtCC,eAAeP,MAAMO,aAAa;IACpC;IACA,MAAM,CAACC,cAAcC,gBAAgB,GAAGxB,SAA2B,IACjEa,QAAQY,cAAc,GAAGV,MAAMW,QAAQ,CAACC,GAAG,CAACd,QAAQY,cAAc,IAAIG;IAExE,MAAMC,SAASnB,cAAcK;IAE7B,MAAMe,aAAa/B,OAAuB;IAC1C,iEAAiE;IACjE,yDAAyD;IACzD,MAAM,CAACgC,YAAYC,cAAc,GAAGhC,SAAiB;IACrD,MAAMiC,MAAM;IACZ,MAAMC,UAAUJ,WAAWK,OAAO,GAAGC,WAAWC,iBAAiBP,WAAWK,OAAO,EAAEG,SAAS,KAAK,IAAI;IAEvG,qBACE,MAACpC;QAAMqC,KAAKT;QAAYU,WAAU;QAAMC,IAAI;YAAEC,QAAQ;YAAQC,WAAW;YAASV;QAAI;;0BACpF,MAAC/B;gBAAMuC,IAAI;oBAAEG,UAAU;oBAAGX;gBAAI;;kCAC5B,KAACxB;wBAAeM,OAAOA;wBAAOc,QAAQA;;kCACtC,KAAC1B;wBAAeU,SAASA;wBAASE,OAAOA;wBAAOI,UAAUA;wBAAUC,aAAaA;;kCACjF,KAACd;kCACC,cAAA,KAACD;4BACCQ,SAASA;4BACTC,aAAaA;4BACbC,OAAOA;4BACPI,UAAUA;4BACVI,cAAcA;4BACdsB,aAAarB;4BACbsB,iBAAiBjB,OAAOiB,eAAe;4BACvCC,eAAelB,OAAOiB,eAAe,CAACjB,OAAOmB,iBAAiB,CAAC;;;;;YAIpEzB,8BACC;;kCACE,KAAChB;wBAAiB0C,WAAWnB;wBAAYI,SAASA;wBAASgB,QAAQlB;;kCACnE,KAAC/B;wBACCkD,OAAO;4BACLC,OAAO,GAAG,AAAC,CAAA,IAAIrB,UAAS,IAAK,IAAI,CAAC,CAAC;4BACnCsB,UAAU,GAAG,AAAC,CAAA,IAAItB,UAAS,IAAK,IAAI,CAAC,CAAC;wBACxC;wBACAU,IAAI;4BAAEa,UAAU;wBAAO;kCAEvB,cAAA,KAAClD;4BACCU,aAAaA;4BACbC,OAAOA;4BACPwC,MAAMhC;4BACNiC,iBAAiB,IAAMhC,gBAAgBI;;;;;;;AAOrD"}

package/lib/TracingGanttChart/trace.d.ts

@@ -49,4 +49,9 @@ export interface Link {
  * Time complexity: O(2n)
  */
 export declare function getTraceModel(trace: otlptracev1.TracesData): Trace;
+/**
+ * Recursively iterates all spans depth-first.
+ * Return false from the callback to skip a span's children.
+ */
+export declare function forEachSpan(spans: Span[], fn: (span: Span) => boolean | void): void;
 //# sourceMappingURL=trace.d.ts.map

package/lib/TracingGanttChart/trace.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"trace.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/trace.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAkB,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG7E,2EAA2E;AAC3E,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC;IAE9B;;;OAGG;IACH,SAAS,EAAE,IAAI,EAAE,CAAC;IAClB,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,IAAI;IACnB,QAAQ,EAAE,QAAQ,CAAC;IACnB,KAAK,EAAE,YAAY,CAAC,oBAAoB,CAAC;IACzC,UAAU,CAAC,EAAE,IAAI,CAAC;IAClB,uCAAuC;IACvC,UAAU,EAAE,IAAI,EAAE,CAAC;IAEnB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,YAAY,CAAC,QAAQ,EAAE,CAAC;IACpC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,QAAQ;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,YAAY,CAAC,QAAQ,EAAE,CAAC;CACrC;AAED,MAAM,WAAW,KAAK;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,YAAY,CAAC,QAAQ,EAAE,CAAC;CACrC;AAED,MAAM,WAAW,IAAI;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,YAAY,CAAC,QAAQ,EAAE,CAAC;CACrC;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,WAAW,CAAC,UAAU,GAAG,KAAK,CAmDlE"}
+{"version":3,"file":"trace.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/trace.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAkB,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG7E,2EAA2E;AAC3E,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC;IAE9B;;;OAGG;IACH,SAAS,EAAE,IAAI,EAAE,CAAC;IAClB,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,IAAI;IACnB,QAAQ,EAAE,QAAQ,CAAC;IACnB,KAAK,EAAE,YAAY,CAAC,oBAAoB,CAAC;IACzC,UAAU,CAAC,EAAE,IAAI,CAAC;IAClB,uCAAuC;IACvC,UAAU,EAAE,IAAI,EAAE,CAAC;IAEnB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,YAAY,CAAC,QAAQ,EAAE,CAAC;IACpC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,QAAQ;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,YAAY,CAAC,QAAQ,EAAE,CAAC;CACrC;AAED,MAAM,WAAW,KAAK;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,YAAY,CAAC,QAAQ,EAAE,CAAC;CACrC;AAED,MAAM,WAAW,IAAI;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,YAAY,CAAC,QAAQ,EAAE,CAAC;CACrC;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,WAAW,CAAC,UAAU,GAAG,KAAK,CAmDlE;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,CAMnF"}

package/lib/TracingGanttChart/trace.js

@@ -66,6 +66,16 @@ import { sortedIndexBy } from 'lodash';
         endTimeUnixMs
     };
 }
+/**
+ * Recursively iterates all spans depth-first.
+ * Return false from the callback to skip a span's children.
+ */ export function forEachSpan(spans, fn) {
+    for (const span of spans){
+        if (fn(span) !== false) {
+            forEachSpan(span.childSpans, fn);
+        }
+    }
+}
 function parseResource(resource) {
     let serviceName = 'unknown';
     for (const attr of resource?.attributes ?? []){

package/lib/TracingGanttChart/trace.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/TracingGanttChart/trace.ts"],"sourcesContent":["// Copyright 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 { otlpcommonv1, otlpresourcev1, otlptracev1 } from '@perses-dev/core';\nimport { sortedIndexBy } from 'lodash';\n\n/** holds the trace and computed properties required for the Gantt chart */\nexport interface Trace {\n  trace: otlptracev1.TracesData;\n\n  /**\n   * if a trace is incomplete (e.g. a parent span has not been received yet),\n   * this branch of the span tree will be appended to the root\n   */\n  rootSpans: Span[];\n  spanById: Map<string, Span>;\n  startTimeUnixMs: number;\n  endTimeUnixMs: number;\n}\n\nexport interface Span {\n  resource: Resource;\n  scope: otlpcommonv1.InstrumentationScope;\n  parentSpan?: Span;\n  /** child spans, sorted by startTime */\n  childSpans: Span[];\n\n  traceId: string;\n  spanId: string;\n  parentSpanId?: string;\n  name: string;\n  kind?: string;\n  startTimeUnixMs: number;\n  endTimeUnixMs: number;\n  attributes: otlpcommonv1.KeyValue[];\n  events: Event[];\n  links: Link[];\n  status: otlptracev1.Status;\n}\n\nexport interface Resource {\n  serviceName?: string;\n  attributes: otlpcommonv1.KeyValue[];\n}\n\nexport interface Event {\n  timeUnixMs: number;\n  name: string;\n  attributes: otlpcommonv1.KeyValue[];\n}\n\nexport interface Link {\n  traceId: string;\n  spanId: string;\n  attributes: otlpcommonv1.KeyValue[];\n}\n\n/**\n * getTraceModel builds a tree of spans from an OTLP trace,\n * and precomputes common fields, for example the start and end time of a trace.\n * Time complexity: O(2n)\n */\nexport function getTraceModel(trace: otlptracev1.TracesData): Trace {\n  // first pass: build lookup table <spanId, Span> and compute min/max\n  const spanById = new Map<string, Span>();\n  const rootSpans: Span[] = [];\n  let startTimeUnixMs: number = 0;\n  let endTimeUnixMs: number = 0;\n  for (const resourceSpan of trace.resourceSpans) {\n    const resource = parseResource(resourceSpan.resource);\n\n    for (const scopeSpan of resourceSpan.scopeSpans) {\n      const scope = parseScope(scopeSpan.scope);\n\n      for (const otelSpan of scopeSpan.spans) {\n        const span: Span = {\n          resource,\n          scope,\n          childSpans: [],\n          ...parseSpan(otelSpan),\n        };\n        spanById.set(otelSpan.spanId, span);\n\n        if (startTimeUnixMs === 0 || span.startTimeUnixMs < startTimeUnixMs) {\n          startTimeUnixMs = span.startTimeUnixMs;\n        }\n        if (endTimeUnixMs === 0 || span.endTimeUnixMs > endTimeUnixMs) {\n          endTimeUnixMs = span.endTimeUnixMs;\n        }\n      }\n    }\n  }\n\n  // second pass: build tree based on parentSpanId property\n  for (const [, span] of spanById) {\n    if (!span.parentSpanId) {\n      rootSpans.push(span);\n      continue;\n    }\n\n    const parent = spanById.get(span.parentSpanId);\n    if (!parent) {\n      console.trace(`span ${span.spanId} has parent ${span.parentSpanId} which has not been received yet`);\n      rootSpans.push(span);\n      continue;\n    }\n\n    span.parentSpan = parent;\n    const insertChildSpanAt = sortedIndexBy(parent.childSpans, span, (s) => s.startTimeUnixMs);\n    parent.childSpans.splice(insertChildSpanAt, 0, span);\n  }\n\n  return { trace, rootSpans, spanById, startTimeUnixMs, endTimeUnixMs };\n}\n\nfunction parseResource(resource?: otlpresourcev1.Resource): Resource {\n  let serviceName = 'unknown';\n  for (const attr of resource?.attributes ?? []) {\n    if (attr.key === 'service.name' && 'stringValue' in attr.value) {\n      serviceName = attr.value.stringValue;\n      break;\n    }\n  }\n\n  return {\n    serviceName,\n    attributes: resource?.attributes ?? [],\n  };\n}\n\nfunction parseScope(scope?: otlpcommonv1.InstrumentationScope): otlpcommonv1.InstrumentationScope {\n  return scope ?? {};\n}\n\n/**\n * parseSpan parses the Span API type to the internal representation\n * i.e. convert strings to numbers etc.\n */\nfunction parseSpan(span: otlptracev1.Span): Omit<Span, 'resource' | 'scope' | 'childSpans'> {\n  return {\n    traceId: span.traceId,\n    spanId: span.spanId,\n    parentSpanId: span.parentSpanId,\n    name: span.name,\n    kind: span.kind,\n    startTimeUnixMs: parseInt(span.startTimeUnixNano) * 1e-6, // convert to milliseconds because JS cannot handle numbers larger than 9007199254740991\n    endTimeUnixMs: parseInt(span.endTimeUnixNano) * 1e-6,\n    attributes: span.attributes ?? [],\n    events: (span.events ?? []).map(parseEvent),\n    links: (span.links ?? []).map(parseLink),\n    status: span.status ?? {},\n  };\n}\n\nfunction parseEvent(event: otlptracev1.Event): Event {\n  return {\n    timeUnixMs: parseInt(event.timeUnixNano) * 1e-6, // convert to milliseconds because JS cannot handle numbers larger than 9007199254740991\n    name: event.name,\n    attributes: event.attributes ?? [],\n  };\n}\n\nfunction parseLink(link: otlptracev1.Link): Link {\n  return {\n    traceId: link.traceId,\n    spanId: link.spanId,\n    attributes: link.attributes ?? [],\n  };\n}\n"],"names":["sortedIndexBy","getTraceModel","trace","spanById","Map","rootSpans","startTimeUnixMs","endTimeUnixMs","resourceSpan","resourceSpans","resource","parseResource","scopeSpan","scopeSpans","scope","parseScope","otelSpan","spans","span","childSpans","parseSpan","set","spanId","parentSpanId","push","parent","get","console","parentSpan","insertChildSpanAt","s","splice","serviceName","attr","attributes","key","value","stringValue","traceId","name","kind","parseInt","startTimeUnixNano","endTimeUnixNano","events","map","parseEvent","links","parseLink","status","event","timeUnixMs","timeUnixNano","link"],"mappings":"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"}
+{"version":3,"sources":["../../../src/TracingGanttChart/trace.ts"],"sourcesContent":["// Copyright 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 { otlpcommonv1, otlpresourcev1, otlptracev1 } from '@perses-dev/core';\nimport { sortedIndexBy } from 'lodash';\n\n/** holds the trace and computed properties required for the Gantt chart */\nexport interface Trace {\n  trace: otlptracev1.TracesData;\n\n  /**\n   * if a trace is incomplete (e.g. a parent span has not been received yet),\n   * this branch of the span tree will be appended to the root\n   */\n  rootSpans: Span[];\n  spanById: Map<string, Span>;\n  startTimeUnixMs: number;\n  endTimeUnixMs: number;\n}\n\nexport interface Span {\n  resource: Resource;\n  scope: otlpcommonv1.InstrumentationScope;\n  parentSpan?: Span;\n  /** child spans, sorted by startTime */\n  childSpans: Span[];\n\n  traceId: string;\n  spanId: string;\n  parentSpanId?: string;\n  name: string;\n  kind?: string;\n  startTimeUnixMs: number;\n  endTimeUnixMs: number;\n  attributes: otlpcommonv1.KeyValue[];\n  events: Event[];\n  links: Link[];\n  status: otlptracev1.Status;\n}\n\nexport interface Resource {\n  serviceName?: string;\n  attributes: otlpcommonv1.KeyValue[];\n}\n\nexport interface Event {\n  timeUnixMs: number;\n  name: string;\n  attributes: otlpcommonv1.KeyValue[];\n}\n\nexport interface Link {\n  traceId: string;\n  spanId: string;\n  attributes: otlpcommonv1.KeyValue[];\n}\n\n/**\n * getTraceModel builds a tree of spans from an OTLP trace,\n * and precomputes common fields, for example the start and end time of a trace.\n * Time complexity: O(2n)\n */\nexport function getTraceModel(trace: otlptracev1.TracesData): Trace {\n  // first pass: build lookup table <spanId, Span> and compute min/max\n  const spanById = new Map<string, Span>();\n  const rootSpans: Span[] = [];\n  let startTimeUnixMs: number = 0;\n  let endTimeUnixMs: number = 0;\n  for (const resourceSpan of trace.resourceSpans) {\n    const resource = parseResource(resourceSpan.resource);\n\n    for (const scopeSpan of resourceSpan.scopeSpans) {\n      const scope = parseScope(scopeSpan.scope);\n\n      for (const otelSpan of scopeSpan.spans) {\n        const span: Span = {\n          resource,\n          scope,\n          childSpans: [],\n          ...parseSpan(otelSpan),\n        };\n        spanById.set(otelSpan.spanId, span);\n\n        if (startTimeUnixMs === 0 || span.startTimeUnixMs < startTimeUnixMs) {\n          startTimeUnixMs = span.startTimeUnixMs;\n        }\n        if (endTimeUnixMs === 0 || span.endTimeUnixMs > endTimeUnixMs) {\n          endTimeUnixMs = span.endTimeUnixMs;\n        }\n      }\n    }\n  }\n\n  // second pass: build tree based on parentSpanId property\n  for (const [, span] of spanById) {\n    if (!span.parentSpanId) {\n      rootSpans.push(span);\n      continue;\n    }\n\n    const parent = spanById.get(span.parentSpanId);\n    if (!parent) {\n      console.trace(`span ${span.spanId} has parent ${span.parentSpanId} which has not been received yet`);\n      rootSpans.push(span);\n      continue;\n    }\n\n    span.parentSpan = parent;\n    const insertChildSpanAt = sortedIndexBy(parent.childSpans, span, (s) => s.startTimeUnixMs);\n    parent.childSpans.splice(insertChildSpanAt, 0, span);\n  }\n\n  return { trace, rootSpans, spanById, startTimeUnixMs, endTimeUnixMs };\n}\n\n/**\n * Recursively iterates all spans depth-first.\n * Return false from the callback to skip a span's children.\n */\nexport function forEachSpan(spans: Span[], fn: (span: Span) => boolean | void): void {\n  for (const span of spans) {\n    if (fn(span) !== false) {\n      forEachSpan(span.childSpans, fn);\n    }\n  }\n}\n\nfunction parseResource(resource?: otlpresourcev1.Resource): Resource {\n  let serviceName = 'unknown';\n  for (const attr of resource?.attributes ?? []) {\n    if (attr.key === 'service.name' && 'stringValue' in attr.value) {\n      serviceName = attr.value.stringValue;\n      break;\n    }\n  }\n\n  return {\n    serviceName,\n    attributes: resource?.attributes ?? [],\n  };\n}\n\nfunction parseScope(scope?: otlpcommonv1.InstrumentationScope): otlpcommonv1.InstrumentationScope {\n  return scope ?? {};\n}\n\n/**\n * parseSpan parses the Span API type to the internal representation\n * i.e. convert strings to numbers etc.\n */\nfunction parseSpan(span: otlptracev1.Span): Omit<Span, 'resource' | 'scope' | 'childSpans'> {\n  return {\n    traceId: span.traceId,\n    spanId: span.spanId,\n    parentSpanId: span.parentSpanId,\n    name: span.name,\n    kind: span.kind,\n    startTimeUnixMs: parseInt(span.startTimeUnixNano) * 1e-6, // convert to milliseconds because JS cannot handle numbers larger than 9007199254740991\n    endTimeUnixMs: parseInt(span.endTimeUnixNano) * 1e-6,\n    attributes: span.attributes ?? [],\n    events: (span.events ?? []).map(parseEvent),\n    links: (span.links ?? []).map(parseLink),\n    status: span.status ?? {},\n  };\n}\n\nfunction parseEvent(event: otlptracev1.Event): Event {\n  return {\n    timeUnixMs: parseInt(event.timeUnixNano) * 1e-6, // convert to milliseconds because JS cannot handle numbers larger than 9007199254740991\n    name: event.name,\n    attributes: event.attributes ?? [],\n  };\n}\n\nfunction parseLink(link: otlptracev1.Link): Link {\n  return {\n    traceId: link.traceId,\n    spanId: link.spanId,\n    attributes: link.attributes ?? [],\n  };\n}\n"],"names":["sortedIndexBy","getTraceModel","trace","spanById","Map","rootSpans","startTimeUnixMs","endTimeUnixMs","resourceSpan","resourceSpans","resource","parseResource","scopeSpan","scopeSpans","scope","parseScope","otelSpan","spans","span","childSpans","parseSpan","set","spanId","parentSpanId","push","parent","get","console","parentSpan","insertChildSpanAt","s","splice","forEachSpan","fn","serviceName","attr","attributes","key","value","stringValue","traceId","name","kind","parseInt","startTimeUnixNano","endTimeUnixNano","events","map","parseEvent","links","parseLink","status","event","timeUnixMs","timeUnixNano","link"],"mappings":"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"}

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

@@ -32,6 +32,9 @@ _export(exports, {
     },
     get TraceAttributes () {
         return TraceAttributes;
+    },
+    get renderAttributeValue () {
+        return renderAttributeValue;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -56,22 +59,59 @@ function TraceAttributes(props) {
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(AttributeItem, {
                         name: "duration",
                         value: (0, _utils.formatDuration)(span.endTimeUnixMs - span.startTimeUnixMs)
+                    }),
+                    span.kind && /*#__PURE__*/ (0, _jsxruntime.jsx)(AttributeItem, {
+                        name: "kind",
+                        value: span.kind
+                    }),
+                    span.status.code && /*#__PURE__*/ (0, _jsxruntime.jsx)(AttributeItem, {
+                        name: "status code",
+                        value: span.status.code
+                    }),
+                    span.status.message && /*#__PURE__*/ (0, _jsxruntime.jsx)(AttributeItem, {
+                        name: "status message",
+                        value: span.status.message
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {}),
             span.attributes.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                 children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {}),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(AttributeList, {
                         customLinks: customLinks,
                         attributes: span.attributes.toSorted((a, b)=>a.key.localeCompare(b.key))
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {})
+                    })
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(AttributeList, {
-                customLinks: customLinks,
-                attributes: span.resource.attributes.toSorted((a, b)=>a.key.localeCompare(b.key))
+            span.resource.attributes.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(AttributeList, {
+                        customLinks: customLinks,
+                        attributes: span.resource.attributes.toSorted((a, b)=>a.key.localeCompare(b.key))
+                    })
+                ]
+            }),
+            (span.scope.name || span.scope.version || span.scope.attributes && span.scope.attributes.length > 0) && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.List, {
+                        children: [
+                            span.scope.name && /*#__PURE__*/ (0, _jsxruntime.jsx)(AttributeItem, {
+                                name: "scope name",
+                                value: span.scope.name
+                            }),
+                            span.scope.version && /*#__PURE__*/ (0, _jsxruntime.jsx)(AttributeItem, {
+                                name: "scope version",
+                                value: span.scope.version
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(AttributeItems, {
+                                customLinks: customLinks,
+                                attributes: (span.scope.attributes ?? []).toSorted((a, b)=>a.key.localeCompare(b.key))
+                            })
+                        ]
+                    })
+                ]
             })
         ]
     });
@@ -160,5 +200,5 @@ function renderAttributeValue(value) {
         const values = value.arrayValue.values;
         return values && values.length > 0 ? values.map(renderAttributeValue).join(', ') : '<empty array>';
     }
-    return 'unknown';
+    return '<unknown type>';
 }