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

package/lib/TracingGanttChart/MiniGanttChart/Canvas.js

@@ -0,0 +1,243 @@
+// 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, styled, useTheme } from '@mui/material';
+import useResizeObserver from 'use-resize-observer';
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { useEvent } from '@perses-dev/core';
+import { useChartsTheme } from '@perses-dev/components';
+import { Ticks } from '../Ticks';
+import { getSpanColor } from '../utils';
+import { drawSpans } from './draw';
+const CANVAS_HEIGHT = 60;
+export function Canvas(props) {
+    const { options, trace, viewport, setViewport } = props;
+    const muiTheme = useTheme();
+    const chartsTheme = useChartsTheme();
+    // the <canvas> element must have an absolute width and height to avoid rendering problems
+    // the wrapper box is required to get the available dimensions for the <canvas> element
+    const { width, ref: wrapperRef } = useResizeObserver();
+    const height = CANVAS_HEIGHT;
+    const canvasRef = useRef(null);
+    const [mouseState, setMouseState] = useState({
+        type: 'none'
+    });
+    const traceDuration = trace.endTimeUnixMs - trace.startTimeUnixMs;
+    const relativeCutoffLeft = (viewport.startTimeUnixMs - trace.startTimeUnixMs) / traceDuration;
+    const relativeCutoffRight = (trace.endTimeUnixMs - viewport.endTimeUnixMs) / traceDuration;
+    const spanColorGenerator = useCallback((span)=>getSpanColor(muiTheme, chartsTheme, options.visual?.palette?.mode, span), [
+        muiTheme,
+        chartsTheme,
+        options.visual?.palette?.mode
+    ]);
+    useEffect(()=>{
+        if (!canvasRef.current || !width || !height) return;
+        const ctx = canvasRef.current.getContext('2d');
+        if (!ctx) return;
+        drawSpans(ctx, width, height, trace, spanColorGenerator);
+    }, [
+        width,
+        height,
+        trace,
+        spanColorGenerator
+    ]);
+    const translateCursorToTime = (e)=>{
+        if (!canvasRef.current || !width) return 0;
+        // e.nativeEvent.offsetX doesn't work when sliding over a tick box
+        const offsetX = e.clientX - canvasRef.current.getBoundingClientRect().left;
+        return trace.startTimeUnixMs + offsetX / width * traceDuration;
+    };
+    const handleMouseDown = (e)=>{
+        e.preventDefault();
+        if (!(e.target instanceof HTMLElement)) return;
+        const isDefaultViewport = viewport.startTimeUnixMs === trace.startTimeUnixMs && viewport.endTimeUnixMs === trace.endTimeUnixMs;
+        const elem = e.target.dataset['elem'];
+        const cursor = translateCursorToTime(e);
+        if (elem === 'resizerLeft') {
+            setMouseState({
+                type: 'resize',
+                fixedPoint: viewport.endTimeUnixMs
+            });
+        } else if (elem === 'resizerRight') {
+            setMouseState({
+                type: 'resize',
+                fixedPoint: viewport.startTimeUnixMs
+            });
+        } else if (elem === 'cutoffBox' || isDefaultViewport) {
+            setMouseState({
+                type: 'resize',
+                fixedPoint: cursor
+            });
+            setViewport({
+                startTimeUnixMs: cursor,
+                endTimeUnixMs: cursor
+            });
+        } else {
+            setMouseState({
+                type: 'drag',
+                start: cursor - viewport.startTimeUnixMs,
+                end: viewport.endTimeUnixMs - cursor
+            });
+        }
+    };
+    // need stable reference for window.removeEventListener() in useEffect() below
+    const handleMouseMove = useEvent((e)=>{
+        e.preventDefault();
+        switch(mouseState.type){
+            case 'none':
+                return;
+            case 'resize':
+                {
+                    const pointA = mouseState.fixedPoint;
+                    const pointB = translateCursorToTime(e);
+                    let start, end;
+                    if (pointA < pointB) {
+                        start = pointA;
+                        end = pointB;
+                    } else {
+                        start = pointB;
+                        end = pointA;
+                    }
+                    setViewport({
+                        startTimeUnixMs: Math.max(start, trace.startTimeUnixMs),
+                        endTimeUnixMs: Math.min(end, trace.endTimeUnixMs)
+                    });
+                    return;
+                }
+            case 'drag':
+                {
+                    // avoid using e.movementX here, as it skips events in chrome,
+                    // resulting in the mouse pointer moving faster than the viewport box
+                    const { start, end } = mouseState;
+                    let cursor = translateCursorToTime(e);
+                    if (cursor - start < trace.startTimeUnixMs) {
+                        cursor = trace.startTimeUnixMs + start;
+                    }
+                    if (cursor + end > trace.endTimeUnixMs) {
+                        cursor = trace.endTimeUnixMs - end;
+                    }
+                    setViewport({
+                        startTimeUnixMs: cursor - start,
+                        endTimeUnixMs: cursor + end
+                    });
+                    return;
+                }
+        }
+    });
+    // need stable reference for window.removeEventListener() in useEffect() below
+    const handleMouseUp = useEvent((e)=>{
+        e.preventDefault();
+        setMouseState({
+            type: 'none'
+        });
+        // reset viewport if start === end, i.e. a click without movement
+        if (viewport.startTimeUnixMs === viewport.endTimeUnixMs) {
+            setViewport({
+                startTimeUnixMs: trace.startTimeUnixMs,
+                endTimeUnixMs: trace.endTimeUnixMs
+            });
+        }
+    });
+    // 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 = mouseState.type === 'resize' ? 'col-resize' : 'move';
+        }
+        function stopMouseAction() {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+            document.body.style.cursor = 'inherit';
+        }
+        if (mouseState.type === 'none') {
+            stopMouseAction();
+        } else {
+            startMouseAction();
+        }
+        return stopMouseAction;
+    }, [
+        mouseState,
+        handleMouseMove,
+        handleMouseUp
+    ]);
+    return /*#__PURE__*/ _jsxs(Box, {
+        ref: wrapperRef,
+        sx: {
+            position: 'relative',
+            height
+        },
+        onMouseDown: handleMouseDown,
+        children: [
+            /*#__PURE__*/ _jsx("canvas", {
+                ref: canvasRef,
+                width: width,
+                height: height,
+                style: {
+                    position: 'absolute'
+                }
+            }),
+            /*#__PURE__*/ _jsx(Ticks, {}),
+            /*#__PURE__*/ _jsx(CutoffBox, {
+                "data-elem": "cutoffBox",
+                style: {
+                    left: 0,
+                    width: `${relativeCutoffLeft * 100}%`
+                }
+            }),
+            /*#__PURE__*/ _jsx(Resizer, {
+                "data-elem": "resizerLeft",
+                style: {
+                    left: `${relativeCutoffLeft * 100}%`
+                }
+            }),
+            /*#__PURE__*/ _jsx(Resizer, {
+                "data-elem": "resizerRight",
+                style: {
+                    right: `${relativeCutoffRight * 100}%`
+                }
+            }),
+            /*#__PURE__*/ _jsx(CutoffBox, {
+                "data-elem": "cutoffBox",
+                style: {
+                    right: 0,
+                    width: `${relativeCutoffRight * 100}%`
+                }
+            })
+        ]
+    });
+}
+const CutoffBox = styled(Box)({
+    position: 'absolute',
+    height: '100%',
+    backgroundColor: 'rgba(225, 225, 225, .5)'
+});
+const Resizer = styled(Box)(({ theme })=>({
+        position: 'absolute',
+        height: '100%',
+        backgroundColor: theme.palette.divider,
+        width: '2px',
+        cursor: 'col-resize',
+        // increase clickable area from 2px to 8px
+        '&:before': {
+            position: 'absolute',
+            width: '8px',
+            left: '-3px',
+            top: 0,
+            bottom: 0,
+            content: '" "',
+            zIndex: 1
+        }
+    }));
+
+//# sourceMappingURL=Canvas.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/TracingGanttChart/MiniGanttChart/Canvas.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, styled, useTheme } from '@mui/material';\nimport useResizeObserver from 'use-resize-observer';\nimport { useEffect, useRef, MouseEvent as ReactMouseEvent, useState, useCallback, ReactElement } from 'react';\nimport { useEvent } from '@perses-dev/core';\nimport { useChartsTheme } from '@perses-dev/components';\nimport { Ticks } from '../Ticks';\nimport { getSpanColor, Viewport } from '../utils';\nimport { TracingGanttChartOptions } from '../../gantt-chart-model';\nimport { Span, Trace } from '../trace';\nimport { drawSpans } from './draw';\n\nconst CANVAS_HEIGHT = 60;\n\ninterface CanvasProps {\n  options: TracingGanttChartOptions;\n  trace: Trace;\n  viewport: Viewport;\n  setViewport: (v: Viewport) => void;\n}\n\ntype MouseState =\n  | { type: 'none' }\n  | { type: 'resize'; fixedPoint: number }\n  | { type: 'drag'; start: number; end: number };\n\nexport function Canvas(props: CanvasProps): ReactElement {\n  const { options, trace, viewport, setViewport } = props;\n  const muiTheme = useTheme();\n  const chartsTheme = useChartsTheme();\n  // the <canvas> element must have an absolute width and height to avoid rendering problems\n  // the wrapper box is required to get the available dimensions for the <canvas> element\n  const { width, ref: wrapperRef } = useResizeObserver();\n  const height = CANVAS_HEIGHT;\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const [mouseState, setMouseState] = useState<MouseState>({ type: 'none' });\n\n  const traceDuration = trace.endTimeUnixMs - trace.startTimeUnixMs;\n  const relativeCutoffLeft = (viewport.startTimeUnixMs - trace.startTimeUnixMs) / traceDuration;\n  const relativeCutoffRight = (trace.endTimeUnixMs - viewport.endTimeUnixMs) / traceDuration;\n\n  const spanColorGenerator = useCallback(\n    (span: Span) => getSpanColor(muiTheme, chartsTheme, options.visual?.palette?.mode, span),\n    [muiTheme, chartsTheme, options.visual?.palette?.mode]\n  );\n\n  useEffect(() => {\n    if (!canvasRef.current || !width || !height) return;\n\n    const ctx = canvasRef.current.getContext('2d');\n    if (!ctx) return;\n\n    drawSpans(ctx, width, height, trace, spanColorGenerator);\n  }, [width, height, trace, spanColorGenerator]);\n\n  const translateCursorToTime = (e: ReactMouseEvent | MouseEvent): number => {\n    if (!canvasRef.current || !width) return 0;\n    // e.nativeEvent.offsetX doesn't work when sliding over a tick box\n    const offsetX = e.clientX - canvasRef.current.getBoundingClientRect().left;\n    return trace.startTimeUnixMs + (offsetX / width) * traceDuration;\n  };\n\n  const handleMouseDown = (e: ReactMouseEvent<HTMLDivElement>): void => {\n    e.preventDefault();\n    if (!(e.target instanceof HTMLElement)) return;\n\n    const isDefaultViewport =\n      viewport.startTimeUnixMs === trace.startTimeUnixMs && viewport.endTimeUnixMs === trace.endTimeUnixMs;\n    const elem = e.target.dataset['elem'];\n    const cursor = translateCursorToTime(e);\n\n    if (elem === 'resizerLeft') {\n      setMouseState({ type: 'resize', fixedPoint: viewport.endTimeUnixMs });\n    } else if (elem === 'resizerRight') {\n      setMouseState({ type: 'resize', fixedPoint: viewport.startTimeUnixMs });\n    } else if (elem === 'cutoffBox' || isDefaultViewport) {\n      setMouseState({ type: 'resize', fixedPoint: cursor });\n      setViewport({ startTimeUnixMs: cursor, endTimeUnixMs: cursor });\n    } else {\n      setMouseState({\n        type: 'drag',\n        start: cursor - viewport.startTimeUnixMs,\n        end: viewport.endTimeUnixMs - cursor,\n      });\n    }\n  };\n\n  // need stable reference for window.removeEventListener() in useEffect() below\n  const handleMouseMove = useEvent((e: MouseEvent) => {\n    e.preventDefault();\n\n    switch (mouseState.type) {\n      case 'none':\n        return;\n\n      case 'resize': {\n        const pointA = mouseState.fixedPoint;\n        const pointB = translateCursorToTime(e);\n\n        let start, end;\n        if (pointA < pointB) {\n          start = pointA;\n          end = pointB;\n        } else {\n          start = pointB;\n          end = pointA;\n        }\n\n        setViewport({\n          startTimeUnixMs: Math.max(start, trace.startTimeUnixMs),\n          endTimeUnixMs: Math.min(end, trace.endTimeUnixMs),\n        });\n        return;\n      }\n\n      case 'drag': {\n        // avoid using e.movementX here, as it skips events in chrome,\n        // resulting in the mouse pointer moving faster than the viewport box\n        const { start, end } = mouseState;\n        let cursor = translateCursorToTime(e);\n\n        if (cursor - start < trace.startTimeUnixMs) {\n          cursor = trace.startTimeUnixMs + start;\n        }\n        if (cursor + end > trace.endTimeUnixMs) {\n          cursor = trace.endTimeUnixMs - end;\n        }\n\n        setViewport({\n          startTimeUnixMs: cursor - start,\n          endTimeUnixMs: cursor + end,\n        });\n        return;\n      }\n    }\n  });\n\n  // need stable reference for window.removeEventListener() in useEffect() below\n  const handleMouseUp = useEvent((e: MouseEvent) => {\n    e.preventDefault();\n    setMouseState({ type: 'none' });\n\n    // reset viewport if start === end, i.e. a click without movement\n    if (viewport.startTimeUnixMs === viewport.endTimeUnixMs) {\n      setViewport({ startTimeUnixMs: trace.startTimeUnixMs, endTimeUnixMs: trace.endTimeUnixMs });\n    }\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 = mouseState.type === 'resize' ? 'col-resize' : 'move';\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 (mouseState.type === 'none') {\n      stopMouseAction();\n    } else {\n      startMouseAction();\n    }\n\n    return stopMouseAction;\n  }, [mouseState, handleMouseMove, handleMouseUp]);\n\n  return (\n    <Box ref={wrapperRef} sx={{ position: 'relative', height }} onMouseDown={handleMouseDown}>\n      <canvas ref={canvasRef} width={width} height={height} style={{ position: 'absolute' }} />\n      <Ticks />\n      <CutoffBox data-elem=\"cutoffBox\" style={{ left: 0, width: `${relativeCutoffLeft * 100}%` }} />\n      <Resizer data-elem=\"resizerLeft\" style={{ left: `${relativeCutoffLeft * 100}%` }} />\n      <Resizer data-elem=\"resizerRight\" style={{ right: `${relativeCutoffRight * 100}%` }} />\n      <CutoffBox data-elem=\"cutoffBox\" style={{ right: 0, width: `${relativeCutoffRight * 100}%` }} />\n    </Box>\n  );\n}\n\nconst CutoffBox = styled(Box)({\n  position: 'absolute',\n  height: '100%',\n  backgroundColor: 'rgba(225, 225, 225, .5)',\n});\n\nconst Resizer = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  height: '100%',\n  backgroundColor: theme.palette.divider,\n  width: '2px',\n  cursor: 'col-resize',\n\n  // increase clickable area from 2px to 8px\n  '&:before': {\n    position: 'absolute',\n    width: '8px',\n    left: '-3px',\n    top: 0,\n    bottom: 0,\n    content: '\" \"',\n    zIndex: 1, // without zIndex, the cutoff boxes partially hide this element\n  },\n}));\n"],"names":["Box","styled","useTheme","useResizeObserver","useEffect","useRef","useState","useCallback","useEvent","useChartsTheme","Ticks","getSpanColor","drawSpans","CANVAS_HEIGHT","Canvas","props","options","trace","viewport","setViewport","muiTheme","chartsTheme","width","ref","wrapperRef","height","canvasRef","mouseState","setMouseState","type","traceDuration","endTimeUnixMs","startTimeUnixMs","relativeCutoffLeft","relativeCutoffRight","spanColorGenerator","span","visual","palette","mode","current","ctx","getContext","translateCursorToTime","e","offsetX","clientX","getBoundingClientRect","left","handleMouseDown","preventDefault","target","HTMLElement","isDefaultViewport","elem","dataset","cursor","fixedPoint","start","end","handleMouseMove","pointA","pointB","Math","max","min","handleMouseUp","startMouseAction","window","addEventListener","document","body","style","stopMouseAction","removeEventListener","sx","position","onMouseDown","canvas","CutoffBox","data-elem","Resizer","right","backgroundColor","theme","divider","top","bottom","content","zIndex"],"mappings":"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"}

