@perses-dev/tracing-gantt-chart-plugin 0.12.1 → 0.13.0-beta.1

package/lib/TracingGanttChart/GanttTable/GanttTable.js

@@ -12,36 +12,83 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Virtuoso } from 'react-virtuoso';
-import { useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Box, useTheme } from '@mui/material';
+import { forEachSpan } from '../trace';
 import { useGanttTableContext } from './GanttTableProvider';
 import { GanttTableRow } from './GanttTableRow';
 import { GanttTableHeader } from './GanttTableHeader';
 import { ResizableDivider } from './ResizableDivider';
 export function GanttTable(props) {
-    const { options, customLinks, trace, viewport, selectedSpan, onSpanClick } = props;
-    const { collapsedSpans, setVisibleSpans } = useGanttTableContext();
+    const { options, customLinks, trace, viewport, selectedSpan, onSpanClick, matchingSpanIds, focusedSpanId } = props;
+    const { collapsedSpans, setCollapsedSpans, setVisibleSpans } = useGanttTableContext();
     const [nameColumnWidth, setNameColumnWidth] = useState(0.25);
     const tableRef = useRef(null);
+    const virtuosoRef = useRef(null);
     const theme = useTheme();
+    // Recursively flatten the span tree to a list of rows, hiding collapsed child spans.
     const rows = useMemo(()=>{
         const rows = [];
-        for (const rootSpan of trace.rootSpans){
-            treeToRows(rows, rootSpan, collapsedSpans);
-        }
+        forEachSpan(trace.rootSpans, (span)=>{
+            rows.push(span);
+            if (collapsedSpans.has(span.spanId)) {
+                return false;
+            }
+        });
         return rows;
     }, [
         trace.rootSpans,
         collapsedSpans
     ]);
-    const selectedSpanIndex = useMemo(()=>{
-        if (!selectedSpan) return undefined;
-        for(let i = 0; i < rows.length; i++){
-            if (rows[i]?.spanId === selectedSpan.spanId) {
-                return i;
-            }
+    const matchingSpanIdSet = useMemo(()=>new Set(matchingSpanIds ?? []), [
+        matchingSpanIds
+    ]);
+    // Auto-expand collapsed ancestors when focusing a search match
+    useEffect(()=>{
+        if (!focusedSpanId) return;
+        const span = trace.spanById.get(focusedSpanId);
+        if (!span) return;
+        const ancestorIds = new Set();
+        let parent = span.parentSpan;
+        while(parent){
+            ancestorIds.add(parent.spanId);
+            parent = parent.parentSpan;
+        }
+        if (ancestorIds.size > 0) {
+            setCollapsedSpans((prev)=>{
+                const next = new Set(prev);
+                let changed = false;
+                for (const id of ancestorIds){
+                    if (next.delete(id)) changed = true;
+                }
+                return changed ? next : prev;
+            });
         }
-        return undefined;
+    }, [
+        focusedSpanId,
+        trace.spanById,
+        setCollapsedSpans
+    ]);
+    // Scroll to focused span when using prev/next buttons in search bar.
+    useEffect(()=>{
+        if (!focusedSpanId || !virtuosoRef.current) return;
+        const index = rows.findIndex((r)=>r.spanId === focusedSpanId);
+        if (index >= 0) {
+            virtuosoRef.current.scrollToIndex({
+                index,
+                align: 'center'
+            });
+        }
+    }, [
+        focusedSpanId,
+        rows
+    ]);
+    // Set the top most index in the Virtuoso table to the selected span
+    // Required e.g. when navigating from another page.
+    const initialTopMostSpanIndex = useMemo(()=>{
+        if (!selectedSpan) return 0;
+        const index = rows.findIndex((r)=>r.spanId === selectedSpan.spanId);
+        return index >= 0 ? index : 0;
     }, [
         rows,
         selectedSpan
@@ -75,14 +122,17 @@ export function GanttTable(props) {
                 divider: divider
             }),
             /*#__PURE__*/ _jsx(Virtuoso, {
+                ref: virtuosoRef,
                 data: rows,
-                initialTopMostItemIndex: selectedSpanIndex ?? 0,
+                initialTopMostItemIndex: initialTopMostSpanIndex,
                 itemContent: (_, span)=>/*#__PURE__*/ _jsx(GanttTableRow, {
                         options: options,
                         customLinks: customLinks,
                         span: span,
                         viewport: viewport,
                         selected: span === selectedSpan,
+                        matched: matchingSpanIdSet.has(span.spanId),
+                        focused: span.spanId === focusedSpanId,
                         nameColumnWidth: nameColumnWidth,
                         divider: divider,
                         onClick: onSpanClick
@@ -92,16 +142,5 @@ export function GanttTable(props) {
         ]
     });
 }
-/**
- * treeToRows recursively transforms the span tree to a list of rows and
- * hides collapsed child spans.
- */ function treeToRows(rows, span, collapsedSpans) {
-    rows.push(span);
-    if (!collapsedSpans.includes(span.spanId)) {
-        for (const child of span.childSpans){
-            treeToRows(rows, child, collapsedSpans);
-        }
-    }
-}
 
 //# sourceMappingURL=GanttTable.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/GanttTable.tsx"],"sourcesContent":["// Copyright 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 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, VirtuosoHandle, ListRange } from 'react-virtuoso';\nimport { ReactElement, useEffect, 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, forEachSpan } 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  matchingSpanIds?: string[];\n  focusedSpanId?: string;\n}\n\nexport function GanttTable(props: GanttTableProps): ReactElement {\n  const { options, customLinks, trace, viewport, selectedSpan, onSpanClick, matchingSpanIds, focusedSpanId } = props;\n  const { collapsedSpans, setCollapsedSpans, setVisibleSpans } = useGanttTableContext();\n  const [nameColumnWidth, setNameColumnWidth] = useState<number>(0.25);\n  const tableRef = useRef<HTMLDivElement>(null);\n  const virtuosoRef = useRef<VirtuosoHandle>(null);\n  const theme = useTheme();\n\n  // Recursively flatten the span tree to a list of rows, hiding collapsed child spans.\n  const rows = useMemo(() => {\n    const rows: Span[] = [];\n    forEachSpan(trace.rootSpans, (span) => {\n      rows.push(span);\n      if (collapsedSpans.has(span.spanId)) {\n        return false;\n      }\n    });\n    return rows;\n  }, [trace.rootSpans, collapsedSpans]);\n  const matchingSpanIdSet = useMemo(() => new Set(matchingSpanIds ?? []), [matchingSpanIds]);\n\n  // Auto-expand collapsed ancestors when focusing a search match\n  useEffect(() => {\n    if (!focusedSpanId) return;\n\n    const span = trace.spanById.get(focusedSpanId);\n    if (!span) return;\n\n    const ancestorIds = new Set<string>();\n    let parent = span.parentSpan;\n    while (parent) {\n      ancestorIds.add(parent.spanId);\n      parent = parent.parentSpan;\n    }\n    if (ancestorIds.size > 0) {\n      setCollapsedSpans((prev) => {\n        const next = new Set(prev);\n        let changed = false;\n        for (const id of ancestorIds) {\n          if (next.delete(id)) changed = true;\n        }\n        return changed ? next : prev;\n      });\n    }\n  }, [focusedSpanId, trace.spanById, setCollapsedSpans]);\n\n  // Scroll to focused span when using prev/next buttons in search bar.\n  useEffect(() => {\n    if (!focusedSpanId || !virtuosoRef.current) return;\n\n    const index = rows.findIndex((r) => r.spanId === focusedSpanId);\n    if (index >= 0) {\n      virtuosoRef.current.scrollToIndex({ index, align: 'center' });\n    }\n  }, [focusedSpanId, rows]);\n\n  // Set the top most index in the Virtuoso table to the selected span\n  // Required e.g. when navigating from another page.\n  const initialTopMostSpanIndex = useMemo(() => {\n    if (!selectedSpan) return 0;\n    const index = rows.findIndex((r) => r.spanId === selectedSpan.spanId);\n    return index >= 0 ? index : 0;\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        ref={virtuosoRef}\n        data={rows}\n        initialTopMostItemIndex={initialTopMostSpanIndex}\n        itemContent={(_, span) => (\n          <GanttTableRow\n            options={options}\n            customLinks={customLinks}\n            span={span}\n            viewport={viewport}\n            selected={span === selectedSpan}\n            matched={matchingSpanIdSet.has(span.spanId)}\n            focused={span.spanId === focusedSpanId}\n            nameColumnWidth={nameColumnWidth}\n            divider={divider}\n            onClick={onSpanClick}\n          />\n        )}\n        rangeChanged={handleRangeChange}\n      />\n    </Box>\n  );\n}\n"],"names":["Virtuoso","useEffect","useMemo","useRef","useState","Box","useTheme","forEachSpan","useGanttTableContext","GanttTableRow","GanttTableHeader","ResizableDivider","GanttTable","props","options","customLinks","trace","viewport","selectedSpan","onSpanClick","matchingSpanIds","focusedSpanId","collapsedSpans","setCollapsedSpans","setVisibleSpans","nameColumnWidth","setNameColumnWidth","tableRef","virtuosoRef","theme","rows","rootSpans","span","push","has","spanId","matchingSpanIdSet","Set","spanById","get","ancestorIds","parent","parentSpan","add","size","prev","next","changed","id","delete","current","index","findIndex","r","scrollToIndex","align","initialTopMostSpanIndex","divider","parentRef","onMove","handleRangeChange","startIndex","endIndex","visibleSpans","i","ref","sx","display","flexDirection","flexGrow","border","palette","borderRadius","shape","data","initialTopMostItemIndex","itemContent","_","selected","matched","focused","onClick","rangeChanged"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 interface GanttTableContextType {
-    collapsedSpans: string[];
-    setCollapsedSpans: (s: string[]) => void;
+    collapsedSpans: Set<string>;
+    setCollapsedSpans: React.Dispatch<React.SetStateAction<Set<string>>>;
     visibleSpans: string[];
     setVisibleSpans: (s: string[]) => void;
     /** can be a spanId, an empty string for the root span or undefined for no hover */

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

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

package/lib/TracingGanttChart/GanttTable/GanttTableProvider.js

@@ -19,7 +19,7 @@ import { createContext, useContext, useState } from 'react';
  */ export const GanttTableContext = /*#__PURE__*/ createContext(undefined);
 export function GanttTableProvider(props) {
     const { children } = props;
-    const [collapsedSpans, setCollapsedSpans] = useState([]);
+    const [collapsedSpans, setCollapsedSpans] = useState(new Set());
     const [visibleSpans, setVisibleSpans] = useState([]);
     const [hoveredParent, setHoveredParent] = useState(undefined);
     return /*#__PURE__*/ _jsx(GanttTableContext.Provider, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/GanttTableProvider.tsx"],"sourcesContent":["// Copyright 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,+BAA+B;AAC/B,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 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: Set<string>;\n  setCollapsedSpans: React.Dispatch<React.SetStateAction<Set<string>>>;\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<Set<string>>(new Set());\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","Set","visibleSpans","setVisibleSpans","hoveredParent","setHoveredParent","Provider","value","useGanttTableContext","ctx","Error"],"mappings":";AAAA,+BAA+B;AAC/B,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,SAAsB,IAAIQ;IACtE,MAAM,CAACC,cAAcC,gBAAgB,GAAGV,SAAmB,EAAE;IAC7D,MAAM,CAACW,eAAeC,iBAAiB,GAAGZ,SAA6BE;IAEvE,qBACE,KAACD,kBAAkBY,QAAQ;QACzBC,OAAO;YAAER;YAAgBC;YAAmBE;YAAcC;YAAiBC;YAAeC;QAAiB;kBAE1GP;;AAGP;AAEA,OAAO,SAASU;IACd,MAAMC,MAAMjB,WAAWE;IACvB,IAAIe,QAAQd,WAAW;QACrB,MAAM,IAAIe,MAAM;IAClB;IACA,OAAOD;AACT"}

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

@@ -6,7 +6,12 @@ interface GanttTableRowProps {
     customLinks?: CustomLinks;
     span: Span;
     viewport: Viewport;
+    /** this span is opened in the attribute pane */
     selected?: boolean;
+    /** this span is matched in the search results */
+    matched?: boolean;
+    /** this span is focused by clicking prev/next in the search bar */
+    focused?: boolean;
     nameColumnWidth: number;
     divider: React.ReactNode;
     onClick: (span: Span) => void;

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

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

package/lib/TracingGanttChart/GanttTable/GanttTableRow.js

@@ -17,16 +17,28 @@ import { rowHeight } from '../utils';
 import { SpanName } from './SpanName';
 import { SpanDuration } from './SpanDuration';
 export const GanttTableRow = /*#__PURE__*/ memo(function GanttTableRow(props) {
-    const { options, customLinks, span, viewport, selected, nameColumnWidth, divider, onClick } = props;
+    const { options, customLinks, span, viewport, selected, matched, focused, nameColumnWidth, divider, onClick } = props;
     const theme = useTheme();
     const handleOnClick = ()=>{
         // ignore event if triggered by selecting text
         if (document.getSelection()?.type === 'Range') return;
         onClick(span);
     };
+    let backgroundColor;
+    if (selected) {
+        backgroundColor = theme.palette.action.focus;
+    } else if (focused) {
+        backgroundColor = theme.palette.action.selected;
+    } else if (matched) {
+        backgroundColor = theme.palette.action.hover;
+    }
     return /*#__PURE__*/ _jsxs(RowContainer, {
         sx: {
-            backgroundColor: selected ? theme.palette.action.selected : 'inherit'
+            backgroundColor,
+            // overwrite hover if background color is set (selected, focused or matched)
+            '&:hover': backgroundColor ? {
+                backgroundColor
+            } : undefined
         },
         direction: "row",
         onClick: handleOnClick,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/GanttTableRow.tsx"],"sourcesContent":["// Copyright 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,+BAA+B;AAC/B,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 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  /** this span is opened in the attribute pane */\n  selected?: boolean;\n  /** this span is matched in the search results */\n  matched?: boolean;\n  /** this span is focused by clicking prev/next in the search bar */\n  focused?: 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, matched, focused, 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  let backgroundColor: string | undefined;\n  if (selected) {\n    backgroundColor = theme.palette.action.focus;\n  } else if (focused) {\n    backgroundColor = theme.palette.action.selected;\n  } else if (matched) {\n    backgroundColor = theme.palette.action.hover;\n  }\n\n  return (\n    <RowContainer\n      sx={{\n        backgroundColor,\n        // overwrite hover if background color is set (selected, focused or matched)\n        '&:hover': backgroundColor ? { backgroundColor } : undefined,\n      }}\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","matched","focused","nameColumnWidth","divider","onClick","theme","handleOnClick","document","getSelection","type","backgroundColor","palette","action","focus","hover","RowContainer","sx","undefined","direction","height","borderTop","borderBottom"],"mappings":";AAAA,+BAA+B;AAC/B,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;AAkB9C,OAAO,MAAMC,8BAAgBJ,KAAK,SAASI,cAAcC,KAAyB;IAChF,MAAM,EAAEC,OAAO,EAAEC,WAAW,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,OAAO,EAAEC,eAAe,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGV;IAChH,MAAMW,QAAQjB;IAEd,MAAMkB,gBAAgB;QACpB,8CAA8C;QAC9C,IAAIC,SAASC,YAAY,IAAIC,SAAS,SAAS;QAE/CL,QAAQP;IACV;IAEA,IAAIa;IACJ,IAAIX,UAAU;QACZW,kBAAkBL,MAAMM,OAAO,CAACC,MAAM,CAACC,KAAK;IAC9C,OAAO,IAAIZ,SAAS;QAClBS,kBAAkBL,MAAMM,OAAO,CAACC,MAAM,CAACb,QAAQ;IACjD,OAAO,IAAIC,SAAS;QAClBU,kBAAkBL,MAAMM,OAAO,CAACC,MAAM,CAACE,KAAK;IAC9C;IAEA,qBACE,MAACC;QACCC,IAAI;YACFN;YACA,4EAA4E;YAC5E,WAAWA,kBAAkB;gBAAEA;YAAgB,IAAIO;QACrD;QACAC,WAAU;QACVd,SAASE;;0BAET,KAACf;gBAASK,aAAaA;gBAAaC,MAAMA;gBAAMK,iBAAiBA;;YAChEC;0BACD,KAACX;gBAAaG,SAASA;gBAASE,MAAMA;gBAAMC,UAAUA;;;;AAG5D,GAAG;AAEH,MAAMiB,eAAe5B,OAAOD,OAAO,CAAC,EAAEmB,KAAK,EAAE,GAAM,CAAA;QACjDc,QAAQ7B;QACR,WAAW;YACToB,iBAAiBL,MAAMM,OAAO,CAACC,MAAM,CAACE,KAAK;YAC3CM,WAAW,CAAC,UAAU,EAAEf,MAAMM,OAAO,CAACR,OAAO,EAAE;YAC/CkB,cAAc,CAAC,UAAU,EAAEhB,MAAMM,OAAO,CAACR,OAAO,EAAE;QACpD;IACF,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ResizableDivider.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/GanttTable/ResizableDivider.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAiC,YAAY,EAAuB,MAAM,OAAO,CAAC;AAIzF,UAAU,qBAAqB;IAC7B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAuD3E"}
+{"version":3,"file":"ResizableDivider.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/GanttTable/ResizableDivider.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAiC,YAAY,EAAuB,MAAM,OAAO,CAAC;AAIzF,UAAU,qBAAqB;IAC7B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CA2D3E"}

package/lib/TracingGanttChart/GanttTable/ResizableDivider.js

@@ -25,8 +25,11 @@ export function ResizableDivider(props) {
     // need stable reference for window.removeEventListener() in useEffect() below
     const handleMouseMove = useEvent((e)=>{
         if (!parentRef.current) return;
-        const offsetX = e.clientX - parentRef.current.getBoundingClientRect().left + spacing;
-        const leftPercent = offsetX / parentRef.current.getBoundingClientRect().width;
+        const parentRect = parentRef.current.getBoundingClientRect();
+        // The parent can be a flex row, for example: [leftPercent] [gap] [divider] [gap] [1-leftPercent].
+        // Without considering spacing, leftPercent would be wrong because it ignores the flex gap between the divider and the element.
+        const offsetX = e.clientX - parentRect.left + spacing;
+        const leftPercent = offsetX / parentRect.width;
         if (0.05 <= leftPercent && leftPercent <= 0.95) {
             onMove(leftPercent);
         }
@@ -68,6 +71,7 @@ export function ResizableDivider(props) {
 const ResizableDividerBox = styled(Box)(({ theme })=>({
         position: 'relative',
         width: '1px',
+        minWidth: '1px',
         height: '100%',
         backgroundColor: theme.palette.divider,
         cursor: 'col-resize',

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/ResizableDivider.tsx"],"sourcesContent":["// Copyright 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,+BAA+B;AAC/B,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 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 parentRect = parentRef.current.getBoundingClientRect();\n\n    // The parent can be a flex row, for example: [leftPercent] [gap] [divider] [gap] [1-leftPercent].\n    // Without considering spacing, leftPercent would be wrong because it ignores the flex gap between the divider and the element.\n    const offsetX = e.clientX - parentRect.left + spacing;\n    const leftPercent = offsetX / parentRect.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  minWidth: '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","parentRect","getBoundingClientRect","offsetX","clientX","left","leftPercent","width","handleMouseUp","startMouseAction","window","addEventListener","document","body","style","cursor","stopMouseAction","removeEventListener","stopEventPropagation","stopPropagation","ResizableDividerBox","onMouseDown","onClick","theme","position","minWidth","height","backgroundColor","palette","divider","top","bottom","content","zIndex"],"mappings":";AAAA,+BAA+B;AAC/B,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,aAAaV,UAAUS,OAAO,CAACE,qBAAqB;QAE1D,kGAAkG;QAClG,+HAA+H;QAC/H,MAAMC,UAAUN,EAAEO,OAAO,GAAGH,WAAWI,IAAI,GAAGb;QAC9C,MAAMc,cAAcH,UAAUF,WAAWM,KAAK;QAE9C,IAAI,QAAQD,eAAeA,eAAe,MAAM;YAC9Cb,OAAOa;QACT;IACF;IAEA,8EAA8E;IAC9E,MAAME,gBAAgBpB,SAAS;QAC7BO,YAAY;IACd;IAEA,2FAA2F;IAC3FX,UAAU;QACR,SAASyB;YACPC,OAAOC,gBAAgB,CAAC,aAAaZ;YACrCW,OAAOC,gBAAgB,CAAC,WAAWH;YACnCI,SAASC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG;QAC/B;QAEA,SAASC;YACPN,OAAOO,mBAAmB,CAAC,aAAalB;YACxCW,OAAOO,mBAAmB,CAAC,WAAWT;YACtCI,SAASC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG;QAC/B;QAEA,IAAIrB,YAAY;YACde;QACF,OAAO;YACLO;QACF;QAEA,OAAOA;IACT,GAAG;QAACtB;QAAYK;QAAiBS;KAAc;IAE/C,mDAAmD;IACnD,MAAMU,uBAAuB,CAACrB,IAA6BA,EAAEsB,eAAe;IAE5E,qBAAO,KAACC;QAAoBC,aAAazB;QAAiB0B,SAASJ;;AACrE;AAEA,MAAME,sBAAsBjC,OAAOD,KAAK,CAAC,EAAEqC,KAAK,EAAE,GAAM,CAAA;QACtDC,UAAU;QACVjB,OAAO;QACPkB,UAAU;QACVC,QAAQ;QACRC,iBAAiBJ,MAAMK,OAAO,CAACC,OAAO;QACtCd,QAAQ;QAER,0CAA0C;QAC1C,YAAY;YACVS,UAAU;YACVjB,OAAO;YACPF,MAAM;YACNyB,KAAK;YACLC,QAAQ;YACRC,SAAS;YACTC,QAAQ;QACV;IACF,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"SpanIndents.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/GanttTable/SpanIndents.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAc,YAAY,EAAe,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAMhC,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,IAAI,CAAC;CACZ;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAuDjE"}
+{"version":3,"file":"SpanIndents.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/GanttTable/SpanIndents.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAc,YAAY,EAAe,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAMhC,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,IAAI,CAAC;CACZ;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CA2DjE"}

package/lib/TracingGanttChart/GanttTable/SpanIndents.js

@@ -30,17 +30,17 @@ const MAX_INDENT_WIDTH = 24;
     const theme = useTheme();
     const handleToggleClick = useCallback((e)=>{
         e.stopPropagation();
-        if (collapsedSpans.includes(span.spanId)) {
-            setCollapsedSpans(collapsedSpans.filter((spanId)=>spanId !== span.spanId));
-        } else {
-            setCollapsedSpans([
-                ...collapsedSpans,
-                span.spanId
-            ]);
-        }
+        setCollapsedSpans((prev)=>{
+            const next = new Set(prev);
+            if (next.has(span.spanId)) {
+                next.delete(span.spanId);
+            } else {
+                next.add(span.spanId);
+            }
+            return next;
+        });
     }, [
         span,
-        collapsedSpans,
         setCollapsedSpans
     ]);
     const handleIconMouseEnter = useCallback(()=>{
@@ -66,7 +66,7 @@ const MAX_INDENT_WIDTH = 24;
                 },
                 onMouseEnter: ()=>setHoveredParent(span.parentSpanId ?? ''),
                 onMouseLeave: ()=>setHoveredParent(undefined),
-                children: i === spans.length - 1 && span.childSpans.length > 0 && (collapsedSpans.includes(span.spanId) ? /*#__PURE__*/ _jsx(ChevronRightIcon, {
+                children: i === spans.length - 1 && span.childSpans.length > 0 && (collapsedSpans.has(span.spanId) ? /*#__PURE__*/ _jsx(ChevronRightIcon, {
                     titleAccess: "expand",
                     onClick: handleToggleClick,
                     onMouseEnter: handleIconMouseEnter

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/GanttTable/SpanIndents.tsx"],"sourcesContent":["// Copyright 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,+BAA+B;AAC/B,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 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      setCollapsedSpans((prev) => {\n        const next = new Set(prev);\n        if (next.has(span.spanId)) {\n          next.delete(span.spanId);\n        } else {\n          next.add(span.spanId);\n        }\n        return next;\n      });\n    },\n    [span, 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.has(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","prev","next","Set","has","spanId","delete","add","handleIconMouseEnter","spans","parent","parentSpan","unshift","map","i","SpanIndentBox","style","width","length","includes","borderLeft","parentSpanId","palette","divider","onMouseEnter","onMouseLeave","undefined","childSpans","titleAccess","onClick","display","height","alignItems","justifyContent","flexShrink","transition"],"mappings":";AAAA,+BAA+B;AAC/B,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;QACjBP,kBAAkB,CAACQ;YACjB,MAAMC,OAAO,IAAIC,IAAIF;YACrB,IAAIC,KAAKE,GAAG,CAACb,KAAKc,MAAM,GAAG;gBACzBH,KAAKI,MAAM,CAACf,KAAKc,MAAM;YACzB,OAAO;gBACLH,KAAKK,GAAG,CAAChB,KAAKc,MAAM;YACtB;YACA,OAAOH;QACT;IACF,GACA;QAACX;QAAME;KAAkB;IAG3B,MAAMe,uBAAuBvB,YAAY;QACvCW,iBAAiBL,KAAKc,MAAM;IAC9B,GAAG;QAACd;QAAMK;KAAiB;IAE3B,MAAMa,QAAQ;QAAClB;KAAK;IACpB,IAAImB,SAASnB,KAAKoB,UAAU;IAC5B,MAAOD,OAAQ;QACbD,MAAMG,OAAO,CAACF;QACdA,SAASA,OAAOC,UAAU;IAC5B;IAEA,kHAAkH;IAClH,qBACE;kBACGF,MAAMI,GAAG,CAAC,CAACtB,MAAMuB,kBAChB,KAACC;gBAECC,OAAO;oBACLC,OACEH,MAAML,MAAMS,MAAM,GAAG,KAAKxB,aAAawB,MAAM,KAAK,KAAKxB,aAAayB,QAAQ,CAAC5B,KAAKc,MAAM,IACpFjB,mBACAD;oBACNiC,YAAY,GAAGzB,kBAAmBJ,CAAAA,KAAK8B,YAAY,IAAI,EAAC,IAAK,IAAI,EAAE,SAAS,EAAExB,MAAMyB,OAAO,CAACC,OAAO,EAAE;gBACvG;gBACAC,cAAc,IAAM5B,iBAAiBL,KAAK8B,YAAY,IAAI;gBAC1DI,cAAc,IAAM7B,iBAAiB8B;0BAEpCZ,MAAML,MAAMS,MAAM,GAAG,KACpB3B,KAAKoC,UAAU,CAACT,MAAM,GAAG,KACxB1B,CAAAA,eAAeY,GAAG,CAACb,KAAKc,MAAM,kBAC7B,KAACrB;oBAAiB4C,aAAY;oBAASC,SAAS/B;oBAAmB0B,cAAchB;mCAEjF,KAACzB;oBAAgB6C,aAAY;oBAAWC,SAAS/B;oBAAmB0B,cAAchB;kBACpF;eAjBGjB,KAAKc,MAAM;;AAsB1B;AAEA,MAAMU,gBAAgBlC,OAAO,OAAO;IAClCiD,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,gBAAgB;IAChBC,YAAY;IACZC,YAAY;AACd"}

package/lib/TracingGanttChart/MiniGanttChart/draw.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"draw.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/MiniGanttChart/draw.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAMvC,wBAAgB,SAAS,CACvB,GAAG,EAAE,wBAAwB,EAC7B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,kBAAkB,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,GACzC,IAAI,CAiCN"}
+{"version":3,"file":"draw.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/MiniGanttChart/draw.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAe,MAAM,UAAU,CAAC;AAMpD,wBAAgB,SAAS,CACvB,GAAG,EAAE,wBAAwB,EAC7B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,kBAAkB,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,GACzC,IAAI,CA2BN"}

package/lib/TracingGanttChart/MiniGanttChart/draw.js

@@ -10,6 +10,7 @@
 // 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 { forEachSpan } from '../trace';
 import { minSpanWidthPx } from '../utils';
 const MIN_BAR_HEIGHT = 1;
 const MAX_BAR_HEIGHT = 7;
@@ -29,13 +30,8 @@ export function drawSpans(ctx, width, height, trace, spanColorGenerator) {
         ctx.rect(Math.round(relativeStart * width), Math.round(y), Math.max(minSpanWidthPx, Math.round(relativeDuration * width)), barHeight);
         ctx.fill();
         y += yChange;
-        for (const childSpan of span.childSpans){
-            drawSpan(childSpan);
-        }
     };
-    for (const rootSpan of trace.rootSpans){
-        drawSpan(rootSpan);
-    }
+    forEachSpan(trace.rootSpans, drawSpan);
 }
 
 //# sourceMappingURL=draw.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/TracingGanttChart/MiniGanttChart/draw.ts"],"sourcesContent":["// Copyright 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 { Span, Trace } from '../trace';\nimport { minSpanWidthPx } from '../utils';\n\nconst MIN_BAR_HEIGHT = 1;\nconst MAX_BAR_HEIGHT = 7;\n\nexport function drawSpans(\n  ctx: CanvasRenderingContext2D,\n  width: number,\n  height: number,\n  trace: Trace,\n  spanColorGenerator: (span: Span) => string\n): void {\n  // calculate optimal height, enforce min and max bar height and finally round to an integer\n  const numSpans = trace.spanById.size;\n  const barHeight = Math.round(Math.min(Math.max(height / numSpans, MIN_BAR_HEIGHT), MAX_BAR_HEIGHT));\n\n  const traceDuration = trace.endTimeUnixMs - trace.startTimeUnixMs;\n  const yChange = height / numSpans;\n  let y = 0;\n\n  const drawSpan = (span: Span): void => {\n    const spanDuration = span.endTimeUnixMs - span.startTimeUnixMs;\n    const relativeDuration = spanDuration / traceDuration;\n    const relativeStart = (span.startTimeUnixMs - trace.startTimeUnixMs) / traceDuration;\n\n    ctx.fillStyle = spanColorGenerator(span);\n    ctx.beginPath();\n    ctx.rect(\n      Math.round(relativeStart * width),\n      Math.round(y),\n      Math.max(minSpanWidthPx, Math.round(relativeDuration * width)),\n      barHeight\n    );\n    ctx.fill();\n    y += yChange;\n\n    for (const childSpan of span.childSpans) {\n      drawSpan(childSpan);\n    }\n  };\n\n  for (const rootSpan of trace.rootSpans) {\n    drawSpan(rootSpan);\n  }\n}\n"],"names":["minSpanWidthPx","MIN_BAR_HEIGHT","MAX_BAR_HEIGHT","drawSpans","ctx","width","height","trace","spanColorGenerator","numSpans","spanById","size","barHeight","Math","round","min","max","traceDuration","endTimeUnixMs","startTimeUnixMs","yChange","y","drawSpan","span","spanDuration","relativeDuration","relativeStart","fillStyle","beginPath","rect","fill","childSpan","childSpans","rootSpan","rootSpans"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAASA,cAAc,QAAQ,WAAW;AAE1C,MAAMC,iBAAiB;AACvB,MAAMC,iBAAiB;AAEvB,OAAO,SAASC,UACdC,GAA6B,EAC7BC,KAAa,EACbC,MAAc,EACdC,KAAY,EACZC,kBAA0C;IAE1C,2FAA2F;IAC3F,MAAMC,WAAWF,MAAMG,QAAQ,CAACC,IAAI;IACpC,MAAMC,YAAYC,KAAKC,KAAK,CAACD,KAAKE,GAAG,CAACF,KAAKG,GAAG,CAACV,SAASG,UAAUR,iBAAiBC;IAEnF,MAAMe,gBAAgBV,MAAMW,aAAa,GAAGX,MAAMY,eAAe;IACjE,MAAMC,UAAUd,SAASG;IACzB,IAAIY,IAAI;IAER,MAAMC,WAAW,CAACC;QAChB,MAAMC,eAAeD,KAAKL,aAAa,GAAGK,KAAKJ,eAAe;QAC9D,MAAMM,mBAAmBD,eAAeP;QACxC,MAAMS,gBAAgB,AAACH,CAAAA,KAAKJ,eAAe,GAAGZ,MAAMY,eAAe,AAAD,IAAKF;QAEvEb,IAAIuB,SAAS,GAAGnB,mBAAmBe;QACnCnB,IAAIwB,SAAS;QACbxB,IAAIyB,IAAI,CACNhB,KAAKC,KAAK,CAACY,gBAAgBrB,QAC3BQ,KAAKC,KAAK,CAACO,IACXR,KAAKG,GAAG,CAAChB,gBAAgBa,KAAKC,KAAK,CAACW,mBAAmBpB,SACvDO;QAEFR,IAAI0B,IAAI;QACRT,KAAKD;QAEL,KAAK,MAAMW,aAAaR,KAAKS,UAAU,CAAE;YACvCV,SAASS;QACX;IACF;IAEA,KAAK,MAAME,YAAY1B,MAAM2B,SAAS,CAAE;QACtCZ,SAASW;IACX;AACF"}
+{"version":3,"sources":["../../../../src/TracingGanttChart/MiniGanttChart/draw.ts"],"sourcesContent":["// Copyright 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 { Span, Trace, forEachSpan } from '../trace';\nimport { minSpanWidthPx } from '../utils';\n\nconst MIN_BAR_HEIGHT = 1;\nconst MAX_BAR_HEIGHT = 7;\n\nexport function drawSpans(\n  ctx: CanvasRenderingContext2D,\n  width: number,\n  height: number,\n  trace: Trace,\n  spanColorGenerator: (span: Span) => string\n): void {\n  // calculate optimal height, enforce min and max bar height and finally round to an integer\n  const numSpans = trace.spanById.size;\n  const barHeight = Math.round(Math.min(Math.max(height / numSpans, MIN_BAR_HEIGHT), MAX_BAR_HEIGHT));\n\n  const traceDuration = trace.endTimeUnixMs - trace.startTimeUnixMs;\n  const yChange = height / numSpans;\n  let y = 0;\n\n  const drawSpan = (span: Span): void => {\n    const spanDuration = span.endTimeUnixMs - span.startTimeUnixMs;\n    const relativeDuration = spanDuration / traceDuration;\n    const relativeStart = (span.startTimeUnixMs - trace.startTimeUnixMs) / traceDuration;\n\n    ctx.fillStyle = spanColorGenerator(span);\n    ctx.beginPath();\n    ctx.rect(\n      Math.round(relativeStart * width),\n      Math.round(y),\n      Math.max(minSpanWidthPx, Math.round(relativeDuration * width)),\n      barHeight\n    );\n    ctx.fill();\n    y += yChange;\n  };\n\n  forEachSpan(trace.rootSpans, drawSpan);\n}\n"],"names":["forEachSpan","minSpanWidthPx","MIN_BAR_HEIGHT","MAX_BAR_HEIGHT","drawSpans","ctx","width","height","trace","spanColorGenerator","numSpans","spanById","size","barHeight","Math","round","min","max","traceDuration","endTimeUnixMs","startTimeUnixMs","yChange","y","drawSpan","span","spanDuration","relativeDuration","relativeStart","fillStyle","beginPath","rect","fill","rootSpans"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAAsBA,WAAW,QAAQ,WAAW;AACpD,SAASC,cAAc,QAAQ,WAAW;AAE1C,MAAMC,iBAAiB;AACvB,MAAMC,iBAAiB;AAEvB,OAAO,SAASC,UACdC,GAA6B,EAC7BC,KAAa,EACbC,MAAc,EACdC,KAAY,EACZC,kBAA0C;IAE1C,2FAA2F;IAC3F,MAAMC,WAAWF,MAAMG,QAAQ,CAACC,IAAI;IACpC,MAAMC,YAAYC,KAAKC,KAAK,CAACD,KAAKE,GAAG,CAACF,KAAKG,GAAG,CAACV,SAASG,UAAUR,iBAAiBC;IAEnF,MAAMe,gBAAgBV,MAAMW,aAAa,GAAGX,MAAMY,eAAe;IACjE,MAAMC,UAAUd,SAASG;IACzB,IAAIY,IAAI;IAER,MAAMC,WAAW,CAACC;QAChB,MAAMC,eAAeD,KAAKL,aAAa,GAAGK,KAAKJ,eAAe;QAC9D,MAAMM,mBAAmBD,eAAeP;QACxC,MAAMS,gBAAgB,AAACH,CAAAA,KAAKJ,eAAe,GAAGZ,MAAMY,eAAe,AAAD,IAAKF;QAEvEb,IAAIuB,SAAS,GAAGnB,mBAAmBe;QACnCnB,IAAIwB,SAAS;QACbxB,IAAIyB,IAAI,CACNhB,KAAKC,KAAK,CAACY,gBAAgBrB,QAC3BQ,KAAKC,KAAK,CAACO,IACXR,KAAKG,GAAG,CAAChB,gBAAgBa,KAAKC,KAAK,CAACW,mBAAmBpB,SACvDO;QAEFR,IAAI0B,IAAI;QACRT,KAAKD;IACP;IAEArB,YAAYQ,MAAMwB,SAAS,EAAET;AAC/B"}

package/lib/TracingGanttChart/Search.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react';
+import { Trace } from './trace';
+export interface SearchBarProps {
+    search: SpanSearch;
+}
+export declare function SearchBar(props: SearchBarProps): ReactElement;
+export interface SpanSearch {
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    matchingSpanIds: string[];
+    focusedMatchIndex: number;
+    setFocusedMatchIndex: (index: number) => void;
+}
+export declare function useSpanSearch(trace: Trace): SpanSearch;
+//# sourceMappingURL=Search.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/Search.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,YAAY,EAAkC,MAAM,OAAO,CAAC;AAGrE,OAAO,EAAQ,KAAK,EAAe,MAAM,SAAS,CAAC;AAEnD,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CA2D7D;AAeD,MAAM,WAAW,UAAU;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,UAAU,CAuBtD"}