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

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

@@ -0,0 +1,81 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SpanDuration", {
+    enumerable: true,
+    get: function() {
+        return SpanDuration;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _utils = require("../utils");
+const _Ticks = require("../Ticks");
+function SpanDuration(props) {
+    const { options, span, viewport } = props;
+    const muiTheme = (0, _material.useTheme)();
+    const chartsTheme = (0, _components.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__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+        sx: {
+            position: 'relative',
+            height: '100%',
+            flexGrow: 1,
+            overflow: 'hidden'
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Ticks.Ticks, {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                "data-testid": "span-duration-bar",
+                sx: {
+                    position: 'absolute',
+                    top: 0,
+                    bottom: 0,
+                    margin: 'auto',
+                    minWidth: `${_utils.minSpanWidthPx}px`,
+                    height: '8px',
+                    borderRadius: muiTheme.shape.borderRadius
+                },
+                style: {
+                    left: `${relativeStart * 100}%`,
+                    width: `${relativeDuration * 100}%`,
+                    backgroundColor: (0, _utils.getSpanColor)(muiTheme, chartsTheme, options.visual?.palette?.mode, span)
+                }
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.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: (0, _utils.formatDuration)(spanDuration)
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,97 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SpanIndents", {
+    enumerable: true,
+    get: function() {
+        return SpanIndents;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _ChevronDown = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronDown"));
+const _ChevronRight = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronRight"));
+const _react = require("react");
+const _GanttTableProvider = require("./GanttTableProvider");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const MIN_INDENT_WIDTH = 8;
+const MAX_INDENT_WIDTH = 24;
+function SpanIndents(props) {
+    const { span } = props;
+    const { collapsedSpans, setCollapsedSpans, visibleSpans, hoveredParent, setHoveredParent } = (0, _GanttTableProvider.useGanttTableContext)();
+    const theme = (0, _material.useTheme)();
+    const handleToggleClick = (0, _react.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 = (0, _react.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__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: spans.map((span, i)=>/*#__PURE__*/ (0, _jsxruntime.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__*/ (0, _jsxruntime.jsx)(_ChevronRight.default, {
+                    titleAccess: "expand",
+                    onClick: handleToggleClick,
+                    onMouseEnter: handleIconMouseEnter
+                }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronDown.default, {
+                    titleAccess: "collapse",
+                    onClick: handleToggleClick,
+                    onMouseEnter: handleIconMouseEnter
+                }))
+            }, span.spanId))
+    });
+}
+const SpanIndentBox = (0, _material.styled)('div')({
+    display: 'flex',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    flexShrink: 0,
+    transition: 'width 1s'
+});

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

@@ -0,0 +1,72 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SpanName", {
+    enumerable: true,
+    get: function() {
+        return SpanName;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _AlertCircleOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/AlertCircleOutline"));
+const _utils = require("../utils");
+const _SpanIndents = require("./SpanIndents");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function SpanName(props) {
+    const { span, nameColumnWidth } = props;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        direction: "row",
+        sx: {
+            alignItems: 'center'
+        },
+        style: {
+            width: `${nameColumnWidth * 100}%`
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_SpanIndents.SpanIndents, {
+                span: span
+            }),
+            (0, _utils.spanHasError)(span) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_AlertCircleOutline.default, {
+                titleAccess: "error",
+                color: "error",
+                sx: {
+                    marginRight: '5px'
+                }
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                sx: {
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden'
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("strong", {
+                        children: [
+                            span.resource.serviceName,
+                            ":"
+                        ]
+                    }),
+                    " ",
+                    span.name
+                ]
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,256 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Canvas", {
+    enumerable: true,
+    get: function() {
+        return Canvas;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _useresizeobserver = /*#__PURE__*/ _interop_require_default(require("use-resize-observer"));
+const _react = require("react");
+const _core = require("@perses-dev/core");
+const _components = require("@perses-dev/components");
+const _Ticks = require("../Ticks");
+const _utils = require("../utils");
+const _draw = require("./draw");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const CANVAS_HEIGHT = 60;
+function Canvas(props) {
+    const { options, trace, viewport, setViewport } = props;
+    const muiTheme = (0, _material.useTheme)();
+    const chartsTheme = (0, _components.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 } = (0, _useresizeobserver.default)();
+    const height = CANVAS_HEIGHT;
+    const canvasRef = (0, _react.useRef)(null);
+    const [mouseState, setMouseState] = (0, _react.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 = (0, _react.useCallback)((span)=>(0, _utils.getSpanColor)(muiTheme, chartsTheme, options.visual?.palette?.mode, span), [
+        muiTheme,
+        chartsTheme,
+        options.visual?.palette?.mode
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (!canvasRef.current || !width || !height) return;
+        const ctx = canvasRef.current.getContext('2d');
+        if (!ctx) return;
+        (0, _draw.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 = (0, _core.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 = (0, _core.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
+    (0, _react.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__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+        ref: wrapperRef,
+        sx: {
+            position: 'relative',
+            height
+        },
+        onMouseDown: handleMouseDown,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("canvas", {
+                ref: canvasRef,
+                width: width,
+                height: height,
+                style: {
+                    position: 'absolute'
+                }
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Ticks.Ticks, {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(CutoffBox, {
+                "data-elem": "cutoffBox",
+                style: {
+                    left: 0,
+                    width: `${relativeCutoffLeft * 100}%`
+                }
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(Resizer, {
+                "data-elem": "resizerLeft",
+                style: {
+                    left: `${relativeCutoffLeft * 100}%`
+                }
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(Resizer, {
+                "data-elem": "resizerRight",
+                style: {
+                    right: `${relativeCutoffRight * 100}%`
+                }
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(CutoffBox, {
+                "data-elem": "cutoffBox",
+                style: {
+                    right: 0,
+                    width: `${relativeCutoffRight * 100}%`
+                }
+            })
+        ]
+    });
+}
+const CutoffBox = (0, _material.styled)(_material.Box)({
+    position: 'absolute',
+    height: '100%',
+    backgroundColor: 'rgba(225, 225, 225, .5)'
+});
+const Resizer = (0, _material.styled)(_material.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
+        }
+    }));

package/lib/cjs/TracingGanttChart/MiniGanttChart/MiniGanttChart.js

@@ -0,0 +1,59 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "MiniGanttChart", {
+    enumerable: true,
+    get: function() {
+        return MiniGanttChart;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _Ticks = require("../Ticks");
+const _utils = require("../utils");
+const _Canvas = require("./Canvas");
+function MiniGanttChart(props) {
+    const { options, trace, viewport, setViewport } = props;
+    const theme = (0, _material.useTheme)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+        sx: {
+            border: `1px solid ${theme.palette.divider}`,
+            borderRadius: `${theme.shape.borderRadius}px`
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                sx: {
+                    position: 'relative',
+                    height: _utils.rowHeight,
+                    borderBottom: `1px solid ${theme.palette.divider}`
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Ticks.TicksHeader, {
+                    trace: trace,
+                    viewport: {
+                        startTimeUnixMs: trace.startTimeUnixMs,
+                        endTimeUnixMs: trace.endTimeUnixMs
+                    }
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Canvas.Canvas, {
+                options: options,
+                trace: trace,
+                viewport: viewport,
+                setViewport: setViewport
+            })
+        ]
+    });
+}

package/lib/cjs/TracingGanttChart/MiniGanttChart/draw.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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "drawSpans", {
+    enumerable: true,
+    get: function() {
+        return drawSpans;
+    }
+});
+const _utils = require("../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;
+}
+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(_utils.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);
+    }
+}