@perses-dev/tracing-gantt-chart-plugin 0.10.0 → 0.11.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.length > 0 ? value.stringValue : '<empty string>';\n  if ('intValue' in value) return value.intValue;\n  if ('boolValue' in value) return value.boolValue.toString();\n  if ('arrayValue' in value) return value.arrayValue.values.map(renderAttributeValue).join(', ');\n  return 'unknown';\n}\n"],"names":["useMemo","Divider","Link","List","ListItem","ListItemText","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","boolValue","toString","arrayValue","values","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/GanttTable/ResizableDivider.js

@@ -13,7 +13,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Box, styled } from '@mui/material';
-import { useEvent } from '@perses-dev/core';
+import { useEvent } from '@perses-dev/plugin-system';
 export function ResizableDivider(props) {
     const { parentRef, spacing = 0, onMove } = props;
     const [isResizing, setResizing] = useState(false);

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/core';\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,mBAAmB;AAQ5C,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/MiniGanttChart/Canvas.js

@@ -14,7 +14,7 @@ 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';
-import { useEvent } from '@perses-dev/core';
+import { useEvent } from '@perses-dev/plugin-system';
 import { useChartsTheme } from '@perses-dev/components';
 import { Ticks } from '../Ticks';
 import { getSpanColor } from '../utils';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/MiniGanttChart/Canvas.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, styled, useTheme } from '@mui/material';\nimport useResizeObserver from 'use-resize-observer';\nimport { useEffect, useRef, MouseEvent as ReactMouseEvent, useState, useCallback, ReactElement } from 'react';\nimport { useEvent } from '@perses-dev/core';\nimport { useChartsTheme } from '@perses-dev/components';\nimport { Ticks } from '../Ticks';\nimport { getSpanColor, Viewport } from '../utils';\nimport { TracingGanttChartOptions } from '../../gantt-chart-model';\nimport { Span, Trace } from '../trace';\nimport { drawSpans } from './draw';\n\nconst CANVAS_HEIGHT = 60;\n\ninterface CanvasProps {\n  options: TracingGanttChartOptions;\n  trace: Trace;\n  viewport: Viewport;\n  setViewport: (v: Viewport) => void;\n}\n\ntype MouseState =\n  | { type: 'none' }\n  | { type: 'resize'; fixedPoint: number }\n  | { type: 'drag'; start: number; end: number };\n\nexport function Canvas(props: CanvasProps): ReactElement {\n  const { options, trace, viewport, setViewport } = props;\n  const muiTheme = useTheme();\n  const chartsTheme = useChartsTheme();\n  // the <canvas> element must have an absolute width and height to avoid rendering problems\n  // the wrapper box is required to get the available dimensions for the <canvas> element\n  const { width, ref: wrapperRef } = useResizeObserver();\n  const height = CANVAS_HEIGHT;\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const [mouseState, setMouseState] = useState<MouseState>({ type: 'none' });\n\n  const traceDuration = trace.endTimeUnixMs - trace.startTimeUnixMs;\n  const relativeCutoffLeft = (viewport.startTimeUnixMs - trace.startTimeUnixMs) / traceDuration;\n  const relativeCutoffRight = (trace.endTimeUnixMs - viewport.endTimeUnixMs) / traceDuration;\n\n  const spanColorGenerator = useCallback(\n    (span: Span) => getSpanColor(muiTheme, chartsTheme, options.visual?.palette?.mode, span),\n    [muiTheme, chartsTheme, options.visual?.palette?.mode]\n  );\n\n  useEffect(() => {\n    if (!canvasRef.current || !width || !height) return;\n\n    const ctx = canvasRef.current.getContext('2d');\n    if (!ctx) return;\n\n    drawSpans(ctx, width, height, trace, spanColorGenerator);\n  }, [width, height, trace, spanColorGenerator]);\n\n  const translateCursorToTime = (e: ReactMouseEvent | MouseEvent): number => {\n    if (!canvasRef.current || !width) return 0;\n    // e.nativeEvent.offsetX doesn't work when sliding over a tick box\n    const offsetX = e.clientX - canvasRef.current.getBoundingClientRect().left;\n    return trace.startTimeUnixMs + (offsetX / width) * traceDuration;\n  };\n\n  const handleMouseDown = (e: ReactMouseEvent<HTMLDivElement>): void => {\n    e.preventDefault();\n    if (!(e.target instanceof HTMLElement)) return;\n\n    const isDefaultViewport =\n      viewport.startTimeUnixMs === trace.startTimeUnixMs && viewport.endTimeUnixMs === trace.endTimeUnixMs;\n    const elem = e.target.dataset['elem'];\n    const cursor = translateCursorToTime(e);\n\n    if (elem === 'resizerLeft') {\n      setMouseState({ type: 'resize', fixedPoint: viewport.endTimeUnixMs });\n    } else if (elem === 'resizerRight') {\n      setMouseState({ type: 'resize', fixedPoint: viewport.startTimeUnixMs });\n    } else if (elem === 'cutoffBox' || isDefaultViewport) {\n      setMouseState({ type: 'resize', fixedPoint: cursor });\n      setViewport({ startTimeUnixMs: cursor, endTimeUnixMs: cursor });\n    } else {\n      setMouseState({\n        type: 'drag',\n        start: cursor - viewport.startTimeUnixMs,\n        end: viewport.endTimeUnixMs - cursor,\n      });\n    }\n  };\n\n  // need stable reference for window.removeEventListener() in useEffect() below\n  const handleMouseMove = useEvent((e: MouseEvent) => {\n    e.preventDefault();\n\n    switch (mouseState.type) {\n      case 'none':\n        return;\n\n      case 'resize': {\n        const pointA = mouseState.fixedPoint;\n        const pointB = translateCursorToTime(e);\n\n        let start, end;\n        if (pointA < pointB) {\n          start = pointA;\n          end = pointB;\n        } else {\n          start = pointB;\n          end = pointA;\n        }\n\n        setViewport({\n          startTimeUnixMs: Math.max(start, trace.startTimeUnixMs),\n          endTimeUnixMs: Math.min(end, trace.endTimeUnixMs),\n        });\n        return;\n      }\n\n      case 'drag': {\n        // avoid using e.movementX here, as it skips events in chrome,\n        // resulting in the mouse pointer moving faster than the viewport box\n        const { start, end } = mouseState;\n        let cursor = translateCursorToTime(e);\n\n        if (cursor - start < trace.startTimeUnixMs) {\n          cursor = trace.startTimeUnixMs + start;\n        }\n        if (cursor + end > trace.endTimeUnixMs) {\n          cursor = trace.endTimeUnixMs - end;\n        }\n\n        setViewport({\n          startTimeUnixMs: cursor - start,\n          endTimeUnixMs: cursor + end,\n        });\n        return;\n      }\n    }\n  });\n\n  // need stable reference for window.removeEventListener() in useEffect() below\n  const handleMouseUp = useEvent((e: MouseEvent) => {\n    e.preventDefault();\n    setMouseState({ type: 'none' });\n\n    // reset viewport if start === end, i.e. a click without movement\n    if (viewport.startTimeUnixMs === viewport.endTimeUnixMs) {\n      setViewport({ startTimeUnixMs: trace.startTimeUnixMs, endTimeUnixMs: trace.endTimeUnixMs });\n    }\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 = mouseState.type === 'resize' ? 'col-resize' : 'move';\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 (mouseState.type === 'none') {\n      stopMouseAction();\n    } else {\n      startMouseAction();\n    }\n\n    return stopMouseAction;\n  }, [mouseState, handleMouseMove, handleMouseUp]);\n\n  return (\n    <Box ref={wrapperRef} sx={{ position: 'relative', height }} onMouseDown={handleMouseDown}>\n      <canvas ref={canvasRef} width={width} height={height} style={{ position: 'absolute' }} />\n      <Ticks />\n      <CutoffBox data-elem=\"cutoffBox\" style={{ left: 0, width: `${relativeCutoffLeft * 100}%` }} />\n      <Resizer data-elem=\"resizerLeft\" style={{ left: `${relativeCutoffLeft * 100}%` }} />\n      <Resizer data-elem=\"resizerRight\" style={{ right: `${relativeCutoffRight * 100}%` }} />\n      <CutoffBox data-elem=\"cutoffBox\" style={{ right: 0, width: `${relativeCutoffRight * 100}%` }} />\n    </Box>\n  );\n}\n\nconst CutoffBox = styled(Box)({\n  position: 'absolute',\n  height: '100%',\n  backgroundColor: 'rgba(225, 225, 225, .5)',\n});\n\nconst Resizer = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  height: '100%',\n  backgroundColor: theme.palette.divider,\n  width: '2px',\n  cursor: 'col-resize',\n\n  // increase clickable area from 2px to 8px\n  '&:before': {\n    position: 'absolute',\n    width: '8px',\n    left: '-3px',\n    top: 0,\n    bottom: 0,\n    content: '\" \"',\n    zIndex: 1, // without zIndex, the cutoff boxes partially hide this element\n  },\n}));\n"],"names":["Box","styled","useTheme","useResizeObserver","useEffect","useRef","useState","useCallback","useEvent","useChartsTheme","Ticks","getSpanColor","drawSpans","CANVAS_HEIGHT","Canvas","props","options","trace","viewport","setViewport","muiTheme","chartsTheme","width","ref","wrapperRef","height","canvasRef","mouseState","setMouseState","type","traceDuration","endTimeUnixMs","startTimeUnixMs","relativeCutoffLeft","relativeCutoffRight","spanColorGenerator","span","visual","palette","mode","current","ctx","getContext","translateCursorToTime","e","offsetX","clientX","getBoundingClientRect","left","handleMouseDown","preventDefault","target","HTMLElement","isDefaultViewport","elem","dataset","cursor","fixedPoint","start","end","handleMouseMove","pointA","pointB","Math","max","min","handleMouseUp","startMouseAction","window","addEventListener","document","body","style","stopMouseAction","removeEventListener","sx","position","onMouseDown","canvas","CutoffBox","data-elem","Resizer","right","backgroundColor","theme","divider","top","bottom","content","zIndex"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/MiniGanttChart/Canvas.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, styled, useTheme } from '@mui/material';\nimport useResizeObserver from 'use-resize-observer';\nimport { useEffect, useRef, MouseEvent as ReactMouseEvent, useState, useCallback, ReactElement } from 'react';\nimport { useEvent } from '@perses-dev/plugin-system';\nimport { useChartsTheme } from '@perses-dev/components';\nimport { Ticks } from '../Ticks';\nimport { getSpanColor, Viewport } from '../utils';\nimport { TracingGanttChartOptions } from '../../gantt-chart-model';\nimport { Span, Trace } from '../trace';\nimport { drawSpans } from './draw';\n\nconst CANVAS_HEIGHT = 60;\n\ninterface CanvasProps {\n  options: TracingGanttChartOptions;\n  trace: Trace;\n  viewport: Viewport;\n  setViewport: (v: Viewport) => void;\n}\n\ntype MouseState =\n  | { type: 'none' }\n  | { type: 'resize'; fixedPoint: number }\n  | { type: 'drag'; start: number; end: number };\n\nexport function Canvas(props: CanvasProps): ReactElement {\n  const { options, trace, viewport, setViewport } = props;\n  const muiTheme = useTheme();\n  const chartsTheme = useChartsTheme();\n  // the <canvas> element must have an absolute width and height to avoid rendering problems\n  // the wrapper box is required to get the available dimensions for the <canvas> element\n  const { width, ref: wrapperRef } = useResizeObserver();\n  const height = CANVAS_HEIGHT;\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const [mouseState, setMouseState] = useState<MouseState>({ type: 'none' });\n\n  const traceDuration = trace.endTimeUnixMs - trace.startTimeUnixMs;\n  const relativeCutoffLeft = (viewport.startTimeUnixMs - trace.startTimeUnixMs) / traceDuration;\n  const relativeCutoffRight = (trace.endTimeUnixMs - viewport.endTimeUnixMs) / traceDuration;\n\n  const spanColorGenerator = useCallback(\n    (span: Span) => getSpanColor(muiTheme, chartsTheme, options.visual?.palette?.mode, span),\n    [muiTheme, chartsTheme, options.visual?.palette?.mode]\n  );\n\n  useEffect(() => {\n    if (!canvasRef.current || !width || !height) return;\n\n    const ctx = canvasRef.current.getContext('2d');\n    if (!ctx) return;\n\n    drawSpans(ctx, width, height, trace, spanColorGenerator);\n  }, [width, height, trace, spanColorGenerator]);\n\n  const translateCursorToTime = (e: ReactMouseEvent | MouseEvent): number => {\n    if (!canvasRef.current || !width) return 0;\n    // e.nativeEvent.offsetX doesn't work when sliding over a tick box\n    const offsetX = e.clientX - canvasRef.current.getBoundingClientRect().left;\n    return trace.startTimeUnixMs + (offsetX / width) * traceDuration;\n  };\n\n  const handleMouseDown = (e: ReactMouseEvent<HTMLDivElement>): void => {\n    e.preventDefault();\n    if (!(e.target instanceof HTMLElement)) return;\n\n    const isDefaultViewport =\n      viewport.startTimeUnixMs === trace.startTimeUnixMs && viewport.endTimeUnixMs === trace.endTimeUnixMs;\n    const elem = e.target.dataset['elem'];\n    const cursor = translateCursorToTime(e);\n\n    if (elem === 'resizerLeft') {\n      setMouseState({ type: 'resize', fixedPoint: viewport.endTimeUnixMs });\n    } else if (elem === 'resizerRight') {\n      setMouseState({ type: 'resize', fixedPoint: viewport.startTimeUnixMs });\n    } else if (elem === 'cutoffBox' || isDefaultViewport) {\n      setMouseState({ type: 'resize', fixedPoint: cursor });\n      setViewport({ startTimeUnixMs: cursor, endTimeUnixMs: cursor });\n    } else {\n      setMouseState({\n        type: 'drag',\n        start: cursor - viewport.startTimeUnixMs,\n        end: viewport.endTimeUnixMs - cursor,\n      });\n    }\n  };\n\n  // need stable reference for window.removeEventListener() in useEffect() below\n  const handleMouseMove = useEvent((e: MouseEvent) => {\n    e.preventDefault();\n\n    switch (mouseState.type) {\n      case 'none':\n        return;\n\n      case 'resize': {\n        const pointA = mouseState.fixedPoint;\n        const pointB = translateCursorToTime(e);\n\n        let start, end;\n        if (pointA < pointB) {\n          start = pointA;\n          end = pointB;\n        } else {\n          start = pointB;\n          end = pointA;\n        }\n\n        setViewport({\n          startTimeUnixMs: Math.max(start, trace.startTimeUnixMs),\n          endTimeUnixMs: Math.min(end, trace.endTimeUnixMs),\n        });\n        return;\n      }\n\n      case 'drag': {\n        // avoid using e.movementX here, as it skips events in chrome,\n        // resulting in the mouse pointer moving faster than the viewport box\n        const { start, end } = mouseState;\n        let cursor = translateCursorToTime(e);\n\n        if (cursor - start < trace.startTimeUnixMs) {\n          cursor = trace.startTimeUnixMs + start;\n        }\n        if (cursor + end > trace.endTimeUnixMs) {\n          cursor = trace.endTimeUnixMs - end;\n        }\n\n        setViewport({\n          startTimeUnixMs: cursor - start,\n          endTimeUnixMs: cursor + end,\n        });\n        return;\n      }\n    }\n  });\n\n  // need stable reference for window.removeEventListener() in useEffect() below\n  const handleMouseUp = useEvent((e: MouseEvent) => {\n    e.preventDefault();\n    setMouseState({ type: 'none' });\n\n    // reset viewport if start === end, i.e. a click without movement\n    if (viewport.startTimeUnixMs === viewport.endTimeUnixMs) {\n      setViewport({ startTimeUnixMs: trace.startTimeUnixMs, endTimeUnixMs: trace.endTimeUnixMs });\n    }\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 = mouseState.type === 'resize' ? 'col-resize' : 'move';\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 (mouseState.type === 'none') {\n      stopMouseAction();\n    } else {\n      startMouseAction();\n    }\n\n    return stopMouseAction;\n  }, [mouseState, handleMouseMove, handleMouseUp]);\n\n  return (\n    <Box ref={wrapperRef} sx={{ position: 'relative', height }} onMouseDown={handleMouseDown}>\n      <canvas ref={canvasRef} width={width} height={height} style={{ position: 'absolute' }} />\n      <Ticks />\n      <CutoffBox data-elem=\"cutoffBox\" style={{ left: 0, width: `${relativeCutoffLeft * 100}%` }} />\n      <Resizer data-elem=\"resizerLeft\" style={{ left: `${relativeCutoffLeft * 100}%` }} />\n      <Resizer data-elem=\"resizerRight\" style={{ right: `${relativeCutoffRight * 100}%` }} />\n      <CutoffBox data-elem=\"cutoffBox\" style={{ right: 0, width: `${relativeCutoffRight * 100}%` }} />\n    </Box>\n  );\n}\n\nconst CutoffBox = styled(Box)({\n  position: 'absolute',\n  height: '100%',\n  backgroundColor: 'rgba(225, 225, 225, .5)',\n});\n\nconst Resizer = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  height: '100%',\n  backgroundColor: theme.palette.divider,\n  width: '2px',\n  cursor: 'col-resize',\n\n  // increase clickable area from 2px to 8px\n  '&:before': {\n    position: 'absolute',\n    width: '8px',\n    left: '-3px',\n    top: 0,\n    bottom: 0,\n    content: '\" \"',\n    zIndex: 1, // without zIndex, the cutoff boxes partially hide this element\n  },\n}));\n"],"names":["Box","styled","useTheme","useResizeObserver","useEffect","useRef","useState","useCallback","useEvent","useChartsTheme","Ticks","getSpanColor","drawSpans","CANVAS_HEIGHT","Canvas","props","options","trace","viewport","setViewport","muiTheme","chartsTheme","width","ref","wrapperRef","height","canvasRef","mouseState","setMouseState","type","traceDuration","endTimeUnixMs","startTimeUnixMs","relativeCutoffLeft","relativeCutoffRight","spanColorGenerator","span","visual","palette","mode","current","ctx","getContext","translateCursorToTime","e","offsetX","clientX","getBoundingClientRect","left","handleMouseDown","preventDefault","target","HTMLElement","isDefaultViewport","elem","dataset","cursor","fixedPoint","start","end","handleMouseMove","pointA","pointB","Math","max","min","handleMouseUp","startMouseAction","window","addEventListener","document","body","style","stopMouseAction","removeEventListener","sx","position","onMouseDown","canvas","CutoffBox","data-elem","Resizer","right","backgroundColor","theme","divider","top","bottom","content","zIndex"],"mappings":"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"}

package/lib/TracingGanttChart/TracingGanttChart.js

@@ -91,8 +91,10 @@ import { TraceDetails } from './TraceDetails';
                         onMove: setTableWidth
                     }),
                     /*#__PURE__*/ _jsx(Box, {
+                        style: {
+                            width: `${(1 - tableWidth) * 100}%`
+                        },
                         sx: {
-                            width: `${(1 - tableWidth) * 100}%`,
                             overflow: 'auto'
                         },
                         children: /*#__PURE__*/ _jsx(DetailPane, {

package/lib/TracingGanttChart/TracingGanttChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/TracingGanttChart/TracingGanttChart.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { Box, Stack, useTheme } from '@mui/material';\nimport { otlptracev1 } from '@perses-dev/core';\nimport { CustomLinks, TracingGanttChartOptions } from '../gantt-chart-model';\nimport { MiniGanttChart } from './MiniGanttChart/MiniGanttChart';\nimport { DetailPane } from './DetailPane/DetailPane';\nimport { Viewport } from './utils';\nimport { GanttTable } from './GanttTable/GanttTable';\nimport { GanttTableProvider } from './GanttTable/GanttTableProvider';\nimport { ResizableDivider } from './GanttTable/ResizableDivider';\nimport { getTraceModel, Span } from './trace';\nimport { TraceDetails } from './TraceDetails';\n\nexport interface TracingGanttChartProps {\n  options: TracingGanttChartOptions;\n  customLinks?: CustomLinks;\n  trace: otlptracev1.TracesData;\n}\n\n/**\n * The core GanttChart panel for Perses.\n *\n * The UI/UX of this panel is based on Jaeger UI, licensed under Apache License, Version 2.0.\n * https://github.com/jaegertracing/jaeger-ui\n */\nexport function TracingGanttChart(props: TracingGanttChartProps): ReactElement {\n  const { options, customLinks, trace: otlpTrace } = props;\n\n  const theme = useTheme();\n  const trace = useMemo(() => {\n    try {\n      return getTraceModel(otlpTrace);\n    } catch (e) {\n      throw new Error(`Error: unable to parse trace: ${e}`);\n    }\n  }, [otlpTrace]);\n  const [viewport, setViewport] = useState<Viewport>({\n    startTimeUnixMs: trace.startTimeUnixMs,\n    endTimeUnixMs: trace.endTimeUnixMs,\n  });\n  const [selectedSpan, setSelectedSpan] = useState<Span | undefined>(() =>\n    options.selectedSpanId ? trace.spanById.get(options.selectedSpanId) : undefined\n  );\n\n  const ganttChart = useRef<HTMLDivElement>(null);\n  // tableWidth only comes to effect if the detail pane is visible.\n  // setTableWidth() is only called by <ResizableDivider />\n  const [tableWidth, setTableWidth] = useState<number>(0.82);\n  const gap = 2;\n\n  return (\n    <Stack ref={ganttChart} direction=\"row\" sx={{ height: '100%', minHeight: '240px', gap }}>\n      <Stack sx={{ flexGrow: 1, gap }}>\n        <TraceDetails trace={trace} />\n        <MiniGanttChart options={options} trace={trace} viewport={viewport} setViewport={setViewport} />\n        <GanttTableProvider>\n          <GanttTable\n            options={options}\n            customLinks={customLinks}\n            trace={trace}\n            viewport={viewport}\n            selectedSpan={selectedSpan}\n            onSpanClick={setSelectedSpan}\n          />\n        </GanttTableProvider>\n      </Stack>\n      {selectedSpan && (\n        <>\n          <ResizableDivider parentRef={ganttChart} spacing={parseInt(theme.spacing(gap))} onMove={setTableWidth} />\n          <Box sx={{ width: `${(1 - tableWidth) * 100}%`, overflow: 'auto' }}>\n            <DetailPane\n              customLinks={customLinks}\n              trace={trace}\n              span={selectedSpan}\n              onCloseBtnClick={() => setSelectedSpan(undefined)}\n            />\n          </Box>\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["useMemo","useRef","useState","Box","Stack","useTheme","MiniGanttChart","DetailPane","GanttTable","GanttTableProvider","ResizableDivider","getTraceModel","TraceDetails","TracingGanttChart","props","options","customLinks","trace","otlpTrace","theme","e","Error","viewport","setViewport","startTimeUnixMs","endTimeUnixMs","selectedSpan","setSelectedSpan","selectedSpanId","spanById","get","undefined","ganttChart","tableWidth","setTableWidth","gap","ref","direction","sx","height","minHeight","flexGrow","onSpanClick","parentRef","spacing","parseInt","onMove","width","overflow","span","onCloseBtnClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAChE,SAASC,GAAG,EAAEC,KAAK,EAAEC,QAAQ,QAAQ,gBAAgB;AAGrD,SAASC,cAAc,QAAQ,kCAAkC;AACjE,SAASC,UAAU,QAAQ,0BAA0B;AAErD,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,aAAa,QAAc,UAAU;AAC9C,SAASC,YAAY,QAAQ,iBAAiB;AAQ9C;;;;;CAKC,GACD,OAAO,SAASC,kBAAkBC,KAA6B;IAC7D,MAAM,EAAEC,OAAO,EAAEC,WAAW,EAAEC,OAAOC,SAAS,EAAE,GAAGJ;IAEnD,MAAMK,QAAQd;IACd,MAAMY,QAAQjB,QAAQ;QACpB,IAAI;YACF,OAAOW,cAAcO;QACvB,EAAE,OAAOE,GAAG;YACV,MAAM,IAAIC,MAAM,CAAC,8BAA8B,EAAED,GAAG;QACtD;IACF,GAAG;QAACF;KAAU;IACd,MAAM,CAACI,UAAUC,YAAY,GAAGrB,SAAmB;QACjDsB,iBAAiBP,MAAMO,eAAe;QACtCC,eAAeR,MAAMQ,aAAa;IACpC;IACA,MAAM,CAACC,cAAcC,gBAAgB,GAAGzB,SAA2B,IACjEa,QAAQa,cAAc,GAAGX,MAAMY,QAAQ,CAACC,GAAG,CAACf,QAAQa,cAAc,IAAIG;IAGxE,MAAMC,aAAa/B,OAAuB;IAC1C,iEAAiE;IACjE,yDAAyD;IACzD,MAAM,CAACgC,YAAYC,cAAc,GAAGhC,SAAiB;IACrD,MAAMiC,MAAM;IAEZ,qBACE,MAAC/B;QAAMgC,KAAKJ;QAAYK,WAAU;QAAMC,IAAI;YAAEC,QAAQ;YAAQC,WAAW;YAASL;QAAI;;0BACpF,MAAC/B;gBAAMkC,IAAI;oBAAEG,UAAU;oBAAGN;gBAAI;;kCAC5B,KAACvB;wBAAaK,OAAOA;;kCACrB,KAACX;wBAAeS,SAASA;wBAASE,OAAOA;wBAAOK,UAAUA;wBAAUC,aAAaA;;kCACjF,KAACd;kCACC,cAAA,KAACD;4BACCO,SAASA;4BACTC,aAAaA;4BACbC,OAAOA;4BACPK,UAAUA;4BACVI,cAAcA;4BACdgB,aAAaf;;;;;YAIlBD,8BACC;;kCACE,KAAChB;wBAAiBiC,WAAWX;wBAAYY,SAASC,SAAS1B,MAAMyB,OAAO,CAACT;wBAAOW,QAAQZ;;kCACxF,KAAC/B;wBAAImC,IAAI;4BAAES,OAAO,GAAG,AAAC,CAAA,IAAId,UAAS,IAAK,IAAI,CAAC,CAAC;4BAAEe,UAAU;wBAAO;kCAC/D,cAAA,KAACzC;4BACCS,aAAaA;4BACbC,OAAOA;4BACPgC,MAAMvB;4BACNwB,iBAAiB,IAAMvB,gBAAgBI;;;;;;;AAOrD"}
+{"version":3,"sources":["../../../src/TracingGanttChart/TracingGanttChart.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { Box, Stack, useTheme } from '@mui/material';\nimport { otlptracev1 } from '@perses-dev/core';\nimport { CustomLinks, TracingGanttChartOptions } from '../gantt-chart-model';\nimport { MiniGanttChart } from './MiniGanttChart/MiniGanttChart';\nimport { DetailPane } from './DetailPane/DetailPane';\nimport { Viewport } from './utils';\nimport { GanttTable } from './GanttTable/GanttTable';\nimport { GanttTableProvider } from './GanttTable/GanttTableProvider';\nimport { ResizableDivider } from './GanttTable/ResizableDivider';\nimport { getTraceModel, Span } from './trace';\nimport { TraceDetails } from './TraceDetails';\n\nexport interface TracingGanttChartProps {\n  options: TracingGanttChartOptions;\n  customLinks?: CustomLinks;\n  trace: otlptracev1.TracesData;\n}\n\n/**\n * The core GanttChart panel for Perses.\n *\n * The UI/UX of this panel is based on Jaeger UI, licensed under Apache License, Version 2.0.\n * https://github.com/jaegertracing/jaeger-ui\n */\nexport function TracingGanttChart(props: TracingGanttChartProps): ReactElement {\n  const { options, customLinks, trace: otlpTrace } = props;\n\n  const theme = useTheme();\n  const trace = useMemo(() => {\n    try {\n      return getTraceModel(otlpTrace);\n    } catch (e) {\n      throw new Error(`Error: unable to parse trace: ${e}`);\n    }\n  }, [otlpTrace]);\n  const [viewport, setViewport] = useState<Viewport>({\n    startTimeUnixMs: trace.startTimeUnixMs,\n    endTimeUnixMs: trace.endTimeUnixMs,\n  });\n  const [selectedSpan, setSelectedSpan] = useState<Span | undefined>(() =>\n    options.selectedSpanId ? trace.spanById.get(options.selectedSpanId) : undefined\n  );\n\n  const ganttChart = useRef<HTMLDivElement>(null);\n  // tableWidth only comes to effect if the detail pane is visible.\n  // setTableWidth() is only called by <ResizableDivider />\n  const [tableWidth, setTableWidth] = useState<number>(0.82);\n  const gap = 2;\n\n  return (\n    <Stack ref={ganttChart} direction=\"row\" sx={{ height: '100%', minHeight: '240px', gap }}>\n      <Stack sx={{ flexGrow: 1, gap }}>\n        <TraceDetails trace={trace} />\n        <MiniGanttChart options={options} trace={trace} viewport={viewport} setViewport={setViewport} />\n        <GanttTableProvider>\n          <GanttTable\n            options={options}\n            customLinks={customLinks}\n            trace={trace}\n            viewport={viewport}\n            selectedSpan={selectedSpan}\n            onSpanClick={setSelectedSpan}\n          />\n        </GanttTableProvider>\n      </Stack>\n      {selectedSpan && (\n        <>\n          <ResizableDivider parentRef={ganttChart} spacing={parseInt(theme.spacing(gap))} onMove={setTableWidth} />\n          <Box style={{ width: `${(1 - tableWidth) * 100}%` }} sx={{ overflow: 'auto' }}>\n            <DetailPane\n              customLinks={customLinks}\n              trace={trace}\n              span={selectedSpan}\n              onCloseBtnClick={() => setSelectedSpan(undefined)}\n            />\n          </Box>\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["useMemo","useRef","useState","Box","Stack","useTheme","MiniGanttChart","DetailPane","GanttTable","GanttTableProvider","ResizableDivider","getTraceModel","TraceDetails","TracingGanttChart","props","options","customLinks","trace","otlpTrace","theme","e","Error","viewport","setViewport","startTimeUnixMs","endTimeUnixMs","selectedSpan","setSelectedSpan","selectedSpanId","spanById","get","undefined","ganttChart","tableWidth","setTableWidth","gap","ref","direction","sx","height","minHeight","flexGrow","onSpanClick","parentRef","spacing","parseInt","onMove","style","width","overflow","span","onCloseBtnClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAChE,SAASC,GAAG,EAAEC,KAAK,EAAEC,QAAQ,QAAQ,gBAAgB;AAGrD,SAASC,cAAc,QAAQ,kCAAkC;AACjE,SAASC,UAAU,QAAQ,0BAA0B;AAErD,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,aAAa,QAAc,UAAU;AAC9C,SAASC,YAAY,QAAQ,iBAAiB;AAQ9C;;;;;CAKC,GACD,OAAO,SAASC,kBAAkBC,KAA6B;IAC7D,MAAM,EAAEC,OAAO,EAAEC,WAAW,EAAEC,OAAOC,SAAS,EAAE,GAAGJ;IAEnD,MAAMK,QAAQd;IACd,MAAMY,QAAQjB,QAAQ;QACpB,IAAI;YACF,OAAOW,cAAcO;QACvB,EAAE,OAAOE,GAAG;YACV,MAAM,IAAIC,MAAM,CAAC,8BAA8B,EAAED,GAAG;QACtD;IACF,GAAG;QAACF;KAAU;IACd,MAAM,CAACI,UAAUC,YAAY,GAAGrB,SAAmB;QACjDsB,iBAAiBP,MAAMO,eAAe;QACtCC,eAAeR,MAAMQ,aAAa;IACpC;IACA,MAAM,CAACC,cAAcC,gBAAgB,GAAGzB,SAA2B,IACjEa,QAAQa,cAAc,GAAGX,MAAMY,QAAQ,CAACC,GAAG,CAACf,QAAQa,cAAc,IAAIG;IAGxE,MAAMC,aAAa/B,OAAuB;IAC1C,iEAAiE;IACjE,yDAAyD;IACzD,MAAM,CAACgC,YAAYC,cAAc,GAAGhC,SAAiB;IACrD,MAAMiC,MAAM;IAEZ,qBACE,MAAC/B;QAAMgC,KAAKJ;QAAYK,WAAU;QAAMC,IAAI;YAAEC,QAAQ;YAAQC,WAAW;YAASL;QAAI;;0BACpF,MAAC/B;gBAAMkC,IAAI;oBAAEG,UAAU;oBAAGN;gBAAI;;kCAC5B,KAACvB;wBAAaK,OAAOA;;kCACrB,KAACX;wBAAeS,SAASA;wBAASE,OAAOA;wBAAOK,UAAUA;wBAAUC,aAAaA;;kCACjF,KAACd;kCACC,cAAA,KAACD;4BACCO,SAASA;4BACTC,aAAaA;4BACbC,OAAOA;4BACPK,UAAUA;4BACVI,cAAcA;4BACdgB,aAAaf;;;;;YAIlBD,8BACC;;kCACE,KAAChB;wBAAiBiC,WAAWX;wBAAYY,SAASC,SAAS1B,MAAMyB,OAAO,CAACT;wBAAOW,QAAQZ;;kCACxF,KAAC/B;wBAAI4C,OAAO;4BAAEC,OAAO,GAAG,AAAC,CAAA,IAAIf,UAAS,IAAK,IAAI,CAAC,CAAC;wBAAC;wBAAGK,IAAI;4BAAEW,UAAU;wBAAO;kCAC1E,cAAA,KAAC1C;4BACCS,aAAaA;4BACbC,OAAOA;4BACPiC,MAAMxB;4BACNyB,iBAAiB,IAAMxB,gBAAgBI;;;;;;;AAOrD"}

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

@@ -152,9 +152,13 @@ function AttributeItem(props) {
     });
 }
 function renderAttributeValue(value) {
-    if ('stringValue' in value) return value.stringValue.length > 0 ? value.stringValue : '<empty string>';
+    if ('stringValue' in value) return value.stringValue || '<empty string>';
     if ('intValue' in value) return value.intValue;
-    if ('boolValue' in value) return value.boolValue.toString();
-    if ('arrayValue' in value) return value.arrayValue.values.map(renderAttributeValue).join(', ');
+    if ('doubleValue' in value) return String(value.doubleValue);
+    if ('boolValue' in value) return String(value.boolValue);
+    if ('arrayValue' in value) {
+        const values = value.arrayValue.values;
+        return values && values.length > 0 ? values.map(renderAttributeValue).join(', ') : '<empty array>';
+    }
     return 'unknown';
 }

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

@@ -23,7 +23,7 @@ Object.defineProperty(exports, "ResizableDivider", {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
-const _core = require("@perses-dev/core");
+const _pluginsystem = require("@perses-dev/plugin-system");
 function ResizableDivider(props) {
     const { parentRef, spacing = 0, onMove } = props;
     const [isResizing, setResizing] = (0, _react.useState)(false);
@@ -33,7 +33,7 @@ function ResizableDivider(props) {
         setResizing(true);
     };
     // need stable reference for window.removeEventListener() in useEffect() below
-    const handleMouseMove = (0, _core.useEvent)((e)=>{
+    const handleMouseMove = (0, _pluginsystem.useEvent)((e)=>{
         if (!parentRef.current) return;
         const offsetX = e.clientX - parentRef.current.getBoundingClientRect().left + spacing;
         const leftPercent = offsetX / parentRef.current.getBoundingClientRect().width;
@@ -42,7 +42,7 @@ function ResizableDivider(props) {
         }
     });
     // need stable reference for window.removeEventListener() in useEffect() below
-    const handleMouseUp = (0, _core.useEvent)(()=>{
+    const handleMouseUp = (0, _pluginsystem.useEvent)(()=>{
         setResizing(false);
     });
     // capture mouseMove and mouseUp outside the element by attaching them to the window object

package/lib/cjs/TracingGanttChart/MiniGanttChart/Canvas.js

@@ -24,7 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _useresizeobserver = /*#__PURE__*/ _interop_require_default(require("use-resize-observer"));
 const _react = require("react");
-const _core = require("@perses-dev/core");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _components = require("@perses-dev/components");
 const _Ticks = require("../Ticks");
 const _utils = require("../utils");
@@ -106,7 +106,7 @@ function Canvas(props) {
         }
     };
     // need stable reference for window.removeEventListener() in useEffect() below
-    const handleMouseMove = (0, _core.useEvent)((e)=>{
+    const handleMouseMove = (0, _pluginsystem.useEvent)((e)=>{
         e.preventDefault();
         switch(mouseState.type){
             case 'none':
@@ -150,7 +150,7 @@ function Canvas(props) {
         }
     });
     // need stable reference for window.removeEventListener() in useEffect() below
-    const handleMouseUp = (0, _core.useEvent)((e)=>{
+    const handleMouseUp = (0, _pluginsystem.useEvent)((e)=>{
         e.preventDefault();
         setMouseState({
             type: 'none'

package/lib/cjs/TracingGanttChart/TracingGanttChart.js

@@ -96,8 +96,10 @@ function TracingGanttChart(props) {
                         onMove: setTableWidth
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                        style: {
+                            width: `${(1 - tableWidth) * 100}%`
+                        },
                         sx: {
-                            width: `${(1 - tableWidth) * 100}%`,
                             overflow: 'auto'
                         },
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DetailPane.DetailPane, {

package/mf-manifest.json

@@ -5,11 +5,11 @@
     "name": "TracingGanttChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.10.0",
+      "buildVersion": "0.11.0",
       "buildName": "@perses-dev/tracing-gantt-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/TracingGanttChart.b94e3f55.js",
+      "name": "__mf/js/TracingGanttChart.4febbfb4.js",
       "path": "",
       "type": "global"
     },
@@ -87,14 +87,14 @@
     {
       "id": "TracingGanttChart:@perses-dev/components",
       "name": "@perses-dev/components",
-      "version": "0.52.0",
+      "version": "0.53.0-beta.1",
       "singleton": true,
-      "requiredVersion": "^0.52.0",
+      "requiredVersion": "^0.53.0-beta.1",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/854.45948aa2.js"
+            "__mf/js/async/813.de2c52ae.js"
           ]
         },
         "css": {
@@ -106,14 +106,14 @@
     {
       "id": "TracingGanttChart:@perses-dev/plugin-system",
       "name": "@perses-dev/plugin-system",
-      "version": "0.52.0",
+      "version": "0.53.0-beta.1",
       "singleton": true,
-      "requiredVersion": "^0.52.0",
+      "requiredVersion": "^0.53.0-beta.1",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/109.c4d43a49.js"
+            "__mf/js/async/711.1f4a48d0.js"
           ]
         },
         "css": {
@@ -132,7 +132,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/75.a3a29681.js"
+            "__mf/js/async/75.4d502b5c.js"
           ]
         },
         "css": {
@@ -245,18 +245,18 @@
       "assets": {
         "js": {
           "sync": [
-            "__mf/js/async/623.cd606b20.js",
-            "__mf/js/async/387.23da505f.js",
-            "__mf/js/async/897.f1628ec5.js",
+            "__mf/js/async/177.ab9a582b.js",
+            "__mf/js/async/783.976dc72b.js",
+            "__mf/js/async/971.0902cbf8.js",
             "__mf/js/async/118.c1138755.js",
-            "__mf/js/async/__federation_expose_TracingGanttChart.0037e7cb.js"
+            "__mf/js/async/__federation_expose_TracingGanttChart.13966d2e.js"
           ],
           "async": [
-            "__mf/js/async/238.5c460cb2.js",
+            "__mf/js/async/238.813da7cb.js",
             "__mf/js/async/224.670da1e3.js",
             "__mf/js/async/292.4821b1b1.js",
             "__mf/js/async/814.c33b5f31.js",
-            "__mf/js/async/706.087513a7.js",
+            "__mf/js/async/63.0b6a8d45.js",
             "__mf/js/async/lib-router.ab6beae3.js",
             "__mf/js/async/488.2d364feb.js"
           ]
@@ -264,8 +264,8 @@
         "css": {
           "sync": [],
           "async": [
-            "__mf/css/async/341.6c6463ea.css",
-            "__mf/css/async/263.6c6463ea.css"
+            "__mf/css/async/341.d3010b86.css",
+            "__mf/css/async/263.d3010b86.css"
           ]
         }
       },

package/mf-stats.json

@@ -5,11 +5,11 @@
     "name": "TracingGanttChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.10.0",
+      "buildVersion": "0.11.0",
       "buildName": "@perses-dev/tracing-gantt-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/TracingGanttChart.b94e3f55.js",
+      "name": "__mf/js/TracingGanttChart.4febbfb4.js",
       "path": "",
       "type": "global"
     },
@@ -95,17 +95,17 @@
     },
     {
       "singleton": true,
-      "requiredVersion": "^0.52.0",
+      "requiredVersion": "^0.53.0-beta.1",
       "shareScope": "default",
       "name": "@perses-dev/components",
-      "version": "0.52.0",
+      "version": "0.53.0-beta.1",
       "eager": false,
       "id": "TracingGanttChart:@perses-dev/components",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/854.45948aa2.js"
+            "__mf/js/async/813.de2c52ae.js"
           ]
         },
         "css": {
@@ -119,17 +119,17 @@
     },
     {
       "singleton": true,
-      "requiredVersion": "^0.52.0",
+      "requiredVersion": "^0.53.0-beta.1",
       "shareScope": "default",
       "name": "@perses-dev/plugin-system",
-      "version": "0.52.0",
+      "version": "0.53.0-beta.1",
       "eager": false,
       "id": "TracingGanttChart:@perses-dev/plugin-system",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/109.c4d43a49.js"
+            "__mf/js/async/711.1f4a48d0.js"
           ]
         },
         "css": {
@@ -153,7 +153,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/75.a3a29681.js"
+            "__mf/js/async/75.4d502b5c.js"
           ]
         },
         "css": {
@@ -294,18 +294,18 @@
       "assets": {
         "js": {
           "sync": [
-            "__mf/js/async/623.cd606b20.js",
-            "__mf/js/async/387.23da505f.js",
-            "__mf/js/async/897.f1628ec5.js",
+            "__mf/js/async/177.ab9a582b.js",
+            "__mf/js/async/783.976dc72b.js",
+            "__mf/js/async/971.0902cbf8.js",
             "__mf/js/async/118.c1138755.js",
-            "__mf/js/async/__federation_expose_TracingGanttChart.0037e7cb.js"
+            "__mf/js/async/__federation_expose_TracingGanttChart.13966d2e.js"
           ],
           "async": [
-            "__mf/js/async/238.5c460cb2.js",
+            "__mf/js/async/238.813da7cb.js",
             "__mf/js/async/224.670da1e3.js",
             "__mf/js/async/292.4821b1b1.js",
             "__mf/js/async/814.c33b5f31.js",
-            "__mf/js/async/706.087513a7.js",
+            "__mf/js/async/63.0b6a8d45.js",
             "__mf/js/async/lib-router.ab6beae3.js",
             "__mf/js/async/488.2d364feb.js"
           ]
@@ -313,8 +313,8 @@
         "css": {
           "sync": [],
           "async": [
-            "__mf/css/async/341.6c6463ea.css",
-            "__mf/css/async/263.6c6463ea.css"
+            "__mf/css/async/341.d3010b86.css",
+            "__mf/css/async/263.d3010b86.css"
           ]
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/tracing-gantt-chart-plugin",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "homepage": "https://github.com/perses/plugins/blob/main/README.md",
   "repository": {
     "type": "git",
@@ -30,9 +30,9 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@hookform/resolvers": "^3.2.0",
-    "@perses-dev/components": "^0.52.0",
-    "@perses-dev/core": "^0.52.0",
-    "@perses-dev/plugin-system": "^0.52.0",
+    "@perses-dev/components": "^0.53.0-beta.1",
+    "@perses-dev/core": "^0.53.0-beta.1",
+    "@perses-dev/plugin-system": "^0.53.0-beta.1",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "echarts": "5.5.0",

package/__mf/css/async/263.6c6463ea.css

@@ -1 +0,0 @@
-@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:300;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-ext-300-normal.abcc64a9.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-300-normal.322bdf14.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:300;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-300-normal.c5195215.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-300-normal.322bdf14.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:400;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-ext-400-normal.6ebed106.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-400-normal.63513b00.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:400;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-400-normal.b7ffde23.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-400-normal.63513b00.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:700;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-ext-700-normal.8697d1d5.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-700-normal.bb27db94.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:700;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-700-normal.d5eb20bc.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-700-normal.bb27db94.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:900;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-ext-900-normal.20a2b415.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-900-normal.a27049a3.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:900;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-900-normal.d884a71c.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-900-normal.a27049a3.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

package/__mf/css/async/341.6c6463ea.css

@@ -1 +0,0 @@
-@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:300;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-ext-300-normal.abcc64a9.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-300-normal.322bdf14.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:300;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-300-normal.c5195215.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-300-normal.322bdf14.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:400;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-ext-400-normal.6ebed106.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-400-normal.63513b00.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:400;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-400-normal.b7ffde23.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-400-normal.63513b00.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:700;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-ext-700-normal.8697d1d5.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-700-normal.bb27db94.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:700;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-700-normal.d5eb20bc.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-700-normal.bb27db94.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:900;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-ext-900-normal.20a2b415.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-900-normal.a27049a3.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:900;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-900-normal.d884a71c.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-900-normal.a27049a3.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

package/__mf/css/async/759.6c6463ea.css

@@ -1 +0,0 @@
-@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:300;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-ext-300-normal.abcc64a9.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-300-normal.322bdf14.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:300;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-300-normal.c5195215.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-300-normal.322bdf14.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:400;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-ext-400-normal.6ebed106.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-400-normal.63513b00.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:400;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-400-normal.b7ffde23.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-400-normal.63513b00.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:700;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-ext-700-normal.8697d1d5.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-700-normal.bb27db94.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:700;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-700-normal.d5eb20bc.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-700-normal.bb27db94.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:900;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-ext-900-normal.20a2b415.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-900-normal.a27049a3.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:900;src:url(/plugins/TracingGanttChart/__mf/font/lato-latin-900-normal.d884a71c.woff2)format("woff2"),url(/plugins/TracingGanttChart/__mf/font/lato-all-900-normal.a27049a3.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}