@perses-dev/tracing-gantt-chart-plugin 0.6.0

package/lib/TracingGanttChart/GanttTable/GanttTableRow.js

@@ -0,0 +1,56 @@
+// Copyright 2024 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, styled, useTheme } from '@mui/material';
+import { memo } from 'react';
+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 theme = useTheme();
+    const handleOnClick = ()=>{
+        // ignore event if triggered by selecting text
+        if (document.getSelection()?.type === 'Range') return;
+        onClick(span);
+    };
+    return /*#__PURE__*/ _jsxs(RowContainer, {
+        sx: {
+            backgroundColor: selected ? theme.palette.action.selected : 'inherit'
+        },
+        direction: "row",
+        onClick: handleOnClick,
+        children: [
+            /*#__PURE__*/ _jsx(SpanName, {
+                span: span,
+                nameColumnWidth: nameColumnWidth
+            }),
+            divider,
+            /*#__PURE__*/ _jsx(SpanDuration, {
+                options: options,
+                span: span,
+                viewport: viewport
+            })
+        ]
+    });
+});
+const RowContainer = styled(Stack)(({ theme })=>({
+        height: rowHeight,
+        '&:hover': {
+            backgroundColor: theme.palette.action.hover,
+            borderTop: `1px solid ${theme.palette.divider}`,
+            borderBottom: `1px solid ${theme.palette.divider}`
+        }
+    }));
+
+//# sourceMappingURL=GanttTableRow.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+interface ResizableDividerProps {
+    parentRef: React.RefObject<Element>;
+    spacing?: number;
+    onMove: (left: number) => void;
+}
+export declare function ResizableDivider(props: ResizableDividerProps): ReactElement;
+export {};
+//# sourceMappingURL=ResizableDivider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResizableDivider.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/GanttTable/ResizableDivider.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAiC,YAAY,EAAuB,MAAM,OAAO,CAAC;AAIzF,UAAU,qBAAqB;IAC7B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAuD3E"}

package/lib/TracingGanttChart/GanttTable/ResizableDivider.js

