@parca/profile 0.12.34 → 0.13.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 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
+
+## 0.12.35 (2022-05-05)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.12.34](https://github.com/parca-dev/parca/compare/ui-v0.12.33...ui-v0.12.34) (2022-05-03)
 
 ## 0.12.31 (2022-05-02)

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@parca/profile",
-  "version": "0.12.34",
+  "version": "0.13.0",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.12.30",
-    "@parca/dynamicsize": "^0.12.0",
-    "@parca/parser": "^0.12.26",
+    "@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": "e9d030a10251daf653a0ff0c79e4b41b924606d7"
+  "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, useGrpcMetadata} 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';
@@ -47,6 +44,7 @@ export const ProfileView = ({
   );
   const [currentView, setCurrentView] = useState<string | undefined>(currentViewFromURL);
   const metadata = useGrpcMetadata();
+  const {loader} = useParcaTheme();
 
   useEffect(() => {
     let showLoaderTimeout;
@@ -62,39 +60,7 @@ export const ProfileView = ({
   }, [isLoading]);
 
   if (isLoaderVisible) {
-    return (
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          height: 'inherit',
-          marginTop: 100,
-        }}
-      >
-        <svg
-          className="animate-spin -ml-1 mr-3 h-5 w-5"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <circle
-            className="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            strokeWidth="4"
-          ></circle>
-          <path
-            className="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          ></path>
-        </svg>
-        <span>Loading...</span>
-      </div>
-    );
+    return <>{loader}</>;
   }
 
   if (error !== null) {
@@ -203,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>
                 )}
 
@@ -235,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>
                 </>
               )}