@parca/profile 0.15.9 → 0.15.18

package/CHANGELOG.md

@@ -3,7 +3,11 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.15.9](https://github.com/parca-dev/parca/compare/ui-v0.15.8...ui-v0.15.9) (2022-08-30)
+## [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
 
@@ -11,129 +15,104 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [0.15.3](https://github.com/parca-dev/parca/compare/ui-v0.15.2...ui-v0.15.3) (2022-08-25)
+## [0.15.17](https://github.com/parca-dev/parca/compare/ui-v0.15.16...ui-v0.15.17) (2022-09-07)
 
 
 
-## 0.15.1 (2022-08-25)
+## [0.15.11](https://github.com/parca-dev/parca/compare/ui-v0.15.10...ui-v0.15.11) (2022-09-01)
 
-**Note:** Version bump only for package @parca/profile
 
 
+## [0.15.10](https://github.com/parca-dev/parca/compare/ui-v0.15.2...ui-v0.15.10) (2022-08-30)
 
 
 
 ## [0.15.2](https://github.com/parca-dev/parca/compare/ui-v0.15.1...ui-v0.15.2) (2022-08-25)
 
-**Note:** Version bump only for package @parca/profile
 
 
+## 0.15.1 (2022-08-25)
 
+**Note:** Version bump only for package @parca/profile
 
 
-# [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.15.11](https://github.com/parca-dev/parca/compare/ui-v0.15.10...ui-v0.15.11) (2022-09-01)
+
+**Note:** Version bump only for package @parca/profile
 
+## [0.15.9](https://github.com/parca-dev/parca/compare/ui-v0.15.8...ui-v0.15.9) (2022-08-30)
 
+**Note:** Version bump only for package @parca/profile
 
-## [0.14.30](https://github.com/parca-dev/parca/compare/ui-v0.14.24...ui-v0.14.30) (2022-08-17)
+## [0.15.3](https://github.com/parca-dev/parca/compare/ui-v0.15.2...ui-v0.15.3) (2022-08-25)
 
+## 0.15.1 (2022-08-25)
 
-### Features
+**Note:** Version bump only for package @parca/profile
 
-* 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.15.2](https://github.com/parca-dev/parca/compare/ui-v0.15.1...ui-v0.15.2) (2022-08-25)
 
+**Note:** Version bump only for package @parca/profile
 
+# [0.15.0](https://github.com/parca-dev/parca/compare/ui-v0.14.37...ui-v0.15.0) (2022-08-24)
 
-## [0.14.16](https://github.com/parca-dev/parca/compare/ui-v0.14.11...ui-v0.14.16) (2022-08-03)
+## [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
 
-## [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)
+- 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))
-
-
+- 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))
-
-
+- **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)
 
-
 ### Bug Fixes
 
-* **ui:** address all problems reported by ESLint ([7f9c921](https://github.com/parca-dev/parca/commit/7f9c9217af49f2661a4363b9b17a9a06f1c7539b))
-
-
-
-
+- **ui:** address all problems reported by ESLint ([7f9c921](https://github.com/parca-dev/parca/commit/7f9c9217af49f2661a4363b9b17a9a06f1c7539b))
 
 ## [0.14.30](https://github.com/parca-dev/parca/compare/ui-v0.14.29...ui-v0.14.30) (2022-08-17)
 
-
 ### Bug Fixes
 
-* **ui:** run eslint --fix ([#1542](https://github.com/parca-dev/parca/issues/1542)) ([e522131](https://github.com/parca-dev/parca/commit/e5221318fc1140d661c45d2d04b096bfebba4af4))
-
-
-
-
+- **ui:** run eslint --fix ([#1542](https://github.com/parca-dev/parca/issues/1542)) ([e522131](https://github.com/parca-dev/parca/commit/e5221318fc1140d661c45d2d04b096bfebba4af4))
 
 ## [0.14.29](https://github.com/parca-dev/parca/compare/ui-v0.14.28...ui-v0.14.29) (2022-08-15)
 
-
-
 ## 0.14.21 (2022-08-10)
 
 **Note:** Version bump only for package @parca/profile
 
-
-
-
-
 ## [0.14.16](https://github.com/parca-dev/parca/compare/ui-v0.14.15...ui-v0.14.16) (2022-08-03)
 
 **Note:** Version bump only for package @parca/profile

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@parca/profile",
-  "version": "0.15.9",
+  "version": "0.15.18",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@iconify/react": "^3.2.2",
-    "@parca/client": "^0.15.9",
-    "@parca/dynamicsize": "^0.15.0",
-    "@parca/functions": "^0.15.3",
-    "@parca/parser": "^0.15.0",
+    "@parca/client": "^0.15.11",
+    "@parca/dynamicsize": "^0.15.17",
+    "@parca/functions": "^0.15.17",
+    "@parca/parser": "^0.15.17",
     "d3-scale": "^4.0.2",
     "d3-selection": "3.0.0",
     "react-copy-to-clipboard": "^5.1.0"
@@ -23,5 +23,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "a894b2e6cdf0fdf47f345af0553b6801479af6ee"
+  "gitHead": "6af20931851774b1548661a5a47ccfd71b1a2c61"
 }

package/src/ProfileView.tsx

@@ -11,7 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-/* eslint-disable */
 import React, {useEffect, useMemo, useState} from 'react';
 
 import {parseParams} from '@parca/functions';
@@ -21,7 +20,6 @@ import {
   Button,
   Card,
   SearchNodes,
-  useGrpcMetadata,
   useParcaTheme,
   Callgraph as CallgraphComponent,
 } from '@parca/components';
@@ -32,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';
 
@@ -56,7 +53,7 @@ interface CallgraphData {
   error?: any;
 }
 
-type VisualizationType = 'icicle' | 'table' | 'callgraph' | 'both';
+export type VisualizationType = 'icicle' | 'table' | 'callgraph' | 'both';
 
 interface ProfileVisState {
   currentView: VisualizationType;
@@ -73,6 +70,7 @@ interface ProfileViewProps {
   queryClient?: QueryServiceClient;
   navigateTo?: NavigateFunction;
   compare?: boolean;
+  onDownloadPProf: () => void;
 }
 
 function arrayEquals<T>(a: T[], b: T[]): boolean {
@@ -84,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};
 };
@@ -102,6 +107,7 @@ export const ProfileView = ({
   queryClient,
   navigateTo,
   profileVisState,
+  onDownloadPProf,
 }: ProfileViewProps): JSX.Element => {
   const {ref, dimensions} = useContainerDimensions();
   const [curPath, setCurPath] = useState<string[]>([]);
@@ -109,7 +115,6 @@ export const ProfileView = ({
 
   const [callgraphEnabled] = useUIFeatureFlag('callgraph');
 
-  const metadata = useGrpcMetadata();
   const {loader} = useParcaTheme();
 
   useEffect(() => {
@@ -122,7 +127,7 @@ export const ProfileView = ({
       return Boolean(flamegraphData?.loading);
     }
     if (currentView === 'callgraph') {
-      return !!callgraphData?.loading;
+      return Boolean(callgraphData?.loading);
     }
     if (currentView === 'table') {
       return Boolean(topTableData?.loading);
@@ -148,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 => {
@@ -177,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}});
   };
 
@@ -200,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>
@@ -272,7 +267,7 @@ export const ProfileView = ({
 
               {currentView === 'callgraph' && callgraphData?.data != null && (
                 <div className="w-full">
-                  {dimensions?.width && (
+                  {dimensions?.width !== undefined && (
                     <CallgraphComponent
                       graph={callgraphData.data}
                       sampleUnit={sampleUnit}

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()}
     />
   );
 };