@parca/profile 0.17.1 → 0.17.3

package/src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx

@@ -11,184 +11,60 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {ReactNode, useMemo} from 'react';
+import React, {useMemo} from 'react';
 
 import {Table} from 'apache-arrow';
 import cx from 'classnames';
 
 import {selectBinaries, useAppSelector} from '@parca/store';
-import {isSearchMatch, scaleLinear} from '@parca/utilities';
+import {isSearchMatch} from '@parca/utilities';
 
 import 'react-contexify/dist/ReactContexify.css';
 
-import {ProfileType} from '@parca/parser';
+import {USER_PREFERENCES} from '@parca/hooks';
 
+import {ProfileSource} from '../../ProfileSource';
 import TextWithEllipsis from './TextWithEllipsis';
 import {
-  FIELD_CHILDREN,
   FIELD_CUMULATIVE,
+  FIELD_DEPTH,
   FIELD_DIFF,
   FIELD_FUNCTION_FILE_NAME,
   FIELD_FUNCTION_NAME,
   FIELD_MAPPING_FILE,
+  FIELD_PARENT,
+  FIELD_TIMESTAMP,
+  FIELD_VALUE_OFFSET,
 } from './index';
 import useNodeColor from './useNodeColor';
-import {
-  CurrentPathFrame,
-  arrowToString,
-  getCurrentPathFrameData,
-  isCurrentPathFrameMatch,
-  nodeLabel,
-} from './utils';
+import {arrowToString, boundsFromProfileSource, nodeLabel} from './utils';
 
 export const RowHeight = 26;
 