package/lib/TracingGanttChart/MiniGanttChart/MiniGanttChart.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 MiniGanttChartProps {
+    options: TracingGanttChartOptions;
+    trace: Trace;
+    viewport: Viewport;
+    setViewport: (v: Viewport) => void;
+}
+export declare function MiniGanttChart(props: MiniGanttChartProps): ReactElement;
+export {};
+//# sourceMappingURL=MiniGanttChart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MiniGanttChart.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/MiniGanttChart/MiniGanttChart.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAa,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,UAAU,mBAAmB;IAC3B,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;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,YAAY,CAoBvE"}

package/lib/TracingGanttChart/MiniGanttChart/MiniGanttChart.js

@@ -0,0 +1,51 @@
+// 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 { TicksHeader } from '../Ticks';
+import { rowHeight } from '../utils';
+import { Canvas } from './Canvas';
+export function MiniGanttChart(props) {
+    const { options, trace, viewport, setViewport } = props;
+    const theme = useTheme();
+    return /*#__PURE__*/ _jsxs(Box, {
+        sx: {
+            border: `1px solid ${theme.palette.divider}`,
+            borderRadius: `${theme.shape.borderRadius}px`
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    position: 'relative',
+                    height: rowHeight,
+                    borderBottom: `1px solid ${theme.palette.divider}`
+                },
+                children: /*#__PURE__*/ _jsx(TicksHeader, {
+                    trace: trace,
+                    viewport: {
+                        startTimeUnixMs: trace.startTimeUnixMs,
+                        endTimeUnixMs: trace.endTimeUnixMs
+                    }
+                })
+            }),
+            /*#__PURE__*/ _jsx(Canvas, {
+                options: options,
+                trace: trace,
+                viewport: viewport,
+                setViewport: setViewport
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=MiniGanttChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/TracingGanttChart/MiniGanttChart/MiniGanttChart.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 { ReactElement } from 'react';\nimport { TicksHeader } from '../Ticks';\nimport { Viewport, rowHeight } from '../utils';\nimport { TracingGanttChartOptions } from '../../gantt-chart-model';\nimport { Trace } from '../trace';\nimport { Canvas } from './Canvas';\n\ninterface MiniGanttChartProps {\n  options: TracingGanttChartOptions;\n  trace: Trace;\n  viewport: Viewport;\n  setViewport: (v: Viewport) => void;\n}\n\nexport function MiniGanttChart(props: MiniGanttChartProps): ReactElement {\n  const { options, trace, viewport, setViewport } = props;\n  const theme = useTheme();\n\n  return (\n    <Box\n      sx={{\n        border: `1px solid ${theme.palette.divider}`,\n        borderRadius: `${theme.shape.borderRadius}px`,\n      }}\n    >\n      <Box sx={{ position: 'relative', height: rowHeight, borderBottom: `1px solid ${theme.palette.divider}` }}>\n        <TicksHeader\n          trace={trace}\n          viewport={{ startTimeUnixMs: trace.startTimeUnixMs, endTimeUnixMs: trace.endTimeUnixMs }}\n        />\n      </Box>\n      <Canvas options={options} trace={trace} viewport={viewport} setViewport={setViewport} />\n    </Box>\n  );\n}\n"],"names":["Box","useTheme","TicksHeader","rowHeight","Canvas","MiniGanttChart","props","options","trace","viewport","setViewport","theme","sx","border","palette","divider","borderRadius","shape","position","height","borderBottom","startTimeUnixMs","endTimeUnixMs"],"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;AAE9C,SAASC,WAAW,QAAQ,WAAW;AACvC,SAAmBC,SAAS,QAAQ,WAAW;AAG/C,SAASC,MAAM,QAAQ,WAAW;AASlC,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGJ;IAClD,MAAMK,QAAQV;IAEd,qBACE,MAACD;QACCY,IAAI;YACFC,QAAQ,CAAC,UAAU,EAAEF,MAAMG,OAAO,CAACC,OAAO,EAAE;YAC5CC,cAAc,GAAGL,MAAMM,KAAK,CAACD,YAAY,CAAC,EAAE,CAAC;QAC/C;;0BAEA,KAAChB;gBAAIY,IAAI;oBAAEM,UAAU;oBAAYC,QAAQhB;oBAAWiB,cAAc,CAAC,UAAU,EAAET,MAAMG,OAAO,CAACC,OAAO,EAAE;gBAAC;0BACrG,cAAA,KAACb;oBACCM,OAAOA;oBACPC,UAAU;wBAAEY,iBAAiBb,MAAMa,eAAe;wBAAEC,eAAed,MAAMc,aAAa;oBAAC;;;0BAG3F,KAAClB;gBAAOG,SAASA;gBAASC,OAAOA;gBAAOC,UAAUA;gBAAUC,aAAaA;;;;AAG/E"}

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

@@ -0,0 +1,3 @@
+import { Span, Trace } from '../trace';
+export declare function drawSpans(ctx: CanvasRenderingContext2D, width: number, height: number, trace: Trace, spanColorGenerator: (span: Span) => string): void;
+//# sourceMappingURL=draw.d.ts.map

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

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

package/lib/TracingGanttChart/MiniGanttChart/draw.js

@@ -0,0 +1,48 @@
+// 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 { 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 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;
+    let y = 0;
+    const drawSpan = (span)=>{
+        const spanDuration = span.endTimeUnixMs - span.startTimeUnixMs;
+        const relativeDuration = spanDuration / traceDuration;
+        const relativeStart = (span.startTimeUnixMs - trace.startTimeUnixMs) / traceDuration;
+        ctx.fillStyle = spanColorGenerator(span);
+        ctx.beginPath();
+        ctx.rect(Math.round(relativeStart * width), Math.round(y), Math.max(minSpanWidthPx, Math.round(relativeDuration * width)), barHeight);
+        ctx.fill();
+        y += yChange;
+        for (const childSpan of span.childSpans){
+            drawSpan(childSpan);
+        }
+    };
+    for (const rootSpan of trace.rootSpans){
+        drawSpan(rootSpan);
+    }
+}
+
+//# sourceMappingURL=draw.js.map

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

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

package/lib/TracingGanttChart/Ticks.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement } from 'react';
+import { Viewport } from './utils';
+import { Trace } from './trace';
+export interface TicksHeaderProps {
+    trace: Trace;
+    viewport: Viewport;
+}
+/**
+ * TicksHeader renders all tick labels in the header
+ */
+export declare function TicksHeader(props: TicksHeaderProps): ReactElement;
+/**
+ * Ticks renders all ticks in the span duration
+ */
+export declare function Ticks(): ReactElement;
+//# sourceMappingURL=Ticks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Ticks.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/Ticks.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAkB,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAiBjE;AAED;;GAEG;AACH,wBAAgB,KAAK,IAAI,YAAY,CAQpC"}

package/lib/TracingGanttChart/Ticks.js

@@ -0,0 +1,94 @@
+// 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, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, styled } from '@mui/material';
+import { formatDuration } from './utils';
+/**
+ * TicksHeader renders all tick labels in the header
+ */ export function TicksHeader(props) {
+    const { trace, viewport } = props;
+    const duration = viewport.endTimeUnixMs - viewport.startTimeUnixMs;
+    const startAt = viewport.startTimeUnixMs - trace.startTimeUnixMs;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(TickBox, {
+                style: {
+                    left: '0%',
+                    borderWidth: 0
+                },
+                children: formatDuration(startAt + duration * 0)
+            }),
+            /*#__PURE__*/ _jsx(TickBox, {
+                style: {
+                    left: '25%'
+                },
+                children: formatDuration(startAt + duration * 0.25)
+            }),
+            /*#__PURE__*/ _jsx(TickBox, {
+                style: {
+                    left: '50%'
+                },
+                children: formatDuration(startAt + duration * 0.5)
+            }),
+            /*#__PURE__*/ _jsx(TickBox, {
+                style: {
+                    left: '75%'
+                },
+                children: formatDuration(startAt + duration * 0.75)
+            }),
+            /*#__PURE__*/ _jsx(TickBox, {
+                style: {
+                    left: '100%'
+                },
+                children: /*#__PURE__*/ _jsx("span", {
+                    style: {
+                        position: 'absolute',
+                        right: '.75rem'
+                    },
+                    children: formatDuration(startAt + duration * 1)
+                })
+            })
+        ]
+    });
+}
+/**
+ * Ticks renders all ticks in the span duration
+ */ export function Ticks() {
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(TickBox, {
+                style: {
+                    left: '25%'
+                }
+            }),
+            /*#__PURE__*/ _jsx(TickBox, {
+                style: {
+                    left: '50%'
+                }
+            }),
+            /*#__PURE__*/ _jsx(TickBox, {
+                style: {
+                    left: '75%'
+                }
+            })
+        ]
+    });
+}
+const TickBox = styled(Box)(({ theme })=>({
+        position: 'absolute',
+        height: '100%',
+        borderLeft: `1px solid ${theme.palette.divider}`,
+        padding: '.25rem'
+    }));
+
+//# sourceMappingURL=Ticks.js.map

