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

package/lib/TracingGanttChart/GanttTable/GanttTableRow.js

@@ -11,11 +11,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 { Stack, styled, useTheme } from '@mui/material';
-import { memo } from 'react';
-import { rowHeight } from '../utils';
-import { SpanName } from './SpanName';
-import { SpanDuration } from './SpanDuration';
+import { Stack, styled, useTheme } from "@mui/material";
+import { memo } from "react";
+import { rowHeight } from "../utils.js";
+import { SpanDuration } from "./SpanDuration.js";
+import { SpanName } from "./SpanName.js";
 export const GanttTableRow = /*#__PURE__*/ memo(function GanttTableRow(props) {
     const { options, customLinks, span, viewport, selected, matched, focused, nameColumnWidth, divider, onClick } = props;
     const theme = useTheme();

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/GanttTableRow.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Stack, styled, useTheme } from '@mui/material';\nimport { memo } from 'react';\nimport { Viewport, rowHeight } from '../utils';\nimport { CustomLinks, TracingGanttChartOptions } from '../../gantt-chart-model';\nimport { Span } from '../trace';\nimport { SpanName } from './SpanName';\nimport { SpanDuration } from './SpanDuration';\n\ninterface GanttTableRowProps {\n  options: TracingGanttChartOptions;\n  customLinks?: CustomLinks;\n  span: Span;\n  viewport: Viewport;\n  /** this span is opened in the attribute pane */\n  selected?: boolean;\n  /** this span is matched in the search results */\n  matched?: boolean;\n  /** this span is focused by clicking prev/next in the search bar */\n  focused?: boolean;\n  nameColumnWidth: number;\n  divider: React.ReactNode;\n  onClick: (span: Span) => void;\n}\n\nexport const GanttTableRow = memo(function GanttTableRow(props: GanttTableRowProps) {\n  const { options, customLinks, span, viewport, selected, matched, focused, nameColumnWidth, divider, onClick } = props;\n  const theme = useTheme();\n\n  const handleOnClick = (): void => {\n    // ignore event if triggered by selecting text\n    if (document.getSelection()?.type === 'Range') return;\n\n    onClick(span);\n  };\n\n  let backgroundColor: string | undefined;\n  if (selected) {\n    backgroundColor = theme.palette.action.focus;\n  } else if (focused) {\n    backgroundColor = theme.palette.action.selected;\n  } else if (matched) {\n    backgroundColor = theme.palette.action.hover;\n  }\n\n  return (\n    <RowContainer\n      sx={{\n        backgroundColor,\n        // overwrite hover if background color is set (selected, focused or matched)\n        '&:hover': backgroundColor ? { backgroundColor } : undefined,\n      }}\n      direction=\"row\"\n      onClick={handleOnClick}\n    >\n      <SpanName customLinks={customLinks} span={span} nameColumnWidth={nameColumnWidth} />\n      {divider}\n      <SpanDuration options={options} span={span} viewport={viewport} />\n    </RowContainer>\n  );\n});\n\nconst RowContainer = styled(Stack)(({ theme }) => ({\n  height: rowHeight,\n  '&:hover': {\n    backgroundColor: theme.palette.action.hover,\n    borderTop: `1px solid ${theme.palette.divider}`,\n    borderBottom: `1px solid ${theme.palette.divider}`,\n  },\n}));\n"],"names":["Stack","styled","useTheme","memo","rowHeight","SpanName","SpanDuration","GanttTableRow","props","options","customLinks","span","viewport","selected","matched","focused","nameColumnWidth","divider","onClick","theme","handleOnClick","document","getSelection","type","backgroundColor","palette","action","focus","hover","RowContainer","sx","undefined","direction","height","borderTop","borderBottom"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,KAAK,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,gBAAgB;AACxD,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAAmBC,SAAS,QAAQ,WAAW;AAG/C,SAASC,QAAQ,QAAQ,aAAa;AACtC,SAASC,YAAY,QAAQ,iBAAiB;AAkB9C,OAAO,MAAMC,8BAAgBJ,KAAK,SAASI,cAAcC,KAAyB;IAChF,MAAM,EAAEC,OAAO,EAAEC,WAAW,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,OAAO,EAAEC,eAAe,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGV;IAChH,MAAMW,QAAQjB;IAEd,MAAMkB,gBAAgB;QACpB,8CAA8C;QAC9C,IAAIC,SAASC,YAAY,IAAIC,SAAS,SAAS;QAE/CL,QAAQP;IACV;IAEA,IAAIa;IACJ,IAAIX,UAAU;QACZW,kBAAkBL,MAAMM,OAAO,CAACC,MAAM,CAACC,KAAK;IAC9C,OAAO,IAAIZ,SAAS;QAClBS,kBAAkBL,MAAMM,OAAO,CAACC,MAAM,CAACb,QAAQ;IACjD,OAAO,IAAIC,SAAS;QAClBU,kBAAkBL,MAAMM,OAAO,CAACC,MAAM,CAACE,KAAK;IAC9C;IAEA,qBACE,MAACC;QACCC,IAAI;YACFN;YACA,4EAA4E;YAC5E,WAAWA,kBAAkB;gBAAEA;YAAgB,IAAIO;QACrD;QACAC,WAAU;QACVd,SAASE;;0BAET,KAACf;gBAASK,aAAaA;gBAAaC,MAAMA;gBAAMK,iBAAiBA;;YAChEC;0BACD,KAACX;gBAAaG,SAASA;gBAASE,MAAMA;gBAAMC,UAAUA;;;;AAG5D,GAAG;AAEH,MAAMiB,eAAe5B,OAAOD,OAAO,CAAC,EAAEmB,KAAK,EAAE,GAAM,CAAA;QACjDc,QAAQ7B;QACR,WAAW;YACToB,iBAAiBL,MAAMM,OAAO,CAACC,MAAM,CAACE,KAAK;YAC3CM,WAAW,CAAC,UAAU,EAAEf,MAAMM,OAAO,CAACR,OAAO,EAAE;YAC/CkB,cAAc,CAAC,UAAU,EAAEhB,MAAMM,OAAO,CAACR,OAAO,EAAE;QACpD;IACF,CAAA"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/GanttTableRow.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Stack, styled, useTheme } from '@mui/material';\nimport { memo } from 'react';\n\nimport type { CustomLinks, TracingGanttChartOptions } from '../../gantt-chart-model';\nimport type { Span } from '../trace';\nimport type { Viewport } from '../utils';\nimport { rowHeight } from '../utils';\nimport { SpanDuration } from './SpanDuration';\nimport { SpanName } from './SpanName';\n\ninterface GanttTableRowProps {\n  options: TracingGanttChartOptions;\n  customLinks?: CustomLinks;\n  span: Span;\n  viewport: Viewport;\n  /** this span is opened in the attribute pane */\n  selected?: boolean;\n  /** this span is matched in the search results */\n  matched?: boolean;\n  /** this span is focused by clicking prev/next in the search bar */\n  focused?: boolean;\n  nameColumnWidth: number;\n  divider: React.ReactNode;\n  onClick: (span: Span) => void;\n}\n\nexport const GanttTableRow = memo(function GanttTableRow(props: GanttTableRowProps) {\n  const { options, customLinks, span, viewport, selected, matched, focused, nameColumnWidth, divider, onClick } = props;\n  const theme = useTheme();\n\n  const handleOnClick = (): void => {\n    // ignore event if triggered by selecting text\n    if (document.getSelection()?.type === 'Range') return;\n\n    onClick(span);\n  };\n\n  let backgroundColor: string | undefined;\n  if (selected) {\n    backgroundColor = theme.palette.action.focus;\n  } else if (focused) {\n    backgroundColor = theme.palette.action.selected;\n  } else if (matched) {\n    backgroundColor = theme.palette.action.hover;\n  }\n\n  return (\n    <RowContainer\n      sx={{\n        backgroundColor,\n        // overwrite hover if background color is set (selected, focused or matched)\n        '&:hover': backgroundColor ? { backgroundColor } : undefined,\n      }}\n      direction=\"row\"\n      onClick={handleOnClick}\n    >\n      <SpanName customLinks={customLinks} span={span} nameColumnWidth={nameColumnWidth} />\n      {divider}\n      <SpanDuration options={options} span={span} viewport={viewport} />\n    </RowContainer>\n  );\n});\n\nconst RowContainer = styled(Stack)(({ theme }) => ({\n  height: rowHeight,\n  '&:hover': {\n    backgroundColor: theme.palette.action.hover,\n    borderTop: `1px solid ${theme.palette.divider}`,\n    borderBottom: `1px solid ${theme.palette.divider}`,\n  },\n}));\n"],"names":["Stack","styled","useTheme","memo","rowHeight","SpanDuration","SpanName","GanttTableRow","props","options","customLinks","span","viewport","selected","matched","focused","nameColumnWidth","divider","onClick","theme","handleOnClick","document","getSelection","type","backgroundColor","palette","action","focus","hover","RowContainer","sx","undefined","direction","height","borderTop","borderBottom"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,KAAK,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,gBAAgB;AACxD,SAASC,IAAI,QAAQ,QAAQ;AAK7B,SAASC,SAAS,QAAQ,cAAW;AACrC,SAASC,YAAY,QAAQ,oBAAiB;AAC9C,SAASC,QAAQ,QAAQ,gBAAa;AAkBtC,OAAO,MAAMC,8BAAgBJ,KAAK,SAASI,cAAcC,KAAyB;IAChF,MAAM,EAAEC,OAAO,EAAEC,WAAW,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,OAAO,EAAEC,eAAe,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGV;IAChH,MAAMW,QAAQjB;IAEd,MAAMkB,gBAAgB;QACpB,8CAA8C;QAC9C,IAAIC,SAASC,YAAY,IAAIC,SAAS,SAAS;QAE/CL,QAAQP;IACV;IAEA,IAAIa;IACJ,IAAIX,UAAU;QACZW,kBAAkBL,MAAMM,OAAO,CAACC,MAAM,CAACC,KAAK;IAC9C,OAAO,IAAIZ,SAAS;QAClBS,kBAAkBL,MAAMM,OAAO,CAACC,MAAM,CAACb,QAAQ;IACjD,OAAO,IAAIC,SAAS;QAClBU,kBAAkBL,MAAMM,OAAO,CAACC,MAAM,CAACE,KAAK;IAC9C;IAEA,qBACE,MAACC;QACCC,IAAI;YACFN;YACA,4EAA4E;YAC5E,WAAWA,kBAAkB;gBAAEA;YAAgB,IAAIO;QACrD;QACAC,WAAU;QACVd,SAASE;;0BAET,KAACd;gBAASI,aAAaA;gBAAaC,MAAMA;gBAAMK,iBAAiBA;;YAChEC;0BACD,KAACZ;gBAAaI,SAASA;gBAASE,MAAMA;gBAAMC,UAAUA;;;;AAG5D,GAAG;AAEH,MAAMiB,eAAe5B,OAAOD,OAAO,CAAC,EAAEmB,KAAK,EAAE,GAAM,CAAA;QACjDc,QAAQ7B;QACR,WAAW;YACToB,iBAAiBL,MAAMM,OAAO,CAACC,MAAM,CAACE,KAAK;YAC3CM,WAAW,CAAC,UAAU,EAAEf,MAAMM,OAAO,CAACR,OAAO,EAAE;YAC/CkB,cAAc,CAAC,UAAU,EAAEhB,MAAMM,OAAO,CAACR,OAAO,EAAE;QACpD;IACF,CAAA"}

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

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 interface ResizableDividerProps {
     parentRef: React.RefObject<Element>;
     spacing?: number;

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

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

package/lib/TracingGanttChart/GanttTable/ResizableDivider.js

@@ -11,9 +11,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // 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 { useEffect, useState } from 'react';
-import { Box, styled } from '@mui/material';
-import { useEvent } from '@perses-dev/plugin-system';
+import { Box, styled } from "@mui/material";
+import { useEvent } from "@perses-dev/plugin-system";
+import { useEffect, useState } from "react";
 export function ResizableDivider(props) {
     const { parentRef, spacing = 0, onMove } = props;
     const [isResizing, setResizing] = useState(false);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/ResizableDivider.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { MouseEvent as ReactMouseEvent, ReactElement, useEffect, useState } from 'react';\nimport { Box, styled } from '@mui/material';\nimport { useEvent } from '@perses-dev/plugin-system';\n\ninterface ResizableDividerProps {\n  parentRef: React.RefObject<Element>;\n  spacing?: number;\n  onMove: (left: number) => void;\n}\n\nexport function ResizableDivider(props: ResizableDividerProps): ReactElement {\n  const { parentRef, spacing = 0, onMove } = props;\n  const [isResizing, setResizing] = useState(false);\n\n  const handleMouseDown = (e: ReactMouseEvent): void => {\n    // disable any default actions (text selection, etc.)\n    e.preventDefault();\n\n    setResizing(true);\n  };\n\n  // need stable reference for window.removeEventListener() in useEffect() below\n  const handleMouseMove = useEvent((e: MouseEvent) => {\n    if (!parentRef.current) return;\n\n    const parentRect = parentRef.current.getBoundingClientRect();\n\n    // The parent can be a flex row, for example: [leftPercent] [gap] [divider] [gap] [1-leftPercent].\n    // Without considering spacing, leftPercent would be wrong because it ignores the flex gap between the divider and the element.\n    const offsetX = e.clientX - parentRect.left + spacing;\n    const leftPercent = offsetX / parentRect.width;\n\n    if (0.05 <= leftPercent && leftPercent <= 0.95) {\n      onMove(leftPercent);\n    }\n  });\n\n  // need stable reference for window.removeEventListener() in useEffect() below\n  const handleMouseUp = useEvent(() => {\n    setResizing(false);\n  });\n\n  // capture mouseMove and mouseUp outside the element by attaching them to the window object\n  useEffect(() => {\n    function startMouseAction(): void {\n      window.addEventListener('mousemove', handleMouseMove);\n      window.addEventListener('mouseup', handleMouseUp);\n      document.body.style.cursor = 'col-resize';\n    }\n\n    function stopMouseAction(): void {\n      window.removeEventListener('mousemove', handleMouseMove);\n      window.removeEventListener('mouseup', handleMouseUp);\n      document.body.style.cursor = 'inherit';\n    }\n\n    if (isResizing) {\n      startMouseAction();\n    } else {\n      stopMouseAction();\n    }\n\n    return stopMouseAction;\n  }, [isResizing, handleMouseMove, handleMouseUp]);\n\n  // prevent onClick event when clicking on a divider\n  const stopEventPropagation = (e: ReactMouseEvent): void => e.stopPropagation();\n\n  return <ResizableDividerBox onMouseDown={handleMouseDown} onClick={stopEventPropagation} />;\n}\n\nconst ResizableDividerBox = styled(Box)(({ theme }) => ({\n  position: 'relative',\n  width: '1px',\n  minWidth: '1px',\n  height: '100%',\n  backgroundColor: theme.palette.divider,\n  cursor: 'col-resize',\n\n  // increase clickable area from 1px to 7px\n  '&:before': {\n    position: 'absolute',\n    width: '7px',\n    left: '-3px',\n    top: 0,\n    bottom: 0,\n    content: '\" \"',\n    zIndex: 1, // without zIndex, the span duration row hides the right side of this element\n  },\n}));\n"],"names":["useEffect","useState","Box","styled","useEvent","ResizableDivider","props","parentRef","spacing","onMove","isResizing","setResizing","handleMouseDown","e","preventDefault","handleMouseMove","current","parentRect","getBoundingClientRect","offsetX","clientX","left","leftPercent","width","handleMouseUp","startMouseAction","window","addEventListener","document","body","style","cursor","stopMouseAction","removeEventListener","stopEventPropagation","stopPropagation","ResizableDividerBox","onMouseDown","onClick","theme","position","minWidth","height","backgroundColor","palette","divider","top","bottom","content","zIndex"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAAsDA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AACzF,SAASC,GAAG,EAAEC,MAAM,QAAQ,gBAAgB;AAC5C,SAASC,QAAQ,QAAQ,4BAA4B;AAQrD,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EAAEC,SAAS,EAAEC,UAAU,CAAC,EAAEC,MAAM,EAAE,GAAGH;IAC3C,MAAM,CAACI,YAAYC,YAAY,GAAGV,SAAS;IAE3C,MAAMW,kBAAkB,CAACC;QACvB,qDAAqD;QACrDA,EAAEC,cAAc;QAEhBH,YAAY;IACd;IAEA,8EAA8E;IAC9E,MAAMI,kBAAkBX,SAAS,CAACS;QAChC,IAAI,CAACN,UAAUS,OAAO,EAAE;QAExB,MAAMC,aAAaV,UAAUS,OAAO,CAACE,qBAAqB;QAE1D,kGAAkG;QAClG,+HAA+H;QAC/H,MAAMC,UAAUN,EAAEO,OAAO,GAAGH,WAAWI,IAAI,GAAGb;QAC9C,MAAMc,cAAcH,UAAUF,WAAWM,KAAK;QAE9C,IAAI,QAAQD,eAAeA,eAAe,MAAM;YAC9Cb,OAAOa;QACT;IACF;IAEA,8EAA8E;IAC9E,MAAME,gBAAgBpB,SAAS;QAC7BO,YAAY;IACd;IAEA,2FAA2F;IAC3FX,UAAU;QACR,SAASyB;YACPC,OAAOC,gBAAgB,CAAC,aAAaZ;YACrCW,OAAOC,gBAAgB,CAAC,WAAWH;YACnCI,SAASC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG;QAC/B;QAEA,SAASC;YACPN,OAAOO,mBAAmB,CAAC,aAAalB;YACxCW,OAAOO,mBAAmB,CAAC,WAAWT;YACtCI,SAASC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG;QAC/B;QAEA,IAAIrB,YAAY;YACde;QACF,OAAO;YACLO;QACF;QAEA,OAAOA;IACT,GAAG;QAACtB;QAAYK;QAAiBS;KAAc;IAE/C,mDAAmD;IACnD,MAAMU,uBAAuB,CAACrB,IAA6BA,EAAEsB,eAAe;IAE5E,qBAAO,KAACC;QAAoBC,aAAazB;QAAiB0B,SAASJ;;AACrE;AAEA,MAAME,sBAAsBjC,OAAOD,KAAK,CAAC,EAAEqC,KAAK,EAAE,GAAM,CAAA;QACtDC,UAAU;QACVjB,OAAO;QACPkB,UAAU;QACVC,QAAQ;QACRC,iBAAiBJ,MAAMK,OAAO,CAACC,OAAO;QACtCd,QAAQ;QAER,0CAA0C;QAC1C,YAAY;YACVS,UAAU;YACVjB,OAAO;YACPF,MAAM;YACNyB,KAAK;YACLC,QAAQ;YACRC,SAAS;YACTC,QAAQ;QACV;IACF,CAAA"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/ResizableDivider.tsx"],"sourcesContent":["// Copyright 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 { useEvent } from '@perses-dev/plugin-system';\nimport type { MouseEvent as ReactMouseEvent, ReactElement } from 'react';\nimport { useEffect, useState } from 'react';\n\ninterface ResizableDividerProps {\n  parentRef: React.RefObject<Element>;\n  spacing?: number;\n  onMove: (left: number) => void;\n}\n\nexport function ResizableDivider(props: ResizableDividerProps): ReactElement {\n  const { parentRef, spacing = 0, onMove } = props;\n  const [isResizing, setResizing] = useState(false);\n\n  const handleMouseDown = (e: ReactMouseEvent): void => {\n    // disable any default actions (text selection, etc.)\n    e.preventDefault();\n\n    setResizing(true);\n  };\n\n  // need stable reference for window.removeEventListener() in useEffect() below\n  const handleMouseMove = useEvent((e: MouseEvent) => {\n    if (!parentRef.current) return;\n\n    const parentRect = parentRef.current.getBoundingClientRect();\n\n    // The parent can be a flex row, for example: [leftPercent] [gap] [divider] [gap] [1-leftPercent].\n    // Without considering spacing, leftPercent would be wrong because it ignores the flex gap between the divider and the element.\n    const offsetX = e.clientX - parentRect.left + spacing;\n    const leftPercent = offsetX / parentRect.width;\n\n    if (0.05 <= leftPercent && leftPercent <= 0.95) {\n      onMove(leftPercent);\n    }\n  });\n\n  // need stable reference for window.removeEventListener() in useEffect() below\n  const handleMouseUp = useEvent(() => {\n    setResizing(false);\n  });\n\n  // capture mouseMove and mouseUp outside the element by attaching them to the window object\n  useEffect(() => {\n    function startMouseAction(): void {\n      window.addEventListener('mousemove', handleMouseMove);\n      window.addEventListener('mouseup', handleMouseUp);\n      document.body.style.cursor = 'col-resize';\n    }\n\n    function stopMouseAction(): void {\n      window.removeEventListener('mousemove', handleMouseMove);\n      window.removeEventListener('mouseup', handleMouseUp);\n      document.body.style.cursor = 'inherit';\n    }\n\n    if (isResizing) {\n      startMouseAction();\n    } else {\n      stopMouseAction();\n    }\n\n    return stopMouseAction;\n  }, [isResizing, handleMouseMove, handleMouseUp]);\n\n  // prevent onClick event when clicking on a divider\n  const stopEventPropagation = (e: ReactMouseEvent): void => e.stopPropagation();\n\n  return <ResizableDividerBox onMouseDown={handleMouseDown} onClick={stopEventPropagation} />;\n}\n\nconst ResizableDividerBox = styled(Box)(({ theme }) => ({\n  position: 'relative',\n  width: '1px',\n  minWidth: '1px',\n  height: '100%',\n  backgroundColor: theme.palette.divider,\n  cursor: 'col-resize',\n\n  // increase clickable area from 1px to 7px\n  '&:before': {\n    position: 'absolute',\n    width: '7px',\n    left: '-3px',\n    top: 0,\n    bottom: 0,\n    content: '\" \"',\n    zIndex: 1, // without zIndex, the span duration row hides the right side of this element\n  },\n}));\n"],"names":["Box","styled","useEvent","useEffect","useState","ResizableDivider","props","parentRef","spacing","onMove","isResizing","setResizing","handleMouseDown","e","preventDefault","handleMouseMove","current","parentRect","getBoundingClientRect","offsetX","clientX","left","leftPercent","width","handleMouseUp","startMouseAction","window","addEventListener","document","body","style","cursor","stopMouseAction","removeEventListener","stopEventPropagation","stopPropagation","ResizableDividerBox","onMouseDown","onClick","theme","position","minWidth","height","backgroundColor","palette","divider","top","bottom","content","zIndex"],"mappings":";AAAA,+BAA+B;AAC/B,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;AAC5C,SAASC,QAAQ,QAAQ,4BAA4B;AAErD,SAASC,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAQ5C,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EAAEC,SAAS,EAAEC,UAAU,CAAC,EAAEC,MAAM,EAAE,GAAGH;IAC3C,MAAM,CAACI,YAAYC,YAAY,GAAGP,SAAS;IAE3C,MAAMQ,kBAAkB,CAACC;QACvB,qDAAqD;QACrDA,EAAEC,cAAc;QAEhBH,YAAY;IACd;IAEA,8EAA8E;IAC9E,MAAMI,kBAAkBb,SAAS,CAACW;QAChC,IAAI,CAACN,UAAUS,OAAO,EAAE;QAExB,MAAMC,aAAaV,UAAUS,OAAO,CAACE,qBAAqB;QAE1D,kGAAkG;QAClG,+HAA+H;QAC/H,MAAMC,UAAUN,EAAEO,OAAO,GAAGH,WAAWI,IAAI,GAAGb;QAC9C,MAAMc,cAAcH,UAAUF,WAAWM,KAAK;QAE9C,IAAI,QAAQD,eAAeA,eAAe,MAAM;YAC9Cb,OAAOa;QACT;IACF;IAEA,8EAA8E;IAC9E,MAAME,gBAAgBtB,SAAS;QAC7BS,YAAY;IACd;IAEA,2FAA2F;IAC3FR,UAAU;QACR,SAASsB;YACPC,OAAOC,gBAAgB,CAAC,aAAaZ;YACrCW,OAAOC,gBAAgB,CAAC,WAAWH;YACnCI,SAASC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG;QAC/B;QAEA,SAASC;YACPN,OAAOO,mBAAmB,CAAC,aAAalB;YACxCW,OAAOO,mBAAmB,CAAC,WAAWT;YACtCI,SAASC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG;QAC/B;QAEA,IAAIrB,YAAY;YACde;QACF,OAAO;YACLO;QACF;QAEA,OAAOA;IACT,GAAG;QAACtB;QAAYK;QAAiBS;KAAc;IAE/C,mDAAmD;IACnD,MAAMU,uBAAuB,CAACrB,IAA6BA,EAAEsB,eAAe;IAE5E,qBAAO,KAACC;QAAoBC,aAAazB;QAAiB0B,SAASJ;;AACrE;AAEA,MAAME,sBAAsBnC,OAAOD,KAAK,CAAC,EAAEuC,KAAK,EAAE,GAAM,CAAA;QACtDC,UAAU;QACVjB,OAAO;QACPkB,UAAU;QACVC,QAAQ;QACRC,iBAAiBJ,MAAMK,OAAO,CAACC,OAAO;QACtCd,QAAQ;QAER,0CAA0C;QAC1C,YAAY;YACVS,UAAU;YACVjB,OAAO;YACPF,MAAM;YACNyB,KAAK;YACLC,QAAQ;YACRC,SAAS;YACTC,QAAQ;QACV;IACF,CAAA"}

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

@@ -1,7 +1,7 @@
-import { ReactElement } from 'react';
-import { Viewport } from '../utils';
-import { TracingGanttChartOptions } from '../../gantt-chart-model';
-import { Span } from '../trace';
+import type { ReactElement } from 'react';
+import type { TracingGanttChartOptions } from '../../gantt-chart-model';
+import type { Span } from '../trace';
+import type { Viewport } from '../utils';
 export interface SpanDurationProps {
     options: TracingGanttChartOptions;
     span: Span;

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

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

package/lib/TracingGanttChart/GanttTable/SpanDuration.js

@@ -11,10 +11,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 { Box, useTheme } from '@mui/material';
-import { useChartsTheme } from '@perses-dev/components';
-import { formatDuration, getSpanColor, minSpanWidthPx } from '../utils';
-import { Ticks } from '../Ticks';
+import { Box, useTheme } from "@mui/material";
+import { useChartsTheme } from "@perses-dev/components";
+import { Ticks } from "../Ticks.js";
+import { formatDuration, getSpanColor, minSpanWidthPx } from "../utils.js";
 /**
  * SpanDuration renders the right column of a SpanRow, i.e. the span bar and span duration
  */ export function SpanDuration(props) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/SpanDuration.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, useTheme } from '@mui/material';\nimport { useChartsTheme } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { Viewport, formatDuration, getSpanColor, minSpanWidthPx } from '../utils';\nimport { Ticks } from '../Ticks';\nimport { TracingGanttChartOptions } from '../../gantt-chart-model';\nimport { Span } from '../trace';\n\nexport interface SpanDurationProps {\n  options: TracingGanttChartOptions;\n  span: Span;\n  viewport: Viewport;\n}\n\n/**\n * SpanDuration renders the right column of a SpanRow, i.e. the span bar and span duration\n */\nexport function SpanDuration(props: SpanDurationProps): ReactElement {\n  const { options, span, viewport } = props;\n  const muiTheme = useTheme();\n  const chartsTheme = useChartsTheme();\n\n  const spanDuration = span.endTimeUnixMs - span.startTimeUnixMs;\n  const viewportDuration = viewport.endTimeUnixMs - viewport.startTimeUnixMs;\n  const relativeDuration = spanDuration / viewportDuration;\n  const relativeStart = (span.startTimeUnixMs - viewport.startTimeUnixMs) / viewportDuration;\n\n  return (\n    <Box sx={{ position: 'relative', height: '100%', flexGrow: 1, overflow: 'hidden' }}>\n      <Ticks />\n      <Box\n        data-testid=\"span-duration-bar\"\n        sx={{\n          position: 'absolute',\n          top: 0,\n          bottom: 0,\n          margin: 'auto',\n          minWidth: `${minSpanWidthPx}px`,\n          height: '8px',\n          borderRadius: muiTheme.shape.borderRadius,\n        }}\n        style={{\n          left: `${relativeStart * 100}%`,\n          width: `${relativeDuration * 100}%`,\n          backgroundColor: getSpanColor(muiTheme, chartsTheme, options.visual?.palette?.mode, span),\n        }}\n      />\n      <Box\n        sx={{\n          position: 'absolute',\n          top: '50%',\n          transform: 'translateY(-50%)',\n          padding: '0 8px',\n          color: muiTheme.palette.grey[700],\n          fontSize: '.7rem',\n        }}\n        style={\n          /* print span duration on right side of the span bar, if there is space */\n          relativeStart + relativeDuration < 0.95\n            ? {\n                left: `${(relativeStart + relativeDuration) * 100}%`,\n              }\n            : {\n                left: `${relativeStart * 100}%`,\n                transform: 'translateY(-50%) translateX(-100%)',\n              }\n        }\n      >\n        {formatDuration(spanDuration)}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["Box","useTheme","useChartsTheme","formatDuration","getSpanColor","minSpanWidthPx","Ticks","SpanDuration","props","options","span","viewport","muiTheme","chartsTheme","spanDuration","endTimeUnixMs","startTimeUnixMs","viewportDuration","relativeDuration","relativeStart","sx","position","height","flexGrow","overflow","data-testid","top","bottom","margin","minWidth","borderRadius","shape","style","left","width","backgroundColor","visual","palette","mode","transform","padding","color","grey","fontSize"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AAC9C,SAASC,cAAc,QAAQ,yBAAyB;AAExD,SAAmBC,cAAc,EAAEC,YAAY,EAAEC,cAAc,QAAQ,WAAW;AAClF,SAASC,KAAK,QAAQ,WAAW;AAUjC;;CAEC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGH;IACpC,MAAMI,WAAWX;IACjB,MAAMY,cAAcX;IAEpB,MAAMY,eAAeJ,KAAKK,aAAa,GAAGL,KAAKM,eAAe;IAC9D,MAAMC,mBAAmBN,SAASI,aAAa,GAAGJ,SAASK,eAAe;IAC1E,MAAME,mBAAmBJ,eAAeG;IACxC,MAAME,gBAAgB,AAACT,CAAAA,KAAKM,eAAe,GAAGL,SAASK,eAAe,AAAD,IAAKC;IAE1E,qBACE,MAACjB;QAAIoB,IAAI;YAAEC,UAAU;YAAYC,QAAQ;YAAQC,UAAU;YAAGC,UAAU;QAAS;;0BAC/E,KAAClB;0BACD,KAACN;gBACCyB,eAAY;gBACZL,IAAI;oBACFC,UAAU;oBACVK,KAAK;oBACLC,QAAQ;oBACRC,QAAQ;oBACRC,UAAU,GAAGxB,eAAe,EAAE,CAAC;oBAC/BiB,QAAQ;oBACRQ,cAAclB,SAASmB,KAAK,CAACD,YAAY;gBAC3C;gBACAE,OAAO;oBACLC,MAAM,GAAGd,gBAAgB,IAAI,CAAC,CAAC;oBAC/Be,OAAO,GAAGhB,mBAAmB,IAAI,CAAC,CAAC;oBACnCiB,iBAAiB/B,aAAaQ,UAAUC,aAAaJ,QAAQ2B,MAAM,EAAEC,SAASC,MAAM5B;gBACtF;;0BAEF,KAACV;gBACCoB,IAAI;oBACFC,UAAU;oBACVK,KAAK;oBACLa,WAAW;oBACXC,SAAS;oBACTC,OAAO7B,SAASyB,OAAO,CAACK,IAAI,CAAC,IAAI;oBACjCC,UAAU;gBACZ;gBACAX,OACE,wEAAwE,GACxEb,gBAAgBD,mBAAmB,OAC/B;oBACEe,MAAM,GAAG,AAACd,CAAAA,gBAAgBD,gBAAe,IAAK,IAAI,CAAC,CAAC;gBACtD,IACA;oBACEe,MAAM,GAAGd,gBAAgB,IAAI,CAAC,CAAC;oBAC/BoB,WAAW;gBACb;0BAGLpC,eAAeW;;;;AAIxB"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/SpanDuration.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, useTheme } from '@mui/material';\nimport { useChartsTheme } from '@perses-dev/components';\nimport type { ReactElement } from 'react';\n\nimport type { TracingGanttChartOptions } from '../../gantt-chart-model';\nimport { Ticks } from '../Ticks';\nimport type { Span } from '../trace';\nimport type { Viewport } from '../utils';\nimport { formatDuration, getSpanColor, minSpanWidthPx } from '../utils';\n\nexport interface SpanDurationProps {\n  options: TracingGanttChartOptions;\n  span: Span;\n  viewport: Viewport;\n}\n\n/**\n * SpanDuration renders the right column of a SpanRow, i.e. the span bar and span duration\n */\nexport function SpanDuration(props: SpanDurationProps): ReactElement {\n  const { options, span, viewport } = props;\n  const muiTheme = useTheme();\n  const chartsTheme = useChartsTheme();\n\n  const spanDuration = span.endTimeUnixMs - span.startTimeUnixMs;\n  const viewportDuration = viewport.endTimeUnixMs - viewport.startTimeUnixMs;\n  const relativeDuration = spanDuration / viewportDuration;\n  const relativeStart = (span.startTimeUnixMs - viewport.startTimeUnixMs) / viewportDuration;\n\n  return (\n    <Box sx={{ position: 'relative', height: '100%', flexGrow: 1, overflow: 'hidden' }}>\n      <Ticks />\n      <Box\n        data-testid=\"span-duration-bar\"\n        sx={{\n          position: 'absolute',\n          top: 0,\n          bottom: 0,\n          margin: 'auto',\n          minWidth: `${minSpanWidthPx}px`,\n          height: '8px',\n          borderRadius: muiTheme.shape.borderRadius,\n        }}\n        style={{\n          left: `${relativeStart * 100}%`,\n          width: `${relativeDuration * 100}%`,\n          backgroundColor: getSpanColor(muiTheme, chartsTheme, options.visual?.palette?.mode, span),\n        }}\n      />\n      <Box\n        sx={{\n          position: 'absolute',\n          top: '50%',\n          transform: 'translateY(-50%)',\n          padding: '0 8px',\n          color: muiTheme.palette.grey[700],\n          fontSize: '.7rem',\n        }}\n        style={\n          /* print span duration on right side of the span bar, if there is space */\n          relativeStart + relativeDuration < 0.95\n            ? {\n                left: `${(relativeStart + relativeDuration) * 100}%`,\n              }\n            : {\n                left: `${relativeStart * 100}%`,\n                transform: 'translateY(-50%) translateX(-100%)',\n              }\n        }\n      >\n        {formatDuration(spanDuration)}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["Box","useTheme","useChartsTheme","Ticks","formatDuration","getSpanColor","minSpanWidthPx","SpanDuration","props","options","span","viewport","muiTheme","chartsTheme","spanDuration","endTimeUnixMs","startTimeUnixMs","viewportDuration","relativeDuration","relativeStart","sx","position","height","flexGrow","overflow","data-testid","top","bottom","margin","minWidth","borderRadius","shape","style","left","width","backgroundColor","visual","palette","mode","transform","padding","color","grey","fontSize"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AAC9C,SAASC,cAAc,QAAQ,yBAAyB;AAIxD,SAASC,KAAK,QAAQ,cAAW;AAGjC,SAASC,cAAc,EAAEC,YAAY,EAAEC,cAAc,QAAQ,cAAW;AAQxE;;CAEC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGH;IACpC,MAAMI,WAAWX;IACjB,MAAMY,cAAcX;IAEpB,MAAMY,eAAeJ,KAAKK,aAAa,GAAGL,KAAKM,eAAe;IAC9D,MAAMC,mBAAmBN,SAASI,aAAa,GAAGJ,SAASK,eAAe;IAC1E,MAAME,mBAAmBJ,eAAeG;IACxC,MAAME,gBAAgB,AAACT,CAAAA,KAAKM,eAAe,GAAGL,SAASK,eAAe,AAAD,IAAKC;IAE1E,qBACE,MAACjB;QAAIoB,IAAI;YAAEC,UAAU;YAAYC,QAAQ;YAAQC,UAAU;YAAGC,UAAU;QAAS;;0BAC/E,KAACrB;0BACD,KAACH;gBACCyB,eAAY;gBACZL,IAAI;oBACFC,UAAU;oBACVK,KAAK;oBACLC,QAAQ;oBACRC,QAAQ;oBACRC,UAAU,GAAGvB,eAAe,EAAE,CAAC;oBAC/BgB,QAAQ;oBACRQ,cAAclB,SAASmB,KAAK,CAACD,YAAY;gBAC3C;gBACAE,OAAO;oBACLC,MAAM,GAAGd,gBAAgB,IAAI,CAAC,CAAC;oBAC/Be,OAAO,GAAGhB,mBAAmB,IAAI,CAAC,CAAC;oBACnCiB,iBAAiB9B,aAAaO,UAAUC,aAAaJ,QAAQ2B,MAAM,EAAEC,SAASC,MAAM5B;gBACtF;;0BAEF,KAACV;gBACCoB,IAAI;oBACFC,UAAU;oBACVK,KAAK;oBACLa,WAAW;oBACXC,SAAS;oBACTC,OAAO7B,SAASyB,OAAO,CAACK,IAAI,CAAC,IAAI;oBACjCC,UAAU;gBACZ;gBACAX,OACE,wEAAwE,GACxEb,gBAAgBD,mBAAmB,OAC/B;oBACEe,MAAM,GAAG,AAACd,CAAAA,gBAAgBD,gBAAe,IAAK,IAAI,CAAC,CAAC;gBACtD,IACA;oBACEe,MAAM,GAAGd,gBAAgB,IAAI,CAAC,CAAC;oBAC/BoB,WAAW;gBACb;0BAGLnC,eAAeU;;;;AAIxB"}

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

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { Span } from '../trace';
+import type { ReactElement } from 'react';
+import type { Span } from '../trace';
 export interface SpanIndentsProps {
     span: Span;
 }

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

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

package/lib/TracingGanttChart/GanttTable/SpanIndents.js

@@ -11,11 +11,11 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 // 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 { styled, useTheme } from '@mui/material';
-import ChevronDownIcon from 'mdi-material-ui/ChevronDown';
-import ChevronRightIcon from 'mdi-material-ui/ChevronRight';
-import { useCallback } from 'react';
-import { useGanttTableContext } from './GanttTableProvider';
+import { styled, useTheme } from "@mui/material";
+import ChevronDownIcon from "mdi-material-ui/ChevronDown";
+import ChevronRightIcon from "mdi-material-ui/ChevronRight";
+import { useCallback } from "react";
+import { useGanttTableContext } from "./GanttTableProvider.js";
 const MIN_INDENT_WIDTH = 8;
 const MAX_INDENT_WIDTH = 24;
 /**

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/SpanIndents.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { styled, useTheme } from '@mui/material';\nimport ChevronDownIcon from 'mdi-material-ui/ChevronDown';\nimport ChevronRightIcon from 'mdi-material-ui/ChevronRight';\nimport { MouseEvent, ReactElement, useCallback } from 'react';\nimport { Span } from '../trace';\nimport { useGanttTableContext } from './GanttTableProvider';\n\nconst MIN_INDENT_WIDTH = 8;\nconst MAX_INDENT_WIDTH = 24;\n\nexport interface SpanIndentsProps {\n  span: Span;\n}\n\n/**\n * SpanIndents renders the indention boxes,\n * and handles the click and mouseOver events\n *\n * Note: This component gets re-rendered on every hover of any indention box,\n * therefore rendering performance is essential.\n */\nexport function SpanIndents(props: SpanIndentsProps): ReactElement {\n  const { span } = props;\n  const { collapsedSpans, setCollapsedSpans, visibleSpans, hoveredParent, setHoveredParent } = useGanttTableContext();\n  const theme = useTheme();\n\n  const handleToggleClick = useCallback(\n    (e: MouseEvent) => {\n      e.stopPropagation();\n      setCollapsedSpans((prev) => {\n        const next = new Set(prev);\n        if (next.has(span.spanId)) {\n          next.delete(span.spanId);\n        } else {\n          next.add(span.spanId);\n        }\n        return next;\n      });\n    },\n    [span, setCollapsedSpans]\n  );\n\n  const handleIconMouseEnter = useCallback(() => {\n    setHoveredParent(span.spanId);\n  }, [span, setHoveredParent]);\n\n  const spans = [span];\n  let parent = span.parentSpan;\n  while (parent) {\n    spans.unshift(parent);\n    parent = parent.parentSpan;\n  }\n\n  // on first render visibleSpans is empty, therefore let's use MAX_INDENT_WIDTH to avoid an animation on page load.\n  return (\n    <>\n      {spans.map((span, i) => (\n        <SpanIndentBox\n          key={span.spanId}\n          style={{\n            width:\n              i === spans.length - 1 || visibleSpans.length === 0 || visibleSpans.includes(span.spanId)\n                ? MAX_INDENT_WIDTH\n                : MIN_INDENT_WIDTH,\n            borderLeft: `${hoveredParent === (span.parentSpanId ?? '') ? 3 : 1}px solid ${theme.palette.divider}`,\n          }}\n          onMouseEnter={() => setHoveredParent(span.parentSpanId ?? '')}\n          onMouseLeave={() => setHoveredParent(undefined)}\n        >\n          {i === spans.length - 1 &&\n            span.childSpans.length > 0 &&\n            (collapsedSpans.has(span.spanId) ? (\n              <ChevronRightIcon titleAccess=\"expand\" onClick={handleToggleClick} onMouseEnter={handleIconMouseEnter} />\n            ) : (\n              <ChevronDownIcon titleAccess=\"collapse\" onClick={handleToggleClick} onMouseEnter={handleIconMouseEnter} />\n            ))}\n        </SpanIndentBox>\n      ))}\n    </>\n  );\n}\n\nconst SpanIndentBox = styled('div')({\n  display: 'flex',\n  height: '100%',\n  alignItems: 'center',\n  justifyContent: 'flex-end',\n  flexShrink: 0,\n  transition: 'width 1s',\n});\n"],"names":["styled","useTheme","ChevronDownIcon","ChevronRightIcon","useCallback","useGanttTableContext","MIN_INDENT_WIDTH","MAX_INDENT_WIDTH","SpanIndents","props","span","collapsedSpans","setCollapsedSpans","visibleSpans","hoveredParent","setHoveredParent","theme","handleToggleClick","e","stopPropagation","prev","next","Set","has","spanId","delete","add","handleIconMouseEnter","spans","parent","parentSpan","unshift","map","i","SpanIndentBox","style","width","length","includes","borderLeft","parentSpanId","palette","divider","onMouseEnter","onMouseLeave","undefined","childSpans","titleAccess","onClick","display","height","alignItems","justifyContent","flexShrink","transition"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,MAAM,EAAEC,QAAQ,QAAQ,gBAAgB;AACjD,OAAOC,qBAAqB,8BAA8B;AAC1D,OAAOC,sBAAsB,+BAA+B;AAC5D,SAAmCC,WAAW,QAAQ,QAAQ;AAE9D,SAASC,oBAAoB,QAAQ,uBAAuB;AAE5D,MAAMC,mBAAmB;AACzB,MAAMC,mBAAmB;AAMzB;;;;;;CAMC,GACD,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,MAAM,EAAEE,cAAc,EAAEC,iBAAiB,EAAEC,YAAY,EAAEC,aAAa,EAAEC,gBAAgB,EAAE,GAAGV;IAC7F,MAAMW,QAAQf;IAEd,MAAMgB,oBAAoBb,YACxB,CAACc;QACCA,EAAEC,eAAe;QACjBP,kBAAkB,CAACQ;YACjB,MAAMC,OAAO,IAAIC,IAAIF;YACrB,IAAIC,KAAKE,GAAG,CAACb,KAAKc,MAAM,GAAG;gBACzBH,KAAKI,MAAM,CAACf,KAAKc,MAAM;YACzB,OAAO;gBACLH,KAAKK,GAAG,CAAChB,KAAKc,MAAM;YACtB;YACA,OAAOH;QACT;IACF,GACA;QAACX;QAAME;KAAkB;IAG3B,MAAMe,uBAAuBvB,YAAY;QACvCW,iBAAiBL,KAAKc,MAAM;IAC9B,GAAG;QAACd;QAAMK;KAAiB;IAE3B,MAAMa,QAAQ;QAAClB;KAAK;IACpB,IAAImB,SAASnB,KAAKoB,UAAU;IAC5B,MAAOD,OAAQ;QACbD,MAAMG,OAAO,CAACF;QACdA,SAASA,OAAOC,UAAU;IAC5B;IAEA,kHAAkH;IAClH,qBACE;kBACGF,MAAMI,GAAG,CAAC,CAACtB,MAAMuB,kBAChB,KAACC;gBAECC,OAAO;oBACLC,OACEH,MAAML,MAAMS,MAAM,GAAG,KAAKxB,aAAawB,MAAM,KAAK,KAAKxB,aAAayB,QAAQ,CAAC5B,KAAKc,MAAM,IACpFjB,mBACAD;oBACNiC,YAAY,GAAGzB,kBAAmBJ,CAAAA,KAAK8B,YAAY,IAAI,EAAC,IAAK,IAAI,EAAE,SAAS,EAAExB,MAAMyB,OAAO,CAACC,OAAO,EAAE;gBACvG;gBACAC,cAAc,IAAM5B,iBAAiBL,KAAK8B,YAAY,IAAI;gBAC1DI,cAAc,IAAM7B,iBAAiB8B;0BAEpCZ,MAAML,MAAMS,MAAM,GAAG,KACpB3B,KAAKoC,UAAU,CAACT,MAAM,GAAG,KACxB1B,CAAAA,eAAeY,GAAG,CAACb,KAAKc,MAAM,kBAC7B,KAACrB;oBAAiB4C,aAAY;oBAASC,SAAS/B;oBAAmB0B,cAAchB;mCAEjF,KAACzB;oBAAgB6C,aAAY;oBAAWC,SAAS/B;oBAAmB0B,cAAchB;kBACpF;eAjBGjB,KAAKc,MAAM;;AAsB1B;AAEA,MAAMU,gBAAgBlC,OAAO,OAAO;IAClCiD,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,gBAAgB;IAChBC,YAAY;IACZC,YAAY;AACd"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/SpanIndents.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { styled, useTheme } from '@mui/material';\nimport ChevronDownIcon from 'mdi-material-ui/ChevronDown';\nimport ChevronRightIcon from 'mdi-material-ui/ChevronRight';\nimport type { MouseEvent, ReactElement } from 'react';\nimport { useCallback } from 'react';\n\nimport type { Span } from '../trace';\nimport { useGanttTableContext } from './GanttTableProvider';\n\nconst MIN_INDENT_WIDTH = 8;\nconst MAX_INDENT_WIDTH = 24;\n\nexport interface SpanIndentsProps {\n  span: Span;\n}\n\n/**\n * SpanIndents renders the indention boxes,\n * and handles the click and mouseOver events\n *\n * Note: This component gets re-rendered on every hover of any indention box,\n * therefore rendering performance is essential.\n */\nexport function SpanIndents(props: SpanIndentsProps): ReactElement {\n  const { span } = props;\n  const { collapsedSpans, setCollapsedSpans, visibleSpans, hoveredParent, setHoveredParent } = useGanttTableContext();\n  const theme = useTheme();\n\n  const handleToggleClick = useCallback(\n    (e: MouseEvent) => {\n      e.stopPropagation();\n      setCollapsedSpans((prev) => {\n        const next = new Set(prev);\n        if (next.has(span.spanId)) {\n          next.delete(span.spanId);\n        } else {\n          next.add(span.spanId);\n        }\n        return next;\n      });\n    },\n    [span, setCollapsedSpans],\n  );\n\n  const handleIconMouseEnter = useCallback(() => {\n    setHoveredParent(span.spanId);\n  }, [span, setHoveredParent]);\n\n  const spans = [span];\n  let parent = span.parentSpan;\n  while (parent) {\n    spans.unshift(parent);\n    parent = parent.parentSpan;\n  }\n\n  // on first render visibleSpans is empty, therefore let's use MAX_INDENT_WIDTH to avoid an animation on page load.\n  return (\n    <>\n      {spans.map((span, i) => (\n        <SpanIndentBox\n          key={span.spanId}\n          style={{\n            width:\n              i === spans.length - 1 || visibleSpans.length === 0 || visibleSpans.includes(span.spanId)\n                ? MAX_INDENT_WIDTH\n                : MIN_INDENT_WIDTH,\n            borderLeft: `${hoveredParent === (span.parentSpanId ?? '') ? 3 : 1}px solid ${theme.palette.divider}`,\n          }}\n          onMouseEnter={() => setHoveredParent(span.parentSpanId ?? '')}\n          onMouseLeave={() => setHoveredParent(undefined)}\n        >\n          {i === spans.length - 1 &&\n            span.childSpans.length > 0 &&\n            (collapsedSpans.has(span.spanId) ? (\n              <ChevronRightIcon titleAccess=\"expand\" onClick={handleToggleClick} onMouseEnter={handleIconMouseEnter} />\n            ) : (\n              <ChevronDownIcon titleAccess=\"collapse\" onClick={handleToggleClick} onMouseEnter={handleIconMouseEnter} />\n            ))}\n        </SpanIndentBox>\n      ))}\n    </>\n  );\n}\n\nconst SpanIndentBox = styled('div')({\n  display: 'flex',\n  height: '100%',\n  alignItems: 'center',\n  justifyContent: 'flex-end',\n  flexShrink: 0,\n  transition: 'width 1s',\n});\n"],"names":["styled","useTheme","ChevronDownIcon","ChevronRightIcon","useCallback","useGanttTableContext","MIN_INDENT_WIDTH","MAX_INDENT_WIDTH","SpanIndents","props","span","collapsedSpans","setCollapsedSpans","visibleSpans","hoveredParent","setHoveredParent","theme","handleToggleClick","e","stopPropagation","prev","next","Set","has","spanId","delete","add","handleIconMouseEnter","spans","parent","parentSpan","unshift","map","i","SpanIndentBox","style","width","length","includes","borderLeft","parentSpanId","palette","divider","onMouseEnter","onMouseLeave","undefined","childSpans","titleAccess","onClick","display","height","alignItems","justifyContent","flexShrink","transition"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,MAAM,EAAEC,QAAQ,QAAQ,gBAAgB;AACjD,OAAOC,qBAAqB,8BAA8B;AAC1D,OAAOC,sBAAsB,+BAA+B;AAE5D,SAASC,WAAW,QAAQ,QAAQ;AAGpC,SAASC,oBAAoB,QAAQ,0BAAuB;AAE5D,MAAMC,mBAAmB;AACzB,MAAMC,mBAAmB;AAMzB;;;;;;CAMC,GACD,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,MAAM,EAAEE,cAAc,EAAEC,iBAAiB,EAAEC,YAAY,EAAEC,aAAa,EAAEC,gBAAgB,EAAE,GAAGV;IAC7F,MAAMW,QAAQf;IAEd,MAAMgB,oBAAoBb,YACxB,CAACc;QACCA,EAAEC,eAAe;QACjBP,kBAAkB,CAACQ;YACjB,MAAMC,OAAO,IAAIC,IAAIF;YACrB,IAAIC,KAAKE,GAAG,CAACb,KAAKc,MAAM,GAAG;gBACzBH,KAAKI,MAAM,CAACf,KAAKc,MAAM;YACzB,OAAO;gBACLH,KAAKK,GAAG,CAAChB,KAAKc,MAAM;YACtB;YACA,OAAOH;QACT;IACF,GACA;QAACX;QAAME;KAAkB;IAG3B,MAAMe,uBAAuBvB,YAAY;QACvCW,iBAAiBL,KAAKc,MAAM;IAC9B,GAAG;QAACd;QAAMK;KAAiB;IAE3B,MAAMa,QAAQ;QAAClB;KAAK;IACpB,IAAImB,SAASnB,KAAKoB,UAAU;IAC5B,MAAOD,OAAQ;QACbD,MAAMG,OAAO,CAACF;QACdA,SAASA,OAAOC,UAAU;IAC5B;IAEA,kHAAkH;IAClH,qBACE;kBACGF,MAAMI,GAAG,CAAC,CAACtB,MAAMuB,kBAChB,KAACC;gBAECC,OAAO;oBACLC,OACEH,MAAML,MAAMS,MAAM,GAAG,KAAKxB,aAAawB,MAAM,KAAK,KAAKxB,aAAayB,QAAQ,CAAC5B,KAAKc,MAAM,IACpFjB,mBACAD;oBACNiC,YAAY,GAAGzB,kBAAmBJ,CAAAA,KAAK8B,YAAY,IAAI,EAAC,IAAK,IAAI,EAAE,SAAS,EAAExB,MAAMyB,OAAO,CAACC,OAAO,EAAE;gBACvG;gBACAC,cAAc,IAAM5B,iBAAiBL,KAAK8B,YAAY,IAAI;gBAC1DI,cAAc,IAAM7B,iBAAiB8B;0BAEpCZ,MAAML,MAAMS,MAAM,GAAG,KACpB3B,KAAKoC,UAAU,CAACT,MAAM,GAAG,KACxB1B,CAAAA,eAAeY,GAAG,CAACb,KAAKc,MAAM,kBAC7B,KAACrB;oBAAiB4C,aAAY;oBAASC,SAAS/B;oBAAmB0B,cAAchB;mCAEjF,KAACzB;oBAAgB6C,aAAY;oBAAWC,SAAS/B;oBAAmB0B,cAAchB;kBACpF;eAjBGjB,KAAKc,MAAM;;AAsB1B;AAEA,MAAMU,gBAAgBlC,OAAO,OAAO;IAClCiD,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,gBAAgB;IAChBC,YAAY;IACZC,YAAY;AACd"}

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

@@ -1,6 +1,6 @@
-import { ReactElement } from 'react';
-import { Span } from '../trace';
-import { CustomLinks } from '../../gantt-chart-model';
+import type { ReactElement } from 'react';
+import type { CustomLinks } from '../../gantt-chart-model';
+import type { Span } from '../trace';
 export interface SpanLinksButtonProps {
     customLinks: CustomLinks;
     span: Span;

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

@@ -1 +1 @@
-{"version":3,"file":"SpanLinksButton.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/GanttTable/SpanLinksButton.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAc,YAAY,EAAY,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,WAAW,CAAC;IACzB,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,GAAG,IAAI,CA6EhF"}
+{"version":3,"file":"SpanLinksButton.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/GanttTable/SpanLinksButton.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAc,YAAY,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAErC,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,WAAW,CAAC;IACzB,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,GAAG,IAAI,CA6EhF"}

package/lib/TracingGanttChart/GanttTable/SpanLinksButton.js

@@ -11,11 +11,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // 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 { IconButton, Menu, MenuItem } from '@mui/material';
-import { useState } from 'react';
-import LaunchIcon from 'mdi-material-ui/Launch';
-import { InfoTooltip } from '@perses-dev/components';
-import { replaceVariablesInString, useAllVariableValues, useRouterContext } from '@perses-dev/plugin-system';
+import { IconButton, Menu, MenuItem } from "@mui/material";
+import { InfoTooltip } from "@perses-dev/components";
+import { replaceVariablesInString, useAllVariableValues, useRouterContext } from "@perses-dev/plugin-system";
+import LaunchIcon from "mdi-material-ui/Launch";
+import { useState } from "react";
 export function SpanLinksButton(props) {
     const { customLinks, span } = props;
     const variableValues = useAllVariableValues();

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/SpanLinksButton.tsx"],"sourcesContent":["// Copyright 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 { IconButton, Menu, MenuItem } from '@mui/material';\nimport { MouseEvent, ReactElement, useState } from 'react';\nimport LaunchIcon from 'mdi-material-ui/Launch';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { replaceVariablesInString, useAllVariableValues, useRouterContext } from '@perses-dev/plugin-system';\nimport { Span } from '../trace';\nimport { CustomLinks } from '../../gantt-chart-model';\n\nexport interface SpanLinksButtonProps {\n  customLinks: CustomLinks;\n  span: Span;\n}\n\nexport function SpanLinksButton(props: SpanLinksButtonProps): ReactElement | null {\n  const { customLinks, span } = props;\n  const variableValues = useAllVariableValues();\n  const { RouterComponent } = useRouterContext();\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const isOpen = Boolean(anchorEl);\n\n  if (!RouterComponent || !customLinks.links.span) {\n    return null;\n  }\n\n  // if there is a single span link, render the button directly without a menu\n  if (span.links.length === 1 && span.links[0]) {\n    const link = span.links[0];\n    return (\n      <InfoTooltip description=\"open linked span\">\n        <IconButton\n          size=\"small\"\n          component={RouterComponent}\n          to={replaceVariablesInString(customLinks.links.span, variableValues, {\n            ...customLinks.variables,\n            traceId: link.traceId,\n            spanId: link.spanId,\n          })}\n        >\n          <LaunchIcon fontSize=\"inherit\" />\n        </IconButton>\n      </InfoTooltip>\n    );\n  }\n\n  const handleOpenMenu = (event: MouseEvent<HTMLButtonElement>): void => {\n    // do not propagate onClick event to the table row (otherwise, the detail pane would open)\n    event.stopPropagation();\n\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = (event: MouseEvent): void => {\n    // 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).\n    // Therefore, stop propagating this event\n    event.stopPropagation();\n\n    setAnchorEl(null);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={`${span.links.length} linked spans`}>\n        <IconButton\n          aria-label=\"span links\"\n          aria-haspopup=\"true\"\n          aria-expanded={isOpen ? 'true' : undefined}\n          size=\"small\"\n          onClick={handleOpenMenu}\n        >\n          <LaunchIcon fontSize=\"inherit\" />\n        </IconButton>\n      </InfoTooltip>\n      <Menu anchorEl={anchorEl} open={isOpen} onClose={handleClose}>\n        {span.links.map((link) => (\n          <MenuItem\n            key={link.spanId}\n            component={RouterComponent}\n            onClick={handleClose}\n            to={replaceVariablesInString(customLinks.links.span!, variableValues, {\n              ...customLinks.variables,\n              traceId: link.traceId,\n              spanId: link.spanId,\n            })}\n          >\n            Open linked span {link.spanId}\n          </MenuItem>\n        ))}\n      </Menu>\n    </>\n  );\n}\n"],"names":["IconButton","Menu","MenuItem","useState","LaunchIcon","InfoTooltip","replaceVariablesInString","useAllVariableValues","useRouterContext","SpanLinksButton","props","customLinks","span","variableValues","RouterComponent","anchorEl","setAnchorEl","isOpen","Boolean","links","length","link","description","size","component","to","variables","traceId","spanId","fontSize","handleOpenMenu","event","stopPropagation","currentTarget","handleClose","aria-label","aria-haspopup","aria-expanded","undefined","onClick","open","onClose","map"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,UAAU,EAAEC,IAAI,EAAEC,QAAQ,QAAQ,gBAAgB;AAC3D,SAAmCC,QAAQ,QAAQ,QAAQ;AAC3D,OAAOC,gBAAgB,yBAAyB;AAChD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,wBAAwB,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAS7G,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,WAAW,EAAEC,IAAI,EAAE,GAAGF;IAC9B,MAAMG,iBAAiBN;IACvB,MAAM,EAAEO,eAAe,EAAE,GAAGN;IAC5B,MAAM,CAACO,UAAUC,YAAY,GAAGb,SAA6B;IAC7D,MAAMc,SAASC,QAAQH;IAEvB,IAAI,CAACD,mBAAmB,CAACH,YAAYQ,KAAK,CAACP,IAAI,EAAE;QAC/C,OAAO;IACT;IAEA,4EAA4E;IAC5E,IAAIA,KAAKO,KAAK,CAACC,MAAM,KAAK,KAAKR,KAAKO,KAAK,CAAC,EAAE,EAAE;QAC5C,MAAME,OAAOT,KAAKO,KAAK,CAAC,EAAE;QAC1B,qBACE,KAACd;YAAYiB,aAAY;sBACvB,cAAA,KAACtB;gBACCuB,MAAK;gBACLC,WAAWV;gBACXW,IAAInB,yBAAyBK,YAAYQ,KAAK,CAACP,IAAI,EAAEC,gBAAgB;oBACnE,GAAGF,YAAYe,SAAS;oBACxBC,SAASN,KAAKM,OAAO;oBACrBC,QAAQP,KAAKO,MAAM;gBACrB;0BAEA,cAAA,KAACxB;oBAAWyB,UAAS;;;;IAI7B;IAEA,MAAMC,iBAAiB,CAACC;QACtB,0FAA0F;QAC1FA,MAAMC,eAAe;QAErBhB,YAAYe,MAAME,aAAa;IACjC;IAEA,MAAMC,cAAc,CAACH;QACnB,2JAA2J;QAC3J,yCAAyC;QACzCA,MAAMC,eAAe;QAErBhB,YAAY;IACd;IAEA,qBACE;;0BACE,KAACX;gBAAYiB,aAAa,GAAGV,KAAKO,KAAK,CAACC,MAAM,CAAC,aAAa,CAAC;0BAC3D,cAAA,KAACpB;oBACCmC,cAAW;oBACXC,iBAAc;oBACdC,iBAAepB,SAAS,SAASqB;oBACjCf,MAAK;oBACLgB,SAAST;8BAET,cAAA,KAAC1B;wBAAWyB,UAAS;;;;0BAGzB,KAAC5B;gBAAKc,UAAUA;gBAAUyB,MAAMvB;gBAAQwB,SAASP;0BAC9CtB,KAAKO,KAAK,CAACuB,GAAG,CAAC,CAACrB,qBACf,MAACnB;wBAECsB,WAAWV;wBACXyB,SAASL;wBACTT,IAAInB,yBAAyBK,YAAYQ,KAAK,CAACP,IAAI,EAAGC,gBAAgB;4BACpE,GAAGF,YAAYe,SAAS;4BACxBC,SAASN,KAAKM,OAAO;4BACrBC,QAAQP,KAAKO,MAAM;wBACrB;;4BACD;4BACmBP,KAAKO,MAAM;;uBATxBP,KAAKO,MAAM;;;;AAe5B"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/SpanLinksButton.tsx"],"sourcesContent":["// Copyright 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 { IconButton, Menu, MenuItem } from '@mui/material';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { replaceVariablesInString, useAllVariableValues, useRouterContext } from '@perses-dev/plugin-system';\nimport LaunchIcon from 'mdi-material-ui/Launch';\nimport type { MouseEvent, ReactElement } from 'react';\nimport { useState } from 'react';\n\nimport type { CustomLinks } from '../../gantt-chart-model';\nimport type { Span } from '../trace';\n\nexport interface SpanLinksButtonProps {\n  customLinks: CustomLinks;\n  span: Span;\n}\n\nexport function SpanLinksButton(props: SpanLinksButtonProps): ReactElement | null {\n  const { customLinks, span } = props;\n  const variableValues = useAllVariableValues();\n  const { RouterComponent } = useRouterContext();\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const isOpen = Boolean(anchorEl);\n\n  if (!RouterComponent || !customLinks.links.span) {\n    return null;\n  }\n\n  // if there is a single span link, render the button directly without a menu\n  if (span.links.length === 1 && span.links[0]) {\n    const link = span.links[0];\n    return (\n      <InfoTooltip description=\"open linked span\">\n        <IconButton\n          size=\"small\"\n          component={RouterComponent}\n          to={replaceVariablesInString(customLinks.links.span, variableValues, {\n            ...customLinks.variables,\n            traceId: link.traceId,\n            spanId: link.spanId,\n          })}\n        >\n          <LaunchIcon fontSize=\"inherit\" />\n        </IconButton>\n      </InfoTooltip>\n    );\n  }\n\n  const handleOpenMenu = (event: MouseEvent<HTMLButtonElement>): void => {\n    // do not propagate onClick event to the table row (otherwise, the detail pane would open)\n    event.stopPropagation();\n\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = (event: MouseEvent): void => {\n    // 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).\n    // Therefore, stop propagating this event\n    event.stopPropagation();\n\n    setAnchorEl(null);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={`${span.links.length} linked spans`}>\n        <IconButton\n          aria-label=\"span links\"\n          aria-haspopup=\"true\"\n          aria-expanded={isOpen ? 'true' : undefined}\n          size=\"small\"\n          onClick={handleOpenMenu}\n        >\n          <LaunchIcon fontSize=\"inherit\" />\n        </IconButton>\n      </InfoTooltip>\n      <Menu anchorEl={anchorEl} open={isOpen} onClose={handleClose}>\n        {span.links.map((link) => (\n          <MenuItem\n            key={link.spanId}\n            component={RouterComponent}\n            onClick={handleClose}\n            to={replaceVariablesInString(customLinks.links.span!, variableValues, {\n              ...customLinks.variables,\n              traceId: link.traceId,\n              spanId: link.spanId,\n            })}\n          >\n            Open linked span {link.spanId}\n          </MenuItem>\n        ))}\n      </Menu>\n    </>\n  );\n}\n"],"names":["IconButton","Menu","MenuItem","InfoTooltip","replaceVariablesInString","useAllVariableValues","useRouterContext","LaunchIcon","useState","SpanLinksButton","props","customLinks","span","variableValues","RouterComponent","anchorEl","setAnchorEl","isOpen","Boolean","links","length","link","description","size","component","to","variables","traceId","spanId","fontSize","handleOpenMenu","event","stopPropagation","currentTarget","handleClose","aria-label","aria-haspopup","aria-expanded","undefined","onClick","open","onClose","map"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,UAAU,EAAEC,IAAI,EAAEC,QAAQ,QAAQ,gBAAgB;AAC3D,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,wBAAwB,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC7G,OAAOC,gBAAgB,yBAAyB;AAEhD,SAASC,QAAQ,QAAQ,QAAQ;AAUjC,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,WAAW,EAAEC,IAAI,EAAE,GAAGF;IAC9B,MAAMG,iBAAiBR;IACvB,MAAM,EAAES,eAAe,EAAE,GAAGR;IAC5B,MAAM,CAACS,UAAUC,YAAY,GAAGR,SAA6B;IAC7D,MAAMS,SAASC,QAAQH;IAEvB,IAAI,CAACD,mBAAmB,CAACH,YAAYQ,KAAK,CAACP,IAAI,EAAE;QAC/C,OAAO;IACT;IAEA,4EAA4E;IAC5E,IAAIA,KAAKO,KAAK,CAACC,MAAM,KAAK,KAAKR,KAAKO,KAAK,CAAC,EAAE,EAAE;QAC5C,MAAME,OAAOT,KAAKO,KAAK,CAAC,EAAE;QAC1B,qBACE,KAAChB;YAAYmB,aAAY;sBACvB,cAAA,KAACtB;gBACCuB,MAAK;gBACLC,WAAWV;gBACXW,IAAIrB,yBAAyBO,YAAYQ,KAAK,CAACP,IAAI,EAAEC,gBAAgB;oBACnE,GAAGF,YAAYe,SAAS;oBACxBC,SAASN,KAAKM,OAAO;oBACrBC,QAAQP,KAAKO,MAAM;gBACrB;0BAEA,cAAA,KAACrB;oBAAWsB,UAAS;;;;IAI7B;IAEA,MAAMC,iBAAiB,CAACC;QACtB,0FAA0F;QAC1FA,MAAMC,eAAe;QAErBhB,YAAYe,MAAME,aAAa;IACjC;IAEA,MAAMC,cAAc,CAACH;QACnB,2JAA2J;QAC3J,yCAAyC;QACzCA,MAAMC,eAAe;QAErBhB,YAAY;IACd;IAEA,qBACE;;0BACE,KAACb;gBAAYmB,aAAa,GAAGV,KAAKO,KAAK,CAACC,MAAM,CAAC,aAAa,CAAC;0BAC3D,cAAA,KAACpB;oBACCmC,cAAW;oBACXC,iBAAc;oBACdC,iBAAepB,SAAS,SAASqB;oBACjCf,MAAK;oBACLgB,SAAST;8BAET,cAAA,KAACvB;wBAAWsB,UAAS;;;;0BAGzB,KAAC5B;gBAAKc,UAAUA;gBAAUyB,MAAMvB;gBAAQwB,SAASP;0BAC9CtB,KAAKO,KAAK,CAACuB,GAAG,CAAC,CAACrB,qBACf,MAACnB;wBAECsB,WAAWV;wBACXyB,SAASL;wBACTT,IAAIrB,yBAAyBO,YAAYQ,KAAK,CAACP,IAAI,EAAGC,gBAAgB;4BACpE,GAAGF,YAAYe,SAAS;4BACxBC,SAASN,KAAKM,OAAO;4BACrBC,QAAQP,KAAKO,MAAM;wBACrB;;4BACD;4BACmBP,KAAKO,MAAM;;uBATxBP,KAAKO,MAAM;;;;AAe5B"}

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

@@ -1,6 +1,6 @@
-import { ReactElement } from 'react';
-import { Span } from '../trace';
-import { CustomLinks } from '../../gantt-chart-model';
+import type { ReactElement } from 'react';
+import type { CustomLinks } from '../../gantt-chart-model';
+import type { Span } from '../trace';
 export interface SpanNameProps {
     customLinks?: CustomLinks;
     span: Span;

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

@@ -1 +1 @@
-{"version":3,"file":"SpanName.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/GanttTable/SpanName.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAItD,MAAM,WAAW,aAAa;IAC5B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,EAAE,IAAI,CAAC;IACX,eAAe,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,CAiB3D"}
+{"version":3,"file":"SpanName.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/GanttTable/SpanName.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAKrC,MAAM,WAAW,aAAa;IAC5B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,EAAE,IAAI,CAAC;IACX,eAAe,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,CAiB3D"}

package/lib/TracingGanttChart/GanttTable/SpanName.js

@@ -11,11 +11,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 { Box, Stack } from '@mui/material';
-import AlertIcon from 'mdi-material-ui/AlertCircleOutline';
-import { spanHasError } from '../utils';
-import { SpanIndents } from './SpanIndents';
-import { SpanLinksButton } from './SpanLinksButton';
+import { Box, Stack } from "@mui/material";
+import AlertIcon from "mdi-material-ui/AlertCircleOutline";
+import { spanHasError } from "../utils.js";
+import { SpanIndents } from "./SpanIndents.js";
+import { SpanLinksButton } from "./SpanLinksButton.js";
 /**
  * SpanName renders the entire left column of a SpanRow, i.e. the hierarchy and the service and span name
  */ export function SpanName(props) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/SpanName.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Stack } from '@mui/material';\nimport AlertIcon from 'mdi-material-ui/AlertCircleOutline';\nimport { ReactElement } from 'react';\nimport { spanHasError } from '../utils';\nimport { Span } from '../trace';\nimport { CustomLinks } from '../../gantt-chart-model';\nimport { SpanIndents } from './SpanIndents';\nimport { SpanLinksButton } from './SpanLinksButton';\n\nexport interface SpanNameProps {\n  customLinks?: CustomLinks;\n  span: Span;\n  nameColumnWidth: number;\n}\n\n/**\n * SpanName renders the entire left column of a SpanRow, i.e. the hierarchy and the service and span name\n */\nexport function SpanName(props: SpanNameProps): ReactElement {\n  const { customLinks, span, nameColumnWidth } = props;\n\n  return (\n    <Stack direction=\"row\" sx={{ alignItems: 'center' }} style={{ width: `${nameColumnWidth * 100}%` }}>\n      <SpanIndents span={span} />\n      {spanHasError(span) && <AlertIcon titleAccess=\"error\" color=\"error\" sx={{ marginRight: '5px' }} />}\n      <Box sx={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>\n        <strong>{span.resource.serviceName}:</strong> {span.name}\n      </Box>\n      {customLinks && customLinks.links.span && span.links.length > 0 && (\n        <Box sx={{ marginLeft: 'auto', px: 1 }}>\n          <SpanLinksButton customLinks={customLinks} span={span} />\n        </Box>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Box","Stack","AlertIcon","spanHasError","SpanIndents","SpanLinksButton","SpanName","props","customLinks","span","nameColumnWidth","direction","sx","alignItems","style","width","titleAccess","color","marginRight","whiteSpace","overflow","strong","resource","serviceName","name","links","length","marginLeft","px"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,EAAEC,KAAK,QAAQ,gBAAgB;AAC3C,OAAOC,eAAe,qCAAqC;AAE3D,SAASC,YAAY,QAAQ,WAAW;AAGxC,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,SAASC,eAAe,QAAQ,oBAAoB;AAQpD;;CAEC,GACD,OAAO,SAASC,SAASC,KAAoB;IAC3C,MAAM,EAAEC,WAAW,EAAEC,IAAI,EAAEC,eAAe,EAAE,GAAGH;IAE/C,qBACE,MAACN;QAAMU,WAAU;QAAMC,IAAI;YAAEC,YAAY;QAAS;QAAGC,OAAO;YAAEC,OAAO,GAAGL,kBAAkB,IAAI,CAAC,CAAC;QAAC;;0BAC/F,KAACN;gBAAYK,MAAMA;;YAClBN,aAAaM,uBAAS,KAACP;gBAAUc,aAAY;gBAAQC,OAAM;gBAAQL,IAAI;oBAAEM,aAAa;gBAAM;;0BAC7F,MAAClB;gBAAIY,IAAI;oBAAEO,YAAY;oBAAUC,UAAU;gBAAS;;kCAClD,MAACC;;4BAAQZ,KAAKa,QAAQ,CAACC,WAAW;4BAAC;;;oBAAU;oBAAEd,KAAKe,IAAI;;;YAEzDhB,eAAeA,YAAYiB,KAAK,CAAChB,IAAI,IAAIA,KAAKgB,KAAK,CAACC,MAAM,GAAG,mBAC5D,KAAC1B;gBAAIY,IAAI;oBAAEe,YAAY;oBAAQC,IAAI;gBAAE;0BACnC,cAAA,KAACvB;oBAAgBG,aAAaA;oBAAaC,MAAMA;;;;;AAK3D"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/SpanName.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Stack } from '@mui/material';\nimport AlertIcon from 'mdi-material-ui/AlertCircleOutline';\nimport type { ReactElement } from 'react';\n\nimport type { CustomLinks } from '../../gantt-chart-model';\nimport type { Span } from '../trace';\nimport { spanHasError } from '../utils';\nimport { SpanIndents } from './SpanIndents';\nimport { SpanLinksButton } from './SpanLinksButton';\n\nexport interface SpanNameProps {\n  customLinks?: CustomLinks;\n  span: Span;\n  nameColumnWidth: number;\n}\n\n/**\n * SpanName renders the entire left column of a SpanRow, i.e. the hierarchy and the service and span name\n */\nexport function SpanName(props: SpanNameProps): ReactElement {\n  const { customLinks, span, nameColumnWidth } = props;\n\n  return (\n    <Stack direction=\"row\" sx={{ alignItems: 'center' }} style={{ width: `${nameColumnWidth * 100}%` }}>\n      <SpanIndents span={span} />\n      {spanHasError(span) && <AlertIcon titleAccess=\"error\" color=\"error\" sx={{ marginRight: '5px' }} />}\n      <Box sx={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>\n        <strong>{span.resource.serviceName}:</strong> {span.name}\n      </Box>\n      {customLinks && customLinks.links.span && span.links.length > 0 && (\n        <Box sx={{ marginLeft: 'auto', px: 1 }}>\n          <SpanLinksButton customLinks={customLinks} span={span} />\n        </Box>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Box","Stack","AlertIcon","spanHasError","SpanIndents","SpanLinksButton","SpanName","props","customLinks","span","nameColumnWidth","direction","sx","alignItems","style","width","titleAccess","color","marginRight","whiteSpace","overflow","strong","resource","serviceName","name","links","length","marginLeft","px"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,EAAEC,KAAK,QAAQ,gBAAgB;AAC3C,OAAOC,eAAe,qCAAqC;AAK3D,SAASC,YAAY,QAAQ,cAAW;AACxC,SAASC,WAAW,QAAQ,mBAAgB;AAC5C,SAASC,eAAe,QAAQ,uBAAoB;AAQpD;;CAEC,GACD,OAAO,SAASC,SAASC,KAAoB;IAC3C,MAAM,EAAEC,WAAW,EAAEC,IAAI,EAAEC,eAAe,EAAE,GAAGH;IAE/C,qBACE,MAACN;QAAMU,WAAU;QAAMC,IAAI;YAAEC,YAAY;QAAS;QAAGC,OAAO;YAAEC,OAAO,GAAGL,kBAAkB,IAAI,CAAC,CAAC;QAAC;;0BAC/F,KAACN;gBAAYK,MAAMA;;YAClBN,aAAaM,uBAAS,KAACP;gBAAUc,aAAY;gBAAQC,OAAM;gBAAQL,IAAI;oBAAEM,aAAa;gBAAM;;0BAC7F,MAAClB;gBAAIY,IAAI;oBAAEO,YAAY;oBAAUC,UAAU;gBAAS;;kCAClD,MAACC;;4BAAQZ,KAAKa,QAAQ,CAACC,WAAW;4BAAC;;;oBAAU;oBAAEd,KAAKe,IAAI;;;YAEzDhB,eAAeA,YAAYiB,KAAK,CAAChB,IAAI,IAAIA,KAAKgB,KAAK,CAACC,MAAM,GAAG,mBAC5D,KAAC1B;gBAAIY,IAAI;oBAAEe,YAAY;oBAAQC,IAAI;gBAAE;0BACnC,cAAA,KAACvB;oBAAgBG,aAAaA;oBAAaC,MAAMA;;;;;AAK3D"}

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

@@ -1,7 +1,7 @@
-import { ReactElement } from 'react';
-import { Viewport } from '../utils';
-import { TracingGanttChartOptions } from '../../gantt-chart-model';
-import { Trace } from '../trace';
+import type { ReactElement } from 'react';
+import type { TracingGanttChartOptions } from '../../gantt-chart-model';
+import type { Trace } from '../trace';
+import type { Viewport } from '../utils';
 interface CanvasProps {
     options: TracingGanttChartOptions;
     trace: Trace;

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

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

package/lib/TracingGanttChart/MiniGanttChart/Canvas.js

@@ -11,14 +11,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 { Box, styled, useTheme } from '@mui/material';
-import useResizeObserver from 'use-resize-observer';
-import { useEffect, useRef, useState, useCallback } from 'react';
-import { useEvent } from '@perses-dev/plugin-system';
-import { useChartsTheme } from '@perses-dev/components';
-import { Ticks } from '../Ticks';
-import { getSpanColor } from '../utils';
-import { drawSpans } from './draw';
+import { Box, styled, useTheme } from "@mui/material";
+import { useChartsTheme } from "@perses-dev/components";
+import { useEvent } from "@perses-dev/plugin-system";
+import { useEffect, useRef, useState, useCallback } from "react";
+import useResizeObserver from "use-resize-observer";
+import { Ticks } from "../Ticks.js";
+import { getSpanColor } from "../utils.js";
+import { drawSpans } from "./draw.js";
 const CANVAS_HEIGHT = 60;
 export function Canvas(props) {
     const { options, trace, viewport, setViewport } = props;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/MiniGanttChart/Canvas.tsx"],"sourcesContent":["// Copyright 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/plugin-system';\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' } | { type: 'resize'; fixedPoint: number } | { 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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"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/MiniGanttChart/Canvas.tsx"],"sourcesContent":["// Copyright 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 { useChartsTheme } from '@perses-dev/components';\nimport { useEvent } from '@perses-dev/plugin-system';\nimport type { MouseEvent as ReactMouseEvent, ReactElement } from 'react';\nimport { useEffect, useRef, useState, useCallback } from 'react';\nimport useResizeObserver from 'use-resize-observer';\n\nimport type { TracingGanttChartOptions } from '../../gantt-chart-model';\nimport { Ticks } from '../Ticks';\nimport type { Span, Trace } from '../trace';\nimport type { Viewport } from '../utils';\nimport { getSpanColor } from '../utils';\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","useChartsTheme","useEvent","useEffect","useRef","useState","useCallback","useResizeObserver","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

@@ -1,7 +1,7 @@
-import { ReactElement } from 'react';
-import { Viewport } from '../utils';
-import { TracingGanttChartOptions } from '../../gantt-chart-model';
-import { Trace } from '../trace';
+import type { ReactElement } from 'react';
+import type { TracingGanttChartOptions } from '../../gantt-chart-model';
+import type { Trace } from '../trace';
+import type { Viewport } from '../utils';
 interface MiniGanttChartProps {
     options: TracingGanttChartOptions;
     trace: Trace;

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

@@ -1 +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"}
+{"version":3,"file":"MiniGanttChart.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/MiniGanttChart/MiniGanttChart.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAExE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAIzC,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

@@ -11,10 +11,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 { Box, useTheme } from '@mui/material';
-import { TicksHeader } from '../Ticks';
-import { rowHeight } from '../utils';
-import { Canvas } from './Canvas';
+import { Box, useTheme } from "@mui/material";
+import { TicksHeader } from "../Ticks.js";
+import { rowHeight } from "../utils.js";
+import { Canvas } from "./Canvas.js";
 export function MiniGanttChart(props) {
     const { options, trace, viewport, setViewport } = props;
     const theme = useTheme();

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/MiniGanttChart/MiniGanttChart.tsx"],"sourcesContent":["// Copyright 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,+BAA+B;AAC/B,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"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/MiniGanttChart/MiniGanttChart.tsx"],"sourcesContent":["// Copyright 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 type { ReactElement } from 'react';\n\nimport type { TracingGanttChartOptions } from '../../gantt-chart-model';\nimport { TicksHeader } from '../Ticks';\nimport type { Trace } from '../trace';\nimport type { Viewport } from '../utils';\nimport { rowHeight } from '../utils';\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,+BAA+B;AAC/B,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;AAI9C,SAASC,WAAW,QAAQ,cAAW;AAGvC,SAASC,SAAS,QAAQ,cAAW;AACrC,SAASC,MAAM,QAAQ,cAAW;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

@@ -1,3 +1,3 @@
-import { Span, Trace } from '../trace';
+import type { 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

@@ -1 +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;AAMpD,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,CA2BN"}
+{"version":3,"file":"draw.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/MiniGanttChart/draw.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAO5C,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,CA2BN"}