@parca/profile 0.12.36 → 0.13.0

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.13.0](https://github.com/parca-dev/parca/compare/ui-v0.12.38...ui-v0.13.0) (2022-05-30)
+
+### Features
+
+- useContainerDimensions hook for smooth chart resize ([3fe5670](https://github.com/parca-dev/parca/commit/3fe5670cb94e838d83e5cb10d453ee620c2dc3c1))
+
+## [0.12.36](https://github.com/parca-dev/parca/compare/ui-v0.12.35...ui-v0.12.36) (2022-05-06)
+
 ## [0.12.36](https://github.com/parca-dev/parca/compare/ui-v0.12.35...ui-v0.12.36) (2022-05-06)
 
 **Note:** Version bump only for package @parca/profile

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@parca/profile",
-  "version": "0.12.36",
+  "version": "0.13.0",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.12.35",
-    "@parca/dynamicsize": "^0.12.35",
-    "@parca/parser": "^0.12.35",
+    "@parca/client": "^0.13.0",
+    "@parca/dynamicsize": "^0.13.0",
+    "@parca/parser": "^0.13.0",
     "d3-scale": "^4.0.2"
   },
   "main": "src/index.tsx",
@@ -19,5 +19,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "bf00c1edfc430b108a4457cc6943e1e160dca89c"
+  "gitHead": "4d00bb1f08c62bc8c33285f6844a0a4386f31442"
 }

package/src/IcicleGraph.tsx

@@ -521,9 +521,9 @@ export default function IcicleGraph({
       />
       <svg
         className="font-robotoMono"
-        width={width}
-        height={height}
         onMouseMove={onMouseMove}
+        viewBox={`0 0 ${width} ${height}`}
+        preserveAspectRatio="xMinYMid"
         ref={svg}
       >
         <g ref={ref}>

package/src/ProfileIcicleGraph.tsx

@@ -1,5 +1,6 @@
 import {Flamegraph} from '@parca/client';
 import {useAppSelector, selectCompareMode} from '@parca/store';
+import {useContainerDimensions} from '@parca/dynamicsize';
 
 import DiffLegend from './components/DiffLegend';
 import IcicleGraph from './IcicleGraph';
@@ -13,7 +14,6 @@ interface ProfileIcicleGraphProps {
 }
 
 const ProfileIcicleGraph = ({
-  width,
   graph,
   curPath,
   setNewCurPath,
@@ -25,16 +25,20 @@ const ProfileIcicleGraph = ({
   const total = graph.total;
   if (parseFloat(total) === 0) return <>Profile has no samples</>;
 
+  const {ref, dimensions} = useContainerDimensions();
+
   return (
     <>
       {compareMode && <DiffLegend />}
-      <IcicleGraph
-        width={width}
-        graph={graph}
-        curPath={curPath}
-        setCurPath={setNewCurPath}
-        sampleUnit={sampleUnit}
-      />
+      <div ref={ref}>
+        <IcicleGraph
+          width={dimensions?.width}
+          graph={graph}
+          curPath={curPath}
+          setCurPath={setNewCurPath}
+          sampleUnit={sampleUnit}
+        />
+      </div>
     </>
   );
 };

package/src/ProfileView.tsx

@@ -1,10 +1,7 @@
 import React, {useEffect, useState} from 'react';
-import {CalcWidth} from '@parca/dynamicsize';
 import {parseParams} from '@parca/functions';
-import {QueryServiceClient, QueryResponse, QueryRequest_ReportType} from '@parca/client';
-import {RpcError} from '@protobuf-ts/runtime-rpc';
-import {Button, Card, Spinner, useGrpcMetadata, useParcaTheme} from '@parca/components';
-import * as parca_query_v1alpha1_query_pb from '@parca/client/src/parca/query/v1alpha1/query_pb';
+import {QueryServiceClient, QueryRequest_ReportType} from '@parca/client';
+import {Button, Card, useGrpcMetadata, useParcaTheme} from '@parca/components';
 
 import ProfileIcicleGraph from './ProfileIcicleGraph';
 import {ProfileSource} from './ProfileSource';
@@ -172,14 +169,12 @@ export const ProfileView = ({
                 response !== null &&
                 response.report.oneofKind === 'flamegraph' && (
                   <div className="w-full">
-                    <CalcWidth throttle={300} delay={2000}>
-                      <ProfileIcicleGraph
-                        curPath={curPath}
-                        setNewCurPath={setNewCurPath}
-                        graph={response.report.flamegraph}
-                        sampleUnit={sampleUnit}
-                      />
-                    </CalcWidth>
+                    <ProfileIcicleGraph
+                      curPath={curPath}
+                      setNewCurPath={setNewCurPath}
+                      graph={response.report.flamegraph}
+                      sampleUnit={sampleUnit}
+                    />
                   </div>
                 )}
 
@@ -204,18 +199,16 @@ export const ProfileView = ({
                   </div>
 
                   <div className="w-1/2">
-                    <CalcWidth throttle={300} delay={2000}>
-                      <ProfileIcicleGraph
-                        curPath={curPath}
-                        setNewCurPath={setNewCurPath}
-                        graph={
-                          response?.report.oneofKind === 'flamegraph'
-                            ? response.report.flamegraph
-                            : undefined
-                        }
-                        sampleUnit={sampleUnit}
-                      />
-                    </CalcWidth>
+                    <ProfileIcicleGraph
+                      curPath={curPath}
+                      setNewCurPath={setNewCurPath}
+                      graph={
+                        response?.report.oneofKind === 'flamegraph'
+                          ? response.report.flamegraph
+                          : undefined
+                      }
+                      sampleUnit={sampleUnit}
+                    />
                   </div>
                 </>
               )}