@parca/profile 0.12.8 → 0.12.14

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.12.14](https://github.com/parca-dev/parca/compare/ui-v0.12.13...ui-v0.12.14) (2022-04-06)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.12.13](https://github.com/parca-dev/parca/compare/ui-v0.12.12...ui-v0.12.13) (2022-04-05)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.12.12](https://github.com/parca-dev/parca/compare/ui-v0.12.11...ui-v0.12.12) (2022-04-05)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.12.8](https://github.com/parca-dev/parca/compare/ui-v0.12.7...ui-v0.12.8) (2022-03-30)
 
 **Note:** Version bump only for package @parca/profile

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@parca/profile",
-  "version": "0.12.8",
+  "version": "0.12.14",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.12.6",
+    "@parca/client": "^0.12.12",
     "@parca/dynamicsize": "^0.12.0",
     "@parca/parser": "^0.12.3",
     "d3-scale": "^4.0.2"
@@ -19,5 +19,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "14acb288189bdc77077d992aa6c4e3736e6d07fa"
+  "gitHead": "97cf7186818dc4aaba311e4c2347353bca08fca4"
 }

package/src/ProfileView.tsx

@@ -17,6 +17,7 @@ interface ProfileViewProps {
   queryClient: QueryServiceClient;
   profileSource: ProfileSource;
   navigateTo?: NavigateFunction;
+  compare?: boolean;
 }
 
 export interface IQueryResult {
@@ -235,7 +236,7 @@ export const ProfileView = ({
               </div>
             </div>
 
-            <div className="flex space-x-4">
+            <div className="flex space-x-4 justify-between">
               {currentView === 'icicle' && (
                 <div className="w-full">
                   <CalcWidth throttle={300} delay={2000}>

package/src/TopTable.tsx

@@ -9,6 +9,7 @@ import {
 import * as parca_query_v1alpha1_query_pb from '@parca/client/src/parca/query/v1alpha1/query_pb';
 import {getLastItem, valueFormatter} from '@parca/functions';
 import {useGrpcMetadata} from '@parca/components';
+import {useAppSelector, selectCompareMode} from '@parca/store';
 
 import {ProfileSource} from './ProfileSource';
 import './TopTable.styles.css';
@@ -138,6 +139,8 @@ export const TopTable = ({queryClient, profileSource}: ProfileViewProps): JSX.El
   const {response, error} = useQuery(queryClient, profileSource);
   const {items, requestSort, sortConfig} = useSortableData(response);
 
+  const compareMode = useAppSelector(selectCompareMode);
+
   const unit = response?.toObject().top?.unit as string;
 
   if (error != null) {
@@ -154,10 +157,18 @@ export const TopTable = ({queryClient, profileSource}: ProfileViewProps): JSX.El
     return sortConfig.key === name ? sortConfig.direction : undefined;
   };
 
+  const addPlusSign = (num: string) => {
+    if (num.charAt(0) === '0' || num.charAt(0) === '-') {
+      return num;
+    }
+
+    return `+${num}`;
+  };
+
   return (
     <>
       <div className="w-full">
-        <table className="iciclegraph-table table-auto text-left w-full divide-y divide-gray-200 dark:divide-gray-700">
+        <table className="iciclegraph-table table-fixed text-left w-full divide-y divide-gray-200 dark:divide-gray-700">
           <thead className="bg-gray-50 dark:bg-gray-800">
             <tr>
               <th
@@ -170,7 +181,7 @@ export const TopTable = ({queryClient, profileSource}: ProfileViewProps): JSX.El
                 </span>
               </th>
               <th
-                className="text-left text-sm cursor-pointer pt-2 pb-2"
+                className="text-right text-sm cursor-pointer pt-2 pb-2 w-[150px]"
                 onClick={() => requestSort('flat')}
               >
                 Flat
@@ -179,7 +190,7 @@ export const TopTable = ({queryClient, profileSource}: ProfileViewProps): JSX.El
                 </span>
               </th>
               <th
-                className="text-right text-sm cursor-pointer pt-2 pb-2 pr-2"
+                className="text-right text-sm cursor-pointer pt-2 pb-2 pr-2 w-[150px]"
                 onClick={() => requestSort('cumulative')}
               >
                 Cumulative
@@ -189,20 +200,34 @@ export const TopTable = ({queryClient, profileSource}: ProfileViewProps): JSX.El
                   <Arrow direction={getClassNamesFor('cumulative')} />
                 </span>
               </th>
+              {compareMode && (
+                <th
+                  className="text-right text-sm cursor-pointer pt-2 pb-2 pr-2 w-[150px]"
+                  onClick={() => requestSort('diff')}
+                >
+                  Diff
+                  <span className={`inline-block align-middle ml-2 ${getClassNamesFor('diff')}`}>
+                    <Arrow direction={getClassNamesFor('diff')} />
+                  </span>
+                </th>
+              )}
             </tr>
           </thead>
           <tbody className="bg-white divide-y divide-gray-200 dark:bg-gray-900 dark:divide-gray-700">
             {items?.map((report, index) => (
               <tr key={index} className="hover:bg-[#62626212] dark:hover:bg-[#ffffff12]">
-                <td className="text-xs py-1.5 pl-2 min-w-[150px] max-w-[450px]">
-                  {RowLabel(report.meta)}
-                </td>
-                <td className="text-xs min-w-[150px] max-w-[150px] py-1.5text-right">
+                <td className="text-xs py-1.5 pl-2">{RowLabel(report.meta)}</td>
+                <td className="text-xs py-1.5 text-right">
                   {valueFormatter(report.flat, unit, 2)}
                 </td>
-                <td className="text-xs min-w-[150px] max-w-[150px] py-1.5 text-right pr-2">
+                <td className="text-xs py-1.5 text-right pr-2">
                   {valueFormatter(report.cumulative, unit, 2)}
                 </td>
+                {compareMode && (
+                  <td className="text-xs py-1.5 text-right pr-2">
+                    {addPlusSign(valueFormatter(report.diff, unit, 2))}
+                  </td>
+                )}
               </tr>
             ))}
           </tbody>