@parca/profile 0.15.17 → 0.15.24

package/CHANGELOG.md

@@ -3,6 +3,57 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.15.24](https://github.com/parca-dev/parca/compare/ui-v0.15.23...ui-v0.15.24) (2022-09-13)
+
+
+
+## [0.15.19](https://github.com/parca-dev/parca/compare/ui-v0.15.17...ui-v0.15.19) (2022-09-08)
+
+
+
+## [0.15.17](https://github.com/parca-dev/parca/compare/ui-v0.15.10...ui-v0.15.17) (2022-09-07)
+
+
+### Bug Fixes
+
+* **ui:** type all the things (string mode) ([e91ac9d](https://github.com/parca-dev/parca/commit/e91ac9deb8a200ed3c9a9c5d81ae71e13d49466e))
+
+
+
+## 0.15.10 (2022-08-30)
+
+
+
+
+
+## [0.15.19](https://github.com/parca-dev/parca/compare/ui-v0.15.18...ui-v0.15.19) (2022-09-08)
+
+
+
+## [0.15.17](https://github.com/parca-dev/parca/compare/ui-v0.15.10...ui-v0.15.17) (2022-09-07)
+
+
+
+## [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.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,17 +1,20 @@
 {
   "name": "@parca/profile",
-  "version": "0.15.17",
+  "version": "0.15.24",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@iconify/react": "^3.2.2",
     "@parca/client": "^0.15.11",
     "@parca/dynamicsize": "^0.15.17",
-    "@parca/functions": "^0.15.17",
-    "@parca/parser": "^0.15.17",
+    "@parca/functions": "^0.15.24",
+    "@parca/parser": "^0.15.24",
     "d3-scale": "^4.0.2",
     "d3-selection": "3.0.0",
     "react-copy-to-clipboard": "^5.1.0"
   },
+  "devDependencies": {
+    "@types/react-copy-to-clipboard": "5.0.4"
+  },
   "main": "src/index.tsx",
   "scripts": {
     "test": "jest --coverage --config ../../../jest.config.js ./src/*"
@@ -23,5 +26,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "df4bacb55c1503822de9d3312ebe8b90ff17d55b"
+  "gitHead": "3cc65f6eecfb39e80acd6ec0888834c67a4f89d1"
 }

package/src/IcicleGraph.tsx

@@ -22,6 +22,7 @@ import {getLastItem, diffColor, isSearchMatch} from '@parca/functions';
 import {useAppSelector, selectDarkMode, selectSearchNodeString} from '@parca/store';
 
 import {hexifyAddress} from './utils';
+import {HoveringNode} from '@parca/components/src/GraphTooltip';
 
 interface IcicleGraphProps {
   graph: Flamegraph;
@@ -260,7 +261,7 @@ export function IcicleGraphRootNode({
   const onClick = (): void => setCurPath([]);
   const onMouseEnter = (): void => setHoveringNode(node);
   const onMouseLeave = (): void => setHoveringNode(undefined);
-  const path = [];
+  const path: string[] = [];
 
   return (
     <g transform={'translate(0, 0)'}>
@@ -336,7 +337,7 @@ export default function IcicleGraph({
         total={total}
         x={pos[0]}
         y={pos[1]}
-        hoveringNode={hoveringNode}
+        hoveringNode={hoveringNode as HoveringNode}
         contextElement={svg.current}
       />
       <svg

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

package/src/TopTable.tsx

@@ -15,7 +15,7 @@ import React from 'react';
 
 import {getLastItem, valueFormatter, isSearchMatch} from '@parca/functions';
 import {useAppSelector, selectCompareMode, selectSearchNodeString} from '@parca/store';
-import {TopNodeMeta, Top} from '@parca/client';
+import {TopNode, TopNodeMeta, Top} from '@parca/client';
 
 import {hexifyAddress} from './utils';
 
@@ -43,7 +43,10 @@ const Arrow = ({direction}: {direction: string | undefined}): JSX.Element => {
 
 const useSortableData = (
   top?: Top,
-  config = {key: 'cumulative', direction: 'desc'}
+  config: {key: keyof TopNode | 'name'; direction: 'asc' | 'desc'} = {
+    key: 'cumulative',
+    direction: 'desc',
+  }
 ): {
   items:
     | Array<{
@@ -54,17 +57,20 @@ const useSortableData = (
         meta?: TopNodeMeta | undefined;
       }>
     | undefined;
-  requestSort: (key: string) => void;
-  sortConfig: {key: string; direction: string} | null;
+  requestSort: (key: keyof TopNode | 'name') => void;
+  sortConfig: {key: keyof TopNode | 'name'; direction: string} | null;
 } => {
-  const [sortConfig, setSortConfig] = React.useState<{key: string; direction: string} | null>(
-    config
-  );
+  const [sortConfig, setSortConfig] = React.useState<{
+    key: keyof TopNode | 'name';
+    direction: string;
+  } | null>(config);
 
   const rawTableReport = top != null ? top.list : [];
 
   const items = rawTableReport.map(node => ({
     ...node,
+    // Warning: string to number can overflow
+    // https://github.com/timostamm/protobuf-ts/blob/master/MANUAL.md#bigint-support
     diff: Number(node.diff),
     cumulative: Number(node.cumulative),
     flat: Number(node.flat),
@@ -77,10 +83,21 @@ const useSortableData = (
     const sortableItems = [...items];
     if (sortConfig !== null) {
       sortableItems.sort((a, b) => {
-        if (a[sortConfig.key] < b[sortConfig.key]) {
+        const itemA = a[sortConfig.key];
+        const itemB = b[sortConfig.key];
+        if (itemA === undefined && itemB === undefined) {
+          return 0;
+        }
+        if (itemA === undefined) {
+          return sortConfig.direction === 'asc' ? -1 : 1;
+        }
+        if (itemB === undefined) {
+          return sortConfig.direction === 'asc' ? 1 : -1;
+        }
+        if (itemA < itemB) {
           return sortConfig.direction === 'asc' ? -1 : 1;
         }
-        if (a[sortConfig.key] > b[sortConfig.key]) {
+        if (itemA > itemB) {
           return sortConfig.direction === 'asc' ? 1 : -1;
         }
         return 0;
@@ -89,7 +106,7 @@ const useSortableData = (
     return sortableItems;
   }, [items, sortConfig]);
 
-  const requestSort = (key: string): void => {
+  const requestSort = (key: keyof TopNode | 'name'): void => {
     let direction = 'desc';
     if (sortConfig != null && sortConfig.key === key && sortConfig.direction === 'desc') {
       direction = 'asc';

package/src/components/ProfileShareButton/index.tsx

@@ -54,9 +54,13 @@ const ProfileShareModal = ({
       setLoading(false);
       setIsShared(true);
     } catch (err) {
-      console.error(err);
-      setLoading(false);
-      setError(err.toString());
+      if (err instanceof Error) {
+        console.error(err);
+        setLoading(false);
+        // https://github.com/microsoft/TypeScript/issues/38347
+        // eslint-disable-next-line @typescript-eslint/no-base-to-string
+        setError(err.toString());
+      }
     }
   };