@parca/profile 0.14.37 → 0.15.0

package/CHANGELOG.md

@@ -3,6 +3,52 @@
 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

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@parca/profile",
-  "version": "0.14.37",
+  "version": "0.15.0",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@iconify/react": "^3.2.2",
-    "@parca/client": "^0.14.37",
-    "@parca/dynamicsize": "^0.14.36",
-    "@parca/parser": "^0.14.36",
+    "@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": "21acf8f58da4fc28346b83a24692bcc9dabc4f46"
+  "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';
 
@@ -331,7 +331,7 @@ export default function IcicleGraph({
 
   return (
     <div onMouseLeave={() => setHoveringNode(undefined)}>
-      <FlamegraphTooltip
+      <GraphTooltip
         unit={sampleUnit}
         total={total}
         x={pos[0]}

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;
@@ -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);
 
@@ -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

@@ -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/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": []
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}