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

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 { Divider, Link, List, ListItem, ListItemText } from '@mui/material';\nimport { otlpcommonv1 } from '@perses-dev/core';\nimport { replaceVariablesInString, useAllVariableValues, useRouterContext } from '@perses-dev/plugin-system';\nimport { Span, Trace } from '../trace';\nimport { formatDuration } from '../utils';\nimport { CustomLinks } from '../../gantt-chart-model';\n\nexport interface TraceAttributesProps {\n  customLinks?: CustomLinks;\n  trace: Trace;\n  span: Span;\n}\n\nexport function TraceAttributes(props: TraceAttributesProps) {\n  const { customLinks, trace, span } = 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\n            customLinks={customLinks}\n            attributes={span.attributes.toSorted((a, b) => a.key.localeCompare(b.key))}\n          />\n          <Divider />\n        </>\n      )}\n      <AttributeList\n        customLinks={customLinks}\n        attributes={span.resource.attributes.toSorted((a, b) => a.key.localeCompare(b.key))}\n      />\n    </>\n  );\n}\n\nexport interface AttributeListProps {\n  customLinks?: CustomLinks;\n  attributes: otlpcommonv1.KeyValue[];\n}\n\nexport function AttributeList(props: AttributeListProps): ReactElement {\n  const { customLinks, attributes } = props;\n\n  return (\n    <List>\n      <AttributeItems customLinks={customLinks} attributes={attributes} />\n    </List>\n  );\n}\n\ninterface AttributeItemsProps {\n  customLinks?: CustomLinks;\n  attributes: otlpcommonv1.KeyValue[];\n}\n\nexport function AttributeItems(props: AttributeItemsProps): ReactElement {\n  const { customLinks, attributes } = props;\n  const variableValues = useAllVariableValues();\n\n  // turn array into map for fast access\n  const attributeLinks = useMemo(() => {\n    const attrs = (customLinks?.links.attributes ?? []).map((a) => [a.name, a.link]);\n    return Object.fromEntries(attrs);\n  }, [customLinks]);\n\n  // some links require access to other attributes, for example a pod link \"/namespace/${k8s_namespace_name}/pod/${k8s_pod_name}\"\n  const extraVariables = useMemo(() => {\n    // replace dot with underscore in attribute name, because dot is not allowed in variable names\n    const stringAttrs = attributes.map((attr) => [attr.key.replaceAll('.', '_'), renderAttributeValue(attr.value)]);\n\n    return {\n      ...customLinks?.variables,\n      ...Object.fromEntries(stringAttrs),\n    };\n  }, [customLinks, attributes]);\n\n  return (\n    <>\n      {attributes.map((attribute, i) => (\n        <AttributeItem\n          key={i}\n          name={attribute.key}\n          value={renderAttributeValue(attribute.value)}\n          link={\n            attributeLinks[attribute.key]\n              ? replaceVariablesInString(attributeLinks[attribute.key], variableValues, extraVariables)\n              : undefined\n          }\n        />\n      ))}\n    </>\n  );\n}\n\ninterface AttributeItemProps {\n  name: string;\n  value: string;\n  link?: string;\n}\n\nexport function AttributeItem(props: AttributeItemProps): ReactElement {\n  const { name, value, link } = props;\n  const { RouterComponent } = useRouterContext();\n\n  const valueComponent =\n    RouterComponent && link ? (\n      <Link component={RouterComponent} to={link}>\n        {value}\n      </Link>\n    ) : (\n      value\n    );\n\n  return (\n    <ListItem sx={{ px: 1, py: 0 }}>\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 || '<empty string>';\n  if ('intValue' in value) return value.intValue;\n  if ('doubleValue' in value) return String(value.doubleValue);\n  if ('boolValue' in value) return String(value.boolValue);\n  if ('arrayValue' in value) {\n    const values = value.arrayValue.values;\n    return values && values.length > 0 ? values.map(renderAttributeValue).join(', ') : '<empty array>';\n  }\n  return 'unknown';\n}\n"],"names":["useMemo","Divider","Link","List","ListItem","ListItemText","replaceVariablesInString","useAllVariableValues","useRouterContext","formatDuration","TraceAttributes","props","customLinks","trace","span","AttributeItem","name","value","spanId","startTimeUnixMs","endTimeUnixMs","attributes","length","AttributeList","toSorted","a","b","key","localeCompare","resource","AttributeItems","variableValues","attributeLinks","attrs","links","map","link","Object","fromEntries","extraVariables","stringAttrs","attr","replaceAll","renderAttributeValue","variables","attribute","i","undefined","RouterComponent","valueComponent","component","to","sx","px","py","primary","secondary","slotProps","variant","wordBreak","stringValue","intValue","String","doubleValue","boolValue","values","arrayValue","join"],"mappings":"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"}
+{"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 { otlpcommonv1 } from '@perses-dev/core';\nimport { replaceVariablesInString, useAllVariableValues, useRouterContext } from '@perses-dev/plugin-system';\nimport { Span, Trace } from '../trace';\nimport { formatDuration } from '../utils';\nimport { CustomLinks } from '../../gantt-chart-model';\n\nexport interface TraceAttributesProps {\n  customLinks?: CustomLinks;\n  trace: Trace;\n  span: Span;\n}\n\nexport function TraceAttributes(props: TraceAttributesProps) {\n  const { customLinks, trace, span } = 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\n            customLinks={customLinks}\n            attributes={span.attributes.toSorted((a, b) => a.key.localeCompare(b.key))}\n          />\n          <Divider />\n        </>\n      )}\n      <AttributeList\n        customLinks={customLinks}\n        attributes={span.resource.attributes.toSorted((a, b) => a.key.localeCompare(b.key))}\n      />\n    </>\n  );\n}\n\nexport interface AttributeListProps {\n  customLinks?: CustomLinks;\n  attributes: otlpcommonv1.KeyValue[];\n}\n\nexport function AttributeList(props: AttributeListProps): ReactElement {\n  const { customLinks, attributes } = props;\n\n  return (\n    <List>\n      <AttributeItems customLinks={customLinks} attributes={attributes} />\n    </List>\n  );\n}\n\ninterface AttributeItemsProps {\n  customLinks?: CustomLinks;\n  attributes: otlpcommonv1.KeyValue[];\n}\n\nexport function AttributeItems(props: AttributeItemsProps): ReactElement {\n  const { customLinks, attributes } = props;\n  const variableValues = useAllVariableValues();\n\n  // turn array into map for fast access\n  const attributeLinks = useMemo(() => {\n    const attrs = (customLinks?.links.attributes ?? []).map((a) => [a.name, a.link]);\n    return Object.fromEntries(attrs);\n  }, [customLinks]);\n\n  // some links require access to other attributes, for example a pod link \"/namespace/${k8s_namespace_name}/pod/${k8s_pod_name}\"\n  const extraVariables = useMemo(() => {\n    // replace dot with underscore in attribute name, because dot is not allowed in variable names\n    const stringAttrs = attributes.map((attr) => [attr.key.replaceAll('.', '_'), renderAttributeValue(attr.value)]);\n\n    return {\n      ...customLinks?.variables,\n      ...Object.fromEntries(stringAttrs),\n    };\n  }, [customLinks, attributes]);\n\n  return (\n    <>\n      {attributes.map((attribute, i) => (\n        <AttributeItem\n          key={i}\n          name={attribute.key}\n          value={renderAttributeValue(attribute.value)}\n          link={\n            attributeLinks[attribute.key]\n              ? replaceVariablesInString(attributeLinks[attribute.key], variableValues, extraVariables)\n              : undefined\n          }\n        />\n      ))}\n    </>\n  );\n}\n\ninterface AttributeItemProps {\n  name: string;\n  value: string;\n  link?: string;\n}\n\nexport function AttributeItem(props: AttributeItemProps): ReactElement {\n  const { name, value, link } = props;\n  const { RouterComponent } = useRouterContext();\n\n  const valueComponent =\n    RouterComponent && link ? (\n      <Link component={RouterComponent} to={link}>\n        {value}\n      </Link>\n    ) : (\n      value\n    );\n\n  return (\n    <ListItem sx={{ px: 1, py: 0 }}>\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 || '<empty string>';\n  if ('intValue' in value) return value.intValue;\n  if ('doubleValue' in value) return String(value.doubleValue);\n  if ('boolValue' in value) return String(value.boolValue);\n  if ('arrayValue' in value) {\n    const values = value.arrayValue.values;\n    return values && values.length > 0 ? values.map(renderAttributeValue).join(', ') : '<empty array>';\n  }\n  return 'unknown';\n}\n"],"names":["useMemo","Divider","Link","List","ListItem","ListItemText","replaceVariablesInString","useAllVariableValues","useRouterContext","formatDuration","TraceAttributes","props","customLinks","trace","span","AttributeItem","name","value","spanId","startTimeUnixMs","endTimeUnixMs","attributes","length","AttributeList","toSorted","a","b","key","localeCompare","resource","AttributeItems","variableValues","attributeLinks","attrs","links","map","link","Object","fromEntries","extraVariables","stringAttrs","attr","replaceAll","renderAttributeValue","variables","attribute","i","undefined","RouterComponent","valueComponent","component","to","sx","px","py","primary","secondary","slotProps","variant","wordBreak","stringValue","intValue","String","doubleValue","boolValue","values","arrayValue","join"],"mappings":"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"}

