@parca/profile 0.14.31 → 0.14.36

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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))
+
+
+
+## 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)
 
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@parca/profile",
-  "version": "0.14.31",
+  "version": "0.14.36",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@iconify/react": "^3.2.2",
     "@parca/client": "^0.14.16",
-    "@parca/dynamicsize": "^0.14.29",
-    "@parca/parser": "^0.14.29",
+    "@parca/dynamicsize": "^0.14.36",
+    "@parca/parser": "^0.14.36",
     "d3-scale": "^4.0.2",
     "d3-selection": "3.0.0",
     "react-copy-to-clipboard": "^5.1.0"
@@ -22,5 +22,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "ad5f13b18fb7c5dd70df3dc6b40477e44f839381"
+  "gitHead": "7d75476b99eafbb9e9d3976c1de6cfb88cbfc8c2"
 }

package/src/IcicleGraph.tsx

@@ -91,7 +91,7 @@ function IcicleRect({
   onMouseLeave,
   onClick,
   curPath,
-}: IcicleRectProps) {
+}: IcicleRectProps): JSX.Element {
   const currentSearchString = useAppSelector(selectSearchNodeString);
   const isFaded = curPath.length > 0 && name !== curPath[curPath.length - 1];
   const styles = isFaded ? fadedIcicleRectStyles : icicleRectStyles;
@@ -158,7 +158,7 @@ export function IcicleGraphNodes({
   path,
   setCurPath,
   curPath,
-}: IcicleGraphNodesProps) {
+}: IcicleGraphNodesProps): JSX.Element {
   const isDarkMode = useAppSelector(selectDarkMode);
 
   const nodes =
@@ -189,7 +189,7 @@ export function IcicleGraphNodes({
 
         const color = diffColor(diff, cumulative, isDarkMode);
 
-        const onClick = () => {
+        const onClick = (): void => {
           setCurPath(nextPath);
         };
 
@@ -199,8 +199,8 @@ export function IcicleGraphNodes({
             ? scaleLinear().domain([0, cumulative]).range([0, totalWidth])
             : xScale;
 
-        const onMouseEnter = () => setHoveringNode(d);
-        const onMouseLeave = () => setHoveringNode(undefined);
+        const onMouseEnter = (): void => setHoveringNode(d);
+        const onMouseLeave = (): void => setHoveringNode(undefined);
 
         return (
           <React.Fragment key={`node-${key}`}>
@@ -250,16 +250,16 @@ export function IcicleGraphRootNode({
   setHoveringNode,
   setCurPath,
   curPath,
-}: IcicleGraphRootNodeProps) {
+}: IcicleGraphRootNodeProps): JSX.Element {
   const isDarkMode = useAppSelector(selectDarkMode);
 
   const cumulative = parseFloat(node.cumulative);
   const diff = parseFloat(node.diff);
   const color = diffColor(diff, cumulative, isDarkMode);
 
-  const onClick = () => setCurPath([]);
-  const onMouseEnter = () => setHoveringNode(node);
-  const onMouseLeave = () => setHoveringNode(undefined);
+  const onClick = (): void => setCurPath([]);
+  const onMouseEnter = (): void => setHoveringNode(node);
+  const onMouseLeave = (): void => setHoveringNode(undefined);
   const path = [];
 
   return (
@@ -301,7 +301,7 @@ export default function IcicleGraph({
   setCurPath,
   curPath,
   sampleUnit,
-}: IcicleGraphProps) {
+}: IcicleGraphProps): JSX.Element {
   const [hoveringNode, setHoveringNode] = useState<
     FlamegraphNode | FlamegraphRootNode | undefined
   >();

package/src/ProfileIcicleGraph.tsx

@@ -31,7 +31,7 @@ const ProfileIcicleGraph = ({
   curPath,
   setNewCurPath,
   sampleUnit,
-}: ProfileIcicleGraphProps) => {
+}: ProfileIcicleGraphProps): JSX.Element => {
   const compareMode = useAppSelector(selectCompareMode);
   const {ref, dimensions} = useContainerDimensions();
 

package/src/ProfileView.tsx

@@ -58,7 +58,7 @@ interface ProfileViewProps {
   compare?: boolean;
 }
 
-function arrayEquals(a, b): boolean {
+function arrayEquals<T>(a: T[], b: T[]): boolean {
   return (
     Array.isArray(a) &&
     Array.isArray(b) &&
@@ -124,7 +124,7 @@ export const ProfileView = ({
     );
   }
 
-  const downloadPProf = async (e: React.MouseEvent<HTMLElement>) => {
+  const downloadPProf = async (e: React.MouseEvent<HTMLElement>): Promise<void> => {
     e.preventDefault();
     if (profileSource == null || queryClient == null) {
       return;
@@ -141,15 +141,15 @@ export const ProfileView = ({
     }
   };
 
-  const resetIcicleGraph = () => setCurPath([]);
+  const resetIcicleGraph = (): void => setCurPath([]);
 
-  const setNewCurPath = (path: string[]) => {
+  const setNewCurPath = (path: string[]): void => {
     if (!arrayEquals(curPath, path)) {
       setCurPath(path);
     }
   };
 
-  const switchProfileView = (view: VisualizationType) => {
+  const switchProfileView = (view: VisualizationType): void => {
     if (view == null) {
       return;
     }

package/src/ProfileViewWithData.tsx

@@ -30,7 +30,7 @@ export const ProfileViewWithData = ({
   queryClient,
   profileSource,
   navigateTo,
-}: ProfileViewWithDataProps) => {
+}: ProfileViewWithDataProps): JSX.Element => {
   const profileVisState = useProfileVisState();
   const {currentView} = profileVisState;
   const {

package/src/TopTable.tsx

@@ -26,7 +26,7 @@ interface TopTableProps {
   sampleUnit: string;
 }
 
-const Arrow = ({direction}: {direction: string | undefined}) => {
+const Arrow = ({direction}: {direction: string | undefined}): JSX.Element => {
   return (
     <svg
       className={`${direction !== undefined ? 'fill-[#161616] dark:fill-[#ffffff]' : ''}`}
@@ -41,7 +41,22 @@ const Arrow = ({direction}: {direction: string | undefined}) => {
   );
 };
 
-const useSortableData = (top?: Top, config = {key: 'cumulative', direction: 'desc'}) => {
+const useSortableData = (
+  top?: Top,
+  config = {key: 'cumulative', direction: 'desc'}
+): {
+  items:
+    | Array<{
+        diff: number;
+        cumulative: number;
+        flat: number;
+        name: string | undefined;
+        meta?: TopNodeMeta | undefined;
+      }>
+    | undefined;
+  requestSort: (key: string) => void;
+  sortConfig: {key: string; direction: string} | null;
+} => {
   const [sortConfig, setSortConfig] = React.useState<{key: string; direction: string} | null>(
     config
   );
@@ -74,7 +89,7 @@ const useSortableData = (top?: Top, config = {key: 'cumulative', direction: 'des
     return sortableItems;
   }, [items, sortConfig]);
 
-  const requestSort = (key: string) => {
+  const requestSort = (key: string): void => {
     let direction = 'desc';
     if (sortConfig != null && sortConfig.key === key && sortConfig.direction === 'desc') {
       direction = 'asc';
@@ -112,14 +127,14 @@ export const TopTable = ({data: top, sampleUnit}: TopTableProps): JSX.Element =>
   const total = top != null ? top.list.length : 0;
   if (total === 0) return <>Profile has no samples</>;
 
-  const getClassNamesFor = (name: string) => {
+  const getClassNamesFor = (name: string): string | undefined => {
     if (sortConfig == null) {
       return;
     }
     return sortConfig.key === name ? sortConfig.direction : undefined;
   };
 
-  const addPlusSign = (num: string) => {
+  const addPlusSign = (num: string): string => {
     if (num.charAt(0) === '0' || num.charAt(0) === '-') {
       return num;
     }

package/src/components/DiffLegend.tsx

@@ -25,7 +25,7 @@ const DiffLegendBar = ({
 }: {
   onMouseEnter: () => void;
   onMouseLeave: () => void;
-}) => {
+}): JSX.Element => {
   const isDarkMode = useAppSelector(selectDarkMode);
 
   return (
@@ -54,7 +54,7 @@ const DiffLegendBar = ({
   );
 };
 
-const DiffLegend = () => {
+const DiffLegend = (): JSX.Element => {
   const [showLegendTooltip, setShowLegendTooltip] = useState(false);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
@@ -64,10 +64,10 @@ const DiffLegend = () => {
     strategy: 'absolute',
   });
 
-  const handleMouseEnter = () => {
+  const handleMouseEnter = (): void => {
     setShowLegendTooltip(true);
   };
-  const handleMouseLeave = () => {
+  const handleMouseLeave = (): void => {
     setShowLegendTooltip(false);
   };
 

package/src/components/ProfileShareButton/ResultBox.tsx

@@ -24,10 +24,10 @@ interface Props {
 
 let timeoutHandle: ReturnType<typeof setTimeout> | null = null;
 
-const ResultBox = ({value, className = ''}: Props) => {
+const ResultBox = ({value, className = ''}: Props): JSX.Element => {
   const [isCopied, setIsCopied] = useState<boolean>(false);
 
-  const onCopy = () => {
+  const onCopy = (): void => {
     setIsCopied(true);
     (window.document?.activeElement as HTMLElement)?.blur();
     if (timeoutHandle != null) {

package/src/components/ProfileShareButton/index.tsx

@@ -34,14 +34,14 @@ const ProfileShareModal = ({
   closeModal,
   queryRequest,
   queryClient,
-}: ProfileShareModalProps) => {
+}: ProfileShareModalProps): JSX.Element => {
   const [isShared, setIsShared] = useState(false);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string>('');
   const [description, setDescription] = useState<string>('');
   const [sharedLink, setSharedLink] = useState<string>('');
   const metadata = useGrpcMetadata();
-  const isFormDataValid = () => true;
+  const isFormDataValid = (): boolean => true;
 
   const handleSubmit: () => Promise<void> = async () => {
     try {
@@ -60,7 +60,7 @@ const ProfileShareModal = ({
     }
   };
 
-  const onClose = () => {
+  const onClose = (): void => {
     setLoading(false);
     setError('');
     setDescription('');
@@ -113,7 +113,7 @@ const ProfileShareModal = ({
   );
 };
 
-const ProfileShareButton = ({queryRequest, queryClient}: Props) => {
+const ProfileShareButton = ({queryRequest, queryClient}: Props): JSX.Element => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   return (

package/src/useDelayedLoader.ts

@@ -17,7 +17,7 @@ interface DelayedLoaderOptions {
   delay?: number;
 }
 
-const useDelayedLoader = (isLoading = false, options?: DelayedLoaderOptions) => {
+const useDelayedLoader = (isLoading = false, options?: DelayedLoaderOptions): boolean => {
   const {delay = 500} = options ?? {};
   const [isLoaderVisible, setIsLoaderVisible] = useState<boolean>(false);
   useEffect(() => {

package/src/utils.ts

@@ -25,7 +25,7 @@ export const downloadPprof = async (
   request: QueryRequest,
   queryClient: QueryServiceClient,
   metadata: RpcMetadata
-) => {
+): Promise<Blob> => {
   const req = {
     ...request,
     reportType: QueryRequest_ReportType.PPROF,