package/lib/TracingGanttChart/Ticks.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/TracingGanttChart/Ticks.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, styled } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { Viewport, formatDuration } from './utils';\nimport { Trace } from './trace';\n\nexport interface TicksHeaderProps {\n  trace: Trace;\n  viewport: Viewport;\n}\n\n/**\n * TicksHeader renders all tick labels in the header\n */\nexport function TicksHeader(props: TicksHeaderProps): ReactElement {\n  const { trace, viewport } = props;\n\n  const duration = viewport.endTimeUnixMs - viewport.startTimeUnixMs;\n  const startAt = viewport.startTimeUnixMs - trace.startTimeUnixMs;\n\n  return (\n    <>\n      <TickBox style={{ left: '0%', borderWidth: 0 }}>{formatDuration(startAt + duration * 0)}</TickBox>\n      <TickBox style={{ left: '25%' }}>{formatDuration(startAt + duration * 0.25)}</TickBox>\n      <TickBox style={{ left: '50%' }}>{formatDuration(startAt + duration * 0.5)}</TickBox>\n      <TickBox style={{ left: '75%' }}>{formatDuration(startAt + duration * 0.75)}</TickBox>\n      <TickBox style={{ left: '100%' }}>\n        <span style={{ position: 'absolute', right: '.75rem' }}>{formatDuration(startAt + duration * 1)}</span>\n      </TickBox>\n    </>\n  );\n}\n\n/**\n * Ticks renders all ticks in the span duration\n */\nexport function Ticks(): ReactElement {\n  return (\n    <>\n      <TickBox style={{ left: '25%' }} />\n      <TickBox style={{ left: '50%' }} />\n      <TickBox style={{ left: '75%' }} />\n    </>\n  );\n}\n\nconst TickBox = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  height: '100%',\n  borderLeft: `1px solid ${theme.palette.divider}`,\n  padding: '.25rem',\n}));\n"],"names":["Box","styled","formatDuration","TicksHeader","props","trace","viewport","duration","endTimeUnixMs","startTimeUnixMs","startAt","TickBox","style","left","borderWidth","span","position","right","Ticks","theme","height","borderLeft","palette","divider","padding"],"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,MAAM,QAAQ,gBAAgB;AAE5C,SAAmBC,cAAc,QAAQ,UAAU;AAQnD;;CAEC,GACD,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGF;IAE5B,MAAMG,WAAWD,SAASE,aAAa,GAAGF,SAASG,eAAe;IAClE,MAAMC,UAAUJ,SAASG,eAAe,GAAGJ,MAAMI,eAAe;IAEhE,qBACE;;0BACE,KAACE;gBAAQC,OAAO;oBAAEC,MAAM;oBAAMC,aAAa;gBAAE;0BAAIZ,eAAeQ,UAAUH,WAAW;;0BACrF,KAACI;gBAAQC,OAAO;oBAAEC,MAAM;gBAAM;0BAAIX,eAAeQ,UAAUH,WAAW;;0BACtE,KAACI;gBAAQC,OAAO;oBAAEC,MAAM;gBAAM;0BAAIX,eAAeQ,UAAUH,WAAW;;0BACtE,KAACI;gBAAQC,OAAO;oBAAEC,MAAM;gBAAM;0BAAIX,eAAeQ,UAAUH,WAAW;;0BACtE,KAACI;gBAAQC,OAAO;oBAAEC,MAAM;gBAAO;0BAC7B,cAAA,KAACE;oBAAKH,OAAO;wBAAEI,UAAU;wBAAYC,OAAO;oBAAS;8BAAIf,eAAeQ,UAAUH,WAAW;;;;;AAIrG;AAEA;;CAEC,GACD,OAAO,SAASW;IACd,qBACE;;0BACE,KAACP;gBAAQC,OAAO;oBAAEC,MAAM;gBAAM;;0BAC9B,KAACF;gBAAQC,OAAO;oBAAEC,MAAM;gBAAM;;0BAC9B,KAACF;gBAAQC,OAAO;oBAAEC,MAAM;gBAAM;;;;AAGpC;AAEA,MAAMF,UAAUV,OAAOD,KAAK,CAAC,EAAEmB,KAAK,EAAE,GAAM,CAAA;QAC1CH,UAAU;QACVI,QAAQ;QACRC,YAAY,CAAC,UAAU,EAAEF,MAAMG,OAAO,CAACC,OAAO,EAAE;QAChDC,SAAS;IACX,CAAA"}

package/lib/TracingGanttChart/TracingGanttChart.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+import { otlptracev1 } from '@perses-dev/core';
+import { TracingGanttChartOptions } from '../gantt-chart-model';
+import { AttributeLinks } from './DetailPane/Attributes';
+export interface TracingGanttChartProps {
+    options: TracingGanttChartOptions;
+    attributeLinks?: AttributeLinks;
+    trace: otlptracev1.TracesData;
+}
+/**
+ * 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 declare function TracingGanttChart(props: TracingGanttChartProps): ReactElement;
+//# sourceMappingURL=TracingGanttChart.d.ts.map

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

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