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

package/lib/cjs/TracingGanttChart/DetailPane/Attributes.js

@@ -0,0 +1,74 @@
+// 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, "AttributeList", {
+    enumerable: true,
+    get: function() {
+        return AttributeList;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _reactrouterdom = require("react-router-dom");
+function AttributeList(props) {
+    const { attributeLinks, attributes } = props;
+    const attributesMap = (0, _react.useMemo)(()=>Object.fromEntries(attributes.map((attr)=>[
+                attr.key,
+                attr.value
+            ])), [
+        attributes
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.List, {
+            children: attributes.sort((a, b)=>a.key.localeCompare(b.key)).map((attribute, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(AttributeItem, {
+                    attribute: attribute,
+                    linkTo: attributeLinks?.[attribute.key]?.(attributesMap)
+                }, i))
+        })
+    });
+}
+function AttributeItem(props) {
+    const { attribute, linkTo } = props;
+    const value = linkTo ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Link, {
+        component: _reactrouterdom.Link,
+        to: linkTo,
+        children: renderAttributeValue(attribute.value)
+    }) : renderAttributeValue(attribute.value);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ListItem, {
+        disablePadding: true,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ListItemText, {
+            primary: attribute.key,
+            secondary: value,
+            primaryTypographyProps: {
+                variant: 'h5'
+            },
+            secondaryTypographyProps: {
+                variant: 'body1',
+                sx: {
+                    wordBreak: 'break-word'
+                }
+            }
+        })
+    });
+}
+function renderAttributeValue(value) {
+    if ('stringValue' in value) return value.stringValue.length > 0 ? value.stringValue : '<empty string>';
+    if ('intValue' in value) return value.intValue;
+    if ('boolValue' in value) return value.boolValue.toString();
+    if ('arrayValue' in value) return value.arrayValue.values.map(renderAttributeValue).join(', ');
+    return 'unknown';
+}

package/lib/cjs/TracingGanttChart/DetailPane/DetailPane.js

@@ -0,0 +1,106 @@
+// 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, "DetailPane", {
+    enumerable: true,
+    get: function() {
+        return DetailPane;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const _Close = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Close"));
+const _Attributes = require("./Attributes");
+const _SpanEvents = require("./SpanEvents");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function DetailPane(props) {
+    const { attributeLinks, trace, span, onCloseBtnClick } = props;
+    const [tab, setTab] = (0, _react.useState)('attributes');
+    // if the events tab is selected, and then a span without events is clicked,
+    // we need to switch the current selected tab back to the attributes tab.
+    if (tab === 'events' && span.events.length === 0) {
+        setTab('attributes');
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                sx: {
+                    float: 'right'
+                },
+                onClick: onCloseBtnClick,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Close.default, {})
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                sx: {
+                    wordBreak: 'break-word'
+                },
+                children: span.resource.serviceName
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                variant: "h2",
+                sx: {
+                    wordBreak: 'break-word'
+                },
+                children: span.name
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                sx: {
+                    borderBottom: 1,
+                    borderColor: 'divider'
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Tabs, {
+                    value: tab,
+                    onChange: (_, tab)=>setTab(tab),
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
+                            sx: {
+                                p: 0
+                            },
+                            value: "attributes",
+                            label: "Attributes"
+                        }),
+                        span.events.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
+                            value: "events",
+                            label: "Events"
+                        })
+                    ]
+                })
+            }),
+            tab === 'attributes' && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    span.attributes.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Attributes.AttributeList, {
+                        attributeLinks: attributeLinks,
+                        attributes: span.attributes
+                    }),
+                    span.attributes.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Attributes.AttributeList, {
+                        attributeLinks: attributeLinks,
+                        attributes: span.resource.attributes
+                    })
+                ]
+            }),
+            tab === 'events' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_SpanEvents.SpanEventList, {
+                trace: trace,
+                span: span
+            })
+        ]
+    });
+}