-interface IcicleGraphNodesProps {
-  table: Table<any>;
-  row: number;
-  colors: colorByColors;
-  colorBy: string;
-  childRows: number[];
-  x: number;
-  y: number;
-  total: bigint;
-  totalWidth: number;
-  level: number;
-  curPath: CurrentPathFrame[];
-  setCurPath: (path: CurrentPathFrame[]) => void;
-  setHoveringRow: (row: number | null) => void;
-  setHoveringLevel: (level: number | null) => void;
-  path: CurrentPathFrame[];
-  xScale: (value: bigint) => number;
-  searchString?: string;
-  sortBy: string;
-  darkMode: boolean;
-  compareMode: boolean;
-  profileType?: ProfileType;
-  isContextMenuOpen: boolean;
-  hoveringName: string | null;
-  setHoveringName: (name: string | null) => void;
-  hoveringRow: number | null;
-  colorForSimilarNodes: string;
-  highlightSimilarStacksPreference: boolean;
-}
-
-export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({
-  table,
-  childRows,
-  colors,
-  colorBy,
-  x,
-  y,
-  xScale,
-  total,
-  totalWidth,
-  level,
-  path,
-  setCurPath,
-  setHoveringRow,
-  setHoveringLevel,
-  curPath,
-  sortBy,
-  searchString,
-  darkMode,
-  compareMode,
-  profileType,
-  isContextMenuOpen,
-  hoveringName,
-  setHoveringName,
-  hoveringRow,
-  colorForSimilarNodes,
-  highlightSimilarStacksPreference,
-}: IcicleGraphNodesProps): React.JSX.Element {
-  const cumulatives = table.getChild(FIELD_CUMULATIVE);
-
-  if (childRows === undefined || childRows.length === 0) {
-    return <></>;
-  }
-
-  childRows =
-    curPath.length === 0
-      ? childRows
-      : childRows.filter(c => isCurrentPathFrameMatch(table, c, level, curPath[0]));
-
-  let childrenCumulative = BigInt(0);
-  const childrenElements: ReactNode[] = [];
-  childRows.forEach((child, i) => {
-    const xStart = Math.floor(xScale(BigInt(childrenCumulative)));
-    const c = BigInt(cumulatives?.get(child));
-    childrenCumulative += c;
-
-    childrenElements.push(
-      <IcicleNode
-        key={`node-${level}-${i}`}
-        table={table}
-        row={child}
-        colors={colors}
-        colorBy={colorBy}
-        x={xStart}
-        y={0}
-        totalWidth={totalWidth}
-        height={RowHeight}
-        path={path}
-        setCurPath={setCurPath}
-        setHoveringRow={setHoveringRow}
-        setHoveringLevel={setHoveringLevel}
-        level={level}
-        curPath={curPath}
-        total={total}
-        xScale={xScale}
-        sortBy={sortBy}
-        searchString={searchString}
-        darkMode={darkMode}
-        compareMode={compareMode}
-        profileType={profileType}
-        isContextMenuOpen={isContextMenuOpen}
-        hoveringName={hoveringName}
-        setHoveringName={setHoveringName}
-        hoveringRow={hoveringRow}
-        colorForSimilarNodes={colorForSimilarNodes}
-        highlightSimilarStacksPreference={highlightSimilarStacksPreference}
-      />
-    );
-  });
-
-  return <g transform={`translate(${x}, ${y})`}>{childrenElements}</g>;
-});
-
 export interface colorByColors {
   [key: string]: string;
 }
 
 export interface IcicleNodeProps {
-  x: number;
-  y: number;
   height: number;
   totalWidth: number;
-  curPath: CurrentPathFrame[];
-  level: number;
   table: Table<any>;
   row: number;
   colors: colorByColors;
   colorBy: string;
-  path: CurrentPathFrame[];
-  total: bigint;
-  setCurPath: (path: CurrentPathFrame[]) => void;
-  setHoveringRow: (row: number | null) => void;
-  setHoveringLevel: (level: number | null) => void;
-  xScale: (value: bigint) => number;
-  isRoot?: boolean;
   searchString?: string;
-  sortBy: string;
   darkMode: boolean;
   compareMode: boolean;
-  profileType?: ProfileType;
-  isContextMenuOpen: boolean;
-  hoveringName: string | null;
-  setHoveringName: (name: string | null) => void;
-  hoveringRow: number | null;
+  onContextMenu: (e: React.MouseEvent, row: number) => void;
   colorForSimilarNodes: string;
-  highlightSimilarStacksPreference: boolean;
+  selectedRow: number;
+  onClick: () => void;
+  isIcicleChart: boolean;
+  profileSource: ProfileSource;
+
+  // Hovering row must only ever be used for highlighting similar nodes, otherwise it will cause performance issues as it causes the full iciclegraph to get rerendered every time the hovering row changes.
+  hoveringRow?: number;
+  setHoveringRow: (row: number | undefined) => void;
 }
 
 export const icicleRectStyles = {
@@ -206,136 +82,49 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
   row,
   colors,
   colorBy,
-  x,
-  y,
   height,
-  setCurPath,
-  curPath,
-  level,
-  path,
-  total,
   totalWidth,
-  xScale,
-  isRoot = false,
   searchString,
-  setHoveringRow,
-  setHoveringLevel,
-  sortBy,
   darkMode,
   compareMode,
-  profileType,
-  isContextMenuOpen,
-  hoveringName,
-  setHoveringName,
-  hoveringRow,
   colorForSimilarNodes,
-  highlightSimilarStacksPreference,
+  selectedRow,
+  onClick,
+  onContextMenu,
+  hoveringRow,
+  setHoveringRow,
+  isIcicleChart,
+  profileSource,
 }: IcicleNodeProps): React.JSX.Element {
   // get the columns to read from
   const mappingColumn = table.getChild(FIELD_MAPPING_FILE);
   const functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
   const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
+  const depthColumn = table.getChild(FIELD_DEPTH);
   const diffColumn = table.getChild(FIELD_DIFF);
   const filenameColumn = table.getChild(FIELD_FUNCTION_FILE_NAME);
+  const valueOffsetColumn = table.getChild(FIELD_VALUE_OFFSET);
+  const tsColumn = table.getChild(FIELD_TIMESTAMP);
+
   // get the actual values from the columns
   const mappingFile: string | null = arrowToString(mappingColumn?.get(row));
   const functionName: string | null = arrowToString(functionNameColumn?.get(row));
   const cumulative = cumulativeColumn?.get(row) !== null ? BigInt(cumulativeColumn?.get(row)) : 0n;
   const diff: bigint | null = diffColumn?.get(row) !== null ? BigInt(diffColumn?.get(row)) : null;
-  const childRows: number[] = Array.from(table.getChild(FIELD_CHILDREN)?.get(row) ?? []);
   const filename: string | null = arrowToString(filenameColumn?.get(row));
+  const depth: number = depthColumn?.get(row) ?? 0;
+  const valueOffset: bigint =
+    valueOffsetColumn?.get(row) !== null ? BigInt(valueOffsetColumn?.get(row)) : 0n;
 
-  const colorAttribute: string | null = useMemo(() => {
-    let attr: string | null | undefined;
-
-    if (colorBy === 'filename') {
-      attr = filename;
-    } else if (colorBy === 'binary') {
-      attr = mappingFile;
-    }
-
-    return attr ?? null; // Provide a default value of null if attr is undefined
-  }, [colorBy, filename, mappingFile]);
+  const colorAttribute =
+    colorBy === 'filename' ? filename : colorBy === 'binary' ? mappingFile : null;
 
   const colorsMap = colors;
 
-  const highlightedNodes = useMemo(() => {
-    if (!highlightSimilarStacksPreference) {
-      return null;
-    }
-
-    if (functionName != null && functionName === hoveringName) {
-      return {functionName, row: hoveringRow};
-    }
-    return null; // Nothing to highlight
-  }, [functionName, hoveringName, hoveringRow, highlightSimilarStacksPreference]);
-
-  const shouldBeHighlightedIfSimilarStacks = useMemo(() => {
-    return highlightedNodes !== null && row !== highlightedNodes.row;
-  }, [row, highlightedNodes]);
-
-  // TODO: Maybe it's better to pass down the sorter function as prop instead of figuring this out here.
-  switch (sortBy) {
-    case FIELD_FUNCTION_NAME:
-      childRows.sort((a, b) => {
-        // TODO: Support fallthrough to comparing addresses or something
-        const afn: string | null = arrowToString(functionNameColumn?.get(a));
-        const bfn: string | null = arrowToString(functionNameColumn?.get(b));
-        if (afn !== null && bfn !== null) {
-          return afn.localeCompare(bfn);
-        }
-        if (afn === null && bfn !== null) {
-          return -1;
-        }
-        if (afn !== null && bfn === null) {
-          return 1;
-        }
-        // both are null
-        return 0;
-      });
-      break;
-    case FIELD_CUMULATIVE:
-      childRows.sort((a, b) => {
-        const aCumulative: bigint = cumulativeColumn?.get(a);
-        const bCumulative: bigint = cumulativeColumn?.get(b);
-        return Number(bCumulative - aCumulative);
-      });
-      break;
-    case FIELD_DIFF:
-      childRows.sort((a, b) => {
-        let aRatio: number | null = null;
-        const aDiff: bigint | null =
-          diffColumn?.get(a) !== null ? BigInt(diffColumn?.get(a)) : null;
-        if (aDiff !== null) {
-          const cumulative: bigint =
-            cumulativeColumn?.get(a) !== null ? BigInt(cumulativeColumn?.get(a)) : 0n;
-          const prev: bigint = cumulative - aDiff;
-          aRatio = Number(aDiff) / Number(prev);
-        }
-        let bRatio: number | null = null;
-        const bDiff: bigint | null =
-          diffColumn?.get(b) !== null ? BigInt(diffColumn?.get(b)) : null;
-        if (bDiff !== null) {
-          const cumulative: bigint =
-            cumulativeColumn?.get(b) !== null ? BigInt(cumulativeColumn?.get(b)) : 0n;
-          const prev: bigint = cumulative - bDiff;
-          bRatio = Number(bDiff) / Number(prev);
-        }
-
-        if (aRatio !== null && bRatio !== null) {
-          return bRatio - aRatio;
-        }
-        if (aRatio === null && bRatio !== null) {
-          return -1;
-        }
-        if (aRatio !== null && bRatio === null) {
-          return 1;
-        }
-        // both are null
-        return 0;
-      });
-      break;
-  }
+  const hoveringName =
+    hoveringRow !== undefined ? arrowToString(functionNameColumn?.get(hoveringRow)) : '';
+  const shouldBeHighlighted =
+    functionName != null && hoveringName != null && functionName === hoveringName;
 
   const binaries = useAppSelector(selectBinaries);
   const colorResult = useNodeColor({
@@ -347,24 +136,8 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
     colorAttribute,
   });
   const name = useMemo(() => {
-    return isRoot ? 'root' : nodeLabel(table, row, level, binaries.length > 1);
-  }, [table, row, level, isRoot, binaries]);
-  const currentPathFrame: CurrentPathFrame = getCurrentPathFrameData(table, row, level);
-  const nextPath = path.concat([currentPathFrame]);
-  const isFaded =
-    curPath.length > 0 && !isCurrentPathFrameMatch(table, row, level, curPath[curPath.length - 1]);
-  const styles = isFaded ? fadedIcicleRectStyles : icicleRectStyles;
-  const nextLevel = level + 1;
-  const nextCurPath = curPath.length === 0 ? [] : curPath.slice(1);
-  const newXScale =
-    nextCurPath.length === 0 && curPath.length === 1
-      ? scaleLinear([0n, BigInt(cumulative)], [0, totalWidth])
-      : xScale;
-
-  const width: number =
-    nextCurPath.length > 0 || (nextCurPath.length === 0 && curPath.length === 1)
-      ? totalWidth
-      : xScale(BigInt(cumulative));
+    return row === 0 ? 'root' : nodeLabel(table, row, binaries.length > 1);
+  }, [table, row, binaries]);
 
   const {isHighlightEnabled = false, isHighlighted = false} = useMemo(() => {
     if (searchString === undefined || searchString === '') {
@@ -373,24 +146,69 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
     return {isHighlightEnabled: true, isHighlighted: isSearchMatch(searchString, name)};
   }, [searchString, name]);
 
+  const selectionOffset =
+    valueOffsetColumn?.get(selectedRow) !== null ? BigInt(valueOffsetColumn?.get(selectedRow)) : 0n;
+  const selectionCumulative =
+    cumulativeColumn?.get(selectedRow) !== null ? BigInt(cumulativeColumn?.get(selectedRow)) : 0n;
+  if (
+    valueOffset + cumulative <= selectionOffset ||
+    valueOffset >= selectionOffset + selectionCumulative
+  ) {
+    // If the end of the node is before the selection offset or the start of the node is after the selection offset + totalWidth, we don't render it.
+    return <></>;
+  }
+  if (row === 0 && isIcicleChart) {
+    // The root node is not rendered in the icicle chart, so we return null.
+    return <></>;
+  }
+
+  // Cumulative can be larger than total when a selection is made. All parents of the selection are likely larger, but we want to only show them as 100% in the graph.
+  const tsBounds = boundsFromProfileSource(profileSource);
+  const total = cumulativeColumn?.get(selectedRow);
+  const totalRatio = cumulative > total ? 1 : Number(cumulative) / Number(total);
+  const width: number = isIcicleChart
+    ? (Number(cumulative) / (Number(tsBounds[1]) - Number(tsBounds[0]))) * totalWidth
+    : totalRatio * totalWidth;
+
   if (width <= 1) {
-    return <>{null}</>;
+    return <></>;
   }
 
+  const selectedDepth = depthColumn?.get(selectedRow);
+  const styles =
+    selectedDepth !== undefined && selectedDepth > depth ? fadedIcicleRectStyles : icicleRectStyles;
+
   const onMouseEnter = (): void => {
-    if (isContextMenuOpen) return;
     setHoveringRow(row);
-    setHoveringLevel(level);
-    setHoveringName(name);
+    window.dispatchEvent(
+      new CustomEvent('icicle-tooltip-update', {
+        detail: {row},
+      })
+    );
   };
 
   const onMouseLeave = (): void => {
-    if (isContextMenuOpen) return;
-    setHoveringRow(null);
-    setHoveringLevel(null);
-    setHoveringName(null);
+    setHoveringRow(undefined);
+    window.dispatchEvent(
+      new CustomEvent('icicle-tooltip-update', {
+        detail: {row: null},
+      })
+    );
   };
 
+  const handleContextMenu = (e: React.MouseEvent): void => {
+    onContextMenu(e, row);
+  };
+
+  const ts = tsColumn !== null ? Number(tsColumn.get(row)) : 0;
+  const x =
+    isIcicleChart && tsColumn !== null
+      ? ((ts - Number(tsBounds[0])) / (Number(tsBounds[1]) - Number(tsBounds[0]))) * totalWidth
+      : selectedDepth > depth
+      ? 0
+      : ((Number(valueOffset) - Number(selectionOffset)) / Number(total)) * totalWidth;
+  const y = isIcicleChart ? (depth - 1) * height : depth * height;
+
   return (
     <>
       <g
@@ -398,9 +216,8 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
         style={styles}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
-        onClick={() => {
-          setCurPath(nextPath);
-        }}
+        onClick={onClick}
+        onContextMenu={handleContextMenu}
       >
         <rect
           x={0}
@@ -411,7 +228,7 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
             fill: colorResult,
           }}
           className={cx(
-            shouldBeHighlightedIfSimilarStacks
+            shouldBeHighlighted
               ? `${colorForSimilarNodes} stroke-[3] [stroke-dasharray:6,4] [stroke-linecap:round] [stroke-linejoin:round] h-6`
               : 'stroke-white dark:stroke-gray-700',
             {
@@ -430,37 +247,6 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
           </svg>
         )}
       </g>
-      {childRows.length > 0 && (
-        <IcicleGraphNodes
-          table={table}
-          row={row}
-          colors={colors}
-          colorBy={colorBy}
-          childRows={childRows}
-          x={x}
-          y={RowHeight}
-          xScale={newXScale}
-          total={total}
-          totalWidth={totalWidth}
-          level={nextLevel}
-          path={nextPath}
-          curPath={nextCurPath}
-          setCurPath={setCurPath}
-          setHoveringRow={setHoveringRow}
-          setHoveringLevel={setHoveringLevel}
-          searchString={searchString}
-          sortBy={sortBy}
-          darkMode={darkMode}
-          profileType={profileType}
-          compareMode={compareMode}
-          isContextMenuOpen={isContextMenuOpen}
-          hoveringName={hoveringName}
-          setHoveringName={setHoveringName}
-          hoveringRow={hoveringRow}
-          colorForSimilarNodes={colorForSimilarNodes}
-          highlightSimilarStacksPreference={highlightSimilarStacksPreference}
-        />
-      )}
     </>
   );
 });

