@perses-dev/tracing-gantt-chart-plugin 0.11.0 → 0.12.0-beta.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/MiniGanttChart/Canvas.tsx"],"sourcesContent":["// Copyright 2024 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' }\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","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":"AAAA,oCAAoC;AACpC,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,EAAEC,QAAQ,QAAQ,gBAAgB;AACtD,OAAOC,uBAAuB,sBAAsB;AACpD,SAASC,SAAS,EAAEC,MAAM,EAAiCC,QAAQ,EAAEC,WAAW,QAAsB,QAAQ;AAC9G,SAASC,QAAQ,QAAQ,4BAA4B;AACrD,SAASC,cAAc,QAAQ,yBAAyB;AACxD,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,YAAY,QAAkB,WAAW;AAGlD,SAASC,SAAS,QAAQ,SAAS;AAEnC,MAAMC,gBAAgB;AActB,OAAO,SAASC,OAAOC,KAAkB;IACvC,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGJ;IAClD,MAAMK,WAAWlB;IACjB,MAAMmB,cAAcZ;IACpB,0FAA0F;IAC1F,uFAAuF;IACvF,MAAM,EAAEa,KAAK,EAAEC,KAAKC,UAAU,EAAE,GAAGrB;IACnC,MAAMsB,SAASZ;IACf,MAAMa,YAAYrB,OAA0B;IAC5C,MAAM,CAACsB,YAAYC,cAAc,GAAGtB,SAAqB;QAAEuB,MAAM;IAAO;IAExE,MAAMC,gBAAgBb,MAAMc,aAAa,GAAGd,MAAMe,eAAe;IACjE,MAAMC,qBAAqB,AAACf,CAAAA,SAASc,eAAe,GAAGf,MAAMe,eAAe,AAAD,IAAKF;IAChF,MAAMI,sBAAsB,AAACjB,CAAAA,MAAMc,aAAa,GAAGb,SAASa,aAAa,AAAD,IAAKD;IAE7E,MAAMK,qBAAqB5B,YACzB,CAAC6B,OAAezB,aAAaS,UAAUC,aAAaL,QAAQqB,MAAM,EAAEC,SAASC,MAAMH,OACnF;QAAChB;QAAUC;QAAaL,QAAQqB,MAAM,EAAEC,SAASC;KAAK;IAGxDnC,UAAU;QACR,IAAI,CAACsB,UAAUc,OAAO,IAAI,CAAClB,SAAS,CAACG,QAAQ;QAE7C,MAAMgB,MAAMf,UAAUc,OAAO,CAACE,UAAU,CAAC;QACzC,IAAI,CAACD,KAAK;QAEV7B,UAAU6B,KAAKnB,OAAOG,QAAQR,OAAOkB;IACvC,GAAG;QAACb;QAAOG;QAAQR;QAAOkB;KAAmB;IAE7C,MAAMQ,wBAAwB,CAACC;QAC7B,IAAI,CAAClB,UAAUc,OAAO,IAAI,CAAClB,OAAO,OAAO;QACzC,kEAAkE;QAClE,MAAMuB,UAAUD,EAAEE,OAAO,GAAGpB,UAAUc,OAAO,CAACO,qBAAqB,GAAGC,IAAI;QAC1E,OAAO/B,MAAMe,eAAe,GAAG,AAACa,UAAUvB,QAASQ;IACrD;IAEA,MAAMmB,kBAAkB,CAACL;QACvBA,EAAEM,cAAc;QAChB,IAAI,CAAEN,CAAAA,EAAEO,MAAM,YAAYC,WAAU,GAAI;QAExC,MAAMC,oBACJnC,SAASc,eAAe,KAAKf,MAAMe,eAAe,IAAId,SAASa,aAAa,KAAKd,MAAMc,aAAa;QACtG,MAAMuB,OAAOV,EAAEO,MAAM,CAACI,OAAO,CAAC,OAAO;QACrC,MAAMC,SAASb,sBAAsBC;QAErC,IAAIU,SAAS,eAAe;YAC1B1B,cAAc;gBAAEC,MAAM;gBAAU4B,YAAYvC,SAASa,aAAa;YAAC;QACrE,OAAO,IAAIuB,SAAS,gBAAgB;YAClC1B,cAAc;gBAAEC,MAAM;gBAAU4B,YAAYvC,SAASc,eAAe;YAAC;QACvE,OAAO,IAAIsB,SAAS,eAAeD,mBAAmB;YACpDzB,cAAc;gBAAEC,MAAM;gBAAU4B,YAAYD;YAAO;YACnDrC,YAAY;gBAAEa,iBAAiBwB;gBAAQzB,eAAeyB;YAAO;QAC/D,OAAO;YACL5B,cAAc;gBACZC,MAAM;gBACN6B,OAAOF,SAAStC,SAASc,eAAe;gBACxC2B,KAAKzC,SAASa,aAAa,GAAGyB;YAChC;QACF;IACF;IAEA,8EAA8E;IAC9E,MAAMI,kBAAkBpD,SAAS,CAACoC;QAChCA,EAAEM,cAAc;QAEhB,OAAQvB,WAAWE,IAAI;YACrB,KAAK;gBACH;YAEF,KAAK;gBAAU;oBACb,MAAMgC,SAASlC,WAAW8B,UAAU;oBACpC,MAAMK,SAASnB,sBAAsBC;oBAErC,IAAIc,OAAOC;oBACX,IAAIE,SAASC,QAAQ;wBACnBJ,QAAQG;wBACRF,MAAMG;oBACR,OAAO;wBACLJ,QAAQI;wBACRH,MAAME;oBACR;oBAEA1C,YAAY;wBACVa,iBAAiB+B,KAAKC,GAAG,CAACN,OAAOzC,MAAMe,eAAe;wBACtDD,eAAegC,KAAKE,GAAG,CAACN,KAAK1C,MAAMc,aAAa;oBAClD;oBACA;gBACF;YAEA,KAAK;gBAAQ;oBACX,8DAA8D;oBAC9D,qEAAqE;oBACrE,MAAM,EAAE2B,KAAK,EAAEC,GAAG,EAAE,GAAGhC;oBACvB,IAAI6B,SAASb,sBAAsBC;oBAEnC,IAAIY,SAASE,QAAQzC,MAAMe,eAAe,EAAE;wBAC1CwB,SAASvC,MAAMe,eAAe,GAAG0B;oBACnC;oBACA,IAAIF,SAASG,MAAM1C,MAAMc,aAAa,EAAE;wBACtCyB,SAASvC,MAAMc,aAAa,GAAG4B;oBACjC;oBAEAxC,YAAY;wBACVa,iBAAiBwB,SAASE;wBAC1B3B,eAAeyB,SAASG;oBAC1B;oBACA;gBACF;QACF;IACF;IAEA,8EAA8E;IAC9E,MAAMO,gBAAgB1D,SAAS,CAACoC;QAC9BA,EAAEM,cAAc;QAChBtB,cAAc;YAAEC,MAAM;QAAO;QAE7B,iEAAiE;QACjE,IAAIX,SAASc,eAAe,KAAKd,SAASa,aAAa,EAAE;YACvDZ,YAAY;gBAAEa,iBAAiBf,MAAMe,eAAe;gBAAED,eAAed,MAAMc,aAAa;YAAC;QAC3F;IACF;IAEA,2FAA2F;IAC3F3B,UAAU;QACR,SAAS+D;YACPC,OAAOC,gBAAgB,CAAC,aAAaT;YACrCQ,OAAOC,gBAAgB,CAAC,WAAWH;YACnCI,SAASC,IAAI,CAACC,KAAK,CAAChB,MAAM,GAAG7B,WAAWE,IAAI,KAAK,WAAW,eAAe;QAC7E;QAEA,SAAS4C;YACPL,OAAOM,mBAAmB,CAAC,aAAad;YACxCQ,OAAOM,mBAAmB,CAAC,WAAWR;YACtCI,SAASC,IAAI,CAACC,KAAK,CAAChB,MAAM,GAAG;QAC/B;QAEA,IAAI7B,WAAWE,IAAI,KAAK,QAAQ;YAC9B4C;QACF,OAAO;YACLN;QACF;QAEA,OAAOM;IACT,GAAG;QAAC9C;QAAYiC;QAAiBM;KAAc;IAE/C,qBACE,MAAClE;QAAIuB,KAAKC;QAAYmD,IAAI;YAAEC,UAAU;YAAYnD;QAAO;QAAGoD,aAAa5B;;0BACvE,KAAC6B;gBAAOvD,KAAKG;gBAAWJ,OAAOA;gBAAOG,QAAQA;gBAAQ+C,OAAO;oBAAEI,UAAU;gBAAW;;0BACpF,KAAClE;0BACD,KAACqE;gBAAUC,aAAU;gBAAYR,OAAO;oBAAExB,MAAM;oBAAG1B,OAAO,GAAGW,qBAAqB,IAAI,CAAC,CAAC;gBAAC;;0BACzF,KAACgD;gBAAQD,aAAU;gBAAcR,OAAO;oBAAExB,MAAM,GAAGf,qBAAqB,IAAI,CAAC,CAAC;gBAAC;;0BAC/E,KAACgD;gBAAQD,aAAU;gBAAeR,OAAO;oBAAEU,OAAO,GAAGhD,sBAAsB,IAAI,CAAC,CAAC;gBAAC;;0BAClF,KAAC6C;gBAAUC,aAAU;gBAAYR,OAAO;oBAAEU,OAAO;oBAAG5D,OAAO,GAAGY,sBAAsB,IAAI,CAAC,CAAC;gBAAC;;;;AAGjG;AAEA,MAAM6C,YAAY9E,OAAOD,KAAK;IAC5B4E,UAAU;IACVnD,QAAQ;IACR0D,iBAAiB;AACnB;AAEA,MAAMF,UAAUhF,OAAOD,KAAK,CAAC,EAAEoF,KAAK,EAAE,GAAM,CAAA;QAC1CR,UAAU;QACVnD,QAAQ;QACR0D,iBAAiBC,MAAM9C,OAAO,CAAC+C,OAAO;QACtC/D,OAAO;QACPkC,QAAQ;QAER,0CAA0C;QAC1C,YAAY;YACVoB,UAAU;YACVtD,OAAO;YACP0B,MAAM;YACNsC,KAAK;YACLC,QAAQ;YACRC,SAAS;YACTC,QAAQ;QACV;IACF,CAAA"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/MiniGanttChart/Canvas.tsx"],"sourcesContent":["// Copyright 2024 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' }\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","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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"}

