@parca/profile 0.15.17 → 0.15.18

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.15.18](https://github.com/parca-dev/parca/compare/ui-v0.15.17...ui-v0.15.18) (2022-09-08)
+
+
+
+## [0.15.10](https://github.com/parca-dev/parca/compare/ui-v0.15.8...ui-v0.15.10) (2022-08-30)
+
+**Note:** Version bump only for package @parca/profile
+
+
+
+
+
 ## [0.15.17](https://github.com/parca-dev/parca/compare/ui-v0.15.16...ui-v0.15.17) (2022-09-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.15.17",
+  "version": "0.15.18",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@iconify/react": "^3.2.2",
@@ -23,5 +23,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "df4bacb55c1503822de9d3312ebe8b90ff17d55b"
+  "gitHead": "6af20931851774b1548661a5a47ccfd71b1a2c61"
 }

package/src/ProfileView.tsx

@@ -20,7 +20,6 @@ import {
   Button,
   Card,
   SearchNodes,
-  useGrpcMetadata,
   useParcaTheme,
   Callgraph as CallgraphComponent,
 } from '@parca/components';
@@ -31,7 +30,6 @@ import ProfileIcicleGraph from './ProfileIcicleGraph';
 import {ProfileSource} from './ProfileSource';
 import TopTable from './TopTable';
 import useDelayedLoader from './useDelayedLoader';
-import {downloadPprof} from './utils';
 
 import './ProfileView.styles.css';
 
@@ -55,7 +53,7 @@ interface CallgraphData {
   error?: any;
 }
 
-type VisualizationType = 'icicle' | 'table' | 'callgraph' | 'both';
+export type VisualizationType = 'icicle' | 'table' | 'callgraph' | 'both';
 
 interface ProfileVisState {
   currentView: VisualizationType;
@@ -72,6 +70,7 @@ interface ProfileViewProps {
   queryClient?: QueryServiceClient;
   navigateTo?: NavigateFunction;
   compare?: boolean;
+  onDownloadPProf: () => void;
 }
 
 function arrayEquals<T>(a: T[], b: T[]): boolean {
@@ -83,11 +82,18 @@ function arrayEquals<T>(a: T[], b: T[]): boolean {
   );
 }
 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'
-  );
+  const [currentView, setCurrentView] = useState<VisualizationType>(() => {
+    if (typeof window === 'undefined') {
+      return 'icicle';
+    }
+    const router = parseParams(window.location.search);
+    const currentViewFromURL = router.currentProfileView as string;
+
+    if (currentViewFromURL != null) {
+      return currentViewFromURL as VisualizationType;
+    }
+    return 'icicle';
+  });
 
   return {currentView, setCurrentView};
 };
@@ -101,6 +107,7 @@ export const ProfileView = ({
   queryClient,
   navigateTo,
   profileVisState,
+  onDownloadPProf,
 }: ProfileViewProps): JSX.Element => {
   const {ref, dimensions} = useContainerDimensions();
   const [curPath, setCurPath] = useState<string[]>([]);
@@ -108,7 +115,6 @@ export const ProfileView = ({
 
   const [callgraphEnabled] = useUIFeatureFlag('callgraph');
 
-  const metadata = useGrpcMetadata();
   const {loader} = useParcaTheme();
 
   useEffect(() => {
@@ -147,23 +153,6 @@ export const ProfileView = ({
     );
   }
 
-  const downloadPProf = async (e: React.MouseEvent<HTMLElement>): Promise<void> => {
-    e.preventDefault();
-    if (profileSource == null || queryClient == null) {
-      return;
-    }
-
-    try {
-      const blob = await downloadPprof(profileSource.QueryRequest(), queryClient, metadata);
-      const link = document.createElement('a');
-      link.href = window.URL.createObjectURL(blob);
-      link.download = 'profile.pb.gz';
-      link.click();
-    } catch (error) {
-      console.error('Error while querying', error);
-    }
-  };
-
   const resetIcicleGraph = (): void => setCurPath([]);
 
   const setNewCurPath = (path: string[]): void => {
@@ -176,11 +165,12 @@ export const ProfileView = ({
     if (view == null) {
       return;
     }
-    if (navigateTo === undefined) return;
-
     setCurrentView(view);
-    const router = parseParams(window.location.search);
 
+    if (navigateTo === undefined) {
+      return;
+    }
+    const router = parseParams(window.location.search);
     navigateTo('/', {...router, ...{currentProfileView: view}});
   };
 
@@ -199,7 +189,13 @@ export const ProfileView = ({
                     />
                   ) : null}
 
-                  <Button color="neutral" onClick={void downloadPProf}>
+                  <Button
+                    color="neutral"
+                    onClick={e => {
+                      e.preventDefault();
+                      onDownloadPProf();
+                    }}
+                  >
                     Download pprof
                   </Button>
                 </div>

package/src/ProfileViewWithData.tsx

@@ -16,6 +16,8 @@ import {QueryServiceClient, QueryRequest_ReportType} from '@parca/client';
 import {useQuery} from './useQuery';
 import {ProfileView, useProfileVisState} from './ProfileView';
 import {ProfileSource} from './ProfileSource';
+import {downloadPprof} from './utils';
+import {useGrpcMetadata} from '@parca/components';
 
 type NavigateFunction = (path: string, queryParams: any) => void;
 
@@ -32,6 +34,7 @@ export const ProfileViewWithData = ({
   navigateTo,
 }: ProfileViewWithDataProps): JSX.Element => {
   const profileVisState = useProfileVisState();
+  const metadata = useGrpcMetadata();
   const {currentView} = profileVisState;
   const {
     isLoading: flamegraphLoading,
@@ -59,6 +62,22 @@ export const ProfileViewWithData = ({
 
   const sampleUnit = profileSource.ProfileType().sampleUnit;
 
+  const downloadPProfClick = async (): Promise<void> => {
+    if (profileSource == null || queryClient == null) {
+      return;
+    }
+
+    try {
+      const blob = await downloadPprof(profileSource.QueryRequest(), queryClient, metadata);
+      const link = document.createElement('a');
+      link.href = window.URL.createObjectURL(blob);
+      link.download = 'profile.pb.gz';
+      link.click();
+    } catch (error) {
+      console.error('Error while querying', error);
+    }
+  };
+
   return (
     <ProfileView
       flamegraphData={{
@@ -88,6 +107,7 @@ export const ProfileViewWithData = ({
       profileSource={profileSource}
       queryClient={queryClient}
       navigateTo={navigateTo}
+      onDownloadPProf={() => void downloadPProfClick()}
     />
   );
 };