@@ -0,0 +1,86 @@
+// Copyright 2024 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 } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Box, styled } from '@mui/material';
+import { useEvent } from '@perses-dev/core';
+export function ResizableDivider(props) {
+    const { parentRef, spacing = 0, onMove } = props;
+    const [isResizing, setResizing] = useState(false);
+    const handleMouseDown = (e)=>{
+        // disable any default actions (text selection, etc.)
+        e.preventDefault();
+        setResizing(true);
+    };
+    // need stable reference for window.removeEventListener() in useEffect() below
+    const handleMouseMove = useEvent((e)=>{
+        if (!parentRef.current) return;
+        const offsetX = e.clientX - parentRef.current.getBoundingClientRect().left + spacing;
+        const leftPercent = offsetX / parentRef.current.getBoundingClientRect().width;
+        if (0.05 <= leftPercent && leftPercent <= 0.95) {
+            onMove(leftPercent);
+        }
+    });
+    // need stable reference for window.removeEventListener() in useEffect() below
+    const handleMouseUp = useEvent(()=>{
+        setResizing(false);
+    });
+    // capture mouseMove and mouseUp outside the element by attaching them to the window object
+    useEffect(()=>{
+        function startMouseAction() {
+            window.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mouseup', handleMouseUp);
+            document.body.style.cursor = 'col-resize';
+        }
+        function stopMouseAction() {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+            document.body.style.cursor = 'inherit';
+        }
+        if (isResizing) {
+            startMouseAction();
+        } else {
+            stopMouseAction();
+        }
+        return stopMouseAction;
+    }, [
+        isResizing,
+        handleMouseMove,
+        handleMouseUp
+    ]);
+    // prevent onClick event when clicking on a divider
+    const stopEventPropagation = (e)=>e.stopPropagation();
+    return /*#__PURE__*/ _jsx(ResizableDividerBox, {
+        onMouseDown: handleMouseDown,
+        onClick: stopEventPropagation
+    });
+}
+const ResizableDividerBox = styled(Box)(({ theme })=>({
+        position: 'relative',
+        width: '1px',
+        height: '100%',
+        backgroundColor: theme.palette.divider,
+        cursor: 'col-resize',
+        // increase clickable area from 1px to 7px
+        '&:before': {
+            position: 'absolute',
+            width: '7px',
+            left: '-3px',
+            top: 0,
+            bottom: 0,
+            content: '" "',
+            zIndex: 1
+        }
+    }));
+
+//# sourceMappingURL=ResizableDivider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/ResizableDivider.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 { MouseEvent as ReactMouseEvent, ReactElement, useEffect, useState } from 'react';\nimport { Box, styled } from '@mui/material';\nimport { useEvent } from '@perses-dev/core';\n\ninterface ResizableDividerProps {\n  parentRef: React.RefObject<Element>;\n  spacing?: number;\n  onMove: (left: number) => void;\n}\n\nexport function ResizableDivider(props: ResizableDividerProps): ReactElement {\n  const { parentRef, spacing = 0, onMove } = props;\n  const [isResizing, setResizing] = useState(false);\n\n  const handleMouseDown = (e: ReactMouseEvent): void => {\n    // disable any default actions (text selection, etc.)\n    e.preventDefault();\n\n    setResizing(true);\n  };\n\n  // need stable reference for window.removeEventListener() in useEffect() below\n  const handleMouseMove = useEvent((e: MouseEvent) => {\n    if (!parentRef.current) return;\n\n    const offsetX = e.clientX - parentRef.current.getBoundingClientRect().left + spacing;\n    const leftPercent = offsetX / parentRef.current.getBoundingClientRect().width;\n\n    if (0.05 <= leftPercent && leftPercent <= 0.95) {\n      onMove(leftPercent);\n    }\n  });\n\n  // need stable reference for window.removeEventListener() in useEffect() below\n  const handleMouseUp = useEvent(() => {\n    setResizing(false);\n  });\n\n  // capture mouseMove and mouseUp outside the element by attaching them to the window object\n  useEffect(() => {\n    function startMouseAction(): void {\n      window.addEventListener('mousemove', handleMouseMove);\n      window.addEventListener('mouseup', handleMouseUp);\n      document.body.style.cursor = 'col-resize';\n    }\n\n    function stopMouseAction(): void {\n      window.removeEventListener('mousemove', handleMouseMove);\n      window.removeEventListener('mouseup', handleMouseUp);\n      document.body.style.cursor = 'inherit';\n    }\n\n    if (isResizing) {\n      startMouseAction();\n    } else {\n      stopMouseAction();\n    }\n\n    return stopMouseAction;\n  }, [isResizing, handleMouseMove, handleMouseUp]);\n\n  // prevent onClick event when clicking on a divider\n  const stopEventPropagation = (e: ReactMouseEvent): void => e.stopPropagation();\n\n  return <ResizableDividerBox onMouseDown={handleMouseDown} onClick={stopEventPropagation} />;\n}\n\nconst ResizableDividerBox = styled(Box)(({ theme }) => ({\n  position: 'relative',\n  width: '1px',\n  height: '100%',\n  backgroundColor: theme.palette.divider,\n  cursor: 'col-resize',\n\n  // increase clickable area from 1px to 7px\n  '&:before': {\n    position: 'absolute',\n    width: '7px',\n    left: '-3px',\n    top: 0,\n    bottom: 0,\n    content: '\" \"',\n    zIndex: 1, // without zIndex, the span duration row hides the right side of this element\n  },\n}));\n"],"names":["useEffect","useState","Box","styled","useEvent","ResizableDivider","props","parentRef","spacing","onMove","isResizing","setResizing","handleMouseDown","e","preventDefault","handleMouseMove","current","offsetX","clientX","getBoundingClientRect","left","leftPercent","width","handleMouseUp","startMouseAction","window","addEventListener","document","body","style","cursor","stopMouseAction","removeEventListener","stopEventPropagation","stopPropagation","ResizableDividerBox","onMouseDown","onClick","theme","position","height","backgroundColor","palette","divider","top","bottom","content","zIndex"],"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,SAAsDA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AACzF,SAASC,GAAG,EAAEC,MAAM,QAAQ,gBAAgB;AAC5C,SAASC,QAAQ,QAAQ,mBAAmB;AAQ5C,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EAAEC,SAAS,EAAEC,UAAU,CAAC,EAAEC,MAAM,EAAE,GAAGH;IAC3C,MAAM,CAACI,YAAYC,YAAY,GAAGV,SAAS;IAE3C,MAAMW,kBAAkB,CAACC;QACvB,qDAAqD;QACrDA,EAAEC,cAAc;QAEhBH,YAAY;IACd;IAEA,8EAA8E;IAC9E,MAAMI,kBAAkBX,SAAS,CAACS;QAChC,IAAI,CAACN,UAAUS,OAAO,EAAE;QAExB,MAAMC,UAAUJ,EAAEK,OAAO,GAAGX,UAAUS,OAAO,CAACG,qBAAqB,GAAGC,IAAI,GAAGZ;QAC7E,MAAMa,cAAcJ,UAAUV,UAAUS,OAAO,CAACG,qBAAqB,GAAGG,KAAK;QAE7E,IAAI,QAAQD,eAAeA,eAAe,MAAM;YAC9CZ,OAAOY;QACT;IACF;IAEA,8EAA8E;IAC9E,MAAME,gBAAgBnB,SAAS;QAC7BO,YAAY;IACd;IAEA,2FAA2F;IAC3FX,UAAU;QACR,SAASwB;YACPC,OAAOC,gBAAgB,CAAC,aAAaX;YACrCU,OAAOC,gBAAgB,CAAC,WAAWH;YACnCI,SAASC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG;QAC/B;QAEA,SAASC;YACPN,OAAOO,mBAAmB,CAAC,aAAajB;YACxCU,OAAOO,mBAAmB,CAAC,WAAWT;YACtCI,SAASC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG;QAC/B;QAEA,IAAIpB,YAAY;YACdc;QACF,OAAO;YACLO;QACF;QAEA,OAAOA;IACT,GAAG;QAACrB;QAAYK;QAAiBQ;KAAc;IAE/C,mDAAmD;IACnD,MAAMU,uBAAuB,CAACpB,IAA6BA,EAAEqB,eAAe;IAE5E,qBAAO,KAACC;QAAoBC,aAAaxB;QAAiByB,SAASJ;;AACrE;AAEA,MAAME,sBAAsBhC,OAAOD,KAAK,CAAC,EAAEoC,KAAK,EAAE,GAAM,CAAA;QACtDC,UAAU;QACVjB,OAAO;QACPkB,QAAQ;QACRC,iBAAiBH,MAAMI,OAAO,CAACC,OAAO;QACtCb,QAAQ;QAER,0CAA0C;QAC1C,YAAY;YACVS,UAAU;YACVjB,OAAO;YACPF,MAAM;YACNwB,KAAK;YACLC,QAAQ;YACRC,SAAS;YACTC,QAAQ;QACV;IACF,CAAA"}

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

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { Viewport } from '../utils';
+import { TracingGanttChartOptions } from '../../gantt-chart-model';
+import { Span } from '../trace';
+export interface SpanDurationProps {
+    options: TracingGanttChartOptions;
+    span: Span;
+    viewport: Viewport;
+}
+/**
+ * SpanDuration renders the right column of a SpanRow, i.e. the span bar and span duration
+ */
+export declare function SpanDuration(props: SpanDurationProps): ReactElement;
+//# sourceMappingURL=SpanDuration.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpanDuration.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/GanttTable/SpanDuration.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAgD,MAAM,UAAU,CAAC;AAElF,OAAO,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,wBAAwB,CAAC;IAClC,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAuDnE"}

