@parca/profile 0.14.12 → 0.14.13

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.14.13](https://github.com/parca-dev/parca/compare/ui-v0.14.12...ui-v0.14.13) (2022-08-03)
+
+## [0.14.7](https://github.com/parca-dev/parca/compare/ui-v0.14.5...ui-v0.14.7) (2022-07-27)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.14.12](https://github.com/parca-dev/parca/compare/ui-v0.14.11...ui-v0.14.12) (2022-08-02)
 
 **Note:** Version bump only for package @parca/profile

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.14.12",
+  "version": "0.14.13",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@iconify/react": "^3.2.2",
@@ -22,5 +22,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "252b9b4813c78624181ea55614f4339921a2ffc1"
+  "gitHead": "614acf00ec750eaee1d52b8e8a827c5c8d54ccfc"
 }

package/src/IcicleGraph.tsx

@@ -1,4 +1,5 @@
 import React, {MouseEvent, useEffect, useRef, useState} from 'react';
+
 import {throttle} from 'lodash';
 import {pointer} from 'd3-selection';
 import {scaleLinear} from 'd3-scale';
@@ -185,7 +186,7 @@ export function IcicleGraphNodes({
         const onMouseLeave = () => setHoveringNode(undefined);
 
         return (
-          <React.Fragment>
+          <React.Fragment key={`node-${key}`}>
             <IcicleRect
               key={`rect-${key}`}
               x={xStart}

package/src/ProfileIcicleGraph.tsx

@@ -20,13 +20,12 @@ const ProfileIcicleGraph = ({
   sampleUnit,
 }: ProfileIcicleGraphProps) => {
   const compareMode = useAppSelector(selectCompareMode);
+  const {ref, dimensions} = useContainerDimensions();
 
   if (graph === undefined) return <div>no data...</div>;
   const total = graph.total;
   if (parseFloat(total) === 0) return <>Profile has no samples</>;
 
-  const {ref, dimensions} = useContainerDimensions();
-
   return (
     <>
       {compareMode && <DiffLegend />}

package/src/ProfileView.tsx

@@ -1,22 +1,46 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
+
 import {parseParams} from '@parca/functions';
-import {QueryServiceClient, QueryRequest_ReportType} from '@parca/client';
+import {QueryServiceClient, Flamegraph, Top} from '@parca/client';
 import {Button, Card, SearchNodes, useGrpcMetadata, useParcaTheme} from '@parca/components';
 
 import ProfileShareButton from './components/ProfileShareButton';
 import ProfileIcicleGraph from './ProfileIcicleGraph';
 import {ProfileSource} from './ProfileSource';
-import {useQuery} from './useQuery';
 import TopTable from './TopTable';
+import useDelayedLoader from './useDelayedLoader';
 import {downloadPprof} from './utils';
 
 import './ProfileView.styles.css';
 
 type NavigateFunction = (path: string, queryParams: any) => void;
 
+interface FlamegraphData {
+  loading: boolean;
+  data?: Flamegraph;
+  error?: any;
+}
+
+interface TopTableData {
+  loading: boolean;
+  data?: Top;
+  error?: any;
+}
+
+type VisualizationType = 'icicle' | 'table' | 'both';
+
+interface ProfileVisState {
+  currentView: VisualizationType;
+  setCurrentView: (view: VisualizationType) => void;
+}
+
 interface ProfileViewProps {
-  queryClient: QueryServiceClient;
-  profileSource: ProfileSource;
+  flamegraphData?: FlamegraphData;
+  topTableData?: TopTableData;
+  sampleUnit: string;
+  profileVisState: ProfileVisState;
+  profileSource?: ProfileSource;
+  queryClient?: QueryServiceClient;
   navigateTo?: NavigateFunction;
   compare?: boolean;
 }
@@ -29,22 +53,28 @@ function arrayEquals(a, b): boolean {
     a.every((val, index) => val === b[index])
   );
 }
+export const useProfileVisState = (): ProfileVisState => {
+  const router = parseParams(window.location.search);
+  const currentViewFromURL = router.currentProfileView as string;
+  const [currentView, setCurrentView] = useState<VisualizationType>(
+    (currentViewFromURL as VisualizationType) || 'icicle'
+  );
+
+  return {currentView, setCurrentView};
+};
 
 export const ProfileView = ({
-  queryClient,
+  flamegraphData,
+  topTableData,
+  sampleUnit,
   profileSource,
+  queryClient,
   navigateTo,
+  profileVisState,
 }: ProfileViewProps): JSX.Element => {
-  const router = parseParams(window.location.search);
-  const currentViewFromURL = router.currentProfileView as string;
   const [curPath, setCurPath] = useState<string[]>([]);
-  const [isLoaderVisible, setIsLoaderVisible] = useState<boolean>(false);
-  const {isLoading, response, error} = useQuery(
-    queryClient,
-    profileSource,
-    QueryRequest_ReportType.FLAMEGRAPH_UNSPECIFIED
-  );
-  const [currentView, setCurrentView] = useState<string | undefined>(currentViewFromURL);
+  const {currentView, setCurrentView} = profileVisState;
+
   const metadata = useGrpcMetadata();
   const {loader} = useParcaTheme();
 
@@ -53,29 +83,39 @@ export const ProfileView = ({
     setCurPath([]);
   }, [profileSource]);
 
-  useEffect(() => {
-    let showLoaderTimeout;
-    if (isLoading && !isLoaderVisible) {
-      // if the request takes longer than half a second, show the loading icon
-      showLoaderTimeout = setTimeout(() => {
-        setIsLoaderVisible(true);
-      }, 500);
-    } else {
-      setIsLoaderVisible(false);
+  const isLoading = useMemo(() => {
+    if (currentView === 'icicle') {
+      return !!flamegraphData?.loading;
     }
-    return () => clearTimeout(showLoaderTimeout);
-  }, [isLoading]);
+    if (currentView === 'table') {
+      return !!topTableData?.loading;
+    }
+    if (currentView === 'both') {
+      return !!flamegraphData?.loading || !!topTableData?.loading;
+    }
+    return false;
+  }, [currentView, flamegraphData?.loading, topTableData?.loading]);
+
+  const isLoaderVisible = useDelayedLoader(isLoading);
 
   if (isLoaderVisible) {
     return <>{loader}</>;
   }
 
-  if (error !== null) {
-    return <div className="p-10 flex justify-center">An error occurred: {error.message}</div>;
+  if (flamegraphData?.error != null) {
+    console.error('Error: ', flamegraphData?.error);
+    return (
+      <div className="p-10 flex justify-center">
+        An error occurred: {flamegraphData?.error.message}
+      </div>
+    );
   }
 
   const downloadPProf = async (e: React.MouseEvent<HTMLElement>) => {
     e.preventDefault();
+    if (!profileSource || !queryClient) {
+      return;
+    }
 
     try {
       const blob = await downloadPprof(profileSource.QueryRequest(), queryClient, metadata);
@@ -96,16 +136,18 @@ export const ProfileView = ({
     }
   };
 
-  const switchProfileView = (view: string) => {
+  const switchProfileView = (view: VisualizationType) => {
+    if (view == null) {
+      return;
+    }
     if (navigateTo === undefined) return;
 
     setCurrentView(view);
+    const router = parseParams(window.location.search);
 
     navigateTo('/', {...router, ...{currentProfileView: view}});
   };
 
-  const sampleUnit = profileSource.ProfileType().sampleUnit;
-
   return (
     <>
       <div className="py-3">
@@ -114,10 +156,12 @@ export const ProfileView = ({
             <div className="flex py-3 w-full">
               <div className="w-2/5 flex space-x-4">
                 <div className="flex space-x-1">
-                  <ProfileShareButton
-                    queryRequest={profileSource.QueryRequest()}
-                    queryClient={queryClient}
-                  />
+                  {profileSource && queryClient ? (
+                    <ProfileShareButton
+                      queryRequest={profileSource.QueryRequest()}
+                      queryClient={queryClient}
+                    />
+                  ) : null}
 
                   <Button color="neutral" onClick={downloadPProf}>
                     Download pprof
@@ -149,7 +193,7 @@ export const ProfileView = ({
 
                 <Button
                   variant={`${currentView === 'both' ? 'primary' : 'neutral'}`}
-                  className="items-center rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none border-l-0 border-r-0 w-auto px-8 whitespace-nowrap no-outline-on-buttons no-outline-on-buttons text-ellipsis"
+                  className="items-center rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none border-l-0 border-r-0 w-auto px-8 whitespace-nowrap no-outline-on-buttons text-ellipsis"
                   onClick={() => switchProfileView('both')}
                 >
                   Both
@@ -166,45 +210,35 @@ export const ProfileView = ({
             </div>
 
             <div className="flex space-x-4 justify-between">
-              {currentView === 'icicle' &&
-                response !== null &&
-                response.report.oneofKind === 'flamegraph' && (
-                  <div className="w-full">
-                    <ProfileIcicleGraph
-                      curPath={curPath}
-                      setNewCurPath={setNewCurPath}
-                      graph={response.report.flamegraph}
-                      sampleUnit={sampleUnit}
-                    />
-                  </div>
-                )}
-
-              {currentView === 'table' && (
+              {currentView === 'icicle' && flamegraphData?.data != null && (
                 <div className="w-full">
-                  <TopTable
-                    queryClient={queryClient}
-                    profileSource={profileSource}
+                  <ProfileIcicleGraph
+                    curPath={curPath}
+                    setNewCurPath={setNewCurPath}
+                    graph={flamegraphData.data}
                     sampleUnit={sampleUnit}
                   />
                 </div>
               )}
 
+              {currentView === 'table' && topTableData != null && (
+                <div className="w-full">
+                  <TopTable data={topTableData.data} sampleUnit={sampleUnit} />
+                </div>
+              )}
+
               {currentView === 'both' && (
                 <>
                   <div className="w-1/2">
-                    <TopTable
-                      queryClient={queryClient}
-                      profileSource={profileSource}
-                      sampleUnit={sampleUnit}
-                    />
+                    <TopTable data={topTableData?.data} sampleUnit={sampleUnit} />
                   </div>
 
                   <div className="w-1/2">
-                    {response !== null && response.report.oneofKind === 'flamegraph' && (
+                    {flamegraphData != null && (
                       <ProfileIcicleGraph
                         curPath={curPath}
                         setNewCurPath={setNewCurPath}
-                        graph={response.report.flamegraph}
+                        graph={flamegraphData.data}
                         sampleUnit={sampleUnit}
                       />
                     )}

package/src/ProfileViewWithData.tsx

@@ -0,0 +1,66 @@
+import {QueryServiceClient, QueryRequest_ReportType} from '@parca/client';
+
+import {useQuery} from './useQuery';
+import {ProfileView, useProfileVisState} from './ProfileView';
+import {ProfileSource} from './ProfileSource';
+
+type NavigateFunction = (path: string, queryParams: any) => void;
+
+interface ProfileViewWithDataProps {
+  queryClient: QueryServiceClient;
+  profileSource: ProfileSource;
+  navigateTo?: NavigateFunction;
+  compare?: boolean;
+}
+
+export const ProfileViewWithData = ({
+  queryClient,
+  profileSource,
+  navigateTo,
+}: ProfileViewWithDataProps) => {
+  const profileVisState = useProfileVisState();
+  const {currentView} = profileVisState;
+  const {
+    isLoading: flamegraphLoading,
+    response: flamegraphResponse,
+    error: flamegraphError,
+  } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_UNSPECIFIED, {
+    skip: currentView != 'icicle' && currentView != 'both',
+  });
+
+  const {
+    isLoading: topTableLoading,
+    response: topTableResponse,
+    error: topTableError,
+  } = useQuery(queryClient, profileSource, QueryRequest_ReportType.TOP, {
+    skip: currentView != 'table' && currentView != 'both',
+  });
+
+  const sampleUnit = profileSource.ProfileType().sampleUnit;
+
+  return (
+    <ProfileView
+      flamegraphData={{
+        loading: flamegraphLoading,
+        data:
+          flamegraphResponse?.report.oneofKind === 'flamegraph'
+            ? flamegraphResponse?.report?.flamegraph
+            : undefined,
+        error: flamegraphError,
+      }}
+      topTableData={{
+        loading: topTableLoading,
+        data:
+          topTableResponse?.report.oneofKind === 'top' ? topTableResponse.report.top : undefined,
+        error: topTableError,
+      }}
+      profileVisState={profileVisState}
+      sampleUnit={sampleUnit}
+      profileSource={profileSource}
+      queryClient={queryClient}
+      navigateTo={navigateTo}
+    />
+  );
+};
+
+export default ProfileViewWithData;

package/src/TopTable.tsx

@@ -1,21 +1,15 @@
 import React from 'react';
-import {getLastItem, valueFormatter, isSearchMatch, SEARCH_STRING_COLOR} from '@parca/functions';
+
+import {getLastItem, valueFormatter, isSearchMatch} from '@parca/functions';
 import {useAppSelector, selectCompareMode, selectSearchNodeString} from '@parca/store';
-import {
-  QueryResponse,
-  QueryServiceClient,
-  QueryRequest_ReportType,
-  TopNodeMeta,
-} from '@parca/client';
-import {ProfileSource} from './ProfileSource';
-import {useQuery} from './useQuery';
+import {TopNodeMeta, Top} from '@parca/client';
+
 import {hexifyAddress} from './utils';
 
 import './TopTable.styles.css';
 
-interface ProfileViewProps {
-  queryClient: QueryServiceClient;
-  profileSource: ProfileSource;
+interface TopTableProps {
+  data?: Top;
   sampleUnit: string;
 }
 
@@ -29,21 +23,17 @@ const Arrow = ({direction}: {direction: string | undefined}) => {
       width="11"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path clip-rule="evenodd" d="m.573997 0 5.000003 10 5-10h-9.999847z" fill-rule="evenodd" />
+      <path clipRule="evenodd" d="m.573997 0 5.000003 10 5-10h-9.999847z" fillRule="evenodd" />
     </svg>
   );
 };
 
-const useSortableData = (
-  response: QueryResponse | null,
-  config = {key: 'cumulative', direction: 'desc'}
-) => {
+const useSortableData = (top?: Top, config = {key: 'cumulative', direction: 'desc'}) => {
   const [sortConfig, setSortConfig] = React.useState<{key: string; direction: string} | null>(
     config
   );
 
-  const rawTableReport =
-    response !== null && response.report.oneofKind === 'top' ? response.report.top.list : [];
+  const rawTableReport = top ? top.list : [];
 
   const items = rawTableReport.map(node => ({
     ...node,
@@ -98,25 +88,15 @@ export const RowLabel = (meta: TopNodeMeta | undefined): string => {
   return fallback === '' ? '<unknown>' : fallback;
 };
 
-export const TopTable = ({
-  queryClient,
-  profileSource,
-  sampleUnit,
-}: ProfileViewProps): JSX.Element => {
-  const {response, error} = useQuery(queryClient, profileSource, QueryRequest_ReportType.TOP);
-  const {items, requestSort, sortConfig} = useSortableData(response);
+export const TopTable = ({data: top, sampleUnit}: TopTableProps): JSX.Element => {
+  const {items, requestSort, sortConfig} = useSortableData(top);
   const currentSearchString = useAppSelector(selectSearchNodeString);
 
   const compareMode = useAppSelector(selectCompareMode);
 
   const unit = sampleUnit;
 
-  if (error != null) {
-    return <div className="p-10 flex justify-center">An error occurred: {error.message}</div>;
-  }
-
-  const total =
-    response !== null && response.report.oneofKind === 'top' ? response.report.top.list.length : 0;
+  const total = top ? top.list.length : 0;
   if (total === 0) return <>Profile has no samples</>;
 
   const getClassNamesFor = name => {

package/src/index.tsx

@@ -2,4 +2,5 @@ export * from './IcicleGraph';
 export * from './ProfileIcicleGraph';
 export * from './ProfileSource';
 export * from './ProfileView';
+export * from './ProfileViewWithData';
 export * from './utils';

package/src/useDelayedLoader.ts

@@ -0,0 +1,26 @@
+import {useEffect, useState} from 'react';
+
+interface DelayedLoaderOptions {
+  delay?: number;
+}
+
+const useDelayedLoader = (isLoading = false, options?: DelayedLoaderOptions) => {
+  const {delay = 500} = options || {};
+  const [isLoaderVisible, setIsLoaderVisible] = useState<boolean>(false);
+  useEffect(() => {
+    let showLoaderTimeout;
+    if (isLoading && !isLoaderVisible) {
+      // if the request takes longer than half a second, show the loading icon
+      showLoaderTimeout = setTimeout(() => {
+        setIsLoaderVisible(true);
+      }, delay);
+    } else {
+      setIsLoaderVisible(false);
+    }
+    return () => clearTimeout(showLoaderTimeout);
+  }, [isLoading]);
+
+  return isLoaderVisible;
+};
+
+export default useDelayedLoader;

package/src/useQuery.tsx

@@ -1,7 +1,9 @@
-import React, {useEffect, useState} from 'react';
+import {useEffect, useState} from 'react';
+
 import {QueryServiceClient, QueryResponse, QueryRequest_ReportType} from '@parca/client';
 import {RpcError} from '@protobuf-ts/runtime-rpc';
 import {useGrpcMetadata} from '@parca/components';
+
 import {ProfileSource} from './ProfileSource';
 
 export interface IQueryResult {
@@ -10,11 +12,17 @@ export interface IQueryResult {
   isLoading: boolean;
 }
 
+interface UseQueryOptions {
+  skip?: boolean;
+}
+
 export const useQuery = (
   client: QueryServiceClient,
   profileSource: ProfileSource,
-  reportType: QueryRequest_ReportType
+  reportType: QueryRequest_ReportType,
+  options?: UseQueryOptions
 ): IQueryResult => {
+  const {skip = false} = options || {};
   const [result, setResult] = useState<IQueryResult>({
     response: null,
     error: null,
@@ -23,6 +31,9 @@ export const useQuery = (
   const metadata = useGrpcMetadata();
 
   useEffect(() => {
+    if (skip) {
+      return;
+    }
     setResult({
       response: null,
       error: null,