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

package/lib/TracingGanttChart/MiniGanttChart/draw.js

@@ -10,8 +10,8 @@
 // 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 { forEachSpan } from '../trace';
-import { minSpanWidthPx } from '../utils';
+import { forEachSpan } from "../trace.js";
+import { minSpanWidthPx } from "../utils.js";
 const MIN_BAR_HEIGHT = 1;
 const MAX_BAR_HEIGHT = 7;
 export function drawSpans(ctx, width, height, trace, spanColorGenerator) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/MiniGanttChart/draw.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 { Span, Trace, forEachSpan } from '../trace';\nimport { minSpanWidthPx } from '../utils';\n\nconst MIN_BAR_HEIGHT = 1;\nconst MAX_BAR_HEIGHT = 7;\n\nexport function drawSpans(\n  ctx: CanvasRenderingContext2D,\n  width: number,\n  height: number,\n  trace: Trace,\n  spanColorGenerator: (span: Span) => string\n): void {\n  // calculate optimal height, enforce min and max bar height and finally round to an integer\n  const numSpans = trace.spanById.size;\n  const barHeight = Math.round(Math.min(Math.max(height / numSpans, MIN_BAR_HEIGHT), MAX_BAR_HEIGHT));\n\n  const traceDuration = trace.endTimeUnixMs - trace.startTimeUnixMs;\n  const yChange = height / numSpans;\n  let y = 0;\n\n  const drawSpan = (span: Span): void => {\n    const spanDuration = span.endTimeUnixMs - span.startTimeUnixMs;\n    const relativeDuration = spanDuration / traceDuration;\n    const relativeStart = (span.startTimeUnixMs - trace.startTimeUnixMs) / traceDuration;\n\n    ctx.fillStyle = spanColorGenerator(span);\n    ctx.beginPath();\n    ctx.rect(\n      Math.round(relativeStart * width),\n      Math.round(y),\n      Math.max(minSpanWidthPx, Math.round(relativeDuration * width)),\n      barHeight\n    );\n    ctx.fill();\n    y += yChange;\n  };\n\n  forEachSpan(trace.rootSpans, drawSpan);\n}\n"],"names":["forEachSpan","minSpanWidthPx","MIN_BAR_HEIGHT","MAX_BAR_HEIGHT","drawSpans","ctx","width","height","trace","spanColorGenerator","numSpans","spanById","size","barHeight","Math","round","min","max","traceDuration","endTimeUnixMs","startTimeUnixMs","yChange","y","drawSpan","span","spanDuration","relativeDuration","relativeStart","fillStyle","beginPath","rect","fill","rootSpans"],"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,SAAsBA,WAAW,QAAQ,WAAW;AACpD,SAASC,cAAc,QAAQ,WAAW;AAE1C,MAAMC,iBAAiB;AACvB,MAAMC,iBAAiB;AAEvB,OAAO,SAASC,UACdC,GAA6B,EAC7BC,KAAa,EACbC,MAAc,EACdC,KAAY,EACZC,kBAA0C;IAE1C,2FAA2F;IAC3F,MAAMC,WAAWF,MAAMG,QAAQ,CAACC,IAAI;IACpC,MAAMC,YAAYC,KAAKC,KAAK,CAACD,KAAKE,GAAG,CAACF,KAAKG,GAAG,CAACV,SAASG,UAAUR,iBAAiBC;IAEnF,MAAMe,gBAAgBV,MAAMW,aAAa,GAAGX,MAAMY,eAAe;IACjE,MAAMC,UAAUd,SAASG;IACzB,IAAIY,IAAI;IAER,MAAMC,WAAW,CAACC;QAChB,MAAMC,eAAeD,KAAKL,aAAa,GAAGK,KAAKJ,eAAe;QAC9D,MAAMM,mBAAmBD,eAAeP;QACxC,MAAMS,gBAAgB,AAACH,CAAAA,KAAKJ,eAAe,GAAGZ,MAAMY,eAAe,AAAD,IAAKF;QAEvEb,IAAIuB,SAAS,GAAGnB,mBAAmBe;QACnCnB,IAAIwB,SAAS;QACbxB,IAAIyB,IAAI,CACNhB,KAAKC,KAAK,CAACY,gBAAgBrB,QAC3BQ,KAAKC,KAAK,CAACO,IACXR,KAAKG,GAAG,CAAChB,gBAAgBa,KAAKC,KAAK,CAACW,mBAAmBpB,SACvDO;QAEFR,IAAI0B,IAAI;QACRT,KAAKD;IACP;IAEArB,YAAYQ,MAAMwB,SAAS,EAAET;AAC/B"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/MiniGanttChart/draw.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 { Span, Trace } from '../trace';\nimport { forEachSpan } from '../trace';\nimport { minSpanWidthPx } from '../utils';\n\nconst MIN_BAR_HEIGHT = 1;\nconst MAX_BAR_HEIGHT = 7;\n\nexport function drawSpans(\n  ctx: CanvasRenderingContext2D,\n  width: number,\n  height: number,\n  trace: Trace,\n  spanColorGenerator: (span: Span) => string,\n): void {\n  // calculate optimal height, enforce min and max bar height and finally round to an integer\n  const numSpans = trace.spanById.size;\n  const barHeight = Math.round(Math.min(Math.max(height / numSpans, MIN_BAR_HEIGHT), MAX_BAR_HEIGHT));\n\n  const traceDuration = trace.endTimeUnixMs - trace.startTimeUnixMs;\n  const yChange = height / numSpans;\n  let y = 0;\n\n  const drawSpan = (span: Span): void => {\n    const spanDuration = span.endTimeUnixMs - span.startTimeUnixMs;\n    const relativeDuration = spanDuration / traceDuration;\n    const relativeStart = (span.startTimeUnixMs - trace.startTimeUnixMs) / traceDuration;\n\n    ctx.fillStyle = spanColorGenerator(span);\n    ctx.beginPath();\n    ctx.rect(\n      Math.round(relativeStart * width),\n      Math.round(y),\n      Math.max(minSpanWidthPx, Math.round(relativeDuration * width)),\n      barHeight,\n    );\n    ctx.fill();\n    y += yChange;\n  };\n\n  forEachSpan(trace.rootSpans, drawSpan);\n}\n"],"names":["forEachSpan","minSpanWidthPx","MIN_BAR_HEIGHT","MAX_BAR_HEIGHT","drawSpans","ctx","width","height","trace","spanColorGenerator","numSpans","spanById","size","barHeight","Math","round","min","max","traceDuration","endTimeUnixMs","startTimeUnixMs","yChange","y","drawSpan","span","spanDuration","relativeDuration","relativeStart","fillStyle","beginPath","rect","fill","rootSpans"],"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;AAGjC,SAASA,WAAW,QAAQ,cAAW;AACvC,SAASC,cAAc,QAAQ,cAAW;AAE1C,MAAMC,iBAAiB;AACvB,MAAMC,iBAAiB;AAEvB,OAAO,SAASC,UACdC,GAA6B,EAC7BC,KAAa,EACbC,MAAc,EACdC,KAAY,EACZC,kBAA0C;IAE1C,2FAA2F;IAC3F,MAAMC,WAAWF,MAAMG,QAAQ,CAACC,IAAI;IACpC,MAAMC,YAAYC,KAAKC,KAAK,CAACD,KAAKE,GAAG,CAACF,KAAKG,GAAG,CAACV,SAASG,UAAUR,iBAAiBC;IAEnF,MAAMe,gBAAgBV,MAAMW,aAAa,GAAGX,MAAMY,eAAe;IACjE,MAAMC,UAAUd,SAASG;IACzB,IAAIY,IAAI;IAER,MAAMC,WAAW,CAACC;QAChB,MAAMC,eAAeD,KAAKL,aAAa,GAAGK,KAAKJ,eAAe;QAC9D,MAAMM,mBAAmBD,eAAeP;QACxC,MAAMS,gBAAgB,AAACH,CAAAA,KAAKJ,eAAe,GAAGZ,MAAMY,eAAe,AAAD,IAAKF;QAEvEb,IAAIuB,SAAS,GAAGnB,mBAAmBe;QACnCnB,IAAIwB,SAAS;QACbxB,IAAIyB,IAAI,CACNhB,KAAKC,KAAK,CAACY,gBAAgBrB,QAC3BQ,KAAKC,KAAK,CAACO,IACXR,KAAKG,GAAG,CAAChB,gBAAgBa,KAAKC,KAAK,CAACW,mBAAmBpB,SACvDO;QAEFR,IAAI0B,IAAI;QACRT,KAAKD;IACP;IAEArB,YAAYQ,MAAMwB,SAAS,EAAET;AAC/B"}

package/lib/TracingGanttChart/Search.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { Trace } from './trace';
+import type { ReactElement } from 'react';
+import type { Trace } from './trace';
 export interface SearchBarProps {
     search: SpanSearch;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/Search.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,YAAY,EAAkC,MAAM,OAAO,CAAC;AAGrE,OAAO,EAAQ,KAAK,EAAe,MAAM,SAAS,CAAC;AAEnD,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CA2D7D;AAeD,MAAM,WAAW,UAAU;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,UAAU,CAuBtD"}
+{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/Search.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,KAAK,EAAQ,KAAK,EAAE,MAAM,SAAS,CAAC;AAG3C,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CA2D7D;AAeD,MAAM,WAAW,UAAU;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,UAAU,CAuBtD"}

package/lib/TracingGanttChart/Search.js

@@ -11,13 +11,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { IconButton, InputAdornment, Stack, TextField } from '@mui/material';
-import ChevronUp from 'mdi-material-ui/ChevronUp';
-import ChevronDown from 'mdi-material-ui/ChevronDown';
-import Close from 'mdi-material-ui/Close';
-import { useCallback, useMemo, useState } from 'react';
-import { renderAttributeValue } from './DetailPane/Attributes';
-import { forEachSpan } from './trace';
+import { IconButton, InputAdornment, Stack, TextField } from "@mui/material";
+import ChevronDown from "mdi-material-ui/ChevronDown";
+import ChevronUp from "mdi-material-ui/ChevronUp";
+import Close from "mdi-material-ui/Close";
+import { useCallback, useMemo, useState } from "react";
+import { renderAttributeValue } from "./DetailPane/Attributes.js";
+import { forEachSpan } from "./trace.js";
 export function SearchBar(props) {
     const { search } = props;
     const { searchQuery, setSearchQuery, matchingSpanIds, focusedMatchIndex, setFocusedMatchIndex } = search;

package/lib/TracingGanttChart/Search.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/TracingGanttChart/Search.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { IconButton, InputAdornment, Stack, TextField } from '@mui/material';\nimport ChevronUp from 'mdi-material-ui/ChevronUp';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport Close from 'mdi-material-ui/Close';\nimport { ReactElement, useCallback, useMemo, useState } from 'react';\nimport * as otlpcommonv1 from '@perses-dev/spec/dist/dashboard/query-type/otlp/common/v1/common';\nimport { renderAttributeValue } from './DetailPane/Attributes';\nimport { Span, Trace, forEachSpan } from './trace';\n\nexport interface SearchBarProps {\n  search: SpanSearch;\n}\n\nexport function SearchBar(props: SearchBarProps): ReactElement {\n  const { search } = props;\n  const { searchQuery, setSearchQuery, matchingSpanIds, focusedMatchIndex, setFocusedMatchIndex } = search;\n\n  const hasQuery = searchQuery.length > 0;\n  const matchCount = matchingSpanIds.length;\n  const hasMatches = matchCount > 0;\n\n  function handlePrev(): void {\n    if (!hasMatches) return;\n    setFocusedMatchIndex((focusedMatchIndex - 1 + matchCount) % matchCount);\n  }\n\n  function handleNext(): void {\n    if (!hasMatches) return;\n    setFocusedMatchIndex((focusedMatchIndex + 1) % matchCount);\n  }\n\n  function handleKeyDown(e: React.KeyboardEvent): void {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      if (e.shiftKey) {\n        handlePrev();\n      } else {\n        handleNext();\n      }\n    }\n  }\n\n  return (\n    <Stack direction=\"row\" sx={{ alignItems: 'center', gap: 0.5, minWidth: 300 }}>\n      <TextField\n        size=\"small\"\n        placeholder=\"Search spans...\"\n        value={searchQuery}\n        onChange={(e) => setSearchQuery(e.target.value)}\n        onKeyDown={handleKeyDown}\n        slotProps={{\n          input: {\n            endAdornment: (\n              <InputAdornment position=\"end\" sx={{ visibility: hasQuery ? 'visible' : 'hidden', whiteSpace: 'nowrap' }}>\n                {hasMatches ? `${focusedMatchIndex + 1}/${matchCount}` : '0/0'}\n              </InputAdornment>\n            ),\n          },\n        }}\n        sx={{ minWidth: 200 }}\n      />\n      <IconButton size=\"small\" disabled={!hasMatches} aria-label=\"Previous match\" onClick={handlePrev}>\n        <ChevronUp />\n      </IconButton>\n      <IconButton size=\"small\" disabled={!hasMatches} aria-label=\"Next match\" onClick={handleNext}>\n        <ChevronDown />\n      </IconButton>\n      <IconButton size=\"small\" disabled={!hasQuery} aria-label=\"Clear search\" onClick={() => setSearchQuery('')}>\n        <Close />\n      </IconButton>\n    </Stack>\n  );\n}\n\nfunction spanMatchesQuery(span: Span, query: string): boolean {\n  const attrMatches = (attr: otlpcommonv1.KeyValue): boolean =>\n    attr.key.toLowerCase().includes(query) || renderAttributeValue(attr.value).toLowerCase().includes(query);\n\n  return (\n    span.resource.serviceName?.toLowerCase().includes(query) ||\n    span.name.toLowerCase().includes(query) ||\n    span.spanId.toLowerCase().includes(query) ||\n    span.attributes.some(attrMatches) ||\n    span.resource.attributes.some(attrMatches)\n  );\n}\n\nexport interface SpanSearch {\n  searchQuery: string;\n  setSearchQuery: (query: string) => void;\n  matchingSpanIds: string[];\n  focusedMatchIndex: number;\n  setFocusedMatchIndex: (index: number) => void;\n}\n\nexport function useSpanSearch(trace: Trace): SpanSearch {\n  const [searchQuery, setSearchQueryRaw] = useState('');\n  const [focusedMatchIndex, setFocusedMatchIndex] = useState(0);\n\n  const matchingSpanIds = useMemo(() => {\n    if (searchQuery.length === 0) return [];\n\n    const query = searchQuery.toLowerCase();\n    const matches: string[] = [];\n    forEachSpan(trace.rootSpans, (span) => {\n      if (spanMatchesQuery(span, query)) {\n        matches.push(span.spanId);\n      }\n    });\n    return matches;\n  }, [searchQuery, trace.rootSpans]);\n\n  const setSearchQuery = useCallback((query: string) => {\n    setSearchQueryRaw(query);\n    setFocusedMatchIndex(0);\n  }, []);\n\n  return { searchQuery, setSearchQuery, matchingSpanIds, focusedMatchIndex, setFocusedMatchIndex };\n}\n"],"names":["IconButton","InputAdornment","Stack","TextField","ChevronUp","ChevronDown","Close","useCallback","useMemo","useState","renderAttributeValue","forEachSpan","SearchBar","props","search","searchQuery","setSearchQuery","matchingSpanIds","focusedMatchIndex","setFocusedMatchIndex","hasQuery","length","matchCount","hasMatches","handlePrev","handleNext","handleKeyDown","e","key","preventDefault","shiftKey","direction","sx","alignItems","gap","minWidth","size","placeholder","value","onChange","target","onKeyDown","slotProps","input","endAdornment","position","visibility","whiteSpace","disabled","aria-label","onClick","spanMatchesQuery","span","query","attrMatches","attr","toLowerCase","includes","resource","serviceName","name","spanId","attributes","some","useSpanSearch","trace","setSearchQueryRaw","matches","rootSpans","push"],"mappings":"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"}
+{"version":3,"sources":["../../../src/TracingGanttChart/Search.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { IconButton, InputAdornment, Stack, TextField } from '@mui/material';\nimport type * as otlpcommonv1 from '@perses-dev/spec/dist/dashboard/query-type/otlp/common/v1/common';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport ChevronUp from 'mdi-material-ui/ChevronUp';\nimport Close from 'mdi-material-ui/Close';\nimport type { ReactElement } from 'react';\nimport { useCallback, useMemo, useState } from 'react';\n\nimport { renderAttributeValue } from './DetailPane/Attributes';\nimport type { Span, Trace } from './trace';\nimport { forEachSpan } from './trace';\n\nexport interface SearchBarProps {\n  search: SpanSearch;\n}\n\nexport function SearchBar(props: SearchBarProps): ReactElement {\n  const { search } = props;\n  const { searchQuery, setSearchQuery, matchingSpanIds, focusedMatchIndex, setFocusedMatchIndex } = search;\n\n  const hasQuery = searchQuery.length > 0;\n  const matchCount = matchingSpanIds.length;\n  const hasMatches = matchCount > 0;\n\n  function handlePrev(): void {\n    if (!hasMatches) return;\n    setFocusedMatchIndex((focusedMatchIndex - 1 + matchCount) % matchCount);\n  }\n\n  function handleNext(): void {\n    if (!hasMatches) return;\n    setFocusedMatchIndex((focusedMatchIndex + 1) % matchCount);\n  }\n\n  function handleKeyDown(e: React.KeyboardEvent): void {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      if (e.shiftKey) {\n        handlePrev();\n      } else {\n        handleNext();\n      }\n    }\n  }\n\n  return (\n    <Stack direction=\"row\" sx={{ alignItems: 'center', gap: 0.5, minWidth: 300 }}>\n      <TextField\n        size=\"small\"\n        placeholder=\"Search spans...\"\n        value={searchQuery}\n        onChange={(e) => setSearchQuery(e.target.value)}\n        onKeyDown={handleKeyDown}\n        slotProps={{\n          input: {\n            endAdornment: (\n              <InputAdornment position=\"end\" sx={{ visibility: hasQuery ? 'visible' : 'hidden', whiteSpace: 'nowrap' }}>\n                {hasMatches ? `${focusedMatchIndex + 1}/${matchCount}` : '0/0'}\n              </InputAdornment>\n            ),\n          },\n        }}\n        sx={{ minWidth: 200 }}\n      />\n      <IconButton size=\"small\" disabled={!hasMatches} aria-label=\"Previous match\" onClick={handlePrev}>\n        <ChevronUp />\n      </IconButton>\n      <IconButton size=\"small\" disabled={!hasMatches} aria-label=\"Next match\" onClick={handleNext}>\n        <ChevronDown />\n      </IconButton>\n      <IconButton size=\"small\" disabled={!hasQuery} aria-label=\"Clear search\" onClick={() => setSearchQuery('')}>\n        <Close />\n      </IconButton>\n    </Stack>\n  );\n}\n\nfunction spanMatchesQuery(span: Span, query: string): boolean {\n  const attrMatches = (attr: otlpcommonv1.KeyValue): boolean =>\n    attr.key.toLowerCase().includes(query) || renderAttributeValue(attr.value).toLowerCase().includes(query);\n\n  return (\n    span.resource.serviceName?.toLowerCase().includes(query) ||\n    span.name.toLowerCase().includes(query) ||\n    span.spanId.toLowerCase().includes(query) ||\n    span.attributes.some(attrMatches) ||\n    span.resource.attributes.some(attrMatches)\n  );\n}\n\nexport interface SpanSearch {\n  searchQuery: string;\n  setSearchQuery: (query: string) => void;\n  matchingSpanIds: string[];\n  focusedMatchIndex: number;\n  setFocusedMatchIndex: (index: number) => void;\n}\n\nexport function useSpanSearch(trace: Trace): SpanSearch {\n  const [searchQuery, setSearchQueryRaw] = useState('');\n  const [focusedMatchIndex, setFocusedMatchIndex] = useState(0);\n\n  const matchingSpanIds = useMemo(() => {\n    if (searchQuery.length === 0) return [];\n\n    const query = searchQuery.toLowerCase();\n    const matches: string[] = [];\n    forEachSpan(trace.rootSpans, (span) => {\n      if (spanMatchesQuery(span, query)) {\n        matches.push(span.spanId);\n      }\n    });\n    return matches;\n  }, [searchQuery, trace.rootSpans]);\n\n  const setSearchQuery = useCallback((query: string) => {\n    setSearchQueryRaw(query);\n    setFocusedMatchIndex(0);\n  }, []);\n\n  return { searchQuery, setSearchQuery, matchingSpanIds, focusedMatchIndex, setFocusedMatchIndex };\n}\n"],"names":["IconButton","InputAdornment","Stack","TextField","ChevronDown","ChevronUp","Close","useCallback","useMemo","useState","renderAttributeValue","forEachSpan","SearchBar","props","search","searchQuery","setSearchQuery","matchingSpanIds","focusedMatchIndex","setFocusedMatchIndex","hasQuery","length","matchCount","hasMatches","handlePrev","handleNext","handleKeyDown","e","key","preventDefault","shiftKey","direction","sx","alignItems","gap","minWidth","size","placeholder","value","onChange","target","onKeyDown","slotProps","input","endAdornment","position","visibility","whiteSpace","disabled","aria-label","onClick","spanMatchesQuery","span","query","attrMatches","attr","toLowerCase","includes","resource","serviceName","name","spanId","attributes","some","useSpanSearch","trace","setSearchQueryRaw","matches","rootSpans","push"],"mappings":"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"}

package/lib/TracingGanttChart/Ticks.d.ts

@@ -1,6 +1,6 @@
-import { ReactElement } from 'react';
-import { Viewport } from './utils';
-import { Trace } from './trace';
+import type { ReactElement } from 'react';
+import type { Trace } from './trace';
+import type { Viewport } from './utils';
 export interface TicksHeaderProps {
     trace: Trace;
     viewport: Viewport;

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

@@ -1 +1 @@
-{"version":3,"file":"Ticks.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/Ticks.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAkB,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAiBjE;AAED;;GAEG;AACH,wBAAgB,KAAK,IAAI,YAAY,CAQpC"}
+{"version":3,"file":"Ticks.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/Ticks.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGxC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAiBjE;AAED;;GAEG;AACH,wBAAgB,KAAK,IAAI,YAAY,CAQpC"}

package/lib/TracingGanttChart/Ticks.js

@@ -11,8 +11,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Box, styled } from '@mui/material';
-import { formatDuration } from './utils';
+import { Box, styled } from "@mui/material";
+import { formatDuration } from "./utils.js";
 /**
  * TicksHeader renders all tick labels in the header
  */ export function TicksHeader(props) {
@@ -26,7 +26,7 @@ import { formatDuration } from './utils';
                     left: '0%',
                     borderWidth: 0
                 },
-                children: formatDuration(startAt + duration * 0)
+                children: formatDuration(startAt)
             }),
             /*#__PURE__*/ _jsx(TickBox, {
                 style: {

package/lib/TracingGanttChart/Ticks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/TracingGanttChart/Ticks.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 { 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,+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;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 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 type { ReactElement } from 'react';\n\nimport type { Trace } from './trace';\nimport type { Viewport } from './utils';\nimport { formatDuration } from './utils';\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)}</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,+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;AAK5C,SAASC,cAAc,QAAQ,aAAU;AAOzC;;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;;0BAChE,KAACC;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/TraceHeaderBar.d.ts

@@ -1,6 +1,6 @@
-import { ReactElement } from 'react';
-import { Trace } from './trace';
-import { SpanSearch } from './Search';
+import type { ReactElement } from 'react';
+import type { SpanSearch } from './Search';
+import type { Trace } from './trace';
 export interface TraceHeaderBarProps {
     trace: Trace;
     search: SpanSearch;

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

@@ -1 +1 @@
-{"version":3,"file":"TraceHeaderBar.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/TraceHeaderBar.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAa,UAAU,EAAE,MAAM,UAAU,CAAC;AAiBjD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,YAAY,CA0CvE"}
+{"version":3,"file":"TraceHeaderBar.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/TraceHeaderBar.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAkBrC,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,YAAY,CA0CvE"}

package/lib/TracingGanttChart/TraceHeaderBar.js

@@ -11,12 +11,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { IconButton, Stack, Tooltip, Typography } from '@mui/material';
-import MagnifyIcon from 'mdi-material-ui/Magnify';
-import { useMemo, useState } from 'react';
-import { useTimeZone } from '@perses-dev/components';
-import { formatDuration } from './utils';
-import { SearchBar } from './Search';
+import { IconButton, Stack, Tooltip, Typography } from "@mui/material";
+import { useTimeZone } from "@perses-dev/components";
+import MagnifyIcon from "mdi-material-ui/Magnify";
+import { useMemo, useState } from "react";
+import { SearchBar } from "./Search.js";
+import { formatDuration } from "./utils.js";
 const DATE_FORMAT_OPTIONS = {
     year: 'numeric',
     month: 'long',

package/lib/TracingGanttChart/TraceHeaderBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/TracingGanttChart/TraceHeaderBar.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { IconButton, Stack, Tooltip, Typography } from '@mui/material';\nimport MagnifyIcon from 'mdi-material-ui/Magnify';\nimport { ReactElement, useMemo, useState } from 'react';\nimport { useTimeZone } from '@perses-dev/components';\nimport { formatDuration } from './utils';\nimport { Trace } from './trace';\nimport { SearchBar, SpanSearch } from './Search';\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};\nconst dateFormatterUTC = new Intl.DateTimeFormat(undefined, {\n  ...DATE_FORMAT_OPTIONS,\n  timeZone: 'UTC',\n  timeZoneName: 'short',\n}).format;\n\nexport interface TraceHeaderBarProps {\n  trace: Trace;\n  search: SpanSearch;\n}\n\nexport function TraceHeaderBar(props: TraceHeaderBarProps): ReactElement {\n  const { trace, search } = props;\n\n  const { dateFormatOptionsWithUserTimeZone } = useTimeZone();\n  const dateFormatter = useMemo(() => {\n    const dateFormatOptions = dateFormatOptionsWithUserTimeZone(DATE_FORMAT_OPTIONS);\n    return new Intl.DateTimeFormat(undefined, dateFormatOptions).format;\n  }, [dateFormatOptionsWithUserTimeZone]);\n  const [showSearch, setShowSearch] = useState(false);\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=\"column\" sx={{ gap: 1 }}>\n      <Stack direction=\"row\" sx={{ gap: 1, justifyContent: 'space-between', flexWrap: 'wrap' }}>\n        <Stack direction=\"row\" sx={{ gap: 1, alignItems: 'center' }}>\n          <Typography variant=\"h3\">\n            {rootSpan.resource.serviceName}: {rootSpan.name} (\n            {formatDuration(trace.endTimeUnixMs - trace.startTimeUnixMs)})\n          </Typography>\n          <IconButton size=\"small\" onClick={() => setShowSearch((prev) => !prev)} aria-label=\"Toggle search\">\n            <MagnifyIcon fontSize=\"small\" />\n          </IconButton>\n        </Stack>\n        <Stack direction=\"row\" sx={{ rowGap: 1, columnGap: 2, alignItems: 'center', flexWrap: 'wrap' }}>\n          <Typography variant=\"h4\" sx={{ fontWeight: 'normal' }}>\n            <strong>Start:</strong>{' '}\n            <Tooltip title={dateFormatterUTC(trace.startTimeUnixMs)} placement=\"top\" arrow>\n              <Typography component=\"span\">{dateFormatter(trace.startTimeUnixMs)}</Typography>\n            </Tooltip>\n          </Typography>\n          <Typography variant=\"h4\" sx={{ fontWeight: 'normal' }}>\n            <strong>Trace ID:</strong> {rootSpan.traceId}\n          </Typography>\n        </Stack>\n      </Stack>\n      {showSearch && <SearchBar search={search} />}\n    </Stack>\n  );\n}\n"],"names":["IconButton","Stack","Tooltip","Typography","MagnifyIcon","useMemo","useState","useTimeZone","formatDuration","SearchBar","DATE_FORMAT_OPTIONS","year","month","day","hour","minute","second","fractionalSecondDigits","dateFormatterUTC","Intl","DateTimeFormat","undefined","timeZone","timeZoneName","format","TraceHeaderBar","props","trace","search","dateFormatOptionsWithUserTimeZone","dateFormatter","dateFormatOptions","showSearch","setShowSearch","rootSpan","rootSpans","direction","sx","gap","justifyContent","flexWrap","alignItems","variant","resource","serviceName","name","endTimeUnixMs","startTimeUnixMs","size","onClick","prev","aria-label","fontSize","rowGap","columnGap","fontWeight","strong","title","placement","arrow","component","traceId"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,UAAU,EAAEC,KAAK,EAAEC,OAAO,EAAEC,UAAU,QAAQ,gBAAgB;AACvE,OAAOC,iBAAiB,0BAA0B;AAClD,SAAuBC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AACxD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,cAAc,QAAQ,UAAU;AAEzC,SAASC,SAAS,QAAoB,WAAW;AAEjD,MAAMC,sBAAkD;IACtDC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,MAAM;IACNC,QAAQ;IACRC,QAAQ;IACRC,wBAAwB;AAC1B;AACA,MAAMC,mBAAmB,IAAIC,KAAKC,cAAc,CAACC,WAAW;IAC1D,GAAGX,mBAAmB;IACtBY,UAAU;IACVC,cAAc;AAChB,GAAGC,MAAM;AAOT,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGF;IAE1B,MAAM,EAAEG,iCAAiC,EAAE,GAAGtB;IAC9C,MAAMuB,gBAAgBzB,QAAQ;QAC5B,MAAM0B,oBAAoBF,kCAAkCnB;QAC5D,OAAO,IAAIS,KAAKC,cAAc,CAACC,WAAWU,mBAAmBP,MAAM;IACrE,GAAG;QAACK;KAAkC;IACtC,MAAM,CAACG,YAAYC,cAAc,GAAG3B,SAAS;IAE7C,MAAM4B,WAAWP,MAAMQ,SAAS,CAAC,EAAE;IACnC,IAAI,CAACD,UAAU;QACb,qBAAO,KAAC/B;sBAAW;;IACrB;IAEA,qBACE,MAACF;QAAMmC,WAAU;QAASC,IAAI;YAAEC,KAAK;QAAE;;0BACrC,MAACrC;gBAAMmC,WAAU;gBAAMC,IAAI;oBAAEC,KAAK;oBAAGC,gBAAgB;oBAAiBC,UAAU;gBAAO;;kCACrF,MAACvC;wBAAMmC,WAAU;wBAAMC,IAAI;4BAAEC,KAAK;4BAAGG,YAAY;wBAAS;;0CACxD,MAACtC;gCAAWuC,SAAQ;;oCACjBR,SAASS,QAAQ,CAACC,WAAW;oCAAC;oCAAGV,SAASW,IAAI;oCAAC;oCAC/CrC,eAAemB,MAAMmB,aAAa,GAAGnB,MAAMoB,eAAe;oCAAE;;;0CAE/D,KAAC/C;gCAAWgD,MAAK;gCAAQC,SAAS,IAAMhB,cAAc,CAACiB,OAAS,CAACA;gCAAOC,cAAW;0CACjF,cAAA,KAAC/C;oCAAYgD,UAAS;;;;;kCAG1B,MAACnD;wBAAMmC,WAAU;wBAAMC,IAAI;4BAAEgB,QAAQ;4BAAGC,WAAW;4BAAGb,YAAY;4BAAUD,UAAU;wBAAO;;0CAC3F,MAACrC;gCAAWuC,SAAQ;gCAAKL,IAAI;oCAAEkB,YAAY;gCAAS;;kDAClD,KAACC;kDAAO;;oCAAgB;kDACxB,KAACtD;wCAAQuD,OAAOvC,iBAAiBS,MAAMoB,eAAe;wCAAGW,WAAU;wCAAMC,KAAK;kDAC5E,cAAA,KAACxD;4CAAWyD,WAAU;sDAAQ9B,cAAcH,MAAMoB,eAAe;;;;;0CAGrE,MAAC5C;gCAAWuC,SAAQ;gCAAKL,IAAI;oCAAEkB,YAAY;gCAAS;;kDAClD,KAACC;kDAAO;;oCAAkB;oCAAEtB,SAAS2B,OAAO;;;;;;;YAIjD7B,4BAAc,KAACvB;gBAAUmB,QAAQA;;;;AAGxC"}
+{"version":3,"sources":["../../../src/TracingGanttChart/TraceHeaderBar.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { IconButton, Stack, Tooltip, Typography } from '@mui/material';\nimport { useTimeZone } from '@perses-dev/components';\nimport MagnifyIcon from 'mdi-material-ui/Magnify';\nimport type { ReactElement } from 'react';\nimport { useMemo, useState } from 'react';\n\nimport type { SpanSearch } from './Search';\nimport { SearchBar } from './Search';\nimport type { Trace } from './trace';\nimport { formatDuration } from './utils';\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};\nconst dateFormatterUTC = new Intl.DateTimeFormat(undefined, {\n  ...DATE_FORMAT_OPTIONS,\n  timeZone: 'UTC',\n  timeZoneName: 'short',\n}).format;\n\nexport interface TraceHeaderBarProps {\n  trace: Trace;\n  search: SpanSearch;\n}\n\nexport function TraceHeaderBar(props: TraceHeaderBarProps): ReactElement {\n  const { trace, search } = props;\n\n  const { dateFormatOptionsWithUserTimeZone } = useTimeZone();\n  const dateFormatter = useMemo(() => {\n    const dateFormatOptions = dateFormatOptionsWithUserTimeZone(DATE_FORMAT_OPTIONS);\n    return new Intl.DateTimeFormat(undefined, dateFormatOptions).format;\n  }, [dateFormatOptionsWithUserTimeZone]);\n  const [showSearch, setShowSearch] = useState(false);\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=\"column\" sx={{ gap: 1 }}>\n      <Stack direction=\"row\" sx={{ gap: 1, justifyContent: 'space-between', flexWrap: 'wrap' }}>\n        <Stack direction=\"row\" sx={{ gap: 1, alignItems: 'center' }}>\n          <Typography variant=\"h3\">\n            {rootSpan.resource.serviceName}: {rootSpan.name} (\n            {formatDuration(trace.endTimeUnixMs - trace.startTimeUnixMs)})\n          </Typography>\n          <IconButton size=\"small\" onClick={() => setShowSearch((prev) => !prev)} aria-label=\"Toggle search\">\n            <MagnifyIcon fontSize=\"small\" />\n          </IconButton>\n        </Stack>\n        <Stack direction=\"row\" sx={{ rowGap: 1, columnGap: 2, alignItems: 'center', flexWrap: 'wrap' }}>\n          <Typography variant=\"h4\" sx={{ fontWeight: 'normal' }}>\n            <strong>Start:</strong>{' '}\n            <Tooltip title={dateFormatterUTC(trace.startTimeUnixMs)} placement=\"top\" arrow>\n              <Typography component=\"span\">{dateFormatter(trace.startTimeUnixMs)}</Typography>\n            </Tooltip>\n          </Typography>\n          <Typography variant=\"h4\" sx={{ fontWeight: 'normal' }}>\n            <strong>Trace ID:</strong> {rootSpan.traceId}\n          </Typography>\n        </Stack>\n      </Stack>\n      {showSearch && <SearchBar search={search} />}\n    </Stack>\n  );\n}\n"],"names":["IconButton","Stack","Tooltip","Typography","useTimeZone","MagnifyIcon","useMemo","useState","SearchBar","formatDuration","DATE_FORMAT_OPTIONS","year","month","day","hour","minute","second","fractionalSecondDigits","dateFormatterUTC","Intl","DateTimeFormat","undefined","timeZone","timeZoneName","format","TraceHeaderBar","props","trace","search","dateFormatOptionsWithUserTimeZone","dateFormatter","dateFormatOptions","showSearch","setShowSearch","rootSpan","rootSpans","direction","sx","gap","justifyContent","flexWrap","alignItems","variant","resource","serviceName","name","endTimeUnixMs","startTimeUnixMs","size","onClick","prev","aria-label","fontSize","rowGap","columnGap","fontWeight","strong","title","placement","arrow","component","traceId"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,UAAU,EAAEC,KAAK,EAAEC,OAAO,EAAEC,UAAU,QAAQ,gBAAgB;AACvE,SAASC,WAAW,QAAQ,yBAAyB;AACrD,OAAOC,iBAAiB,0BAA0B;AAElD,SAASC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAG1C,SAASC,SAAS,QAAQ,cAAW;AAErC,SAASC,cAAc,QAAQ,aAAU;AAEzC,MAAMC,sBAAkD;IACtDC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,MAAM;IACNC,QAAQ;IACRC,QAAQ;IACRC,wBAAwB;AAC1B;AACA,MAAMC,mBAAmB,IAAIC,KAAKC,cAAc,CAACC,WAAW;IAC1D,GAAGX,mBAAmB;IACtBY,UAAU;IACVC,cAAc;AAChB,GAAGC,MAAM;AAOT,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGF;IAE1B,MAAM,EAAEG,iCAAiC,EAAE,GAAGzB;IAC9C,MAAM0B,gBAAgBxB,QAAQ;QAC5B,MAAMyB,oBAAoBF,kCAAkCnB;QAC5D,OAAO,IAAIS,KAAKC,cAAc,CAACC,WAAWU,mBAAmBP,MAAM;IACrE,GAAG;QAACK;KAAkC;IACtC,MAAM,CAACG,YAAYC,cAAc,GAAG1B,SAAS;IAE7C,MAAM2B,WAAWP,MAAMQ,SAAS,CAAC,EAAE;IACnC,IAAI,CAACD,UAAU;QACb,qBAAO,KAAC/B;sBAAW;;IACrB;IAEA,qBACE,MAACF;QAAMmC,WAAU;QAASC,IAAI;YAAEC,KAAK;QAAE;;0BACrC,MAACrC;gBAAMmC,WAAU;gBAAMC,IAAI;oBAAEC,KAAK;oBAAGC,gBAAgB;oBAAiBC,UAAU;gBAAO;;kCACrF,MAACvC;wBAAMmC,WAAU;wBAAMC,IAAI;4BAAEC,KAAK;4BAAGG,YAAY;wBAAS;;0CACxD,MAACtC;gCAAWuC,SAAQ;;oCACjBR,SAASS,QAAQ,CAACC,WAAW;oCAAC;oCAAGV,SAASW,IAAI;oCAAC;oCAC/CpC,eAAekB,MAAMmB,aAAa,GAAGnB,MAAMoB,eAAe;oCAAE;;;0CAE/D,KAAC/C;gCAAWgD,MAAK;gCAAQC,SAAS,IAAMhB,cAAc,CAACiB,OAAS,CAACA;gCAAOC,cAAW;0CACjF,cAAA,KAAC9C;oCAAY+C,UAAS;;;;;kCAG1B,MAACnD;wBAAMmC,WAAU;wBAAMC,IAAI;4BAAEgB,QAAQ;4BAAGC,WAAW;4BAAGb,YAAY;4BAAUD,UAAU;wBAAO;;0CAC3F,MAACrC;gCAAWuC,SAAQ;gCAAKL,IAAI;oCAAEkB,YAAY;gCAAS;;kDAClD,KAACC;kDAAO;;oCAAgB;kDACxB,KAACtD;wCAAQuD,OAAOvC,iBAAiBS,MAAMoB,eAAe;wCAAGW,WAAU;wCAAMC,KAAK;kDAC5E,cAAA,KAACxD;4CAAWyD,WAAU;sDAAQ9B,cAAcH,MAAMoB,eAAe;;;;;0CAGrE,MAAC5C;gCAAWuC,SAAQ;gCAAKL,IAAI;oCAAEkB,YAAY;gCAAS;;kDAClD,KAACC;kDAAO;;oCAAkB;oCAAEtB,SAAS2B,OAAO;;;;;;;YAIjD7B,4BAAc,KAACxB;gBAAUoB,QAAQA;;;;AAGxC"}

package/lib/TracingGanttChart/TracingGanttChart.d.ts

@@ -1,6 +1,6 @@
-import { ReactElement } from 'react';
-import * as otlptracev1 from '@perses-dev/spec/dist/dashboard/query-type/otlp/trace/v1/trace';
-import { CustomLinks, TracingGanttChartOptions } from '../gantt-chart-model';
+import type * as otlptracev1 from '@perses-dev/spec/dist/dashboard/query-type/otlp/trace/v1/trace';
+import type { ReactElement } from 'react';
+import type { CustomLinks, TracingGanttChartOptions } from '../gantt-chart-model';
 export interface TracingGanttChartProps {
     options: TracingGanttChartOptions;
     customLinks?: CustomLinks;

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

@@ -1 +1 @@
-{"version":3,"file":"TracingGanttChart.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/TracingGanttChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAC;AAEhE,OAAO,KAAK,WAAW,MAAM,gEAAgE,CAAC;AAC9F,OAAO,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAW7E,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,CAiE7E"}

package/lib/TracingGanttChart/TracingGanttChart.js

@@ -11,16 +11,16 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { useMemo, useRef, useState } from 'react';
-import { Box, Stack } from '@mui/material';
-import { MiniGanttChart } from './MiniGanttChart/MiniGanttChart';
-import { DetailPane } from './DetailPane/DetailPane';
-import { GanttTable } from './GanttTable/GanttTable';
-import { GanttTableProvider } from './GanttTable/GanttTableProvider';
-import { ResizableDivider } from './GanttTable/ResizableDivider';
-import { getTraceModel } from './trace';
-import { TraceHeaderBar } from './TraceHeaderBar';
-import { useSpanSearch } from './Search';
+import { Box, Stack } from "@mui/material";
+import { useMemo, useRef, useState } from "react";
+import { DetailPane } from "./DetailPane/DetailPane.js";
+import { GanttTable } from "./GanttTable/GanttTable.js";
+import { GanttTableProvider } from "./GanttTable/GanttTableProvider.js";
+import { ResizableDivider } from "./GanttTable/ResizableDivider.js";
+import { MiniGanttChart } from "./MiniGanttChart/MiniGanttChart.js";
+import { useSpanSearch } from "./Search.js";
+import { getTraceModel } from "./trace.js";
+import { TraceHeaderBar } from "./TraceHeaderBar.js";
 /**
  * The core GanttChart panel for Perses.
  *
@@ -32,7 +32,9 @@ import { useSpanSearch } from './Search';
         try {
             return getTraceModel(otlpTrace);
         } catch (e) {
-            throw new Error(`Error: unable to parse trace: ${e}`);
+            throw new Error(`Error: unable to parse trace: ${e}`, {
+                cause: e
+            });
         }
     }, [
         otlpTrace

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 { ReactElement, useMemo, useRef, useState } from 'react';\nimport { Box, Stack } from '@mui/material';\nimport * as otlptracev1 from '@perses-dev/spec/dist/dashboard/query-type/otlp/trace/v1/trace';\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 { TraceHeaderBar } from './TraceHeaderBar';\nimport { useSpanSearch } from './Search';\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}`);\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":["useMemo","useRef","useState","Box","Stack","MiniGanttChart","DetailPane","GanttTable","GanttTableProvider","ResizableDivider","getTraceModel","TraceHeaderBar","useSpanSearch","TracingGanttChart","props","options","customLinks","trace","otlpTrace","e","Error","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,SAAuBA,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAChE,SAASC,GAAG,EAAEC,KAAK,QAAQ,gBAAgB;AAG3C,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,cAAc,QAAQ,mBAAmB;AAClD,SAASC,aAAa,QAAQ,WAAW;AAQzC;;;;;CAKC,GACD,OAAO,SAASC,kBAAkBC,KAA6B;IAC7D,MAAM,EAAEC,OAAO,EAAEC,WAAW,EAAEC,OAAOC,SAAS,EAAE,GAAGJ;IAEnD,MAAMG,QAAQjB,QAAQ;QACpB,IAAI;YACF,OAAOU,cAAcQ;QACvB,EAAE,OAAOC,GAAG;YACV,MAAM,IAAIC,MAAM,CAAC,8BAA8B,EAAED,GAAG;QACtD;IACF,GAAG;QAACD;KAAU;IACd,MAAM,CAACG,UAAUC,YAAY,GAAGpB,SAAmB;QACjDqB,iBAAiBN,MAAMM,eAAe;QACtCC,eAAeP,MAAMO,aAAa;IACpC;IACA,MAAM,CAACC,cAAcC,gBAAgB,GAAGxB,SAA2B,IACjEa,QAAQY,cAAc,GAAGV,MAAMW,QAAQ,CAACC,GAAG,CAACd,QAAQY,cAAc,IAAIG;IAExE,MAAMC,SAASnB,cAAcK;IAE7B,MAAMe,aAAa/B,OAAuB;IAC1C,iEAAiE;IACjE,yDAAyD;IACzD,MAAM,CAACgC,YAAYC,cAAc,GAAGhC,SAAiB;IACrD,MAAMiC,MAAM;IACZ,MAAMC,UAAUJ,WAAWK,OAAO,GAAGC,WAAWC,iBAAiBP,WAAWK,OAAO,EAAEG,SAAS,KAAK,IAAI;IAEvG,qBACE,MAACpC;QAAMqC,KAAKT;QAAYU,WAAU;QAAMC,IAAI;YAAEC,QAAQ;YAAQC,WAAW;YAASV;QAAI;;0BACpF,MAAC/B;gBAAMuC,IAAI;oBAAEG,UAAU;oBAAGX;gBAAI;;kCAC5B,KAACxB;wBAAeM,OAAOA;wBAAOc,QAAQA;;kCACtC,KAAC1B;wBAAeU,SAASA;wBAASE,OAAOA;wBAAOI,UAAUA;wBAAUC,aAAaA;;kCACjF,KAACd;kCACC,cAAA,KAACD;4BACCQ,SAASA;4BACTC,aAAaA;4BACbC,OAAOA;4BACPI,UAAUA;4BACVI,cAAcA;4BACdsB,aAAarB;4BACbsB,iBAAiBjB,OAAOiB,eAAe;4BACvCC,eAAelB,OAAOiB,eAAe,CAACjB,OAAOmB,iBAAiB,CAAC;;;;;YAIpEzB,8BACC;;kCACE,KAAChB;wBAAiB0C,WAAWnB;wBAAYI,SAASA;wBAASgB,QAAQlB;;kCACnE,KAAC/B;wBACCkD,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,KAAClD;4BACCU,aAAaA;4BACbC,OAAOA;4BACPwC,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  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"}

package/lib/TracingGanttChart/palette.js

@@ -10,7 +10,7 @@
 // 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 ColorHash from 'color-hash';
+import ColorHash from "color-hash";
 // Valid hue values are 0 to 360 and can be adjusted to control the generated colors.
 // More info: https://github.com/zenozeng/color-hash#custom-hue
 // Picked min of 20 and max of 360 to exclude common threshold colors (red).

package/lib/TracingGanttChart/palette.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/TracingGanttChart/palette.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 ColorHash from 'color-hash';\n\n// Valid hue values are 0 to 360 and can be adjusted to control the generated colors.\n// More info: https://github.com/zenozeng/color-hash#custom-hue\n// Picked min of 20 and max of 360 to exclude common threshold colors (red).\n// Items with \"error\" in them will always be generated as red.\nconst ERROR_HUE_CUTOFF = 20;\nconst colorGenerator = new ColorHash({ hue: { min: ERROR_HUE_CUTOFF, max: 360 } });\nconst redColorGenerator = new ColorHash({ hue: { min: 0, max: ERROR_HUE_CUTOFF } });\n\nfunction computeConsistentColor(name: string, error: boolean): string {\n  const [hue, saturation, lightness] = error ? redColorGenerator.hsl(name) : colorGenerator.hsl(name);\n  const saturationPercent = `${(saturation * 100).toFixed(0)}%`;\n  const lightnessPercent = `${(lightness * 100).toFixed(0)}%`;\n  return `hsla(${hue.toFixed(2)},${saturationPercent},${lightnessPercent},0.9)`;\n}\n\n// To check whether a color has already been generated for a given string.\n// TODO: Predefined color aliases will be defined here\nconst colorLookup: Record<string, string> = {};\n\n/**\n * Return a consistent color for (name, error) tuple\n */\nexport function getConsistentColor(name: string, error: boolean): string {\n  const key = `${name}_____${error}`;\n  let value = colorLookup[key];\n  if (!value) {\n    value = computeConsistentColor(name, error);\n    colorLookup[key] = value;\n  }\n  return value;\n}\n\nexport function getConsistentCategoricalColor(\n  name: string,\n  error: boolean,\n  categoricalPalette: string[],\n  errorPalette: string[]\n): string {\n  const palette = error ? errorPalette : categoricalPalette;\n  if (palette.length === 0) {\n    console.warn('getConsistentCategoricalColor() called with empty color palette, fallback to #000');\n    return '#000';\n  }\n\n  let hash = 0;\n  for (let i = 0; i < name.length; i++) {\n    hash = name.charCodeAt(i) + ((hash << 5) - hash);\n  }\n\n  return palette[Math.abs(hash) % palette.length] ?? '#000';\n}\n"],"names":["ColorHash","ERROR_HUE_CUTOFF","colorGenerator","hue","min","max","redColorGenerator","computeConsistentColor","name","error","saturation","lightness","hsl","saturationPercent","toFixed","lightnessPercent","colorLookup","getConsistentColor","key","value","getConsistentCategoricalColor","categoricalPalette","errorPalette","palette","length","console","warn","hash","i","charCodeAt","Math","abs"],"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,OAAOA,eAAe,aAAa;AAEnC,qFAAqF;AACrF,+DAA+D;AAC/D,4EAA4E;AAC5E,8DAA8D;AAC9D,MAAMC,mBAAmB;AACzB,MAAMC,iBAAiB,IAAIF,UAAU;IAAEG,KAAK;QAAEC,KAAKH;QAAkBI,KAAK;IAAI;AAAE;AAChF,MAAMC,oBAAoB,IAAIN,UAAU;IAAEG,KAAK;QAAEC,KAAK;QAAGC,KAAKJ;IAAiB;AAAE;AAEjF,SAASM,uBAAuBC,IAAY,EAAEC,KAAc;IAC1D,MAAM,CAACN,KAAKO,YAAYC,UAAU,GAAGF,QAAQH,kBAAkBM,GAAG,CAACJ,QAAQN,eAAeU,GAAG,CAACJ;IAC9F,MAAMK,oBAAoB,GAAG,AAACH,CAAAA,aAAa,GAAE,EAAGI,OAAO,CAAC,GAAG,CAAC,CAAC;IAC7D,MAAMC,mBAAmB,GAAG,AAACJ,CAAAA,YAAY,GAAE,EAAGG,OAAO,CAAC,GAAG,CAAC,CAAC;IAC3D,OAAO,CAAC,KAAK,EAAEX,IAAIW,OAAO,CAAC,GAAG,CAAC,EAAED,kBAAkB,CAAC,EAAEE,iBAAiB,KAAK,CAAC;AAC/E;AAEA,0EAA0E;AAC1E,sDAAsD;AACtD,MAAMC,cAAsC,CAAC;AAE7C;;CAEC,GACD,OAAO,SAASC,mBAAmBT,IAAY,EAAEC,KAAc;IAC7D,MAAMS,MAAM,GAAGV,KAAK,KAAK,EAAEC,OAAO;IAClC,IAAIU,QAAQH,WAAW,CAACE,IAAI;IAC5B,IAAI,CAACC,OAAO;QACVA,QAAQZ,uBAAuBC,MAAMC;QACrCO,WAAW,CAACE,IAAI,GAAGC;IACrB;IACA,OAAOA;AACT;AAEA,OAAO,SAASC,8BACdZ,IAAY,EACZC,KAAc,EACdY,kBAA4B,EAC5BC,YAAsB;IAEtB,MAAMC,UAAUd,QAAQa,eAAeD;IACvC,IAAIE,QAAQC,MAAM,KAAK,GAAG;QACxBC,QAAQC,IAAI,CAAC;QACb,OAAO;IACT;IAEA,IAAIC,OAAO;IACX,IAAK,IAAIC,IAAI,GAAGA,IAAIpB,KAAKgB,MAAM,EAAEI,IAAK;QACpCD,OAAOnB,KAAKqB,UAAU,CAACD,KAAM,CAAA,AAACD,CAAAA,QAAQ,CAAA,IAAKA,IAAG;IAChD;IAEA,OAAOJ,OAAO,CAACO,KAAKC,GAAG,CAACJ,QAAQJ,QAAQC,MAAM,CAAC,IAAI;AACrD"}
+{"version":3,"sources":["../../../src/TracingGanttChart/palette.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 ColorHash from 'color-hash';\n\n// Valid hue values are 0 to 360 and can be adjusted to control the generated colors.\n// More info: https://github.com/zenozeng/color-hash#custom-hue\n// Picked min of 20 and max of 360 to exclude common threshold colors (red).\n// Items with \"error\" in them will always be generated as red.\nconst ERROR_HUE_CUTOFF = 20;\nconst colorGenerator = new ColorHash({ hue: { min: ERROR_HUE_CUTOFF, max: 360 } });\nconst redColorGenerator = new ColorHash({ hue: { min: 0, max: ERROR_HUE_CUTOFF } });\n\nfunction computeConsistentColor(name: string, error: boolean): string {\n  const [hue, saturation, lightness] = error ? redColorGenerator.hsl(name) : colorGenerator.hsl(name);\n  const saturationPercent = `${(saturation * 100).toFixed(0)}%`;\n  const lightnessPercent = `${(lightness * 100).toFixed(0)}%`;\n  return `hsla(${hue.toFixed(2)},${saturationPercent},${lightnessPercent},0.9)`;\n}\n\n// To check whether a color has already been generated for a given string.\n// TODO: Predefined color aliases will be defined here\nconst colorLookup: Record<string, string> = {};\n\n/**\n * Return a consistent color for (name, error) tuple\n */\nexport function getConsistentColor(name: string, error: boolean): string {\n  const key = `${name}_____${error}`;\n  let value = colorLookup[key];\n  if (!value) {\n    value = computeConsistentColor(name, error);\n    colorLookup[key] = value;\n  }\n  return value;\n}\n\nexport function getConsistentCategoricalColor(\n  name: string,\n  error: boolean,\n  categoricalPalette: string[],\n  errorPalette: string[],\n): string {\n  const palette = error ? errorPalette : categoricalPalette;\n  if (palette.length === 0) {\n    console.warn('getConsistentCategoricalColor() called with empty color palette, fallback to #000');\n    return '#000';\n  }\n\n  let hash = 0;\n  for (let i = 0; i < name.length; i++) {\n    hash = name.charCodeAt(i) + ((hash << 5) - hash);\n  }\n\n  return palette[Math.abs(hash) % palette.length] ?? '#000';\n}\n"],"names":["ColorHash","ERROR_HUE_CUTOFF","colorGenerator","hue","min","max","redColorGenerator","computeConsistentColor","name","error","saturation","lightness","hsl","saturationPercent","toFixed","lightnessPercent","colorLookup","getConsistentColor","key","value","getConsistentCategoricalColor","categoricalPalette","errorPalette","palette","length","console","warn","hash","i","charCodeAt","Math","abs"],"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,OAAOA,eAAe,aAAa;AAEnC,qFAAqF;AACrF,+DAA+D;AAC/D,4EAA4E;AAC5E,8DAA8D;AAC9D,MAAMC,mBAAmB;AACzB,MAAMC,iBAAiB,IAAIF,UAAU;IAAEG,KAAK;QAAEC,KAAKH;QAAkBI,KAAK;IAAI;AAAE;AAChF,MAAMC,oBAAoB,IAAIN,UAAU;IAAEG,KAAK;QAAEC,KAAK;QAAGC,KAAKJ;IAAiB;AAAE;AAEjF,SAASM,uBAAuBC,IAAY,EAAEC,KAAc;IAC1D,MAAM,CAACN,KAAKO,YAAYC,UAAU,GAAGF,QAAQH,kBAAkBM,GAAG,CAACJ,QAAQN,eAAeU,GAAG,CAACJ;IAC9F,MAAMK,oBAAoB,GAAG,AAACH,CAAAA,aAAa,GAAE,EAAGI,OAAO,CAAC,GAAG,CAAC,CAAC;IAC7D,MAAMC,mBAAmB,GAAG,AAACJ,CAAAA,YAAY,GAAE,EAAGG,OAAO,CAAC,GAAG,CAAC,CAAC;IAC3D,OAAO,CAAC,KAAK,EAAEX,IAAIW,OAAO,CAAC,GAAG,CAAC,EAAED,kBAAkB,CAAC,EAAEE,iBAAiB,KAAK,CAAC;AAC/E;AAEA,0EAA0E;AAC1E,sDAAsD;AACtD,MAAMC,cAAsC,CAAC;AAE7C;;CAEC,GACD,OAAO,SAASC,mBAAmBT,IAAY,EAAEC,KAAc;IAC7D,MAAMS,MAAM,GAAGV,KAAK,KAAK,EAAEC,OAAO;IAClC,IAAIU,QAAQH,WAAW,CAACE,IAAI;IAC5B,IAAI,CAACC,OAAO;QACVA,QAAQZ,uBAAuBC,MAAMC;QACrCO,WAAW,CAACE,IAAI,GAAGC;IACrB;IACA,OAAOA;AACT;AAEA,OAAO,SAASC,8BACdZ,IAAY,EACZC,KAAc,EACdY,kBAA4B,EAC5BC,YAAsB;IAEtB,MAAMC,UAAUd,QAAQa,eAAeD;IACvC,IAAIE,QAAQC,MAAM,KAAK,GAAG;QACxBC,QAAQC,IAAI,CAAC;QACb,OAAO;IACT;IAEA,IAAIC,OAAO;IACX,IAAK,IAAIC,IAAI,GAAGA,IAAIpB,KAAKgB,MAAM,EAAEI,IAAK;QACpCD,OAAOnB,KAAKqB,UAAU,CAACD,KAAM,CAAA,AAACD,CAAAA,QAAQ,CAAA,IAAKA,IAAG;IAChD;IAEA,OAAOJ,OAAO,CAACO,KAAKC,GAAG,CAACJ,QAAQJ,QAAQC,MAAM,CAAC,IAAI;AACrD"}

package/lib/TracingGanttChart/trace.d.ts

@@ -1,5 +1,5 @@
-import * as otlpcommonv1 from '@perses-dev/spec/dist/dashboard/query-type/otlp/common/v1/common';
-import * as otlptracev1 from '@perses-dev/spec/dist/dashboard/query-type/otlp/trace/v1/trace';
+import type * as otlpcommonv1 from '@perses-dev/spec/dist/dashboard/query-type/otlp/common/v1/common';
+import type * as otlptracev1 from '@perses-dev/spec/dist/dashboard/query-type/otlp/trace/v1/trace';
 /** holds the trace and computed properties required for the Gantt chart */
 export interface Trace {
     trace: otlptracev1.TracesData;

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

@@ -1 +1 @@
-{"version":3,"file":"trace.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/trace.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,YAAY,MAAM,kEAAkE,CAAC;AACjG,OAAO,KAAK,WAAW,MAAM,gEAAgE,CAAC;AAI9F,2EAA2E;AAC3E,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC;IAE9B;;;OAGG;IACH,SAAS,EAAE,IAAI,EAAE,CAAC;IAClB,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,IAAI;IACnB,QAAQ,EAAE,QAAQ,CAAC;IACnB,KAAK,EAAE,YAAY,CAAC,oBAAoB,CAAC;IACzC,UAAU,CAAC,EAAE,IAAI,CAAC;IAClB,uCAAuC;IACvC,UAAU,EAAE,IAAI,EAAE,CAAC;IAEnB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,YAAY,CAAC,QAAQ,EAAE,CAAC;IACpC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,QAAQ;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,YAAY,CAAC,QAAQ,EAAE,CAAC;CACrC;AAED,MAAM,WAAW,KAAK;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,YAAY,CAAC,QAAQ,EAAE,CAAC;CACrC;AAED,MAAM,WAAW,IAAI;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,YAAY,CAAC,QAAQ,EAAE,CAAC;CACrC;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,WAAW,CAAC,UAAU,GAAG,KAAK,CAmDlE;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,CAMnF"}
+{"version":3,"file":"trace.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/trace.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,KAAK,YAAY,MAAM,kEAAkE,CAAC;AAEtG,OAAO,KAAK,KAAK,WAAW,MAAM,gEAAgE,CAAC;AAGnG,2EAA2E;AAC3E,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC;IAE9B;;;OAGG;IACH,SAAS,EAAE,IAAI,EAAE,CAAC;IAClB,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,IAAI;IACnB,QAAQ,EAAE,QAAQ,CAAC;IACnB,KAAK,EAAE,YAAY,CAAC,oBAAoB,CAAC;IACzC,UAAU,CAAC,EAAE,IAAI,CAAC;IAClB,uCAAuC;IACvC,UAAU,EAAE,IAAI,EAAE,CAAC;IAEnB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,YAAY,CAAC,QAAQ,EAAE,CAAC;IACpC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,QAAQ;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,YAAY,CAAC,QAAQ,EAAE,CAAC;CACrC;AAED,MAAM,WAAW,KAAK;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,YAAY,CAAC,QAAQ,EAAE,CAAC;CACrC;AAED,MAAM,WAAW,IAAI;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,YAAY,CAAC,QAAQ,EAAE,CAAC;CACrC;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,WAAW,CAAC,UAAU,GAAG,KAAK,CAmDlE;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,CAMnF"}

package/lib/TracingGanttChart/trace.js

@@ -10,7 +10,7 @@
 // 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 { sortedIndexBy } from 'lodash';
+import { sortedIndexBy } from "lodash";
 /**
  * getTraceModel builds a tree of spans from an OTLP trace,
  * and precomputes common fields, for example the start and end time of a trace.

package/lib/TracingGanttChart/trace.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/TracingGanttChart/trace.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 * as otlpcommonv1 from '@perses-dev/spec/dist/dashboard/query-type/otlp/common/v1/common';\nimport * as otlptracev1 from '@perses-dev/spec/dist/dashboard/query-type/otlp/trace/v1/trace';\nimport * as otlpresourcev1 from '@perses-dev/spec/dist/dashboard/query-type/otlp/resource/v1/resource';\nimport { sortedIndexBy } from 'lodash';\n\n/** holds the trace and computed properties required for the Gantt chart */\nexport interface Trace {\n  trace: otlptracev1.TracesData;\n\n  /**\n   * if a trace is incomplete (e.g. a parent span has not been received yet),\n   * this branch of the span tree will be appended to the root\n   */\n  rootSpans: Span[];\n  spanById: Map<string, Span>;\n  startTimeUnixMs: number;\n  endTimeUnixMs: number;\n}\n\nexport interface Span {\n  resource: Resource;\n  scope: otlpcommonv1.InstrumentationScope;\n  parentSpan?: Span;\n  /** child spans, sorted by startTime */\n  childSpans: Span[];\n\n  traceId: string;\n  spanId: string;\n  parentSpanId?: string;\n  name: string;\n  kind?: string;\n  startTimeUnixMs: number;\n  endTimeUnixMs: number;\n  attributes: otlpcommonv1.KeyValue[];\n  events: Event[];\n  links: Link[];\n  status: otlptracev1.Status;\n}\n\nexport interface Resource {\n  serviceName?: string;\n  attributes: otlpcommonv1.KeyValue[];\n}\n\nexport interface Event {\n  timeUnixMs: number;\n  name: string;\n  attributes: otlpcommonv1.KeyValue[];\n}\n\nexport interface Link {\n  traceId: string;\n  spanId: string;\n  attributes: otlpcommonv1.KeyValue[];\n}\n\n/**\n * getTraceModel builds a tree of spans from an OTLP trace,\n * and precomputes common fields, for example the start and end time of a trace.\n * Time complexity: O(2n)\n */\nexport function getTraceModel(trace: otlptracev1.TracesData): Trace {\n  // first pass: build lookup table <spanId, Span> and compute min/max\n  const spanById = new Map<string, Span>();\n  const rootSpans: Span[] = [];\n  let startTimeUnixMs: number = 0;\n  let endTimeUnixMs: number = 0;\n  for (const resourceSpan of trace.resourceSpans) {\n    const resource = parseResource(resourceSpan.resource);\n\n    for (const scopeSpan of resourceSpan.scopeSpans) {\n      const scope = parseScope(scopeSpan.scope);\n\n      for (const otelSpan of scopeSpan.spans) {\n        const span: Span = {\n          resource,\n          scope,\n          childSpans: [],\n          ...parseSpan(otelSpan),\n        };\n        spanById.set(otelSpan.spanId, span);\n\n        if (startTimeUnixMs === 0 || span.startTimeUnixMs < startTimeUnixMs) {\n          startTimeUnixMs = span.startTimeUnixMs;\n        }\n        if (endTimeUnixMs === 0 || span.endTimeUnixMs > endTimeUnixMs) {\n          endTimeUnixMs = span.endTimeUnixMs;\n        }\n      }\n    }\n  }\n\n  // second pass: build tree based on parentSpanId property\n  for (const [, span] of spanById) {\n    if (!span.parentSpanId) {\n      rootSpans.push(span);\n      continue;\n    }\n\n    const parent = spanById.get(span.parentSpanId);\n    if (!parent) {\n      console.trace(`span ${span.spanId} has parent ${span.parentSpanId} which has not been received yet`);\n      rootSpans.push(span);\n      continue;\n    }\n\n    span.parentSpan = parent;\n    const insertChildSpanAt = sortedIndexBy(parent.childSpans, span, (s) => s.startTimeUnixMs);\n    parent.childSpans.splice(insertChildSpanAt, 0, span);\n  }\n\n  return { trace, rootSpans, spanById, startTimeUnixMs, endTimeUnixMs };\n}\n\n/**\n * Recursively iterates all spans depth-first.\n * Return false from the callback to skip a span's children.\n */\nexport function forEachSpan(spans: Span[], fn: (span: Span) => boolean | void): void {\n  for (const span of spans) {\n    if (fn(span) !== false) {\n      forEachSpan(span.childSpans, fn);\n    }\n  }\n}\n\nfunction parseResource(resource?: otlpresourcev1.Resource): Resource {\n  let serviceName = 'unknown';\n  for (const attr of resource?.attributes ?? []) {\n    if (attr.key === 'service.name' && 'stringValue' in attr.value) {\n      serviceName = attr.value.stringValue;\n      break;\n    }\n  }\n\n  return {\n    serviceName,\n    attributes: resource?.attributes ?? [],\n  };\n}\n\nfunction parseScope(scope?: otlpcommonv1.InstrumentationScope): otlpcommonv1.InstrumentationScope {\n  return scope ?? {};\n}\n\n/**\n * parseSpan parses the Span API type to the internal representation\n * i.e. convert strings to numbers etc.\n */\nfunction parseSpan(span: otlptracev1.Span): Omit<Span, 'resource' | 'scope' | 'childSpans'> {\n  return {\n    traceId: span.traceId,\n    spanId: span.spanId,\n    parentSpanId: span.parentSpanId,\n    name: span.name,\n    kind: span.kind,\n    startTimeUnixMs: parseInt(span.startTimeUnixNano) * 1e-6, // convert to milliseconds because JS cannot handle numbers larger than 9007199254740991\n    endTimeUnixMs: parseInt(span.endTimeUnixNano) * 1e-6,\n    attributes: span.attributes ?? [],\n    events: (span.events ?? []).map(parseEvent),\n    links: (span.links ?? []).map(parseLink),\n    status: span.status ?? {},\n  };\n}\n\nfunction parseEvent(event: otlptracev1.Event): Event {\n  return {\n    timeUnixMs: parseInt(event.timeUnixNano) * 1e-6, // convert to milliseconds because JS cannot handle numbers larger than 9007199254740991\n    name: event.name,\n    attributes: event.attributes ?? [],\n  };\n}\n\nfunction parseLink(link: otlptracev1.Link): Link {\n  return {\n    traceId: link.traceId,\n    spanId: link.spanId,\n    attributes: link.attributes ?? [],\n  };\n}\n"],"names":["sortedIndexBy","getTraceModel","trace","spanById","Map","rootSpans","startTimeUnixMs","endTimeUnixMs","resourceSpan","resourceSpans","resource","parseResource","scopeSpan","scopeSpans","scope","parseScope","otelSpan","spans","span","childSpans","parseSpan","set","spanId","parentSpanId","push","parent","get","console","parentSpan","insertChildSpanAt","s","splice","forEachSpan","fn","serviceName","attr","attributes","key","value","stringValue","traceId","name","kind","parseInt","startTimeUnixNano","endTimeUnixNano","events","map","parseEvent","links","parseLink","status","event","timeUnixMs","timeUnixNano","link"],"mappings":"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"}
+{"version":3,"sources":["../../../src/TracingGanttChart/trace.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';\nimport { sortedIndexBy } from 'lodash';\n\n/** holds the trace and computed properties required for the Gantt chart */\nexport interface Trace {\n  trace: otlptracev1.TracesData;\n\n  /**\n   * if a trace is incomplete (e.g. a parent span has not been received yet),\n   * this branch of the span tree will be appended to the root\n   */\n  rootSpans: Span[];\n  spanById: Map<string, Span>;\n  startTimeUnixMs: number;\n  endTimeUnixMs: number;\n}\n\nexport interface Span {\n  resource: Resource;\n  scope: otlpcommonv1.InstrumentationScope;\n  parentSpan?: Span;\n  /** child spans, sorted by startTime */\n  childSpans: Span[];\n\n  traceId: string;\n  spanId: string;\n  parentSpanId?: string;\n  name: string;\n  kind?: string;\n  startTimeUnixMs: number;\n  endTimeUnixMs: number;\n  attributes: otlpcommonv1.KeyValue[];\n  events: Event[];\n  links: Link[];\n  status: otlptracev1.Status;\n}\n\nexport interface Resource {\n  serviceName?: string;\n  attributes: otlpcommonv1.KeyValue[];\n}\n\nexport interface Event {\n  timeUnixMs: number;\n  name: string;\n  attributes: otlpcommonv1.KeyValue[];\n}\n\nexport interface Link {\n  traceId: string;\n  spanId: string;\n  attributes: otlpcommonv1.KeyValue[];\n}\n\n/**\n * getTraceModel builds a tree of spans from an OTLP trace,\n * and precomputes common fields, for example the start and end time of a trace.\n * Time complexity: O(2n)\n */\nexport function getTraceModel(trace: otlptracev1.TracesData): Trace {\n  // first pass: build lookup table <spanId, Span> and compute min/max\n  const spanById = new Map<string, Span>();\n  const rootSpans: Span[] = [];\n  let startTimeUnixMs: number = 0;\n  let endTimeUnixMs: number = 0;\n  for (const resourceSpan of trace.resourceSpans) {\n    const resource = parseResource(resourceSpan.resource);\n\n    for (const scopeSpan of resourceSpan.scopeSpans) {\n      const scope = parseScope(scopeSpan.scope);\n\n      for (const otelSpan of scopeSpan.spans) {\n        const span: Span = {\n          resource,\n          scope,\n          childSpans: [],\n          ...parseSpan(otelSpan),\n        };\n        spanById.set(otelSpan.spanId, span);\n\n        if (startTimeUnixMs === 0 || span.startTimeUnixMs < startTimeUnixMs) {\n          startTimeUnixMs = span.startTimeUnixMs;\n        }\n        if (endTimeUnixMs === 0 || span.endTimeUnixMs > endTimeUnixMs) {\n          endTimeUnixMs = span.endTimeUnixMs;\n        }\n      }\n    }\n  }\n\n  // second pass: build tree based on parentSpanId property\n  for (const [, span] of spanById) {\n    if (!span.parentSpanId) {\n      rootSpans.push(span);\n      continue;\n    }\n\n    const parent = spanById.get(span.parentSpanId);\n    if (!parent) {\n      console.trace(`span ${span.spanId} has parent ${span.parentSpanId} which has not been received yet`);\n      rootSpans.push(span);\n      continue;\n    }\n\n    span.parentSpan = parent;\n    const insertChildSpanAt = sortedIndexBy(parent.childSpans, span, (s) => s.startTimeUnixMs);\n    parent.childSpans.splice(insertChildSpanAt, 0, span);\n  }\n\n  return { trace, rootSpans, spanById, startTimeUnixMs, endTimeUnixMs };\n}\n\n/**\n * Recursively iterates all spans depth-first.\n * Return false from the callback to skip a span's children.\n */\nexport function forEachSpan(spans: Span[], fn: (span: Span) => boolean | void): void {\n  for (const span of spans) {\n    if (fn(span) !== false) {\n      forEachSpan(span.childSpans, fn);\n    }\n  }\n}\n\nfunction parseResource(resource?: otlpresourcev1.Resource): Resource {\n  let serviceName = 'unknown';\n  for (const attr of resource?.attributes ?? []) {\n    if (attr.key === 'service.name' && 'stringValue' in attr.value) {\n      serviceName = attr.value.stringValue;\n      break;\n    }\n  }\n\n  return {\n    serviceName,\n    attributes: resource?.attributes ?? [],\n  };\n}\n\nfunction parseScope(scope?: otlpcommonv1.InstrumentationScope): otlpcommonv1.InstrumentationScope {\n  return scope ?? {};\n}\n\n/**\n * parseSpan parses the Span API type to the internal representation\n * i.e. convert strings to numbers etc.\n */\nfunction parseSpan(span: otlptracev1.Span): Omit<Span, 'resource' | 'scope' | 'childSpans'> {\n  return {\n    traceId: span.traceId,\n    spanId: span.spanId,\n    parentSpanId: span.parentSpanId,\n    name: span.name,\n    kind: span.kind,\n    startTimeUnixMs: parseInt(span.startTimeUnixNano) * 1e-6, // convert to milliseconds because JS cannot handle numbers larger than 9007199254740991\n    endTimeUnixMs: parseInt(span.endTimeUnixNano) * 1e-6,\n    attributes: span.attributes ?? [],\n    events: (span.events ?? []).map(parseEvent),\n    links: (span.links ?? []).map(parseLink),\n    status: span.status ?? {},\n  };\n}\n\nfunction parseEvent(event: otlptracev1.Event): Event {\n  return {\n    timeUnixMs: parseInt(event.timeUnixNano) * 1e-6, // convert to milliseconds because JS cannot handle numbers larger than 9007199254740991\n    name: event.name,\n    attributes: event.attributes ?? [],\n  };\n}\n\nfunction parseLink(link: otlptracev1.Link): Link {\n  return {\n    traceId: link.traceId,\n    spanId: link.spanId,\n    attributes: link.attributes ?? [],\n  };\n}\n"],"names":["sortedIndexBy","getTraceModel","trace","spanById","Map","rootSpans","startTimeUnixMs","endTimeUnixMs","resourceSpan","resourceSpans","resource","parseResource","scopeSpan","scopeSpans","scope","parseScope","otelSpan","spans","span","childSpans","parseSpan","set","spanId","parentSpanId","push","parent","get","console","parentSpan","insertChildSpanAt","s","splice","forEachSpan","fn","serviceName","attr","attributes","key","value","stringValue","traceId","name","kind","parseInt","startTimeUnixNano","endTimeUnixNano","events","map","parseEvent","links","parseLink","status","event","timeUnixMs","timeUnixNano","link"],"mappings":"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"}

package/lib/TracingGanttChart/utils.d.ts

@@ -1,6 +1,6 @@
-import { PersesChartsTheme } from '@perses-dev/components';
-import { Theme } from '@mui/material';
-import { Span } from './trace';
+import type { Theme } from '@mui/material';
+import type { PersesChartsTheme } from '@perses-dev/components';
+import type { Span } from './trace';
 /**
  * Viewport contains the current zoom, i.e. which timeframe of the trace should be visible
  */

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,iGAAiG;AACjG,eAAO,MAAM,cAAc,IAAI,CAAC;AAChC,eAAO,MAAM,SAAS,SAAS,CAAC;AAChC,eAAO,MAAM,YAAY,GAAI,MAAM,IAAI,KAAG,OAA4D,CAAC;AAEvG,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,KAAK,EACf,WAAW,EAAE,iBAAiB,EAC9B,WAAW,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,EAC/C,WAAW,EAAE,MAAM,EACnB,KAAK,UAAQ,GACZ,MAAM,CAYR;AAED,wBAAgB,YAAY,CAC1B,QAAQ,EAAE,KAAK,EACf,WAAW,EAAE,iBAAiB,EAC9B,WAAW,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,EAC/C,IAAI,EAAE,IAAI,GACT,MAAM,CAER;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAQrD"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/utils.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAIhE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAEpC;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,iGAAiG;AACjG,eAAO,MAAM,cAAc,IAAI,CAAC;AAChC,eAAO,MAAM,SAAS,SAAS,CAAC;AAChC,eAAO,MAAM,YAAY,GAAI,MAAM,IAAI,KAAG,OAA4D,CAAC;AAEvG,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,KAAK,EACf,WAAW,EAAE,iBAAiB,EAC9B,WAAW,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,EAC/C,WAAW,EAAE,MAAM,EACnB,KAAK,UAAQ,GACZ,MAAM,CAYR;AAED,wBAAgB,YAAY,CAC1B,QAAQ,EAAE,KAAK,EACf,WAAW,EAAE,iBAAiB,EAC9B,WAAW,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,EAC/C,IAAI,EAAE,IAAI,GACT,MAAM,CAER;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAQrD"}

package/lib/TracingGanttChart/utils.js

@@ -10,8 +10,8 @@
 // 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 * as otlptracev1 from '@perses-dev/spec/dist/dashboard/query-type/otlp/trace/v1/trace';
-import { getConsistentCategoricalColor, getConsistentColor } from './palette';
+import * as otlptracev1 from "@perses-dev/spec/dist/dashboard/query-type/otlp/trace/v1/trace";
+import { getConsistentCategoricalColor, getConsistentColor } from "./palette.js";
 /** minimum span width, i.e. increase width if the calculated width is too small to be visible */ export const minSpanWidthPx = 2;
 export const rowHeight = '2rem';
 export const spanHasError = (span)=>span.status?.code === otlptracev1.StatusCodeError;

package/lib/TracingGanttChart/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/TracingGanttChart/utils.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 { PersesChartsTheme } from '@perses-dev/components';\nimport { Theme } from '@mui/material';\nimport * as otlptracev1 from '@perses-dev/spec/dist/dashboard/query-type/otlp/trace/v1/trace';\nimport { getConsistentCategoricalColor, getConsistentColor } from './palette';\nimport { Span } from './trace';\n\n/**\n * Viewport contains the current zoom, i.e. which timeframe of the trace should be visible\n */\nexport interface Viewport {\n  startTimeUnixMs: number;\n  endTimeUnixMs: number;\n}\n\n/** minimum span width, i.e. increase width if the calculated width is too small to be visible */\nexport const minSpanWidthPx = 2;\nexport const rowHeight = '2rem';\nexport const spanHasError = (span: Span): boolean => span.status?.code === otlptracev1.StatusCodeError;\n\nexport function getServiceColor(\n  muiTheme: Theme,\n  chartsTheme: PersesChartsTheme,\n  paletteMode: 'auto' | 'categorical' | undefined,\n  serviceName: string,\n  error = false\n): string {\n  switch (paletteMode) {\n    case 'categorical': {\n      // ECharts type for color is not always an array but it is always an array in ChartsProvider\n      const categoricalPalette = chartsTheme.echartsTheme.color as string[];\n      const errorPalette = [muiTheme.palette.error.light, muiTheme.palette.error.main, muiTheme.palette.error.dark];\n      return getConsistentCategoricalColor(serviceName, error, categoricalPalette, errorPalette);\n    }\n\n    default:\n      return getConsistentColor(serviceName, error);\n  }\n}\n\nexport function getSpanColor(\n  muiTheme: Theme,\n  chartsTheme: PersesChartsTheme,\n  paletteMode: 'auto' | 'categorical' | undefined,\n  span: Span\n): string {\n  return getServiceColor(muiTheme, chartsTheme, paletteMode, span.resource.serviceName ?? '', spanHasError(span));\n}\n\nexport function formatDuration(timeMs: number): string {\n  if (timeMs < 1) {\n    return `${Math.round(timeMs * 1000)}μs`;\n  }\n  if (timeMs < 1000) {\n    return `${+timeMs.toFixed(2)}ms`;\n  }\n  return `${+(timeMs / 1000).toFixed(2)}s`;\n}\n"],"names":["otlptracev1","getConsistentCategoricalColor","getConsistentColor","minSpanWidthPx","rowHeight","spanHasError","span","status","code","StatusCodeError","getServiceColor","muiTheme","chartsTheme","paletteMode","serviceName","error","categoricalPalette","echartsTheme","color","errorPalette","palette","light","main","dark","getSpanColor","resource","formatDuration","timeMs","Math","round","toFixed"],"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;AAIjC,YAAYA,iBAAiB,iEAAiE;AAC9F,SAASC,6BAA6B,EAAEC,kBAAkB,QAAQ,YAAY;AAW9E,+FAA+F,GAC/F,OAAO,MAAMC,iBAAiB,EAAE;AAChC,OAAO,MAAMC,YAAY,OAAO;AAChC,OAAO,MAAMC,eAAe,CAACC,OAAwBA,KAAKC,MAAM,EAAEC,SAASR,YAAYS,eAAe,CAAC;AAEvG,OAAO,SAASC,gBACdC,QAAe,EACfC,WAA8B,EAC9BC,WAA+C,EAC/CC,WAAmB,EACnBC,QAAQ,KAAK;IAEb,OAAQF;QACN,KAAK;YAAe;gBAClB,4FAA4F;gBAC5F,MAAMG,qBAAqBJ,YAAYK,YAAY,CAACC,KAAK;gBACzD,MAAMC,eAAe;oBAACR,SAASS,OAAO,CAACL,KAAK,CAACM,KAAK;oBAAEV,SAASS,OAAO,CAACL,KAAK,CAACO,IAAI;oBAAEX,SAASS,OAAO,CAACL,KAAK,CAACQ,IAAI;iBAAC;gBAC7G,OAAOtB,8BAA8Ba,aAAaC,OAAOC,oBAAoBG;YAC/E;QAEA;YACE,OAAOjB,mBAAmBY,aAAaC;IAC3C;AACF;AAEA,OAAO,SAASS,aACdb,QAAe,EACfC,WAA8B,EAC9BC,WAA+C,EAC/CP,IAAU;IAEV,OAAOI,gBAAgBC,UAAUC,aAAaC,aAAaP,KAAKmB,QAAQ,CAACX,WAAW,IAAI,IAAIT,aAAaC;AAC3G;AAEA,OAAO,SAASoB,eAAeC,MAAc;IAC3C,IAAIA,SAAS,GAAG;QACd,OAAO,GAAGC,KAAKC,KAAK,CAACF,SAAS,MAAM,EAAE,CAAC;IACzC;IACA,IAAIA,SAAS,MAAM;QACjB,OAAO,GAAG,CAACA,OAAOG,OAAO,CAAC,GAAG,EAAE,CAAC;IAClC;IACA,OAAO,GAAG,CAAC,AAACH,CAAAA,SAAS,IAAG,EAAGG,OAAO,CAAC,GAAG,CAAC,CAAC;AAC1C"}
+{"version":3,"sources":["../../../src/TracingGanttChart/utils.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 { Theme } from '@mui/material';\nimport type { PersesChartsTheme } from '@perses-dev/components';\nimport * as otlptracev1 from '@perses-dev/spec/dist/dashboard/query-type/otlp/trace/v1/trace';\n\nimport { getConsistentCategoricalColor, getConsistentColor } from './palette';\nimport type { Span } from './trace';\n\n/**\n * Viewport contains the current zoom, i.e. which timeframe of the trace should be visible\n */\nexport interface Viewport {\n  startTimeUnixMs: number;\n  endTimeUnixMs: number;\n}\n\n/** minimum span width, i.e. increase width if the calculated width is too small to be visible */\nexport const minSpanWidthPx = 2;\nexport const rowHeight = '2rem';\nexport const spanHasError = (span: Span): boolean => span.status?.code === otlptracev1.StatusCodeError;\n\nexport function getServiceColor(\n  muiTheme: Theme,\n  chartsTheme: PersesChartsTheme,\n  paletteMode: 'auto' | 'categorical' | undefined,\n  serviceName: string,\n  error = false,\n): string {\n  switch (paletteMode) {\n    case 'categorical': {\n      // ECharts type for color is not always an array but it is always an array in ChartsProvider\n      const categoricalPalette = chartsTheme.echartsTheme.color as string[];\n      const errorPalette = [muiTheme.palette.error.light, muiTheme.palette.error.main, muiTheme.palette.error.dark];\n      return getConsistentCategoricalColor(serviceName, error, categoricalPalette, errorPalette);\n    }\n\n    default:\n      return getConsistentColor(serviceName, error);\n  }\n}\n\nexport function getSpanColor(\n  muiTheme: Theme,\n  chartsTheme: PersesChartsTheme,\n  paletteMode: 'auto' | 'categorical' | undefined,\n  span: Span,\n): string {\n  return getServiceColor(muiTheme, chartsTheme, paletteMode, span.resource.serviceName ?? '', spanHasError(span));\n}\n\nexport function formatDuration(timeMs: number): string {\n  if (timeMs < 1) {\n    return `${Math.round(timeMs * 1000)}μs`;\n  }\n  if (timeMs < 1000) {\n    return `${+timeMs.toFixed(2)}ms`;\n  }\n  return `${+(timeMs / 1000).toFixed(2)}s`;\n}\n"],"names":["otlptracev1","getConsistentCategoricalColor","getConsistentColor","minSpanWidthPx","rowHeight","spanHasError","span","status","code","StatusCodeError","getServiceColor","muiTheme","chartsTheme","paletteMode","serviceName","error","categoricalPalette","echartsTheme","color","errorPalette","palette","light","main","dark","getSpanColor","resource","formatDuration","timeMs","Math","round","toFixed"],"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;AAIjC,YAAYA,iBAAiB,iEAAiE;AAE9F,SAASC,6BAA6B,EAAEC,kBAAkB,QAAQ,eAAY;AAW9E,+FAA+F,GAC/F,OAAO,MAAMC,iBAAiB,EAAE;AAChC,OAAO,MAAMC,YAAY,OAAO;AAChC,OAAO,MAAMC,eAAe,CAACC,OAAwBA,KAAKC,MAAM,EAAEC,SAASR,YAAYS,eAAe,CAAC;AAEvG,OAAO,SAASC,gBACdC,QAAe,EACfC,WAA8B,EAC9BC,WAA+C,EAC/CC,WAAmB,EACnBC,QAAQ,KAAK;IAEb,OAAQF;QACN,KAAK;YAAe;gBAClB,4FAA4F;gBAC5F,MAAMG,qBAAqBJ,YAAYK,YAAY,CAACC,KAAK;gBACzD,MAAMC,eAAe;oBAACR,SAASS,OAAO,CAACL,KAAK,CAACM,KAAK;oBAAEV,SAASS,OAAO,CAACL,KAAK,CAACO,IAAI;oBAAEX,SAASS,OAAO,CAACL,KAAK,CAACQ,IAAI;iBAAC;gBAC7G,OAAOtB,8BAA8Ba,aAAaC,OAAOC,oBAAoBG;YAC/E;QAEA;YACE,OAAOjB,mBAAmBY,aAAaC;IAC3C;AACF;AAEA,OAAO,SAASS,aACdb,QAAe,EACfC,WAA8B,EAC9BC,WAA+C,EAC/CP,IAAU;IAEV,OAAOI,gBAAgBC,UAAUC,aAAaC,aAAaP,KAAKmB,QAAQ,CAACX,WAAW,IAAI,IAAIT,aAAaC;AAC3G;AAEA,OAAO,SAASoB,eAAeC,MAAc;IAC3C,IAAIA,SAAS,GAAG;QACd,OAAO,GAAGC,KAAKC,KAAK,CAACF,SAAS,MAAM,EAAE,CAAC;IACzC;IACA,IAAIA,SAAS,MAAM;QACjB,OAAO,GAAG,CAACA,OAAOG,OAAO,CAAC,GAAG,EAAE,CAAC;IAClC;IACA,OAAO,GAAG,CAAC,AAACH,CAAAA,SAAS,IAAG,EAAGG,OAAO,CAAC,GAAG,CAAC,CAAC;AAC1C"}

package/lib/TracingGanttChart.d.ts

@@ -1,5 +1,5 @@
-import { PanelPlugin } from '@perses-dev/plugin-system';
-import { TracingGanttChartOptions } from './gantt-chart-model';
-import { TracingGanttChartPanelProps } from './TracingGanttChartPanel';
+import type { PanelPlugin } from '@perses-dev/plugin-system';
+import type { TracingGanttChartOptions } from './gantt-chart-model';
+import type { TracingGanttChartPanelProps } from './TracingGanttChartPanel';
 export declare const TracingGanttChart: PanelPlugin<TracingGanttChartOptions, TracingGanttChartPanelProps>;
 //# sourceMappingURL=TracingGanttChart.d.ts.map

package/lib/TracingGanttChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TracingGanttChart.d.ts","sourceRoot":"","sources":["../../src/TracingGanttChart.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAyC,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AACtG,OAAO,EAA0B,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAG/F,eAAO,MAAM,iBAAiB,EAAE,WAAW,CAAC,wBAAwB,EAAE,2BAA2B,CAKhG,CAAC"}
+{"version":3,"file":"TracingGanttChart.d.ts","sourceRoot":"","sources":["../../src/TracingGanttChart.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE7D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAGpE,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAG5E,eAAO,MAAM,iBAAiB,EAAE,WAAW,CAAC,wBAAwB,EAAE,2BAA2B,CAKhG,CAAC"}

package/lib/TracingGanttChart.js

@@ -10,9 +10,9 @@
 // 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 { createInitialTracingGanttChartOptions } from './gantt-chart-model';
-import { TracingGanttChartPanel } from './TracingGanttChartPanel';
-import { DownloadTraceAction } from './PanelActions';
+import { createInitialTracingGanttChartOptions } from "./gantt-chart-model.js";
+import { DownloadTraceAction } from "./PanelActions.js";
+import { TracingGanttChartPanel } from "./TracingGanttChartPanel.js";
 export const TracingGanttChart = {
     PanelComponent: TracingGanttChartPanel,
     supportedQueryTypes: [