package/lib/TracingGanttChart/GanttTable/SpanDuration.js

@@ -0,0 +1,75 @@
+// Copyright 2024 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 { Box, useTheme } from '@mui/material';
+import { useChartsTheme } from '@perses-dev/components';
+import { formatDuration, getSpanColor, minSpanWidthPx } from '../utils';
+import { Ticks } from '../Ticks';
+/**
+ * SpanDuration renders the right column of a SpanRow, i.e. the span bar and span duration
+ */ export function SpanDuration(props) {
+    const { options, span, viewport } = props;
+    const muiTheme = useTheme();
+    const chartsTheme = useChartsTheme();
+    const spanDuration = span.endTimeUnixMs - span.startTimeUnixMs;
+    const viewportDuration = viewport.endTimeUnixMs - viewport.startTimeUnixMs;
+    const relativeDuration = spanDuration / viewportDuration;
+    const relativeStart = (span.startTimeUnixMs - viewport.startTimeUnixMs) / viewportDuration;
+    return /*#__PURE__*/ _jsxs(Box, {
+        sx: {
+            position: 'relative',
+            height: '100%',
+            flexGrow: 1,
+            overflow: 'hidden'
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Ticks, {}),
+            /*#__PURE__*/ _jsx(Box, {
+                "data-testid": "span-duration-bar",
+                sx: {
+                    position: 'absolute',
+                    top: 0,
+                    bottom: 0,
+                    margin: 'auto',
+                    minWidth: `${minSpanWidthPx}px`,
+                    height: '8px',
+                    borderRadius: muiTheme.shape.borderRadius
+                },
+                style: {
+                    left: `${relativeStart * 100}%`,
+                    width: `${relativeDuration * 100}%`,
+                    backgroundColor: getSpanColor(muiTheme, chartsTheme, options.visual?.palette?.mode, span)
+                }
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    position: 'absolute',
+                    top: '50%',
+                    transform: 'translateY(-50%)',
+                    padding: '0 8px',
+                    color: muiTheme.palette.grey[700],
+                    fontSize: '.7rem'
+                },
+                style: /* print span duration on right side of the span bar, if there is space */ relativeStart + relativeDuration < 0.95 ? {
+                    left: `${(relativeStart + relativeDuration) * 100}%`
+                } : {
+                    left: `${relativeStart * 100}%`,
+                    transform: 'translateY(-50%) translateX(-100%)'
+                },
+                children: formatDuration(spanDuration)
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=SpanDuration.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/SpanDuration.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, useTheme } from '@mui/material';\nimport { useChartsTheme } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { Viewport, formatDuration, getSpanColor, minSpanWidthPx } from '../utils';\nimport { Ticks } from '../Ticks';\nimport { TracingGanttChartOptions } from '../../gantt-chart-model';\nimport { Span } from '../trace';\n\nexport interface SpanDurationProps {\n  options: TracingGanttChartOptions;\n  span: Span;\n  viewport: Viewport;\n}\n\n/**\n * SpanDuration renders the right column of a SpanRow, i.e. the span bar and span duration\n */\nexport function SpanDuration(props: SpanDurationProps): ReactElement {\n  const { options, span, viewport } = props;\n  const muiTheme = useTheme();\n  const chartsTheme = useChartsTheme();\n\n  const spanDuration = span.endTimeUnixMs - span.startTimeUnixMs;\n  const viewportDuration = viewport.endTimeUnixMs - viewport.startTimeUnixMs;\n  const relativeDuration = spanDuration / viewportDuration;\n  const relativeStart = (span.startTimeUnixMs - viewport.startTimeUnixMs) / viewportDuration;\n\n  return (\n    <Box sx={{ position: 'relative', height: '100%', flexGrow: 1, overflow: 'hidden' }}>\n      <Ticks />\n      <Box\n        data-testid=\"span-duration-bar\"\n        sx={{\n          position: 'absolute',\n          top: 0,\n          bottom: 0,\n          margin: 'auto',\n          minWidth: `${minSpanWidthPx}px`,\n          height: '8px',\n          borderRadius: muiTheme.shape.borderRadius,\n        }}\n        style={{\n          left: `${relativeStart * 100}%`,\n          width: `${relativeDuration * 100}%`,\n          backgroundColor: getSpanColor(muiTheme, chartsTheme, options.visual?.palette?.mode, span),\n        }}\n      />\n      <Box\n        sx={{\n          position: 'absolute',\n          top: '50%',\n          transform: 'translateY(-50%)',\n          padding: '0 8px',\n          color: muiTheme.palette.grey[700],\n          fontSize: '.7rem',\n        }}\n        style={\n          /* print span duration on right side of the span bar, if there is space */\n          relativeStart + relativeDuration < 0.95\n            ? {\n                left: `${(relativeStart + relativeDuration) * 100}%`,\n              }\n            : {\n                left: `${relativeStart * 100}%`,\n                transform: 'translateY(-50%) translateX(-100%)',\n              }\n        }\n      >\n        {formatDuration(spanDuration)}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["Box","useTheme","useChartsTheme","formatDuration","getSpanColor","minSpanWidthPx","Ticks","SpanDuration","props","options","span","viewport","muiTheme","chartsTheme","spanDuration","endTimeUnixMs","startTimeUnixMs","viewportDuration","relativeDuration","relativeStart","sx","position","height","flexGrow","overflow","data-testid","top","bottom","margin","minWidth","borderRadius","shape","style","left","width","backgroundColor","visual","palette","mode","transform","padding","color","grey","fontSize"],"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,QAAQ,QAAQ,gBAAgB;AAC9C,SAASC,cAAc,QAAQ,yBAAyB;AAExD,SAAmBC,cAAc,EAAEC,YAAY,EAAEC,cAAc,QAAQ,WAAW;AAClF,SAASC,KAAK,QAAQ,WAAW;AAUjC;;CAEC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGH;IACpC,MAAMI,WAAWX;IACjB,MAAMY,cAAcX;IAEpB,MAAMY,eAAeJ,KAAKK,aAAa,GAAGL,KAAKM,eAAe;IAC9D,MAAMC,mBAAmBN,SAASI,aAAa,GAAGJ,SAASK,eAAe;IAC1E,MAAME,mBAAmBJ,eAAeG;IACxC,MAAME,gBAAgB,AAACT,CAAAA,KAAKM,eAAe,GAAGL,SAASK,eAAe,AAAD,IAAKC;IAE1E,qBACE,MAACjB;QAAIoB,IAAI;YAAEC,UAAU;YAAYC,QAAQ;YAAQC,UAAU;YAAGC,UAAU;QAAS;;0BAC/E,KAAClB;0BACD,KAACN;gBACCyB,eAAY;gBACZL,IAAI;oBACFC,UAAU;oBACVK,KAAK;oBACLC,QAAQ;oBACRC,QAAQ;oBACRC,UAAU,GAAGxB,eAAe,EAAE,CAAC;oBAC/BiB,QAAQ;oBACRQ,cAAclB,SAASmB,KAAK,CAACD,YAAY;gBAC3C;gBACAE,OAAO;oBACLC,MAAM,GAAGd,gBAAgB,IAAI,CAAC,CAAC;oBAC/Be,OAAO,GAAGhB,mBAAmB,IAAI,CAAC,CAAC;oBACnCiB,iBAAiB/B,aAAaQ,UAAUC,aAAaJ,QAAQ2B,MAAM,EAAEC,SAASC,MAAM5B;gBACtF;;0BAEF,KAACV;gBACCoB,IAAI;oBACFC,UAAU;oBACVK,KAAK;oBACLa,WAAW;oBACXC,SAAS;oBACTC,OAAO7B,SAASyB,OAAO,CAACK,IAAI,CAAC,IAAI;oBACjCC,UAAU;gBACZ;gBACAX,OACE,wEAAwE,GACxEb,gBAAgBD,mBAAmB,OAC/B;oBACEe,MAAM,GAAG,AAACd,CAAAA,gBAAgBD,gBAAe,IAAK,IAAI,CAAC,CAAC;gBACtD,IACA;oBACEe,MAAM,GAAGd,gBAAgB,IAAI,CAAC,CAAC;oBAC/BoB,WAAW;gBACb;0BAGLpC,eAAeW;;;;AAIxB"}

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

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { Span } from '../trace';
+export interface SpanIndentsProps {
+    span: Span;
+}
+/**
+ * SpanIndents renders the indention boxes,
+ * and handles the click and mouseOver events
+ *
+ * Note: This component gets re-rendered on every hover of any indention box,
+ * therefore rendering performance is essential.
+ */
+export declare function SpanIndents(props: SpanIndentsProps): ReactElement;
+//# sourceMappingURL=SpanIndents.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpanIndents.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/GanttTable/SpanIndents.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAc,YAAY,EAAe,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAMhC,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,IAAI,CAAC;CACZ;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAuDjE"}

package/lib/TracingGanttChart/GanttTable/SpanIndents.js

@@ -0,0 +1,90 @@
+// Copyright 2024 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, Fragment as _Fragment } from "react/jsx-runtime";
+import { styled, useTheme } from '@mui/material';
+import ChevronDownIcon from 'mdi-material-ui/ChevronDown';
+import ChevronRightIcon from 'mdi-material-ui/ChevronRight';
+import { useCallback } from 'react';
+import { useGanttTableContext } from './GanttTableProvider';
+const MIN_INDENT_WIDTH = 8;
+const MAX_INDENT_WIDTH = 24;
+/**
+ * SpanIndents renders the indention boxes,
+ * and handles the click and mouseOver events
+ *
+ * Note: This component gets re-rendered on every hover of any indention box,
+ * therefore rendering performance is essential.
+ */ export function SpanIndents(props) {
+    const { span } = props;
+    const { collapsedSpans, setCollapsedSpans, visibleSpans, hoveredParent, setHoveredParent } = useGanttTableContext();
+    const theme = useTheme();
+    const handleToggleClick = useCallback((e)=>{
+        e.stopPropagation();
+        if (collapsedSpans.includes(span.spanId)) {
+            setCollapsedSpans(collapsedSpans.filter((spanId)=>spanId !== span.spanId));
+        } else {
+            setCollapsedSpans([
+                ...collapsedSpans,
+                span.spanId
+            ]);
+        }
+    }, [
+        span,
+        collapsedSpans,
+        setCollapsedSpans
+    ]);
+    const handleIconMouseEnter = useCallback(()=>{
+        setHoveredParent(span.spanId);
+    }, [
+        span,
+        setHoveredParent
+    ]);
+    const spans = [
+        span
+    ];
+    let parent = span.parentSpan;
+    while(parent){
+        spans.unshift(parent);
+        parent = parent.parentSpan;
+    }
+    // on first render visibleSpans is empty, therefore let's use MAX_INDENT_WIDTH to avoid an animation on page load.
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: spans.map((span, i)=>/*#__PURE__*/ _jsx(SpanIndentBox, {
+                style: {
+                    width: i === spans.length - 1 || visibleSpans.length === 0 || visibleSpans.includes(span.spanId) ? MAX_INDENT_WIDTH : MIN_INDENT_WIDTH,
+                    borderLeft: `${hoveredParent === (span.parentSpanId ?? '') ? 3 : 1}px solid ${theme.palette.divider}`
+                },
+                onMouseEnter: ()=>setHoveredParent(span.parentSpanId ?? ''),
+                onMouseLeave: ()=>setHoveredParent(undefined),
+                children: i === spans.length - 1 && span.childSpans.length > 0 && (collapsedSpans.includes(span.spanId) ? /*#__PURE__*/ _jsx(ChevronRightIcon, {
+                    titleAccess: "expand",
+                    onClick: handleToggleClick,
+                    onMouseEnter: handleIconMouseEnter
+                }) : /*#__PURE__*/ _jsx(ChevronDownIcon, {
+                    titleAccess: "collapse",
+                    onClick: handleToggleClick,
+                    onMouseEnter: handleIconMouseEnter
+                }))
+            }, span.spanId))
+    });
+}
+const SpanIndentBox = styled('div')({
+    display: 'flex',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    flexShrink: 0,
+    transition: 'width 1s'
+});
+
+//# sourceMappingURL=SpanIndents.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/SpanIndents.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 { styled, useTheme } from '@mui/material';\nimport ChevronDownIcon from 'mdi-material-ui/ChevronDown';\nimport ChevronRightIcon from 'mdi-material-ui/ChevronRight';\nimport { MouseEvent, ReactElement, useCallback } from 'react';\nimport { Span } from '../trace';\nimport { useGanttTableContext } from './GanttTableProvider';\n\nconst MIN_INDENT_WIDTH = 8;\nconst MAX_INDENT_WIDTH = 24;\n\nexport interface SpanIndentsProps {\n  span: Span;\n}\n\n/**\n * SpanIndents renders the indention boxes,\n * and handles the click and mouseOver events\n *\n * Note: This component gets re-rendered on every hover of any indention box,\n * therefore rendering performance is essential.\n */\nexport function SpanIndents(props: SpanIndentsProps): ReactElement {\n  const { span } = props;\n  const { collapsedSpans, setCollapsedSpans, visibleSpans, hoveredParent, setHoveredParent } = useGanttTableContext();\n  const theme = useTheme();\n\n  const handleToggleClick = useCallback(\n    (e: MouseEvent) => {\n      e.stopPropagation();\n      if (collapsedSpans.includes(span.spanId)) {\n        setCollapsedSpans(collapsedSpans.filter((spanId) => spanId !== span.spanId));\n      } else {\n        setCollapsedSpans([...collapsedSpans, span.spanId]);\n      }\n    },\n    [span, collapsedSpans, setCollapsedSpans]\n  );\n\n  const handleIconMouseEnter = useCallback(() => {\n    setHoveredParent(span.spanId);\n  }, [span, setHoveredParent]);\n\n  const spans = [span];\n  let parent = span.parentSpan;\n  while (parent) {\n    spans.unshift(parent);\n    parent = parent.parentSpan;\n  }\n\n  // on first render visibleSpans is empty, therefore let's use MAX_INDENT_WIDTH to avoid an animation on page load.\n  return (\n    <>\n      {spans.map((span, i) => (\n        <SpanIndentBox\n          key={span.spanId}\n          style={{\n            width:\n              i === spans.length - 1 || visibleSpans.length === 0 || visibleSpans.includes(span.spanId)\n                ? MAX_INDENT_WIDTH\n                : MIN_INDENT_WIDTH,\n            borderLeft: `${hoveredParent === (span.parentSpanId ?? '') ? 3 : 1}px solid ${theme.palette.divider}`,\n          }}\n          onMouseEnter={() => setHoveredParent(span.parentSpanId ?? '')}\n          onMouseLeave={() => setHoveredParent(undefined)}\n        >\n          {i === spans.length - 1 &&\n            span.childSpans.length > 0 &&\n            (collapsedSpans.includes(span.spanId) ? (\n              <ChevronRightIcon titleAccess=\"expand\" onClick={handleToggleClick} onMouseEnter={handleIconMouseEnter} />\n            ) : (\n              <ChevronDownIcon titleAccess=\"collapse\" onClick={handleToggleClick} onMouseEnter={handleIconMouseEnter} />\n            ))}\n        </SpanIndentBox>\n      ))}\n    </>\n  );\n}\n\nconst SpanIndentBox = styled('div')({\n  display: 'flex',\n  height: '100%',\n  alignItems: 'center',\n  justifyContent: 'flex-end',\n  flexShrink: 0,\n  transition: 'width 1s',\n});\n"],"names":["styled","useTheme","ChevronDownIcon","ChevronRightIcon","useCallback","useGanttTableContext","MIN_INDENT_WIDTH","MAX_INDENT_WIDTH","SpanIndents","props","span","collapsedSpans","setCollapsedSpans","visibleSpans","hoveredParent","setHoveredParent","theme","handleToggleClick","e","stopPropagation","includes","spanId","filter","handleIconMouseEnter","spans","parent","parentSpan","unshift","map","i","SpanIndentBox","style","width","length","borderLeft","parentSpanId","palette","divider","onMouseEnter","onMouseLeave","undefined","childSpans","titleAccess","onClick","display","height","alignItems","justifyContent","flexShrink","transition"],"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,MAAM,EAAEC,QAAQ,QAAQ,gBAAgB;AACjD,OAAOC,qBAAqB,8BAA8B;AAC1D,OAAOC,sBAAsB,+BAA+B;AAC5D,SAAmCC,WAAW,QAAQ,QAAQ;AAE9D,SAASC,oBAAoB,QAAQ,uBAAuB;AAE5D,MAAMC,mBAAmB;AACzB,MAAMC,mBAAmB;AAMzB;;;;;;CAMC,GACD,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,MAAM,EAAEE,cAAc,EAAEC,iBAAiB,EAAEC,YAAY,EAAEC,aAAa,EAAEC,gBAAgB,EAAE,GAAGV;IAC7F,MAAMW,QAAQf;IAEd,MAAMgB,oBAAoBb,YACxB,CAACc;QACCA,EAAEC,eAAe;QACjB,IAAIR,eAAeS,QAAQ,CAACV,KAAKW,MAAM,GAAG;YACxCT,kBAAkBD,eAAeW,MAAM,CAAC,CAACD,SAAWA,WAAWX,KAAKW,MAAM;QAC5E,OAAO;YACLT,kBAAkB;mBAAID;gBAAgBD,KAAKW,MAAM;aAAC;QACpD;IACF,GACA;QAACX;QAAMC;QAAgBC;KAAkB;IAG3C,MAAMW,uBAAuBnB,YAAY;QACvCW,iBAAiBL,KAAKW,MAAM;IAC9B,GAAG;QAACX;QAAMK;KAAiB;IAE3B,MAAMS,QAAQ;QAACd;KAAK;IACpB,IAAIe,SAASf,KAAKgB,UAAU;IAC5B,MAAOD,OAAQ;QACbD,MAAMG,OAAO,CAACF;QACdA,SAASA,OAAOC,UAAU;IAC5B;IAEA,kHAAkH;IAClH,qBACE;kBACGF,MAAMI,GAAG,CAAC,CAAClB,MAAMmB,kBAChB,KAACC;gBAECC,OAAO;oBACLC,OACEH,MAAML,MAAMS,MAAM,GAAG,KAAKpB,aAAaoB,MAAM,KAAK,KAAKpB,aAAaO,QAAQ,CAACV,KAAKW,MAAM,IACpFd,mBACAD;oBACN4B,YAAY,GAAGpB,kBAAmBJ,CAAAA,KAAKyB,YAAY,IAAI,EAAC,IAAK,IAAI,EAAE,SAAS,EAAEnB,MAAMoB,OAAO,CAACC,OAAO,EAAE;gBACvG;gBACAC,cAAc,IAAMvB,iBAAiBL,KAAKyB,YAAY,IAAI;gBAC1DI,cAAc,IAAMxB,iBAAiByB;0BAEpCX,MAAML,MAAMS,MAAM,GAAG,KACpBvB,KAAK+B,UAAU,CAACR,MAAM,GAAG,KACxBtB,CAAAA,eAAeS,QAAQ,CAACV,KAAKW,MAAM,kBAClC,KAAClB;oBAAiBuC,aAAY;oBAASC,SAAS1B;oBAAmBqB,cAAcf;mCAEjF,KAACrB;oBAAgBwC,aAAY;oBAAWC,SAAS1B;oBAAmBqB,cAAcf;kBACpF;eAjBGb,KAAKW,MAAM;;AAsB1B;AAEA,MAAMS,gBAAgB9B,OAAO,OAAO;IAClC4C,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,gBAAgB;IAChBC,YAAY;IACZC,YAAY;AACd"}

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

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { Span } from '../trace';
+export interface SpanNameProps {
+    span: Span;
+    nameColumnWidth: number;
+}
+/**
+ * SpanName renders the entire left column of a SpanRow, i.e. the hierarchy and the service and span name
+ */
+export declare function SpanName(props: SpanNameProps): ReactElement;
+//# sourceMappingURL=SpanName.d.ts.map

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

@@ -0,0 +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"}

package/lib/TracingGanttChart/GanttTable/SpanName.js

@@ -0,0 +1,61 @@
+// Copyright 2024 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 { Box, Stack } from '@mui/material';
+import AlertIcon from 'mdi-material-ui/AlertCircleOutline';
+import { spanHasError } from '../utils';
+import { SpanIndents } from './SpanIndents';
+/**
+ * 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;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        sx: {
+            alignItems: 'center'
+        },
+        style: {
+            width: `${nameColumnWidth * 100}%`
+        },
+        children: [
+            /*#__PURE__*/ _jsx(SpanIndents, {
+                span: span
+            }),
+            spanHasError(span) && /*#__PURE__*/ _jsx(AlertIcon, {
+                titleAccess: "error",
+                color: "error",
+                sx: {
+                    marginRight: '5px'
+                }
+            }),
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("strong", {
+                        children: [
+                            span.resource.serviceName,
+                            ":"
+                        ]
+                    }),
+                    " ",
+                    span.name
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=SpanName.js.map

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

@@ -0,0 +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"}

package/lib/TracingGanttChart/MiniGanttChart/Canvas.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+import { Viewport } from '../utils';
+import { TracingGanttChartOptions } from '../../gantt-chart-model';
+import { Trace } from '../trace';
+interface CanvasProps {
+    options: TracingGanttChartOptions;
+    trace: Trace;
+    viewport: Viewport;
+    setViewport: (v: Viewport) => void;
+}
+export declare function Canvas(props: CanvasProps): ReactElement;
+export {};
+//# sourceMappingURL=Canvas.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/MiniGanttChart/Canvas.tsx"],"names":[],"mappings":"AAeA,OAAO,EAA2E,YAAY,EAAE,MAAM,OAAO,CAAC;AAI9G,OAAO,EAAgB,QAAQ,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAQ,KAAK,EAAE,MAAM,UAAU,CAAC;AAKvC,UAAU,WAAW;IACnB,OAAO,EAAE,wBAAwB,CAAC;IAClC,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,QAAQ,CAAC;IACnB,WAAW,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC;CACpC;AAOD,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,YAAY,CA2JvD"}