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

package/lib/TracingGanttChart/TracingGanttChart.js

@@ -0,0 +1,106 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import { Box, Stack, useTheme } from '@mui/material';
+import { MiniGanttChart } from './MiniGanttChart/MiniGanttChart';
+import { DetailPane } from './DetailPane/DetailPane';
+import { GanttTable } from './GanttTable/GanttTable';
+import { GanttTableProvider } from './GanttTable/GanttTableProvider';
+import { ResizableDivider } from './GanttTable/ResizableDivider';
+import { getTraceModel } from './trace';
+/**
+ * The core GanttChart panel for Perses.
+ *
+ * The UI/UX of this panel is based on Jaeger UI, licensed under Apache License, Version 2.0.
+ * https://github.com/jaegertracing/jaeger-ui
+ */ export function TracingGanttChart(props) {
+    const { options, attributeLinks, trace: otlpTrace } = props;
+    const theme = useTheme();
+    const trace = useMemo(()=>{
+        try {
+            return getTraceModel(otlpTrace);
+        } catch (e) {
+            throw new Error(`Error: unable to parse trace: ${e}`);
+        }
+    }, [
+        otlpTrace
+    ]);
+    const [viewport, setViewport] = useState({
+        startTimeUnixMs: trace.startTimeUnixMs,
+        endTimeUnixMs: trace.endTimeUnixMs
+    });
+    const [selectedSpan, setSelectedSpan] = useState(undefined);
+    const ganttChart = useRef(null);
+    // tableWidth only comes to effect if the detail pane is visible.
+    // setTableWidth() is only called by <ResizableDivider />
+    const [tableWidth, setTableWidth] = useState(0.82);
+    const gap = 2;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        ref: ganttChart,
+        direction: "row",
+        sx: {
+            height: '100%',
+            minHeight: '240px',
+            gap
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                sx: {
+                    flexGrow: 1,
+                    gap
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(MiniGanttChart, {
+                        options: options,
+                        trace: trace,
+                        viewport: viewport,
+                        setViewport: setViewport
+                    }),
+                    /*#__PURE__*/ _jsx(GanttTableProvider, {
+                        children: /*#__PURE__*/ _jsx(GanttTable, {
+                            options: options,
+                            trace: trace,
+                            viewport: viewport,
+                            selectedSpan: selectedSpan,
+                            onSpanClick: setSelectedSpan
+                        })
+                    })
+                ]
+            }),
+            selectedSpan && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(ResizableDivider, {
+                        parentRef: ganttChart,
+                        spacing: parseInt(theme.spacing(gap)),
+                        onMove: setTableWidth
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        sx: {
+                            width: `${(1 - tableWidth) * 100}%`,
+                            overflow: 'auto'
+                        },
+                        children: /*#__PURE__*/ _jsx(DetailPane, {
+                            attributeLinks: attributeLinks,
+                            trace: trace,
+                            span: selectedSpan,
+                            onCloseBtnClick: ()=>setSelectedSpan(undefined)
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=TracingGanttChart.js.map

package/lib/TracingGanttChart/TracingGanttChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/TracingGanttChart/TracingGanttChart.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { Box, Stack, useTheme } from '@mui/material';\nimport { otlptracev1 } from '@perses-dev/core';\nimport { 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 { AttributeLinks } from './DetailPane/Attributes';\nimport { getTraceModel, Span } from './trace';\n\nexport interface TracingGanttChartProps {\n  options: TracingGanttChartOptions;\n  attributeLinks?: AttributeLinks;\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, attributeLinks, trace: otlpTrace } = props;\n\n  const theme = useTheme();\n  const trace = useMemo(() => {\n    try {\n      return getTraceModel(otlpTrace);\n    } catch (e) {\n      throw new Error(`Error: unable to parse trace: ${e}`);\n    }\n  }, [otlpTrace]);\n  const [viewport, setViewport] = useState<Viewport>({\n    startTimeUnixMs: trace.startTimeUnixMs,\n    endTimeUnixMs: trace.endTimeUnixMs,\n  });\n  const [selectedSpan, setSelectedSpan] = useState<Span | undefined>(undefined);\n\n  const ganttChart = useRef<HTMLDivElement>(null);\n  // tableWidth only comes to effect if the detail pane is visible.\n  // setTableWidth() is only called by <ResizableDivider />\n  const [tableWidth, setTableWidth] = useState<number>(0.82);\n  const gap = 2;\n\n  return (\n    <Stack ref={ganttChart} direction=\"row\" sx={{ height: '100%', minHeight: '240px', gap }}>\n      <Stack sx={{ flexGrow: 1, gap }}>\n        <MiniGanttChart options={options} trace={trace} viewport={viewport} setViewport={setViewport} />\n        <GanttTableProvider>\n          <GanttTable\n            options={options}\n            trace={trace}\n            viewport={viewport}\n            selectedSpan={selectedSpan}\n            onSpanClick={setSelectedSpan}\n          />\n        </GanttTableProvider>\n      </Stack>\n      {selectedSpan && (\n        <>\n          <ResizableDivider parentRef={ganttChart} spacing={parseInt(theme.spacing(gap))} onMove={setTableWidth} />\n          <Box sx={{ width: `${(1 - tableWidth) * 100}%`, overflow: 'auto' }}>\n            <DetailPane\n              attributeLinks={attributeLinks}\n              trace={trace}\n              span={selectedSpan}\n              onCloseBtnClick={() => setSelectedSpan(undefined)}\n            />\n          </Box>\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["useMemo","useRef","useState","Box","Stack","useTheme","MiniGanttChart","DetailPane","GanttTable","GanttTableProvider","ResizableDivider","getTraceModel","TracingGanttChart","props","options","attributeLinks","trace","otlpTrace","theme","e","Error","viewport","setViewport","startTimeUnixMs","endTimeUnixMs","selectedSpan","setSelectedSpan","undefined","ganttChart","tableWidth","setTableWidth","gap","ref","direction","sx","height","minHeight","flexGrow","onSpanClick","parentRef","spacing","parseInt","onMove","width","overflow","span","onCloseBtnClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAChE,SAASC,GAAG,EAAEC,KAAK,EAAEC,QAAQ,QAAQ,gBAAgB;AAGrD,SAASC,cAAc,QAAQ,kCAAkC;AACjE,SAASC,UAAU,QAAQ,0BAA0B;AAErD,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,gBAAgB,QAAQ,gCAAgC;AAEjE,SAASC,aAAa,QAAc,UAAU;AAQ9C;;;;;CAKC,GACD,OAAO,SAASC,kBAAkBC,KAA6B;IAC7D,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,OAAOC,SAAS,EAAE,GAAGJ;IAEtD,MAAMK,QAAQb;IACd,MAAMW,QAAQhB,QAAQ;QACpB,IAAI;YACF,OAAOW,cAAcM;QACvB,EAAE,OAAOE,GAAG;YACV,MAAM,IAAIC,MAAM,CAAC,8BAA8B,EAAED,GAAG;QACtD;IACF,GAAG;QAACF;KAAU;IACd,MAAM,CAACI,UAAUC,YAAY,GAAGpB,SAAmB;QACjDqB,iBAAiBP,MAAMO,eAAe;QACtCC,eAAeR,MAAMQ,aAAa;IACpC;IACA,MAAM,CAACC,cAAcC,gBAAgB,GAAGxB,SAA2ByB;IAEnE,MAAMC,aAAa3B,OAAuB;IAC1C,iEAAiE;IACjE,yDAAyD;IACzD,MAAM,CAAC4B,YAAYC,cAAc,GAAG5B,SAAiB;IACrD,MAAM6B,MAAM;IAEZ,qBACE,MAAC3B;QAAM4B,KAAKJ;QAAYK,WAAU;QAAMC,IAAI;YAAEC,QAAQ;YAAQC,WAAW;YAASL;QAAI;;0BACpF,MAAC3B;gBAAM8B,IAAI;oBAAEG,UAAU;oBAAGN;gBAAI;;kCAC5B,KAACzB;wBAAeQ,SAASA;wBAASE,OAAOA;wBAAOK,UAAUA;wBAAUC,aAAaA;;kCACjF,KAACb;kCACC,cAAA,KAACD;4BACCM,SAASA;4BACTE,OAAOA;4BACPK,UAAUA;4BACVI,cAAcA;4BACda,aAAaZ;;;;;YAIlBD,8BACC;;kCACE,KAACf;wBAAiB6B,WAAWX;wBAAYY,SAASC,SAASvB,MAAMsB,OAAO,CAACT;wBAAOW,QAAQZ;;kCACxF,KAAC3B;wBAAI+B,IAAI;4BAAES,OAAO,GAAG,AAAC,CAAA,IAAId,UAAS,IAAK,IAAI,CAAC,CAAC;4BAAEe,UAAU;wBAAO;kCAC/D,cAAA,KAACrC;4BACCQ,gBAAgBA;4BAChBC,OAAOA;4BACP6B,MAAMpB;4BACNqB,iBAAiB,IAAMpB,gBAAgBC;;;;;;;AAOrD"}

package/lib/TracingGanttChart/palette.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Return a consistent color for (name, error) tuple
+ */
+export declare function getConsistentColor(name: string, error: boolean): string;
+export declare function getConsistentCategoricalColor(name: string, error: boolean, categoricalPalette: string[], errorPalette: string[]): string;
+//# sourceMappingURL=palette.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/palette.ts"],"names":[],"mappings":"AAkCA;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,CAQvE;AAED,wBAAgB,6BAA6B,CAC3C,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,OAAO,EACd,kBAAkB,EAAE,MAAM,EAAE,EAC5B,YAAY,EAAE,MAAM,EAAE,GACrB,MAAM,CAaR"}

package/lib/TracingGanttChart/palette.js

@@ -0,0 +1,64 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+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).
+// Items with "error" in them will always be generated as red.
+const ERROR_HUE_CUTOFF = 20;
+const colorGenerator = new ColorHash({
+    hue: {
+        min: ERROR_HUE_CUTOFF,
+        max: 360
+    }
+});
+const redColorGenerator = new ColorHash({
+    hue: {
+        min: 0,
+        max: ERROR_HUE_CUTOFF
+    }
+});
+function computeConsistentColor(name, error) {
+    const [hue, saturation, lightness] = error ? redColorGenerator.hsl(name) : colorGenerator.hsl(name);
+    const saturationPercent = `${(saturation * 100).toFixed(0)}%`;
+    const lightnessPercent = `${(lightness * 100).toFixed(0)}%`;
+    return `hsla(${hue.toFixed(2)},${saturationPercent},${lightnessPercent},0.9)`;
+}
+// To check whether a color has already been generated for a given string.
+// TODO: Predefined color aliases will be defined here
+const colorLookup = {};
+/**
+ * Return a consistent color for (name, error) tuple
+ */ export function getConsistentColor(name, error) {
+    const key = `${name}_____${error}`;
+    let value = colorLookup[key];
+    if (!value) {
+        value = computeConsistentColor(name, error);
+        colorLookup[key] = value;
+    }
+    return value;
+}
+export function getConsistentCategoricalColor(name, error, categoricalPalette, errorPalette) {
+    const palette = error ? errorPalette : categoricalPalette;
+    if (palette.length === 0) {
+        console.warn('getConsistentCategoricalColor() called with empty color palette, fallback to #000');
+        return '#000';
+    }
+    let hash = 0;
+    for(let i = 0; i < name.length; i++){
+        hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return palette[Math.abs(hash) % palette.length] ?? '#000';
+}
+
+//# sourceMappingURL=palette.js.map

package/lib/TracingGanttChart/palette.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/TracingGanttChart/palette.ts"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport 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,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAOA,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

@@ -0,0 +1,45 @@
+import { otlpcommonv1, otlptracev1 } from '@perses-dev/core';
+/** holds the trace and computed properties required for the Gantt chart */
+export interface Trace {
+    trace: otlptracev1.TracesData;
+    /**
+     * if a trace is incomplete (e.g. a parent span has not been received yet),
+     * this branch of the span tree will be appended to the root
+     */
+    rootSpans: Span[];
+    startTimeUnixMs: number;
+    endTimeUnixMs: number;
+}
+export interface Span {
+    resource: Resource;
+    scope: otlpcommonv1.InstrumentationScope;
+    parentSpan?: Span;
+    /** child spans, sorted by startTime */
+    childSpans: Span[];
+    traceId: string;
+    spanId: string;
+    parentSpanId?: string;
+    name: string;
+    kind?: string;
+    startTimeUnixMs: number;
+    endTimeUnixMs: number;
+    attributes: otlpcommonv1.KeyValue[];
+    events: Event[];
+    status: otlptracev1.Status;
+}
+export interface Resource {
+    serviceName?: string;
+    attributes: otlpcommonv1.KeyValue[];
+}
+export interface Event {
+    timeUnixMs: number;
+    name: string;
+    attributes: otlpcommonv1.KeyValue[];
+}
+/**
+ * getTraceModel builds a tree of spans from an OTLP trace,
+ * and precomputes common fields, for example the start and end time of a trace.
+ * Time complexity: O(2n)
+ */
+export declare function getTraceModel(trace: otlptracev1.TracesData): Trace;
+//# sourceMappingURL=trace.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"trace.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/trace.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAkB,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG7E,2EAA2E;AAC3E,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC;IAE9B;;;OAGG;IACH,SAAS,EAAE,IAAI,EAAE,CAAC;IAClB,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,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;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,WAAW,CAAC,UAAU,GAAG,KAAK,CAmDlE"}

package/lib/TracingGanttChart/trace.js

@@ -0,0 +1,109 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+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.
+ * Time complexity: O(2n)
+ */ export function getTraceModel(trace) {
+    // first pass: build lookup table <spanId, Span> and compute min/max
+    const lookup = new Map();
+    const rootSpans = [];
+    let startTimeUnixMs = 0;
+    let endTimeUnixMs = 0;
+    for (const resourceSpan of trace.resourceSpans){
+        const resource = parseResource(resourceSpan.resource);
+        for (const scopeSpan of resourceSpan.scopeSpans){
+            const scope = parseScope(scopeSpan.scope);
+            for (const otelSpan of scopeSpan.spans){
+                const span = {
+                    resource,
+                    scope,
+                    childSpans: [],
+                    ...parseSpan(otelSpan)
+                };
+                lookup.set(otelSpan.spanId, span);
+                if (startTimeUnixMs === 0 || span.startTimeUnixMs < startTimeUnixMs) {
+                    startTimeUnixMs = span.startTimeUnixMs;
+                }
+                if (endTimeUnixMs === 0 || span.endTimeUnixMs > endTimeUnixMs) {
+                    endTimeUnixMs = span.endTimeUnixMs;
+                }
+            }
+        }
+    }
+    // second pass: build tree based on parentSpanId property
+    for (const [, span] of lookup){
+        if (!span.parentSpanId) {
+            rootSpans.push(span);
+            continue;
+        }
+        const parent = lookup.get(span.parentSpanId);
+        if (!parent) {
+            console.trace(`span ${span.spanId} has parent ${span.parentSpanId} which has not been received yet`);
+            rootSpans.push(span);
+            continue;
+        }
+        span.parentSpan = parent;
+        const insertChildSpanAt = sortedIndexBy(parent.childSpans, span, (s)=>s.startTimeUnixMs);
+        parent.childSpans.splice(insertChildSpanAt, 0, span);
+    }
+    return {
+        trace,
+        rootSpans,
+        startTimeUnixMs,
+        endTimeUnixMs
+    };
+}
+function parseResource(resource) {
+    let serviceName = 'unknown';
+    for (const attr of resource?.attributes ?? []){
+        if (attr.key === 'service.name' && 'stringValue' in attr.value) {
+            serviceName = attr.value.stringValue;
+            break;
+        }
+    }
+    return {
+        serviceName,
+        attributes: resource?.attributes ?? []
+    };
+}
+function parseScope(scope) {
+    return scope ?? {};
+}
+/**
+ * parseSpan parses the Span API type to the internal representation
+ * i.e. convert strings to numbers etc.
+ */ function parseSpan(span) {
+    return {
+        traceId: span.traceId,
+        spanId: span.spanId,
+        parentSpanId: span.parentSpanId,
+        name: span.name,
+        kind: span.kind,
+        startTimeUnixMs: parseInt(span.startTimeUnixNano) * 1e-6,
+        endTimeUnixMs: parseInt(span.endTimeUnixNano) * 1e-6,
+        attributes: span.attributes ?? [],
+        events: (span.events ?? []).map(parseEvent),
+        status: span.status ?? {}
+    };
+}
+function parseEvent(event) {
+    return {
+        timeUnixMs: parseInt(event.timeUnixNano) * 1e-6,
+        name: event.name,
+        attributes: event.attributes ?? []
+    };
+}
+
+//# sourceMappingURL=trace.js.map

package/lib/TracingGanttChart/trace.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/TracingGanttChart/trace.ts"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { otlpcommonv1, otlpresourcev1, otlptracev1 } from '@perses-dev/core';\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  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  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\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 lookup = 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        lookup.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 lookup) {\n    if (!span.parentSpanId) {\n      rootSpans.push(span);\n      continue;\n    }\n\n    const parent = lookup.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, startTimeUnixMs, endTimeUnixMs };\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    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"],"names":["sortedIndexBy","getTraceModel","trace","lookup","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","serviceName","attr","attributes","key","value","stringValue","traceId","name","kind","parseInt","startTimeUnixNano","endTimeUnixNano","events","map","parseEvent","status","event","timeUnixMs","timeUnixNano"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAASA,aAAa,QAAQ,SAAS;AA6CvC;;;;CAIC,GACD,OAAO,SAASC,cAAcC,KAA6B;IACzD,oEAAoE;IACpE,MAAMC,SAAS,IAAIC;IACnB,MAAMC,YAAoB,EAAE;IAC5B,IAAIC,kBAA0B;IAC9B,IAAIC,gBAAwB;IAC5B,KAAK,MAAMC,gBAAgBN,MAAMO,aAAa,CAAE;QAC9C,MAAMC,WAAWC,cAAcH,aAAaE,QAAQ;QAEpD,KAAK,MAAME,aAAaJ,aAAaK,UAAU,CAAE;YAC/C,MAAMC,QAAQC,WAAWH,UAAUE,KAAK;YAExC,KAAK,MAAME,YAAYJ,UAAUK,KAAK,CAAE;gBACtC,MAAMC,OAAa;oBACjBR;oBACAI;oBACAK,YAAY,EAAE;oBACd,GAAGC,UAAUJ,SAAS;gBACxB;gBACAb,OAAOkB,GAAG,CAACL,SAASM,MAAM,EAAEJ;gBAE5B,IAAIZ,oBAAoB,KAAKY,KAAKZ,eAAe,GAAGA,iBAAiB;oBACnEA,kBAAkBY,KAAKZ,eAAe;gBACxC;gBACA,IAAIC,kBAAkB,KAAKW,KAAKX,aAAa,GAAGA,eAAe;oBAC7DA,gBAAgBW,KAAKX,aAAa;gBACpC;YACF;QACF;IACF;IAEA,yDAAyD;IACzD,KAAK,MAAM,GAAGW,KAAK,IAAIf,OAAQ;QAC7B,IAAI,CAACe,KAAKK,YAAY,EAAE;YACtBlB,UAAUmB,IAAI,CAACN;YACf;QACF;QAEA,MAAMO,SAAStB,OAAOuB,GAAG,CAACR,KAAKK,YAAY;QAC3C,IAAI,CAACE,QAAQ;YACXE,QAAQzB,KAAK,CAAC,CAAC,KAAK,EAAEgB,KAAKI,MAAM,CAAC,YAAY,EAAEJ,KAAKK,YAAY,CAAC,gCAAgC,CAAC;YACnGlB,UAAUmB,IAAI,CAACN;YACf;QACF;QAEAA,KAAKU,UAAU,GAAGH;QAClB,MAAMI,oBAAoB7B,cAAcyB,OAAON,UAAU,EAAED,MAAM,CAACY,IAAMA,EAAExB,eAAe;QACzFmB,OAAON,UAAU,CAACY,MAAM,CAACF,mBAAmB,GAAGX;IACjD;IAEA,OAAO;QAAEhB;QAAOG;QAAWC;QAAiBC;IAAc;AAC5D;AAEA,SAASI,cAAcD,QAAkC;IACvD,IAAIsB,cAAc;IAClB,KAAK,MAAMC,QAAQvB,UAAUwB,cAAc,EAAE,CAAE;QAC7C,IAAID,KAAKE,GAAG,KAAK,kBAAkB,iBAAiBF,KAAKG,KAAK,EAAE;YAC9DJ,cAAcC,KAAKG,KAAK,CAACC,WAAW;YACpC;QACF;IACF;IAEA,OAAO;QACLL;QACAE,YAAYxB,UAAUwB,cAAc,EAAE;IACxC;AACF;AAEA,SAASnB,WAAWD,KAAyC;IAC3D,OAAOA,SAAS,CAAC;AACnB;AAEA;;;CAGC,GACD,SAASM,UAAUF,IAAsB;IACvC,OAAO;QACLoB,SAASpB,KAAKoB,OAAO;QACrBhB,QAAQJ,KAAKI,MAAM;QACnBC,cAAcL,KAAKK,YAAY;QAC/BgB,MAAMrB,KAAKqB,IAAI;QACfC,MAAMtB,KAAKsB,IAAI;QACflC,iBAAiBmC,SAASvB,KAAKwB,iBAAiB,IAAI;QACpDnC,eAAekC,SAASvB,KAAKyB,eAAe,IAAI;QAChDT,YAAYhB,KAAKgB,UAAU,IAAI,EAAE;QACjCU,QAAQ,AAAC1B,CAAAA,KAAK0B,MAAM,IAAI,EAAE,AAAD,EAAGC,GAAG,CAACC;QAChCC,QAAQ7B,KAAK6B,MAAM,IAAI,CAAC;IAC1B;AACF;AAEA,SAASD,WAAWE,KAAwB;IAC1C,OAAO;QACLC,YAAYR,SAASO,MAAME,YAAY,IAAI;QAC3CX,MAAMS,MAAMT,IAAI;QAChBL,YAAYc,MAAMd,UAAU,IAAI,EAAE;IACpC;AACF"}

package/lib/TracingGanttChart/utils.d.ts

@@ -0,0 +1,18 @@
+import { PersesChartsTheme } from '@perses-dev/components';
+import { Theme } from '@mui/material';
+import { Span } from './trace';
+/**
+ * Viewport contains the current zoom, i.e. which timeframe of the trace should be visible
+ */
+export interface Viewport {
+    startTimeUnixMs: number;
+    endTimeUnixMs: number;
+}
+/** minimum span width, i.e. increase width if the calculated width is too small to be visible */
+export declare const minSpanWidthPx = 2;
+export declare const rowHeight = "2rem";
+export declare const spanHasError: (span: Span) => boolean;
+export declare function getServiceColor(muiTheme: Theme, chartsTheme: PersesChartsTheme, paletteMode: 'auto' | 'categorical' | undefined, serviceName: string, error?: boolean): string;
+export declare function getSpanColor(muiTheme: Theme, chartsTheme: PersesChartsTheme, paletteMode: 'auto' | 'categorical' | undefined, span: Span): string;
+export declare function formatDuration(timeMs: number): string;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +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"}

package/lib/TracingGanttChart/utils.js

@@ -0,0 +1,48 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { otlptracev1 } from '@perses-dev/core';
+import { getConsistentCategoricalColor, getConsistentColor } from './palette';
+/** 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;
+export function getServiceColor(muiTheme, chartsTheme, paletteMode, serviceName, error = false) {
+    switch(paletteMode){
+        case 'categorical':
+            {
+                // ECharts type for color is not always an array but it is always an array in ChartsProvider
+                const categoricalPalette = chartsTheme.echartsTheme.color;
+                const errorPalette = [
+                    muiTheme.palette.error.light,
+                    muiTheme.palette.error.main,
+                    muiTheme.palette.error.dark
+                ];
+                return getConsistentCategoricalColor(serviceName, error, categoricalPalette, errorPalette);
+            }
+        default:
+            return getConsistentColor(serviceName, error);
+    }
+}
+export function getSpanColor(muiTheme, chartsTheme, paletteMode, span) {
+    return getServiceColor(muiTheme, chartsTheme, paletteMode, span.resource.serviceName ?? '', spanHasError(span));
+}
+export function formatDuration(timeMs) {
+    if (timeMs < 1) {
+        return `${Math.round(timeMs * 1000)}μs`;
+    }
+    if (timeMs < 1000) {
+        return `${+timeMs.toFixed(2)}ms`;
+    }
+    return `${+(timeMs / 1000).toFixed(2)}s`;
+}
+
+//# sourceMappingURL=utils.js.map

package/lib/TracingGanttChart/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/TracingGanttChart/utils.ts"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PersesChartsTheme } from '@perses-dev/components';\nimport { Theme } from '@mui/material';\nimport { otlptracev1 } from '@perses-dev/core';\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,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAIjC,SAASA,WAAW,QAAQ,mBAAmB;AAC/C,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"}

package/lib/TracingGanttChart.d.ts

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

package/lib/TracingGanttChart.d.ts.map

@@ -0,0 +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;AAE/F,eAAO,MAAM,iBAAiB,EAAE,WAAW,CAAC,wBAAwB,EAAE,2BAA2B,CAIhG,CAAC"}

package/lib/TracingGanttChart.js

@@ -0,0 +1,23 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { createInitialTracingGanttChartOptions } from './gantt-chart-model';
+import { TracingGanttChartPanel } from './TracingGanttChartPanel';
+export const TracingGanttChart = {
+    PanelComponent: TracingGanttChartPanel,
+    supportedQueryTypes: [
+        'TraceQuery'
+    ],
+    createInitialOptions: createInitialTracingGanttChartOptions
+};
+
+//# sourceMappingURL=TracingGanttChart.js.map

package/lib/TracingGanttChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TracingGanttChart.ts"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PanelPlugin } from '@perses-dev/plugin-system';\nimport { createInitialTracingGanttChartOptions, TracingGanttChartOptions } from './gantt-chart-model';\nimport { TracingGanttChartPanel, TracingGanttChartPanelProps } from './TracingGanttChartPanel';\n\nexport const TracingGanttChart: PanelPlugin<TracingGanttChartOptions, TracingGanttChartPanelProps> = {\n  PanelComponent: TracingGanttChartPanel,\n  supportedQueryTypes: ['TraceQuery'],\n  createInitialOptions: createInitialTracingGanttChartOptions,\n};\n"],"names":["createInitialTracingGanttChartOptions","TracingGanttChartPanel","TracingGanttChart","PanelComponent","supportedQueryTypes","createInitialOptions"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAASA,qCAAqC,QAAkC,sBAAsB;AACtG,SAASC,sBAAsB,QAAqC,2BAA2B;AAE/F,OAAO,MAAMC,oBAAwF;IACnGC,gBAAgBF;IAChBG,qBAAqB;QAAC;KAAa;IACnCC,sBAAsBL;AACxB,EAAE"}

package/lib/TracingGanttChartPanel.d.ts

@@ -0,0 +1,17 @@
+import { PanelProps } from '@perses-dev/plugin-system';
+import { ReactElement } from 'react';
+import { TraceData } from '@perses-dev/core';
+import { TracingGanttChartOptions } from './gantt-chart-model';
+import { AttributeLinks } from './TracingGanttChart/DetailPane/Attributes';
+export interface TracingGanttChartPanelProps extends PanelProps<TracingGanttChartOptions, TraceData> {
+    /**
+     * Allows custom links for each attribute in the detail pane.
+     * Example:
+     * {
+     *   'k8s.pod.name': (attrs) => `/my/console/namespace/${attrs['k8s.namespace.name']?.stringValue}/${attrs['k8s.pod.name']?.stringValue}/detail`
+     * }
+     */
+    attributeLinks?: AttributeLinks;
+}
+export declare function TracingGanttChartPanel(props: TracingGanttChartPanelProps): ReactElement;
+//# sourceMappingURL=TracingGanttChartPanel.d.ts.map

package/lib/TracingGanttChartPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TracingGanttChartPanel.d.ts","sourceRoot":"","sources":["../../src/TracingGanttChartPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAGvD,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAE/D,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAE3E,MAAM,WAAW,2BAA4B,SAAQ,UAAU,CAAC,wBAAwB,EAAE,SAAS,CAAC;IAClG;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,GAAG,YAAY,CAmBvF"}

package/lib/TracingGanttChartPanel.js

@@ -0,0 +1,45 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NoDataOverlay, TextOverlay, useChartsTheme } from '@perses-dev/components';
+import { Box } from '@mui/material';
+import { TracingGanttChart } from './TracingGanttChart/TracingGanttChart';
+export function TracingGanttChartPanel(props) {
+    const { spec, queryResults, attributeLinks } = props;
+    const chartsTheme = useChartsTheme();
+    const contentPadding = chartsTheme.container.padding.default;
+    if (queryResults.length > 1) {
+        return /*#__PURE__*/ _jsx(TextOverlay, {
+            message: "This panel does not support more than one query."
+        });
+    }
+    const trace = queryResults[0]?.data.trace;
+    if (!trace) {
+        return /*#__PURE__*/ _jsx(NoDataOverlay, {
+            resource: "trace"
+        });
+    }
+    return /*#__PURE__*/ _jsx(Box, {
+        sx: {
+            height: '100%',
+            padding: `${contentPadding}px`
+        },
+        children: /*#__PURE__*/ _jsx(TracingGanttChart, {
+            options: spec,
+            attributeLinks: attributeLinks,
+            trace: trace
+        })
+    });
+}
+
+//# sourceMappingURL=TracingGanttChartPanel.js.map

package/lib/TracingGanttChartPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TracingGanttChartPanel.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PanelProps } from '@perses-dev/plugin-system';\nimport { NoDataOverlay, TextOverlay, useChartsTheme } from '@perses-dev/components';\nimport { Box } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { TraceData } from '@perses-dev/core';\nimport { TracingGanttChartOptions } from './gantt-chart-model';\nimport { TracingGanttChart } from './TracingGanttChart/TracingGanttChart';\nimport { AttributeLinks } from './TracingGanttChart/DetailPane/Attributes';\n\nexport interface TracingGanttChartPanelProps extends PanelProps<TracingGanttChartOptions, TraceData> {\n  /**\n   * Allows custom links for each attribute in the detail pane.\n   * Example:\n   * {\n   *   'k8s.pod.name': (attrs) => `/my/console/namespace/${attrs['k8s.namespace.name']?.stringValue}/${attrs['k8s.pod.name']?.stringValue}/detail`\n   * }\n   */\n  attributeLinks?: AttributeLinks;\n}\n\nexport function TracingGanttChartPanel(props: TracingGanttChartPanelProps): ReactElement {\n  const { spec, queryResults, attributeLinks } = props;\n  const chartsTheme = useChartsTheme();\n  const contentPadding = chartsTheme.container.padding.default;\n\n  if (queryResults.length > 1) {\n    return <TextOverlay message=\"This panel does not support more than one query.\" />;\n  }\n\n  const trace = queryResults[0]?.data.trace;\n  if (!trace) {\n    return <NoDataOverlay resource=\"trace\" />;\n  }\n\n  return (\n    <Box sx={{ height: '100%', padding: `${contentPadding}px` }}>\n      <TracingGanttChart options={spec} attributeLinks={attributeLinks} trace={trace} />\n    </Box>\n  );\n}\n"],"names":["NoDataOverlay","TextOverlay","useChartsTheme","Box","TracingGanttChart","TracingGanttChartPanel","props","spec","queryResults","attributeLinks","chartsTheme","contentPadding","container","padding","default","length","message","trace","data","resource","sx","height","options"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,aAAa,EAAEC,WAAW,EAAEC,cAAc,QAAQ,yBAAyB;AACpF,SAASC,GAAG,QAAQ,gBAAgB;AAIpC,SAASC,iBAAiB,QAAQ,wCAAwC;AAc1E,OAAO,SAASC,uBAAuBC,KAAkC;IACvE,MAAM,EAAEC,IAAI,EAAEC,YAAY,EAAEC,cAAc,EAAE,GAAGH;IAC/C,MAAMI,cAAcR;IACpB,MAAMS,iBAAiBD,YAAYE,SAAS,CAACC,OAAO,CAACC,OAAO;IAE5D,IAAIN,aAAaO,MAAM,GAAG,GAAG;QAC3B,qBAAO,KAACd;YAAYe,SAAQ;;IAC9B;IAEA,MAAMC,QAAQT,YAAY,CAAC,EAAE,EAAEU,KAAKD;IACpC,IAAI,CAACA,OAAO;QACV,qBAAO,KAACjB;YAAcmB,UAAS;;IACjC;IAEA,qBACE,KAAChB;QAAIiB,IAAI;YAAEC,QAAQ;YAAQR,SAAS,GAAGF,eAAe,EAAE,CAAC;QAAC;kBACxD,cAAA,KAACP;YAAkBkB,SAASf;YAAME,gBAAgBA;YAAgBQ,OAAOA;;;AAG/E"}

package/lib/bootstrap.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=bootstrap.d.ts.map

package/lib/bootstrap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.d.ts","sourceRoot":"","sources":["../../src/bootstrap.tsx"],"names":[],"mappings":""}

package/lib/bootstrap.js

@@ -0,0 +1,19 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(/*#__PURE__*/ _jsx(React.StrictMode, {}));
+
+//# sourceMappingURL=bootstrap.js.map

package/lib/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/bootstrap.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(document.getElementById('root')!);\nroot.render(<React.StrictMode></React.StrictMode>);\n"],"names":["React","ReactDOM","root","createRoot","document","getElementById","render","StrictMode"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,OAAOC,cAAc,mBAAmB;AAExC,MAAMC,OAAOD,SAASE,UAAU,CAACC,SAASC,cAAc,CAAC;AACzDH,KAAKI,MAAM,eAAC,KAACN,MAAMO,UAAU"}