package/src/ProfileIcicleGraph/IcicleGraphArrow/MemoizedTooltip.tsx

@@ -0,0 +1,78 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React, {memo, useEffect, useState} from 'react';
+
+import GraphTooltipArrow from '../../GraphTooltipArrow';
+import GraphTooltipArrowContent from '../../GraphTooltipArrow/Content';
+import {DockedGraphTooltip} from '../../GraphTooltipArrow/DockedGraphTooltip';
+import {useTooltipContext} from './TooltipContext';
+
+interface MemoizedTooltipProps {
+  contextElement: Element | null;
+  dockedMetainfo: boolean;
+}
+
+export const MemoizedTooltip = memo(function MemoizedTooltip({
+  contextElement,
+  dockedMetainfo,
+}: MemoizedTooltipProps): React.JSX.Element | null {
+  const [tooltipRow, setTooltipRow] = useState<number | null>(null);
+  const {table, total, totalUnfiltered, profileType, unit, compareAbsolute} = useTooltipContext();
+
+  // This component subscribes to tooltip updates through a callback
+  // passed to the TooltipProvider, avoiding the need to lift state
+  useEffect(() => {
+    const handleTooltipUpdate = (event: CustomEvent<{row: number | null}>): void => {
+      setTooltipRow(event.detail.row);
+    };
+
+    window.addEventListener('icicle-tooltip-update' as any, handleTooltipUpdate as any);
+    return () => {
+      window.removeEventListener('icicle-tooltip-update' as any, handleTooltipUpdate as any);
+    };
+  }, []);
+
+  if (dockedMetainfo) {
+    return (
+      <DockedGraphTooltip
+        table={table}
+        row={tooltipRow}
+        total={total}
+        totalUnfiltered={totalUnfiltered}
+        profileType={profileType}
+        unit={unit}
+        compareAbsolute={compareAbsolute}
+      />
+    );
+  }
+
+  if (tooltipRow === null) {
+    return null;
+  }
+
+  return (
+    <GraphTooltipArrow contextElement={contextElement}>
+      <GraphTooltipArrowContent
+        table={table}
+        row={tooltipRow}
+        isFixed={false}
+        total={total}
+        totalUnfiltered={totalUnfiltered}
+        profileType={profileType}
+        unit={unit}
+        compareAbsolute={compareAbsolute}
+      />
+    </GraphTooltipArrow>
+  );
+});

