@parca/profile 0.14.16 → 0.14.31

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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))
+
+
+
+
+
+## [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))
+
+
+
+
+
+## [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,12 +1,12 @@
 {
   "name": "@parca/profile",
-  "version": "0.14.16",
+  "version": "0.14.31",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@iconify/react": "^3.2.2",
     "@parca/client": "^0.14.16",
-    "@parca/dynamicsize": "^0.14.1",
-    "@parca/parser": "^0.14.1",
+    "@parca/dynamicsize": "^0.14.29",
+    "@parca/parser": "^0.14.29",
     "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": "816e4bb48c5f327c264d4a7219fbe7047ac06cf0"
+  "gitHead": "ad5f13b18fb7c5dd70df3dc6b40477e44f839381"
 }

package/src/IcicleGraph.tsx

@@ -1,3 +1,16 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
 import React, {MouseEvent, useEffect, useRef, useState} from 'react';
 
 import {throttle} from 'lodash';
@@ -98,7 +111,11 @@ function IcicleRect({
         height={height - 1}
         style={{
           opacity:
-            Boolean(currentSearchString) && !isSearchMatch(currentSearchString, name) ? 0.5 : 1,
+            currentSearchString !== undefined &&
+            currentSearchString !== '' &&
+            !isSearchMatch(currentSearchString, name)
+              ? 0.5
+              : 1,
           fill: color,
         }}
       />
@@ -117,7 +134,7 @@ export function nodeLabel(node: FlamegraphNode): string {
   if (node.meta === undefined) return '<unknown>';
   const mapping = `${
     node.meta?.mapping?.file !== undefined && node.meta?.mapping?.file !== ''
-      ? '[' + getLastItem(node.meta.mapping.file) + '] '
+      ? '[' + (getLastItem(node.meta.mapping.file) ?? '') + '] '
       : ''
   }`;
   if (node.meta.function?.name !== undefined && node.meta.function?.name !== '')

package/src/ProfileIcicleGraph.tsx

@@ -1,3 +1,16 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
 import {Flamegraph} from '@parca/client';
 import {useAppSelector, selectCompareMode} from '@parca/store';
 import {useContainerDimensions} from '@parca/dynamicsize';

package/src/ProfileSource.tsx

@@ -1,3 +1,16 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
 import React from 'react';
 import {formatDate} from '@parca/functions';
 import {Query, ProfileType} from '@parca/parser';

package/src/ProfileView.tsx

@@ -1,3 +1,16 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
 import React, {useEffect, useMemo, useState} from 'react';
 
 import {parseParams} from '@parca/functions';
@@ -57,7 +70,7 @@ 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'
+    (currentViewFromURL as VisualizationType) ?? 'icicle'
   );
 
   return {currentView, setCurrentView};
@@ -85,13 +98,13 @@ export const ProfileView = ({
 
   const isLoading = useMemo(() => {
     if (currentView === 'icicle') {
-      return !!flamegraphData?.loading;
+      return Boolean(flamegraphData?.loading);
     }
     if (currentView === 'table') {
-      return !!topTableData?.loading;
+      return Boolean(topTableData?.loading);
     }
     if (currentView === 'both') {
-      return !!flamegraphData?.loading || !!topTableData?.loading;
+      return Boolean(flamegraphData?.loading) || Boolean(topTableData?.loading);
     }
     return false;
   }, [currentView, flamegraphData?.loading, topTableData?.loading]);
@@ -113,7 +126,7 @@ export const ProfileView = ({
 
   const downloadPProf = async (e: React.MouseEvent<HTMLElement>) => {
     e.preventDefault();
-    if (!profileSource || !queryClient) {
+    if (profileSource == null || queryClient == null) {
       return;
     }
 
@@ -156,14 +169,14 @@ 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">
-                  {profileSource && queryClient ? (
+                  {profileSource != null && queryClient != null ? (
                     <ProfileShareButton
                       queryRequest={profileSource.QueryRequest()}
                       queryClient={queryClient}
                     />
                   ) : null}
 
-                  <Button color="neutral" onClick={downloadPProf}>
+                  <Button color="neutral" onClick={void downloadPProf}>
                     Download pprof
                   </Button>
                 </div>

package/src/ProfileViewWithData.tsx

@@ -1,3 +1,16 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
 import {QueryServiceClient, QueryRequest_ReportType} from '@parca/client';
 
 import {useQuery} from './useQuery';
@@ -25,7 +38,7 @@ export const ProfileViewWithData = ({
     response: flamegraphResponse,
     error: flamegraphError,
   } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_UNSPECIFIED, {
-    skip: currentView != 'icicle' && currentView != 'both',
+    skip: currentView !== 'icicle' && currentView !== 'both',
   });
 
   const {
@@ -33,7 +46,7 @@ export const ProfileViewWithData = ({
     response: topTableResponse,
     error: topTableError,
   } = useQuery(queryClient, profileSource, QueryRequest_ReportType.TOP, {
-    skip: currentView != 'table' && currentView != 'both',
+    skip: currentView !== 'table' && currentView !== 'both',
   });
 
   const sampleUnit = profileSource.ProfileType().sampleUnit;

package/src/TopTable.tsx

@@ -1,3 +1,16 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
 import React from 'react';
 
 import {getLastItem, valueFormatter, isSearchMatch} from '@parca/functions';
@@ -33,7 +46,7 @@ const useSortableData = (top?: Top, config = {key: 'cumulative', direction: 'des
     config
   );
 
-  const rawTableReport = top ? top.list : [];
+  const rawTableReport = top != null ? top.list : [];
 
   const items = rawTableReport.map(node => ({
     ...node,
@@ -44,9 +57,9 @@ const useSortableData = (top?: Top, config = {key: 'cumulative', direction: 'des
   }));
 
   const sortedItems = React.useMemo(() => {
-    if (!items) return;
+    if (items.length === 0) return;
 
-    let sortableItems = [...items];
+    const sortableItems = [...items];
     if (sortConfig !== null) {
       sortableItems.sort((a, b) => {
         if (a[sortConfig.key] < b[sortConfig.key]) {
@@ -61,9 +74,9 @@ const useSortableData = (top?: Top, config = {key: 'cumulative', direction: 'des
     return sortableItems;
   }, [items, sortConfig]);
 
-  const requestSort = key => {
+  const requestSort = (key: string) => {
     let direction = 'desc';
-    if (sortConfig && sortConfig.key === key && sortConfig.direction === 'desc') {
+    if (sortConfig != null && sortConfig.key === key && sortConfig.direction === 'desc') {
       direction = 'asc';
     }
     setSortConfig({key, direction});
@@ -76,14 +89,14 @@ export const RowLabel = (meta: TopNodeMeta | undefined): string => {
   if (meta === undefined) return '<unknown>';
   const mapping = `${
     meta?.mapping?.file !== undefined && meta?.mapping?.file !== ''
-      ? `[${getLastItem(meta.mapping.file)}]`
+      ? `[${getLastItem(meta.mapping.file) ?? ''}]`
       : ''
   }`;
   if (meta.function?.name !== undefined && meta.function?.name !== '')
     return `${mapping} ${meta.function.name}`;
 
   const address = hexifyAddress(meta.location?.address);
-  const fallback = `${mapping} ${address as string}`;
+  const fallback = `${mapping} ${address}`;
 
   return fallback === '' ? '<unknown>' : fallback;
 };
@@ -96,11 +109,11 @@ export const TopTable = ({data: top, sampleUnit}: TopTableProps): JSX.Element =>
 
   const unit = sampleUnit;
 
-  const total = top ? top.list.length : 0;
+  const total = top != null ? top.list.length : 0;
   if (total === 0) return <>Profile has no samples</>;
 
-  const getClassNamesFor = name => {
-    if (!sortConfig) {
+  const getClassNamesFor = (name: string) => {
+    if (sortConfig == null) {
       return;
     }
     return sortConfig.key === name ? sortConfig.direction : undefined;
@@ -125,7 +138,9 @@ export const TopTable = ({data: top, sampleUnit}: TopTableProps): JSX.Element =>
                 onClick={() => requestSort('name')}
               >
                 Name
-                <span className={`inline-block align-middle ml-2 ${getClassNamesFor('name')}`}>
+                <span
+                  className={`inline-block align-middle ml-2 ${getClassNamesFor('name') ?? ''}`}
+                >
                   <Arrow direction={getClassNamesFor('name')} />
                 </span>
               </th>
@@ -134,7 +149,9 @@ export const TopTable = ({data: top, sampleUnit}: TopTableProps): JSX.Element =>
                 onClick={() => requestSort('flat')}
               >
                 Flat
-                <span className={`inline-block align-middle ml-2 ${getClassNamesFor('flat')}`}>
+                <span
+                  className={`inline-block align-middle ml-2 ${getClassNamesFor('flat') ?? ''}`}
+                >
                   <Arrow direction={getClassNamesFor('flat')} />
                 </span>
               </th>
@@ -144,7 +161,9 @@ export const TopTable = ({data: top, sampleUnit}: TopTableProps): JSX.Element =>
               >
                 Cumulative
                 <span
-                  className={`inline-block align-middle ml-2 ${getClassNamesFor('cumulative')}`}
+                  className={`inline-block align-middle ml-2 ${
+                    getClassNamesFor('cumulative') ?? ''
+                  }`}
                 >
                   <Arrow direction={getClassNamesFor('cumulative')} />
                 </span>
@@ -155,7 +174,9 @@ export const TopTable = ({data: top, sampleUnit}: TopTableProps): JSX.Element =>
                   onClick={() => requestSort('diff')}
                 >
                   Diff
-                  <span className={`inline-block align-middle ml-2 ${getClassNamesFor('diff')}`}>
+                  <span
+                    className={`inline-block align-middle ml-2 ${getClassNamesFor('diff') ?? ''}`}
+                  >
                     <Arrow direction={getClassNamesFor('diff')} />
                   </span>
                 </th>

package/src/__tests__/suffix_params.test.ts

@@ -1,3 +1,16 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
 import {SuffixParams, ParseLabels} from '../ProfileSource';
 
 test('prefixes keys', () => {

package/src/components/DiffLegend.tsx

@@ -1,3 +1,16 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
 import {Fragment, useState} from 'react';
 import {Popover, Transition} from '@headlessui/react';
 import {useAppSelector, selectDarkMode} from '@parca/store';
@@ -44,9 +57,9 @@ const DiffLegendBar = ({
 const DiffLegend = () => {
   const [showLegendTooltip, setShowLegendTooltip] = useState(false);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-  let [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
+  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
 
-  const {styles, attributes, ...popperProps} = usePopper(referenceElement, popperElement, {
+  const {styles, attributes} = usePopper(referenceElement, popperElement, {
     placement: 'auto-start',
     strategy: 'absolute',
   });

package/src/components/ProfileShareButton/ResultBox.tsx

@@ -1,3 +1,16 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
 import {useState} from 'react';
 import cx from 'classnames';
 import {Icon} from '@iconify/react';

package/src/components/ProfileShareButton/index.tsx

@@ -1,3 +1,16 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
 import {useState} from 'react';
 import {Button, Modal, useGrpcMetadata} from '@parca/components';
 import {Icon} from '@iconify/react';
@@ -30,7 +43,7 @@ const ProfileShareModal = ({
   const metadata = useGrpcMetadata();
   const isFormDataValid = () => true;
 
-  const handleSubmit: () => void = async () => {
+  const handleSubmit: () => Promise<void> = async () => {
     try {
       setLoading(true);
       const {response} = await queryClient.shareProfile(
@@ -76,7 +89,7 @@ const ProfileShareModal = ({
               className="w-fit mt-4"
               onClick={e => {
                 e.preventDefault();
-                handleSubmit();
+                void handleSubmit();
               }}
               disabled={loading || !isFormDataValid()}
               type="submit"

package/src/index.tsx

@@ -1,3 +1,16 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
 export * from './IcicleGraph';
 export * from './ProfileIcicleGraph';
 export * from './ProfileSource';

package/src/useDelayedLoader.ts

@@ -1,3 +1,16 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
 import {useEffect, useState} from 'react';
 
 interface DelayedLoaderOptions {
@@ -5,10 +18,10 @@ interface DelayedLoaderOptions {
 }
 
 const useDelayedLoader = (isLoading = false, options?: DelayedLoaderOptions) => {
-  const {delay = 500} = options || {};
+  const {delay = 500} = options ?? {};
   const [isLoaderVisible, setIsLoaderVisible] = useState<boolean>(false);
   useEffect(() => {
-    let showLoaderTimeout;
+    let showLoaderTimeout: ReturnType<typeof setTimeout>;
     if (isLoading && !isLoaderVisible) {
       // if the request takes longer than half a second, show the loading icon
       showLoaderTimeout = setTimeout(() => {
@@ -18,7 +31,7 @@ const useDelayedLoader = (isLoading = false, options?: DelayedLoaderOptions) =>
       setIsLoaderVisible(false);
     }
     return () => clearTimeout(showLoaderTimeout);
-  }, [isLoading]);
+  }, [isLoading, isLoaderVisible, delay]);
 
   return isLoaderVisible;
 };

package/src/useQuery.tsx

@@ -1,3 +1,16 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
 import {useEffect, useState} from 'react';
 
 import {QueryServiceClient, QueryResponse, QueryRequest_ReportType} from '@parca/client';
@@ -22,7 +35,7 @@ export const useQuery = (
   reportType: QueryRequest_ReportType,
   options?: UseQueryOptions
 ): IQueryResult => {
-  const {skip = false} = options || {};
+  const {skip = false} = options ?? {};
   const [result, setResult] = useState<IQueryResult>({
     response: null,
     error: null,
@@ -45,9 +58,9 @@ export const useQuery = (
     const call = client.query(req, {meta: metadata});
 
     call.response
-      .then(response => setResult({response: response, error: null, isLoading: false}))
-      .catch(error => setResult({error: error, response: null, isLoading: false}));
-  }, [client, profileSource, metadata, reportType]);
+      .then(response => setResult({response, error: null, isLoading: false}))
+      .catch(error => setResult({error, response: null, isLoading: false}));
+  }, [skip, client, profileSource, metadata, reportType]);
 
   return result;
 };

package/src/utils.ts

@@ -1,3 +1,16 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
 import {QueryRequest, QueryRequest_ReportType, QueryServiceClient} from '@parca/client';
 import {RpcMetadata} from '@protobuf-ts/runtime-rpc';