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

package/lib/TracingGanttChart/DetailPane/Attributes.js

@@ -0,0 +1,66 @@
+// 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, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Link, List, ListItem, ListItemText } from '@mui/material';
+import { Link as RouterLink } from 'react-router-dom';
+export function AttributeList(props) {
+    const { attributeLinks, attributes } = props;
+    const attributesMap = useMemo(()=>Object.fromEntries(attributes.map((attr)=>[
+                attr.key,
+                attr.value
+            ])), [
+        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))
+        })
+    });
+}
+function AttributeItem(props) {
+    const { attribute, linkTo } = props;
+    const value = linkTo ? /*#__PURE__*/ _jsx(Link, {
+        component: RouterLink,
+        to: linkTo,
+        children: renderAttributeValue(attribute.value)
+    }) : renderAttributeValue(attribute.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'
+                }
+            }
+        })
+    });
+}
+function renderAttributeValue(value) {
+    if ('stringValue' in value) return value.stringValue.length > 0 ? value.stringValue : '<empty string>';
+    if ('intValue' in value) return value.intValue;
+    if ('boolValue' in value) return value.boolValue.toString();
+    if ('arrayValue' in value) return value.arrayValue.values.map(renderAttributeValue).join(', ');
+    return 'unknown';
+}
+
+//# sourceMappingURL=Attributes.js.map

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

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

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

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { Span, Trace } from '../trace';
+import { AttributeLinks } from './Attributes';
+export interface DetailPaneProps {
+    attributeLinks?: AttributeLinks;
+    trace: Trace;
+    span: Span;
+    onCloseBtnClick: () => void;
+}
+/**
+ * DetailPane renders a sidebar showing the span attributes etc.
+ */
+export declare function DetailPane(props: DetailPaneProps): ReactElement;
+//# sourceMappingURL=DetailPane.d.ts.map

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

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

package/lib/TracingGanttChart/DetailPane/DetailPane.js

