@perses-dev/tracing-gantt-chart-plugin 0.13.0 → 0.14.0-beta.2

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

@@ -1,98 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "ResizableDivider", {
-    enumerable: true,
-    get: function() {
-        return ResizableDivider;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _material = require("@mui/material");
-const _pluginsystem = require("@perses-dev/plugin-system");
-function ResizableDivider(props) {
-    const { parentRef, spacing = 0, onMove } = props;
-    const [isResizing, setResizing] = (0, _react.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 = (0, _pluginsystem.useEvent)((e)=>{
-        if (!parentRef.current) return;
-        const parentRect = parentRef.current.getBoundingClientRect();
-        // The parent can be a flex row, for example: [leftPercent] [gap] [divider] [gap] [1-leftPercent].
-        // Without considering spacing, leftPercent would be wrong because it ignores the flex gap between the divider and the element.
-        const offsetX = e.clientX - parentRect.left + spacing;
-        const leftPercent = offsetX / parentRect.width;
-        if (0.05 <= leftPercent && leftPercent <= 0.95) {
-            onMove(leftPercent);
-        }
-    });
-    // need stable reference for window.removeEventListener() in useEffect() below
-    const handleMouseUp = (0, _pluginsystem.useEvent)(()=>{
-        setResizing(false);
-    });
-    // 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 = '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__*/ (0, _jsxruntime.jsx)(ResizableDividerBox, {
-        onMouseDown: handleMouseDown,
-        onClick: stopEventPropagation
-    });
-}
-const ResizableDividerBox = (0, _material.styled)(_material.Box)(({ theme })=>({
-        position: 'relative',
-        width: '1px',
-        minWidth: '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
-        }
-    }));

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

@@ -1,81 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"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

@@ -1,97 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"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();
-        setCollapsedSpans((prev)=>{
-            const next = new Set(prev);
-            if (next.has(span.spanId)) {
-                next.delete(span.spanId);
-            } else {
-                next.add(span.spanId);
-            }
-            return next;
-        });
-    }, [
-        span,
-        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.has(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/SpanLinksButton.js

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

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

@@ -1,83 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"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");
-const _SpanLinksButton = require("./SpanLinksButton");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function SpanName(props) {
-    const { customLinks, 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
-                ]
-            }),
-            customLinks && customLinks.links.span && span.links.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                sx: {
-                    marginLeft: 'auto',
-                    px: 1
-                },
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_SpanLinksButton.SpanLinksButton, {
-                    customLinks: customLinks,
-                    span: span
-                })
-            })
-        ]
-    });
-}