@perses-dev/tracing-gantt-chart-plugin 0.14.0-beta.7 → 0.14.0-rc.1

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

@@ -1,7 +1,6 @@
 import type { ReactElement } from 'react';
 interface ResizableDividerProps {
     parentRef: React.RefObject<Element>;
-    spacing?: number;
     onMove: (left: number) => void;
 }
 export declare function ResizableDivider(props: ResizableDividerProps): ReactElement;

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":"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"}
+{"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,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CA8D3E"}

package/lib/TracingGanttChart/GanttTable/ResizableDivider.js

@@ -15,11 +15,14 @@ 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 { parentRef, onMove } = props;
     const [isResizing, setResizing] = useState(false);
+    const [spacing, setSpacing] = useState(0);
     const handleMouseDown = (e)=>{
         // disable any default actions (text selection, etc.)
         e.preventDefault();
+        // read the flex gap once per drag instead of on every mousemove
+        setSpacing(parentRef.current ? parseFloat(getComputedStyle(parentRef.current).columnGap) || 0 : 0);
         setResizing(true);
     };
     // need stable reference for window.removeEventListener() in useEffect() below

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 { 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"}
+{"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  onMove: (left: number) => void;\n}\n\nexport function ResizableDivider(props: ResizableDividerProps): ReactElement {\n  const { parentRef, onMove } = props;\n  const [isResizing, setResizing] = useState(false);\n  const [spacing, setSpacing] = useState(0);\n\n  const handleMouseDown = (e: ReactMouseEvent): void => {\n    // disable any default actions (text selection, etc.)\n    e.preventDefault();\n\n    // read the flex gap once per drag instead of on every mousemove\n    setSpacing(parentRef.current ? parseFloat(getComputedStyle(parentRef.current).columnGap) || 0 : 0);\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","onMove","isResizing","setResizing","spacing","setSpacing","handleMouseDown","e","preventDefault","current","parseFloat","getComputedStyle","columnGap","handleMouseMove","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;AAO5C,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EAAEC,SAAS,EAAEC,MAAM,EAAE,GAAGF;IAC9B,MAAM,CAACG,YAAYC,YAAY,GAAGN,SAAS;IAC3C,MAAM,CAACO,SAASC,WAAW,GAAGR,SAAS;IAEvC,MAAMS,kBAAkB,CAACC;QACvB,qDAAqD;QACrDA,EAAEC,cAAc;QAEhB,gEAAgE;QAChEH,WAAWL,UAAUS,OAAO,GAAGC,WAAWC,iBAAiBX,UAAUS,OAAO,EAAEG,SAAS,KAAK,IAAI;QAChGT,YAAY;IACd;IAEA,8EAA8E;IAC9E,MAAMU,kBAAkBlB,SAAS,CAACY;QAChC,IAAI,CAACP,UAAUS,OAAO,EAAE;QAExB,MAAMK,aAAad,UAAUS,OAAO,CAACM,qBAAqB;QAE1D,kGAAkG;QAClG,+HAA+H;QAC/H,MAAMC,UAAUT,EAAEU,OAAO,GAAGH,WAAWI,IAAI,GAAGd;QAC9C,MAAMe,cAAcH,UAAUF,WAAWM,KAAK;QAE9C,IAAI,QAAQD,eAAeA,eAAe,MAAM;YAC9ClB,OAAOkB;QACT;IACF;IAEA,8EAA8E;IAC9E,MAAME,gBAAgB1B,SAAS;QAC7BQ,YAAY;IACd;IAEA,2FAA2F;IAC3FP,UAAU;QACR,SAAS0B;YACPC,OAAOC,gBAAgB,CAAC,aAAaX;YACrCU,OAAOC,gBAAgB,CAAC,WAAWH;YACnCI,SAASC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG;QAC/B;QAEA,SAASC;YACPN,OAAOO,mBAAmB,CAAC,aAAajB;YACxCU,OAAOO,mBAAmB,CAAC,WAAWT;YACtCI,SAASC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG;QAC/B;QAEA,IAAI1B,YAAY;YACdoB;QACF,OAAO;YACLO;QACF;QAEA,OAAOA;IACT,GAAG;QAAC3B;QAAYW;QAAiBQ;KAAc;IAE/C,mDAAmD;IACnD,MAAMU,uBAAuB,CAACxB,IAA6BA,EAAEyB,eAAe;IAE5E,qBAAO,KAACC;QAAoBC,aAAa5B;QAAiB6B,SAASJ;;AACrE;AAEA,MAAME,sBAAsBvC,OAAOD,KAAK,CAAC,EAAE2C,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/MiniGanttChart/Canvas.js

@@ -41,13 +41,12 @@ export function Canvas(props) {
         options.visual?.palette?.mode
     ]);
     useEffect(()=>{
-        if (!canvasRef.current || !width || !height) return;
+        if (!canvasRef.current || !width) return;
         const ctx = canvasRef.current.getContext('2d');
         if (!ctx) return;
-        drawSpans(ctx, width, height, trace, spanColorGenerator);
+        drawSpans(ctx, width, CANVAS_HEIGHT, trace, spanColorGenerator);
     }, [
         width,
-        height,
         trace,
         spanColorGenerator
     ]);

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 { 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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"}
+{"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) return;\n\n    const ctx = canvasRef.current.getContext('2d');\n    if (!ctx) return;\n\n    drawSpans(ctx, width, CANVAS_HEIGHT, trace, spanColorGenerator);\n  }, [width, 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/TracingGanttChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TracingGanttChart.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/TracingGanttChart.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,KAAK,WAAW,MAAM,gEAAgE,CAAC;AACnG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAYlF,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,wBAAwB,CAAC;IAClC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC;CAC/B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CAiE7E"}
+{"version":3,"file":"TracingGanttChart.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/TracingGanttChart.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,KAAK,WAAW,MAAM,gEAAgE,CAAC;AACnG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAYlF,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,wBAAwB,CAAC;IAClC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC;CAC/B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CAgE7E"}

package/lib/TracingGanttChart/TracingGanttChart.js

@@ -50,7 +50,6 @@ import { TraceHeaderBar } from "./TraceHeaderBar.js";
     // setTableWidth() is only called by <ResizableDivider />
     const [tableWidth, setTableWidth] = useState(0.82);
     const gap = 2;
-    const spacing = ganttChart.current ? parseFloat(getComputedStyle(ganttChart.current).columnGap) || 0 : 0;
     return /*#__PURE__*/ _jsxs(Stack, {
         ref: ganttChart,
         direction: "row",
@@ -94,7 +93,6 @@ import { TraceHeaderBar } from "./TraceHeaderBar.js";
                 children: [
                     /*#__PURE__*/ _jsx(ResizableDivider, {
                         parentRef: ganttChart,
-                        spacing: spacing,
                         onMove: setTableWidth
                     }),
                     /*#__PURE__*/ _jsx(Box, {

package/lib/TracingGanttChart/TracingGanttChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/TracingGanttChart/TracingGanttChart.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 type * as otlptracev1 from '@perses-dev/spec/dist/dashboard/query-type/otlp/trace/v1/trace';\nimport type { ReactElement } from 'react';\nimport { useMemo, useRef, useState } from 'react';\n\nimport type { CustomLinks, TracingGanttChartOptions } from '../gantt-chart-model';\nimport { DetailPane } from './DetailPane/DetailPane';\nimport { GanttTable } from './GanttTable/GanttTable';\nimport { GanttTableProvider } from './GanttTable/GanttTableProvider';\nimport { ResizableDivider } from './GanttTable/ResizableDivider';\nimport { MiniGanttChart } from './MiniGanttChart/MiniGanttChart';\nimport { useSpanSearch } from './Search';\nimport type { Span } from './trace';\nimport { getTraceModel } from './trace';\nimport { TraceHeaderBar } from './TraceHeaderBar';\nimport type { Viewport } from './utils';\n\nexport interface TracingGanttChartProps {\n  options: TracingGanttChartOptions;\n  customLinks?: CustomLinks;\n  trace: otlptracev1.TracesData;\n}\n\n/**\n * The core GanttChart panel for Perses.\n *\n * The UI/UX of this panel is based on Jaeger UI, licensed under Apache License, Version 2.0.\n * https://github.com/jaegertracing/jaeger-ui\n */\nexport function TracingGanttChart(props: TracingGanttChartProps): ReactElement {\n  const { options, customLinks, trace: otlpTrace } = props;\n\n  const trace = useMemo(() => {\n    try {\n      return getTraceModel(otlpTrace);\n    } catch (e) {\n      throw new Error(`Error: unable to parse trace: ${e}`, { cause: e });\n    }\n  }, [otlpTrace]);\n  const [viewport, setViewport] = useState<Viewport>({\n    startTimeUnixMs: trace.startTimeUnixMs,\n    endTimeUnixMs: trace.endTimeUnixMs,\n  });\n  const [selectedSpan, setSelectedSpan] = useState<Span | undefined>(() =>\n    options.selectedSpanId ? trace.spanById.get(options.selectedSpanId) : undefined,\n  );\n  const search = useSpanSearch(trace);\n\n  const ganttChart = useRef<HTMLDivElement>(null);\n  // tableWidth only comes to effect if the detail pane is visible.\n  // setTableWidth() is only called by <ResizableDivider />\n  const [tableWidth, setTableWidth] = useState<number>(0.82);\n  const gap = 2;\n  const spacing = ganttChart.current ? parseFloat(getComputedStyle(ganttChart.current).columnGap) || 0 : 0;\n\n  return (\n    <Stack ref={ganttChart} direction=\"row\" sx={{ height: '100%', minHeight: '240px', gap }}>\n      <Stack sx={{ flexGrow: 1, gap }}>\n        <TraceHeaderBar trace={trace} search={search} />\n        <MiniGanttChart options={options} trace={trace} viewport={viewport} setViewport={setViewport} />\n        <GanttTableProvider>\n          <GanttTable\n            options={options}\n            customLinks={customLinks}\n            trace={trace}\n            viewport={viewport}\n            selectedSpan={selectedSpan}\n            onSpanClick={setSelectedSpan}\n            matchingSpanIds={search.matchingSpanIds}\n            focusedSpanId={search.matchingSpanIds[search.focusedMatchIndex]}\n          />\n        </GanttTableProvider>\n      </Stack>\n      {selectedSpan && (\n        <>\n          <ResizableDivider parentRef={ganttChart} spacing={spacing} onMove={setTableWidth} />\n          <Box\n            style={{\n              width: `${(1 - tableWidth) * 100}%`,\n              minWidth: `${(1 - tableWidth) * 100}%`,\n            }}\n            sx={{ overflow: 'auto' }}\n          >\n            <DetailPane\n              customLinks={customLinks}\n              trace={trace}\n              span={selectedSpan}\n              onCloseBtnClick={() => setSelectedSpan(undefined)}\n            />\n          </Box>\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Box","Stack","useMemo","useRef","useState","DetailPane","GanttTable","GanttTableProvider","ResizableDivider","MiniGanttChart","useSpanSearch","getTraceModel","TraceHeaderBar","TracingGanttChart","props","options","customLinks","trace","otlpTrace","e","Error","cause","viewport","setViewport","startTimeUnixMs","endTimeUnixMs","selectedSpan","setSelectedSpan","selectedSpanId","spanById","get","undefined","search","ganttChart","tableWidth","setTableWidth","gap","spacing","current","parseFloat","getComputedStyle","columnGap","ref","direction","sx","height","minHeight","flexGrow","onSpanClick","matchingSpanIds","focusedSpanId","focusedMatchIndex","parentRef","onMove","style","width","minWidth","overflow","span","onCloseBtnClick"],"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;AAG3C,SAASC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAGlD,SAASC,UAAU,QAAQ,6BAA0B;AACrD,SAASC,UAAU,QAAQ,6BAA0B;AACrD,SAASC,kBAAkB,QAAQ,qCAAkC;AACrE,SAASC,gBAAgB,QAAQ,mCAAgC;AACjE,SAASC,cAAc,QAAQ,qCAAkC;AACjE,SAASC,aAAa,QAAQ,cAAW;AAEzC,SAASC,aAAa,QAAQ,aAAU;AACxC,SAASC,cAAc,QAAQ,sBAAmB;AASlD;;;;;CAKC,GACD,OAAO,SAASC,kBAAkBC,KAA6B;IAC7D,MAAM,EAAEC,OAAO,EAAEC,WAAW,EAAEC,OAAOC,SAAS,EAAE,GAAGJ;IAEnD,MAAMG,QAAQf,QAAQ;QACpB,IAAI;YACF,OAAOS,cAAcO;QACvB,EAAE,OAAOC,GAAG;YACV,MAAM,IAAIC,MAAM,CAAC,8BAA8B,EAAED,GAAG,EAAE;gBAAEE,OAAOF;YAAE;QACnE;IACF,GAAG;QAACD;KAAU;IACd,MAAM,CAACI,UAAUC,YAAY,GAAGnB,SAAmB;QACjDoB,iBAAiBP,MAAMO,eAAe;QACtCC,eAAeR,MAAMQ,aAAa;IACpC;IACA,MAAM,CAACC,cAAcC,gBAAgB,GAAGvB,SAA2B,IACjEW,QAAQa,cAAc,GAAGX,MAAMY,QAAQ,CAACC,GAAG,CAACf,QAAQa,cAAc,IAAIG;IAExE,MAAMC,SAAStB,cAAcO;IAE7B,MAAMgB,aAAa9B,OAAuB;IAC1C,iEAAiE;IACjE,yDAAyD;IACzD,MAAM,CAAC+B,YAAYC,cAAc,GAAG/B,SAAiB;IACrD,MAAMgC,MAAM;IACZ,MAAMC,UAAUJ,WAAWK,OAAO,GAAGC,WAAWC,iBAAiBP,WAAWK,OAAO,EAAEG,SAAS,KAAK,IAAI;IAEvG,qBACE,MAACxC;QAAMyC,KAAKT;QAAYU,WAAU;QAAMC,IAAI;YAAEC,QAAQ;YAAQC,WAAW;YAASV;QAAI;;0BACpF,MAACnC;gBAAM2C,IAAI;oBAAEG,UAAU;oBAAGX;gBAAI;;kCAC5B,KAACxB;wBAAeK,OAAOA;wBAAOe,QAAQA;;kCACtC,KAACvB;wBAAeM,SAASA;wBAASE,OAAOA;wBAAOK,UAAUA;wBAAUC,aAAaA;;kCACjF,KAAChB;kCACC,cAAA,KAACD;4BACCS,SAASA;4BACTC,aAAaA;4BACbC,OAAOA;4BACPK,UAAUA;4BACVI,cAAcA;4BACdsB,aAAarB;4BACbsB,iBAAiBjB,OAAOiB,eAAe;4BACvCC,eAAelB,OAAOiB,eAAe,CAACjB,OAAOmB,iBAAiB,CAAC;;;;;YAIpEzB,8BACC;;kCACE,KAAClB;wBAAiB4C,WAAWnB;wBAAYI,SAASA;wBAASgB,QAAQlB;;kCACnE,KAACnC;wBACCsD,OAAO;4BACLC,OAAO,GAAG,AAAC,CAAA,IAAIrB,UAAS,IAAK,IAAI,CAAC,CAAC;4BACnCsB,UAAU,GAAG,AAAC,CAAA,IAAItB,UAAS,IAAK,IAAI,CAAC,CAAC;wBACxC;wBACAU,IAAI;4BAAEa,UAAU;wBAAO;kCAEvB,cAAA,KAACpD;4BACCW,aAAaA;4BACbC,OAAOA;4BACPyC,MAAMhC;4BACNiC,iBAAiB,IAAMhC,gBAAgBI;;;;;;;AAOrD"}
+{"version":3,"sources":["../../../src/TracingGanttChart/TracingGanttChart.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 type * as otlptracev1 from '@perses-dev/spec/dist/dashboard/query-type/otlp/trace/v1/trace';\nimport type { ReactElement } from 'react';\nimport { useMemo, useRef, useState } from 'react';\n\nimport type { CustomLinks, TracingGanttChartOptions } from '../gantt-chart-model';\nimport { DetailPane } from './DetailPane/DetailPane';\nimport { GanttTable } from './GanttTable/GanttTable';\nimport { GanttTableProvider } from './GanttTable/GanttTableProvider';\nimport { ResizableDivider } from './GanttTable/ResizableDivider';\nimport { MiniGanttChart } from './MiniGanttChart/MiniGanttChart';\nimport { useSpanSearch } from './Search';\nimport type { Span } from './trace';\nimport { getTraceModel } from './trace';\nimport { TraceHeaderBar } from './TraceHeaderBar';\nimport type { Viewport } from './utils';\n\nexport interface TracingGanttChartProps {\n  options: TracingGanttChartOptions;\n  customLinks?: CustomLinks;\n  trace: otlptracev1.TracesData;\n}\n\n/**\n * The core GanttChart panel for Perses.\n *\n * The UI/UX of this panel is based on Jaeger UI, licensed under Apache License, Version 2.0.\n * https://github.com/jaegertracing/jaeger-ui\n */\nexport function TracingGanttChart(props: TracingGanttChartProps): ReactElement {\n  const { options, customLinks, trace: otlpTrace } = props;\n\n  const trace = useMemo(() => {\n    try {\n      return getTraceModel(otlpTrace);\n    } catch (e) {\n      throw new Error(`Error: unable to parse trace: ${e}`, { cause: e });\n    }\n  }, [otlpTrace]);\n  const [viewport, setViewport] = useState<Viewport>({\n    startTimeUnixMs: trace.startTimeUnixMs,\n    endTimeUnixMs: trace.endTimeUnixMs,\n  });\n  const [selectedSpan, setSelectedSpan] = useState<Span | undefined>(() =>\n    options.selectedSpanId ? trace.spanById.get(options.selectedSpanId) : undefined,\n  );\n  const search = useSpanSearch(trace);\n\n  const ganttChart = useRef<HTMLDivElement>(null);\n  // tableWidth only comes to effect if the detail pane is visible.\n  // setTableWidth() is only called by <ResizableDivider />\n  const [tableWidth, setTableWidth] = useState<number>(0.82);\n  const gap = 2;\n\n  return (\n    <Stack ref={ganttChart} direction=\"row\" sx={{ height: '100%', minHeight: '240px', gap }}>\n      <Stack sx={{ flexGrow: 1, gap }}>\n        <TraceHeaderBar trace={trace} search={search} />\n        <MiniGanttChart options={options} trace={trace} viewport={viewport} setViewport={setViewport} />\n        <GanttTableProvider>\n          <GanttTable\n            options={options}\n            customLinks={customLinks}\n            trace={trace}\n            viewport={viewport}\n            selectedSpan={selectedSpan}\n            onSpanClick={setSelectedSpan}\n            matchingSpanIds={search.matchingSpanIds}\n            focusedSpanId={search.matchingSpanIds[search.focusedMatchIndex]}\n          />\n        </GanttTableProvider>\n      </Stack>\n      {selectedSpan && (\n        <>\n          <ResizableDivider parentRef={ganttChart} onMove={setTableWidth} />\n          <Box\n            style={{\n              width: `${(1 - tableWidth) * 100}%`,\n              minWidth: `${(1 - tableWidth) * 100}%`,\n            }}\n            sx={{ overflow: 'auto' }}\n          >\n            <DetailPane\n              customLinks={customLinks}\n              trace={trace}\n              span={selectedSpan}\n              onCloseBtnClick={() => setSelectedSpan(undefined)}\n            />\n          </Box>\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Box","Stack","useMemo","useRef","useState","DetailPane","GanttTable","GanttTableProvider","ResizableDivider","MiniGanttChart","useSpanSearch","getTraceModel","TraceHeaderBar","TracingGanttChart","props","options","customLinks","trace","otlpTrace","e","Error","cause","viewport","setViewport","startTimeUnixMs","endTimeUnixMs","selectedSpan","setSelectedSpan","selectedSpanId","spanById","get","undefined","search","ganttChart","tableWidth","setTableWidth","gap","ref","direction","sx","height","minHeight","flexGrow","onSpanClick","matchingSpanIds","focusedSpanId","focusedMatchIndex","parentRef","onMove","style","width","minWidth","overflow","span","onCloseBtnClick"],"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;AAG3C,SAASC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAGlD,SAASC,UAAU,QAAQ,6BAA0B;AACrD,SAASC,UAAU,QAAQ,6BAA0B;AACrD,SAASC,kBAAkB,QAAQ,qCAAkC;AACrE,SAASC,gBAAgB,QAAQ,mCAAgC;AACjE,SAASC,cAAc,QAAQ,qCAAkC;AACjE,SAASC,aAAa,QAAQ,cAAW;AAEzC,SAASC,aAAa,QAAQ,aAAU;AACxC,SAASC,cAAc,QAAQ,sBAAmB;AASlD;;;;;CAKC,GACD,OAAO,SAASC,kBAAkBC,KAA6B;IAC7D,MAAM,EAAEC,OAAO,EAAEC,WAAW,EAAEC,OAAOC,SAAS,EAAE,GAAGJ;IAEnD,MAAMG,QAAQf,QAAQ;QACpB,IAAI;YACF,OAAOS,cAAcO;QACvB,EAAE,OAAOC,GAAG;YACV,MAAM,IAAIC,MAAM,CAAC,8BAA8B,EAAED,GAAG,EAAE;gBAAEE,OAAOF;YAAE;QACnE;IACF,GAAG;QAACD;KAAU;IACd,MAAM,CAACI,UAAUC,YAAY,GAAGnB,SAAmB;QACjDoB,iBAAiBP,MAAMO,eAAe;QACtCC,eAAeR,MAAMQ,aAAa;IACpC;IACA,MAAM,CAACC,cAAcC,gBAAgB,GAAGvB,SAA2B,IACjEW,QAAQa,cAAc,GAAGX,MAAMY,QAAQ,CAACC,GAAG,CAACf,QAAQa,cAAc,IAAIG;IAExE,MAAMC,SAAStB,cAAcO;IAE7B,MAAMgB,aAAa9B,OAAuB;IAC1C,iEAAiE;IACjE,yDAAyD;IACzD,MAAM,CAAC+B,YAAYC,cAAc,GAAG/B,SAAiB;IACrD,MAAMgC,MAAM;IAEZ,qBACE,MAACnC;QAAMoC,KAAKJ;QAAYK,WAAU;QAAMC,IAAI;YAAEC,QAAQ;YAAQC,WAAW;YAASL;QAAI;;0BACpF,MAACnC;gBAAMsC,IAAI;oBAAEG,UAAU;oBAAGN;gBAAI;;kCAC5B,KAACxB;wBAAeK,OAAOA;wBAAOe,QAAQA;;kCACtC,KAACvB;wBAAeM,SAASA;wBAASE,OAAOA;wBAAOK,UAAUA;wBAAUC,aAAaA;;kCACjF,KAAChB;kCACC,cAAA,KAACD;4BACCS,SAASA;4BACTC,aAAaA;4BACbC,OAAOA;4BACPK,UAAUA;4BACVI,cAAcA;4BACdiB,aAAahB;4BACbiB,iBAAiBZ,OAAOY,eAAe;4BACvCC,eAAeb,OAAOY,eAAe,CAACZ,OAAOc,iBAAiB,CAAC;;;;;YAIpEpB,8BACC;;kCACE,KAAClB;wBAAiBuC,WAAWd;wBAAYe,QAAQb;;kCACjD,KAACnC;wBACCiD,OAAO;4BACLC,OAAO,GAAG,AAAC,CAAA,IAAIhB,UAAS,IAAK,IAAI,CAAC,CAAC;4BACnCiB,UAAU,GAAG,AAAC,CAAA,IAAIjB,UAAS,IAAK,IAAI,CAAC,CAAC;wBACxC;wBACAK,IAAI;4BAAEa,UAAU;wBAAO;kCAEvB,cAAA,KAAC/C;4BACCW,aAAaA;4BACbC,OAAOA;4BACPoC,MAAM3B;4BACN4B,iBAAiB,IAAM3B,gBAAgBI;;;;;;;AAOrD"}

package/lib/test/convert/jaeger.js

@@ -60,6 +60,7 @@ function buildKeyValue(tag) {
     };
 }
 function buildAnyValue(tags) {
+    const tagType = tags.type;
     switch(tags.type){
         case 'string':
             return {
@@ -70,8 +71,7 @@ function buildAnyValue(tags) {
                 intValue: tags.value.toString()
             };
         default:
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            throw new Error(`unknown jaeger tag type ${tags.type}`);
+            throw new Error(`unknown jaeger tag type ${tagType}`);
     }
 }
 

package/lib/test/convert/jaeger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/test/convert/jaeger.ts"],"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 type * as otlpcommonv1 from '@perses-dev/spec/dist/dashboard/query-type/otlp/common/v1/common';\nimport type * as otlpresourcev1 from '@perses-dev/spec/dist/dashboard/query-type/otlp/resource/v1/resource';\nimport type * as otlptracev1 from '@perses-dev/spec/dist/dashboard/query-type/otlp/trace/v1/trace';\n\n// the following Jaeger data types and parsing function should eventually be moved to a Jaeger data source plugin\n\nexport interface JaegerTrace {\n  traceID: string;\n  spans: Span[];\n  processes: unknown;\n  warnings: unknown;\n}\n\ninterface Span {\n  traceID: string;\n  spanID: string;\n  hasChildren: boolean;\n  childSpanIds: string[];\n  depth: number;\n  processID: string;\n  process: Process;\n\n  operationName: string;\n  /** start time in microseconds */\n  startTime: number;\n  relativeStartTime: number;\n  duration: number;\n  tags: Tag[];\n  references: unknown;\n  logs: unknown;\n  warnings: unknown;\n}\n\ninterface Process {\n  serviceName: string;\n  tags: Tag[];\n}\n\ntype Tag =\n  | {\n      type: 'string';\n      key: string;\n      value: string;\n    }\n  | {\n      type: 'int64';\n      key: string;\n      value: number;\n    };\n\nexport function jaegerTraceToOTLP(jaegerTrace: JaegerTrace): otlptracev1.TracesData {\n  return {\n    resourceSpans: jaegerTrace.spans.map(buildResourceSpan),\n  };\n}\n\nfunction buildResourceSpan(span: Span): otlptracev1.ResourceSpan {\n  return {\n    resource: buildResource(span.process),\n    scopeSpans: [\n      {\n        scope: {\n          name: '',\n        },\n        spans: [\n          {\n            traceId: span.traceID,\n            spanId: span.spanID,\n            name: span.operationName,\n            kind: '',\n            startTimeUnixNano: (span.startTime * 1000).toString(),\n            endTimeUnixNano: ((span.startTime + span.duration) * 1000).toString(),\n            attributes: span.tags.map(buildKeyValue),\n            events: [],\n            status: {},\n          },\n        ],\n      },\n    ],\n  };\n}\n\nfunction buildResource(process: Process): otlpresourcev1.Resource {\n  return {\n    attributes: [\n      { key: 'service.name', value: { stringValue: process.serviceName } },\n      ...process.tags.map(buildKeyValue),\n    ],\n  };\n}\n\nfunction buildKeyValue(tag: Tag): otlpcommonv1.KeyValue {\n  return { key: tag.key, value: buildAnyValue(tag) };\n}\n\nfunction buildAnyValue(tags: Tag): otlpcommonv1.AnyValue {\n  switch (tags.type) {\n    case 'string':\n      return { stringValue: tags.value };\n    case 'int64':\n      return { intValue: tags.value.toString() };\n    default:\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      throw new Error(`unknown jaeger tag type ${(tags as any).type}`);\n  }\n}\n"],"names":["jaegerTraceToOTLP","jaegerTrace","resourceSpans","spans","map","buildResourceSpan","span","resource","buildResource","process","scopeSpans","scope","name","traceId","traceID","spanId","spanID","operationName","kind","startTimeUnixNano","startTime","toString","endTimeUnixNano","duration","attributes","tags","buildKeyValue","events","status","key","value","stringValue","serviceName","tag","buildAnyValue","type","intValue","Error"],"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;AAoDjC,OAAO,SAASA,kBAAkBC,WAAwB;IACxD,OAAO;QACLC,eAAeD,YAAYE,KAAK,CAACC,GAAG,CAACC;IACvC;AACF;AAEA,SAASA,kBAAkBC,IAAU;IACnC,OAAO;QACLC,UAAUC,cAAcF,KAAKG,OAAO;QACpCC,YAAY;YACV;gBACEC,OAAO;oBACLC,MAAM;gBACR;gBACAT,OAAO;oBACL;wBACEU,SAASP,KAAKQ,OAAO;wBACrBC,QAAQT,KAAKU,MAAM;wBACnBJ,MAAMN,KAAKW,aAAa;wBACxBC,MAAM;wBACNC,mBAAmB,AAACb,CAAAA,KAAKc,SAAS,GAAG,IAAG,EAAGC,QAAQ;wBACnDC,iBAAiB,AAAC,CAAA,AAAChB,CAAAA,KAAKc,SAAS,GAAGd,KAAKiB,QAAQ,AAAD,IAAK,IAAG,EAAGF,QAAQ;wBACnEG,YAAYlB,KAAKmB,IAAI,CAACrB,GAAG,CAACsB;wBAC1BC,QAAQ,EAAE;wBACVC,QAAQ,CAAC;oBACX;iBACD;YACH;SACD;IACH;AACF;AAEA,SAASpB,cAAcC,OAAgB;IACrC,OAAO;QACLe,YAAY;YACV;gBAAEK,KAAK;gBAAgBC,OAAO;oBAAEC,aAAatB,QAAQuB,WAAW;gBAAC;YAAE;eAChEvB,QAAQgB,IAAI,CAACrB,GAAG,CAACsB;SACrB;IACH;AACF;AAEA,SAASA,cAAcO,GAAQ;IAC7B,OAAO;QAAEJ,KAAKI,IAAIJ,GAAG;QAAEC,OAAOI,cAAcD;IAAK;AACnD;AAEA,SAASC,cAAcT,IAAS;IAC9B,OAAQA,KAAKU,IAAI;QACf,KAAK;YACH,OAAO;gBAAEJ,aAAaN,KAAKK,KAAK;YAAC;QACnC,KAAK;YACH,OAAO;gBAAEM,UAAUX,KAAKK,KAAK,CAACT,QAAQ;YAAG;QAC3C;YACE,8DAA8D;YAC9D,MAAM,IAAIgB,MAAM,CAAC,wBAAwB,EAAE,AAACZ,KAAaU,IAAI,EAAE;IACnE;AACF"}
+{"version":3,"sources":["../../../../src/test/convert/jaeger.ts"],"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 type * as otlpcommonv1 from '@perses-dev/spec/dist/dashboard/query-type/otlp/common/v1/common';\nimport type * as otlpresourcev1 from '@perses-dev/spec/dist/dashboard/query-type/otlp/resource/v1/resource';\nimport type * as otlptracev1 from '@perses-dev/spec/dist/dashboard/query-type/otlp/trace/v1/trace';\n\n// the following Jaeger data types and parsing function should eventually be moved to a Jaeger data source plugin\n\nexport interface JaegerTrace {\n  traceID: string;\n  spans: Span[];\n  processes: unknown;\n  warnings: unknown;\n}\n\ninterface Span {\n  traceID: string;\n  spanID: string;\n  hasChildren: boolean;\n  childSpanIds: string[];\n  depth: number;\n  processID: string;\n  process: Process;\n\n  operationName: string;\n  /** start time in microseconds */\n  startTime: number;\n  relativeStartTime: number;\n  duration: number;\n  tags: Tag[];\n  references: unknown;\n  logs: unknown;\n  warnings: unknown;\n}\n\ninterface Process {\n  serviceName: string;\n  tags: Tag[];\n}\n\ntype Tag =\n  | {\n      type: 'string';\n      key: string;\n      value: string;\n    }\n  | {\n      type: 'int64';\n      key: string;\n      value: number;\n    };\n\nexport function jaegerTraceToOTLP(jaegerTrace: JaegerTrace): otlptracev1.TracesData {\n  return {\n    resourceSpans: jaegerTrace.spans.map(buildResourceSpan),\n  };\n}\n\nfunction buildResourceSpan(span: Span): otlptracev1.ResourceSpan {\n  return {\n    resource: buildResource(span.process),\n    scopeSpans: [\n      {\n        scope: {\n          name: '',\n        },\n        spans: [\n          {\n            traceId: span.traceID,\n            spanId: span.spanID,\n            name: span.operationName,\n            kind: '',\n            startTimeUnixNano: (span.startTime * 1000).toString(),\n            endTimeUnixNano: ((span.startTime + span.duration) * 1000).toString(),\n            attributes: span.tags.map(buildKeyValue),\n            events: [],\n            status: {},\n          },\n        ],\n      },\n    ],\n  };\n}\n\nfunction buildResource(process: Process): otlpresourcev1.Resource {\n  return {\n    attributes: [\n      { key: 'service.name', value: { stringValue: process.serviceName } },\n      ...process.tags.map(buildKeyValue),\n    ],\n  };\n}\n\nfunction buildKeyValue(tag: Tag): otlpcommonv1.KeyValue {\n  return { key: tag.key, value: buildAnyValue(tag) };\n}\n\nfunction buildAnyValue(tags: Tag): otlpcommonv1.AnyValue {\n  const tagType = tags.type;\n  switch (tags.type) {\n    case 'string':\n      return { stringValue: tags.value };\n    case 'int64':\n      return { intValue: tags.value.toString() };\n    default:\n      throw new Error(`unknown jaeger tag type ${tagType}`);\n  }\n}\n"],"names":["jaegerTraceToOTLP","jaegerTrace","resourceSpans","spans","map","buildResourceSpan","span","resource","buildResource","process","scopeSpans","scope","name","traceId","traceID","spanId","spanID","operationName","kind","startTimeUnixNano","startTime","toString","endTimeUnixNano","duration","attributes","tags","buildKeyValue","events","status","key","value","stringValue","serviceName","tag","buildAnyValue","tagType","type","intValue","Error"],"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;AAoDjC,OAAO,SAASA,kBAAkBC,WAAwB;IACxD,OAAO;QACLC,eAAeD,YAAYE,KAAK,CAACC,GAAG,CAACC;IACvC;AACF;AAEA,SAASA,kBAAkBC,IAAU;IACnC,OAAO;QACLC,UAAUC,cAAcF,KAAKG,OAAO;QACpCC,YAAY;YACV;gBACEC,OAAO;oBACLC,MAAM;gBACR;gBACAT,OAAO;oBACL;wBACEU,SAASP,KAAKQ,OAAO;wBACrBC,QAAQT,KAAKU,MAAM;wBACnBJ,MAAMN,KAAKW,aAAa;wBACxBC,MAAM;wBACNC,mBAAmB,AAACb,CAAAA,KAAKc,SAAS,GAAG,IAAG,EAAGC,QAAQ;wBACnDC,iBAAiB,AAAC,CAAA,AAAChB,CAAAA,KAAKc,SAAS,GAAGd,KAAKiB,QAAQ,AAAD,IAAK,IAAG,EAAGF,QAAQ;wBACnEG,YAAYlB,KAAKmB,IAAI,CAACrB,GAAG,CAACsB;wBAC1BC,QAAQ,EAAE;wBACVC,QAAQ,CAAC;oBACX;iBACD;YACH;SACD;IACH;AACF;AAEA,SAASpB,cAAcC,OAAgB;IACrC,OAAO;QACLe,YAAY;YACV;gBAAEK,KAAK;gBAAgBC,OAAO;oBAAEC,aAAatB,QAAQuB,WAAW;gBAAC;YAAE;eAChEvB,QAAQgB,IAAI,CAACrB,GAAG,CAACsB;SACrB;IACH;AACF;AAEA,SAASA,cAAcO,GAAQ;IAC7B,OAAO;QAAEJ,KAAKI,IAAIJ,GAAG;QAAEC,OAAOI,cAAcD;IAAK;AACnD;AAEA,SAASC,cAAcT,IAAS;IAC9B,MAAMU,UAAUV,KAAKW,IAAI;IACzB,OAAQX,KAAKW,IAAI;QACf,KAAK;YACH,OAAO;gBAAEL,aAAaN,KAAKK,KAAK;YAAC;QACnC,KAAK;YACH,OAAO;gBAAEO,UAAUZ,KAAKK,KAAK,CAACT,QAAQ;YAAG;QAC3C;YACE,MAAM,IAAIiB,MAAM,CAAC,wBAAwB,EAAEH,SAAS;IACxD;AACF"}

package/mf-manifest.json

@@ -5,11 +5,11 @@
     "name": "TracingGanttChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.14.0-beta.7",
+      "buildVersion": "0.14.0-rc.1",
       "buildName": "@perses-dev/tracing-gantt-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/TracingGanttChart.4f137753.js",
+      "name": "__mf/js/TracingGanttChart.d9b59f93.js",
       "path": "",
       "type": "global"
     },
@@ -19,9 +19,9 @@
       "zip": "",
       "api": ""
     },
-    "globalName": "TracingGanttChart_0_14_0_beta_7",
+    "globalName": "TracingGanttChart_0_14_0_rc_1",
     "pluginVersion": "2.9.2",
-    "getPublicPath": "function() { const prefix = window.PERSES_PLUGIN_ASSETS_PATH || window.PERSES_APP_CONFIG?.api_prefix || \"\"; return prefix + \"/plugins/TracingGanttChart~0.14.0-beta.7/\"; }"
+    "getPublicPath": "function() { const prefix = window.PERSES_PLUGIN_ASSETS_PATH || window.PERSES_APP_CONFIG?.api_prefix || \"\"; return prefix + \"/plugins/TracingGanttChart~0.14.0-rc.1/\"; }"
   },
   "shared": [
     {
@@ -34,7 +34,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/274.ff633c2b.js"
+            "__mf/js/async/274.53fc26a4.js"
           ]
         },
         "css": {
@@ -54,8 +54,8 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/235.d2b379b9.js",
-            "__mf/js/async/616.f966554e.js"
+            "__mf/js/async/235.0675e691.js",
+            "__mf/js/async/616.be150b44.js"
           ]
         },
         "css": {
@@ -75,8 +75,8 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/587.3deafc0b.js",
-            "__mf/js/async/968.1f4cc5c6.js"
+            "__mf/js/async/587.d494e69b.js",
+            "__mf/js/async/968.5dcb60d0.js"
           ]
         },
         "css": {
@@ -89,20 +89,20 @@
     {
       "id": "TracingGanttChart:@perses-dev/components",
       "name": "@perses-dev/components",
-      "version": "0.55.0-beta.14",
+      "version": "0.55.0-rc.1",
       "singleton": true,
-      "requiredVersion": "^0.55.0-beta.14",
+      "requiredVersion": "^0.55.0-rc.1",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/228.ddd50c4b.js"
+            "__mf/js/async/181.1dd3d537.js"
           ]
         },
         "css": {
           "async": [],
           "sync": [
-            "__mf/css/async/228.85c2cbf6.css"
+            "__mf/css/async/181.85c2cbf6.css"
           ]
         }
       },
@@ -111,14 +111,14 @@
     {
       "id": "TracingGanttChart:@perses-dev/plugin-system",
       "name": "@perses-dev/plugin-system",
-      "version": "0.55.0-beta.14",
+      "version": "0.55.0-rc.1",
       "singleton": true,
-      "requiredVersion": "^0.55.0-beta.14",
+      "requiredVersion": "^0.55.0-rc.1",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/508.1a4aed3e.js"
+            "__mf/js/async/255.9c3cabe2.js"
           ]
         },
         "css": {
@@ -138,7 +138,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/192.3acb0e0e.js"
+            "__mf/js/async/192.f15300f5.js"
           ]
         },
         "css": {
@@ -158,7 +158,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/873.0883c868.js"
+            "__mf/js/async/873.85d15782.js"
           ]
         },
         "css": {
@@ -178,7 +178,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/392.83a96981.js"
+            "__mf/js/async/392.0c76141a.js"
           ]
         },
         "css": {
@@ -198,7 +198,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/470.119370a2.js"
+            "__mf/js/async/470.c580b0f9.js"
           ]
         },
         "css": {
@@ -218,7 +218,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/121.86585ed6.js"
+            "__mf/js/async/121.92df80eb.js"
           ]
         },
         "css": {
@@ -238,7 +238,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/978.5d4e10a3.js"
+            "__mf/js/async/978.913d8c4f.js"
           ]
         },
         "css": {
@@ -257,26 +257,26 @@
       "assets": {
         "js": {
           "sync": [
-            "__mf/js/async/436.3529fc0c.js",
-            "__mf/js/async/247.dc6e48cb.js",
-            "__mf/js/async/672.89eff67f.js",
-            "__mf/js/async/__federation_expose_TracingGanttChart.99755db8.js"
+            "__mf/js/async/436.ab3ccc6d.js",
+            "__mf/js/async/247.24f55530.js",
+            "__mf/js/async/672.f46ddfc3.js",
+            "__mf/js/async/__federation_expose_TracingGanttChart.d3bb9efc.js"
           ],
           "async": [
-            "__mf/js/async/588.ff3178f6.js",
-            "__mf/js/async/71.e1596f2e.js",
-            "__mf/js/async/43.10e346da.js",
-            "__mf/js/async/209.4ab02e24.js",
-            "__mf/js/async/lib-router.d4727407.js",
-            "__mf/js/async/356.898949a0.js",
-            "__mf/js/async/77.5d74575d.js",
-            "__mf/js/async/496.31ef7d09.js"
+            "__mf/js/async/588.957ec837.js",
+            "__mf/js/async/71.a381e77a.js",
+            "__mf/js/async/43.4c3c5c0f.js",
+            "__mf/js/async/209.fd27698d.js",
+            "__mf/js/async/lib-router.c5a9412b.js",
+            "__mf/js/async/356.a870fa96.js",
+            "__mf/js/async/77.c9254c23.js",
+            "__mf/js/async/496.fce0470b.js"
           ]
         },
         "css": {
           "sync": [],
           "async": [
-            "__mf/css/async/228.85c2cbf6.css"
+            "__mf/css/async/181.85c2cbf6.css"
           ]
         }
       },