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

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>';
 }

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

@@ -24,34 +24,81 @@ 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 } = props;
-    const { collapsedSpans, setVisibleSpans } = (0, _GanttTableProvider.useGanttTableContext)();
+    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 = [];
-        for (const rootSpan of trace.rootSpans){
-            treeToRows(rows, rootSpan, collapsedSpans);
-        }
+        (0, _trace.forEachSpan)(trace.rootSpans, (span)=>{
+            rows.push(span);
+            if (collapsedSpans.has(span.spanId)) {
+                return false;
+            }
+        });
         return rows;
     }, [
         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;
-            }
+    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;
+            });
         }
-        return undefined;
+    }, [
+        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
@@ -85,14 +132,17 @@ function GanttTable(props) {
                 divider: divider
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactvirtuoso.Virtuoso, {
+                ref: virtuosoRef,
                 data: rows,
-                initialTopMostItemIndex: selectedSpanIndex ?? 0,
+                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
@@ -102,14 +152,3 @@ function GanttTable(props) {
         ]
     });
 }
-/**
- * treeToRows recursively transforms the span tree to a list of rows and
- * hides collapsed child spans.
- */ function treeToRows(rows, span, collapsedSpans) {
-    rows.push(span);
-    if (!collapsedSpans.includes(span.spanId)) {
-        for (const child of span.childSpans){
-            treeToRows(rows, child, collapsedSpans);
-        }
-    }
-}

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

@@ -36,7 +36,7 @@ const _react = require("react");
 const GanttTableContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
 function GanttTableProvider(props) {
     const { children } = props;
-    const [collapsedSpans, setCollapsedSpans] = (0, _react.useState)([]);
+    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, {

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

@@ -27,16 +27,28 @@ 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, nameColumnWidth, divider, onClick } = 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: selected ? theme.palette.action.selected : 'inherit'
+            backgroundColor,
+            // overwrite hover if background color is set (selected, focused or matched)
+            '&:hover': backgroundColor ? {
+                backgroundColor
+            } : undefined
         },
         direction: "row",
         onClick: handleOnClick,

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

@@ -35,8 +35,11 @@ function ResizableDivider(props) {
     // need stable reference for window.removeEventListener() in useEffect() below
     const handleMouseMove = (0, _pluginsystem.useEvent)((e)=>{
         if (!parentRef.current) return;
-        const offsetX = e.clientX - parentRef.current.getBoundingClientRect().left + spacing;
-        const leftPercent = offsetX / parentRef.current.getBoundingClientRect().width;
+        const parentRect = parentRef.current.getBoundingClientRect();
+        // The parent can be a flex row, for example: [leftPercent] [gap] [divider] [gap] [1-leftPercent].
+        // Without considering spacing, leftPercent would be wrong because it ignores the flex gap between the divider and the element.
+        const offsetX = e.clientX - parentRect.left + spacing;
+        const leftPercent = offsetX / parentRect.width;
         if (0.05 <= leftPercent && leftPercent <= 0.95) {
             onMove(leftPercent);
         }
@@ -78,6 +81,7 @@ function ResizableDivider(props) {
 const ResizableDividerBox = (0, _material.styled)(_material.Box)(({ theme })=>({
         position: 'relative',
         width: '1px',
+        minWidth: '1px',
         height: '100%',
         backgroundColor: theme.palette.divider,
         cursor: 'col-resize',