@parca/profile 0.14.31 → 0.15.0

package/CHANGELOG.md

@@ -3,6 +3,75 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.15.0](https://github.com/parca-dev/parca/compare/ui-v0.14.37...ui-v0.15.0) (2022-08-24)
+
+
+
+## [0.14.32](https://github.com/parca-dev/parca/compare/ui-v0.14.30...ui-v0.14.32) (2022-08-18)
+
+
+
+## [0.14.30](https://github.com/parca-dev/parca/compare/ui-v0.14.24...ui-v0.14.30) (2022-08-17)
+
+
+### Features
+
+* implement callgraph report api ([83c81c6](https://github.com/parca-dev/parca/commit/83c81c67a140b4b723094ee0d6c2308b112b800c))
+* tooltip for callgraph ([c1d0195](https://github.com/parca-dev/parca/commit/c1d0195e45a5aa065a89c936861646f1455336ff))
+
+
+
+## [0.14.16](https://github.com/parca-dev/parca/compare/ui-v0.14.11...ui-v0.14.16) (2022-08-03)
+
+
+
+## [0.14.3-alpha.0](https://github.com/parca-dev/parca/compare/ui-v0.14.1...ui-v0.14.3-alpha.0) (2022-07-26)
+
+
+
+## [0.13.14](https://github.com/parca-dev/parca/compare/ui-v0.13.12...ui-v0.13.14) (2022-06-29)
+
+
+### Features
+
+* add tooltip to callgraph ([b261a48](https://github.com/parca-dev/parca/commit/b261a48a92739d5fb957957da929495cb206417e))
+* connect callgraph component to actual data ([b7dd5d8](https://github.com/parca-dev/parca/commit/b7dd5d8b0851d11010f66a3a5ca03d50902636a1))
+
+
+
+## [0.13.10](https://github.com/parca-dev/parca/compare/ui-v0.13.2...ui-v0.13.10) (2022-06-22)
+
+
+
+## [0.13.2](https://github.com/parca-dev/parca/compare/ui-v0.13.1...ui-v0.13.2) (2022-05-31)
+
+
+
+
+
+## [0.14.37](https://github.com/parca-dev/parca/compare/ui-v0.14.36...ui-v0.14.37) (2022-08-24)
+
+**Note:** Version bump only for package @parca/profile
+
+
+
+
+
+## [0.14.36](https://github.com/parca-dev/parca/compare/ui-v0.14.35...ui-v0.14.36) (2022-08-24)
+
+
+### Bug Fixes
+
+* **ui:** enforce @typescript-eslint/explicit-function-return-type ([22a18fd](https://github.com/parca-dev/parca/commit/22a18fd3f7befef5cc175131d8c997c3967a5713))
+
+
+
+## 0.14.32 (2022-08-18)
+
+
+
+
+
 ## [0.14.31](https://github.com/parca-dev/parca/compare/ui-v0.14.30...ui-v0.14.31) (2022-08-18)
 
 

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@parca/profile",
-  "version": "0.14.31",
+  "version": "0.15.0",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@iconify/react": "^3.2.2",
-    "@parca/client": "^0.14.16",
-    "@parca/dynamicsize": "^0.14.29",
-    "@parca/parser": "^0.14.29",
+    "@parca/client": "^0.15.0",
+    "@parca/dynamicsize": "^0.15.0",
+    "@parca/functions": "^0.15.0",
+    "@parca/parser": "^0.15.0",
     "d3-scale": "^4.0.2",
     "d3-selection": "3.0.0",
     "react-copy-to-clipboard": "^5.1.0"
@@ -22,5 +23,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "ad5f13b18fb7c5dd70df3dc6b40477e44f839381"
+  "gitHead": "9bba12f8523b8d5763d9fb6d81c9df971a83f6fa"
 }

package/src/IcicleGraph.tsx

@@ -17,7 +17,7 @@ import {throttle} from 'lodash';
 import {pointer} from 'd3-selection';
 import {scaleLinear} from 'd3-scale';
 import {Flamegraph, FlamegraphNode, FlamegraphRootNode} from '@parca/client';
-import {FlamegraphTooltip} from '@parca/components';
+import {GraphTooltip} from '@parca/components';
 import {getLastItem, diffColor, isSearchMatch} from '@parca/functions';
 import {useAppSelector, selectDarkMode, selectSearchNodeString} from '@parca/store';
 
@@ -91,7 +91,7 @@ function IcicleRect({
   onMouseLeave,
   onClick,
   curPath,
-}: IcicleRectProps) {
+}: IcicleRectProps): JSX.Element {
   const currentSearchString = useAppSelector(selectSearchNodeString);
   const isFaded = curPath.length > 0 && name !== curPath[curPath.length - 1];
   const styles = isFaded ? fadedIcicleRectStyles : icicleRectStyles;
@@ -158,7 +158,7 @@ export function IcicleGraphNodes({
   path,
   setCurPath,
   curPath,
-}: IcicleGraphNodesProps) {
+}: IcicleGraphNodesProps): JSX.Element {
   const isDarkMode = useAppSelector(selectDarkMode);
 
   const nodes =
@@ -189,7 +189,7 @@ export function IcicleGraphNodes({
 
         const color = diffColor(diff, cumulative, isDarkMode);
 
-        const onClick = () => {
+        const onClick = (): void => {
           setCurPath(nextPath);
         };
 
@@ -199,8 +199,8 @@ export function IcicleGraphNodes({
             ? scaleLinear().domain([0, cumulative]).range([0, totalWidth])
             : xScale;
 
-        const onMouseEnter = () => setHoveringNode(d);
-        const onMouseLeave = () => setHoveringNode(undefined);
+        const onMouseEnter = (): void => setHoveringNode(d);
+        const onMouseLeave = (): void => setHoveringNode(undefined);
 
         return (
           <React.Fragment key={`node-${key}`}>
@@ -250,16 +250,16 @@ export function IcicleGraphRootNode({
   setHoveringNode,
   setCurPath,
   curPath,
-}: IcicleGraphRootNodeProps) {
+}: IcicleGraphRootNodeProps): JSX.Element {
   const isDarkMode = useAppSelector(selectDarkMode);
 
   const cumulative = parseFloat(node.cumulative);
   const diff = parseFloat(node.diff);
   const color = diffColor(diff, cumulative, isDarkMode);
 
-  const onClick = () => setCurPath([]);
-  const onMouseEnter = () => setHoveringNode(node);
-  const onMouseLeave = () => setHoveringNode(undefined);
+  const onClick = (): void => setCurPath([]);
+  const onMouseEnter = (): void => setHoveringNode(node);
+  const onMouseLeave = (): void => setHoveringNode(undefined);
   const path = [];
 
   return (
@@ -301,7 +301,7 @@ export default function IcicleGraph({
   setCurPath,
   curPath,
   sampleUnit,
-}: IcicleGraphProps) {
+}: IcicleGraphProps): JSX.Element {
   const [hoveringNode, setHoveringNode] = useState<
     FlamegraphNode | FlamegraphRootNode | undefined
   >();
@@ -331,7 +331,7 @@ export default function IcicleGraph({
 
   return (
     <div onMouseLeave={() => setHoveringNode(undefined)}>
-      <FlamegraphTooltip
+      <GraphTooltip
         unit={sampleUnit}
         total={total}
         x={pos[0]}

package/src/ProfileIcicleGraph.tsx

@@ -31,7 +31,7 @@ const ProfileIcicleGraph = ({
   curPath,
   setNewCurPath,
   sampleUnit,
-}: ProfileIcicleGraphProps) => {
+}: ProfileIcicleGraphProps): JSX.Element => {
   const compareMode = useAppSelector(selectCompareMode);
   const {ref, dimensions} = useContainerDimensions();
 

package/src/ProfileView.tsx

@@ -14,8 +14,17 @@
 import React, {useEffect, useMemo, useState} from 'react';
 
 import {parseParams} from '@parca/functions';
-import {QueryServiceClient, Flamegraph, Top} from '@parca/client';
-import {Button, Card, SearchNodes, useGrpcMetadata, useParcaTheme} from '@parca/components';
+import useUIFeatureFlag from '@parca/functions/useUIFeatureFlag';
+import {QueryServiceClient, Flamegraph, Top, Callgraph} from '@parca/client';
+import {
+  Button,
+  Card,
+  SearchNodes,
+  useGrpcMetadata,
+  useParcaTheme,
+  Callgraph as CallgraphComponent,
+} from '@parca/components';
+import {useContainerDimensions} from '@parca/dynamicsize';
 
 import ProfileShareButton from './components/ProfileShareButton';
 import ProfileIcicleGraph from './ProfileIcicleGraph';
@@ -40,7 +49,13 @@ interface TopTableData {
   error?: any;
 }
 
-type VisualizationType = 'icicle' | 'table' | 'both';
+interface CallgraphData {
+  loading: boolean;
+  data?: Callgraph;
+  error?: any;
+}
+
+type VisualizationType = 'icicle' | 'table' | 'callgraph' | 'both';
 
 interface ProfileVisState {
   currentView: VisualizationType;
@@ -50,6 +65,7 @@ interface ProfileVisState {
 interface ProfileViewProps {
   flamegraphData?: FlamegraphData;
   topTableData?: TopTableData;
+  callgraphData?: CallgraphData;
   sampleUnit: string;
   profileVisState: ProfileVisState;
   profileSource?: ProfileSource;
@@ -58,7 +74,7 @@ interface ProfileViewProps {
   compare?: boolean;
 }
 
-function arrayEquals(a, b): boolean {
+function arrayEquals<T>(a: T[], b: T[]): boolean {
   return (
     Array.isArray(a) &&
     Array.isArray(b) &&
@@ -79,15 +95,19 @@ export const useProfileVisState = (): ProfileVisState => {
 export const ProfileView = ({
   flamegraphData,
   topTableData,
+  callgraphData,
   sampleUnit,
   profileSource,
   queryClient,
   navigateTo,
   profileVisState,
 }: ProfileViewProps): JSX.Element => {
+  const {ref, dimensions} = useContainerDimensions();
   const [curPath, setCurPath] = useState<string[]>([]);
   const {currentView, setCurrentView} = profileVisState;
 
+  const [callgraphEnabled] = useUIFeatureFlag('callgraph');
+
   const metadata = useGrpcMetadata();
   const {loader} = useParcaTheme();
 
@@ -100,6 +120,9 @@ export const ProfileView = ({
     if (currentView === 'icicle') {
       return Boolean(flamegraphData?.loading);
     }
+    if (currentView === 'callgraph') {
+      return !!callgraphData?.loading;
+    }
     if (currentView === 'table') {
       return Boolean(topTableData?.loading);
     }
@@ -107,7 +130,7 @@ export const ProfileView = ({
       return Boolean(flamegraphData?.loading) || Boolean(topTableData?.loading);
     }
     return false;
-  }, [currentView, flamegraphData?.loading, topTableData?.loading]);
+  }, [currentView, callgraphData?.loading, flamegraphData?.loading, topTableData?.loading]);
 
   const isLoaderVisible = useDelayedLoader(isLoading);
 
@@ -124,7 +147,7 @@ export const ProfileView = ({
     );
   }
 
-  const downloadPProf = async (e: React.MouseEvent<HTMLElement>) => {
+  const downloadPProf = async (e: React.MouseEvent<HTMLElement>): Promise<void> => {
     e.preventDefault();
     if (profileSource == null || queryClient == null) {
       return;
@@ -141,15 +164,15 @@ export const ProfileView = ({
     }
   };
 
-  const resetIcicleGraph = () => setCurPath([]);
+  const resetIcicleGraph = (): void => setCurPath([]);
 
-  const setNewCurPath = (path: string[]) => {
+  const setNewCurPath = (path: string[]): void => {
     if (!arrayEquals(curPath, path)) {
       setCurPath(path);
     }
   };
 
-  const switchProfileView = (view: VisualizationType) => {
+  const switchProfileView = (view: VisualizationType): void => {
     if (view == null) {
       return;
     }
@@ -196,6 +219,18 @@ export const ProfileView = ({
                   </Button>
                 </div>
 
+                {callgraphEnabled ? (
+                  <div className="mr-3">
+                    <Button
+                      variant={`${currentView === 'callgraph' ? 'primary' : 'neutral'}`}
+                      onClick={() => switchProfileView('callgraph')}
+                      className="whitespace-nowrap text-ellipsis"
+                    >
+                      Call Graph
+                    </Button>
+                  </div>
+                ) : null}
+
                 <Button
                   variant={`${currentView === 'table' ? 'primary' : 'neutral'}`}
                   className="items-center rounded-tr-none rounded-br-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons"
@@ -222,7 +257,7 @@ export const ProfileView = ({
               </div>
             </div>
 
-            <div className="flex space-x-4 justify-between">
+            <div ref={ref} className="flex space-x-4 justify-between w-full">
               {currentView === 'icicle' && flamegraphData?.data != null && (
                 <div className="w-full">
                   <ProfileIcicleGraph
@@ -234,6 +269,18 @@ export const ProfileView = ({
                 </div>
               )}
 
+              {currentView === 'callgraph' && callgraphData?.data != null && (
+                <div className="w-full">
+                  {dimensions?.width && (
+                    <CallgraphComponent
+                      graph={callgraphData.data}
+                      sampleUnit={sampleUnit}
+                      width={dimensions?.width}
+                    />
+                  )}
+                </div>
+              )}
+
               {currentView === 'table' && topTableData != null && (
                 <div className="w-full">
                   <TopTable data={topTableData.data} sampleUnit={sampleUnit} />

package/src/ProfileViewWithData.tsx

@@ -30,7 +30,7 @@ export const ProfileViewWithData = ({
   queryClient,
   profileSource,
   navigateTo,
-}: ProfileViewWithDataProps) => {
+}: ProfileViewWithDataProps): JSX.Element => {
   const profileVisState = useProfileVisState();
   const {currentView} = profileVisState;
   const {
@@ -49,6 +49,14 @@ export const ProfileViewWithData = ({
     skip: currentView !== 'table' && currentView !== 'both',
   });
 
+  const {
+    isLoading: callgraphLoading,
+    response: callgraphResponse,
+    error: callgraphError,
+  } = useQuery(queryClient, profileSource, QueryRequest_ReportType.CALLGRAPH, {
+    skip: currentView != 'callgraph',
+  });
+
   const sampleUnit = profileSource.ProfileType().sampleUnit;
 
   return (
@@ -67,6 +75,14 @@ export const ProfileViewWithData = ({
           topTableResponse?.report.oneofKind === 'top' ? topTableResponse.report.top : undefined,
         error: topTableError,
       }}
+      callgraphData={{
+        loading: callgraphLoading,
+        data:
+          callgraphResponse?.report.oneofKind === 'callgraph'
+            ? callgraphResponse?.report?.callgraph
+            : undefined,
+        error: callgraphError,
+      }}
       profileVisState={profileVisState}
       sampleUnit={sampleUnit}
       profileSource={profileSource}

package/src/TopTable.tsx

@@ -26,7 +26,7 @@ interface TopTableProps {
   sampleUnit: string;
 }
 
-const Arrow = ({direction}: {direction: string | undefined}) => {
+const Arrow = ({direction}: {direction: string | undefined}): JSX.Element => {
   return (
     <svg
       className={`${direction !== undefined ? 'fill-[#161616] dark:fill-[#ffffff]' : ''}`}
@@ -41,7 +41,22 @@ const Arrow = ({direction}: {direction: string | undefined}) => {
   );
 };
 
-const useSortableData = (top?: Top, config = {key: 'cumulative', direction: 'desc'}) => {
+const useSortableData = (
+  top?: Top,
+  config = {key: 'cumulative', direction: 'desc'}
+): {
+  items:
+    | Array<{
+        diff: number;
+        cumulative: number;
+        flat: number;
+        name: string | undefined;
+        meta?: TopNodeMeta | undefined;
+      }>
+    | undefined;
+  requestSort: (key: string) => void;
+  sortConfig: {key: string; direction: string} | null;
+} => {
   const [sortConfig, setSortConfig] = React.useState<{key: string; direction: string} | null>(
     config
   );
@@ -74,7 +89,7 @@ const useSortableData = (top?: Top, config = {key: 'cumulative', direction: 'des
     return sortableItems;
   }, [items, sortConfig]);
 
-  const requestSort = (key: string) => {
+  const requestSort = (key: string): void => {
     let direction = 'desc';
     if (sortConfig != null && sortConfig.key === key && sortConfig.direction === 'desc') {
       direction = 'asc';
@@ -112,14 +127,14 @@ export const TopTable = ({data: top, sampleUnit}: TopTableProps): JSX.Element =>
   const total = top != null ? top.list.length : 0;
   if (total === 0) return <>Profile has no samples</>;
 
-  const getClassNamesFor = (name: string) => {
+  const getClassNamesFor = (name: string): string | undefined => {
     if (sortConfig == null) {
       return;
     }
     return sortConfig.key === name ? sortConfig.direction : undefined;
   };
 
-  const addPlusSign = (num: string) => {
+  const addPlusSign = (num: string): string => {
     if (num.charAt(0) === '0' || num.charAt(0) === '-') {
       return num;
     }

package/src/components/DiffLegend.tsx

@@ -25,7 +25,7 @@ const DiffLegendBar = ({
 }: {
   onMouseEnter: () => void;
   onMouseLeave: () => void;
-}) => {
+}): JSX.Element => {
   const isDarkMode = useAppSelector(selectDarkMode);
 
   return (
@@ -54,7 +54,7 @@ const DiffLegendBar = ({
   );
 };
 
-const DiffLegend = () => {
+const DiffLegend = (): JSX.Element => {
   const [showLegendTooltip, setShowLegendTooltip] = useState(false);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
@@ -64,10 +64,10 @@ const DiffLegend = () => {
     strategy: 'absolute',
   });
 
-  const handleMouseEnter = () => {
+  const handleMouseEnter = (): void => {
     setShowLegendTooltip(true);
   };
-  const handleMouseLeave = () => {
+  const handleMouseLeave = (): void => {
     setShowLegendTooltip(false);
   };
 

package/src/components/ProfileShareButton/ResultBox.tsx

@@ -24,10 +24,10 @@ interface Props {
 
 let timeoutHandle: ReturnType<typeof setTimeout> | null = null;
 
-const ResultBox = ({value, className = ''}: Props) => {
+const ResultBox = ({value, className = ''}: Props): JSX.Element => {
   const [isCopied, setIsCopied] = useState<boolean>(false);
 
-  const onCopy = () => {
+  const onCopy = (): void => {
     setIsCopied(true);
     (window.document?.activeElement as HTMLElement)?.blur();
     if (timeoutHandle != null) {

package/src/components/ProfileShareButton/index.tsx

@@ -34,14 +34,14 @@ const ProfileShareModal = ({
   closeModal,
   queryRequest,
   queryClient,
-}: ProfileShareModalProps) => {
+}: ProfileShareModalProps): JSX.Element => {
   const [isShared, setIsShared] = useState(false);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string>('');
   const [description, setDescription] = useState<string>('');
   const [sharedLink, setSharedLink] = useState<string>('');
   const metadata = useGrpcMetadata();
-  const isFormDataValid = () => true;
+  const isFormDataValid = (): boolean => true;
 
   const handleSubmit: () => Promise<void> = async () => {
     try {
@@ -60,7 +60,7 @@ const ProfileShareModal = ({
     }
   };
 
-  const onClose = () => {
+  const onClose = (): void => {
     setLoading(false);
     setError('');
     setDescription('');
@@ -113,7 +113,7 @@ const ProfileShareModal = ({
   );
 };
 
-const ProfileShareButton = ({queryRequest, queryClient}: Props) => {
+const ProfileShareButton = ({queryRequest, queryClient}: Props): JSX.Element => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   return (

package/src/testdata/link_data.json

@@ -0,0 +1,56 @@
+{
+  "total": "4358676",
+  "unit": "count",
+  "height": 27,
+  "data": {
+    "nodes": {
+      "root": {
+        "id": "root",
+        "cumulative": "10",
+        "diff": "0"
+      },
+      "1": {
+        "id": "1",
+        "cumulative": "2",
+        "diff": "0"
+      },
+      "2": {
+        "id": "2",
+        "cumulative": "9",
+        "diff": "0"
+      },
+      "3": {
+        "id": "3",
+        "cumulative": "8"
+      },
+      "4": {
+        "id": "4",
+        "cumulative": "2"
+      }
+    },
+    "links": [
+      {
+        "source": "root",
+        "target": "1"
+      },
+      {
+        "source": "root",
+        "target": "4"
+      },
+      {
+        "source": "1",
+        "target": "2"
+      },
+      {
+        "source": "2",
+        "target": "3"
+      }
+    ],
+    "reversedLinks": [
+      {
+        "source": "3",
+        "target": "1"
+      }
+    ]
+  }
+}

package/src/testdata/tabular.json

@@ -0,0 +1,30 @@
+{
+  "total": "4358676",
+  "unit": "count",
+  "height": 27,
+  "data": [
+    {
+      "id": "root"
+    },
+    {
+      "id": "child_1",
+      "parentIds": ["root", "loop_child"]
+    },
+    {
+      "id": "child_2",
+      "parentIds": ["root"]
+    },
+    {
+      "id": "grandchild_1",
+      "parentIds": ["child_1"]
+    },
+    {
+      "id": "grandchild_2",
+      "parentIds": ["child_1"]
+    },
+    {
+      "id": "loop_child",
+      "parentIds": ["grandchild_1"]
+    }
+  ]
+}

package/src/testdata/test_graph.json

@@ -0,0 +1,53 @@
+{
+  "total": "4358676",
+  "unit": "count",
+  "height": 27,
+  "root": {
+    "id": "root",
+    "cumulative": "4358676",
+    "diff": "0",
+    "children": [
+      {
+        "id": "child_1",
+        "cumulative": "1",
+        "diff": "0",
+        "children": [
+          {
+            "id": "child_2",
+            "cumulative": "1",
+            "diff": "0",
+            "children": [
+              {
+                "id": "root",
+                "cumulative": "4358676",
+                "diff": "0",
+                "children": [
+                  {
+                    "id": "child_1",
+                    "cumulative": "1",
+                    "diff": "0",
+                    "children": [
+                      {
+                        "id": "child_2",
+                        "cumulative": "1",
+                        "diff": "0",
+                        "children": [
+                          {
+                            "id": "child_1",
+                            "cumulative": "1",
+                            "diff": "0",
+                            "children": []
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}

package/src/useDelayedLoader.ts

@@ -17,7 +17,7 @@ interface DelayedLoaderOptions {
   delay?: number;
 }
 
-const useDelayedLoader = (isLoading = false, options?: DelayedLoaderOptions) => {
+const useDelayedLoader = (isLoading = false, options?: DelayedLoaderOptions): boolean => {
   const {delay = 500} = options ?? {};
   const [isLoaderVisible, setIsLoaderVisible] = useState<boolean>(false);
   useEffect(() => {

package/src/utils.ts

@@ -25,7 +25,7 @@ export const downloadPprof = async (
   request: QueryRequest,
   queryClient: QueryServiceClient,
   metadata: RpcMetadata
-) => {
+): Promise<Blob> => {
   const req = {
     ...request,
     reportType: QueryRequest_ReportType.PPROF,