package/lib/TracingGanttChart/MiniGanttChart/MiniGanttChart.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, useTheme } from '@mui/material';
 import { TicksHeader } from '../Ticks';
 import { rowHeight } from '../utils';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/MiniGanttChart/MiniGanttChart.tsx"],"sourcesContent":["// Copyright 2024 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,oCAAoC;AACpC,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 2024 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,oCAAoC;AACpC,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"}

package/lib/TracingGanttChart/Ticks.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // 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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, styled } from '@mui/material';
 import { formatDuration } from './utils';
 /**

package/lib/TracingGanttChart/Ticks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/TracingGanttChart/Ticks.tsx"],"sourcesContent":["// Copyright 2024 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 { ReactElement } from 'react';\nimport { Viewport, formatDuration } from './utils';\nimport { Trace } from './trace';\n\nexport interface TicksHeaderProps {\n  trace: Trace;\n  viewport: Viewport;\n}\n\n/**\n * TicksHeader renders all tick labels in the header\n */\nexport function TicksHeader(props: TicksHeaderProps): ReactElement {\n  const { trace, viewport } = props;\n\n  const duration = viewport.endTimeUnixMs - viewport.startTimeUnixMs;\n  const startAt = viewport.startTimeUnixMs - trace.startTimeUnixMs;\n\n  return (\n    <>\n      <TickBox style={{ left: '0%', borderWidth: 0 }}>{formatDuration(startAt + duration * 0)}</TickBox>\n      <TickBox style={{ left: '25%' }}>{formatDuration(startAt + duration * 0.25)}</TickBox>\n      <TickBox style={{ left: '50%' }}>{formatDuration(startAt + duration * 0.5)}</TickBox>\n      <TickBox style={{ left: '75%' }}>{formatDuration(startAt + duration * 0.75)}</TickBox>\n      <TickBox style={{ left: '100%' }}>\n        <span style={{ position: 'absolute', right: '.75rem' }}>{formatDuration(startAt + duration * 1)}</span>\n      </TickBox>\n    </>\n  );\n}\n\n/**\n * Ticks renders all ticks in the span duration\n */\nexport function Ticks(): ReactElement {\n  return (\n    <>\n      <TickBox style={{ left: '25%' }} />\n      <TickBox style={{ left: '50%' }} />\n      <TickBox style={{ left: '75%' }} />\n    </>\n  );\n}\n\nconst TickBox = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  height: '100%',\n  borderLeft: `1px solid ${theme.palette.divider}`,\n  padding: '.25rem',\n}));\n"],"names":["Box","styled","formatDuration","TicksHeader","props","trace","viewport","duration","endTimeUnixMs","startTimeUnixMs","startAt","TickBox","style","left","borderWidth","span","position","right","Ticks","theme","height","borderLeft","palette","divider","padding"],"mappings":"AAAA,oCAAoC;AACpC,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;AAE5C,SAAmBC,cAAc,QAAQ,UAAU;AAQnD;;CAEC,GACD,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGF;IAE5B,MAAMG,WAAWD,SAASE,aAAa,GAAGF,SAASG,eAAe;IAClE,MAAMC,UAAUJ,SAASG,eAAe,GAAGJ,MAAMI,eAAe;IAEhE,qBACE;;0BACE,KAACE;gBAAQC,OAAO;oBAAEC,MAAM;oBAAMC,aAAa;gBAAE;0BAAIZ,eAAeQ,UAAUH,WAAW;;0BACrF,KAACI;gBAAQC,OAAO;oBAAEC,MAAM;gBAAM;0BAAIX,eAAeQ,UAAUH,WAAW;;0BACtE,KAACI;gBAAQC,OAAO;oBAAEC,MAAM;gBAAM;0BAAIX,eAAeQ,UAAUH,WAAW;;0BACtE,KAACI;gBAAQC,OAAO;oBAAEC,MAAM;gBAAM;0BAAIX,eAAeQ,UAAUH,WAAW;;0BACtE,KAACI;gBAAQC,OAAO;oBAAEC,MAAM;gBAAO;0BAC7B,cAAA,KAACE;oBAAKH,OAAO;wBAAEI,UAAU;wBAAYC,OAAO;oBAAS;8BAAIf,eAAeQ,UAAUH,WAAW;;;;;AAIrG;AAEA;;CAEC,GACD,OAAO,SAASW;IACd,qBACE;;0BACE,KAACP;gBAAQC,OAAO;oBAAEC,MAAM;gBAAM;;0BAC9B,KAACF;gBAAQC,OAAO;oBAAEC,MAAM;gBAAM;;0BAC9B,KAACF;gBAAQC,OAAO;oBAAEC,MAAM;gBAAM;;;;AAGpC;AAEA,MAAMF,UAAUV,OAAOD,KAAK,CAAC,EAAEmB,KAAK,EAAE,GAAM,CAAA;QAC1CH,UAAU;QACVI,QAAQ;QACRC,YAAY,CAAC,UAAU,EAAEF,MAAMG,OAAO,CAACC,OAAO,EAAE;QAChDC,SAAS;IACX,CAAA"}
+{"version":3,"sources":["../../../src/TracingGanttChart/Ticks.tsx"],"sourcesContent":["// Copyright 2024 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 { ReactElement } from 'react';\nimport { Viewport, formatDuration } from './utils';\nimport { Trace } from './trace';\n\nexport interface TicksHeaderProps {\n  trace: Trace;\n  viewport: Viewport;\n}\n\n/**\n * TicksHeader renders all tick labels in the header\n */\nexport function TicksHeader(props: TicksHeaderProps): ReactElement {\n  const { trace, viewport } = props;\n\n  const duration = viewport.endTimeUnixMs - viewport.startTimeUnixMs;\n  const startAt = viewport.startTimeUnixMs - trace.startTimeUnixMs;\n\n  return (\n    <>\n      <TickBox style={{ left: '0%', borderWidth: 0 }}>{formatDuration(startAt + duration * 0)}</TickBox>\n      <TickBox style={{ left: '25%' }}>{formatDuration(startAt + duration * 0.25)}</TickBox>\n      <TickBox style={{ left: '50%' }}>{formatDuration(startAt + duration * 0.5)}</TickBox>\n      <TickBox style={{ left: '75%' }}>{formatDuration(startAt + duration * 0.75)}</TickBox>\n      <TickBox style={{ left: '100%' }}>\n        <span style={{ position: 'absolute', right: '.75rem' }}>{formatDuration(startAt + duration * 1)}</span>\n      </TickBox>\n    </>\n  );\n}\n\n/**\n * Ticks renders all ticks in the span duration\n */\nexport function Ticks(): ReactElement {\n  return (\n    <>\n      <TickBox style={{ left: '25%' }} />\n      <TickBox style={{ left: '50%' }} />\n      <TickBox style={{ left: '75%' }} />\n    </>\n  );\n}\n\nconst TickBox = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  height: '100%',\n  borderLeft: `1px solid ${theme.palette.divider}`,\n  padding: '.25rem',\n}));\n"],"names":["Box","styled","formatDuration","TicksHeader","props","trace","viewport","duration","endTimeUnixMs","startTimeUnixMs","startAt","TickBox","style","left","borderWidth","span","position","right","Ticks","theme","height","borderLeft","palette","divider","padding"],"mappings":";AAAA,oCAAoC;AACpC,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;AAE5C,SAAmBC,cAAc,QAAQ,UAAU;AAQnD;;CAEC,GACD,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGF;IAE5B,MAAMG,WAAWD,SAASE,aAAa,GAAGF,SAASG,eAAe;IAClE,MAAMC,UAAUJ,SAASG,eAAe,GAAGJ,MAAMI,eAAe;IAEhE,qBACE;;0BACE,KAACE;gBAAQC,OAAO;oBAAEC,MAAM;oBAAMC,aAAa;gBAAE;0BAAIZ,eAAeQ,UAAUH,WAAW;;0BACrF,KAACI;gBAAQC,OAAO;oBAAEC,MAAM;gBAAM;0BAAIX,eAAeQ,UAAUH,WAAW;;0BACtE,KAACI;gBAAQC,OAAO;oBAAEC,MAAM;gBAAM;0BAAIX,eAAeQ,UAAUH,WAAW;;0BACtE,KAACI;gBAAQC,OAAO;oBAAEC,MAAM;gBAAM;0BAAIX,eAAeQ,UAAUH,WAAW;;0BACtE,KAACI;gBAAQC,OAAO;oBAAEC,MAAM;gBAAO;0BAC7B,cAAA,KAACE;oBAAKH,OAAO;wBAAEI,UAAU;wBAAYC,OAAO;oBAAS;8BAAIf,eAAeQ,UAAUH,WAAW;;;;;AAIrG;AAEA;;CAEC,GACD,OAAO,SAASW;IACd,qBACE;;0BACE,KAACP;gBAAQC,OAAO;oBAAEC,MAAM;gBAAM;;0BAC9B,KAACF;gBAAQC,OAAO;oBAAEC,MAAM;gBAAM;;0BAC9B,KAACF;gBAAQC,OAAO;oBAAEC,MAAM;gBAAM;;;;AAGpC;AAEA,MAAMF,UAAUV,OAAOD,KAAK,CAAC,EAAEmB,KAAK,EAAE,GAAM,CAAA;QAC1CH,UAAU;QACVI,QAAQ;QACRC,YAAY,CAAC,UAAU,EAAEF,MAAMG,OAAO,CAACC,OAAO,EAAE;QAChDC,SAAS;IACX,CAAA"}