package/lib/TracingGanttChart/DetailPane/DetailPane.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Chip, IconButton, Tab, Tabs, Typography } from '@mui/material';
 import { useState } from 'react';
 import CloseIcon from 'mdi-material-ui/Close';

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, Chip, 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 { CustomLinks } from '../../gantt-chart-model';\nimport { TraceAttributes } from './Attributes';\nimport { SpanEventList } from './SpanEvents';\nimport { SpanLinkList } from './SpanLinks';\n\nexport interface DetailPaneProps {\n  customLinks?: CustomLinks;\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 { customLinks, trace, span, onCloseBtnClick } = props;\n  const [tab, setTab] = useState<'attributes' | 'events' | 'links'>('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  // same as above, but for span links\n  if (tab === 'links' && span.links.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)} variant=\"scrollable\">\n          <Tab sx={{ p: 0 }} value=\"attributes\" label=\"Attributes\" />\n          {span.events.length > 0 && (\n            <Tab\n              value=\"events\"\n              label=\"Events\"\n              icon={<Chip label={span.events.length} />}\n              iconPosition=\"end\"\n              sx={{ minHeight: 48, height: 48 }} // MUI Tabs with icon are bigger than those without by default\n            />\n          )}\n          {span.links.length > 0 && (\n            <Tab\n              value=\"links\"\n              label=\"Links\"\n              icon={<Chip label={span.links.length} />}\n              iconPosition=\"end\"\n              sx={{ minHeight: 48, height: 48 }} // MUI Tabs with icon are bigger than those without by default\n            />\n          )}\n        </Tabs>\n      </Box>\n      {tab === 'attributes' && <TraceAttributes customLinks={customLinks} trace={trace} span={span} />}\n      {tab === 'events' && <SpanEventList customLinks={customLinks} trace={trace} span={span} />}\n      {tab === 'links' && <SpanLinkList customLinks={customLinks} span={span} />}\n    </Box>\n  );\n}\n"],"names":["Box","Chip","IconButton","Tab","Tabs","Typography","useState","CloseIcon","TraceAttributes","SpanEventList","SpanLinkList","DetailPane","props","customLinks","trace","span","onCloseBtnClick","tab","setTab","events","length","links","sx","float","onClick","wordBreak","resource","serviceName","variant","name","borderBottom","borderColor","value","onChange","_","p","label","icon","iconPosition","minHeight","height"],"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,IAAI,EAAEC,UAAU,EAAEC,GAAG,EAAEC,IAAI,EAAEC,UAAU,QAAQ,gBAAgB;AAC7E,SAAuBC,QAAQ,QAAQ,QAAQ;AAC/C,OAAOC,eAAe,wBAAwB;AAG9C,SAASC,eAAe,QAAQ,eAAe;AAC/C,SAASC,aAAa,QAAQ,eAAe;AAC7C,SAASC,YAAY,QAAQ,cAAc;AAS3C;;CAEC,GACD,OAAO,SAASC,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,WAAW,EAAEC,KAAK,EAAEC,IAAI,EAAEC,eAAe,EAAE,GAAGJ;IACtD,MAAM,CAACK,KAAKC,OAAO,GAAGZ,SAA4C;IAElE,4EAA4E;IAC5E,yEAAyE;IACzE,IAAIW,QAAQ,YAAYF,KAAKI,MAAM,CAACC,MAAM,KAAK,GAAG;QAChDF,OAAO;IACT;IACA,oCAAoC;IACpC,IAAID,QAAQ,WAAWF,KAAKM,KAAK,CAACD,MAAM,KAAK,GAAG;QAC9CF,OAAO;IACT;IAEA,qBACE,MAAClB;;0BACC,KAACE;gBAAWoB,IAAI;oBAAEC,OAAO;gBAAQ;gBAAGC,SAASR;0BAC3C,cAAA,KAACT;;0BAEH,KAACF;gBAAWiB,IAAI;oBAAEG,WAAW;gBAAa;0BAAIV,KAAKW,QAAQ,CAACC,WAAW;;0BACvE,KAACtB;gBAAWuB,SAAQ;gBAAKN,IAAI;oBAAEG,WAAW;gBAAa;0BACpDV,KAAKc,IAAI;;0BAEZ,KAAC7B;gBAAIsB,IAAI;oBAAEQ,cAAc;oBAAGC,aAAa;gBAAU;0BACjD,cAAA,MAAC3B;oBAAK4B,OAAOf;oBAAKgB,UAAU,CAACC,GAAGjB,MAAQC,OAAOD;oBAAMW,SAAQ;;sCAC3D,KAACzB;4BAAImB,IAAI;gCAAEa,GAAG;4BAAE;4BAAGH,OAAM;4BAAaI,OAAM;;wBAC3CrB,KAAKI,MAAM,CAACC,MAAM,GAAG,mBACpB,KAACjB;4BACC6B,OAAM;4BACNI,OAAM;4BACNC,oBAAM,KAACpC;gCAAKmC,OAAOrB,KAAKI,MAAM,CAACC,MAAM;;4BACrCkB,cAAa;4BACbhB,IAAI;gCAAEiB,WAAW;gCAAIC,QAAQ;4BAAG;;wBAGnCzB,KAAKM,KAAK,CAACD,MAAM,GAAG,mBACnB,KAACjB;4BACC6B,OAAM;4BACNI,OAAM;4BACNC,oBAAM,KAACpC;gCAAKmC,OAAOrB,KAAKM,KAAK,CAACD,MAAM;;4BACpCkB,cAAa;4BACbhB,IAAI;gCAAEiB,WAAW;gCAAIC,QAAQ;4BAAG;;;;;YAKvCvB,QAAQ,8BAAgB,KAACT;gBAAgBK,aAAaA;gBAAaC,OAAOA;gBAAOC,MAAMA;;YACvFE,QAAQ,0BAAY,KAACR;gBAAcI,aAAaA;gBAAaC,OAAOA;gBAAOC,MAAMA;;YACjFE,QAAQ,yBAAW,KAACP;gBAAaG,aAAaA;gBAAaE,MAAMA;;;;AAGxE"}
+{"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, Chip, 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 { CustomLinks } from '../../gantt-chart-model';\nimport { TraceAttributes } from './Attributes';\nimport { SpanEventList } from './SpanEvents';\nimport { SpanLinkList } from './SpanLinks';\n\nexport interface DetailPaneProps {\n  customLinks?: CustomLinks;\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 { customLinks, trace, span, onCloseBtnClick } = props;\n  const [tab, setTab] = useState<'attributes' | 'events' | 'links'>('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  // same as above, but for span links\n  if (tab === 'links' && span.links.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)} variant=\"scrollable\">\n          <Tab sx={{ p: 0 }} value=\"attributes\" label=\"Attributes\" />\n          {span.events.length > 0 && (\n            <Tab\n              value=\"events\"\n              label=\"Events\"\n              icon={<Chip label={span.events.length} />}\n              iconPosition=\"end\"\n              sx={{ minHeight: 48, height: 48 }} // MUI Tabs with icon are bigger than those without by default\n            />\n          )}\n          {span.links.length > 0 && (\n            <Tab\n              value=\"links\"\n              label=\"Links\"\n              icon={<Chip label={span.links.length} />}\n              iconPosition=\"end\"\n              sx={{ minHeight: 48, height: 48 }} // MUI Tabs with icon are bigger than those without by default\n            />\n          )}\n        </Tabs>\n      </Box>\n      {tab === 'attributes' && <TraceAttributes customLinks={customLinks} trace={trace} span={span} />}\n      {tab === 'events' && <SpanEventList customLinks={customLinks} trace={trace} span={span} />}\n      {tab === 'links' && <SpanLinkList customLinks={customLinks} span={span} />}\n    </Box>\n  );\n}\n"],"names":["Box","Chip","IconButton","Tab","Tabs","Typography","useState","CloseIcon","TraceAttributes","SpanEventList","SpanLinkList","DetailPane","props","customLinks","trace","span","onCloseBtnClick","tab","setTab","events","length","links","sx","float","onClick","wordBreak","resource","serviceName","variant","name","borderBottom","borderColor","value","onChange","_","p","label","icon","iconPosition","minHeight","height"],"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,IAAI,EAAEC,UAAU,EAAEC,GAAG,EAAEC,IAAI,EAAEC,UAAU,QAAQ,gBAAgB;AAC7E,SAAuBC,QAAQ,QAAQ,QAAQ;AAC/C,OAAOC,eAAe,wBAAwB;AAG9C,SAASC,eAAe,QAAQ,eAAe;AAC/C,SAASC,aAAa,QAAQ,eAAe;AAC7C,SAASC,YAAY,QAAQ,cAAc;AAS3C;;CAEC,GACD,OAAO,SAASC,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,WAAW,EAAEC,KAAK,EAAEC,IAAI,EAAEC,eAAe,EAAE,GAAGJ;IACtD,MAAM,CAACK,KAAKC,OAAO,GAAGZ,SAA4C;IAElE,4EAA4E;IAC5E,yEAAyE;IACzE,IAAIW,QAAQ,YAAYF,KAAKI,MAAM,CAACC,MAAM,KAAK,GAAG;QAChDF,OAAO;IACT;IACA,oCAAoC;IACpC,IAAID,QAAQ,WAAWF,KAAKM,KAAK,CAACD,MAAM,KAAK,GAAG;QAC9CF,OAAO;IACT;IAEA,qBACE,MAAClB;;0BACC,KAACE;gBAAWoB,IAAI;oBAAEC,OAAO;gBAAQ;gBAAGC,SAASR;0BAC3C,cAAA,KAACT;;0BAEH,KAACF;gBAAWiB,IAAI;oBAAEG,WAAW;gBAAa;0BAAIV,KAAKW,QAAQ,CAACC,WAAW;;0BACvE,KAACtB;gBAAWuB,SAAQ;gBAAKN,IAAI;oBAAEG,WAAW;gBAAa;0BACpDV,KAAKc,IAAI;;0BAEZ,KAAC7B;gBAAIsB,IAAI;oBAAEQ,cAAc;oBAAGC,aAAa;gBAAU;0BACjD,cAAA,MAAC3B;oBAAK4B,OAAOf;oBAAKgB,UAAU,CAACC,GAAGjB,MAAQC,OAAOD;oBAAMW,SAAQ;;sCAC3D,KAACzB;4BAAImB,IAAI;gCAAEa,GAAG;4BAAE;4BAAGH,OAAM;4BAAaI,OAAM;;wBAC3CrB,KAAKI,MAAM,CAACC,MAAM,GAAG,mBACpB,KAACjB;4BACC6B,OAAM;4BACNI,OAAM;4BACNC,oBAAM,KAACpC;gCAAKmC,OAAOrB,KAAKI,MAAM,CAACC,MAAM;;4BACrCkB,cAAa;4BACbhB,IAAI;gCAAEiB,WAAW;gCAAIC,QAAQ;4BAAG;;wBAGnCzB,KAAKM,KAAK,CAACD,MAAM,GAAG,mBACnB,KAACjB;4BACC6B,OAAM;4BACNI,OAAM;4BACNC,oBAAM,KAACpC;gCAAKmC,OAAOrB,KAAKM,KAAK,CAACD,MAAM;;4BACpCkB,cAAa;4BACbhB,IAAI;gCAAEiB,WAAW;gCAAIC,QAAQ;4BAAG;;;;;YAKvCvB,QAAQ,8BAAgB,KAACT;gBAAgBK,aAAaA;gBAAaC,OAAOA;gBAAOC,MAAMA;;YACvFE,QAAQ,0BAAY,KAACR;gBAAcI,aAAaA;gBAAaC,OAAOA;gBAAOC,MAAMA;;YACjFE,QAAQ,yBAAW,KAACP;gBAAaG,aAAaA;gBAAaE,MAAMA;;;;AAGxE"}

package/lib/TracingGanttChart/DetailPane/SpanEvents.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Collapse, Divider, List, ListItemButton, ListItemText } from '@mui/material';
 import { Fragment, useState } from 'react';
 import ChevronUp from 'mdi-material-ui/ChevronUp';

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

