@perses-dev/tracing-gantt-chart-plugin 0.7.0 → 0.8.0

package/lib/TracingGanttChart/DetailPane/Attributes.js

@@ -10,10 +10,48 @@
 // 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, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { Link, List, ListItem, ListItemText } from '@mui/material';
+import { Divider, Link, List, ListItem, ListItemText } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
+import { formatDuration } from '../utils';
+export function TraceAttributes(props) {
+    const { trace, span, attributeLinks } = props;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs(List, {
+                children: [
+                    /*#__PURE__*/ _jsx(AttributeItem, {
+                        name: "span ID",
+                        value: span.spanId
+                    }),
+                    /*#__PURE__*/ _jsx(AttributeItem, {
+                        name: "start",
+                        value: formatDuration(span.startTimeUnixMs - trace.startTimeUnixMs)
+                    }),
+                    /*#__PURE__*/ _jsx(AttributeItem, {
+                        name: "duration",
+                        value: formatDuration(span.endTimeUnixMs - span.startTimeUnixMs)
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Divider, {}),
+            span.attributes.length > 0 && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(AttributeList, {
+                        attributeLinks: attributeLinks,
+                        attributes: span.attributes
+                    }),
+                    /*#__PURE__*/ _jsx(Divider, {})
+                ]
+            }),
+            /*#__PURE__*/ _jsx(AttributeList, {
+                attributeLinks: attributeLinks,
+                attributes: span.resource.attributes
+            })
+        ]
+    });
+}
 export function AttributeList(props) {
     const { attributeLinks, attributes } = props;
     const attributesMap = useMemo(()=>Object.fromEntries(attributes.map((attr)=>[
@@ -22,34 +60,35 @@ export function AttributeList(props) {
             ])), [
         attributes
     ]);
-    return /*#__PURE__*/ _jsx(_Fragment, {
-        children: /*#__PURE__*/ _jsx(List, {
-            children: attributes.sort((a, b)=>a.key.localeCompare(b.key)).map((attribute, i)=>/*#__PURE__*/ _jsx(AttributeItem, {
-                    attribute: attribute,
-                    linkTo: attributeLinks?.[attribute.key]?.(attributesMap)
-                }, i))
-        })
+    return /*#__PURE__*/ _jsx(List, {
+        children: attributes.sort((a, b)=>a.key.localeCompare(b.key)).map((attribute, i)=>/*#__PURE__*/ _jsx(AttributeItem, {
+                name: attribute.key,
+                value: renderAttributeValue(attribute.value),
+                link: attributeLinks?.[attribute.key]?.(attributesMap)
+            }, i))
     });
 }
 function AttributeItem(props) {
-    const { attribute, linkTo } = props;
-    const value = linkTo ? /*#__PURE__*/ _jsx(Link, {
+    const { name, value, link } = props;
+    const valueComponent = link ? /*#__PURE__*/ _jsx(Link, {
         component: RouterLink,
-        to: linkTo,
-        children: renderAttributeValue(attribute.value)
-    }) : renderAttributeValue(attribute.value);
+        to: link,
+        children: value
+    }) : value;
     return /*#__PURE__*/ _jsx(ListItem, {
         disablePadding: true,
         children: /*#__PURE__*/ _jsx(ListItemText, {
-            primary: attribute.key,
-            secondary: value,
-            primaryTypographyProps: {
-                variant: 'h5'
-            },
-            secondaryTypographyProps: {
-                variant: 'body1',
-                sx: {
-                    wordBreak: 'break-word'
+            primary: name,
+            secondary: valueComponent,
+            slotProps: {
+                primary: {
+                    variant: 'h5'
+                },
+                secondary: {
+                    variant: 'body1',
+                    sx: {
+                        wordBreak: 'break-word'
+                    }
                 }
             }
         })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/DetailPane/Attributes.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 } from 'react';\nimport { Link, List, ListItem, ListItemText } from '@mui/material';\nimport { Link as RouterLink } from 'react-router-dom';\nimport { otlpcommonv1 } from '@perses-dev/core';\n\nexport type AttributeLinks = Record<string, (attributes: Record<string, otlpcommonv1.AnyValue>) => string>;\n\nexport interface AttributeListProps {\n  attributeLinks?: AttributeLinks;\n  attributes: otlpcommonv1.KeyValue[];\n}\n\nexport function AttributeList(props: AttributeListProps): ReactElement {\n  const { attributeLinks, attributes } = props;\n  const attributesMap = useMemo(\n    () => Object.fromEntries(attributes.map((attr) => [attr.key, attr.value])),\n    [attributes]\n  );\n\n  return (\n    <>\n      <List>\n        {attributes\n          .sort((a, b) => a.key.localeCompare(b.key))\n          .map((attribute, i) => (\n            <AttributeItem key={i} attribute={attribute} linkTo={attributeLinks?.[attribute.key]?.(attributesMap)} />\n          ))}\n      </List>\n    </>\n  );\n}\n\ninterface AttributeItemProps {\n  attribute: otlpcommonv1.KeyValue;\n  linkTo?: string;\n}\n\nfunction AttributeItem(props: AttributeItemProps): ReactElement {\n  const { attribute, linkTo } = props;\n\n  const value = linkTo ? (\n    <Link component={RouterLink} to={linkTo}>\n      {renderAttributeValue(attribute.value)}\n    </Link>\n  ) : (\n    renderAttributeValue(attribute.value)\n  );\n\n  return (\n    <ListItem disablePadding>\n      <ListItemText\n        primary={attribute.key}\n        secondary={value}\n        primaryTypographyProps={{ variant: 'h5' }}\n        secondaryTypographyProps={{ variant: 'body1', sx: { wordBreak: 'break-word' } }}\n      />\n    </ListItem>\n  );\n}\n\nfunction renderAttributeValue(value: otlpcommonv1.AnyValue): string {\n  if ('stringValue' in value) return value.stringValue.length > 0 ? value.stringValue : '<empty string>';\n  if ('intValue' in value) return value.intValue;\n  if ('boolValue' in value) return value.boolValue.toString();\n  if ('arrayValue' in value) return value.arrayValue.values.map(renderAttributeValue).join(', ');\n  return 'unknown';\n}\n"],"names":["useMemo","Link","List","ListItem","ListItemText","RouterLink","AttributeList","props","attributeLinks","attributes","attributesMap","Object","fromEntries","map","attr","key","value","sort","a","b","localeCompare","attribute","i","AttributeItem","linkTo","component","to","renderAttributeValue","disablePadding","primary","secondary","primaryTypographyProps","variant","secondaryTypographyProps","sx","wordBreak","stringValue","length","intValue","boolValue","toString","arrayValue","values","join"],"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,QAAQ,QAAQ;AAC9C,SAASC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,YAAY,QAAQ,gBAAgB;AACnE,SAASH,QAAQI,UAAU,QAAQ,mBAAmB;AAUtD,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EAAEC,cAAc,EAAEC,UAAU,EAAE,GAAGF;IACvC,MAAMG,gBAAgBV,QACpB,IAAMW,OAAOC,WAAW,CAACH,WAAWI,GAAG,CAAC,CAACC,OAAS;gBAACA,KAAKC,GAAG;gBAAED,KAAKE,KAAK;aAAC,IACxE;QAACP;KAAW;IAGd,qBACE;kBACE,cAAA,KAACP;sBACEO,WACEQ,IAAI,CAAC,CAACC,GAAGC,IAAMD,EAAEH,GAAG,CAACK,aAAa,CAACD,EAAEJ,GAAG,GACxCF,GAAG,CAAC,CAACQ,WAAWC,kBACf,KAACC;oBAAsBF,WAAWA;oBAAWG,QAAQhB,gBAAgB,CAACa,UAAUN,GAAG,CAAC,GAAGL;mBAAnEY;;;AAKhC;AAOA,SAASC,cAAchB,KAAyB;IAC9C,MAAM,EAAEc,SAAS,EAAEG,MAAM,EAAE,GAAGjB;IAE9B,MAAMS,QAAQQ,uBACZ,KAACvB;QAAKwB,WAAWpB;QAAYqB,IAAIF;kBAC9BG,qBAAqBN,UAAUL,KAAK;SAGvCW,qBAAqBN,UAAUL,KAAK;IAGtC,qBACE,KAACb;QAASyB,cAAc;kBACtB,cAAA,KAACxB;YACCyB,SAASR,UAAUN,GAAG;YACtBe,WAAWd;YACXe,wBAAwB;gBAAEC,SAAS;YAAK;YACxCC,0BAA0B;gBAAED,SAAS;gBAASE,IAAI;oBAAEC,WAAW;gBAAa;YAAE;;;AAItF;AAEA,SAASR,qBAAqBX,KAA4B;IACxD,IAAI,iBAAiBA,OAAO,OAAOA,MAAMoB,WAAW,CAACC,MAAM,GAAG,IAAIrB,MAAMoB,WAAW,GAAG;IACtF,IAAI,cAAcpB,OAAO,OAAOA,MAAMsB,QAAQ;IAC9C,IAAI,eAAetB,OAAO,OAAOA,MAAMuB,SAAS,CAACC,QAAQ;IACzD,IAAI,gBAAgBxB,OAAO,OAAOA,MAAMyB,UAAU,CAACC,MAAM,CAAC7B,GAAG,CAACc,sBAAsBgB,IAAI,CAAC;IACzF,OAAO;AACT"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/DetailPane/Attributes.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 } from 'react';\nimport { Divider, Link, List, ListItem, ListItemText } from '@mui/material';\nimport { Link as RouterLink } from 'react-router-dom';\nimport { otlpcommonv1 } from '@perses-dev/core';\nimport { Span, Trace } from '../trace';\nimport { formatDuration } from '../utils';\n\nexport type AttributeLinks = Record<string, (attributes: Record<string, otlpcommonv1.AnyValue>) => string>;\n\nexport interface TraceAttributesProps {\n  trace: Trace;\n  span: Span;\n  attributeLinks?: AttributeLinks;\n}\n\nexport function TraceAttributes(props: TraceAttributesProps) {\n  const { trace, span, attributeLinks } = props;\n\n  return (\n    <>\n      <List>\n        <AttributeItem name=\"span ID\" value={span.spanId} />\n        <AttributeItem name=\"start\" value={formatDuration(span.startTimeUnixMs - trace.startTimeUnixMs)} />\n        <AttributeItem name=\"duration\" value={formatDuration(span.endTimeUnixMs - span.startTimeUnixMs)} />\n      </List>\n      <Divider />\n      {span.attributes.length > 0 && (\n        <>\n          <AttributeList attributeLinks={attributeLinks} attributes={span.attributes} />\n          <Divider />\n        </>\n      )}\n      <AttributeList attributeLinks={attributeLinks} attributes={span.resource.attributes} />\n    </>\n  );\n}\n\nexport interface AttributeListProps {\n  attributeLinks?: AttributeLinks;\n  attributes: otlpcommonv1.KeyValue[];\n}\n\nexport function AttributeList(props: AttributeListProps): ReactElement {\n  const { attributeLinks, attributes } = props;\n  const attributesMap = useMemo(\n    () => Object.fromEntries(attributes.map((attr) => [attr.key, attr.value])),\n    [attributes]\n  );\n\n  return (\n    <List>\n      {attributes\n        .sort((a, b) => a.key.localeCompare(b.key))\n        .map((attribute, i) => (\n          <AttributeItem\n            key={i}\n            name={attribute.key}\n            value={renderAttributeValue(attribute.value)}\n            link={attributeLinks?.[attribute.key]?.(attributesMap)}\n          />\n        ))}\n    </List>\n  );\n}\n\ninterface AttributeItemProps {\n  name: string;\n  value: string;\n  link?: string;\n}\n\nfunction AttributeItem(props: AttributeItemProps): ReactElement {\n  const { name, value, link } = props;\n\n  const valueComponent = link ? (\n    <Link component={RouterLink} to={link}>\n      {value}\n    </Link>\n  ) : (\n    value\n  );\n\n  return (\n    <ListItem disablePadding>\n      <ListItemText\n        primary={name}\n        secondary={valueComponent}\n        slotProps={{\n          primary: { variant: 'h5' },\n          secondary: { variant: 'body1', sx: { wordBreak: 'break-word' } },\n        }}\n      />\n    </ListItem>\n  );\n}\n\nfunction renderAttributeValue(value: otlpcommonv1.AnyValue): string {\n  if ('stringValue' in value) return value.stringValue.length > 0 ? value.stringValue : '<empty string>';\n  if ('intValue' in value) return value.intValue;\n  if ('boolValue' in value) return value.boolValue.toString();\n  if ('arrayValue' in value) return value.arrayValue.values.map(renderAttributeValue).join(', ');\n  return 'unknown';\n}\n"],"names":["useMemo","Divider","Link","List","ListItem","ListItemText","RouterLink","formatDuration","TraceAttributes","props","trace","span","attributeLinks","AttributeItem","name","value","spanId","startTimeUnixMs","endTimeUnixMs","attributes","length","AttributeList","resource","attributesMap","Object","fromEntries","map","attr","key","sort","a","b","localeCompare","attribute","i","renderAttributeValue","link","valueComponent","component","to","disablePadding","primary","secondary","slotProps","variant","sx","wordBreak","stringValue","intValue","boolValue","toString","arrayValue","values","join"],"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,QAAQ,QAAQ;AAC9C,SAASC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,YAAY,QAAQ,gBAAgB;AAC5E,SAASH,QAAQI,UAAU,QAAQ,mBAAmB;AAGtD,SAASC,cAAc,QAAQ,WAAW;AAU1C,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAEC,cAAc,EAAE,GAAGH;IAExC,qBACE;;0BACE,MAACN;;kCACC,KAACU;wBAAcC,MAAK;wBAAUC,OAAOJ,KAAKK,MAAM;;kCAChD,KAACH;wBAAcC,MAAK;wBAAQC,OAAOR,eAAeI,KAAKM,eAAe,GAAGP,MAAMO,eAAe;;kCAC9F,KAACJ;wBAAcC,MAAK;wBAAWC,OAAOR,eAAeI,KAAKO,aAAa,GAAGP,KAAKM,eAAe;;;;0BAEhG,KAAChB;YACAU,KAAKQ,UAAU,CAACC,MAAM,GAAG,mBACxB;;kCACE,KAACC;wBAAcT,gBAAgBA;wBAAgBO,YAAYR,KAAKQ,UAAU;;kCAC1E,KAAClB;;;0BAGL,KAACoB;gBAAcT,gBAAgBA;gBAAgBO,YAAYR,KAAKW,QAAQ,CAACH,UAAU;;;;AAGzF;AAOA,OAAO,SAASE,cAAcZ,KAAyB;IACrD,MAAM,EAAEG,cAAc,EAAEO,UAAU,EAAE,GAAGV;IACvC,MAAMc,gBAAgBvB,QACpB,IAAMwB,OAAOC,WAAW,CAACN,WAAWO,GAAG,CAAC,CAACC,OAAS;gBAACA,KAAKC,GAAG;gBAAED,KAAKZ,KAAK;aAAC,IACxE;QAACI;KAAW;IAGd,qBACE,KAAChB;kBACEgB,WACEU,IAAI,CAAC,CAACC,GAAGC,IAAMD,EAAEF,GAAG,CAACI,aAAa,CAACD,EAAEH,GAAG,GACxCF,GAAG,CAAC,CAACO,WAAWC,kBACf,KAACrB;gBAECC,MAAMmB,UAAUL,GAAG;gBACnBb,OAAOoB,qBAAqBF,UAAUlB,KAAK;gBAC3CqB,MAAMxB,gBAAgB,CAACqB,UAAUL,GAAG,CAAC,GAAGL;eAHnCW;;AAQjB;AAQA,SAASrB,cAAcJ,KAAyB;IAC9C,MAAM,EAAEK,IAAI,EAAEC,KAAK,EAAEqB,IAAI,EAAE,GAAG3B;IAE9B,MAAM4B,iBAAiBD,qBACrB,KAAClC;QAAKoC,WAAWhC;QAAYiC,IAAIH;kBAC9BrB;SAGHA;IAGF,qBACE,KAACX;QAASoC,cAAc;kBACtB,cAAA,KAACnC;YACCoC,SAAS3B;YACT4B,WAAWL;YACXM,WAAW;gBACTF,SAAS;oBAAEG,SAAS;gBAAK;gBACzBF,WAAW;oBAAEE,SAAS;oBAASC,IAAI;wBAAEC,WAAW;oBAAa;gBAAE;YACjE;;;AAIR;AAEA,SAASX,qBAAqBpB,KAA4B;IACxD,IAAI,iBAAiBA,OAAO,OAAOA,MAAMgC,WAAW,CAAC3B,MAAM,GAAG,IAAIL,MAAMgC,WAAW,GAAG;IACtF,IAAI,cAAchC,OAAO,OAAOA,MAAMiC,QAAQ;IAC9C,IAAI,eAAejC,OAAO,OAAOA,MAAMkC,SAAS,CAACC,QAAQ;IACzD,IAAI,gBAAgBnC,OAAO,OAAOA,MAAMoC,UAAU,CAACC,MAAM,CAAC1B,GAAG,CAACS,sBAAsBkB,IAAI,CAAC;IACzF,OAAO;AACT"}

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

@@ -1 +1 @@
-{"version":3,"file":"DetailPane.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/DetailPane/DetailPane.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,cAAc,EAAiB,MAAM,cAAc,CAAC;AAG7D,MAAM,WAAW,eAAe;IAC9B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,IAAI,CAAC;IACX,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAmC/D"}
+{"version":3,"file":"DetailPane.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/DetailPane/DetailPane.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,cAAc,EAAmB,MAAM,cAAc,CAAC;AAG/D,MAAM,WAAW,eAAe;IAC9B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,IAAI,CAAC;IACX,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CA6B/D"}

package/lib/TracingGanttChart/DetailPane/DetailPane.js

@@ -10,11 +10,11 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Divider, IconButton, Tab, Tabs, Typography } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, IconButton, Tab, Tabs, Typography } from '@mui/material';
 import { useState } from 'react';
 import CloseIcon from 'mdi-material-ui/Close';
-import { AttributeList } from './Attributes';
+import { TraceAttributes } from './Attributes';
 import { SpanEventList } from './SpanEvents';
 /**
  * DetailPane renders a sidebar showing the span attributes etc.
@@ -71,18 +71,10 @@ import { SpanEventList } from './SpanEvents';
                     ]
                 })
             }),
-            tab === 'attributes' && /*#__PURE__*/ _jsxs(_Fragment, {
-                children: [
-                    span.attributes.length > 0 && /*#__PURE__*/ _jsx(AttributeList, {
-                        attributeLinks: attributeLinks,
-                        attributes: span.attributes
-                    }),
-                    span.attributes.length > 0 && /*#__PURE__*/ _jsx(Divider, {}),
-                    /*#__PURE__*/ _jsx(AttributeList, {
-                        attributeLinks: attributeLinks,
-                        attributes: span.resource.attributes
-                    })
-                ]
+            tab === 'attributes' && /*#__PURE__*/ _jsx(TraceAttributes, {
+                trace: trace,
+                span: span,
+                attributeLinks: attributeLinks
             }),
             tab === 'events' && /*#__PURE__*/ _jsx(SpanEventList, {
                 trace: trace,

package/lib/TracingGanttChart/DetailPane/DetailPane.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/DetailPane/DetailPane.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Divider, IconButton, Tab, Tabs, Typography } from '@mui/material';\nimport { ReactElement, useState } from 'react';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { Span, Trace } from '../trace';\nimport { AttributeLinks, AttributeList } from './Attributes';\nimport { SpanEventList } from './SpanEvents';\n\nexport interface DetailPaneProps {\n  attributeLinks?: AttributeLinks;\n  trace: Trace;\n  span: Span;\n  onCloseBtnClick: () => void;\n}\n\n/**\n * DetailPane renders a sidebar showing the span attributes etc.\n */\nexport function DetailPane(props: DetailPaneProps): ReactElement {\n  const { attributeLinks, trace, span, onCloseBtnClick } = props;\n  const [tab, setTab] = useState<'attributes' | 'events'>('attributes');\n\n  // if the events tab is selected, and then a span without events is clicked,\n  // we need to switch the current selected tab back to the attributes tab.\n  if (tab === 'events' && span.events.length === 0) {\n    setTab('attributes');\n  }\n\n  return (\n    <Box>\n      <IconButton sx={{ float: 'right' }} onClick={onCloseBtnClick}>\n        <CloseIcon />\n      </IconButton>\n      <Typography sx={{ wordBreak: 'break-word' }}>{span.resource.serviceName}</Typography>\n      <Typography variant=\"h2\" sx={{ wordBreak: 'break-word' }}>\n        {span.name}\n      </Typography>\n      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>\n        <Tabs value={tab} onChange={(_, tab) => setTab(tab)}>\n          <Tab sx={{ p: 0 }} value=\"attributes\" label=\"Attributes\" />\n          {span.events.length > 0 && <Tab value=\"events\" label=\"Events\" />}\n        </Tabs>\n      </Box>\n      {tab === 'attributes' && (\n        <>\n          {span.attributes.length > 0 && <AttributeList attributeLinks={attributeLinks} attributes={span.attributes} />}\n          {span.attributes.length > 0 && <Divider />}\n          <AttributeList attributeLinks={attributeLinks} attributes={span.resource.attributes} />\n        </>\n      )}\n      {tab === 'events' && <SpanEventList trace={trace} span={span} />}\n    </Box>\n  );\n}\n"],"names":["Box","Divider","IconButton","Tab","Tabs","Typography","useState","CloseIcon","AttributeList","SpanEventList","DetailPane","props","attributeLinks","trace","span","onCloseBtnClick","tab","setTab","events","length","sx","float","onClick","wordBreak","resource","serviceName","variant","name","borderBottom","borderColor","value","onChange","_","p","label","attributes"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,EAAEC,OAAO,EAAEC,UAAU,EAAEC,GAAG,EAAEC,IAAI,EAAEC,UAAU,QAAQ,gBAAgB;AAChF,SAAuBC,QAAQ,QAAQ,QAAQ;AAC/C,OAAOC,eAAe,wBAAwB;AAE9C,SAAyBC,aAAa,QAAQ,eAAe;AAC7D,SAASC,aAAa,QAAQ,eAAe;AAS7C;;CAEC,GACD,OAAO,SAASC,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,cAAc,EAAEC,KAAK,EAAEC,IAAI,EAAEC,eAAe,EAAE,GAAGJ;IACzD,MAAM,CAACK,KAAKC,OAAO,GAAGX,SAAkC;IAExD,4EAA4E;IAC5E,yEAAyE;IACzE,IAAIU,QAAQ,YAAYF,KAAKI,MAAM,CAACC,MAAM,KAAK,GAAG;QAChDF,OAAO;IACT;IAEA,qBACE,MAACjB;;0BACC,KAACE;gBAAWkB,IAAI;oBAAEC,OAAO;gBAAQ;gBAAGC,SAASP;0BAC3C,cAAA,KAACR;;0BAEH,KAACF;gBAAWe,IAAI;oBAAEG,WAAW;gBAAa;0BAAIT,KAAKU,QAAQ,CAACC,WAAW;;0BACvE,KAACpB;gBAAWqB,SAAQ;gBAAKN,IAAI;oBAAEG,WAAW;gBAAa;0BACpDT,KAAKa,IAAI;;0BAEZ,KAAC3B;gBAAIoB,IAAI;oBAAEQ,cAAc;oBAAGC,aAAa;gBAAU;0BACjD,cAAA,MAACzB;oBAAK0B,OAAOd;oBAAKe,UAAU,CAACC,GAAGhB,MAAQC,OAAOD;;sCAC7C,KAACb;4BAAIiB,IAAI;gCAAEa,GAAG;4BAAE;4BAAGH,OAAM;4BAAaI,OAAM;;wBAC3CpB,KAAKI,MAAM,CAACC,MAAM,GAAG,mBAAK,KAAChB;4BAAI2B,OAAM;4BAASI,OAAM;;;;;YAGxDlB,QAAQ,8BACP;;oBACGF,KAAKqB,UAAU,CAAChB,MAAM,GAAG,mBAAK,KAACX;wBAAcI,gBAAgBA;wBAAgBuB,YAAYrB,KAAKqB,UAAU;;oBACxGrB,KAAKqB,UAAU,CAAChB,MAAM,GAAG,mBAAK,KAAClB;kCAChC,KAACO;wBAAcI,gBAAgBA;wBAAgBuB,YAAYrB,KAAKU,QAAQ,CAACW,UAAU;;;;YAGtFnB,QAAQ,0BAAY,KAACP;gBAAcI,OAAOA;gBAAOC,MAAMA;;;;AAG9D"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/DetailPane/DetailPane.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, IconButton, Tab, Tabs, Typography } from '@mui/material';\nimport { ReactElement, useState } from 'react';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { Span, Trace } from '../trace';\nimport { AttributeLinks, TraceAttributes } from './Attributes';\nimport { SpanEventList } from './SpanEvents';\n\nexport interface DetailPaneProps {\n  attributeLinks?: AttributeLinks;\n  trace: Trace;\n  span: Span;\n  onCloseBtnClick: () => void;\n}\n\n/**\n * DetailPane renders a sidebar showing the span attributes etc.\n */\nexport function DetailPane(props: DetailPaneProps): ReactElement {\n  const { attributeLinks, trace, span, onCloseBtnClick } = props;\n  const [tab, setTab] = useState<'attributes' | 'events'>('attributes');\n\n  // if the events tab is selected, and then a span without events is clicked,\n  // we need to switch the current selected tab back to the attributes tab.\n  if (tab === 'events' && span.events.length === 0) {\n    setTab('attributes');\n  }\n\n  return (\n    <Box>\n      <IconButton sx={{ float: 'right' }} onClick={onCloseBtnClick}>\n        <CloseIcon />\n      </IconButton>\n      <Typography sx={{ wordBreak: 'break-word' }}>{span.resource.serviceName}</Typography>\n      <Typography variant=\"h2\" sx={{ wordBreak: 'break-word' }}>\n        {span.name}\n      </Typography>\n      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>\n        <Tabs value={tab} onChange={(_, tab) => setTab(tab)}>\n          <Tab sx={{ p: 0 }} value=\"attributes\" label=\"Attributes\" />\n          {span.events.length > 0 && <Tab value=\"events\" label=\"Events\" />}\n        </Tabs>\n      </Box>\n      {tab === 'attributes' && <TraceAttributes trace={trace} span={span} attributeLinks={attributeLinks} />}\n      {tab === 'events' && <SpanEventList trace={trace} span={span} />}\n    </Box>\n  );\n}\n"],"names":["Box","IconButton","Tab","Tabs","Typography","useState","CloseIcon","TraceAttributes","SpanEventList","DetailPane","props","attributeLinks","trace","span","onCloseBtnClick","tab","setTab","events","length","sx","float","onClick","wordBreak","resource","serviceName","variant","name","borderBottom","borderColor","value","onChange","_","p","label"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,EAAEC,UAAU,EAAEC,GAAG,EAAEC,IAAI,EAAEC,UAAU,QAAQ,gBAAgB;AACvE,SAAuBC,QAAQ,QAAQ,QAAQ;AAC/C,OAAOC,eAAe,wBAAwB;AAE9C,SAAyBC,eAAe,QAAQ,eAAe;AAC/D,SAASC,aAAa,QAAQ,eAAe;AAS7C;;CAEC,GACD,OAAO,SAASC,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,cAAc,EAAEC,KAAK,EAAEC,IAAI,EAAEC,eAAe,EAAE,GAAGJ;IACzD,MAAM,CAACK,KAAKC,OAAO,GAAGX,SAAkC;IAExD,4EAA4E;IAC5E,yEAAyE;IACzE,IAAIU,QAAQ,YAAYF,KAAKI,MAAM,CAACC,MAAM,KAAK,GAAG;QAChDF,OAAO;IACT;IAEA,qBACE,MAAChB;;0BACC,KAACC;gBAAWkB,IAAI;oBAAEC,OAAO;gBAAQ;gBAAGC,SAASP;0BAC3C,cAAA,KAACR;;0BAEH,KAACF;gBAAWe,IAAI;oBAAEG,WAAW;gBAAa;0BAAIT,KAAKU,QAAQ,CAACC,WAAW;;0BACvE,KAACpB;gBAAWqB,SAAQ;gBAAKN,IAAI;oBAAEG,WAAW;gBAAa;0BACpDT,KAAKa,IAAI;;0BAEZ,KAAC1B;gBAAImB,IAAI;oBAAEQ,cAAc;oBAAGC,aAAa;gBAAU;0BACjD,cAAA,MAACzB;oBAAK0B,OAAOd;oBAAKe,UAAU,CAACC,GAAGhB,MAAQC,OAAOD;;sCAC7C,KAACb;4BAAIiB,IAAI;gCAAEa,GAAG;4BAAE;4BAAGH,OAAM;4BAAaI,OAAM;;wBAC3CpB,KAAKI,MAAM,CAACC,MAAM,GAAG,mBAAK,KAAChB;4BAAI2B,OAAM;4BAASI,OAAM;;;;;YAGxDlB,QAAQ,8BAAgB,KAACR;gBAAgBK,OAAOA;gBAAOC,MAAMA;gBAAMF,gBAAgBA;;YACnFI,QAAQ,0BAAY,KAACP;gBAAcI,OAAOA;gBAAOC,MAAMA;;;;AAG9D"}

package/lib/TracingGanttChart/TraceDetails.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { Trace } from './trace';
+export interface TraceDetailsProps {
+    trace: Trace;
+}
+export declare function TraceDetails(props: TraceDetailsProps): ReactElement;
+//# sourceMappingURL=TraceDetails.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TraceDetails.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/TraceDetails.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAahC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,KAAK,CAAC;CACd;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CA2BnE"}

package/lib/TracingGanttChart/TraceDetails.js

@@ -0,0 +1,90 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// 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 } from "react/jsx-runtime";
+import { Stack, Typography } from '@mui/material';
+import { useTimeZone } from '@perses-dev/components';
+import { formatDuration } from './utils';
+const DATE_FORMAT_OPTIONS = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    fractionalSecondDigits: 3,
+    timeZoneName: 'short'
+};
+export function TraceDetails(props) {
+    const { trace } = props;
+    const { dateFormatOptionsWithUserTimeZone } = useTimeZone();
+    const dateFormatOptions = dateFormatOptionsWithUserTimeZone(DATE_FORMAT_OPTIONS);
+    const dateFormatter = new Intl.DateTimeFormat(undefined, dateFormatOptions);
+    const rootSpan = trace.rootSpans[0];
+    if (!rootSpan) {
+        return /*#__PURE__*/ _jsx(Typography, {
+            children: "Trace contains no spans."
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        sx: {
+            justifyContent: 'space-between'
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Typography, {
+                variant: "h3",
+                children: [
+                    rootSpan.resource.serviceName,
+                    ": ",
+                    rootSpan.name,
+                    " (",
+                    formatDuration(trace.endTimeUnixMs - trace.startTimeUnixMs),
+                    ")"
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Typography, {
+                variant: "h4",
+                children: [
+                    /*#__PURE__*/ _jsxs(Typography, {
+                        component: "span",
+                        sx: {
+                            px: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("strong", {
+                                children: "Start:"
+                            }),
+                            " ",
+                            dateFormatter.format(trace.startTimeUnixMs)
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(Typography, {
+                        component: "span",
+                        sx: {
+                            px: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("strong", {
+                                children: "Trace ID:"
+                            }),
+                            " ",
+                            rootSpan.traceId
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=TraceDetails.js.map

package/lib/TracingGanttChart/TraceDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/TracingGanttChart/TraceDetails.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Stack, Typography } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { useTimeZone } from '@perses-dev/components';\nimport { formatDuration } from './utils';\nimport { Trace } from './trace';\n\nconst DATE_FORMAT_OPTIONS: Intl.DateTimeFormatOptions = {\n  year: 'numeric',\n  month: 'long',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  fractionalSecondDigits: 3,\n  timeZoneName: 'short',\n};\n\nexport interface TraceDetailsProps {\n  trace: Trace;\n}\n\nexport function TraceDetails(props: TraceDetailsProps): ReactElement {\n  const { trace } = props;\n\n  const { dateFormatOptionsWithUserTimeZone } = useTimeZone();\n  const dateFormatOptions = dateFormatOptionsWithUserTimeZone(DATE_FORMAT_OPTIONS);\n  const dateFormatter = new Intl.DateTimeFormat(undefined, dateFormatOptions);\n\n  const rootSpan = trace.rootSpans[0];\n  if (!rootSpan) {\n    return <Typography>Trace contains no spans.</Typography>;\n  }\n\n  return (\n    <Stack direction=\"row\" sx={{ justifyContent: 'space-between' }}>\n      <Typography variant=\"h3\">\n        {rootSpan.resource.serviceName}: {rootSpan.name} ({formatDuration(trace.endTimeUnixMs - trace.startTimeUnixMs)})\n      </Typography>\n      <Typography variant=\"h4\">\n        <Typography component=\"span\" sx={{ px: 1 }}>\n          <strong>Start:</strong> {dateFormatter.format(trace.startTimeUnixMs)}\n        </Typography>\n        <Typography component=\"span\" sx={{ px: 1 }}>\n          <strong>Trace ID:</strong> {rootSpan.traceId}\n        </Typography>\n      </Typography>\n    </Stack>\n  );\n}\n"],"names":["Stack","Typography","useTimeZone","formatDuration","DATE_FORMAT_OPTIONS","year","month","day","hour","minute","second","fractionalSecondDigits","timeZoneName","TraceDetails","props","trace","dateFormatOptionsWithUserTimeZone","dateFormatOptions","dateFormatter","Intl","DateTimeFormat","undefined","rootSpan","rootSpans","direction","sx","justifyContent","variant","resource","serviceName","name","endTimeUnixMs","startTimeUnixMs","component","px","strong","format","traceId"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAElD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,cAAc,QAAQ,UAAU;AAGzC,MAAMC,sBAAkD;IACtDC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,MAAM;IACNC,QAAQ;IACRC,QAAQ;IACRC,wBAAwB;IACxBC,cAAc;AAChB;AAMA,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,KAAK,EAAE,GAAGD;IAElB,MAAM,EAAEE,iCAAiC,EAAE,GAAGd;IAC9C,MAAMe,oBAAoBD,kCAAkCZ;IAC5D,MAAMc,gBAAgB,IAAIC,KAAKC,cAAc,CAACC,WAAWJ;IAEzD,MAAMK,WAAWP,MAAMQ,SAAS,CAAC,EAAE;IACnC,IAAI,CAACD,UAAU;QACb,qBAAO,KAACrB;sBAAW;;IACrB;IAEA,qBACE,MAACD;QAAMwB,WAAU;QAAMC,IAAI;YAAEC,gBAAgB;QAAgB;;0BAC3D,MAACzB;gBAAW0B,SAAQ;;oBACjBL,SAASM,QAAQ,CAACC,WAAW;oBAAC;oBAAGP,SAASQ,IAAI;oBAAC;oBAAG3B,eAAeY,MAAMgB,aAAa,GAAGhB,MAAMiB,eAAe;oBAAE;;;0BAEjH,MAAC/B;gBAAW0B,SAAQ;;kCAClB,MAAC1B;wBAAWgC,WAAU;wBAAOR,IAAI;4BAAES,IAAI;wBAAE;;0CACvC,KAACC;0CAAO;;4BAAe;4BAAEjB,cAAckB,MAAM,CAACrB,MAAMiB,eAAe;;;kCAErE,MAAC/B;wBAAWgC,WAAU;wBAAOR,IAAI;4BAAES,IAAI;wBAAE;;0CACvC,KAACC;0CAAO;;4BAAkB;4BAAEb,SAASe,OAAO;;;;;;;AAKtD"}

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,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAOhE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGzD,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,wBAAwB,CAAC;IAClC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC;CAC/B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CAoD7E"}
+{"version":3,"file":"TracingGanttChart.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/TracingGanttChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAOhE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAIzD,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,wBAAwB,CAAC;IAClC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC;CAC/B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CAqD7E"}

package/lib/TracingGanttChart/TracingGanttChart.js

@@ -19,6 +19,7 @@ import { GanttTable } from './GanttTable/GanttTable';
 import { GanttTableProvider } from './GanttTable/GanttTableProvider';
 import { ResizableDivider } from './GanttTable/ResizableDivider';
 import { getTraceModel } from './trace';
+import { TraceDetails } from './TraceDetails';
 /**
  * The core GanttChart panel for Perses.
  *
@@ -61,6 +62,9 @@ import { getTraceModel } from './trace';
                     gap
                 },
                 children: [
+                    /*#__PURE__*/ _jsx(TraceDetails, {
+                        trace: trace
+                    }),
                     /*#__PURE__*/ _jsx(MiniGanttChart, {
                         options: options,
                         trace: trace,

package/lib/TracingGanttChart/TracingGanttChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/TracingGanttChart/TracingGanttChart.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { Box, Stack, useTheme } from '@mui/material';\nimport { otlptracev1 } from '@perses-dev/core';\nimport { 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"}
+{"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';\nimport { TraceDetails } from './TraceDetails';\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        <TraceDetails trace={trace} />\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","TraceDetails","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;AAC9C,SAASC,YAAY,QAAQ,iBAAiB;AAQ9C;;;;;CAKC,GACD,OAAO,SAASC,kBAAkBC,KAA6B;IAC7D,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,OAAOC,SAAS,EAAE,GAAGJ;IAEtD,MAAMK,QAAQd;IACd,MAAMY,QAAQjB,QAAQ;QACpB,IAAI;YACF,OAAOW,cAAcO;QACvB,EAAE,OAAOE,GAAG;YACV,MAAM,IAAIC,MAAM,CAAC,8BAA8B,EAAED,GAAG;QACtD;IACF,GAAG;QAACF;KAAU;IACd,MAAM,CAACI,UAAUC,YAAY,GAAGrB,SAAmB;QACjDsB,iBAAiBP,MAAMO,eAAe;QACtCC,eAAeR,MAAMQ,aAAa;IACpC;IACA,MAAM,CAACC,cAAcC,gBAAgB,GAAGzB,SAA2B0B;IAEnE,MAAMC,aAAa5B,OAAuB;IAC1C,iEAAiE;IACjE,yDAAyD;IACzD,MAAM,CAAC6B,YAAYC,cAAc,GAAG7B,SAAiB;IACrD,MAAM8B,MAAM;IAEZ,qBACE,MAAC5B;QAAM6B,KAAKJ;QAAYK,WAAU;QAAMC,IAAI;YAAEC,QAAQ;YAAQC,WAAW;YAASL;QAAI;;0BACpF,MAAC5B;gBAAM+B,IAAI;oBAAEG,UAAU;oBAAGN;gBAAI;;kCAC5B,KAACpB;wBAAaK,OAAOA;;kCACrB,KAACX;wBAAeS,SAASA;wBAASE,OAAOA;wBAAOK,UAAUA;wBAAUC,aAAaA;;kCACjF,KAACd;kCACC,cAAA,KAACD;4BACCO,SAASA;4BACTE,OAAOA;4BACPK,UAAUA;4BACVI,cAAcA;4BACda,aAAaZ;;;;;YAIlBD,8BACC;;kCACE,KAAChB;wBAAiB8B,WAAWX;wBAAYY,SAASC,SAASvB,MAAMsB,OAAO,CAACT;wBAAOW,QAAQZ;;kCACxF,KAAC5B;wBAAIgC,IAAI;4BAAES,OAAO,GAAG,AAAC,CAAA,IAAId,UAAS,IAAK,IAAI,CAAC,CAAC;4BAAEe,UAAU;wBAAO;kCAC/D,cAAA,KAACtC;4BACCS,gBAAgBA;4BAChBC,OAAOA;4BACP6B,MAAMpB;4BACNqB,iBAAiB,IAAMpB,gBAAgBC;;;;;;;AAOrD"}

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

@@ -14,16 +14,62 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "AttributeList", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    AttributeList: function() {
         return AttributeList;
+    },
+    TraceAttributes: function() {
+        return TraceAttributes;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 const _reactrouterdom = require("react-router-dom");
+const _utils = require("../utils");
+function TraceAttributes(props) {
+    const { trace, span, attributeLinks } = props;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.List, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(AttributeItem, {
+                        name: "span ID",
+                        value: span.spanId
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(AttributeItem, {
+                        name: "start",
+                        value: (0, _utils.formatDuration)(span.startTimeUnixMs - trace.startTimeUnixMs)
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(AttributeItem, {
+                        name: "duration",
+                        value: (0, _utils.formatDuration)(span.endTimeUnixMs - span.startTimeUnixMs)
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {}),
+            span.attributes.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(AttributeList, {
+                        attributeLinks: attributeLinks,
+                        attributes: span.attributes
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {})
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(AttributeList, {
+                attributeLinks: attributeLinks,
+                attributes: span.resource.attributes
+            })
+        ]
+    });
+}
 function AttributeList(props) {
     const { attributeLinks, attributes } = props;
     const attributesMap = (0, _react.useMemo)(()=>Object.fromEntries(attributes.map((attr)=>[
@@ -32,34 +78,35 @@ function AttributeList(props) {
             ])), [
         attributes
     ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.List, {
-            children: attributes.sort((a, b)=>a.key.localeCompare(b.key)).map((attribute, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(AttributeItem, {
-                    attribute: attribute,
-                    linkTo: attributeLinks?.[attribute.key]?.(attributesMap)
-                }, i))
-        })
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.List, {
+        children: attributes.sort((a, b)=>a.key.localeCompare(b.key)).map((attribute, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(AttributeItem, {
+                name: attribute.key,
+                value: renderAttributeValue(attribute.value),
+                link: attributeLinks?.[attribute.key]?.(attributesMap)
+            }, i))
     });
 }
 function AttributeItem(props) {
-    const { attribute, linkTo } = props;
-    const value = linkTo ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Link, {
+    const { name, value, link } = props;
+    const valueComponent = link ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Link, {
         component: _reactrouterdom.Link,
-        to: linkTo,
-        children: renderAttributeValue(attribute.value)
-    }) : renderAttributeValue(attribute.value);
+        to: link,
+        children: value
+    }) : value;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ListItem, {
         disablePadding: true,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ListItemText, {
-            primary: attribute.key,
-            secondary: value,
-            primaryTypographyProps: {
-                variant: 'h5'
-            },
-            secondaryTypographyProps: {
-                variant: 'body1',
-                sx: {
-                    wordBreak: 'break-word'
+            primary: name,
+            secondary: valueComponent,
+            slotProps: {
+                primary: {
+                    variant: 'h5'
+                },
+                secondary: {
+                    variant: 'body1',
+                    sx: {
+                        wordBreak: 'break-word'
+                    }
                 }
             }
         })

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

@@ -84,18 +84,10 @@ function DetailPane(props) {
                     ]
                 })
             }),
-            tab === 'attributes' && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-                children: [
-                    span.attributes.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Attributes.AttributeList, {
-                        attributeLinks: attributeLinks,
-                        attributes: span.attributes
-                    }),
-                    span.attributes.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {}),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Attributes.AttributeList, {
-                        attributeLinks: attributeLinks,
-                        attributes: span.resource.attributes
-                    })
-                ]
+            tab === 'attributes' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Attributes.TraceAttributes, {
+                trace: trace,
+                span: span,
+                attributeLinks: attributeLinks
             }),
             tab === 'events' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_SpanEvents.SpanEventList, {
                 trace: trace,