@parca/profile 0.16.205 → 0.16.207

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.207](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.206...@parca/profile@0.16.207) (2023-07-12)
+
+**Note:** Version bump only for package @parca/profile
+
+## 0.16.206 (2023-07-12)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.205](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.204...@parca/profile@0.16.205) (2023-07-10)
 
 **Note:** Version bump only for package @parca/profile

package/dist/MetricsGraph/useMetricsGraphDimensions.js

@@ -11,14 +11,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useWindowSize } from 'react-use';
+import { useParcaContext } from '@parca/components';
 const maxHeight = 402;
 const margin = 50;
-const heightStyle = `min(${maxHeight + margin}px, 47vw - 24px)`;
 export const useMetricsGraphDimensions = () => {
     let { width } = useWindowSize();
-    width = width - 58;
+    const { profileExplorer } = useParcaContext();
+    width = width - profileExplorer.PaddingX;
     const height = Math.min(width / 2.5, maxHeight);
     const marginRight = 20;
+    const heightStyle = `min(${maxHeight + margin}px, ${profileExplorer.metricsGraph.maxHeightStyle})`;
     return {
         width,
         height,

package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.js

@@ -69,7 +69,17 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, map
                 // TODO: Support fallthrough to comparing addresses or something
                 const afn = functionNameColumn?.get(a);
                 const bfn = functionNameColumn?.get(b);
-                return afn.localeCompare(bfn);
+                if (afn !== null && bfn !== null) {
+                    return afn.localeCompare(bfn);
+                }
+                if (afn === null && bfn !== null) {
+                    return -1;
+                }
+                if (afn !== null && bfn === null) {
+                    return 1;
+                }
+                // both are null
+                return 0;
             });
             break;
         case FIELD_CUMULATIVE:
@@ -87,10 +97,10 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, map
                     return Number(bDiff - aDiff);
                 }
                 if (aDiff === null && bDiff !== null) {
-                    return 1;
+                    return -1;
                 }
                 if (aDiff !== null && bDiff === null) {
-                    return -1;
+                    return 1;
                 }
                 // both are null
                 return 0;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.205",
+  "version": "0.16.207",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.79",
-    "@parca/components": "^0.16.165",
+    "@parca/components": "^0.16.166",
     "@parca/dynamicsize": "^0.16.54",
     "@parca/hooks": "^0.0.14",
     "@parca/parser": "^0.16.55",
@@ -47,5 +47,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "adbbf003396177b295f5c5ad4c2fe228ee9ed3ae"
+  "gitHead": "ea0e797162e7c016e3fed2ae6899958585b037b8"
 }

package/src/MetricsGraph/useMetricsGraphDimensions.ts

@@ -13,6 +13,8 @@
 
 import {useWindowSize} from 'react-use';
 
+import {useParcaContext} from '@parca/components';
+
 interface MetricsGraphDimensions {
   width: number;
   height: number;
@@ -24,14 +26,16 @@ interface MetricsGraphDimensions {
 const maxHeight = 402;
 const margin = 50;
 
-const heightStyle = `min(${maxHeight + margin}px, 47vw - 24px)`;
-
 export const useMetricsGraphDimensions = (): MetricsGraphDimensions => {
   let {width} = useWindowSize();
-  width = width - 58;
+  const {profileExplorer} = useParcaContext();
+  width = width - profileExplorer.PaddingX;
 
   const height = Math.min(width / 2.5, maxHeight);
   const marginRight = 20;
+  const heightStyle = `min(${maxHeight + margin}px, ${
+    profileExplorer.metricsGraph.maxHeightStyle
+  })`;
   return {
     width,
     height,

package/src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx

@@ -190,9 +190,19 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
     case FIELD_FUNCTION_NAME:
       childRows.sort((a, b) => {
         // TODO: Support fallthrough to comparing addresses or something
-        const afn: string = functionNameColumn?.get(a);
-        const bfn: string = functionNameColumn?.get(b);
-        return afn.localeCompare(bfn);
+        const afn: string | null = functionNameColumn?.get(a);
+        const bfn: string | null = functionNameColumn?.get(b);
+        if (afn !== null && bfn !== null) {
+          return afn.localeCompare(bfn);
+        }
+        if (afn === null && bfn !== null) {
+          return -1;
+        }
+        if (afn !== null && bfn === null) {
+          return 1;
+        }
+        // both are null
+        return 0;
       });
       break;
     case FIELD_CUMULATIVE:
@@ -210,10 +220,10 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
           return Number(bDiff - aDiff);
         }
         if (aDiff === null && bDiff !== null) {
-          return 1;
+          return -1;
         }
         if (aDiff !== null && bDiff === null) {
-          return -1;
+          return 1;
         }
         // both are null
         return 0;