@@ -0,0 +1,95 @@
+// 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 { Box, Divider, IconButton, Tab, Tabs, Typography } from '@mui/material';
+import { useState } from 'react';
+import CloseIcon from 'mdi-material-ui/Close';
+import { AttributeList } from './Attributes';
+import { SpanEventList } from './SpanEvents';
+/**
+ * DetailPane renders a sidebar showing the span attributes etc.
+ */ export function DetailPane(props) {
+    const { attributeLinks, trace, span, onCloseBtnClick } = props;
+    const [tab, setTab] = useState('attributes');
+    // if the events tab is selected, and then a span without events is clicked,
+    // we need to switch the current selected tab back to the attributes tab.
+    if (tab === 'events' && span.events.length === 0) {
+        setTab('attributes');
+    }
+    return /*#__PURE__*/ _jsxs(Box, {
+        children: [
+            /*#__PURE__*/ _jsx(IconButton, {
+                sx: {
+                    float: 'right'
+                },
+                onClick: onCloseBtnClick,
+                children: /*#__PURE__*/ _jsx(CloseIcon, {})
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                sx: {
+                    wordBreak: 'break-word'
+                },
+                children: span.resource.serviceName
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "h2",
+                sx: {
+                    wordBreak: 'break-word'
+                },
+                children: span.name
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    borderBottom: 1,
+                    borderColor: 'divider'
+                },
+                children: /*#__PURE__*/ _jsxs(Tabs, {
+                    value: tab,
+                    onChange: (_, tab)=>setTab(tab),
+                    children: [
+                        /*#__PURE__*/ _jsx(Tab, {
+                            sx: {
+                                p: 0
+                            },
+                            value: "attributes",
+                            label: "Attributes"
+                        }),
+                        span.events.length > 0 && /*#__PURE__*/ _jsx(Tab, {
+                            value: "events",
+                            label: "Events"
+                        })
+                    ]
+                })
+            }),
+            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 === 'events' && /*#__PURE__*/ _jsx(SpanEventList, {
+                trace: trace,
+                span: span
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=DetailPane.js.map

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

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

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

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { Trace, Span } from '../trace';
+export interface SpanEventListProps {
+    trace: Trace;
+    span: Span;
+}
+export declare function SpanEventList(props: SpanEventListProps): ReactElement;
+//# sourceMappingURL=SpanEvents.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpanEvents.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/DetailPane/SpanEvents.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAS,MAAM,UAAU,CAAC;AAG9C,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAYrE"}

package/lib/TracingGanttChart/DetailPane/SpanEvents.js

@@ -0,0 +1,54 @@
+// 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 { Accordion, AccordionDetails, AccordionSummary, Typography } from '@mui/material';
+import ExpandMoreIcon from 'mdi-material-ui/ChevronDown';
+import { formatDuration } from '../utils';
+import { AttributeList } from './Attributes';
+export function SpanEventList(props) {
+    const { trace, span } = props;
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: span.events.sort((a, b)=>a.timeUnixMs - b.timeUnixMs).map((event, i)=>/*#__PURE__*/ _jsx(SpanEventItem, {
+                trace: trace,
+                event: event
+            }, i))
+    });
+}
+function SpanEventItem(props) {
+    const { trace, event } = props;
+    const relativeTime = event.timeUnixMs - trace.startTimeUnixMs;
+    return /*#__PURE__*/ _jsxs(Accordion, {
+        disableGutters: true,
+        children: [
+            /*#__PURE__*/ _jsx(AccordionSummary, {
+                expandIcon: /*#__PURE__*/ _jsx(ExpandMoreIcon, {}),
+                children: /*#__PURE__*/ _jsx(Typography, {
+                    children: formatDuration(relativeTime)
+                })
+            }),
+            /*#__PURE__*/ _jsxs(AccordionDetails, {
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "subtitle1",
+                        children: event.name
+                    }),
+                    /*#__PURE__*/ _jsx(AttributeList, {
+                        attributes: event.attributes
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=SpanEvents.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/TracingGanttChart/DetailPane/SpanEvents.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 { Accordion, AccordionDetails, AccordionSummary, Typography } from '@mui/material';\nimport ExpandMoreIcon from 'mdi-material-ui/ChevronDown';\nimport { ReactElement } from 'react';\nimport { formatDuration } from '../utils';\nimport { Trace, Span, Event } from '../trace';\nimport { AttributeList } from './Attributes';\n\nexport interface SpanEventListProps {\n  trace: Trace;\n  span: Span;\n}\n\nexport function SpanEventList(props: SpanEventListProps): ReactElement {\n  const { trace, span } = props;\n\n  return (\n    <>\n      {span.events\n        .sort((a, b) => a.timeUnixMs - b.timeUnixMs)\n        .map((event, i) => (\n          <SpanEventItem key={i} trace={trace} event={event} />\n        ))}\n    </>\n  );\n}\n\ninterface SpanEventItemProps {\n  trace: Trace;\n  event: Event;\n}\n\nfunction SpanEventItem(props: SpanEventItemProps): ReactElement {\n  const { trace, event } = props;\n  const relativeTime = event.timeUnixMs - trace.startTimeUnixMs;\n\n  return (\n    <Accordion disableGutters>\n      <AccordionSummary expandIcon={<ExpandMoreIcon />}>\n        <Typography>{formatDuration(relativeTime)}</Typography>\n      </AccordionSummary>\n      <AccordionDetails>\n        <Typography variant=\"subtitle1\">{event.name}</Typography>\n        <AttributeList attributes={event.attributes} />\n      </AccordionDetails>\n    </Accordion>\n  );\n}\n"],"names":["Accordion","AccordionDetails","AccordionSummary","Typography","ExpandMoreIcon","formatDuration","AttributeList","SpanEventList","props","trace","span","events","sort","a","b","timeUnixMs","map","event","i","SpanEventItem","relativeTime","startTimeUnixMs","disableGutters","expandIcon","variant","name","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,SAAS,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,UAAU,QAAQ,gBAAgB;AAC1F,OAAOC,oBAAoB,8BAA8B;AAEzD,SAASC,cAAc,QAAQ,WAAW;AAE1C,SAASC,aAAa,QAAQ,eAAe;AAO7C,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGF;IAExB,qBACE;kBACGE,KAAKC,MAAM,CACTC,IAAI,CAAC,CAACC,GAAGC,IAAMD,EAAEE,UAAU,GAAGD,EAAEC,UAAU,EAC1CC,GAAG,CAAC,CAACC,OAAOC,kBACX,KAACC;gBAAsBV,OAAOA;gBAAOQ,OAAOA;eAAxBC;;AAI9B;AAOA,SAASC,cAAcX,KAAyB;IAC9C,MAAM,EAAEC,KAAK,EAAEQ,KAAK,EAAE,GAAGT;IACzB,MAAMY,eAAeH,MAAMF,UAAU,GAAGN,MAAMY,eAAe;IAE7D,qBACE,MAACrB;QAAUsB,cAAc;;0BACvB,KAACpB;gBAAiBqB,0BAAY,KAACnB;0BAC7B,cAAA,KAACD;8BAAYE,eAAee;;;0BAE9B,MAACnB;;kCACC,KAACE;wBAAWqB,SAAQ;kCAAaP,MAAMQ,IAAI;;kCAC3C,KAACnB;wBAAcoB,YAAYT,MAAMS,UAAU;;;;;;AAInD"}

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

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+import { Viewport } from '../utils';
+import { TracingGanttChartOptions } from '../../gantt-chart-model';
+import { Span, Trace } from '../trace';
+export interface GanttTableProps {
+    options: TracingGanttChartOptions;
+    trace: Trace;
+    viewport: Viewport;
+    selectedSpan?: Span;
+    onSpanClick: (span: Span) => void;
+}
+export declare function GanttTable(props: GanttTableProps): ReactElement;
+//# sourceMappingURL=GanttTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GanttTable.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/GanttTable/GanttTable.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAMvC,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,wBAAwB,CAAC;IAClC,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,QAAQ,CAAC;IACnB,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAuD/D"}

package/lib/TracingGanttChart/GanttTable/GanttTable.js

@@ -0,0 +1,93 @@
+// 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 } from "react/jsx-runtime";
+import { Virtuoso } from 'react-virtuoso';
+import { useMemo, useRef, useState } from 'react';
+import { Box, useTheme } from '@mui/material';
+import { useGanttTableContext } from './GanttTableProvider';
+import { GanttTableRow } from './GanttTableRow';
+import { GanttTableHeader } from './GanttTableHeader';
+import { ResizableDivider } from './ResizableDivider';
+export function GanttTable(props) {
+    const { options, trace, viewport, selectedSpan, onSpanClick } = props;
+    const { collapsedSpans, setVisibleSpans } = useGanttTableContext();
+    const [nameColumnWidth, setNameColumnWidth] = useState(0.25);
+    const tableRef = useRef(null);
+    const theme = useTheme();
+    const rows = useMemo(()=>{
+        const rows = [];
+        for (const rootSpan of trace.rootSpans){
+            treeToRows(rows, rootSpan, collapsedSpans);
+        }
+        return rows;
+    }, [
+        trace.rootSpans,
+        collapsedSpans
+    ]);
+    const divider = /*#__PURE__*/ _jsx(ResizableDivider, {
+        parentRef: tableRef,
+        onMove: setNameColumnWidth
+    });
+    // update currently visible spans
+    function handleRangeChange({ startIndex, endIndex }) {
+        const visibleSpans = [];
+        for(let i = startIndex; i <= endIndex; i++){
+            visibleSpans.push(rows[i].spanId);
+        }
+        setVisibleSpans(visibleSpans);
+    }
+    return /*#__PURE__*/ _jsxs(Box, {
+        ref: tableRef,
+        sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            flexGrow: 1,
+            border: `1px solid ${theme.palette.divider}`,
+            borderRadius: `${theme.shape.borderRadius}px`
+        },
+        children: [
+            /*#__PURE__*/ _jsx(GanttTableHeader, {
+                trace: trace,
+                viewport: viewport,
+                nameColumnWidth: nameColumnWidth,
+                divider: divider
+            }),
+            /*#__PURE__*/ _jsx(Virtuoso, {
+                data: rows,
+                itemContent: (_, span)=>/*#__PURE__*/ _jsx(GanttTableRow, {
+                        options: options,
+                        span: span,
+                        viewport: viewport,
+                        selected: span === selectedSpan,
+                        nameColumnWidth: nameColumnWidth,
+                        divider: divider,
+                        onClick: onSpanClick
+                    }),
+                rangeChanged: handleRangeChange
+            })
+        ]
+    });
+}
+/**
+ * treeToRows recursively transforms the span tree to a list of rows and
+ * hides collapsed child spans.
+ */ function treeToRows(rows, span, collapsedSpans) {
+    rows.push(span);
+    if (!collapsedSpans.includes(span.spanId)) {
+        for (const child of span.childSpans){
+            treeToRows(rows, child, collapsedSpans);
+        }
+    }
+}
+
+//# sourceMappingURL=GanttTable.js.map

package/lib/TracingGanttChart/GanttTable/GanttTable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/GanttTable.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 { Virtuoso, ListRange } from 'react-virtuoso';\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { Box, useTheme } from '@mui/material';\nimport { Viewport } from '../utils';\nimport { TracingGanttChartOptions } from '../../gantt-chart-model';\nimport { Span, Trace } from '../trace';\nimport { useGanttTableContext } from './GanttTableProvider';\nimport { GanttTableRow } from './GanttTableRow';\nimport { GanttTableHeader } from './GanttTableHeader';\nimport { ResizableDivider } from './ResizableDivider';\n\nexport interface GanttTableProps {\n  options: TracingGanttChartOptions;\n  trace: Trace;\n  viewport: Viewport;\n  selectedSpan?: Span;\n  onSpanClick: (span: Span) => void;\n}\n\nexport function GanttTable(props: GanttTableProps): ReactElement {\n  const { options, trace, viewport, selectedSpan, onSpanClick } = props;\n  const { collapsedSpans, setVisibleSpans } = useGanttTableContext();\n  const [nameColumnWidth, setNameColumnWidth] = useState<number>(0.25);\n  const tableRef = useRef<HTMLDivElement>(null);\n  const theme = useTheme();\n\n  const rows = useMemo(() => {\n    const rows: Span[] = [];\n    for (const rootSpan of trace.rootSpans) {\n      treeToRows(rows, rootSpan, collapsedSpans);\n    }\n    return rows;\n  }, [trace.rootSpans, collapsedSpans]);\n\n  const divider = <ResizableDivider parentRef={tableRef} onMove={setNameColumnWidth} />;\n\n  // update currently visible spans\n  function handleRangeChange({ startIndex, endIndex }: ListRange): void {\n    const visibleSpans: string[] = [];\n    for (let i = startIndex; i <= endIndex; i++) {\n      visibleSpans.push(rows[i]!.spanId);\n    }\n    setVisibleSpans(visibleSpans);\n  }\n\n  return (\n    <Box\n      ref={tableRef}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        flexGrow: 1,\n        border: `1px solid ${theme.palette.divider}`,\n        borderRadius: `${theme.shape.borderRadius}px`,\n      }}\n    >\n      <GanttTableHeader trace={trace} viewport={viewport} nameColumnWidth={nameColumnWidth} divider={divider} />\n      <Virtuoso\n        data={rows}\n        itemContent={(_, span) => (\n          <GanttTableRow\n            options={options}\n            span={span}\n            viewport={viewport}\n            selected={span === selectedSpan}\n            nameColumnWidth={nameColumnWidth}\n            divider={divider}\n            onClick={onSpanClick}\n          />\n        )}\n        rangeChanged={handleRangeChange}\n      />\n    </Box>\n  );\n}\n\n/**\n * treeToRows recursively transforms the span tree to a list of rows and\n * hides collapsed child spans.\n */\nfunction treeToRows(rows: Span[], span: Span, collapsedSpans: string[]): void {\n  rows.push(span);\n  if (!collapsedSpans.includes(span.spanId)) {\n    for (const child of span.childSpans) {\n      treeToRows(rows, child, collapsedSpans);\n    }\n  }\n}\n"],"names":["Virtuoso","useMemo","useRef","useState","Box","useTheme","useGanttTableContext","GanttTableRow","GanttTableHeader","ResizableDivider","GanttTable","props","options","trace","viewport","selectedSpan","onSpanClick","collapsedSpans","setVisibleSpans","nameColumnWidth","setNameColumnWidth","tableRef","theme","rows","rootSpan","rootSpans","treeToRows","divider","parentRef","onMove","handleRangeChange","startIndex","endIndex","visibleSpans","i","push","spanId","ref","sx","display","flexDirection","flexGrow","border","palette","borderRadius","shape","data","itemContent","_","span","selected","onClick","rangeChanged","includes","child","childSpans"],"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,QAAQ,QAAmB,iBAAiB;AACrD,SAAuBC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAChE,SAASC,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AAI9C,SAASC,oBAAoB,QAAQ,uBAAuB;AAC5D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,gBAAgB,QAAQ,qBAAqB;AAUtD,OAAO,SAASC,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAGL;IAChE,MAAM,EAAEM,cAAc,EAAEC,eAAe,EAAE,GAAGZ;IAC5C,MAAM,CAACa,iBAAiBC,mBAAmB,GAAGjB,SAAiB;IAC/D,MAAMkB,WAAWnB,OAAuB;IACxC,MAAMoB,QAAQjB;IAEd,MAAMkB,OAAOtB,QAAQ;QACnB,MAAMsB,OAAe,EAAE;QACvB,KAAK,MAAMC,YAAYX,MAAMY,SAAS,CAAE;YACtCC,WAAWH,MAAMC,UAAUP;QAC7B;QACA,OAAOM;IACT,GAAG;QAACV,MAAMY,SAAS;QAAER;KAAe;IAEpC,MAAMU,wBAAU,KAAClB;QAAiBmB,WAAWP;QAAUQ,QAAQT;;IAE/D,iCAAiC;IACjC,SAASU,kBAAkB,EAAEC,UAAU,EAAEC,QAAQ,EAAa;QAC5D,MAAMC,eAAyB,EAAE;QACjC,IAAK,IAAIC,IAAIH,YAAYG,KAAKF,UAAUE,IAAK;YAC3CD,aAAaE,IAAI,CAACZ,IAAI,CAACW,EAAE,CAAEE,MAAM;QACnC;QACAlB,gBAAgBe;IAClB;IAEA,qBACE,MAAC7B;QACCiC,KAAKhB;QACLiB,IAAI;YACFC,SAAS;YACTC,eAAe;YACfC,UAAU;YACVC,QAAQ,CAAC,UAAU,EAAEpB,MAAMqB,OAAO,CAAChB,OAAO,EAAE;YAC5CiB,cAAc,GAAGtB,MAAMuB,KAAK,CAACD,YAAY,CAAC,EAAE,CAAC;QAC/C;;0BAEA,KAACpC;gBAAiBK,OAAOA;gBAAOC,UAAUA;gBAAUK,iBAAiBA;gBAAiBQ,SAASA;;0BAC/F,KAAC3B;gBACC8C,MAAMvB;gBACNwB,aAAa,CAACC,GAAGC,qBACf,KAAC1C;wBACCK,SAASA;wBACTqC,MAAMA;wBACNnC,UAAUA;wBACVoC,UAAUD,SAASlC;wBACnBI,iBAAiBA;wBACjBQ,SAASA;wBACTwB,SAASnC;;gBAGboC,cAActB;;;;AAItB;AAEA;;;CAGC,GACD,SAASJ,WAAWH,IAAY,EAAE0B,IAAU,EAAEhC,cAAwB;IACpEM,KAAKY,IAAI,CAACc;IACV,IAAI,CAAChC,eAAeoC,QAAQ,CAACJ,KAAKb,MAAM,GAAG;QACzC,KAAK,MAAMkB,SAASL,KAAKM,UAAU,CAAE;YACnC7B,WAAWH,MAAM+B,OAAOrC;QAC1B;IACF;AACF"}

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

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+import { Viewport } from '../utils';
+import { Trace } from '../trace';
+interface GanttTableHeaderProps {
+    trace: Trace;
+    viewport: Viewport;
+    nameColumnWidth: number;
+    divider: React.ReactNode;
+}
+export declare function GanttTableHeader(props: GanttTableHeaderProps): ReactElement;
+export {};
+//# sourceMappingURL=GanttTableHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GanttTableHeader.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/GanttTable/GanttTableHeader.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAa,MAAM,UAAU,CAAC;AAE/C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,UAAU,qBAAqB;IAC7B,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAuB3E"}

package/lib/TracingGanttChart/GanttTable/GanttTableHeader.js

@@ -0,0 +1,56 @@
+// 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 } from "react/jsx-runtime";
+import { Box, Stack, useTheme } from '@mui/material';
+import { rowHeight } from '../utils';
+import { TicksHeader } from '../Ticks';
+export function GanttTableHeader(props) {
+    const { trace, viewport, nameColumnWidth, divider } = props;
+    const theme = useTheme();
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        alignItems: "center",
+        sx: {
+            height: rowHeight,
+            fontSize: '0.9rem',
+            borderBottom: `1px solid ${theme.palette.divider}`
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Box, {
+                style: {
+                    width: `${nameColumnWidth * 100}%`
+                },
+                children: /*#__PURE__*/ _jsx("span", {
+                    style: {
+                        padding: '.25rem'
+                    },
+                    children: "Service & Operation"
+                })
+            }),
+            divider,
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    position: 'relative',
+                    height: '100%',
+                    flexGrow: 1
+                },
+                children: /*#__PURE__*/ _jsx(TicksHeader, {
+                    trace: trace,
+                    viewport: viewport
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=GanttTableHeader.js.map

package/lib/TracingGanttChart/GanttTable/GanttTableHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/GanttTableHeader.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, Stack, useTheme } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { Viewport, rowHeight } from '../utils';\nimport { TicksHeader } from '../Ticks';\nimport { Trace } from '../trace';\n\ninterface GanttTableHeaderProps {\n  trace: Trace;\n  viewport: Viewport;\n  nameColumnWidth: number;\n  divider: React.ReactNode;\n}\n\nexport function GanttTableHeader(props: GanttTableHeaderProps): ReactElement {\n  const { trace, viewport, nameColumnWidth, divider } = props;\n  const theme = useTheme();\n\n  return (\n    <Stack\n      direction=\"row\"\n      alignItems=\"center\"\n      sx={{\n        height: rowHeight,\n        fontSize: '0.9rem',\n        borderBottom: `1px solid ${theme.palette.divider}`,\n      }}\n    >\n      <Box style={{ width: `${nameColumnWidth * 100}%` }}>\n        <span style={{ padding: '.25rem' }}>Service & Operation</span>\n      </Box>\n      {divider}\n      <Box sx={{ position: 'relative', height: '100%', flexGrow: 1 }}>\n        <TicksHeader trace={trace} viewport={viewport} />\n      </Box>\n    </Stack>\n  );\n}\n"],"names":["Box","Stack","useTheme","rowHeight","TicksHeader","GanttTableHeader","props","trace","viewport","nameColumnWidth","divider","theme","direction","alignItems","sx","height","fontSize","borderBottom","palette","style","width","span","padding","position","flexGrow"],"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,KAAK,EAAEC,QAAQ,QAAQ,gBAAgB;AAErD,SAAmBC,SAAS,QAAQ,WAAW;AAC/C,SAASC,WAAW,QAAQ,WAAW;AAUvC,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,OAAO,EAAE,GAAGJ;IACtD,MAAMK,QAAQT;IAEd,qBACE,MAACD;QACCW,WAAU;QACVC,YAAW;QACXC,IAAI;YACFC,QAAQZ;YACRa,UAAU;YACVC,cAAc,CAAC,UAAU,EAAEN,MAAMO,OAAO,CAACR,OAAO,EAAE;QACpD;;0BAEA,KAACV;gBAAImB,OAAO;oBAAEC,OAAO,GAAGX,kBAAkB,IAAI,CAAC,CAAC;gBAAC;0BAC/C,cAAA,KAACY;oBAAKF,OAAO;wBAAEG,SAAS;oBAAS;8BAAG;;;YAErCZ;0BACD,KAACV;gBAAIc,IAAI;oBAAES,UAAU;oBAAYR,QAAQ;oBAAQS,UAAU;gBAAE;0BAC3D,cAAA,KAACpB;oBAAYG,OAAOA;oBAAOC,UAAUA;;;;;AAI7C"}

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

@@ -0,0 +1,23 @@
+import { ReactElement } from 'react';
+interface GanttTableContextType {
+    collapsedSpans: string[];
+    setCollapsedSpans: (s: string[]) => void;
+    visibleSpans: string[];
+    setVisibleSpans: (s: string[]) => void;
+    /** can be a spanId, an empty string for the root span or undefined for no hover */
+    hoveredParent?: string;
+    setHoveredParent: (s?: string) => void;
+}
+/**
+ * GanttTableContext stores UI state of the rows.
+ * Required for passing down state to deeply nested <SpanIndents>,
+ * without re-rendering intermediate components.
+ */
+export declare const GanttTableContext: import("react").Context<GanttTableContextType | undefined>;
+interface GanttTableProviderProps {
+    children?: React.ReactNode;
+}
+export declare function GanttTableProvider(props: GanttTableProviderProps): ReactElement;
+export declare function useGanttTableContext(): GanttTableContextType;
+export {};
+//# sourceMappingURL=GanttTableProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GanttTableProvider.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/GanttTable/GanttTableProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAiB,YAAY,EAAwB,MAAM,OAAO,CAAC;AAE1E,UAAU,qBAAqB;IAC7B,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,iBAAiB,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACzC,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,eAAe,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACvC,mFAAmF;IACnF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,4DAA8D,CAAC;AAE7F,UAAU,uBAAuB;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,CAa/E;AAED,wBAAgB,oBAAoB,IAAI,qBAAqB,CAM5D"}

package/lib/TracingGanttChart/GanttTable/GanttTableProvider.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 { createContext, useContext, useState } from 'react';
+/**
+ * GanttTableContext stores UI state of the rows.
+ * Required for passing down state to deeply nested <SpanIndents>,
+ * without re-rendering intermediate components.
+ */ export const GanttTableContext = /*#__PURE__*/ createContext(undefined);
+export function GanttTableProvider(props) {
+    const { children } = props;
+    const [collapsedSpans, setCollapsedSpans] = useState([]);
+    const [visibleSpans, setVisibleSpans] = useState([]);
+    const [hoveredParent, setHoveredParent] = useState(undefined);
+    return /*#__PURE__*/ _jsx(GanttTableContext.Provider, {
+        value: {
+            collapsedSpans,
+            setCollapsedSpans,
+            visibleSpans,
+            setVisibleSpans,
+            hoveredParent,
+            setHoveredParent
+        },
+        children: children
+    });
+}
+export function useGanttTableContext() {
+    const ctx = useContext(GanttTableContext);
+    if (ctx === undefined) {
+        throw new Error('No GanttTableContext found. Did you forget a Provider?');
+    }
+    return ctx;
+}
+
+//# sourceMappingURL=GanttTableProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/GanttTableProvider.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 { createContext, ReactElement, useContext, useState } from 'react';\n\ninterface GanttTableContextType {\n  collapsedSpans: string[];\n  setCollapsedSpans: (s: string[]) => void;\n  visibleSpans: string[];\n  setVisibleSpans: (s: string[]) => void;\n  /** can be a spanId, an empty string for the root span or undefined for no hover */\n  hoveredParent?: string;\n  setHoveredParent: (s?: string) => void;\n}\n\n/**\n * GanttTableContext stores UI state of the rows.\n * Required for passing down state to deeply nested <SpanIndents>,\n * without re-rendering intermediate components.\n */\nexport const GanttTableContext = createContext<GanttTableContextType | undefined>(undefined);\n\ninterface GanttTableProviderProps {\n  children?: React.ReactNode;\n}\n\nexport function GanttTableProvider(props: GanttTableProviderProps): ReactElement {\n  const { children } = props;\n  const [collapsedSpans, setCollapsedSpans] = useState<string[]>([]);\n  const [visibleSpans, setVisibleSpans] = useState<string[]>([]);\n  const [hoveredParent, setHoveredParent] = useState<string | undefined>(undefined);\n\n  return (\n    <GanttTableContext.Provider\n      value={{ collapsedSpans, setCollapsedSpans, visibleSpans, setVisibleSpans, hoveredParent, setHoveredParent }}\n    >\n      {children}\n    </GanttTableContext.Provider>\n  );\n}\n\nexport function useGanttTableContext(): GanttTableContextType {\n  const ctx = useContext(GanttTableContext);\n  if (ctx === undefined) {\n    throw new Error('No GanttTableContext found. Did you forget a Provider?');\n  }\n  return ctx;\n}\n"],"names":["createContext","useContext","useState","GanttTableContext","undefined","GanttTableProvider","props","children","collapsedSpans","setCollapsedSpans","visibleSpans","setVisibleSpans","hoveredParent","setHoveredParent","Provider","value","useGanttTableContext","ctx","Error"],"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,aAAa,EAAgBC,UAAU,EAAEC,QAAQ,QAAQ,QAAQ;AAY1E;;;;CAIC,GACD,OAAO,MAAMC,kCAAoBH,cAAiDI,WAAW;AAM7F,OAAO,SAASC,mBAAmBC,KAA8B;IAC/D,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAM,CAACE,gBAAgBC,kBAAkB,GAAGP,SAAmB,EAAE;IACjE,MAAM,CAACQ,cAAcC,gBAAgB,GAAGT,SAAmB,EAAE;IAC7D,MAAM,CAACU,eAAeC,iBAAiB,GAAGX,SAA6BE;IAEvE,qBACE,KAACD,kBAAkBW,QAAQ;QACzBC,OAAO;YAAEP;YAAgBC;YAAmBC;YAAcC;YAAiBC;YAAeC;QAAiB;kBAE1GN;;AAGP;AAEA,OAAO,SAASS;IACd,MAAMC,MAAMhB,WAAWE;IACvB,IAAIc,QAAQb,WAAW;QACrB,MAAM,IAAIc,MAAM;IAClB;IACA,OAAOD;AACT"}

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

@@ -0,0 +1,15 @@
+import { Viewport } from '../utils';
+import { TracingGanttChartOptions } from '../../gantt-chart-model';
+import { Span } from '../trace';
+interface GanttTableRowProps {
+    options: TracingGanttChartOptions;
+    span: Span;
+    viewport: Viewport;
+    selected?: boolean;
+    nameColumnWidth: number;
+    divider: React.ReactNode;
+    onClick: (span: Span) => void;
+}
+export declare const GanttTableRow: import("react").NamedExoticComponent<GanttTableRowProps>;
+export {};
+//# sourceMappingURL=GanttTableRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GanttTableRow.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/GanttTable/GanttTableRow.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,QAAQ,EAAa,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAIhC,UAAU,kBAAkB;IAC1B,OAAO,EAAE,wBAAwB,CAAC;IAClC,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,aAAa,0DAsBxB,CAAC"}