@parca/profile 0.16.136 → 0.16.138

package/src/GraphTooltip/index.tsx

@@ -17,7 +17,13 @@ import {pointer} from 'd3-selection';
 import {CopyToClipboard} from 'react-copy-to-clipboard';
 import {usePopper} from 'react-popper';
 
-import {CallgraphNode, FlamegraphNode, FlamegraphNodeMeta, FlamegraphRootNode} from '@parca/client';
+import {
+  CallgraphNode,
+  CallgraphNodeMeta,
+  FlamegraphNode,
+  FlamegraphNodeMeta,
+  FlamegraphRootNode,
+} from '@parca/client';
 import {
   Location,
   Mapping,
@@ -34,6 +40,16 @@ const NoData = (): JSX.Element => {
   return <span className="rounded bg-gray-200 dark:bg-gray-800 px-2">Not available</span>;
 };
 
+interface ExtendedCallgraphNodeMeta extends CallgraphNodeMeta {
+  lineIndex: number;
+  locationIndex: number;
+}
+
+interface HoveringNode extends FlamegraphRootNode, FlamegraphNode, CallgraphNode {
+  diff: string;
+  meta?: FlamegraphNodeMeta | ExtendedCallgraphNodeMeta;
+}
+
 interface GraphTooltipProps {
   x?: number;
   y?: number;
@@ -47,6 +63,7 @@ interface GraphTooltipProps {
   mappings?: Mapping[];
   locations?: Location[];
   functions?: ParcaFunction[];
+  type?: string;
 }
 
 const virtualElement = {
@@ -83,16 +100,19 @@ const TooltipMetaInfo = ({
   mappings,
   locations,
   functions,
+  type = 'flamegraph',
 }: {
-  hoveringNode: FlamegraphNode;
+  hoveringNode: HoveringNode;
   onCopy: () => void;
   strings?: string[];
   mappings?: Mapping[];
   locations?: Location[];
   functions?: ParcaFunction[];
+  type?: string;
 }): JSX.Element => {
   // populate meta from the flamegraph metadata tables
   if (
+    type === 'flamegraph' &&
     locations !== undefined &&
     hoveringNode.meta?.locationIndex !== undefined &&
     hoveringNode.meta.locationIndex !== 0
@@ -133,7 +153,7 @@ const TooltipMetaInfo = ({
     }
   }
 
-  const getTextForFile = (hoveringNode: FlamegraphNode): string => {
+  const getTextForFile = (hoveringNode: HoveringNode): string => {
     if (hoveringNode.meta?.function == null) return '<unknown>';
 
     return `${hoveringNode.meta.function.filename} ${
@@ -218,15 +238,9 @@ const TooltipMetaInfo = ({
   );
 };
 
-// @ts-expect-error
-export interface HoveringNode extends CallgraphNode, FlamegraphRootNode, FlamegraphNode {
-  diff: string;
-  meta?: FlamegraphNodeMeta | {[key: string]: any};
-}
-
 let timeoutHandle: ReturnType<typeof setTimeout> | null = null;
 
-const GraphTooltipContent = ({
+export const GraphTooltipContent = ({
   hoveringNode,
   unit,
   total,
@@ -235,6 +249,7 @@ const GraphTooltipContent = ({
   mappings,
   locations,
   functions,
+  type = 'flamegraph',
 }: {
   hoveringNode: HoveringNode;
   unit: string;
@@ -244,6 +259,7 @@ const GraphTooltipContent = ({
   mappings?: Mapping[];
   locations?: Location[];
   functions?: ParcaFunction[];
+  type?: string;
 }): JSX.Element => {
   const [isCopied, setIsCopied] = useState<boolean>(false);
 
@@ -336,12 +352,12 @@ const GraphTooltipContent = ({
                   )}
                   <TooltipMetaInfo
                     onCopy={onCopy}
-                    // @ts-expect-error
                     hoveringNode={hoveringNode}
                     strings={strings}
                     mappings={mappings}
                     locations={locations}
                     functions={functions}
+                    type={type}
                   />
                 </tbody>
               </table>
@@ -369,10 +385,12 @@ const GraphTooltip = ({
   mappings,
   locations,
   functions,
+  type = 'flamegraph',
 }: GraphTooltipProps): JSX.Element => {
   const hoveringNodeState = useAppSelector(selectHoveringNode);
+  // @ts-expect-error
   const hoveringNode = useMemo<HoveringNode>(() => {
-    const h = (hoveringNodeProp ?? hoveringNodeState) as HoveringNode;
+    const h = hoveringNodeProp ?? hoveringNodeState;
     if (h == null) {
       return h;
     }
@@ -446,7 +464,13 @@ const GraphTooltip = ({
   if (hoveringNode === undefined || hoveringNode == null) return <></>;
 
   return isFixed ? (
-    <GraphTooltipContent hoveringNode={hoveringNode} unit={unit} total={total} isFixed={isFixed} />
+    <GraphTooltipContent
+      hoveringNode={hoveringNode}
+      unit={unit}
+      total={total}
+      isFixed={isFixed}
+      type={type}
+    />
   ) : (
     <div ref={setPopperElement} style={styles.popper} {...attributes.popper}>
       <GraphTooltipContent
@@ -458,6 +482,7 @@ const GraphTooltip = ({
         mappings={mappings}
         locations={locations}
         functions={functions}
+        type={type}
       />
     </div>
   );

package/src/ProfileIcicleGraph/IcicleGraph/IcicleGraphNodes.tsx

@@ -202,7 +202,8 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
   const onMouseEnter = (): void => {
     if (isShiftDown) return;
 
-    dispatch(setHoveringNode(data));
+    // need to add id and flat for tooltip purposes
+    dispatch(setHoveringNode({...data, id: '', flat: ''}));
   };
   const onMouseLeave = (): void => {
     if (isShiftDown) return;

package/src/ProfileView/index.tsx

@@ -15,6 +15,7 @@ import {Profiler, ProfilerProps, useEffect, useMemo, useState} from 'react';
 
 import cx from 'classnames';
 import {scaleLinear} from 'd3';
+import graphviz from 'graphviz-wasm';
 import {
   DragDropContext,
   Draggable,
@@ -37,6 +38,7 @@ import {getNewSpanColor} from '@parca/functions';
 import {selectDarkMode, useAppSelector} from '@parca/store';
 
 import {Callgraph} from '../';
+import {jsonToDot} from '../Callgraph/utils';
 import ProfileIcicleGraph, {ResizeHandler} from '../ProfileIcicleGraph';
 import {ProfileSource} from '../ProfileSource';
 import {TopTable} from '../TopTable';
@@ -105,6 +107,8 @@ export const ProfileView = ({
     param: 'dashboard_items',
     navigateTo,
   });
+  const [graphvizLoaded, setGraphvizLoaded] = useState(false);
+  const [callgraphSVG, setCallgraphSVG] = useState<string | undefined>(undefined);
   const [currentSearchString] = useURLState({param: 'search_string'});
 
   const dashboardItems = useMemo(() => {
@@ -124,22 +128,73 @@ export const ProfileView = ({
     setCurPath([]);
   }, [profileSource]);
 
+  useEffect(() => {
+    async function loadGraphviz(): Promise<void> {
+      await graphviz.loadWASM();
+      setGraphvizLoaded(true);
+    }
+    void loadGraphviz();
+  }, []);
+
   const isLoading = useMemo(() => {
     if (dashboardItems.includes('icicle')) {
       return Boolean(flamegraphData?.loading);
     }
     if (dashboardItems.includes('callgraph')) {
-      return Boolean(callgraphData?.loading);
+      return Boolean(callgraphData?.loading) || Boolean(callgraphSVG === undefined);
     }
     if (dashboardItems.includes('table')) {
       return Boolean(topTableData?.loading);
     }
     return false;
-  }, [dashboardItems, callgraphData?.loading, flamegraphData?.loading, topTableData?.loading]);
+  }, [
+    dashboardItems,
+    callgraphData?.loading,
+    flamegraphData?.loading,
+    topTableData?.loading,
+    callgraphSVG,
+  ]);
 
   const isLoaderVisible = useDelayedLoader(isLoading);
 
-  if (flamegraphData?.error != null) {
+  const maxColor: string = getNewSpanColor(isDarkMode);
+  const minColor: string = scaleLinear([isDarkMode ? 'black' : 'white', maxColor])(0.3);
+  const colorRange: [string, string] = [minColor, maxColor];
+  // Note: If we want to further optimize the experience, we could try to load the graphviz layout in the ProfileViewWithData layer
+  // and pass it down to the ProfileView. This would allow us to load the layout in parallel with the flamegraph data.
+  // However, the layout calculation is dependent on the width and color range of the graph container, which is why it is done at this level
+  useEffect(() => {
+    async function loadCallgraphSVG(
+      graph: CallgraphType,
+      width: number,
+      colorRange: [string, string]
+    ): Promise<void> {
+      await setCallgraphSVG(undefined);
+      // Translate JSON to 'dot' graph string
+      const dataAsDot = await jsonToDot({
+        graph,
+        width,
+        colorRange,
+      });
+
+      // Use Graphviz-WASM to translate the 'dot' graph to a 'JSON' graph
+      const svgGraph = await graphviz.layout(dataAsDot, 'svg', 'dot');
+      await setCallgraphSVG(svgGraph);
+    }
+
+    if (
+      graphvizLoaded &&
+      callgraphData?.data !== null &&
+      callgraphData?.data !== undefined &&
+      dimensions?.width !== undefined
+    ) {
+      void loadCallgraphSVG(callgraphData?.data, dimensions?.width, colorRange);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [graphvizLoaded, callgraphData?.data]);
+
+  if (flamegraphData?.error !== null) {
     console.error('Error: ', flamegraphData?.error);
     return (
       <div className="p-10 flex justify-center">
@@ -154,10 +209,6 @@ export const ProfileView = ({
     }
   };
 
-  const maxColor: string = getNewSpanColor(isDarkMode);
-  const minColor: string = scaleLinear([isDarkMode ? 'black' : 'white', maxColor])(0.3);
-  const colorRange: [string, string] = [minColor, maxColor];
-
   const getDashboardItemByType = ({
     type,
     isHalfScreen,
@@ -194,12 +245,14 @@ export const ProfileView = ({
         );
       }
       case 'callgraph': {
-        return callgraphData?.data != null && dimensions?.width !== undefined ? (
+        return callgraphData?.data !== undefined &&
+          callgraphSVG !== undefined &&
+          dimensions?.width !== undefined ? (
           <Callgraph
-            graph={callgraphData.data}
+            data={callgraphData.data}
+            svgString={callgraphSVG}
             sampleUnit={sampleUnit}
             width={isHalfScreen ? dimensions?.width / 2 : dimensions?.width}
-            colorRange={colorRange}
           />
         ) : (
           <></>
@@ -253,7 +306,7 @@ export const ProfileView = ({
             <div className="flex py-3 w-full">
               <div className="lg:w-1/2 flex space-x-4">
                 <div className="flex space-x-1">
-                  {profileSource != null && queryClient != null ? (
+                  {profileSource !== undefined && queryClient !== undefined ? (
                     <ProfileShareButton
                       queryRequest={profileSource.QueryRequest()}
                       queryClient={queryClient}
@@ -287,11 +340,11 @@ export const ProfileView = ({
               </div>
             </div>
 
-            {isLoaderVisible ? (
-              <>{loader}</>
-            ) : (
-              <DragDropContext onDragEnd={onDragEnd}>
-                <div className="w-full" ref={ref}>
+            <div className="w-full" ref={ref}>
+              {isLoaderVisible ? (
+                <>{loader}</>
+              ) : (
+                <DragDropContext onDragEnd={onDragEnd}>
                   <Droppable droppableId="droppable" direction="horizontal">
                     {provided => (
                       <div
@@ -335,9 +388,9 @@ export const ProfileView = ({
                       </div>
                     )}
                   </Droppable>
-                </div>
-              </DragDropContext>
-            )}
+                </DragDropContext>
+              )}
+            </div>
           </Card.Body>
         </Card>
       </div>

package/typings.d.ts

@@ -12,3 +12,4 @@
 // limitations under the License.
 
 declare module '*.svg';
+declare module 'react-map-interaction';