package/src/ProfileIcicleGraph/IcicleGraphArrow/TooltipContext.tsx

@@ -0,0 +1,93 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React, {createContext, useCallback, useContext, useMemo, useRef} from 'react';
+
+import {Table} from 'apache-arrow';
+
+import {ProfileType} from '@parca/parser';
+
+interface TooltipState {
+  row: number | null;
+  x: number;
+  y: number;
+}
+
+interface TooltipContextValue {
+  table: Table<any>;
+  total: bigint;
+  totalUnfiltered: bigint;
+  profileType?: ProfileType;
+  unit?: string;
+  compareAbsolute: boolean;
+  updateTooltip: (row: number | null, x?: number, y?: number) => void;
+  tooltipState: TooltipState;
+}
+
+const TooltipContext = createContext<TooltipContextValue | null>(null);
+
+export const useTooltipContext = (): TooltipContextValue => {
+  const context = useContext(TooltipContext);
+  if (context === undefined || context === null) {
+    throw new Error('useTooltipContext must be used within TooltipProvider');
+  }
+  return context;
+};
+
+interface TooltipProviderProps {
+  children: React.ReactNode;
+  table: Table<any>;
+  total: bigint;
+  totalUnfiltered: bigint;
+  profileType?: ProfileType;
+  unit?: string;
+  compareAbsolute: boolean;
+  onTooltipUpdate?: (state: TooltipState) => void;
+}
+
+export const TooltipProvider: React.FC<TooltipProviderProps> = ({
+  children,
+  table,
+  total,
+  totalUnfiltered,
+  profileType,
+  unit,
+  compareAbsolute,
+  onTooltipUpdate,
+}) => {
+  const tooltipStateRef = useRef<TooltipState>({row: null, x: 0, y: 0});
+
+  const updateTooltip = useCallback(
+    (row: number | null, x = 0, y = 0) => {
+      tooltipStateRef.current = {row, x, y};
+      onTooltipUpdate?.(tooltipStateRef.current);
+    },
+    [onTooltipUpdate]
+  );
+
+  const value = useMemo(
+    () => ({
+      table,
+      total,
+      totalUnfiltered,
+      profileType,
+      unit,
+      compareAbsolute,
+      updateTooltip,
+      tooltipState: tooltipStateRef.current,
+    }),
+    [table, total, totalUnfiltered, profileType, unit, compareAbsolute, updateTooltip]
+  );
+
+  return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>;
+};