@@ -1 +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 { Collapse, Divider, List, ListItemButton, ListItemText } from '@mui/material';\nimport { Fragment, ReactElement, useState } from 'react';\nimport ChevronUp from 'mdi-material-ui/ChevronUp';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport { formatDuration } from '../utils';\nimport { Trace, Span, Event } from '../trace';\nimport { CustomLinks } from '../../gantt-chart-model';\nimport { AttributeItems, AttributeItem } from './Attributes';\n\nexport interface SpanEventListProps {\n  customLinks?: CustomLinks;\n  trace: Trace;\n  span: Span;\n}\n\nexport function SpanEventList(props: SpanEventListProps): ReactElement {\n  const { customLinks, trace, span } = props;\n\n  return (\n    <>\n      {span.events\n        .sort((a, b) => a.timeUnixMs - b.timeUnixMs)\n        .map((event, i) => (\n          <Fragment key={i}>\n            {i > 0 && <Divider />}\n            <SpanEventItem customLinks={customLinks} trace={trace} event={event} />\n          </Fragment>\n        ))}\n    </>\n  );\n}\n\ninterface SpanEventItemProps {\n  customLinks?: CustomLinks;\n  trace: Trace;\n  event: Event;\n}\n\nfunction SpanEventItem(props: SpanEventItemProps): ReactElement {\n  const { customLinks, trace, event } = props;\n  const relativeTime = event.timeUnixMs - trace.startTimeUnixMs;\n\n  const [open, setOpen] = useState(false);\n  const handleClick = () => {\n    setOpen(!open);\n  };\n\n  return (\n    <List>\n      <ListItemButton onClick={handleClick} sx={{ px: 1 }}>\n        <ListItemText\n          primary={\n            <>\n              <strong>{formatDuration(relativeTime)}:</strong> {event.name}\n            </>\n          }\n          slotProps={{ primary: { noWrap: true } }}\n        />\n        {open ? <ChevronUp /> : <ChevronDown />}\n      </ListItemButton>\n      <Collapse in={open} timeout=\"auto\" unmountOnExit>\n        <List sx={{ px: 1 }}>\n          <AttributeItem name=\"name\" value={event.name} />\n          <AttributeItem name=\"time\" value={formatDuration(relativeTime)} />\n          <AttributeItems customLinks={customLinks} attributes={event.attributes} />\n        </List>\n      </Collapse>\n    </List>\n  );\n}\n"],"names":["Collapse","Divider","List","ListItemButton","ListItemText","Fragment","useState","ChevronUp","ChevronDown","formatDuration","AttributeItems","AttributeItem","SpanEventList","props","customLinks","trace","span","events","sort","a","b","timeUnixMs","map","event","i","SpanEventItem","relativeTime","startTimeUnixMs","open","setOpen","handleClick","onClick","sx","px","primary","strong","name","slotProps","noWrap","in","timeout","unmountOnExit","value","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,QAAQ,EAAEC,OAAO,EAAEC,IAAI,EAAEC,cAAc,EAAEC,YAAY,QAAQ,gBAAgB;AACtF,SAASC,QAAQ,EAAgBC,QAAQ,QAAQ,QAAQ;AACzD,OAAOC,eAAe,4BAA4B;AAClD,OAAOC,iBAAiB,8BAA8B;AACtD,SAASC,cAAc,QAAQ,WAAW;AAG1C,SAASC,cAAc,EAAEC,aAAa,QAAQ,eAAe;AAQ7D,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EAAEC,WAAW,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGH;IAErC,qBACE;kBACGG,KAAKC,MAAM,CACTC,IAAI,CAAC,CAACC,GAAGC,IAAMD,EAAEE,UAAU,GAAGD,EAAEC,UAAU,EAC1CC,GAAG,CAAC,CAACC,OAAOC,kBACX,MAACnB;;oBACEmB,IAAI,mBAAK,KAACvB;kCACX,KAACwB;wBAAcX,aAAaA;wBAAaC,OAAOA;wBAAOQ,OAAOA;;;eAFjDC;;AAOzB;AAQA,SAASC,cAAcZ,KAAyB;IAC9C,MAAM,EAAEC,WAAW,EAAEC,KAAK,EAAEQ,KAAK,EAAE,GAAGV;IACtC,MAAMa,eAAeH,MAAMF,UAAU,GAAGN,MAAMY,eAAe;IAE7D,MAAM,CAACC,MAAMC,QAAQ,GAAGvB,SAAS;IACjC,MAAMwB,cAAc;QAClBD,QAAQ,CAACD;IACX;IAEA,qBACE,MAAC1B;;0BACC,MAACC;gBAAe4B,SAASD;gBAAaE,IAAI;oBAAEC,IAAI;gBAAE;;kCAChD,KAAC7B;wBACC8B,uBACE;;8CACE,MAACC;;wCAAQ1B,eAAeiB;wCAAc;;;gCAAU;gCAAEH,MAAMa,IAAI;;;wBAGhEC,WAAW;4BAAEH,SAAS;gCAAEI,QAAQ;4BAAK;wBAAE;;oBAExCV,qBAAO,KAACrB,+BAAe,KAACC;;;0BAE3B,KAACR;gBAASuC,IAAIX;gBAAMY,SAAQ;gBAAOC,aAAa;0BAC9C,cAAA,MAACvC;oBAAK8B,IAAI;wBAAEC,IAAI;oBAAE;;sCAChB,KAACtB;4BAAcyB,MAAK;4BAAOM,OAAOnB,MAAMa,IAAI;;sCAC5C,KAACzB;4BAAcyB,MAAK;4BAAOM,OAAOjC,eAAeiB;;sCACjD,KAAChB;4BAAeI,aAAaA;4BAAa6B,YAAYpB,MAAMoB,UAAU;;;;;;;AAKhF"}
+{"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 { Collapse, Divider, List, ListItemButton, ListItemText } from '@mui/material';\nimport { Fragment, ReactElement, useState } from 'react';\nimport ChevronUp from 'mdi-material-ui/ChevronUp';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport { formatDuration } from '../utils';\nimport { Trace, Span, Event } from '../trace';\nimport { CustomLinks } from '../../gantt-chart-model';\nimport { AttributeItems, AttributeItem } from './Attributes';\n\nexport interface SpanEventListProps {\n  customLinks?: CustomLinks;\n  trace: Trace;\n  span: Span;\n}\n\nexport function SpanEventList(props: SpanEventListProps): ReactElement {\n  const { customLinks, trace, span } = props;\n\n  return (\n    <>\n      {span.events\n        .sort((a, b) => a.timeUnixMs - b.timeUnixMs)\n        .map((event, i) => (\n          <Fragment key={i}>\n            {i > 0 && <Divider />}\n            <SpanEventItem customLinks={customLinks} trace={trace} event={event} />\n          </Fragment>\n        ))}\n    </>\n  );\n}\n\ninterface SpanEventItemProps {\n  customLinks?: CustomLinks;\n  trace: Trace;\n  event: Event;\n}\n\nfunction SpanEventItem(props: SpanEventItemProps): ReactElement {\n  const { customLinks, trace, event } = props;\n  const relativeTime = event.timeUnixMs - trace.startTimeUnixMs;\n\n  const [open, setOpen] = useState(false);\n  const handleClick = () => {\n    setOpen(!open);\n  };\n\n  return (\n    <List>\n      <ListItemButton onClick={handleClick} sx={{ px: 1 }}>\n        <ListItemText\n          primary={\n            <>\n              <strong>{formatDuration(relativeTime)}:</strong> {event.name}\n            </>\n          }\n          slotProps={{ primary: { noWrap: true } }}\n        />\n        {open ? <ChevronUp /> : <ChevronDown />}\n      </ListItemButton>\n      <Collapse in={open} timeout=\"auto\" unmountOnExit>\n        <List sx={{ px: 1 }}>\n          <AttributeItem name=\"name\" value={event.name} />\n          <AttributeItem name=\"time\" value={formatDuration(relativeTime)} />\n          <AttributeItems customLinks={customLinks} attributes={event.attributes} />\n        </List>\n      </Collapse>\n    </List>\n  );\n}\n"],"names":["Collapse","Divider","List","ListItemButton","ListItemText","Fragment","useState","ChevronUp","ChevronDown","formatDuration","AttributeItems","AttributeItem","SpanEventList","props","customLinks","trace","span","events","sort","a","b","timeUnixMs","map","event","i","SpanEventItem","relativeTime","startTimeUnixMs","open","setOpen","handleClick","onClick","sx","px","primary","strong","name","slotProps","noWrap","in","timeout","unmountOnExit","value","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,QAAQ,EAAEC,OAAO,EAAEC,IAAI,EAAEC,cAAc,EAAEC,YAAY,QAAQ,gBAAgB;AACtF,SAASC,QAAQ,EAAgBC,QAAQ,QAAQ,QAAQ;AACzD,OAAOC,eAAe,4BAA4B;AAClD,OAAOC,iBAAiB,8BAA8B;AACtD,SAASC,cAAc,QAAQ,WAAW;AAG1C,SAASC,cAAc,EAAEC,aAAa,QAAQ,eAAe;AAQ7D,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EAAEC,WAAW,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGH;IAErC,qBACE;kBACGG,KAAKC,MAAM,CACTC,IAAI,CAAC,CAACC,GAAGC,IAAMD,EAAEE,UAAU,GAAGD,EAAEC,UAAU,EAC1CC,GAAG,CAAC,CAACC,OAAOC,kBACX,MAACnB;;oBACEmB,IAAI,mBAAK,KAACvB;kCACX,KAACwB;wBAAcX,aAAaA;wBAAaC,OAAOA;wBAAOQ,OAAOA;;;eAFjDC;;AAOzB;AAQA,SAASC,cAAcZ,KAAyB;IAC9C,MAAM,EAAEC,WAAW,EAAEC,KAAK,EAAEQ,KAAK,EAAE,GAAGV;IACtC,MAAMa,eAAeH,MAAMF,UAAU,GAAGN,MAAMY,eAAe;IAE7D,MAAM,CAACC,MAAMC,QAAQ,GAAGvB,SAAS;IACjC,MAAMwB,cAAc;QAClBD,QAAQ,CAACD;IACX;IAEA,qBACE,MAAC1B;;0BACC,MAACC;gBAAe4B,SAASD;gBAAaE,IAAI;oBAAEC,IAAI;gBAAE;;kCAChD,KAAC7B;wBACC8B,uBACE;;8CACE,MAACC;;wCAAQ1B,eAAeiB;wCAAc;;;gCAAU;gCAAEH,MAAMa,IAAI;;;wBAGhEC,WAAW;4BAAEH,SAAS;gCAAEI,QAAQ;4BAAK;wBAAE;;oBAExCV,qBAAO,KAACrB,+BAAe,KAACC;;;0BAE3B,KAACR;gBAASuC,IAAIX;gBAAMY,SAAQ;gBAAOC,aAAa;0BAC9C,cAAA,MAACvC;oBAAK8B,IAAI;wBAAEC,IAAI;oBAAE;;sCAChB,KAACtB;4BAAcyB,MAAK;4BAAOM,OAAOnB,MAAMa,IAAI;;sCAC5C,KAACzB;4BAAcyB,MAAK;4BAAOM,OAAOjC,eAAeiB;;sCACjD,KAAChB;4BAAeI,aAAaA;4BAAa6B,YAAYpB,MAAMoB,UAAU;;;;;;;AAKhF"}

package/lib/TracingGanttChart/DetailPane/SpanLinks.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright 2025 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Divider, List } from '@mui/material';
 import { Fragment } from 'react';
 import { replaceVariablesInString, useAllVariableValues } from '@perses-dev/plugin-system';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/DetailPane/SpanLinks.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 { Divider, List } from '@mui/material';\nimport { Fragment, ReactElement } from 'react';\nimport { replaceVariablesInString, useAllVariableValues } from '@perses-dev/plugin-system';\nimport { Span, Link } from '../trace';\nimport { CustomLinks } from '../../gantt-chart-model';\nimport { AttributeItem, AttributeItems } from './Attributes';\n\nexport interface SpanLinkListProps {\n  customLinks?: CustomLinks;\n  span: Span;\n}\n\nexport function SpanLinkList(props: SpanLinkListProps): ReactElement {\n  const { customLinks, span } = props;\n\n  return (\n    <>\n      {span.links.map((link, i) => (\n        <Fragment key={i}>\n          {i > 0 && <Divider />}\n          <SpanLinkItem link={link} customLinks={customLinks} />\n        </Fragment>\n      ))}\n    </>\n  );\n}\n\ninterface SpanLinkItemProps {\n  customLinks?: CustomLinks;\n  link: Link;\n}\n\nfunction SpanLinkItem(props: SpanLinkItemProps): ReactElement {\n  const { customLinks, link } = props;\n  const variableValues = useAllVariableValues();\n  const traceLink = customLinks?.links.trace\n    ? replaceVariablesInString(customLinks.links.trace, variableValues, {\n        ...customLinks?.variables,\n        traceId: link.traceId,\n      })\n    : undefined;\n  const spanLink = customLinks?.links.span\n    ? replaceVariablesInString(customLinks.links.span, variableValues, {\n        ...customLinks?.variables,\n        traceId: link.traceId,\n        spanId: link.spanId,\n      })\n    : undefined;\n\n  return (\n    <List>\n      <AttributeItem name=\"trace ID\" value={link.traceId} link={traceLink} />\n      <AttributeItem name=\"span ID\" value={link.spanId} link={spanLink} />\n      <AttributeItems customLinks={customLinks} attributes={link.attributes} />\n    </List>\n  );\n}\n"],"names":["Divider","List","Fragment","replaceVariablesInString","useAllVariableValues","AttributeItem","AttributeItems","SpanLinkList","props","customLinks","span","links","map","link","i","SpanLinkItem","variableValues","traceLink","trace","variables","traceId","undefined","spanLink","spanId","name","value","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,OAAO,EAAEC,IAAI,QAAQ,gBAAgB;AAC9C,SAASC,QAAQ,QAAsB,QAAQ;AAC/C,SAASC,wBAAwB,EAAEC,oBAAoB,QAAQ,4BAA4B;AAG3F,SAASC,aAAa,EAAEC,cAAc,QAAQ,eAAe;AAO7D,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,WAAW,EAAEC,IAAI,EAAE,GAAGF;IAE9B,qBACE;kBACGE,KAAKC,KAAK,CAACC,GAAG,CAAC,CAACC,MAAMC,kBACrB,MAACZ;;oBACEY,IAAI,mBAAK,KAACd;kCACX,KAACe;wBAAaF,MAAMA;wBAAMJ,aAAaA;;;eAF1BK;;AAOvB;AAOA,SAASC,aAAaP,KAAwB;IAC5C,MAAM,EAAEC,WAAW,EAAEI,IAAI,EAAE,GAAGL;IAC9B,MAAMQ,iBAAiBZ;IACvB,MAAMa,YAAYR,aAAaE,MAAMO,QACjCf,yBAAyBM,YAAYE,KAAK,CAACO,KAAK,EAAEF,gBAAgB;QAChE,GAAGP,aAAaU,SAAS;QACzBC,SAASP,KAAKO,OAAO;IACvB,KACAC;IACJ,MAAMC,WAAWb,aAAaE,MAAMD,OAChCP,yBAAyBM,YAAYE,KAAK,CAACD,IAAI,EAAEM,gBAAgB;QAC/D,GAAGP,aAAaU,SAAS;QACzBC,SAASP,KAAKO,OAAO;QACrBG,QAAQV,KAAKU,MAAM;IACrB,KACAF;IAEJ,qBACE,MAACpB;;0BACC,KAACI;gBAAcmB,MAAK;gBAAWC,OAAOZ,KAAKO,OAAO;gBAAEP,MAAMI;;0BAC1D,KAACZ;gBAAcmB,MAAK;gBAAUC,OAAOZ,KAAKU,MAAM;gBAAEV,MAAMS;;0BACxD,KAAChB;gBAAeG,aAAaA;gBAAaiB,YAAYb,KAAKa,UAAU;;;;AAG3E"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/DetailPane/SpanLinks.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 { Divider, List } from '@mui/material';\nimport { Fragment, ReactElement } from 'react';\nimport { replaceVariablesInString, useAllVariableValues } from '@perses-dev/plugin-system';\nimport { Span, Link } from '../trace';\nimport { CustomLinks } from '../../gantt-chart-model';\nimport { AttributeItem, AttributeItems } from './Attributes';\n\nexport interface SpanLinkListProps {\n  customLinks?: CustomLinks;\n  span: Span;\n}\n\nexport function SpanLinkList(props: SpanLinkListProps): ReactElement {\n  const { customLinks, span } = props;\n\n  return (\n    <>\n      {span.links.map((link, i) => (\n        <Fragment key={i}>\n          {i > 0 && <Divider />}\n          <SpanLinkItem link={link} customLinks={customLinks} />\n        </Fragment>\n      ))}\n    </>\n  );\n}\n\ninterface SpanLinkItemProps {\n  customLinks?: CustomLinks;\n  link: Link;\n}\n\nfunction SpanLinkItem(props: SpanLinkItemProps): ReactElement {\n  const { customLinks, link } = props;\n  const variableValues = useAllVariableValues();\n  const traceLink = customLinks?.links.trace\n    ? replaceVariablesInString(customLinks.links.trace, variableValues, {\n        ...customLinks?.variables,\n        traceId: link.traceId,\n      })\n    : undefined;\n  const spanLink = customLinks?.links.span\n    ? replaceVariablesInString(customLinks.links.span, variableValues, {\n        ...customLinks?.variables,\n        traceId: link.traceId,\n        spanId: link.spanId,\n      })\n    : undefined;\n\n  return (\n    <List>\n      <AttributeItem name=\"trace ID\" value={link.traceId} link={traceLink} />\n      <AttributeItem name=\"span ID\" value={link.spanId} link={spanLink} />\n      <AttributeItems customLinks={customLinks} attributes={link.attributes} />\n    </List>\n  );\n}\n"],"names":["Divider","List","Fragment","replaceVariablesInString","useAllVariableValues","AttributeItem","AttributeItems","SpanLinkList","props","customLinks","span","links","map","link","i","SpanLinkItem","variableValues","traceLink","trace","variables","traceId","undefined","spanLink","spanId","name","value","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,OAAO,EAAEC,IAAI,QAAQ,gBAAgB;AAC9C,SAASC,QAAQ,QAAsB,QAAQ;AAC/C,SAASC,wBAAwB,EAAEC,oBAAoB,QAAQ,4BAA4B;AAG3F,SAASC,aAAa,EAAEC,cAAc,QAAQ,eAAe;AAO7D,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,WAAW,EAAEC,IAAI,EAAE,GAAGF;IAE9B,qBACE;kBACGE,KAAKC,KAAK,CAACC,GAAG,CAAC,CAACC,MAAMC,kBACrB,MAACZ;;oBACEY,IAAI,mBAAK,KAACd;kCACX,KAACe;wBAAaF,MAAMA;wBAAMJ,aAAaA;;;eAF1BK;;AAOvB;AAOA,SAASC,aAAaP,KAAwB;IAC5C,MAAM,EAAEC,WAAW,EAAEI,IAAI,EAAE,GAAGL;IAC9B,MAAMQ,iBAAiBZ;IACvB,MAAMa,YAAYR,aAAaE,MAAMO,QACjCf,yBAAyBM,YAAYE,KAAK,CAACO,KAAK,EAAEF,gBAAgB;QAChE,GAAGP,aAAaU,SAAS;QACzBC,SAASP,KAAKO,OAAO;IACvB,KACAC;IACJ,MAAMC,WAAWb,aAAaE,MAAMD,OAChCP,yBAAyBM,YAAYE,KAAK,CAACD,IAAI,EAAEM,gBAAgB;QAC/D,GAAGP,aAAaU,SAAS;QACzBC,SAASP,KAAKO,OAAO;QACrBG,QAAQV,KAAKU,MAAM;IACrB,KACAF;IAEJ,qBACE,MAACpB;;0BACC,KAACI;gBAAcmB,MAAK;gBAAWC,OAAOZ,KAAKO,OAAO;gBAAEP,MAAMI;;0BAC1D,KAACZ;gBAAcmB,MAAK;gBAAUC,OAAOZ,KAAKU,MAAM;gBAAEV,MAAMS;;0BACxD,KAAChB;gBAAeG,aAAaA;gBAAaiB,YAAYb,KAAKa,UAAU;;;;AAG3E"}

package/lib/TracingGanttChart/GanttTable/GanttTable.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Virtuoso } from 'react-virtuoso';
 import { useMemo, useRef, useState } from 'react';
 import { Box, useTheme } from '@mui/material';

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

@@ -1 +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 { CustomLinks, 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  customLinks?: CustomLinks;\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, customLinks, 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 selectedSpanIndex = useMemo(() => {\n    if (!selectedSpan) return undefined;\n\n    for (let i = 0; i < rows.length; i++) {\n      if (rows[i]?.spanId === selectedSpan.spanId) {\n        return i;\n      }\n    }\n    return undefined;\n  }, [rows, selectedSpan]);\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        initialTopMostItemIndex={selectedSpanIndex ?? 0}\n        itemContent={(_, span) => (\n          <GanttTableRow\n            options={options}\n            customLinks={customLinks}\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","customLinks","trace","viewport","selectedSpan","onSpanClick","collapsedSpans","setVisibleSpans","nameColumnWidth","setNameColumnWidth","tableRef","theme","rows","rootSpan","rootSpans","treeToRows","selectedSpanIndex","undefined","i","length","spanId","divider","parentRef","onMove","handleRangeChange","startIndex","endIndex","visibleSpans","push","ref","sx","display","flexDirection","flexGrow","border","palette","borderRadius","shape","data","initialTopMostItemIndex","itemContent","_","span","selected","onClick","rangeChanged","includes","child","childSpans"],"mappings":"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"}
+{"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 { CustomLinks, 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  customLinks?: CustomLinks;\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, customLinks, 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 selectedSpanIndex = useMemo(() => {\n    if (!selectedSpan) return undefined;\n\n    for (let i = 0; i < rows.length; i++) {\n      if (rows[i]?.spanId === selectedSpan.spanId) {\n        return i;\n      }\n    }\n    return undefined;\n  }, [rows, selectedSpan]);\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        initialTopMostItemIndex={selectedSpanIndex ?? 0}\n        itemContent={(_, span) => (\n          <GanttTableRow\n            options={options}\n            customLinks={customLinks}\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","customLinks","trace","viewport","selectedSpan","onSpanClick","collapsedSpans","setVisibleSpans","nameColumnWidth","setNameColumnWidth","tableRef","theme","rows","rootSpan","rootSpans","treeToRows","selectedSpanIndex","undefined","i","length","spanId","divider","parentRef","onMove","handleRangeChange","startIndex","endIndex","visibleSpans","push","ref","sx","display","flexDirection","flexGrow","border","palette","borderRadius","shape","data","initialTopMostItemIndex","itemContent","_","span","selected","onClick","rangeChanged","includes","child","childSpans"],"mappings":"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"}

package/lib/TracingGanttChart/GanttTable/GanttTableHeader.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Stack, useTheme } from '@mui/material';
 import { rowHeight } from '../utils';
 import { TicksHeader } from '../Ticks';

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

@@ -1 +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"}
+{"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.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useState } from 'react';
 /**
  * GanttTableContext stores UI state of the rows.

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

@@ -1 +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"}
+{"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.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack, styled, useTheme } from '@mui/material';
 import { memo } from 'react';
 import { rowHeight } from '../utils';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/GanttTableRow.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 { Stack, styled, useTheme } from '@mui/material';\nimport { memo } from 'react';\nimport { Viewport, rowHeight } from '../utils';\nimport { CustomLinks, TracingGanttChartOptions } from '../../gantt-chart-model';\nimport { Span } from '../trace';\nimport { SpanName } from './SpanName';\nimport { SpanDuration } from './SpanDuration';\n\ninterface GanttTableRowProps {\n  options: TracingGanttChartOptions;\n  customLinks?: CustomLinks;\n  span: Span;\n  viewport: Viewport;\n  selected?: boolean;\n  nameColumnWidth: number;\n  divider: React.ReactNode;\n  onClick: (span: Span) => void;\n}\n\nexport const GanttTableRow = memo(function GanttTableRow(props: GanttTableRowProps) {\n  const { options, customLinks, span, viewport, selected, nameColumnWidth, divider, onClick } = props;\n  const theme = useTheme();\n\n  const handleOnClick = (): void => {\n    // ignore event if triggered by selecting text\n    if (document.getSelection()?.type === 'Range') return;\n\n    onClick(span);\n  };\n\n  return (\n    <RowContainer\n      sx={{ backgroundColor: selected ? theme.palette.action.selected : 'inherit' }}\n      direction=\"row\"\n      onClick={handleOnClick}\n    >\n      <SpanName customLinks={customLinks} span={span} nameColumnWidth={nameColumnWidth} />\n      {divider}\n      <SpanDuration options={options} span={span} viewport={viewport} />\n    </RowContainer>\n  );\n});\n\nconst RowContainer = styled(Stack)(({ theme }) => ({\n  height: rowHeight,\n  '&:hover': {\n    backgroundColor: theme.palette.action.hover,\n    borderTop: `1px solid ${theme.palette.divider}`,\n    borderBottom: `1px solid ${theme.palette.divider}`,\n  },\n}));\n"],"names":["Stack","styled","useTheme","memo","rowHeight","SpanName","SpanDuration","GanttTableRow","props","options","customLinks","span","viewport","selected","nameColumnWidth","divider","onClick","theme","handleOnClick","document","getSelection","type","RowContainer","sx","backgroundColor","palette","action","direction","height","hover","borderTop","borderBottom"],"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,MAAM,EAAEC,QAAQ,QAAQ,gBAAgB;AACxD,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAAmBC,SAAS,QAAQ,WAAW;AAG/C,SAASC,QAAQ,QAAQ,aAAa;AACtC,SAASC,YAAY,QAAQ,iBAAiB;AAa9C,OAAO,MAAMC,8BAAgBJ,KAAK,SAASI,cAAcC,KAAyB;IAChF,MAAM,EAAEC,OAAO,EAAEC,WAAW,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGR;IAC9F,MAAMS,QAAQf;IAEd,MAAMgB,gBAAgB;QACpB,8CAA8C;QAC9C,IAAIC,SAASC,YAAY,IAAIC,SAAS,SAAS;QAE/CL,QAAQL;IACV;IAEA,qBACE,MAACW;QACCC,IAAI;YAAEC,iBAAiBX,WAAWI,MAAMQ,OAAO,CAACC,MAAM,CAACb,QAAQ,GAAG;QAAU;QAC5Ec,WAAU;QACVX,SAASE;;0BAET,KAACb;gBAASK,aAAaA;gBAAaC,MAAMA;gBAAMG,iBAAiBA;;YAChEC;0BACD,KAACT;gBAAaG,SAASA;gBAASE,MAAMA;gBAAMC,UAAUA;;;;AAG5D,GAAG;AAEH,MAAMU,eAAerB,OAAOD,OAAO,CAAC,EAAEiB,KAAK,EAAE,GAAM,CAAA;QACjDW,QAAQxB;QACR,WAAW;YACToB,iBAAiBP,MAAMQ,OAAO,CAACC,MAAM,CAACG,KAAK;YAC3CC,WAAW,CAAC,UAAU,EAAEb,MAAMQ,OAAO,CAACV,OAAO,EAAE;YAC/CgB,cAAc,CAAC,UAAU,EAAEd,MAAMQ,OAAO,CAACV,OAAO,EAAE;QACpD;IACF,CAAA"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/GanttTableRow.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 { Stack, styled, useTheme } from '@mui/material';\nimport { memo } from 'react';\nimport { Viewport, rowHeight } from '../utils';\nimport { CustomLinks, TracingGanttChartOptions } from '../../gantt-chart-model';\nimport { Span } from '../trace';\nimport { SpanName } from './SpanName';\nimport { SpanDuration } from './SpanDuration';\n\ninterface GanttTableRowProps {\n  options: TracingGanttChartOptions;\n  customLinks?: CustomLinks;\n  span: Span;\n  viewport: Viewport;\n  selected?: boolean;\n  nameColumnWidth: number;\n  divider: React.ReactNode;\n  onClick: (span: Span) => void;\n}\n\nexport const GanttTableRow = memo(function GanttTableRow(props: GanttTableRowProps) {\n  const { options, customLinks, span, viewport, selected, nameColumnWidth, divider, onClick } = props;\n  const theme = useTheme();\n\n  const handleOnClick = (): void => {\n    // ignore event if triggered by selecting text\n    if (document.getSelection()?.type === 'Range') return;\n\n    onClick(span);\n  };\n\n  return (\n    <RowContainer\n      sx={{ backgroundColor: selected ? theme.palette.action.selected : 'inherit' }}\n      direction=\"row\"\n      onClick={handleOnClick}\n    >\n      <SpanName customLinks={customLinks} span={span} nameColumnWidth={nameColumnWidth} />\n      {divider}\n      <SpanDuration options={options} span={span} viewport={viewport} />\n    </RowContainer>\n  );\n});\n\nconst RowContainer = styled(Stack)(({ theme }) => ({\n  height: rowHeight,\n  '&:hover': {\n    backgroundColor: theme.palette.action.hover,\n    borderTop: `1px solid ${theme.palette.divider}`,\n    borderBottom: `1px solid ${theme.palette.divider}`,\n  },\n}));\n"],"names":["Stack","styled","useTheme","memo","rowHeight","SpanName","SpanDuration","GanttTableRow","props","options","customLinks","span","viewport","selected","nameColumnWidth","divider","onClick","theme","handleOnClick","document","getSelection","type","RowContainer","sx","backgroundColor","palette","action","direction","height","hover","borderTop","borderBottom"],"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,MAAM,EAAEC,QAAQ,QAAQ,gBAAgB;AACxD,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAAmBC,SAAS,QAAQ,WAAW;AAG/C,SAASC,QAAQ,QAAQ,aAAa;AACtC,SAASC,YAAY,QAAQ,iBAAiB;AAa9C,OAAO,MAAMC,8BAAgBJ,KAAK,SAASI,cAAcC,KAAyB;IAChF,MAAM,EAAEC,OAAO,EAAEC,WAAW,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGR;IAC9F,MAAMS,QAAQf;IAEd,MAAMgB,gBAAgB;QACpB,8CAA8C;QAC9C,IAAIC,SAASC,YAAY,IAAIC,SAAS,SAAS;QAE/CL,QAAQL;IACV;IAEA,qBACE,MAACW;QACCC,IAAI;YAAEC,iBAAiBX,WAAWI,MAAMQ,OAAO,CAACC,MAAM,CAACb,QAAQ,GAAG;QAAU;QAC5Ec,WAAU;QACVX,SAASE;;0BAET,KAACb;gBAASK,aAAaA;gBAAaC,MAAMA;gBAAMG,iBAAiBA;;YAChEC;0BACD,KAACT;gBAAaG,SAASA;gBAASE,MAAMA;gBAAMC,UAAUA;;;;AAG5D,GAAG;AAEH,MAAMU,eAAerB,OAAOD,OAAO,CAAC,EAAEiB,KAAK,EAAE,GAAM,CAAA;QACjDW,QAAQxB;QACR,WAAW;YACToB,iBAAiBP,MAAMQ,OAAO,CAACC,MAAM,CAACG,KAAK;YAC3CC,WAAW,CAAC,UAAU,EAAEb,MAAMQ,OAAO,CAACV,OAAO,EAAE;YAC/CgB,cAAc,CAAC,UAAU,EAAEd,MAAMQ,OAAO,CAACV,OAAO,EAAE;QACpD;IACF,CAAA"}

package/lib/TracingGanttChart/GanttTable/ResizableDivider.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Box, styled } from '@mui/material';
 import { useEvent } from '@perses-dev/plugin-system';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/ResizableDivider.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 { MouseEvent as ReactMouseEvent, ReactElement, useEffect, useState } from 'react';\nimport { Box, styled } from '@mui/material';\nimport { useEvent } from '@perses-dev/plugin-system';\n\ninterface ResizableDividerProps {\n  parentRef: React.RefObject<Element>;\n  spacing?: number;\n  onMove: (left: number) => void;\n}\n\nexport function ResizableDivider(props: ResizableDividerProps): ReactElement {\n  const { parentRef, spacing = 0, onMove } = props;\n  const [isResizing, setResizing] = useState(false);\n\n  const handleMouseDown = (e: ReactMouseEvent): void => {\n    // disable any default actions (text selection, etc.)\n    e.preventDefault();\n\n    setResizing(true);\n  };\n\n  // need stable reference for window.removeEventListener() in useEffect() below\n  const handleMouseMove = useEvent((e: MouseEvent) => {\n    if (!parentRef.current) return;\n\n    const offsetX = e.clientX - parentRef.current.getBoundingClientRect().left + spacing;\n    const leftPercent = offsetX / parentRef.current.getBoundingClientRect().width;\n\n    if (0.05 <= leftPercent && leftPercent <= 0.95) {\n      onMove(leftPercent);\n    }\n  });\n\n  // need stable reference for window.removeEventListener() in useEffect() below\n  const handleMouseUp = useEvent(() => {\n    setResizing(false);\n  });\n\n  // capture mouseMove and mouseUp outside the element by attaching them to the window object\n  useEffect(() => {\n    function startMouseAction(): void {\n      window.addEventListener('mousemove', handleMouseMove);\n      window.addEventListener('mouseup', handleMouseUp);\n      document.body.style.cursor = 'col-resize';\n    }\n\n    function stopMouseAction(): void {\n      window.removeEventListener('mousemove', handleMouseMove);\n      window.removeEventListener('mouseup', handleMouseUp);\n      document.body.style.cursor = 'inherit';\n    }\n\n    if (isResizing) {\n      startMouseAction();\n    } else {\n      stopMouseAction();\n    }\n\n    return stopMouseAction;\n  }, [isResizing, handleMouseMove, handleMouseUp]);\n\n  // prevent onClick event when clicking on a divider\n  const stopEventPropagation = (e: ReactMouseEvent): void => e.stopPropagation();\n\n  return <ResizableDividerBox onMouseDown={handleMouseDown} onClick={stopEventPropagation} />;\n}\n\nconst ResizableDividerBox = styled(Box)(({ theme }) => ({\n  position: 'relative',\n  width: '1px',\n  height: '100%',\n  backgroundColor: theme.palette.divider,\n  cursor: 'col-resize',\n\n  // increase clickable area from 1px to 7px\n  '&:before': {\n    position: 'absolute',\n    width: '7px',\n    left: '-3px',\n    top: 0,\n    bottom: 0,\n    content: '\" \"',\n    zIndex: 1, // without zIndex, the span duration row hides the right side of this element\n  },\n}));\n"],"names":["useEffect","useState","Box","styled","useEvent","ResizableDivider","props","parentRef","spacing","onMove","isResizing","setResizing","handleMouseDown","e","preventDefault","handleMouseMove","current","offsetX","clientX","getBoundingClientRect","left","leftPercent","width","handleMouseUp","startMouseAction","window","addEventListener","document","body","style","cursor","stopMouseAction","removeEventListener","stopEventPropagation","stopPropagation","ResizableDividerBox","onMouseDown","onClick","theme","position","height","backgroundColor","palette","divider","top","bottom","content","zIndex"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAsDA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AACzF,SAASC,GAAG,EAAEC,MAAM,QAAQ,gBAAgB;AAC5C,SAASC,QAAQ,QAAQ,4BAA4B;AAQrD,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EAAEC,SAAS,EAAEC,UAAU,CAAC,EAAEC,MAAM,EAAE,GAAGH;IAC3C,MAAM,CAACI,YAAYC,YAAY,GAAGV,SAAS;IAE3C,MAAMW,kBAAkB,CAACC;QACvB,qDAAqD;QACrDA,EAAEC,cAAc;QAEhBH,YAAY;IACd;IAEA,8EAA8E;IAC9E,MAAMI,kBAAkBX,SAAS,CAACS;QAChC,IAAI,CAACN,UAAUS,OAAO,EAAE;QAExB,MAAMC,UAAUJ,EAAEK,OAAO,GAAGX,UAAUS,OAAO,CAACG,qBAAqB,GAAGC,IAAI,GAAGZ;QAC7E,MAAMa,cAAcJ,UAAUV,UAAUS,OAAO,CAACG,qBAAqB,GAAGG,KAAK;QAE7E,IAAI,QAAQD,eAAeA,eAAe,MAAM;YAC9CZ,OAAOY;QACT;IACF;IAEA,8EAA8E;IAC9E,MAAME,gBAAgBnB,SAAS;QAC7BO,YAAY;IACd;IAEA,2FAA2F;IAC3FX,UAAU;QACR,SAASwB;YACPC,OAAOC,gBAAgB,CAAC,aAAaX;YACrCU,OAAOC,gBAAgB,CAAC,WAAWH;YACnCI,SAASC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG;QAC/B;QAEA,SAASC;YACPN,OAAOO,mBAAmB,CAAC,aAAajB;YACxCU,OAAOO,mBAAmB,CAAC,WAAWT;YACtCI,SAASC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG;QAC/B;QAEA,IAAIpB,YAAY;YACdc;QACF,OAAO;YACLO;QACF;QAEA,OAAOA;IACT,GAAG;QAACrB;QAAYK;QAAiBQ;KAAc;IAE/C,mDAAmD;IACnD,MAAMU,uBAAuB,CAACpB,IAA6BA,EAAEqB,eAAe;IAE5E,qBAAO,KAACC;QAAoBC,aAAaxB;QAAiByB,SAASJ;;AACrE;AAEA,MAAME,sBAAsBhC,OAAOD,KAAK,CAAC,EAAEoC,KAAK,EAAE,GAAM,CAAA;QACtDC,UAAU;QACVjB,OAAO;QACPkB,QAAQ;QACRC,iBAAiBH,MAAMI,OAAO,CAACC,OAAO;QACtCb,QAAQ;QAER,0CAA0C;QAC1C,YAAY;YACVS,UAAU;YACVjB,OAAO;YACPF,MAAM;YACNwB,KAAK;YACLC,QAAQ;YACRC,SAAS;YACTC,QAAQ;QACV;IACF,CAAA"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/ResizableDivider.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 { MouseEvent as ReactMouseEvent, ReactElement, useEffect, useState } from 'react';\nimport { Box, styled } from '@mui/material';\nimport { useEvent } from '@perses-dev/plugin-system';\n\ninterface ResizableDividerProps {\n  parentRef: React.RefObject<Element>;\n  spacing?: number;\n  onMove: (left: number) => void;\n}\n\nexport function ResizableDivider(props: ResizableDividerProps): ReactElement {\n  const { parentRef, spacing = 0, onMove } = props;\n  const [isResizing, setResizing] = useState(false);\n\n  const handleMouseDown = (e: ReactMouseEvent): void => {\n    // disable any default actions (text selection, etc.)\n    e.preventDefault();\n\n    setResizing(true);\n  };\n\n  // need stable reference for window.removeEventListener() in useEffect() below\n  const handleMouseMove = useEvent((e: MouseEvent) => {\n    if (!parentRef.current) return;\n\n    const offsetX = e.clientX - parentRef.current.getBoundingClientRect().left + spacing;\n    const leftPercent = offsetX / parentRef.current.getBoundingClientRect().width;\n\n    if (0.05 <= leftPercent && leftPercent <= 0.95) {\n      onMove(leftPercent);\n    }\n  });\n\n  // need stable reference for window.removeEventListener() in useEffect() below\n  const handleMouseUp = useEvent(() => {\n    setResizing(false);\n  });\n\n  // capture mouseMove and mouseUp outside the element by attaching them to the window object\n  useEffect(() => {\n    function startMouseAction(): void {\n      window.addEventListener('mousemove', handleMouseMove);\n      window.addEventListener('mouseup', handleMouseUp);\n      document.body.style.cursor = 'col-resize';\n    }\n\n    function stopMouseAction(): void {\n      window.removeEventListener('mousemove', handleMouseMove);\n      window.removeEventListener('mouseup', handleMouseUp);\n      document.body.style.cursor = 'inherit';\n    }\n\n    if (isResizing) {\n      startMouseAction();\n    } else {\n      stopMouseAction();\n    }\n\n    return stopMouseAction;\n  }, [isResizing, handleMouseMove, handleMouseUp]);\n\n  // prevent onClick event when clicking on a divider\n  const stopEventPropagation = (e: ReactMouseEvent): void => e.stopPropagation();\n\n  return <ResizableDividerBox onMouseDown={handleMouseDown} onClick={stopEventPropagation} />;\n}\n\nconst ResizableDividerBox = styled(Box)(({ theme }) => ({\n  position: 'relative',\n  width: '1px',\n  height: '100%',\n  backgroundColor: theme.palette.divider,\n  cursor: 'col-resize',\n\n  // increase clickable area from 1px to 7px\n  '&:before': {\n    position: 'absolute',\n    width: '7px',\n    left: '-3px',\n    top: 0,\n    bottom: 0,\n    content: '\" \"',\n    zIndex: 1, // without zIndex, the span duration row hides the right side of this element\n  },\n}));\n"],"names":["useEffect","useState","Box","styled","useEvent","ResizableDivider","props","parentRef","spacing","onMove","isResizing","setResizing","handleMouseDown","e","preventDefault","handleMouseMove","current","offsetX","clientX","getBoundingClientRect","left","leftPercent","width","handleMouseUp","startMouseAction","window","addEventListener","document","body","style","cursor","stopMouseAction","removeEventListener","stopEventPropagation","stopPropagation","ResizableDividerBox","onMouseDown","onClick","theme","position","height","backgroundColor","palette","divider","top","bottom","content","zIndex"],"mappings":";AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAAsDA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AACzF,SAASC,GAAG,EAAEC,MAAM,QAAQ,gBAAgB;AAC5C,SAASC,QAAQ,QAAQ,4BAA4B;AAQrD,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EAAEC,SAAS,EAAEC,UAAU,CAAC,EAAEC,MAAM,EAAE,GAAGH;IAC3C,MAAM,CAACI,YAAYC,YAAY,GAAGV,SAAS;IAE3C,MAAMW,kBAAkB,CAACC;QACvB,qDAAqD;QACrDA,EAAEC,cAAc;QAEhBH,YAAY;IACd;IAEA,8EAA8E;IAC9E,MAAMI,kBAAkBX,SAAS,CAACS;QAChC,IAAI,CAACN,UAAUS,OAAO,EAAE;QAExB,MAAMC,UAAUJ,EAAEK,OAAO,GAAGX,UAAUS,OAAO,CAACG,qBAAqB,GAAGC,IAAI,GAAGZ;QAC7E,MAAMa,cAAcJ,UAAUV,UAAUS,OAAO,CAACG,qBAAqB,GAAGG,KAAK;QAE7E,IAAI,QAAQD,eAAeA,eAAe,MAAM;YAC9CZ,OAAOY;QACT;IACF;IAEA,8EAA8E;IAC9E,MAAME,gBAAgBnB,SAAS;QAC7BO,YAAY;IACd;IAEA,2FAA2F;IAC3FX,UAAU;QACR,SAASwB;YACPC,OAAOC,gBAAgB,CAAC,aAAaX;YACrCU,OAAOC,gBAAgB,CAAC,WAAWH;YACnCI,SAASC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG;QAC/B;QAEA,SAASC;YACPN,OAAOO,mBAAmB,CAAC,aAAajB;YACxCU,OAAOO,mBAAmB,CAAC,WAAWT;YACtCI,SAASC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG;QAC/B;QAEA,IAAIpB,YAAY;YACdc;QACF,OAAO;YACLO;QACF;QAEA,OAAOA;IACT,GAAG;QAACrB;QAAYK;QAAiBQ;KAAc;IAE/C,mDAAmD;IACnD,MAAMU,uBAAuB,CAACpB,IAA6BA,EAAEqB,eAAe;IAE5E,qBAAO,KAACC;QAAoBC,aAAaxB;QAAiByB,SAASJ;;AACrE;AAEA,MAAME,sBAAsBhC,OAAOD,KAAK,CAAC,EAAEoC,KAAK,EAAE,GAAM,CAAA;QACtDC,UAAU;QACVjB,OAAO;QACPkB,QAAQ;QACRC,iBAAiBH,MAAMI,OAAO,CAACC,OAAO;QACtCb,QAAQ;QAER,0CAA0C;QAC1C,YAAY;YACVS,UAAU;YACVjB,OAAO;YACPF,MAAM;YACNwB,KAAK;YACLC,QAAQ;YACRC,SAAS;YACTC,QAAQ;QACV;IACF,CAAA"}

package/lib/TracingGanttChart/GanttTable/SpanDuration.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, useTheme } from '@mui/material';
 import { useChartsTheme } from '@perses-dev/components';
 import { formatDuration, getSpanColor, minSpanWidthPx } from '../utils';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/SpanDuration.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, useTheme } from '@mui/material';\nimport { useChartsTheme } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { Viewport, formatDuration, getSpanColor, minSpanWidthPx } from '../utils';\nimport { Ticks } from '../Ticks';\nimport { TracingGanttChartOptions } from '../../gantt-chart-model';\nimport { Span } from '../trace';\n\nexport interface SpanDurationProps {\n  options: TracingGanttChartOptions;\n  span: Span;\n  viewport: Viewport;\n}\n\n/**\n * SpanDuration renders the right column of a SpanRow, i.e. the span bar and span duration\n */\nexport function SpanDuration(props: SpanDurationProps): ReactElement {\n  const { options, span, viewport } = props;\n  const muiTheme = useTheme();\n  const chartsTheme = useChartsTheme();\n\n  const spanDuration = span.endTimeUnixMs - span.startTimeUnixMs;\n  const viewportDuration = viewport.endTimeUnixMs - viewport.startTimeUnixMs;\n  const relativeDuration = spanDuration / viewportDuration;\n  const relativeStart = (span.startTimeUnixMs - viewport.startTimeUnixMs) / viewportDuration;\n\n  return (\n    <Box sx={{ position: 'relative', height: '100%', flexGrow: 1, overflow: 'hidden' }}>\n      <Ticks />\n      <Box\n        data-testid=\"span-duration-bar\"\n        sx={{\n          position: 'absolute',\n          top: 0,\n          bottom: 0,\n          margin: 'auto',\n          minWidth: `${minSpanWidthPx}px`,\n          height: '8px',\n          borderRadius: muiTheme.shape.borderRadius,\n        }}\n        style={{\n          left: `${relativeStart * 100}%`,\n          width: `${relativeDuration * 100}%`,\n          backgroundColor: getSpanColor(muiTheme, chartsTheme, options.visual?.palette?.mode, span),\n        }}\n      />\n      <Box\n        sx={{\n          position: 'absolute',\n          top: '50%',\n          transform: 'translateY(-50%)',\n          padding: '0 8px',\n          color: muiTheme.palette.grey[700],\n          fontSize: '.7rem',\n        }}\n        style={\n          /* print span duration on right side of the span bar, if there is space */\n          relativeStart + relativeDuration < 0.95\n            ? {\n                left: `${(relativeStart + relativeDuration) * 100}%`,\n              }\n            : {\n                left: `${relativeStart * 100}%`,\n                transform: 'translateY(-50%) translateX(-100%)',\n              }\n        }\n      >\n        {formatDuration(spanDuration)}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["Box","useTheme","useChartsTheme","formatDuration","getSpanColor","minSpanWidthPx","Ticks","SpanDuration","props","options","span","viewport","muiTheme","chartsTheme","spanDuration","endTimeUnixMs","startTimeUnixMs","viewportDuration","relativeDuration","relativeStart","sx","position","height","flexGrow","overflow","data-testid","top","bottom","margin","minWidth","borderRadius","shape","style","left","width","backgroundColor","visual","palette","mode","transform","padding","color","grey","fontSize"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AAC9C,SAASC,cAAc,QAAQ,yBAAyB;AAExD,SAAmBC,cAAc,EAAEC,YAAY,EAAEC,cAAc,QAAQ,WAAW;AAClF,SAASC,KAAK,QAAQ,WAAW;AAUjC;;CAEC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGH;IACpC,MAAMI,WAAWX;IACjB,MAAMY,cAAcX;IAEpB,MAAMY,eAAeJ,KAAKK,aAAa,GAAGL,KAAKM,eAAe;IAC9D,MAAMC,mBAAmBN,SAASI,aAAa,GAAGJ,SAASK,eAAe;IAC1E,MAAME,mBAAmBJ,eAAeG;IACxC,MAAME,gBAAgB,AAACT,CAAAA,KAAKM,eAAe,GAAGL,SAASK,eAAe,AAAD,IAAKC;IAE1E,qBACE,MAACjB;QAAIoB,IAAI;YAAEC,UAAU;YAAYC,QAAQ;YAAQC,UAAU;YAAGC,UAAU;QAAS;;0BAC/E,KAAClB;0BACD,KAACN;gBACCyB,eAAY;gBACZL,IAAI;oBACFC,UAAU;oBACVK,KAAK;oBACLC,QAAQ;oBACRC,QAAQ;oBACRC,UAAU,GAAGxB,eAAe,EAAE,CAAC;oBAC/BiB,QAAQ;oBACRQ,cAAclB,SAASmB,KAAK,CAACD,YAAY;gBAC3C;gBACAE,OAAO;oBACLC,MAAM,GAAGd,gBAAgB,IAAI,CAAC,CAAC;oBAC/Be,OAAO,GAAGhB,mBAAmB,IAAI,CAAC,CAAC;oBACnCiB,iBAAiB/B,aAAaQ,UAAUC,aAAaJ,QAAQ2B,MAAM,EAAEC,SAASC,MAAM5B;gBACtF;;0BAEF,KAACV;gBACCoB,IAAI;oBACFC,UAAU;oBACVK,KAAK;oBACLa,WAAW;oBACXC,SAAS;oBACTC,OAAO7B,SAASyB,OAAO,CAACK,IAAI,CAAC,IAAI;oBACjCC,UAAU;gBACZ;gBACAX,OACE,wEAAwE,GACxEb,gBAAgBD,mBAAmB,OAC/B;oBACEe,MAAM,GAAG,AAACd,CAAAA,gBAAgBD,gBAAe,IAAK,IAAI,CAAC,CAAC;gBACtD,IACA;oBACEe,MAAM,GAAGd,gBAAgB,IAAI,CAAC,CAAC;oBAC/BoB,WAAW;gBACb;0BAGLpC,eAAeW;;;;AAIxB"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/SpanDuration.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, useTheme } from '@mui/material';\nimport { useChartsTheme } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { Viewport, formatDuration, getSpanColor, minSpanWidthPx } from '../utils';\nimport { Ticks } from '../Ticks';\nimport { TracingGanttChartOptions } from '../../gantt-chart-model';\nimport { Span } from '../trace';\n\nexport interface SpanDurationProps {\n  options: TracingGanttChartOptions;\n  span: Span;\n  viewport: Viewport;\n}\n\n/**\n * SpanDuration renders the right column of a SpanRow, i.e. the span bar and span duration\n */\nexport function SpanDuration(props: SpanDurationProps): ReactElement {\n  const { options, span, viewport } = props;\n  const muiTheme = useTheme();\n  const chartsTheme = useChartsTheme();\n\n  const spanDuration = span.endTimeUnixMs - span.startTimeUnixMs;\n  const viewportDuration = viewport.endTimeUnixMs - viewport.startTimeUnixMs;\n  const relativeDuration = spanDuration / viewportDuration;\n  const relativeStart = (span.startTimeUnixMs - viewport.startTimeUnixMs) / viewportDuration;\n\n  return (\n    <Box sx={{ position: 'relative', height: '100%', flexGrow: 1, overflow: 'hidden' }}>\n      <Ticks />\n      <Box\n        data-testid=\"span-duration-bar\"\n        sx={{\n          position: 'absolute',\n          top: 0,\n          bottom: 0,\n          margin: 'auto',\n          minWidth: `${minSpanWidthPx}px`,\n          height: '8px',\n          borderRadius: muiTheme.shape.borderRadius,\n        }}\n        style={{\n          left: `${relativeStart * 100}%`,\n          width: `${relativeDuration * 100}%`,\n          backgroundColor: getSpanColor(muiTheme, chartsTheme, options.visual?.palette?.mode, span),\n        }}\n      />\n      <Box\n        sx={{\n          position: 'absolute',\n          top: '50%',\n          transform: 'translateY(-50%)',\n          padding: '0 8px',\n          color: muiTheme.palette.grey[700],\n          fontSize: '.7rem',\n        }}\n        style={\n          /* print span duration on right side of the span bar, if there is space */\n          relativeStart + relativeDuration < 0.95\n            ? {\n                left: `${(relativeStart + relativeDuration) * 100}%`,\n              }\n            : {\n                left: `${relativeStart * 100}%`,\n                transform: 'translateY(-50%) translateX(-100%)',\n              }\n        }\n      >\n        {formatDuration(spanDuration)}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["Box","useTheme","useChartsTheme","formatDuration","getSpanColor","minSpanWidthPx","Ticks","SpanDuration","props","options","span","viewport","muiTheme","chartsTheme","spanDuration","endTimeUnixMs","startTimeUnixMs","viewportDuration","relativeDuration","relativeStart","sx","position","height","flexGrow","overflow","data-testid","top","bottom","margin","minWidth","borderRadius","shape","style","left","width","backgroundColor","visual","palette","mode","transform","padding","color","grey","fontSize"],"mappings":";AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AAC9C,SAASC,cAAc,QAAQ,yBAAyB;AAExD,SAAmBC,cAAc,EAAEC,YAAY,EAAEC,cAAc,QAAQ,WAAW;AAClF,SAASC,KAAK,QAAQ,WAAW;AAUjC;;CAEC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGH;IACpC,MAAMI,WAAWX;IACjB,MAAMY,cAAcX;IAEpB,MAAMY,eAAeJ,KAAKK,aAAa,GAAGL,KAAKM,eAAe;IAC9D,MAAMC,mBAAmBN,SAASI,aAAa,GAAGJ,SAASK,eAAe;IAC1E,MAAME,mBAAmBJ,eAAeG;IACxC,MAAME,gBAAgB,AAACT,CAAAA,KAAKM,eAAe,GAAGL,SAASK,eAAe,AAAD,IAAKC;IAE1E,qBACE,MAACjB;QAAIoB,IAAI;YAAEC,UAAU;YAAYC,QAAQ;YAAQC,UAAU;YAAGC,UAAU;QAAS;;0BAC/E,KAAClB;0BACD,KAACN;gBACCyB,eAAY;gBACZL,IAAI;oBACFC,UAAU;oBACVK,KAAK;oBACLC,QAAQ;oBACRC,QAAQ;oBACRC,UAAU,GAAGxB,eAAe,EAAE,CAAC;oBAC/BiB,QAAQ;oBACRQ,cAAclB,SAASmB,KAAK,CAACD,YAAY;gBAC3C;gBACAE,OAAO;oBACLC,MAAM,GAAGd,gBAAgB,IAAI,CAAC,CAAC;oBAC/Be,OAAO,GAAGhB,mBAAmB,IAAI,CAAC,CAAC;oBACnCiB,iBAAiB/B,aAAaQ,UAAUC,aAAaJ,QAAQ2B,MAAM,EAAEC,SAASC,MAAM5B;gBACtF;;0BAEF,KAACV;gBACCoB,IAAI;oBACFC,UAAU;oBACVK,KAAK;oBACLa,WAAW;oBACXC,SAAS;oBACTC,OAAO7B,SAASyB,OAAO,CAACK,IAAI,CAAC,IAAI;oBACjCC,UAAU;gBACZ;gBACAX,OACE,wEAAwE,GACxEb,gBAAgBD,mBAAmB,OAC/B;oBACEe,MAAM,GAAG,AAACd,CAAAA,gBAAgBD,gBAAe,IAAK,IAAI,CAAC,CAAC;gBACtD,IACA;oBACEe,MAAM,GAAGd,gBAAgB,IAAI,CAAC,CAAC;oBAC/BoB,WAAW;gBACb;0BAGLpC,eAAeW;;;;AAIxB"}

package/lib/TracingGanttChart/GanttTable/SpanIndents.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { styled, useTheme } from '@mui/material';
 import ChevronDownIcon from 'mdi-material-ui/ChevronDown';
 import ChevronRightIcon from 'mdi-material-ui/ChevronRight';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/SpanIndents.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 { styled, useTheme } from '@mui/material';\nimport ChevronDownIcon from 'mdi-material-ui/ChevronDown';\nimport ChevronRightIcon from 'mdi-material-ui/ChevronRight';\nimport { MouseEvent, ReactElement, useCallback } from 'react';\nimport { Span } from '../trace';\nimport { useGanttTableContext } from './GanttTableProvider';\n\nconst MIN_INDENT_WIDTH = 8;\nconst MAX_INDENT_WIDTH = 24;\n\nexport interface SpanIndentsProps {\n  span: Span;\n}\n\n/**\n * SpanIndents renders the indention boxes,\n * and handles the click and mouseOver events\n *\n * Note: This component gets re-rendered on every hover of any indention box,\n * therefore rendering performance is essential.\n */\nexport function SpanIndents(props: SpanIndentsProps): ReactElement {\n  const { span } = props;\n  const { collapsedSpans, setCollapsedSpans, visibleSpans, hoveredParent, setHoveredParent } = useGanttTableContext();\n  const theme = useTheme();\n\n  const handleToggleClick = useCallback(\n    (e: MouseEvent) => {\n      e.stopPropagation();\n      if (collapsedSpans.includes(span.spanId)) {\n        setCollapsedSpans(collapsedSpans.filter((spanId) => spanId !== span.spanId));\n      } else {\n        setCollapsedSpans([...collapsedSpans, span.spanId]);\n      }\n    },\n    [span, collapsedSpans, setCollapsedSpans]\n  );\n\n  const handleIconMouseEnter = useCallback(() => {\n    setHoveredParent(span.spanId);\n  }, [span, setHoveredParent]);\n\n  const spans = [span];\n  let parent = span.parentSpan;\n  while (parent) {\n    spans.unshift(parent);\n    parent = parent.parentSpan;\n  }\n\n  // on first render visibleSpans is empty, therefore let's use MAX_INDENT_WIDTH to avoid an animation on page load.\n  return (\n    <>\n      {spans.map((span, i) => (\n        <SpanIndentBox\n          key={span.spanId}\n          style={{\n            width:\n              i === spans.length - 1 || visibleSpans.length === 0 || visibleSpans.includes(span.spanId)\n                ? MAX_INDENT_WIDTH\n                : MIN_INDENT_WIDTH,\n            borderLeft: `${hoveredParent === (span.parentSpanId ?? '') ? 3 : 1}px solid ${theme.palette.divider}`,\n          }}\n          onMouseEnter={() => setHoveredParent(span.parentSpanId ?? '')}\n          onMouseLeave={() => setHoveredParent(undefined)}\n        >\n          {i === spans.length - 1 &&\n            span.childSpans.length > 0 &&\n            (collapsedSpans.includes(span.spanId) ? (\n              <ChevronRightIcon titleAccess=\"expand\" onClick={handleToggleClick} onMouseEnter={handleIconMouseEnter} />\n            ) : (\n              <ChevronDownIcon titleAccess=\"collapse\" onClick={handleToggleClick} onMouseEnter={handleIconMouseEnter} />\n            ))}\n        </SpanIndentBox>\n      ))}\n    </>\n  );\n}\n\nconst SpanIndentBox = styled('div')({\n  display: 'flex',\n  height: '100%',\n  alignItems: 'center',\n  justifyContent: 'flex-end',\n  flexShrink: 0,\n  transition: 'width 1s',\n});\n"],"names":["styled","useTheme","ChevronDownIcon","ChevronRightIcon","useCallback","useGanttTableContext","MIN_INDENT_WIDTH","MAX_INDENT_WIDTH","SpanIndents","props","span","collapsedSpans","setCollapsedSpans","visibleSpans","hoveredParent","setHoveredParent","theme","handleToggleClick","e","stopPropagation","includes","spanId","filter","handleIconMouseEnter","spans","parent","parentSpan","unshift","map","i","SpanIndentBox","style","width","length","borderLeft","parentSpanId","palette","divider","onMouseEnter","onMouseLeave","undefined","childSpans","titleAccess","onClick","display","height","alignItems","justifyContent","flexShrink","transition"],"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,MAAM,EAAEC,QAAQ,QAAQ,gBAAgB;AACjD,OAAOC,qBAAqB,8BAA8B;AAC1D,OAAOC,sBAAsB,+BAA+B;AAC5D,SAAmCC,WAAW,QAAQ,QAAQ;AAE9D,SAASC,oBAAoB,QAAQ,uBAAuB;AAE5D,MAAMC,mBAAmB;AACzB,MAAMC,mBAAmB;AAMzB;;;;;;CAMC,GACD,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,MAAM,EAAEE,cAAc,EAAEC,iBAAiB,EAAEC,YAAY,EAAEC,aAAa,EAAEC,gBAAgB,EAAE,GAAGV;IAC7F,MAAMW,QAAQf;IAEd,MAAMgB,oBAAoBb,YACxB,CAACc;QACCA,EAAEC,eAAe;QACjB,IAAIR,eAAeS,QAAQ,CAACV,KAAKW,MAAM,GAAG;YACxCT,kBAAkBD,eAAeW,MAAM,CAAC,CAACD,SAAWA,WAAWX,KAAKW,MAAM;QAC5E,OAAO;YACLT,kBAAkB;mBAAID;gBAAgBD,KAAKW,MAAM;aAAC;QACpD;IACF,GACA;QAACX;QAAMC;QAAgBC;KAAkB;IAG3C,MAAMW,uBAAuBnB,YAAY;QACvCW,iBAAiBL,KAAKW,MAAM;IAC9B,GAAG;QAACX;QAAMK;KAAiB;IAE3B,MAAMS,QAAQ;QAACd;KAAK;IACpB,IAAIe,SAASf,KAAKgB,UAAU;IAC5B,MAAOD,OAAQ;QACbD,MAAMG,OAAO,CAACF;QACdA,SAASA,OAAOC,UAAU;IAC5B;IAEA,kHAAkH;IAClH,qBACE;kBACGF,MAAMI,GAAG,CAAC,CAAClB,MAAMmB,kBAChB,KAACC;gBAECC,OAAO;oBACLC,OACEH,MAAML,MAAMS,MAAM,GAAG,KAAKpB,aAAaoB,MAAM,KAAK,KAAKpB,aAAaO,QAAQ,CAACV,KAAKW,MAAM,IACpFd,mBACAD;oBACN4B,YAAY,GAAGpB,kBAAmBJ,CAAAA,KAAKyB,YAAY,IAAI,EAAC,IAAK,IAAI,EAAE,SAAS,EAAEnB,MAAMoB,OAAO,CAACC,OAAO,EAAE;gBACvG;gBACAC,cAAc,IAAMvB,iBAAiBL,KAAKyB,YAAY,IAAI;gBAC1DI,cAAc,IAAMxB,iBAAiByB;0BAEpCX,MAAML,MAAMS,MAAM,GAAG,KACpBvB,KAAK+B,UAAU,CAACR,MAAM,GAAG,KACxBtB,CAAAA,eAAeS,QAAQ,CAACV,KAAKW,MAAM,kBAClC,KAAClB;oBAAiBuC,aAAY;oBAASC,SAAS1B;oBAAmBqB,cAAcf;mCAEjF,KAACrB;oBAAgBwC,aAAY;oBAAWC,SAAS1B;oBAAmBqB,cAAcf;kBACpF;eAjBGb,KAAKW,MAAM;;AAsB1B;AAEA,MAAMS,gBAAgB9B,OAAO,OAAO;IAClC4C,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,gBAAgB;IAChBC,YAAY;IACZC,YAAY;AACd"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/SpanIndents.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 { styled, useTheme } from '@mui/material';\nimport ChevronDownIcon from 'mdi-material-ui/ChevronDown';\nimport ChevronRightIcon from 'mdi-material-ui/ChevronRight';\nimport { MouseEvent, ReactElement, useCallback } from 'react';\nimport { Span } from '../trace';\nimport { useGanttTableContext } from './GanttTableProvider';\n\nconst MIN_INDENT_WIDTH = 8;\nconst MAX_INDENT_WIDTH = 24;\n\nexport interface SpanIndentsProps {\n  span: Span;\n}\n\n/**\n * SpanIndents renders the indention boxes,\n * and handles the click and mouseOver events\n *\n * Note: This component gets re-rendered on every hover of any indention box,\n * therefore rendering performance is essential.\n */\nexport function SpanIndents(props: SpanIndentsProps): ReactElement {\n  const { span } = props;\n  const { collapsedSpans, setCollapsedSpans, visibleSpans, hoveredParent, setHoveredParent } = useGanttTableContext();\n  const theme = useTheme();\n\n  const handleToggleClick = useCallback(\n    (e: MouseEvent) => {\n      e.stopPropagation();\n      if (collapsedSpans.includes(span.spanId)) {\n        setCollapsedSpans(collapsedSpans.filter((spanId) => spanId !== span.spanId));\n      } else {\n        setCollapsedSpans([...collapsedSpans, span.spanId]);\n      }\n    },\n    [span, collapsedSpans, setCollapsedSpans]\n  );\n\n  const handleIconMouseEnter = useCallback(() => {\n    setHoveredParent(span.spanId);\n  }, [span, setHoveredParent]);\n\n  const spans = [span];\n  let parent = span.parentSpan;\n  while (parent) {\n    spans.unshift(parent);\n    parent = parent.parentSpan;\n  }\n\n  // on first render visibleSpans is empty, therefore let's use MAX_INDENT_WIDTH to avoid an animation on page load.\n  return (\n    <>\n      {spans.map((span, i) => (\n        <SpanIndentBox\n          key={span.spanId}\n          style={{\n            width:\n              i === spans.length - 1 || visibleSpans.length === 0 || visibleSpans.includes(span.spanId)\n                ? MAX_INDENT_WIDTH\n                : MIN_INDENT_WIDTH,\n            borderLeft: `${hoveredParent === (span.parentSpanId ?? '') ? 3 : 1}px solid ${theme.palette.divider}`,\n          }}\n          onMouseEnter={() => setHoveredParent(span.parentSpanId ?? '')}\n          onMouseLeave={() => setHoveredParent(undefined)}\n        >\n          {i === spans.length - 1 &&\n            span.childSpans.length > 0 &&\n            (collapsedSpans.includes(span.spanId) ? (\n              <ChevronRightIcon titleAccess=\"expand\" onClick={handleToggleClick} onMouseEnter={handleIconMouseEnter} />\n            ) : (\n              <ChevronDownIcon titleAccess=\"collapse\" onClick={handleToggleClick} onMouseEnter={handleIconMouseEnter} />\n            ))}\n        </SpanIndentBox>\n      ))}\n    </>\n  );\n}\n\nconst SpanIndentBox = styled('div')({\n  display: 'flex',\n  height: '100%',\n  alignItems: 'center',\n  justifyContent: 'flex-end',\n  flexShrink: 0,\n  transition: 'width 1s',\n});\n"],"names":["styled","useTheme","ChevronDownIcon","ChevronRightIcon","useCallback","useGanttTableContext","MIN_INDENT_WIDTH","MAX_INDENT_WIDTH","SpanIndents","props","span","collapsedSpans","setCollapsedSpans","visibleSpans","hoveredParent","setHoveredParent","theme","handleToggleClick","e","stopPropagation","includes","spanId","filter","handleIconMouseEnter","spans","parent","parentSpan","unshift","map","i","SpanIndentBox","style","width","length","borderLeft","parentSpanId","palette","divider","onMouseEnter","onMouseLeave","undefined","childSpans","titleAccess","onClick","display","height","alignItems","justifyContent","flexShrink","transition"],"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,MAAM,EAAEC,QAAQ,QAAQ,gBAAgB;AACjD,OAAOC,qBAAqB,8BAA8B;AAC1D,OAAOC,sBAAsB,+BAA+B;AAC5D,SAAmCC,WAAW,QAAQ,QAAQ;AAE9D,SAASC,oBAAoB,QAAQ,uBAAuB;AAE5D,MAAMC,mBAAmB;AACzB,MAAMC,mBAAmB;AAMzB;;;;;;CAMC,GACD,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,MAAM,EAAEE,cAAc,EAAEC,iBAAiB,EAAEC,YAAY,EAAEC,aAAa,EAAEC,gBAAgB,EAAE,GAAGV;IAC7F,MAAMW,QAAQf;IAEd,MAAMgB,oBAAoBb,YACxB,CAACc;QACCA,EAAEC,eAAe;QACjB,IAAIR,eAAeS,QAAQ,CAACV,KAAKW,MAAM,GAAG;YACxCT,kBAAkBD,eAAeW,MAAM,CAAC,CAACD,SAAWA,WAAWX,KAAKW,MAAM;QAC5E,OAAO;YACLT,kBAAkB;mBAAID;gBAAgBD,KAAKW,MAAM;aAAC;QACpD;IACF,GACA;QAACX;QAAMC;QAAgBC;KAAkB;IAG3C,MAAMW,uBAAuBnB,YAAY;QACvCW,iBAAiBL,KAAKW,MAAM;IAC9B,GAAG;QAACX;QAAMK;KAAiB;IAE3B,MAAMS,QAAQ;QAACd;KAAK;IACpB,IAAIe,SAASf,KAAKgB,UAAU;IAC5B,MAAOD,OAAQ;QACbD,MAAMG,OAAO,CAACF;QACdA,SAASA,OAAOC,UAAU;IAC5B;IAEA,kHAAkH;IAClH,qBACE;kBACGF,MAAMI,GAAG,CAAC,CAAClB,MAAMmB,kBAChB,KAACC;gBAECC,OAAO;oBACLC,OACEH,MAAML,MAAMS,MAAM,GAAG,KAAKpB,aAAaoB,MAAM,KAAK,KAAKpB,aAAaO,QAAQ,CAACV,KAAKW,MAAM,IACpFd,mBACAD;oBACN4B,YAAY,GAAGpB,kBAAmBJ,CAAAA,KAAKyB,YAAY,IAAI,EAAC,IAAK,IAAI,EAAE,SAAS,EAAEnB,MAAMoB,OAAO,CAACC,OAAO,EAAE;gBACvG;gBACAC,cAAc,IAAMvB,iBAAiBL,KAAKyB,YAAY,IAAI;gBAC1DI,cAAc,IAAMxB,iBAAiByB;0BAEpCX,MAAML,MAAMS,MAAM,GAAG,KACpBvB,KAAK+B,UAAU,CAACR,MAAM,GAAG,KACxBtB,CAAAA,eAAeS,QAAQ,CAACV,KAAKW,MAAM,kBAClC,KAAClB;oBAAiBuC,aAAY;oBAASC,SAAS1B;oBAAmBqB,cAAcf;mCAEjF,KAACrB;oBAAgBwC,aAAY;oBAAWC,SAAS1B;oBAAmBqB,cAAcf;kBACpF;eAjBGb,KAAKW,MAAM;;AAsB1B;AAEA,MAAMS,gBAAgB9B,OAAO,OAAO;IAClC4C,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,gBAAgB;IAChBC,YAAY;IACZC,YAAY;AACd"}

package/lib/TracingGanttChart/GanttTable/SpanLinksButton.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright 2025 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { IconButton, Menu, MenuItem } from '@mui/material';
 import { useState } from 'react';
 import LaunchIcon from 'mdi-material-ui/Launch';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/SpanLinksButton.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 { IconButton, Menu, MenuItem } from '@mui/material';\nimport { MouseEvent, useState } from 'react';\nimport LaunchIcon from 'mdi-material-ui/Launch';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { replaceVariablesInString, useAllVariableValues, useRouterContext } from '@perses-dev/plugin-system';\nimport { Span } from '../trace';\nimport { CustomLinks } from '../../gantt-chart-model';\n\nexport interface SpanLinksButtonProps {\n  customLinks: CustomLinks;\n  span: Span;\n}\n\nexport function SpanLinksButton(props: SpanLinksButtonProps) {\n  const { customLinks, span } = props;\n  const variableValues = useAllVariableValues();\n  const { RouterComponent } = useRouterContext();\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const isOpen = Boolean(anchorEl);\n\n  if (!RouterComponent || !customLinks.links.span) {\n    return null;\n  }\n\n  // if there is a single span link, render the button directly without a menu\n  if (span.links.length == 1 && span.links[0]) {\n    const link = span.links[0];\n    return (\n      <InfoTooltip description=\"open linked span\">\n        <IconButton\n          size=\"small\"\n          component={RouterComponent}\n          to={replaceVariablesInString(customLinks.links.span, variableValues, {\n            ...customLinks.variables,\n            traceId: link.traceId,\n            spanId: link.spanId,\n          })}\n        >\n          <LaunchIcon fontSize=\"inherit\" />\n        </IconButton>\n      </InfoTooltip>\n    );\n  }\n\n  const handleOpenMenu = (event: MouseEvent<HTMLButtonElement>) => {\n    // do not propagate onClick event to the table row (otherwise, the detail pane would open)\n    event.stopPropagation();\n\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = (event: MouseEvent) => {\n    // Closing the menu, i.e. clicking on the fullscreen transparent MUI backdrop element, does trigger a click on the table row (which opens the detail pane).\n    // Therefore, stop propagating this event\n    event.stopPropagation();\n\n    setAnchorEl(null);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={`${span.links.length} linked spans`}>\n        <IconButton\n          aria-label=\"span links\"\n          aria-haspopup=\"true\"\n          aria-expanded={isOpen ? 'true' : undefined}\n          size=\"small\"\n          onClick={handleOpenMenu}\n        >\n          <LaunchIcon fontSize=\"inherit\" />\n        </IconButton>\n      </InfoTooltip>\n      <Menu anchorEl={anchorEl} open={isOpen} onClose={handleClose}>\n        {span.links.map((link) => (\n          <MenuItem\n            key={link.spanId}\n            component={RouterComponent}\n            onClick={handleClose}\n            to={replaceVariablesInString(customLinks.links.span!, variableValues, {\n              ...customLinks.variables,\n              traceId: link.traceId,\n              spanId: link.spanId,\n            })}\n          >\n            Open linked span {link.spanId}\n          </MenuItem>\n        ))}\n      </Menu>\n    </>\n  );\n}\n"],"names":["IconButton","Menu","MenuItem","useState","LaunchIcon","InfoTooltip","replaceVariablesInString","useAllVariableValues","useRouterContext","SpanLinksButton","props","customLinks","span","variableValues","RouterComponent","anchorEl","setAnchorEl","isOpen","Boolean","links","length","link","description","size","component","to","variables","traceId","spanId","fontSize","handleOpenMenu","event","stopPropagation","currentTarget","handleClose","aria-label","aria-haspopup","aria-expanded","undefined","onClick","open","onClose","map"],"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,UAAU,EAAEC,IAAI,EAAEC,QAAQ,QAAQ,gBAAgB;AAC3D,SAAqBC,QAAQ,QAAQ,QAAQ;AAC7C,OAAOC,gBAAgB,yBAAyB;AAChD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,wBAAwB,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAS7G,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,WAAW,EAAEC,IAAI,EAAE,GAAGF;IAC9B,MAAMG,iBAAiBN;IACvB,MAAM,EAAEO,eAAe,EAAE,GAAGN;IAC5B,MAAM,CAACO,UAAUC,YAAY,GAAGb,SAA6B;IAC7D,MAAMc,SAASC,QAAQH;IAEvB,IAAI,CAACD,mBAAmB,CAACH,YAAYQ,KAAK,CAACP,IAAI,EAAE;QAC/C,OAAO;IACT;IAEA,4EAA4E;IAC5E,IAAIA,KAAKO,KAAK,CAACC,MAAM,IAAI,KAAKR,KAAKO,KAAK,CAAC,EAAE,EAAE;QAC3C,MAAME,OAAOT,KAAKO,KAAK,CAAC,EAAE;QAC1B,qBACE,KAACd;YAAYiB,aAAY;sBACvB,cAAA,KAACtB;gBACCuB,MAAK;gBACLC,WAAWV;gBACXW,IAAInB,yBAAyBK,YAAYQ,KAAK,CAACP,IAAI,EAAEC,gBAAgB;oBACnE,GAAGF,YAAYe,SAAS;oBACxBC,SAASN,KAAKM,OAAO;oBACrBC,QAAQP,KAAKO,MAAM;gBACrB;0BAEA,cAAA,KAACxB;oBAAWyB,UAAS;;;;IAI7B;IAEA,MAAMC,iBAAiB,CAACC;QACtB,0FAA0F;QAC1FA,MAAMC,eAAe;QAErBhB,YAAYe,MAAME,aAAa;IACjC;IAEA,MAAMC,cAAc,CAACH;QACnB,2JAA2J;QAC3J,yCAAyC;QACzCA,MAAMC,eAAe;QAErBhB,YAAY;IACd;IAEA,qBACE;;0BACE,KAACX;gBAAYiB,aAAa,GAAGV,KAAKO,KAAK,CAACC,MAAM,CAAC,aAAa,CAAC;0BAC3D,cAAA,KAACpB;oBACCmC,cAAW;oBACXC,iBAAc;oBACdC,iBAAepB,SAAS,SAASqB;oBACjCf,MAAK;oBACLgB,SAAST;8BAET,cAAA,KAAC1B;wBAAWyB,UAAS;;;;0BAGzB,KAAC5B;gBAAKc,UAAUA;gBAAUyB,MAAMvB;gBAAQwB,SAASP;0BAC9CtB,KAAKO,KAAK,CAACuB,GAAG,CAAC,CAACrB,qBACf,MAACnB;wBAECsB,WAAWV;wBACXyB,SAASL;wBACTT,IAAInB,yBAAyBK,YAAYQ,KAAK,CAACP,IAAI,EAAGC,gBAAgB;4BACpE,GAAGF,YAAYe,SAAS;4BACxBC,SAASN,KAAKM,OAAO;4BACrBC,QAAQP,KAAKO,MAAM;wBACrB;;4BACD;4BACmBP,KAAKO,MAAM;;uBATxBP,KAAKO,MAAM;;;;AAe5B"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/SpanLinksButton.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 { IconButton, Menu, MenuItem } from '@mui/material';\nimport { MouseEvent, useState } from 'react';\nimport LaunchIcon from 'mdi-material-ui/Launch';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { replaceVariablesInString, useAllVariableValues, useRouterContext } from '@perses-dev/plugin-system';\nimport { Span } from '../trace';\nimport { CustomLinks } from '../../gantt-chart-model';\n\nexport interface SpanLinksButtonProps {\n  customLinks: CustomLinks;\n  span: Span;\n}\n\nexport function SpanLinksButton(props: SpanLinksButtonProps) {\n  const { customLinks, span } = props;\n  const variableValues = useAllVariableValues();\n  const { RouterComponent } = useRouterContext();\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const isOpen = Boolean(anchorEl);\n\n  if (!RouterComponent || !customLinks.links.span) {\n    return null;\n  }\n\n  // if there is a single span link, render the button directly without a menu\n  if (span.links.length == 1 && span.links[0]) {\n    const link = span.links[0];\n    return (\n      <InfoTooltip description=\"open linked span\">\n        <IconButton\n          size=\"small\"\n          component={RouterComponent}\n          to={replaceVariablesInString(customLinks.links.span, variableValues, {\n            ...customLinks.variables,\n            traceId: link.traceId,\n            spanId: link.spanId,\n          })}\n        >\n          <LaunchIcon fontSize=\"inherit\" />\n        </IconButton>\n      </InfoTooltip>\n    );\n  }\n\n  const handleOpenMenu = (event: MouseEvent<HTMLButtonElement>) => {\n    // do not propagate onClick event to the table row (otherwise, the detail pane would open)\n    event.stopPropagation();\n\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = (event: MouseEvent) => {\n    // Closing the menu, i.e. clicking on the fullscreen transparent MUI backdrop element, does trigger a click on the table row (which opens the detail pane).\n    // Therefore, stop propagating this event\n    event.stopPropagation();\n\n    setAnchorEl(null);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={`${span.links.length} linked spans`}>\n        <IconButton\n          aria-label=\"span links\"\n          aria-haspopup=\"true\"\n          aria-expanded={isOpen ? 'true' : undefined}\n          size=\"small\"\n          onClick={handleOpenMenu}\n        >\n          <LaunchIcon fontSize=\"inherit\" />\n        </IconButton>\n      </InfoTooltip>\n      <Menu anchorEl={anchorEl} open={isOpen} onClose={handleClose}>\n        {span.links.map((link) => (\n          <MenuItem\n            key={link.spanId}\n            component={RouterComponent}\n            onClick={handleClose}\n            to={replaceVariablesInString(customLinks.links.span!, variableValues, {\n              ...customLinks.variables,\n              traceId: link.traceId,\n              spanId: link.spanId,\n            })}\n          >\n            Open linked span {link.spanId}\n          </MenuItem>\n        ))}\n      </Menu>\n    </>\n  );\n}\n"],"names":["IconButton","Menu","MenuItem","useState","LaunchIcon","InfoTooltip","replaceVariablesInString","useAllVariableValues","useRouterContext","SpanLinksButton","props","customLinks","span","variableValues","RouterComponent","anchorEl","setAnchorEl","isOpen","Boolean","links","length","link","description","size","component","to","variables","traceId","spanId","fontSize","handleOpenMenu","event","stopPropagation","currentTarget","handleClose","aria-label","aria-haspopup","aria-expanded","undefined","onClick","open","onClose","map"],"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,UAAU,EAAEC,IAAI,EAAEC,QAAQ,QAAQ,gBAAgB;AAC3D,SAAqBC,QAAQ,QAAQ,QAAQ;AAC7C,OAAOC,gBAAgB,yBAAyB;AAChD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,wBAAwB,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAS7G,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,WAAW,EAAEC,IAAI,EAAE,GAAGF;IAC9B,MAAMG,iBAAiBN;IACvB,MAAM,EAAEO,eAAe,EAAE,GAAGN;IAC5B,MAAM,CAACO,UAAUC,YAAY,GAAGb,SAA6B;IAC7D,MAAMc,SAASC,QAAQH;IAEvB,IAAI,CAACD,mBAAmB,CAACH,YAAYQ,KAAK,CAACP,IAAI,EAAE;QAC/C,OAAO;IACT;IAEA,4EAA4E;IAC5E,IAAIA,KAAKO,KAAK,CAACC,MAAM,IAAI,KAAKR,KAAKO,KAAK,CAAC,EAAE,EAAE;QAC3C,MAAME,OAAOT,KAAKO,KAAK,CAAC,EAAE;QAC1B,qBACE,KAACd;YAAYiB,aAAY;sBACvB,cAAA,KAACtB;gBACCuB,MAAK;gBACLC,WAAWV;gBACXW,IAAInB,yBAAyBK,YAAYQ,KAAK,CAACP,IAAI,EAAEC,gBAAgB;oBACnE,GAAGF,YAAYe,SAAS;oBACxBC,SAASN,KAAKM,OAAO;oBACrBC,QAAQP,KAAKO,MAAM;gBACrB;0BAEA,cAAA,KAACxB;oBAAWyB,UAAS;;;;IAI7B;IAEA,MAAMC,iBAAiB,CAACC;QACtB,0FAA0F;QAC1FA,MAAMC,eAAe;QAErBhB,YAAYe,MAAME,aAAa;IACjC;IAEA,MAAMC,cAAc,CAACH;QACnB,2JAA2J;QAC3J,yCAAyC;QACzCA,MAAMC,eAAe;QAErBhB,YAAY;IACd;IAEA,qBACE;;0BACE,KAACX;gBAAYiB,aAAa,GAAGV,KAAKO,KAAK,CAACC,MAAM,CAAC,aAAa,CAAC;0BAC3D,cAAA,KAACpB;oBACCmC,cAAW;oBACXC,iBAAc;oBACdC,iBAAepB,SAAS,SAASqB;oBACjCf,MAAK;oBACLgB,SAAST;8BAET,cAAA,KAAC1B;wBAAWyB,UAAS;;;;0BAGzB,KAAC5B;gBAAKc,UAAUA;gBAAUyB,MAAMvB;gBAAQwB,SAASP;0BAC9CtB,KAAKO,KAAK,CAACuB,GAAG,CAAC,CAACrB,qBACf,MAACnB;wBAECsB,WAAWV;wBACXyB,SAASL;wBACTT,IAAInB,yBAAyBK,YAAYQ,KAAK,CAACP,IAAI,EAAGC,gBAAgB;4BACpE,GAAGF,YAAYe,SAAS;4BACxBC,SAASN,KAAKM,OAAO;4BACrBC,QAAQP,KAAKO,MAAM;wBACrB;;4BACD;4BACmBP,KAAKO,MAAM;;uBATxBP,KAAKO,MAAM;;;;AAe5B"}

package/lib/TracingGanttChart/GanttTable/SpanName.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Stack } from '@mui/material';
 import AlertIcon from 'mdi-material-ui/AlertCircleOutline';
 import { spanHasError } from '../utils';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/SpanName.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 } from '@mui/material';\nimport AlertIcon from 'mdi-material-ui/AlertCircleOutline';\nimport { ReactElement } from 'react';\nimport { spanHasError } from '../utils';\nimport { Span } from '../trace';\nimport { CustomLinks } from '../../gantt-chart-model';\nimport { SpanIndents } from './SpanIndents';\nimport { SpanLinksButton } from './SpanLinksButton';\n\nexport interface SpanNameProps {\n  customLinks?: CustomLinks;\n  span: Span;\n  nameColumnWidth: number;\n}\n\n/**\n * SpanName renders the entire left column of a SpanRow, i.e. the hierarchy and the service and span name\n */\nexport function SpanName(props: SpanNameProps): ReactElement {\n  const { customLinks, span, nameColumnWidth } = props;\n\n  return (\n    <Stack direction=\"row\" sx={{ alignItems: 'center' }} style={{ width: `${nameColumnWidth * 100}%` }}>\n      <SpanIndents span={span} />\n      {spanHasError(span) && <AlertIcon titleAccess=\"error\" color=\"error\" sx={{ marginRight: '5px' }} />}\n      <Box sx={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>\n        <strong>{span.resource.serviceName}:</strong> {span.name}\n      </Box>\n      {customLinks && customLinks.links.span && span.links.length > 0 && (\n        <Box sx={{ marginLeft: 'auto', px: 1 }}>\n          <SpanLinksButton customLinks={customLinks} span={span} />\n        </Box>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Box","Stack","AlertIcon","spanHasError","SpanIndents","SpanLinksButton","SpanName","props","customLinks","span","nameColumnWidth","direction","sx","alignItems","style","width","titleAccess","color","marginRight","whiteSpace","overflow","strong","resource","serviceName","name","links","length","marginLeft","px"],"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,QAAQ,gBAAgB;AAC3C,OAAOC,eAAe,qCAAqC;AAE3D,SAASC,YAAY,QAAQ,WAAW;AAGxC,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,SAASC,eAAe,QAAQ,oBAAoB;AAQpD;;CAEC,GACD,OAAO,SAASC,SAASC,KAAoB;IAC3C,MAAM,EAAEC,WAAW,EAAEC,IAAI,EAAEC,eAAe,EAAE,GAAGH;IAE/C,qBACE,MAACN;QAAMU,WAAU;QAAMC,IAAI;YAAEC,YAAY;QAAS;QAAGC,OAAO;YAAEC,OAAO,GAAGL,kBAAkB,IAAI,CAAC,CAAC;QAAC;;0BAC/F,KAACN;gBAAYK,MAAMA;;YAClBN,aAAaM,uBAAS,KAACP;gBAAUc,aAAY;gBAAQC,OAAM;gBAAQL,IAAI;oBAAEM,aAAa;gBAAM;;0BAC7F,MAAClB;gBAAIY,IAAI;oBAAEO,YAAY;oBAAUC,UAAU;gBAAS;;kCAClD,MAACC;;4BAAQZ,KAAKa,QAAQ,CAACC,WAAW;4BAAC;;;oBAAU;oBAAEd,KAAKe,IAAI;;;YAEzDhB,eAAeA,YAAYiB,KAAK,CAAChB,IAAI,IAAIA,KAAKgB,KAAK,CAACC,MAAM,GAAG,mBAC5D,KAAC1B;gBAAIY,IAAI;oBAAEe,YAAY;oBAAQC,IAAI;gBAAE;0BACnC,cAAA,KAACvB;oBAAgBG,aAAaA;oBAAaC,MAAMA;;;;;AAK3D"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/SpanName.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 } from '@mui/material';\nimport AlertIcon from 'mdi-material-ui/AlertCircleOutline';\nimport { ReactElement } from 'react';\nimport { spanHasError } from '../utils';\nimport { Span } from '../trace';\nimport { CustomLinks } from '../../gantt-chart-model';\nimport { SpanIndents } from './SpanIndents';\nimport { SpanLinksButton } from './SpanLinksButton';\n\nexport interface SpanNameProps {\n  customLinks?: CustomLinks;\n  span: Span;\n  nameColumnWidth: number;\n}\n\n/**\n * SpanName renders the entire left column of a SpanRow, i.e. the hierarchy and the service and span name\n */\nexport function SpanName(props: SpanNameProps): ReactElement {\n  const { customLinks, span, nameColumnWidth } = props;\n\n  return (\n    <Stack direction=\"row\" sx={{ alignItems: 'center' }} style={{ width: `${nameColumnWidth * 100}%` }}>\n      <SpanIndents span={span} />\n      {spanHasError(span) && <AlertIcon titleAccess=\"error\" color=\"error\" sx={{ marginRight: '5px' }} />}\n      <Box sx={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>\n        <strong>{span.resource.serviceName}:</strong> {span.name}\n      </Box>\n      {customLinks && customLinks.links.span && span.links.length > 0 && (\n        <Box sx={{ marginLeft: 'auto', px: 1 }}>\n          <SpanLinksButton customLinks={customLinks} span={span} />\n        </Box>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Box","Stack","AlertIcon","spanHasError","SpanIndents","SpanLinksButton","SpanName","props","customLinks","span","nameColumnWidth","direction","sx","alignItems","style","width","titleAccess","color","marginRight","whiteSpace","overflow","strong","resource","serviceName","name","links","length","marginLeft","px"],"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,QAAQ,gBAAgB;AAC3C,OAAOC,eAAe,qCAAqC;AAE3D,SAASC,YAAY,QAAQ,WAAW;AAGxC,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,SAASC,eAAe,QAAQ,oBAAoB;AAQpD;;CAEC,GACD,OAAO,SAASC,SAASC,KAAoB;IAC3C,MAAM,EAAEC,WAAW,EAAEC,IAAI,EAAEC,eAAe,EAAE,GAAGH;IAE/C,qBACE,MAACN;QAAMU,WAAU;QAAMC,IAAI;YAAEC,YAAY;QAAS;QAAGC,OAAO;YAAEC,OAAO,GAAGL,kBAAkB,IAAI,CAAC,CAAC;QAAC;;0BAC/F,KAACN;gBAAYK,MAAMA;;YAClBN,aAAaM,uBAAS,KAACP;gBAAUc,aAAY;gBAAQC,OAAM;gBAAQL,IAAI;oBAAEM,aAAa;gBAAM;;0BAC7F,MAAClB;gBAAIY,IAAI;oBAAEO,YAAY;oBAAUC,UAAU;gBAAS;;kCAClD,MAACC;;4BAAQZ,KAAKa,QAAQ,CAACC,WAAW;4BAAC;;;oBAAU;oBAAEd,KAAKe,IAAI;;;YAEzDhB,eAAeA,YAAYiB,KAAK,CAAChB,IAAI,IAAIA,KAAKgB,KAAK,CAACC,MAAM,GAAG,mBAC5D,KAAC1B;gBAAIY,IAAI;oBAAEe,YAAY;oBAAQC,IAAI;gBAAE;0BACnC,cAAA,KAACvB;oBAAgBG,aAAaA;oBAAaC,MAAMA;;;;;AAK3D"}

package/lib/TracingGanttChart/MiniGanttChart/Canvas.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, styled, useTheme } from '@mui/material';
 import useResizeObserver from 'use-resize-observer';
 import { useEffect, useRef, useState, useCallback } from 'react';