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

package/lib/TracingGanttChart/GanttTable/GanttTable.js

@@ -19,7 +19,7 @@ import { GanttTableRow } from './GanttTableRow';
 import { GanttTableHeader } from './GanttTableHeader';
 import { ResizableDivider } from './ResizableDivider';
 export function GanttTable(props) {
-    const { options, trace, viewport, selectedSpan, onSpanClick } = props;
+    const { options, customLinks, trace, viewport, selectedSpan, onSpanClick } = props;
     const { collapsedSpans, setVisibleSpans } = useGanttTableContext();
     const [nameColumnWidth, setNameColumnWidth] = useState(0.25);
     const tableRef = useRef(null);
@@ -34,6 +34,18 @@ export function GanttTable(props) {
         trace.rootSpans,
         collapsedSpans
     ]);
+    const selectedSpanIndex = useMemo(()=>{
+        if (!selectedSpan) return undefined;
+        for(let i = 0; i < rows.length; i++){
+            if (rows[i]?.spanId === selectedSpan.spanId) {
+                return i;
+            }
+        }
+        return undefined;
+    }, [
+        rows,
+        selectedSpan
+    ]);
     const divider = /*#__PURE__*/ _jsx(ResizableDivider, {
         parentRef: tableRef,
         onMove: setNameColumnWidth
@@ -64,8 +76,10 @@ export function GanttTable(props) {
             }),
             /*#__PURE__*/ _jsx(Virtuoso, {
                 data: rows,
+                initialTopMostItemIndex: selectedSpanIndex ?? 0,
                 itemContent: (_, span)=>/*#__PURE__*/ _jsx(GanttTableRow, {
                         options: options,
+                        customLinks: customLinks,
                         span: span,
                         viewport: viewport,
                         selected: span === selectedSpan,

package/lib/TracingGanttChart/GanttTable/GanttTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/GanttTable.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Virtuoso, ListRange } from 'react-virtuoso';\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { Box, useTheme } from '@mui/material';\nimport { Viewport } from '../utils';\nimport { TracingGanttChartOptions } from '../../gantt-chart-model';\nimport { Span, Trace } from '../trace';\nimport { useGanttTableContext } from './GanttTableProvider';\nimport { GanttTableRow } from './GanttTableRow';\nimport { GanttTableHeader } from './GanttTableHeader';\nimport { ResizableDivider } from './ResizableDivider';\n\nexport interface GanttTableProps {\n  options: TracingGanttChartOptions;\n  trace: Trace;\n  viewport: Viewport;\n  selectedSpan?: Span;\n  onSpanClick: (span: Span) => void;\n}\n\nexport function GanttTable(props: GanttTableProps): ReactElement {\n  const { options, trace, viewport, selectedSpan, onSpanClick } = props;\n  const { collapsedSpans, setVisibleSpans } = useGanttTableContext();\n  const [nameColumnWidth, setNameColumnWidth] = useState<number>(0.25);\n  const tableRef = useRef<HTMLDivElement>(null);\n  const theme = useTheme();\n\n  const rows = useMemo(() => {\n    const rows: Span[] = [];\n    for (const rootSpan of trace.rootSpans) {\n      treeToRows(rows, rootSpan, collapsedSpans);\n    }\n    return rows;\n  }, [trace.rootSpans, collapsedSpans]);\n\n  const divider = <ResizableDivider parentRef={tableRef} onMove={setNameColumnWidth} />;\n\n  // update currently visible spans\n  function handleRangeChange({ startIndex, endIndex }: ListRange): void {\n    const visibleSpans: string[] = [];\n    for (let i = startIndex; i <= endIndex; i++) {\n      visibleSpans.push(rows[i]!.spanId);\n    }\n    setVisibleSpans(visibleSpans);\n  }\n\n  return (\n    <Box\n      ref={tableRef}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        flexGrow: 1,\n        border: `1px solid ${theme.palette.divider}`,\n        borderRadius: `${theme.shape.borderRadius}px`,\n      }}\n    >\n      <GanttTableHeader trace={trace} viewport={viewport} nameColumnWidth={nameColumnWidth} divider={divider} />\n      <Virtuoso\n        data={rows}\n        itemContent={(_, span) => (\n          <GanttTableRow\n            options={options}\n            span={span}\n            viewport={viewport}\n            selected={span === selectedSpan}\n            nameColumnWidth={nameColumnWidth}\n            divider={divider}\n            onClick={onSpanClick}\n          />\n        )}\n        rangeChanged={handleRangeChange}\n      />\n    </Box>\n  );\n}\n\n/**\n * treeToRows recursively transforms the span tree to a list of rows and\n * hides collapsed child spans.\n */\nfunction treeToRows(rows: Span[], span: Span, collapsedSpans: string[]): void {\n  rows.push(span);\n  if (!collapsedSpans.includes(span.spanId)) {\n    for (const child of span.childSpans) {\n      treeToRows(rows, child, collapsedSpans);\n    }\n  }\n}\n"],"names":["Virtuoso","useMemo","useRef","useState","Box","useTheme","useGanttTableContext","GanttTableRow","GanttTableHeader","ResizableDivider","GanttTable","props","options","trace","viewport","selectedSpan","onSpanClick","collapsedSpans","setVisibleSpans","nameColumnWidth","setNameColumnWidth","tableRef","theme","rows","rootSpan","rootSpans","treeToRows","divider","parentRef","onMove","handleRangeChange","startIndex","endIndex","visibleSpans","i","push","spanId","ref","sx","display","flexDirection","flexGrow","border","palette","borderRadius","shape","data","itemContent","_","span","selected","onClick","rangeChanged","includes","child","childSpans"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,QAAQ,QAAmB,iBAAiB;AACrD,SAAuBC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAChE,SAASC,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AAI9C,SAASC,oBAAoB,QAAQ,uBAAuB;AAC5D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,gBAAgB,QAAQ,qBAAqB;AAUtD,OAAO,SAASC,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAGL;IAChE,MAAM,EAAEM,cAAc,EAAEC,eAAe,EAAE,GAAGZ;IAC5C,MAAM,CAACa,iBAAiBC,mBAAmB,GAAGjB,SAAiB;IAC/D,MAAMkB,WAAWnB,OAAuB;IACxC,MAAMoB,QAAQjB;IAEd,MAAMkB,OAAOtB,QAAQ;QACnB,MAAMsB,OAAe,EAAE;QACvB,KAAK,MAAMC,YAAYX,MAAMY,SAAS,CAAE;YACtCC,WAAWH,MAAMC,UAAUP;QAC7B;QACA,OAAOM;IACT,GAAG;QAACV,MAAMY,SAAS;QAAER;KAAe;IAEpC,MAAMU,wBAAU,KAAClB;QAAiBmB,WAAWP;QAAUQ,QAAQT;;IAE/D,iCAAiC;IACjC,SAASU,kBAAkB,EAAEC,UAAU,EAAEC,QAAQ,EAAa;QAC5D,MAAMC,eAAyB,EAAE;QACjC,IAAK,IAAIC,IAAIH,YAAYG,KAAKF,UAAUE,IAAK;YAC3CD,aAAaE,IAAI,CAACZ,IAAI,CAACW,EAAE,CAAEE,MAAM;QACnC;QACAlB,gBAAgBe;IAClB;IAEA,qBACE,MAAC7B;QACCiC,KAAKhB;QACLiB,IAAI;YACFC,SAAS;YACTC,eAAe;YACfC,UAAU;YACVC,QAAQ,CAAC,UAAU,EAAEpB,MAAMqB,OAAO,CAAChB,OAAO,EAAE;YAC5CiB,cAAc,GAAGtB,MAAMuB,KAAK,CAACD,YAAY,CAAC,EAAE,CAAC;QAC/C;;0BAEA,KAACpC;gBAAiBK,OAAOA;gBAAOC,UAAUA;gBAAUK,iBAAiBA;gBAAiBQ,SAASA;;0BAC/F,KAAC3B;gBACC8C,MAAMvB;gBACNwB,aAAa,CAACC,GAAGC,qBACf,KAAC1C;wBACCK,SAASA;wBACTqC,MAAMA;wBACNnC,UAAUA;wBACVoC,UAAUD,SAASlC;wBACnBI,iBAAiBA;wBACjBQ,SAASA;wBACTwB,SAASnC;;gBAGboC,cAActB;;;;AAItB;AAEA;;;CAGC,GACD,SAASJ,WAAWH,IAAY,EAAE0B,IAAU,EAAEhC,cAAwB;IACpEM,KAAKY,IAAI,CAACc;IACV,IAAI,CAAChC,eAAeoC,QAAQ,CAACJ,KAAKb,MAAM,GAAG;QACzC,KAAK,MAAMkB,SAASL,KAAKM,UAAU,CAAE;YACnC7B,WAAWH,MAAM+B,OAAOrC;QAC1B;IACF;AACF"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/GanttTable.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Virtuoso, ListRange } from 'react-virtuoso';\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { Box, useTheme } from '@mui/material';\nimport { Viewport } from '../utils';\nimport { CustomLinks, TracingGanttChartOptions } from '../../gantt-chart-model';\nimport { Span, Trace } from '../trace';\nimport { useGanttTableContext } from './GanttTableProvider';\nimport { GanttTableRow } from './GanttTableRow';\nimport { GanttTableHeader } from './GanttTableHeader';\nimport { ResizableDivider } from './ResizableDivider';\n\nexport interface GanttTableProps {\n  options: TracingGanttChartOptions;\n  customLinks?: CustomLinks;\n  trace: Trace;\n  viewport: Viewport;\n  selectedSpan?: Span;\n  onSpanClick: (span: Span) => void;\n}\n\nexport function GanttTable(props: GanttTableProps): ReactElement {\n  const { options, customLinks, trace, viewport, selectedSpan, onSpanClick } = props;\n  const { collapsedSpans, setVisibleSpans } = useGanttTableContext();\n  const [nameColumnWidth, setNameColumnWidth] = useState<number>(0.25);\n  const tableRef = useRef<HTMLDivElement>(null);\n  const theme = useTheme();\n\n  const rows = useMemo(() => {\n    const rows: Span[] = [];\n    for (const rootSpan of trace.rootSpans) {\n      treeToRows(rows, rootSpan, collapsedSpans);\n    }\n    return rows;\n  }, [trace.rootSpans, collapsedSpans]);\n\n  const selectedSpanIndex = useMemo(() => {\n    if (!selectedSpan) return undefined;\n\n    for (let i = 0; i < rows.length; i++) {\n      if (rows[i]?.spanId === selectedSpan.spanId) {\n        return i;\n      }\n    }\n    return undefined;\n  }, [rows, selectedSpan]);\n\n  const divider = <ResizableDivider parentRef={tableRef} onMove={setNameColumnWidth} />;\n\n  // update currently visible spans\n  function handleRangeChange({ startIndex, endIndex }: ListRange): void {\n    const visibleSpans: string[] = [];\n    for (let i = startIndex; i <= endIndex; i++) {\n      visibleSpans.push(rows[i]!.spanId);\n    }\n    setVisibleSpans(visibleSpans);\n  }\n\n  return (\n    <Box\n      ref={tableRef}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        flexGrow: 1,\n        border: `1px solid ${theme.palette.divider}`,\n        borderRadius: `${theme.shape.borderRadius}px`,\n      }}\n    >\n      <GanttTableHeader trace={trace} viewport={viewport} nameColumnWidth={nameColumnWidth} divider={divider} />\n      <Virtuoso\n        data={rows}\n        initialTopMostItemIndex={selectedSpanIndex ?? 0}\n        itemContent={(_, span) => (\n          <GanttTableRow\n            options={options}\n            customLinks={customLinks}\n            span={span}\n            viewport={viewport}\n            selected={span === selectedSpan}\n            nameColumnWidth={nameColumnWidth}\n            divider={divider}\n            onClick={onSpanClick}\n          />\n        )}\n        rangeChanged={handleRangeChange}\n      />\n    </Box>\n  );\n}\n\n/**\n * treeToRows recursively transforms the span tree to a list of rows and\n * hides collapsed child spans.\n */\nfunction treeToRows(rows: Span[], span: Span, collapsedSpans: string[]): void {\n  rows.push(span);\n  if (!collapsedSpans.includes(span.spanId)) {\n    for (const child of span.childSpans) {\n      treeToRows(rows, child, collapsedSpans);\n    }\n  }\n}\n"],"names":["Virtuoso","useMemo","useRef","useState","Box","useTheme","useGanttTableContext","GanttTableRow","GanttTableHeader","ResizableDivider","GanttTable","props","options","customLinks","trace","viewport","selectedSpan","onSpanClick","collapsedSpans","setVisibleSpans","nameColumnWidth","setNameColumnWidth","tableRef","theme","rows","rootSpan","rootSpans","treeToRows","selectedSpanIndex","undefined","i","length","spanId","divider","parentRef","onMove","handleRangeChange","startIndex","endIndex","visibleSpans","push","ref","sx","display","flexDirection","flexGrow","border","palette","borderRadius","shape","data","initialTopMostItemIndex","itemContent","_","span","selected","onClick","rangeChanged","includes","child","childSpans"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,QAAQ,QAAmB,iBAAiB;AACrD,SAAuBC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAChE,SAASC,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AAI9C,SAASC,oBAAoB,QAAQ,uBAAuB;AAC5D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,gBAAgB,QAAQ,qBAAqB;AAWtD,OAAO,SAASC,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,OAAO,EAAEC,WAAW,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAGN;IAC7E,MAAM,EAAEO,cAAc,EAAEC,eAAe,EAAE,GAAGb;IAC5C,MAAM,CAACc,iBAAiBC,mBAAmB,GAAGlB,SAAiB;IAC/D,MAAMmB,WAAWpB,OAAuB;IACxC,MAAMqB,QAAQlB;IAEd,MAAMmB,OAAOvB,QAAQ;QACnB,MAAMuB,OAAe,EAAE;QACvB,KAAK,MAAMC,YAAYX,MAAMY,SAAS,CAAE;YACtCC,WAAWH,MAAMC,UAAUP;QAC7B;QACA,OAAOM;IACT,GAAG;QAACV,MAAMY,SAAS;QAAER;KAAe;IAEpC,MAAMU,oBAAoB3B,QAAQ;QAChC,IAAI,CAACe,cAAc,OAAOa;QAE1B,IAAK,IAAIC,IAAI,GAAGA,IAAIN,KAAKO,MAAM,EAAED,IAAK;YACpC,IAAIN,IAAI,CAACM,EAAE,EAAEE,WAAWhB,aAAagB,MAAM,EAAE;gBAC3C,OAAOF;YACT;QACF;QACA,OAAOD;IACT,GAAG;QAACL;QAAMR;KAAa;IAEvB,MAAMiB,wBAAU,KAACxB;QAAiByB,WAAWZ;QAAUa,QAAQd;;IAE/D,iCAAiC;IACjC,SAASe,kBAAkB,EAAEC,UAAU,EAAEC,QAAQ,EAAa;QAC5D,MAAMC,eAAyB,EAAE;QACjC,IAAK,IAAIT,IAAIO,YAAYP,KAAKQ,UAAUR,IAAK;YAC3CS,aAAaC,IAAI,CAAChB,IAAI,CAACM,EAAE,CAAEE,MAAM;QACnC;QACAb,gBAAgBoB;IAClB;IAEA,qBACE,MAACnC;QACCqC,KAAKnB;QACLoB,IAAI;YACFC,SAAS;YACTC,eAAe;YACfC,UAAU;YACVC,QAAQ,CAAC,UAAU,EAAEvB,MAAMwB,OAAO,CAACd,OAAO,EAAE;YAC5Ce,cAAc,GAAGzB,MAAM0B,KAAK,CAACD,YAAY,CAAC,EAAE,CAAC;QAC/C;;0BAEA,KAACxC;gBAAiBM,OAAOA;gBAAOC,UAAUA;gBAAUK,iBAAiBA;gBAAiBa,SAASA;;0BAC/F,KAACjC;gBACCkD,MAAM1B;gBACN2B,yBAAyBvB,qBAAqB;gBAC9CwB,aAAa,CAACC,GAAGC,qBACf,KAAC/C;wBACCK,SAASA;wBACTC,aAAaA;wBACbyC,MAAMA;wBACNvC,UAAUA;wBACVwC,UAAUD,SAAStC;wBACnBI,iBAAiBA;wBACjBa,SAASA;wBACTuB,SAASvC;;gBAGbwC,cAAcrB;;;;AAItB;AAEA;;;CAGC,GACD,SAAST,WAAWH,IAAY,EAAE8B,IAAU,EAAEpC,cAAwB;IACpEM,KAAKgB,IAAI,CAACc;IACV,IAAI,CAACpC,eAAewC,QAAQ,CAACJ,KAAKtB,MAAM,GAAG;QACzC,KAAK,MAAM2B,SAASL,KAAKM,UAAU,CAAE;YACnCjC,WAAWH,MAAMmC,OAAOzC;QAC1B;IACF;AACF"}

package/lib/TracingGanttChart/GanttTable/GanttTableRow.d.ts

@@ -1,8 +1,9 @@
 import { Viewport } from '../utils';
-import { TracingGanttChartOptions } from '../../gantt-chart-model';
+import { CustomLinks, TracingGanttChartOptions } from '../../gantt-chart-model';
 import { Span } from '../trace';
 interface GanttTableRowProps {
     options: TracingGanttChartOptions;
+    customLinks?: CustomLinks;
     span: Span;
     viewport: Viewport;
     selected?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"GanttTableRow.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/GanttTable/GanttTableRow.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,QAAQ,EAAa,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAIhC,UAAU,kBAAkB;IAC1B,OAAO,EAAE,wBAAwB,CAAC;IAClC,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,aAAa,0DAsBxB,CAAC"}
+{"version":3,"file":"GanttTableRow.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/GanttTable/GanttTableRow.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,QAAQ,EAAa,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAChF,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAIhC,UAAU,kBAAkB;IAC1B,OAAO,EAAE,wBAAwB,CAAC;IAClC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,aAAa,0DAsBxB,CAAC"}

package/lib/TracingGanttChart/GanttTable/GanttTableRow.js

@@ -17,7 +17,7 @@ import { rowHeight } from '../utils';
 import { SpanName } from './SpanName';
 import { SpanDuration } from './SpanDuration';
 export const GanttTableRow = /*#__PURE__*/ memo(function GanttTableRow(props) {
-    const { options, span, viewport, selected, nameColumnWidth, divider, onClick } = props;
+    const { options, customLinks, span, viewport, selected, nameColumnWidth, divider, onClick } = props;
     const theme = useTheme();
     const handleOnClick = ()=>{
         // ignore event if triggered by selecting text
@@ -32,6 +32,7 @@ export const GanttTableRow = /*#__PURE__*/ memo(function GanttTableRow(props) {
         onClick: handleOnClick,
         children: [
             /*#__PURE__*/ _jsx(SpanName, {
+                customLinks: customLinks,
                 span: span,
                 nameColumnWidth: nameColumnWidth
             }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/GanttTableRow.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Stack, styled, useTheme } from '@mui/material';\nimport { memo } from 'react';\nimport { Viewport, rowHeight } from '../utils';\nimport { TracingGanttChartOptions } from '../../gantt-chart-model';\nimport { Span } from '../trace';\nimport { SpanName } from './SpanName';\nimport { SpanDuration } from './SpanDuration';\n\ninterface GanttTableRowProps {\n  options: TracingGanttChartOptions;\n  span: Span;\n  viewport: Viewport;\n  selected?: boolean;\n  nameColumnWidth: number;\n  divider: React.ReactNode;\n  onClick: (span: Span) => void;\n}\n\nexport const GanttTableRow = memo(function GanttTableRow(props: GanttTableRowProps) {\n  const { options, span, viewport, selected, nameColumnWidth, divider, onClick } = props;\n  const theme = useTheme();\n\n  const handleOnClick = (): void => {\n    // ignore event if triggered by selecting text\n    if (document.getSelection()?.type === 'Range') return;\n\n    onClick(span);\n  };\n\n  return (\n    <RowContainer\n      sx={{ backgroundColor: selected ? theme.palette.action.selected : 'inherit' }}\n      direction=\"row\"\n      onClick={handleOnClick}\n    >\n      <SpanName span={span} nameColumnWidth={nameColumnWidth} />\n      {divider}\n      <SpanDuration options={options} span={span} viewport={viewport} />\n    </RowContainer>\n  );\n});\n\nconst RowContainer = styled(Stack)(({ theme }) => ({\n  height: rowHeight,\n  '&:hover': {\n    backgroundColor: theme.palette.action.hover,\n    borderTop: `1px solid ${theme.palette.divider}`,\n    borderBottom: `1px solid ${theme.palette.divider}`,\n  },\n}));\n"],"names":["Stack","styled","useTheme","memo","rowHeight","SpanName","SpanDuration","GanttTableRow","props","options","span","viewport","selected","nameColumnWidth","divider","onClick","theme","handleOnClick","document","getSelection","type","RowContainer","sx","backgroundColor","palette","action","direction","height","hover","borderTop","borderBottom"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,KAAK,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,gBAAgB;AACxD,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAAmBC,SAAS,QAAQ,WAAW;AAG/C,SAASC,QAAQ,QAAQ,aAAa;AACtC,SAASC,YAAY,QAAQ,iBAAiB;AAY9C,OAAO,MAAMC,8BAAgBJ,KAAK,SAASI,cAAcC,KAAyB;IAChF,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGP;IACjF,MAAMQ,QAAQd;IAEd,MAAMe,gBAAgB;QACpB,8CAA8C;QAC9C,IAAIC,SAASC,YAAY,IAAIC,SAAS,SAAS;QAE/CL,QAAQL;IACV;IAEA,qBACE,MAACW;QACCC,IAAI;YAAEC,iBAAiBX,WAAWI,MAAMQ,OAAO,CAACC,MAAM,CAACb,QAAQ,GAAG;QAAU;QAC5Ec,WAAU;QACVX,SAASE;;0BAET,KAACZ;gBAASK,MAAMA;gBAAMG,iBAAiBA;;YACtCC;0BACD,KAACR;gBAAaG,SAASA;gBAASC,MAAMA;gBAAMC,UAAUA;;;;AAG5D,GAAG;AAEH,MAAMU,eAAepB,OAAOD,OAAO,CAAC,EAAEgB,KAAK,EAAE,GAAM,CAAA;QACjDW,QAAQvB;QACR,WAAW;YACTmB,iBAAiBP,MAAMQ,OAAO,CAACC,MAAM,CAACG,KAAK;YAC3CC,WAAW,CAAC,UAAU,EAAEb,MAAMQ,OAAO,CAACV,OAAO,EAAE;YAC/CgB,cAAc,CAAC,UAAU,EAAEd,MAAMQ,OAAO,CAACV,OAAO,EAAE;QACpD;IACF,CAAA"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/GanttTableRow.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Stack, styled, useTheme } from '@mui/material';\nimport { memo } from 'react';\nimport { Viewport, rowHeight } from '../utils';\nimport { CustomLinks, TracingGanttChartOptions } from '../../gantt-chart-model';\nimport { Span } from '../trace';\nimport { SpanName } from './SpanName';\nimport { SpanDuration } from './SpanDuration';\n\ninterface GanttTableRowProps {\n  options: TracingGanttChartOptions;\n  customLinks?: CustomLinks;\n  span: Span;\n  viewport: Viewport;\n  selected?: boolean;\n  nameColumnWidth: number;\n  divider: React.ReactNode;\n  onClick: (span: Span) => void;\n}\n\nexport const GanttTableRow = memo(function GanttTableRow(props: GanttTableRowProps) {\n  const { options, customLinks, span, viewport, selected, nameColumnWidth, divider, onClick } = props;\n  const theme = useTheme();\n\n  const handleOnClick = (): void => {\n    // ignore event if triggered by selecting text\n    if (document.getSelection()?.type === 'Range') return;\n\n    onClick(span);\n  };\n\n  return (\n    <RowContainer\n      sx={{ backgroundColor: selected ? theme.palette.action.selected : 'inherit' }}\n      direction=\"row\"\n      onClick={handleOnClick}\n    >\n      <SpanName customLinks={customLinks} span={span} nameColumnWidth={nameColumnWidth} />\n      {divider}\n      <SpanDuration options={options} span={span} viewport={viewport} />\n    </RowContainer>\n  );\n});\n\nconst RowContainer = styled(Stack)(({ theme }) => ({\n  height: rowHeight,\n  '&:hover': {\n    backgroundColor: theme.palette.action.hover,\n    borderTop: `1px solid ${theme.palette.divider}`,\n    borderBottom: `1px solid ${theme.palette.divider}`,\n  },\n}));\n"],"names":["Stack","styled","useTheme","memo","rowHeight","SpanName","SpanDuration","GanttTableRow","props","options","customLinks","span","viewport","selected","nameColumnWidth","divider","onClick","theme","handleOnClick","document","getSelection","type","RowContainer","sx","backgroundColor","palette","action","direction","height","hover","borderTop","borderBottom"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,KAAK,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,gBAAgB;AACxD,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAAmBC,SAAS,QAAQ,WAAW;AAG/C,SAASC,QAAQ,QAAQ,aAAa;AACtC,SAASC,YAAY,QAAQ,iBAAiB;AAa9C,OAAO,MAAMC,8BAAgBJ,KAAK,SAASI,cAAcC,KAAyB;IAChF,MAAM,EAAEC,OAAO,EAAEC,WAAW,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGR;IAC9F,MAAMS,QAAQf;IAEd,MAAMgB,gBAAgB;QACpB,8CAA8C;QAC9C,IAAIC,SAASC,YAAY,IAAIC,SAAS,SAAS;QAE/CL,QAAQL;IACV;IAEA,qBACE,MAACW;QACCC,IAAI;YAAEC,iBAAiBX,WAAWI,MAAMQ,OAAO,CAACC,MAAM,CAACb,QAAQ,GAAG;QAAU;QAC5Ec,WAAU;QACVX,SAASE;;0BAET,KAACb;gBAASK,aAAaA;gBAAaC,MAAMA;gBAAMG,iBAAiBA;;YAChEC;0BACD,KAACT;gBAAaG,SAASA;gBAASE,MAAMA;gBAAMC,UAAUA;;;;AAG5D,GAAG;AAEH,MAAMU,eAAerB,OAAOD,OAAO,CAAC,EAAEiB,KAAK,EAAE,GAAM,CAAA;QACjDW,QAAQxB;QACR,WAAW;YACToB,iBAAiBP,MAAMQ,OAAO,CAACC,MAAM,CAACG,KAAK;YAC3CC,WAAW,CAAC,UAAU,EAAEb,MAAMQ,OAAO,CAACV,OAAO,EAAE;YAC/CgB,cAAc,CAAC,UAAU,EAAEd,MAAMQ,OAAO,CAACV,OAAO,EAAE;QACpD;IACF,CAAA"}

package/lib/TracingGanttChart/GanttTable/SpanLinksButton.d.ts

@@ -0,0 +1,8 @@
+import { Span } from '../trace';
+import { CustomLinks } from '../../gantt-chart-model';
+export interface SpanLinksButtonProps {
+    customLinks: CustomLinks;
+    span: Span;
+}
+export declare function SpanLinksButton(props: SpanLinksButtonProps): import("react/jsx-runtime").JSX.Element | undefined;
+//# sourceMappingURL=SpanLinksButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpanLinksButton.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/GanttTable/SpanLinksButton.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,WAAW,CAAC;IACzB,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,uDA6E1D"}

package/lib/TracingGanttChart/GanttTable/SpanLinksButton.js

@@ -0,0 +1,95 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IconButton, Menu, MenuItem } from '@mui/material';
+import { useState } from 'react';
+import LaunchIcon from 'mdi-material-ui/Launch';
+import { InfoTooltip } from '@perses-dev/components';
+import { replaceVariablesInString, useAllVariableValues, useRouterContext } from '@perses-dev/plugin-system';
+export function SpanLinksButton(props) {
+    const { customLinks, span } = props;
+    const variableValues = useAllVariableValues();
+    const { RouterComponent } = useRouterContext();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const isOpen = Boolean(anchorEl);
+    if (!RouterComponent || !customLinks.links.span) {
+        return;
+    }
+    // if there is a single span link, render the button directly without a menu
+    if (span.links.length == 1 && span.links[0]) {
+        const link = span.links[0];
+        return /*#__PURE__*/ _jsx(InfoTooltip, {
+            description: "open linked span",
+            children: /*#__PURE__*/ _jsx(IconButton, {
+                size: "small",
+                component: RouterComponent,
+                to: replaceVariablesInString(customLinks.links.span, variableValues, {
+                    ...customLinks.variables,
+                    traceId: link.traceId,
+                    spanId: link.spanId
+                }),
+                children: /*#__PURE__*/ _jsx(LaunchIcon, {
+                    fontSize: "inherit"
+                })
+            })
+        });
+    }
+    const handleOpenMenu = (event)=>{
+        // do not propagate onClick event to the table row (otherwise, the detail pane would open)
+        event.stopPropagation();
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = (event)=>{
+        // Closing the menu, i.e. clicking on the fullscreen transparent MUI backdrop element, does trigger a click on the table row (which opens the detail pane).
+        // Therefore, stop propagating this event
+        event.stopPropagation();
+        setAnchorEl(null);
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(InfoTooltip, {
+                description: `${span.links.length} linked spans`,
+                children: /*#__PURE__*/ _jsx(IconButton, {
+                    "aria-label": "span links",
+                    "aria-haspopup": "true",
+                    "aria-expanded": isOpen ? 'true' : undefined,
+                    size: "small",
+                    onClick: handleOpenMenu,
+                    children: /*#__PURE__*/ _jsx(LaunchIcon, {
+                        fontSize: "inherit"
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx(Menu, {
+                anchorEl: anchorEl,
+                open: isOpen,
+                onClose: handleClose,
+                children: span.links.map((link)=>/*#__PURE__*/ _jsxs(MenuItem, {
+                        component: RouterComponent,
+                        onClick: handleClose,
+                        to: replaceVariablesInString(customLinks.links.span, variableValues, {
+                            ...customLinks.variables,
+                            traceId: link.traceId,
+                            spanId: link.spanId
+                        }),
+                        children: [
+                            "Open linked span ",
+                            link.spanId
+                        ]
+                    }, link.spanId))
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=SpanLinksButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/SpanLinksButton.tsx"],"sourcesContent":["// Copyright 2025 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, Menu, MenuItem } from '@mui/material';\nimport { MouseEvent, useState } from 'react';\nimport LaunchIcon from 'mdi-material-ui/Launch';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { replaceVariablesInString, useAllVariableValues, useRouterContext } from '@perses-dev/plugin-system';\nimport { Span } from '../trace';\nimport { CustomLinks } from '../../gantt-chart-model';\n\nexport interface SpanLinksButtonProps {\n  customLinks: CustomLinks;\n  span: Span;\n}\n\nexport function SpanLinksButton(props: SpanLinksButtonProps) {\n  const { customLinks, span } = props;\n  const variableValues = useAllVariableValues();\n  const { RouterComponent } = useRouterContext();\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const isOpen = Boolean(anchorEl);\n\n  if (!RouterComponent || !customLinks.links.span) {\n    return;\n  }\n\n  // if there is a single span link, render the button directly without a menu\n  if (span.links.length == 1 && span.links[0]) {\n    const link = span.links[0];\n    return (\n      <InfoTooltip description=\"open linked span\">\n        <IconButton\n          size=\"small\"\n          component={RouterComponent}\n          to={replaceVariablesInString(customLinks.links.span, variableValues, {\n            ...customLinks.variables,\n            traceId: link.traceId,\n            spanId: link.spanId,\n          })}\n        >\n          <LaunchIcon fontSize=\"inherit\" />\n        </IconButton>\n      </InfoTooltip>\n    );\n  }\n\n  const handleOpenMenu = (event: MouseEvent<HTMLButtonElement>) => {\n    // do not propagate onClick event to the table row (otherwise, the detail pane would open)\n    event.stopPropagation();\n\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = (event: MouseEvent) => {\n    // Closing the menu, i.e. clicking on the fullscreen transparent MUI backdrop element, does trigger a click on the table row (which opens the detail pane).\n    // Therefore, stop propagating this event\n    event.stopPropagation();\n\n    setAnchorEl(null);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={`${span.links.length} linked spans`}>\n        <IconButton\n          aria-label=\"span links\"\n          aria-haspopup=\"true\"\n          aria-expanded={isOpen ? 'true' : undefined}\n          size=\"small\"\n          onClick={handleOpenMenu}\n        >\n          <LaunchIcon fontSize=\"inherit\" />\n        </IconButton>\n      </InfoTooltip>\n      <Menu anchorEl={anchorEl} open={isOpen} onClose={handleClose}>\n        {span.links.map((link) => (\n          <MenuItem\n            key={link.spanId}\n            component={RouterComponent}\n            onClick={handleClose}\n            to={replaceVariablesInString(customLinks.links.span!, variableValues, {\n              ...customLinks.variables,\n              traceId: link.traceId,\n              spanId: link.spanId,\n            })}\n          >\n            Open linked span {link.spanId}\n          </MenuItem>\n        ))}\n      </Menu>\n    </>\n  );\n}\n"],"names":["IconButton","Menu","MenuItem","useState","LaunchIcon","InfoTooltip","replaceVariablesInString","useAllVariableValues","useRouterContext","SpanLinksButton","props","customLinks","span","variableValues","RouterComponent","anchorEl","setAnchorEl","isOpen","Boolean","links","length","link","description","size","component","to","variables","traceId","spanId","fontSize","handleOpenMenu","event","stopPropagation","currentTarget","handleClose","aria-label","aria-haspopup","aria-expanded","undefined","onClick","open","onClose","map"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,UAAU,EAAEC,IAAI,EAAEC,QAAQ,QAAQ,gBAAgB;AAC3D,SAAqBC,QAAQ,QAAQ,QAAQ;AAC7C,OAAOC,gBAAgB,yBAAyB;AAChD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,wBAAwB,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAS7G,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,WAAW,EAAEC,IAAI,EAAE,GAAGF;IAC9B,MAAMG,iBAAiBN;IACvB,MAAM,EAAEO,eAAe,EAAE,GAAGN;IAC5B,MAAM,CAACO,UAAUC,YAAY,GAAGb,SAA6B;IAC7D,MAAMc,SAASC,QAAQH;IAEvB,IAAI,CAACD,mBAAmB,CAACH,YAAYQ,KAAK,CAACP,IAAI,EAAE;QAC/C;IACF;IAEA,4EAA4E;IAC5E,IAAIA,KAAKO,KAAK,CAACC,MAAM,IAAI,KAAKR,KAAKO,KAAK,CAAC,EAAE,EAAE;QAC3C,MAAME,OAAOT,KAAKO,KAAK,CAAC,EAAE;QAC1B,qBACE,KAACd;YAAYiB,aAAY;sBACvB,cAAA,KAACtB;gBACCuB,MAAK;gBACLC,WAAWV;gBACXW,IAAInB,yBAAyBK,YAAYQ,KAAK,CAACP,IAAI,EAAEC,gBAAgB;oBACnE,GAAGF,YAAYe,SAAS;oBACxBC,SAASN,KAAKM,OAAO;oBACrBC,QAAQP,KAAKO,MAAM;gBACrB;0BAEA,cAAA,KAACxB;oBAAWyB,UAAS;;;;IAI7B;IAEA,MAAMC,iBAAiB,CAACC;QACtB,0FAA0F;QAC1FA,MAAMC,eAAe;QAErBhB,YAAYe,MAAME,aAAa;IACjC;IAEA,MAAMC,cAAc,CAACH;QACnB,2JAA2J;QAC3J,yCAAyC;QACzCA,MAAMC,eAAe;QAErBhB,YAAY;IACd;IAEA,qBACE;;0BACE,KAACX;gBAAYiB,aAAa,GAAGV,KAAKO,KAAK,CAACC,MAAM,CAAC,aAAa,CAAC;0BAC3D,cAAA,KAACpB;oBACCmC,cAAW;oBACXC,iBAAc;oBACdC,iBAAepB,SAAS,SAASqB;oBACjCf,MAAK;oBACLgB,SAAST;8BAET,cAAA,KAAC1B;wBAAWyB,UAAS;;;;0BAGzB,KAAC5B;gBAAKc,UAAUA;gBAAUyB,MAAMvB;gBAAQwB,SAASP;0BAC9CtB,KAAKO,KAAK,CAACuB,GAAG,CAAC,CAACrB,qBACf,MAACnB;wBAECsB,WAAWV;wBACXyB,SAASL;wBACTT,IAAInB,yBAAyBK,YAAYQ,KAAK,CAACP,IAAI,EAAGC,gBAAgB;4BACpE,GAAGF,YAAYe,SAAS;4BACxBC,SAASN,KAAKM,OAAO;4BACrBC,QAAQP,KAAKO,MAAM;wBACrB;;4BACD;4BACmBP,KAAKO,MAAM;;uBATxBP,KAAKO,MAAM;;;;AAe5B"}

package/lib/TracingGanttChart/GanttTable/SpanName.d.ts

@@ -1,6 +1,8 @@
 import { ReactElement } from 'react';
 import { Span } from '../trace';
+import { CustomLinks } from '../../gantt-chart-model';
 export interface SpanNameProps {
+    customLinks?: CustomLinks;
     span: Span;
     nameColumnWidth: number;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SpanName.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/GanttTable/SpanName.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,IAAI,CAAC;IACX,eAAe,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,CAY3D"}
+{"version":3,"file":"SpanName.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/GanttTable/SpanName.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAItD,MAAM,WAAW,aAAa;IAC5B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,EAAE,IAAI,CAAC;IACX,eAAe,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,CAiB3D"}

package/lib/TracingGanttChart/GanttTable/SpanName.js

@@ -15,10 +15,11 @@ import { Box, Stack } from '@mui/material';
 import AlertIcon from 'mdi-material-ui/AlertCircleOutline';
 import { spanHasError } from '../utils';
 import { SpanIndents } from './SpanIndents';
+import { SpanLinksButton } from './SpanLinksButton';
 /**
  * SpanName renders the entire left column of a SpanRow, i.e. the hierarchy and the service and span name
  */ export function SpanName(props) {
-    const { span, nameColumnWidth } = props;
+    const { customLinks, span, nameColumnWidth } = props;
     return /*#__PURE__*/ _jsxs(Stack, {
         direction: "row",
         sx: {
@@ -53,6 +54,16 @@ import { SpanIndents } from './SpanIndents';
                     " ",
                     span.name
                 ]
+            }),
+            customLinks && customLinks.links.span && span.links.length > 0 && /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    marginLeft: 'auto',
+                    px: 1
+                },
+                children: /*#__PURE__*/ _jsx(SpanLinksButton, {
+                    customLinks: customLinks,
+                    span: span
+                })
             })
         ]
     });

package/lib/TracingGanttChart/GanttTable/SpanName.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/SpanName.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Stack } from '@mui/material';\nimport AlertIcon from 'mdi-material-ui/AlertCircleOutline';\nimport { ReactElement } from 'react';\nimport { spanHasError } from '../utils';\nimport { Span } from '../trace';\nimport { SpanIndents } from './SpanIndents';\n\nexport interface SpanNameProps {\n  span: Span;\n  nameColumnWidth: number;\n}\n\n/**\n * SpanName renders the entire left column of a SpanRow, i.e. the hierarchy and the service and span name\n */\nexport function SpanName(props: SpanNameProps): ReactElement {\n  const { span, nameColumnWidth } = props;\n\n  return (\n    <Stack direction=\"row\" sx={{ alignItems: 'center' }} style={{ width: `${nameColumnWidth * 100}%` }}>\n      <SpanIndents span={span} />\n      {spanHasError(span) && <AlertIcon titleAccess=\"error\" color=\"error\" sx={{ marginRight: '5px' }} />}\n      <Box sx={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>\n        <strong>{span.resource.serviceName}:</strong> {span.name}\n      </Box>\n    </Stack>\n  );\n}\n"],"names":["Box","Stack","AlertIcon","spanHasError","SpanIndents","SpanName","props","span","nameColumnWidth","direction","sx","alignItems","style","width","titleAccess","color","marginRight","whiteSpace","overflow","strong","resource","serviceName","name"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,EAAEC,KAAK,QAAQ,gBAAgB;AAC3C,OAAOC,eAAe,qCAAqC;AAE3D,SAASC,YAAY,QAAQ,WAAW;AAExC,SAASC,WAAW,QAAQ,gBAAgB;AAO5C;;CAEC,GACD,OAAO,SAASC,SAASC,KAAoB;IAC3C,MAAM,EAAEC,IAAI,EAAEC,eAAe,EAAE,GAAGF;IAElC,qBACE,MAACL;QAAMQ,WAAU;QAAMC,IAAI;YAAEC,YAAY;QAAS;QAAGC,OAAO;YAAEC,OAAO,GAAGL,kBAAkB,IAAI,CAAC,CAAC;QAAC;;0BAC/F,KAACJ;gBAAYG,MAAMA;;YAClBJ,aAAaI,uBAAS,KAACL;gBAAUY,aAAY;gBAAQC,OAAM;gBAAQL,IAAI;oBAAEM,aAAa;gBAAM;;0BAC7F,MAAChB;gBAAIU,IAAI;oBAAEO,YAAY;oBAAUC,UAAU;gBAAS;;kCAClD,MAACC;;4BAAQZ,KAAKa,QAAQ,CAACC,WAAW;4BAAC;;;oBAAU;oBAAEd,KAAKe,IAAI;;;;;AAIhE"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/SpanName.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Stack } from '@mui/material';\nimport AlertIcon from 'mdi-material-ui/AlertCircleOutline';\nimport { ReactElement } from 'react';\nimport { spanHasError } from '../utils';\nimport { Span } from '../trace';\nimport { CustomLinks } from '../../gantt-chart-model';\nimport { SpanIndents } from './SpanIndents';\nimport { SpanLinksButton } from './SpanLinksButton';\n\nexport interface SpanNameProps {\n  customLinks?: CustomLinks;\n  span: Span;\n  nameColumnWidth: number;\n}\n\n/**\n * SpanName renders the entire left column of a SpanRow, i.e. the hierarchy and the service and span name\n */\nexport function SpanName(props: SpanNameProps): ReactElement {\n  const { customLinks, span, nameColumnWidth } = props;\n\n  return (\n    <Stack direction=\"row\" sx={{ alignItems: 'center' }} style={{ width: `${nameColumnWidth * 100}%` }}>\n      <SpanIndents span={span} />\n      {spanHasError(span) && <AlertIcon titleAccess=\"error\" color=\"error\" sx={{ marginRight: '5px' }} />}\n      <Box sx={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>\n        <strong>{span.resource.serviceName}:</strong> {span.name}\n      </Box>\n      {customLinks && customLinks.links.span && span.links.length > 0 && (\n        <Box sx={{ marginLeft: 'auto', px: 1 }}>\n          <SpanLinksButton customLinks={customLinks} span={span} />\n        </Box>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Box","Stack","AlertIcon","spanHasError","SpanIndents","SpanLinksButton","SpanName","props","customLinks","span","nameColumnWidth","direction","sx","alignItems","style","width","titleAccess","color","marginRight","whiteSpace","overflow","strong","resource","serviceName","name","links","length","marginLeft","px"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,EAAEC,KAAK,QAAQ,gBAAgB;AAC3C,OAAOC,eAAe,qCAAqC;AAE3D,SAASC,YAAY,QAAQ,WAAW;AAGxC,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,SAASC,eAAe,QAAQ,oBAAoB;AAQpD;;CAEC,GACD,OAAO,SAASC,SAASC,KAAoB;IAC3C,MAAM,EAAEC,WAAW,EAAEC,IAAI,EAAEC,eAAe,EAAE,GAAGH;IAE/C,qBACE,MAACN;QAAMU,WAAU;QAAMC,IAAI;YAAEC,YAAY;QAAS;QAAGC,OAAO;YAAEC,OAAO,GAAGL,kBAAkB,IAAI,CAAC,CAAC;QAAC;;0BAC/F,KAACN;gBAAYK,MAAMA;;YAClBN,aAAaM,uBAAS,KAACP;gBAAUc,aAAY;gBAAQC,OAAM;gBAAQL,IAAI;oBAAEM,aAAa;gBAAM;;0BAC7F,MAAClB;gBAAIY,IAAI;oBAAEO,YAAY;oBAAUC,UAAU;gBAAS;;kCAClD,MAACC;;4BAAQZ,KAAKa,QAAQ,CAACC,WAAW;4BAAC;;;oBAAU;oBAAEd,KAAKe,IAAI;;;YAEzDhB,eAAeA,YAAYiB,KAAK,CAAChB,IAAI,IAAIA,KAAKgB,KAAK,CAACC,MAAM,GAAG,mBAC5D,KAAC1B;gBAAIY,IAAI;oBAAEe,YAAY;oBAAQC,IAAI;gBAAE;0BACnC,cAAA,KAACvB;oBAAgBG,aAAaA;oBAAaC,MAAMA;;;;;AAK3D"}

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

@@ -1 +1 @@
-{"version":3,"file":"draw.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/MiniGanttChart/draw.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAcvC,wBAAgB,SAAS,CACvB,GAAG,EAAE,wBAAwB,EAC7B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,kBAAkB,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,GACzC,IAAI,CAiCN"}
+{"version":3,"file":"draw.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/MiniGanttChart/draw.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAMvC,wBAAgB,SAAS,CACvB,GAAG,EAAE,wBAAwB,EAC7B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,kBAAkB,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,GACzC,IAAI,CAiCN"}

package/lib/TracingGanttChart/MiniGanttChart/draw.js

@@ -13,16 +13,9 @@
 import { minSpanWidthPx } from '../utils';
 const MIN_BAR_HEIGHT = 1;
 const MAX_BAR_HEIGHT = 7;
-function countSpans(span) {
-    let n = 1;
-    for (const childSpan of span.childSpans){
-        n += countSpans(childSpan);
-    }
-    return n;
-}
 export function drawSpans(ctx, width, height, trace, spanColorGenerator) {
     // calculate optimal height, enforce min and max bar height and finally round to an integer
-    const numSpans = trace.rootSpans.map(countSpans).reduce((acc, n)=>acc + n, 0);
+    const numSpans = trace.spanById.size;
     const barHeight = Math.round(Math.min(Math.max(height / numSpans, MIN_BAR_HEIGHT), MAX_BAR_HEIGHT));
     const traceDuration = trace.endTimeUnixMs - trace.startTimeUnixMs;
     const yChange = height / numSpans;

package/lib/TracingGanttChart/MiniGanttChart/draw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/MiniGanttChart/draw.ts"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Span, Trace } from '../trace';\nimport { minSpanWidthPx } from '../utils';\n\nconst MIN_BAR_HEIGHT = 1;\nconst MAX_BAR_HEIGHT = 7;\n\nfunction countSpans(span: Span): number {\n  let n = 1;\n  for (const childSpan of span.childSpans) {\n    n += countSpans(childSpan);\n  }\n  return n;\n}\n\nexport function drawSpans(\n  ctx: CanvasRenderingContext2D,\n  width: number,\n  height: number,\n  trace: Trace,\n  spanColorGenerator: (span: Span) => string\n): void {\n  // calculate optimal height, enforce min and max bar height and finally round to an integer\n  const numSpans = trace.rootSpans.map(countSpans).reduce((acc, n) => acc + n, 0);\n  const barHeight = Math.round(Math.min(Math.max(height / numSpans, MIN_BAR_HEIGHT), MAX_BAR_HEIGHT));\n\n  const traceDuration = trace.endTimeUnixMs - trace.startTimeUnixMs;\n  const yChange = height / numSpans;\n  let y = 0;\n\n  const drawSpan = (span: Span): void => {\n    const spanDuration = span.endTimeUnixMs - span.startTimeUnixMs;\n    const relativeDuration = spanDuration / traceDuration;\n    const relativeStart = (span.startTimeUnixMs - trace.startTimeUnixMs) / traceDuration;\n\n    ctx.fillStyle = spanColorGenerator(span);\n    ctx.beginPath();\n    ctx.rect(\n      Math.round(relativeStart * width),\n      Math.round(y),\n      Math.max(minSpanWidthPx, Math.round(relativeDuration * width)),\n      barHeight\n    );\n    ctx.fill();\n    y += yChange;\n\n    for (const childSpan of span.childSpans) {\n      drawSpan(childSpan);\n    }\n  };\n\n  for (const rootSpan of trace.rootSpans) {\n    drawSpan(rootSpan);\n  }\n}\n"],"names":["minSpanWidthPx","MIN_BAR_HEIGHT","MAX_BAR_HEIGHT","countSpans","span","n","childSpan","childSpans","drawSpans","ctx","width","height","trace","spanColorGenerator","numSpans","rootSpans","map","reduce","acc","barHeight","Math","round","min","max","traceDuration","endTimeUnixMs","startTimeUnixMs","yChange","y","drawSpan","spanDuration","relativeDuration","relativeStart","fillStyle","beginPath","rect","fill","rootSpan"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAASA,cAAc,QAAQ,WAAW;AAE1C,MAAMC,iBAAiB;AACvB,MAAMC,iBAAiB;AAEvB,SAASC,WAAWC,IAAU;IAC5B,IAAIC,IAAI;IACR,KAAK,MAAMC,aAAaF,KAAKG,UAAU,CAAE;QACvCF,KAAKF,WAAWG;IAClB;IACA,OAAOD;AACT;AAEA,OAAO,SAASG,UACdC,GAA6B,EAC7BC,KAAa,EACbC,MAAc,EACdC,KAAY,EACZC,kBAA0C;IAE1C,2FAA2F;IAC3F,MAAMC,WAAWF,MAAMG,SAAS,CAACC,GAAG,CAACb,YAAYc,MAAM,CAAC,CAACC,KAAKb,IAAMa,MAAMb,GAAG;IAC7E,MAAMc,YAAYC,KAAKC,KAAK,CAACD,KAAKE,GAAG,CAACF,KAAKG,GAAG,CAACZ,SAASG,UAAUb,iBAAiBC;IAEnF,MAAMsB,gBAAgBZ,MAAMa,aAAa,GAAGb,MAAMc,eAAe;IACjE,MAAMC,UAAUhB,SAASG;IACzB,IAAIc,IAAI;IAER,MAAMC,WAAW,CAACzB;QAChB,MAAM0B,eAAe1B,KAAKqB,aAAa,GAAGrB,KAAKsB,eAAe;QAC9D,MAAMK,mBAAmBD,eAAeN;QACxC,MAAMQ,gBAAgB,AAAC5B,CAAAA,KAAKsB,eAAe,GAAGd,MAAMc,eAAe,AAAD,IAAKF;QAEvEf,IAAIwB,SAAS,GAAGpB,mBAAmBT;QACnCK,IAAIyB,SAAS;QACbzB,IAAI0B,IAAI,CACNf,KAAKC,KAAK,CAACW,gBAAgBtB,QAC3BU,KAAKC,KAAK,CAACO,IACXR,KAAKG,GAAG,CAACvB,gBAAgBoB,KAAKC,KAAK,CAACU,mBAAmBrB,SACvDS;QAEFV,IAAI2B,IAAI;QACRR,KAAKD;QAEL,KAAK,MAAMrB,aAAaF,KAAKG,UAAU,CAAE;YACvCsB,SAASvB;QACX;IACF;IAEA,KAAK,MAAM+B,YAAYzB,MAAMG,SAAS,CAAE;QACtCc,SAASQ;IACX;AACF"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/MiniGanttChart/draw.ts"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Span, Trace } from '../trace';\nimport { minSpanWidthPx } from '../utils';\n\nconst MIN_BAR_HEIGHT = 1;\nconst MAX_BAR_HEIGHT = 7;\n\nexport function drawSpans(\n  ctx: CanvasRenderingContext2D,\n  width: number,\n  height: number,\n  trace: Trace,\n  spanColorGenerator: (span: Span) => string\n): void {\n  // calculate optimal height, enforce min and max bar height and finally round to an integer\n  const numSpans = trace.spanById.size;\n  const barHeight = Math.round(Math.min(Math.max(height / numSpans, MIN_BAR_HEIGHT), MAX_BAR_HEIGHT));\n\n  const traceDuration = trace.endTimeUnixMs - trace.startTimeUnixMs;\n  const yChange = height / numSpans;\n  let y = 0;\n\n  const drawSpan = (span: Span): void => {\n    const spanDuration = span.endTimeUnixMs - span.startTimeUnixMs;\n    const relativeDuration = spanDuration / traceDuration;\n    const relativeStart = (span.startTimeUnixMs - trace.startTimeUnixMs) / traceDuration;\n\n    ctx.fillStyle = spanColorGenerator(span);\n    ctx.beginPath();\n    ctx.rect(\n      Math.round(relativeStart * width),\n      Math.round(y),\n      Math.max(minSpanWidthPx, Math.round(relativeDuration * width)),\n      barHeight\n    );\n    ctx.fill();\n    y += yChange;\n\n    for (const childSpan of span.childSpans) {\n      drawSpan(childSpan);\n    }\n  };\n\n  for (const rootSpan of trace.rootSpans) {\n    drawSpan(rootSpan);\n  }\n}\n"],"names":["minSpanWidthPx","MIN_BAR_HEIGHT","MAX_BAR_HEIGHT","drawSpans","ctx","width","height","trace","spanColorGenerator","numSpans","spanById","size","barHeight","Math","round","min","max","traceDuration","endTimeUnixMs","startTimeUnixMs","yChange","y","drawSpan","span","spanDuration","relativeDuration","relativeStart","fillStyle","beginPath","rect","fill","childSpan","childSpans","rootSpan","rootSpans"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAASA,cAAc,QAAQ,WAAW;AAE1C,MAAMC,iBAAiB;AACvB,MAAMC,iBAAiB;AAEvB,OAAO,SAASC,UACdC,GAA6B,EAC7BC,KAAa,EACbC,MAAc,EACdC,KAAY,EACZC,kBAA0C;IAE1C,2FAA2F;IAC3F,MAAMC,WAAWF,MAAMG,QAAQ,CAACC,IAAI;IACpC,MAAMC,YAAYC,KAAKC,KAAK,CAACD,KAAKE,GAAG,CAACF,KAAKG,GAAG,CAACV,SAASG,UAAUR,iBAAiBC;IAEnF,MAAMe,gBAAgBV,MAAMW,aAAa,GAAGX,MAAMY,eAAe;IACjE,MAAMC,UAAUd,SAASG;IACzB,IAAIY,IAAI;IAER,MAAMC,WAAW,CAACC;QAChB,MAAMC,eAAeD,KAAKL,aAAa,GAAGK,KAAKJ,eAAe;QAC9D,MAAMM,mBAAmBD,eAAeP;QACxC,MAAMS,gBAAgB,AAACH,CAAAA,KAAKJ,eAAe,GAAGZ,MAAMY,eAAe,AAAD,IAAKF;QAEvEb,IAAIuB,SAAS,GAAGnB,mBAAmBe;QACnCnB,IAAIwB,SAAS;QACbxB,IAAIyB,IAAI,CACNhB,KAAKC,KAAK,CAACY,gBAAgBrB,QAC3BQ,KAAKC,KAAK,CAACO,IACXR,KAAKG,GAAG,CAAChB,gBAAgBa,KAAKC,KAAK,CAACW,mBAAmBpB,SACvDO;QAEFR,IAAI0B,IAAI;QACRT,KAAKD;QAEL,KAAK,MAAMW,aAAaR,KAAKS,UAAU,CAAE;YACvCV,SAASS;QACX;IACF;IAEA,KAAK,MAAME,YAAY1B,MAAM2B,SAAS,CAAE;QACtCZ,SAASW;IACX;AACF"}

package/lib/TracingGanttChart/TraceDetails.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { Trace } from './trace';
+export interface TraceDetailsProps {
+    trace: Trace;
+}
+export declare function TraceDetails(props: TraceDetailsProps): ReactElement;
+//# sourceMappingURL=TraceDetails.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TraceDetails.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/TraceDetails.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAahC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,KAAK,CAAC;CACd;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CA2BnE"}

package/lib/TracingGanttChart/TraceDetails.js

@@ -0,0 +1,90 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, Typography } from '@mui/material';
+import { useTimeZone } from '@perses-dev/components';
+import { formatDuration } from './utils';
+const DATE_FORMAT_OPTIONS = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    fractionalSecondDigits: 3,
+    timeZoneName: 'short'
+};
+export function TraceDetails(props) {
+    const { trace } = props;
+    const { dateFormatOptionsWithUserTimeZone } = useTimeZone();
+    const dateFormatOptions = dateFormatOptionsWithUserTimeZone(DATE_FORMAT_OPTIONS);
+    const dateFormatter = new Intl.DateTimeFormat(undefined, dateFormatOptions);
+    const rootSpan = trace.rootSpans[0];
+    if (!rootSpan) {
+        return /*#__PURE__*/ _jsx(Typography, {
+            children: "Trace contains no spans."
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        sx: {
+            justifyContent: 'space-between'
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Typography, {
+                variant: "h3",
+                children: [
+                    rootSpan.resource.serviceName,
+                    ": ",
+                    rootSpan.name,
+                    " (",
+                    formatDuration(trace.endTimeUnixMs - trace.startTimeUnixMs),
+                    ")"
+                ]
+            }),
+            /*#__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
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=TraceDetails.js.map

package/lib/TracingGanttChart/TraceDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/TracingGanttChart/TraceDetails.tsx"],"sourcesContent":["// Copyright 2025 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 { Stack, Typography } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { useTimeZone } from '@perses-dev/components';\nimport { formatDuration } from './utils';\nimport { Trace } from './trace';\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 TraceDetailsProps {\n  trace: Trace;\n}\n\nexport function TraceDetails(props: TraceDetailsProps): ReactElement {\n  const { trace } = props;\n\n  const { dateFormatOptionsWithUserTimeZone } = useTimeZone();\n  const dateFormatOptions = dateFormatOptionsWithUserTimeZone(DATE_FORMAT_OPTIONS);\n  const dateFormatter = new Intl.DateTimeFormat(undefined, dateFormatOptions);\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=\"row\" sx={{ justifyContent: 'space-between' }}>\n      <Typography variant=\"h3\">\n        {rootSpan.resource.serviceName}: {rootSpan.name} ({formatDuration(trace.endTimeUnixMs - trace.startTimeUnixMs)})\n      </Typography>\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  );\n}\n"],"names":["Stack","Typography","useTimeZone","formatDuration","DATE_FORMAT_OPTIONS","year","month","day","hour","minute","second","fractionalSecondDigits","timeZoneName","TraceDetails","props","trace","dateFormatOptionsWithUserTimeZone","dateFormatOptions","dateFormatter","Intl","DateTimeFormat","undefined","rootSpan","rootSpans","direction","sx","justifyContent","variant","resource","serviceName","name","endTimeUnixMs","startTimeUnixMs","component","px","strong","format","traceId"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAElD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,cAAc,QAAQ,UAAU;AAGzC,MAAMC,sBAAkD;IACtDC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,MAAM;IACNC,QAAQ;IACRC,QAAQ;IACRC,wBAAwB;IACxBC,cAAc;AAChB;AAMA,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,KAAK,EAAE,GAAGD;IAElB,MAAM,EAAEE,iCAAiC,EAAE,GAAGd;IAC9C,MAAMe,oBAAoBD,kCAAkCZ;IAC5D,MAAMc,gBAAgB,IAAIC,KAAKC,cAAc,CAACC,WAAWJ;IAEzD,MAAMK,WAAWP,MAAMQ,SAAS,CAAC,EAAE;IACnC,IAAI,CAACD,UAAU;QACb,qBAAO,KAACrB;sBAAW;;IACrB;IAEA,qBACE,MAACD;QAAMwB,WAAU;QAAMC,IAAI;YAAEC,gBAAgB;QAAgB;;0BAC3D,MAACzB;gBAAW0B,SAAQ;;oBACjBL,SAASM,QAAQ,CAACC,WAAW;oBAAC;oBAAGP,SAASQ,IAAI;oBAAC;oBAAG3B,eAAeY,MAAMgB,aAAa,GAAGhB,MAAMiB,eAAe;oBAAE;;;0BAEjH,MAAC/B;gBAAW0B,SAAQ;;kCAClB,MAAC1B;wBAAWgC,WAAU;wBAAOR,IAAI;4BAAES,IAAI;wBAAE;;0CACvC,KAACC;0CAAO;;4BAAe;4BAAEjB,cAAckB,MAAM,CAACrB,MAAMiB,eAAe;;;kCAErE,MAAC/B;wBAAWgC,WAAU;wBAAOR,IAAI;4BAAES,IAAI;wBAAE;;0CACvC,KAACC;0CAAO;;4BAAkB;4BAAEb,SAASe,OAAO;;;;;;;AAKtD"}

package/lib/TracingGanttChart/TracingGanttChart.d.ts

@@ -1,10 +1,9 @@
 import { ReactElement } from 'react';
 import { otlptracev1 } from '@perses-dev/core';
-import { TracingGanttChartOptions } from '../gantt-chart-model';
-import { AttributeLinks } from './DetailPane/Attributes';
+import { CustomLinks, TracingGanttChartOptions } from '../gantt-chart-model';
 export interface TracingGanttChartProps {
     options: TracingGanttChartOptions;
-    attributeLinks?: AttributeLinks;
+    customLinks?: CustomLinks;
     trace: otlptracev1.TracesData;
 }
 /**

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,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAOhE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGzD,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,wBAAwB,CAAC;IAClC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC;CAC/B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CAoD7E"}
+{"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"}

package/lib/TracingGanttChart/TracingGanttChart.js

@@ -19,13 +19,14 @@ import { GanttTable } from './GanttTable/GanttTable';
 import { GanttTableProvider } from './GanttTable/GanttTableProvider';
 import { ResizableDivider } from './GanttTable/ResizableDivider';
 import { getTraceModel } from './trace';
+import { TraceDetails } from './TraceDetails';
 /**
  * The core GanttChart panel for Perses.
  *
  * The UI/UX of this panel is based on Jaeger UI, licensed under Apache License, Version 2.0.
  * https://github.com/jaegertracing/jaeger-ui
  */ export function TracingGanttChart(props) {
-    const { options, attributeLinks, trace: otlpTrace } = props;
+    const { options, customLinks, trace: otlpTrace } = props;
     const theme = useTheme();
     const trace = useMemo(()=>{
         try {
@@ -40,7 +41,7 @@ import { getTraceModel } from './trace';
         startTimeUnixMs: trace.startTimeUnixMs,
         endTimeUnixMs: trace.endTimeUnixMs
     });
-    const [selectedSpan, setSelectedSpan] = useState(undefined);
+    const [selectedSpan, setSelectedSpan] = useState(()=>options.selectedSpanId ? trace.spanById.get(options.selectedSpanId) : undefined);
     const ganttChart = useRef(null);
     // tableWidth only comes to effect if the detail pane is visible.
     // setTableWidth() is only called by <ResizableDivider />
@@ -61,6 +62,9 @@ import { getTraceModel } from './trace';
                     gap
                 },
                 children: [
+                    /*#__PURE__*/ _jsx(TraceDetails, {
+                        trace: trace
+                    }),
                     /*#__PURE__*/ _jsx(MiniGanttChart, {
                         options: options,
                         trace: trace,
@@ -70,6 +74,7 @@ import { getTraceModel } from './trace';
                     /*#__PURE__*/ _jsx(GanttTableProvider, {
                         children: /*#__PURE__*/ _jsx(GanttTable, {
                             options: options,
+                            customLinks: customLinks,
                             trace: trace,
                             viewport: viewport,
                             selectedSpan: selectedSpan,
@@ -91,7 +96,7 @@ import { getTraceModel } from './trace';
                             overflow: 'auto'
                         },
                         children: /*#__PURE__*/ _jsx(DetailPane, {
-                            attributeLinks: attributeLinks,
+                            customLinks: customLinks,
                             trace: trace,
                             span: selectedSpan,
                             onCloseBtnClick: ()=>setSelectedSpan(undefined)

package/lib/TracingGanttChart/TracingGanttChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/TracingGanttChart/TracingGanttChart.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { Box, Stack, useTheme } from '@mui/material';\nimport { otlptracev1 } from '@perses-dev/core';\nimport { 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 { AttributeLinks } from './DetailPane/Attributes';\nimport { getTraceModel, Span } from './trace';\n\nexport interface TracingGanttChartProps {\n  options: TracingGanttChartOptions;\n  attributeLinks?: AttributeLinks;\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, attributeLinks, 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>(undefined);\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        <MiniGanttChart options={options} trace={trace} viewport={viewport} setViewport={setViewport} />\n        <GanttTableProvider>\n          <GanttTable\n            options={options}\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 sx={{ width: `${(1 - tableWidth) * 100}%`, overflow: 'auto' }}>\n            <DetailPane\n              attributeLinks={attributeLinks}\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","TracingGanttChart","props","options","attributeLinks","trace","otlpTrace","theme","e","Error","viewport","setViewport","startTimeUnixMs","endTimeUnixMs","selectedSpan","setSelectedSpan","undefined","ganttChart","tableWidth","setTableWidth","gap","ref","direction","sx","height","minHeight","flexGrow","onSpanClick","parentRef","spacing","parseInt","onMove","width","overflow","span","onCloseBtnClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;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;AAEjE,SAASC,aAAa,QAAc,UAAU;AAQ9C;;;;;CAKC,GACD,OAAO,SAASC,kBAAkBC,KAA6B;IAC7D,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,OAAOC,SAAS,EAAE,GAAGJ;IAEtD,MAAMK,QAAQb;IACd,MAAMW,QAAQhB,QAAQ;QACpB,IAAI;YACF,OAAOW,cAAcM;QACvB,EAAE,OAAOE,GAAG;YACV,MAAM,IAAIC,MAAM,CAAC,8BAA8B,EAAED,GAAG;QACtD;IACF,GAAG;QAACF;KAAU;IACd,MAAM,CAACI,UAAUC,YAAY,GAAGpB,SAAmB;QACjDqB,iBAAiBP,MAAMO,eAAe;QACtCC,eAAeR,MAAMQ,aAAa;IACpC;IACA,MAAM,CAACC,cAAcC,gBAAgB,GAAGxB,SAA2ByB;IAEnE,MAAMC,aAAa3B,OAAuB;IAC1C,iEAAiE;IACjE,yDAAyD;IACzD,MAAM,CAAC4B,YAAYC,cAAc,GAAG5B,SAAiB;IACrD,MAAM6B,MAAM;IAEZ,qBACE,MAAC3B;QAAM4B,KAAKJ;QAAYK,WAAU;QAAMC,IAAI;YAAEC,QAAQ;YAAQC,WAAW;YAASL;QAAI;;0BACpF,MAAC3B;gBAAM8B,IAAI;oBAAEG,UAAU;oBAAGN;gBAAI;;kCAC5B,KAACzB;wBAAeQ,SAASA;wBAASE,OAAOA;wBAAOK,UAAUA;wBAAUC,aAAaA;;kCACjF,KAACb;kCACC,cAAA,KAACD;4BACCM,SAASA;4BACTE,OAAOA;4BACPK,UAAUA;4BACVI,cAAcA;4BACda,aAAaZ;;;;;YAIlBD,8BACC;;kCACE,KAACf;wBAAiB6B,WAAWX;wBAAYY,SAASC,SAASvB,MAAMsB,OAAO,CAACT;wBAAOW,QAAQZ;;kCACxF,KAAC3B;wBAAI+B,IAAI;4BAAES,OAAO,GAAG,AAAC,CAAA,IAAId,UAAS,IAAK,IAAI,CAAC,CAAC;4BAAEe,UAAU;wBAAO;kCAC/D,cAAA,KAACrC;4BACCQ,gBAAgBA;4BAChBC,OAAOA;4BACP6B,MAAMpB;4BACNqB,iBAAiB,IAAMpB,gBAAgBC;;;;;;;AAOrD"}
+{"version":3,"sources":["../../../src/TracingGanttChart/TracingGanttChart.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { 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 sx={{ width: `${(1 - tableWidth) * 100}%`, 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","width","overflow","span","onCloseBtnClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;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;wBAAImC,IAAI;4BAAES,OAAO,GAAG,AAAC,CAAA,IAAId,UAAS,IAAK,IAAI,CAAC,CAAC;4BAAEe,UAAU;wBAAO;kCAC/D,cAAA,KAACzC;4BACCS,aAAaA;4BACbC,OAAOA;4BACPgC,MAAMvB;4BACNwB,iBAAiB,IAAMvB,gBAAgBI;;;;;;;AAOrD"}