package/lib/cjs/TracingGanttChart/DetailPane/SpanEvents.js

@@ -0,0 +1,67 @@
+// 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, "SpanEventList", {
+    enumerable: true,
+    get: function() {
+        return SpanEventList;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _ChevronDown = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronDown"));
+const _utils = require("../utils");
+const _Attributes = require("./Attributes");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function SpanEventList(props) {
+    const { trace, span } = props;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: span.events.sort((a, b)=>a.timeUnixMs - b.timeUnixMs).map((event, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(SpanEventItem, {
+                trace: trace,
+                event: event
+            }, i))
+    });
+}
+function SpanEventItem(props) {
+    const { trace, event } = props;
+    const relativeTime = event.timeUnixMs - trace.startTimeUnixMs;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Accordion, {
+        disableGutters: true,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.AccordionSummary, {
+                expandIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronDown.default, {}),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                    children: (0, _utils.formatDuration)(relativeTime)
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.AccordionDetails, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                        variant: "subtitle1",
+                        children: event.name
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Attributes.AttributeList, {
+                        attributes: event.attributes
+                    })
+                ]
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,101 @@
+// 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, "GanttTable", {
+    enumerable: true,
+    get: function() {
+        return GanttTable;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _reactvirtuoso = require("react-virtuoso");
+const _react = require("react");
+const _material = require("@mui/material");
+const _GanttTableProvider = require("./GanttTableProvider");
+const _GanttTableRow = require("./GanttTableRow");
+const _GanttTableHeader = require("./GanttTableHeader");
+const _ResizableDivider = require("./ResizableDivider");
+function GanttTable(props) {
+    const { options, trace, viewport, selectedSpan, onSpanClick } = props;
+    const { collapsedSpans, setVisibleSpans } = (0, _GanttTableProvider.useGanttTableContext)();
+    const [nameColumnWidth, setNameColumnWidth] = (0, _react.useState)(0.25);
+    const tableRef = (0, _react.useRef)(null);
+    const theme = (0, _material.useTheme)();
+    const rows = (0, _react.useMemo)(()=>{
+        const rows = [];
+        for (const rootSpan of trace.rootSpans){
+            treeToRows(rows, rootSpan, collapsedSpans);
+        }
+        return rows;
+    }, [
+        trace.rootSpans,
+        collapsedSpans
+    ]);
+    const divider = /*#__PURE__*/ (0, _jsxruntime.jsx)(_ResizableDivider.ResizableDivider, {
+        parentRef: tableRef,
+        onMove: setNameColumnWidth
+    });
+    // update currently visible spans
+    function handleRangeChange({ startIndex, endIndex }) {
+        const visibleSpans = [];
+        for(let i = startIndex; i <= endIndex; i++){
+            visibleSpans.push(rows[i].spanId);
+        }
+        setVisibleSpans(visibleSpans);
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+        ref: tableRef,
+        sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            flexGrow: 1,
+            border: `1px solid ${theme.palette.divider}`,
+            borderRadius: `${theme.shape.borderRadius}px`
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_GanttTableHeader.GanttTableHeader, {
+                trace: trace,
+                viewport: viewport,
+                nameColumnWidth: nameColumnWidth,
+                divider: divider
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactvirtuoso.Virtuoso, {
+                data: rows,
+                itemContent: (_, span)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_GanttTableRow.GanttTableRow, {
+                        options: options,
+                        span: span,
+                        viewport: viewport,
+                        selected: span === selectedSpan,
+                        nameColumnWidth: nameColumnWidth,
+                        divider: divider,
+                        onClick: onSpanClick
+                    }),
+                rangeChanged: handleRangeChange
+            })
+        ]
+    });
+}
+/**
+ * treeToRows recursively transforms the span tree to a list of rows and
+ * hides collapsed child spans.
+ */ function treeToRows(rows, span, collapsedSpans) {
+    rows.push(span);
+    if (!collapsedSpans.includes(span.spanId)) {
+        for (const child of span.childSpans){
+            treeToRows(rows, child, collapsedSpans);
+        }
+    }
+}

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