package/lib/TracingGanttChart/TraceDetails.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2025 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack, Typography } from '@mui/material';
 import { useTimeZone } from '@perses-dev/components';
 import { formatDuration } from './utils';

package/lib/TracingGanttChart/TraceDetails.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/TracingGanttChart/TraceDetails.tsx"],"sourcesContent":["// Copyright 2025 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, Typography } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { useTimeZone } from '@perses-dev/components';\nimport { formatDuration } from './utils';\nimport { Trace } from './trace';\n\nconst DATE_FORMAT_OPTIONS: Intl.DateTimeFormatOptions = {\n  year: 'numeric',\n  month: 'long',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  fractionalSecondDigits: 3,\n  timeZoneName: 'short',\n};\n\nexport interface TraceDetailsProps {\n  trace: Trace;\n}\n\nexport function TraceDetails(props: TraceDetailsProps): ReactElement {\n  const { trace } = props;\n\n  const { dateFormatOptionsWithUserTimeZone } = useTimeZone();\n  const dateFormatOptions = dateFormatOptionsWithUserTimeZone(DATE_FORMAT_OPTIONS);\n  const dateFormatter = new Intl.DateTimeFormat(undefined, dateFormatOptions);\n\n  const rootSpan = trace.rootSpans[0];\n  if (!rootSpan) {\n    return <Typography>Trace contains no spans.</Typography>;\n  }\n\n  return (\n    <Stack direction=\"row\" sx={{ justifyContent: 'space-between' }}>\n      <Typography variant=\"h3\">\n        {rootSpan.resource.serviceName}: {rootSpan.name} ({formatDuration(trace.endTimeUnixMs - trace.startTimeUnixMs)})\n      </Typography>\n      <Typography variant=\"h4\">\n        <Typography component=\"span\" sx={{ px: 1 }}>\n          <strong>Start:</strong> {dateFormatter.format(trace.startTimeUnixMs)}\n        </Typography>\n        <Typography component=\"span\" sx={{ px: 1 }}>\n          <strong>Trace ID:</strong> {rootSpan.traceId}\n        </Typography>\n      </Typography>\n    </Stack>\n  );\n}\n"],"names":["Stack","Typography","useTimeZone","formatDuration","DATE_FORMAT_OPTIONS","year","month","day","hour","minute","second","fractionalSecondDigits","timeZoneName","TraceDetails","props","trace","dateFormatOptionsWithUserTimeZone","dateFormatOptions","dateFormatter","Intl","DateTimeFormat","undefined","rootSpan","rootSpans","direction","sx","justifyContent","variant","resource","serviceName","name","endTimeUnixMs","startTimeUnixMs","component","px","strong","format","traceId"],"mappings":"AAAA,oCAAoC;AACpC,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,UAAU,QAAQ,gBAAgB;AAElD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,cAAc,QAAQ,UAAU;AAGzC,MAAMC,sBAAkD;IACtDC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,MAAM;IACNC,QAAQ;IACRC,QAAQ;IACRC,wBAAwB;IACxBC,cAAc;AAChB;AAMA,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,KAAK,EAAE,GAAGD;IAElB,MAAM,EAAEE,iCAAiC,EAAE,GAAGd;IAC9C,MAAMe,oBAAoBD,kCAAkCZ;IAC5D,MAAMc,gBAAgB,IAAIC,KAAKC,cAAc,CAACC,WAAWJ;IAEzD,MAAMK,WAAWP,MAAMQ,SAAS,CAAC,EAAE;IACnC,IAAI,CAACD,UAAU;QACb,qBAAO,KAACrB;sBAAW;;IACrB;IAEA,qBACE,MAACD;QAAMwB,WAAU;QAAMC,IAAI;YAAEC,gBAAgB;QAAgB;;0BAC3D,MAACzB;gBAAW0B,SAAQ;;oBACjBL,SAASM,QAAQ,CAACC,WAAW;oBAAC;oBAAGP,SAASQ,IAAI;oBAAC;oBAAG3B,eAAeY,MAAMgB,aAAa,GAAGhB,MAAMiB,eAAe;oBAAE;;;0BAEjH,MAAC/B;gBAAW0B,SAAQ;;kCAClB,MAAC1B;wBAAWgC,WAAU;wBAAOR,IAAI;4BAAES,IAAI;wBAAE;;0CACvC,KAACC;0CAAO;;4BAAe;4BAAEjB,cAAckB,MAAM,CAACrB,MAAMiB,eAAe;;;kCAErE,MAAC/B;wBAAWgC,WAAU;wBAAOR,IAAI;4BAAES,IAAI;wBAAE;;0CACvC,KAACC;0CAAO;;4BAAkB;4BAAEb,SAASe,OAAO;;;;;;;AAKtD"}
+{"version":3,"sources":["../../../src/TracingGanttChart/TraceDetails.tsx"],"sourcesContent":["// Copyright 2025 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, Typography } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { useTimeZone } from '@perses-dev/components';\nimport { formatDuration } from './utils';\nimport { Trace } from './trace';\n\nconst DATE_FORMAT_OPTIONS: Intl.DateTimeFormatOptions = {\n  year: 'numeric',\n  month: 'long',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  fractionalSecondDigits: 3,\n  timeZoneName: 'short',\n};\n\nexport interface TraceDetailsProps {\n  trace: Trace;\n}\n\nexport function TraceDetails(props: TraceDetailsProps): ReactElement {\n  const { trace } = props;\n\n  const { dateFormatOptionsWithUserTimeZone } = useTimeZone();\n  const dateFormatOptions = dateFormatOptionsWithUserTimeZone(DATE_FORMAT_OPTIONS);\n  const dateFormatter = new Intl.DateTimeFormat(undefined, dateFormatOptions);\n\n  const rootSpan = trace.rootSpans[0];\n  if (!rootSpan) {\n    return <Typography>Trace contains no spans.</Typography>;\n  }\n\n  return (\n    <Stack direction=\"row\" sx={{ justifyContent: 'space-between' }}>\n      <Typography variant=\"h3\">\n        {rootSpan.resource.serviceName}: {rootSpan.name} ({formatDuration(trace.endTimeUnixMs - trace.startTimeUnixMs)})\n      </Typography>\n      <Typography variant=\"h4\">\n        <Typography component=\"span\" sx={{ px: 1 }}>\n          <strong>Start:</strong> {dateFormatter.format(trace.startTimeUnixMs)}\n        </Typography>\n        <Typography component=\"span\" sx={{ px: 1 }}>\n          <strong>Trace ID:</strong> {rootSpan.traceId}\n        </Typography>\n      </Typography>\n    </Stack>\n  );\n}\n"],"names":["Stack","Typography","useTimeZone","formatDuration","DATE_FORMAT_OPTIONS","year","month","day","hour","minute","second","fractionalSecondDigits","timeZoneName","TraceDetails","props","trace","dateFormatOptionsWithUserTimeZone","dateFormatOptions","dateFormatter","Intl","DateTimeFormat","undefined","rootSpan","rootSpans","direction","sx","justifyContent","variant","resource","serviceName","name","endTimeUnixMs","startTimeUnixMs","component","px","strong","format","traceId"],"mappings":";AAAA,oCAAoC;AACpC,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,UAAU,QAAQ,gBAAgB;AAElD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,cAAc,QAAQ,UAAU;AAGzC,MAAMC,sBAAkD;IACtDC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,MAAM;IACNC,QAAQ;IACRC,QAAQ;IACRC,wBAAwB;IACxBC,cAAc;AAChB;AAMA,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,KAAK,EAAE,GAAGD;IAElB,MAAM,EAAEE,iCAAiC,EAAE,GAAGd;IAC9C,MAAMe,oBAAoBD,kCAAkCZ;IAC5D,MAAMc,gBAAgB,IAAIC,KAAKC,cAAc,CAACC,WAAWJ;IAEzD,MAAMK,WAAWP,MAAMQ,SAAS,CAAC,EAAE;IACnC,IAAI,CAACD,UAAU;QACb,qBAAO,KAACrB;sBAAW;;IACrB;IAEA,qBACE,MAACD;QAAMwB,WAAU;QAAMC,IAAI;YAAEC,gBAAgB;QAAgB;;0BAC3D,MAACzB;gBAAW0B,SAAQ;;oBACjBL,SAASM,QAAQ,CAACC,WAAW;oBAAC;oBAAGP,SAASQ,IAAI;oBAAC;oBAAG3B,eAAeY,MAAMgB,aAAa,GAAGhB,MAAMiB,eAAe;oBAAE;;;0BAEjH,MAAC/B;gBAAW0B,SAAQ;;kCAClB,MAAC1B;wBAAWgC,WAAU;wBAAOR,IAAI;4BAAES,IAAI;wBAAE;;0CACvC,KAACC;0CAAO;;4BAAe;4BAAEjB,cAAckB,MAAM,CAACrB,MAAMiB,eAAe;;;kCAErE,MAAC/B;wBAAWgC,WAAU;wBAAOR,IAAI;4BAAES,IAAI;wBAAE;;0CACvC,KAACC;0CAAO;;4BAAkB;4BAAEb,SAASe,OAAO;;;;;;;AAKtD"}

package/lib/TracingGanttChart/TracingGanttChart.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // 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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useRef, useState } from 'react';
 import { Box, Stack, useTheme } from '@mui/material';
 import { MiniGanttChart } from './MiniGanttChart/MiniGanttChart';

package/lib/TracingGanttChart/TracingGanttChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/TracingGanttChart/TracingGanttChart.tsx"],"sourcesContent":["// Copyright 2024 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 { ReactElement, useMemo, useRef, useState } from 'react';\nimport { Box, Stack, useTheme } from '@mui/material';\nimport { otlptracev1 } from '@perses-dev/core';\nimport { CustomLinks, TracingGanttChartOptions } from '../gantt-chart-model';\nimport { MiniGanttChart } from './MiniGanttChart/MiniGanttChart';\nimport { DetailPane } from './DetailPane/DetailPane';\nimport { Viewport } from './utils';\nimport { GanttTable } from './GanttTable/GanttTable';\nimport { GanttTableProvider } from './GanttTable/GanttTableProvider';\nimport { ResizableDivider } from './GanttTable/ResizableDivider';\nimport { getTraceModel, Span } from './trace';\nimport { TraceDetails } from './TraceDetails';\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 theme = useTheme();\n  const trace = useMemo(() => {\n    try {\n      return getTraceModel(otlpTrace);\n    } catch (e) {\n      throw new Error(`Error: unable to parse trace: ${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\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        <TraceDetails trace={trace} />\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          />\n        </GanttTableProvider>\n      </Stack>\n      {selectedSpan && (\n        <>\n          <ResizableDivider parentRef={ganttChart} spacing={parseInt(theme.spacing(gap))} onMove={setTableWidth} />\n          <Box style={{ width: `${(1 - tableWidth) * 100}%` }} sx={{ overflow: 'auto' }}>\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":["useMemo","useRef","useState","Box","Stack","useTheme","MiniGanttChart","DetailPane","GanttTable","GanttTableProvider","ResizableDivider","getTraceModel","TraceDetails","TracingGanttChart","props","options","customLinks","trace","otlpTrace","theme","e","Error","viewport","setViewport","startTimeUnixMs","endTimeUnixMs","selectedSpan","setSelectedSpan","selectedSpanId","spanById","get","undefined","ganttChart","tableWidth","setTableWidth","gap","ref","direction","sx","height","minHeight","flexGrow","onSpanClick","parentRef","spacing","parseInt","onMove","style","width","overflow","span","onCloseBtnClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAChE,SAASC,GAAG,EAAEC,KAAK,EAAEC,QAAQ,QAAQ,gBAAgB;AAGrD,SAASC,cAAc,QAAQ,kCAAkC;AACjE,SAASC,UAAU,QAAQ,0BAA0B;AAErD,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,aAAa,QAAc,UAAU;AAC9C,SAASC,YAAY,QAAQ,iBAAiB;AAQ9C;;;;;CAKC,GACD,OAAO,SAASC,kBAAkBC,KAA6B;IAC7D,MAAM,EAAEC,OAAO,EAAEC,WAAW,EAAEC,OAAOC,SAAS,EAAE,GAAGJ;IAEnD,MAAMK,QAAQd;IACd,MAAMY,QAAQjB,QAAQ;QACpB,IAAI;YACF,OAAOW,cAAcO;QACvB,EAAE,OAAOE,GAAG;YACV,MAAM,IAAIC,MAAM,CAAC,8BAA8B,EAAED,GAAG;QACtD;IACF,GAAG;QAACF;KAAU;IACd,MAAM,CAACI,UAAUC,YAAY,GAAGrB,SAAmB;QACjDsB,iBAAiBP,MAAMO,eAAe;QACtCC,eAAeR,MAAMQ,aAAa;IACpC;IACA,MAAM,CAACC,cAAcC,gBAAgB,GAAGzB,SAA2B,IACjEa,QAAQa,cAAc,GAAGX,MAAMY,QAAQ,CAACC,GAAG,CAACf,QAAQa,cAAc,IAAIG;IAGxE,MAAMC,aAAa/B,OAAuB;IAC1C,iEAAiE;IACjE,yDAAyD;IACzD,MAAM,CAACgC,YAAYC,cAAc,GAAGhC,SAAiB;IACrD,MAAMiC,MAAM;IAEZ,qBACE,MAAC/B;QAAMgC,KAAKJ;QAAYK,WAAU;QAAMC,IAAI;YAAEC,QAAQ;YAAQC,WAAW;YAASL;QAAI;;0BACpF,MAAC/B;gBAAMkC,IAAI;oBAAEG,UAAU;oBAAGN;gBAAI;;kCAC5B,KAACvB;wBAAaK,OAAOA;;kCACrB,KAACX;wBAAeS,SAASA;wBAASE,OAAOA;wBAAOK,UAAUA;wBAAUC,aAAaA;;kCACjF,KAACd;kCACC,cAAA,KAACD;4BACCO,SAASA;4BACTC,aAAaA;4BACbC,OAAOA;4BACPK,UAAUA;4BACVI,cAAcA;4BACdgB,aAAaf;;;;;YAIlBD,8BACC;;kCACE,KAAChB;wBAAiBiC,WAAWX;wBAAYY,SAASC,SAAS1B,MAAMyB,OAAO,CAACT;wBAAOW,QAAQZ;;kCACxF,KAAC/B;wBAAI4C,OAAO;4BAAEC,OAAO,GAAG,AAAC,CAAA,IAAIf,UAAS,IAAK,IAAI,CAAC,CAAC;wBAAC;wBAAGK,IAAI;4BAAEW,UAAU;wBAAO;kCAC1E,cAAA,KAAC1C;4BACCS,aAAaA;4BACbC,OAAOA;4BACPiC,MAAMxB;4BACNyB,iBAAiB,IAAMxB,gBAAgBI;;;;;;;AAOrD"}
+{"version":3,"sources":["../../../src/TracingGanttChart/TracingGanttChart.tsx"],"sourcesContent":["// Copyright 2024 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 { ReactElement, useMemo, useRef, useState } from 'react';\nimport { Box, Stack, useTheme } from '@mui/material';\nimport { otlptracev1 } from '@perses-dev/core';\nimport { CustomLinks, TracingGanttChartOptions } from '../gantt-chart-model';\nimport { MiniGanttChart } from './MiniGanttChart/MiniGanttChart';\nimport { DetailPane } from './DetailPane/DetailPane';\nimport { Viewport } from './utils';\nimport { GanttTable } from './GanttTable/GanttTable';\nimport { GanttTableProvider } from './GanttTable/GanttTableProvider';\nimport { ResizableDivider } from './GanttTable/ResizableDivider';\nimport { getTraceModel, Span } from './trace';\nimport { TraceDetails } from './TraceDetails';\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 theme = useTheme();\n  const trace = useMemo(() => {\n    try {\n      return getTraceModel(otlpTrace);\n    } catch (e) {\n      throw new Error(`Error: unable to parse trace: ${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\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        <TraceDetails trace={trace} />\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          />\n        </GanttTableProvider>\n      </Stack>\n      {selectedSpan && (\n        <>\n          <ResizableDivider parentRef={ganttChart} spacing={parseInt(theme.spacing(gap))} onMove={setTableWidth} />\n          <Box style={{ width: `${(1 - tableWidth) * 100}%` }} sx={{ overflow: 'auto' }}>\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":["useMemo","useRef","useState","Box","Stack","useTheme","MiniGanttChart","DetailPane","GanttTable","GanttTableProvider","ResizableDivider","getTraceModel","TraceDetails","TracingGanttChart","props","options","customLinks","trace","otlpTrace","theme","e","Error","viewport","setViewport","startTimeUnixMs","endTimeUnixMs","selectedSpan","setSelectedSpan","selectedSpanId","spanById","get","undefined","ganttChart","tableWidth","setTableWidth","gap","ref","direction","sx","height","minHeight","flexGrow","onSpanClick","parentRef","spacing","parseInt","onMove","style","width","overflow","span","onCloseBtnClick"],"mappings":";AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAAuBA,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAChE,SAASC,GAAG,EAAEC,KAAK,EAAEC,QAAQ,QAAQ,gBAAgB;AAGrD,SAASC,cAAc,QAAQ,kCAAkC;AACjE,SAASC,UAAU,QAAQ,0BAA0B;AAErD,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,aAAa,QAAc,UAAU;AAC9C,SAASC,YAAY,QAAQ,iBAAiB;AAQ9C;;;;;CAKC,GACD,OAAO,SAASC,kBAAkBC,KAA6B;IAC7D,MAAM,EAAEC,OAAO,EAAEC,WAAW,EAAEC,OAAOC,SAAS,EAAE,GAAGJ;IAEnD,MAAMK,QAAQd;IACd,MAAMY,QAAQjB,QAAQ;QACpB,IAAI;YACF,OAAOW,cAAcO;QACvB,EAAE,OAAOE,GAAG;YACV,MAAM,IAAIC,MAAM,CAAC,8BAA8B,EAAED,GAAG;QACtD;IACF,GAAG;QAACF;KAAU;IACd,MAAM,CAACI,UAAUC,YAAY,GAAGrB,SAAmB;QACjDsB,iBAAiBP,MAAMO,eAAe;QACtCC,eAAeR,MAAMQ,aAAa;IACpC;IACA,MAAM,CAACC,cAAcC,gBAAgB,GAAGzB,SAA2B,IACjEa,QAAQa,cAAc,GAAGX,MAAMY,QAAQ,CAACC,GAAG,CAACf,QAAQa,cAAc,IAAIG;IAGxE,MAAMC,aAAa/B,OAAuB;IAC1C,iEAAiE;IACjE,yDAAyD;IACzD,MAAM,CAACgC,YAAYC,cAAc,GAAGhC,SAAiB;IACrD,MAAMiC,MAAM;IAEZ,qBACE,MAAC/B;QAAMgC,KAAKJ;QAAYK,WAAU;QAAMC,IAAI;YAAEC,QAAQ;YAAQC,WAAW;YAASL;QAAI;;0BACpF,MAAC/B;gBAAMkC,IAAI;oBAAEG,UAAU;oBAAGN;gBAAI;;kCAC5B,KAACvB;wBAAaK,OAAOA;;kCACrB,KAACX;wBAAeS,SAASA;wBAASE,OAAOA;wBAAOK,UAAUA;wBAAUC,aAAaA;;kCACjF,KAACd;kCACC,cAAA,KAACD;4BACCO,SAASA;4BACTC,aAAaA;4BACbC,OAAOA;4BACPK,UAAUA;4BACVI,cAAcA;4BACdgB,aAAaf;;;;;YAIlBD,8BACC;;kCACE,KAAChB;wBAAiBiC,WAAWX;wBAAYY,SAASC,SAAS1B,MAAMyB,OAAO,CAACT;wBAAOW,QAAQZ;;kCACxF,KAAC/B;wBAAI4C,OAAO;4BAAEC,OAAO,GAAG,AAAC,CAAA,IAAIf,UAAS,IAAK,IAAI,CAAC,CAAC;wBAAC;wBAAGK,IAAI;4BAAEW,UAAU;wBAAO;kCAC1E,cAAA,KAAC1C;4BACCS,aAAaA;4BACbC,OAAOA;4BACPiC,MAAMxB;4BACNyB,iBAAiB,IAAMxB,gBAAgBI;;;;;;;AAOrD"}

package/lib/bootstrap.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // 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 { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 const root = ReactDOM.createRoot(document.getElementById('root'));

package/lib/bootstrap.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/bootstrap.tsx"],"sourcesContent":["// Copyright 2024 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 React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(document.getElementById('root')!);\nroot.render(<React.StrictMode></React.StrictMode>);\n"],"names":["React","ReactDOM","root","createRoot","document","getElementById","render","StrictMode"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,OAAOC,cAAc,mBAAmB;AAExC,MAAMC,OAAOD,SAASE,UAAU,CAACC,SAASC,cAAc,CAAC;AACzDH,KAAKI,MAAM,eAAC,KAACN,MAAMO,UAAU"}
+{"version":3,"sources":["../../src/bootstrap.tsx"],"sourcesContent":["// Copyright 2024 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 React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(document.getElementById('root')!);\nroot.render(<React.StrictMode></React.StrictMode>);\n"],"names":["React","ReactDOM","root","createRoot","document","getElementById","render","StrictMode"],"mappings":";AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,OAAOC,cAAc,mBAAmB;AAExC,MAAMC,OAAOD,SAASE,UAAU,CAACC,SAASC,cAAc,CAAC;AACzDH,KAAKI,MAAM,eAAC,KAACN,MAAMO,UAAU"}

package/lib/cjs/PanelActions.js

@@ -17,14 +17,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    DownloadTraceAction: function() {
+    get DownloadTraceAction () {
         return DownloadTraceAction;
     },
-    getFilename: function() {
+    get getFilename () {
         return getFilename;
     }
 });

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

@@ -17,20 +17,20 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    AttributeItem: function() {
+    get AttributeItem () {
         return AttributeItem;
     },
-    AttributeItems: function() {
+    get AttributeItems () {
         return AttributeItems;
     },
-    AttributeList: function() {
+    get AttributeList () {
         return AttributeList;
     },
-    TraceAttributes: function() {
+    get TraceAttributes () {
         return TraceAttributes;
     }
 });

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

@@ -17,17 +17,17 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    GanttTableContext: function() {
+    get GanttTableContext () {
         return GanttTableContext;
     },
-    GanttTableProvider: function() {
+    get GanttTableProvider () {
         return GanttTableProvider;
     },
-    useGanttTableContext: function() {
+    get useGanttTableContext () {
         return useGanttTableContext;
     }
 });

package/lib/cjs/TracingGanttChart/Ticks.js

@@ -17,14 +17,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    Ticks: function() {
+    get Ticks () {
         return Ticks;
     },
-    TicksHeader: function() {
+    get TicksHeader () {
         return TicksHeader;
     }
 });

package/lib/cjs/TracingGanttChart/palette.js

@@ -17,14 +17,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    getConsistentCategoricalColor: function() {
+    get getConsistentCategoricalColor () {
         return getConsistentCategoricalColor;
     },
-    getConsistentColor: function() {
+    get getConsistentColor () {
         return getConsistentColor;
     }
 });

package/lib/cjs/TracingGanttChart/utils.js

@@ -17,26 +17,26 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    formatDuration: function() {
+    get formatDuration () {
         return formatDuration;
     },
-    getServiceColor: function() {
+    get getServiceColor () {
         return getServiceColor;
     },
-    getSpanColor: function() {
+    get getSpanColor () {
         return getSpanColor;
     },
-    minSpanWidthPx: function() {
+    get minSpanWidthPx () {
         return minSpanWidthPx;
     },
-    rowHeight: function() {
+    get rowHeight () {
         return rowHeight;
     },
-    spanHasError: function() {
+    get spanHasError () {
         return spanHasError;
     }
 });

package/lib/cjs/index-federation.js

@@ -1,15 +1,3 @@
-// Copyright 2024 The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
 "use strict";
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -52,4 +40,16 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./bootstrap")));

package/mf-manifest.json

@@ -5,11 +5,11 @@
     "name": "TracingGanttChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.11.0",
+      "buildVersion": "0.12.0-beta.0",
       "buildName": "@perses-dev/tracing-gantt-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/TracingGanttChart.4febbfb4.js",
+      "name": "__mf/js/TracingGanttChart.f1ef6924.js",
       "path": "",
       "type": "global"
     },
@@ -20,7 +20,7 @@
       "api": ""
     },
     "globalName": "TracingGanttChart",
-    "pluginVersion": "0.19.1",
+    "pluginVersion": "0.21.6",
     "prefetchInterface": false,
     "getPublicPath": "function() { const prefix = window.PERSES_PLUGIN_ASSETS_PATH || window.PERSES_APP_CONFIG?.api_prefix || \"\"; return prefix + \"/plugins/TracingGanttChart/\"; }"
   },
@@ -35,7 +35,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/960.89291786.js"
+            "__mf/js/async/274.457dda65.js"
           ]
         },
         "css": {
@@ -54,8 +54,8 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/694.fe491393.js",
-            "__mf/js/async/770.65ae427e.js"
+            "__mf/js/async/235.806ca841.js",
+            "__mf/js/async/616.25399954.js"
           ]
         },
         "css": {
@@ -74,8 +74,8 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/214.8bf3e03e.js",
-            "__mf/js/async/738.7d9e5092.js"
+            "__mf/js/async/587.3a4d8eed.js",
+            "__mf/js/async/968.5f7ccf5e.js"
           ]
         },
         "css": {
@@ -87,14 +87,14 @@
     {
       "id": "TracingGanttChart:@perses-dev/components",
       "name": "@perses-dev/components",
-      "version": "0.53.0-beta.1",
+      "version": "0.53.0-beta.4",
       "singleton": true,
-      "requiredVersion": "^0.53.0-beta.1",
+      "requiredVersion": "^0.53.0-beta.4",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/813.de2c52ae.js"
+            "__mf/js/async/622.632bfcaa.js"
           ]
         },
         "css": {
@@ -106,14 +106,14 @@
     {
       "id": "TracingGanttChart:@perses-dev/plugin-system",
       "name": "@perses-dev/plugin-system",
-      "version": "0.53.0-beta.1",
+      "version": "0.53.0-beta.4",
       "singleton": true,
-      "requiredVersion": "^0.53.0-beta.1",
+      "requiredVersion": "^0.53.0-beta.4",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/711.1f4a48d0.js"
+            "__mf/js/async/252.0e9814ef.js"
           ]
         },
         "css": {
@@ -132,7 +132,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/75.4d502b5c.js"
+            "__mf/js/async/192.f723a636.js"
           ]
         },
         "css": {
@@ -151,7 +151,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/409.12b6365d.js"
+            "__mf/js/async/873.0f298220.js"
           ]
         },
         "css": {
@@ -170,7 +170,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/981.1c640ffc.js"
+            "__mf/js/async/392.6a9270a8.js"
           ]
         },
         "css": {
@@ -189,7 +189,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/173.66fc423e.js"
+            "__mf/js/async/470.f5dfd429.js"
           ]
         },
         "css": {
@@ -208,7 +208,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/964.3f12c3f5.js"
+            "__mf/js/async/121.cb300887.js"
           ]
         },
         "css": {
@@ -227,7 +227,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/740.fa3debdf.js"
+            "__mf/js/async/978.151ab551.js"
           ]
         },
         "css": {
@@ -245,27 +245,27 @@
       "assets": {
         "js": {
           "sync": [
-            "__mf/js/async/177.ab9a582b.js",
-            "__mf/js/async/783.976dc72b.js",
-            "__mf/js/async/971.0902cbf8.js",
-            "__mf/js/async/118.c1138755.js",
-            "__mf/js/async/__federation_expose_TracingGanttChart.13966d2e.js"
+            "__mf/js/async/986.56030b97.js",
+            "__mf/js/async/728.b805adfd.js",
+            "__mf/js/async/953.c4774074.js",
+            "__mf/js/async/557.d2605567.js",
+            "__mf/js/async/__federation_expose_TracingGanttChart.eeb93a1d.js"
           ],
           "async": [
-            "__mf/js/async/238.813da7cb.js",
-            "__mf/js/async/224.670da1e3.js",
-            "__mf/js/async/292.4821b1b1.js",
-            "__mf/js/async/814.c33b5f31.js",
-            "__mf/js/async/63.0b6a8d45.js",
-            "__mf/js/async/lib-router.ab6beae3.js",
-            "__mf/js/async/488.2d364feb.js"
+            "__mf/js/async/588.a1fce2da.js",
+            "__mf/js/async/71.ec1919d7.js",
+            "__mf/js/async/356.7ea3eee9.js",
+            "__mf/js/async/43.55c495e3.js",
+            "__mf/js/async/754.2f82ce32.js",
+            "__mf/js/async/lib-router.1f330b2a.js",
+            "__mf/js/async/177.cf9df204.js"
           ]
         },
         "css": {
           "sync": [],
           "async": [
-            "__mf/css/async/341.d3010b86.css",
-            "__mf/css/async/263.d3010b86.css"
+            "__mf/css/async/61.d3010b86.css",
+            "__mf/css/async/823.d3010b86.css"
           ]
         }
       },