@@ -0,0 +1,64 @@
+// 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, "GanttTableHeader", {
+    enumerable: true,
+    get: function() {
+        return GanttTableHeader;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _utils = require("../utils");
+const _Ticks = require("../Ticks");
+function GanttTableHeader(props) {
+    const { trace, viewport, nameColumnWidth, divider } = props;
+    const theme = (0, _material.useTheme)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        sx: {
+            height: _utils.rowHeight,
+            fontSize: '0.9rem',
+            borderBottom: `1px solid ${theme.palette.divider}`
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                style: {
+                    width: `${nameColumnWidth * 100}%`
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                    style: {
+                        padding: '.25rem'
+                    },
+                    children: "Service & Operation"
+                })
+            }),
+            divider,
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                sx: {
+                    position: 'relative',
+                    height: '100%',
+                    flexGrow: 1
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Ticks.TicksHeader, {
+                    trace: trace,
+                    viewport: viewport
+                })
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,60 @@
+// 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    GanttTableContext: function() {
+        return GanttTableContext;
+    },
+    GanttTableProvider: function() {
+        return GanttTableProvider;
+    },
+    useGanttTableContext: function() {
+        return useGanttTableContext;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const GanttTableContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
+function GanttTableProvider(props) {
+    const { children } = props;
+    const [collapsedSpans, setCollapsedSpans] = (0, _react.useState)([]);
+    const [visibleSpans, setVisibleSpans] = (0, _react.useState)([]);
+    const [hoveredParent, setHoveredParent] = (0, _react.useState)(undefined);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(GanttTableContext.Provider, {
+        value: {
+            collapsedSpans,
+            setCollapsedSpans,
+            visibleSpans,
+            setVisibleSpans,
+            hoveredParent,
+            setHoveredParent
+        },
+        children: children
+    });
+}
+function useGanttTableContext() {
+    const ctx = (0, _react.useContext)(GanttTableContext);
+    if (ctx === undefined) {
+        throw new Error('No GanttTableContext found. Did you forget a Provider?');
+    }
+    return ctx;
+}

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

@@ -0,0 +1,64 @@
+// 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, "GanttTableRow", {
+    enumerable: true,
+    get: function() {
+        return GanttTableRow;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const _utils = require("../utils");
+const _SpanName = require("./SpanName");
+const _SpanDuration = require("./SpanDuration");
+const GanttTableRow = /*#__PURE__*/ (0, _react.memo)(function GanttTableRow(props) {
+    const { options, span, viewport, selected, nameColumnWidth, divider, onClick } = props;
+    const theme = (0, _material.useTheme)();
+    const handleOnClick = ()=>{
+        // ignore event if triggered by selecting text
+        if (document.getSelection()?.type === 'Range') return;
+        onClick(span);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(RowContainer, {
+        sx: {
+            backgroundColor: selected ? theme.palette.action.selected : 'inherit'
+        },
+        direction: "row",
+        onClick: handleOnClick,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_SpanName.SpanName, {
+                span: span,
+                nameColumnWidth: nameColumnWidth
+            }),
+            divider,
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_SpanDuration.SpanDuration, {
+                options: options,
+                span: span,
+                viewport: viewport
+            })
+        ]
+    });
+});
+const RowContainer = (0, _material.styled)(_material.Stack)(({ theme })=>({
+        height: _utils.rowHeight,
+        '&:hover': {
+            backgroundColor: theme.palette.action.hover,
+            borderTop: `1px solid ${theme.palette.divider}`,
+            borderBottom: `1px solid ${theme.palette.divider}`
+        }
+    }));

package/lib/cjs/TracingGanttChart/GanttTable/ResizableDivider.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.
+"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 _core = require("@perses-dev/core");
+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, _core.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 = (0, _core.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',
+        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
+        }
+    }));