@parca/profile 0.16.82 → 0.16.83

package/CHANGELOG.md

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

package/dist/IcicleGraph.js

@@ -22,7 +22,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // 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, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { throttle } from 'lodash';
 import { pointer } from 'd3-selection';
 import { scaleLinear } from 'd3-scale';
@@ -153,15 +153,21 @@ export default function IcicleGraph(_a) {
             setHeight(ref === null || ref === void 0 ? void 0 : ref.current.getBoundingClientRect().height);
         }
     }, [width]);
-    if (graph.root === undefined || width === undefined)
+    var total = useMemo(function () { return parseFloat(graph.total); }, [graph.total]);
+    var xScale = useMemo(function () {
+        if (width === undefined) {
+            return function () { return 0; };
+        }
+        return scaleLinear().domain([0, total]).range([0, width]);
+    }, [total, width]);
+    if (graph.root === undefined || width === undefined) {
         return _jsx(_Fragment, {});
+    }
     var throttledSetPos = throttle(setPos, 20);
     var onMouseMove = function (e) {
         // X/Y coordinate array relative to svg
         var rel = pointer(e);
         throttledSetPos([rel[0], rel[1]]);
     };
-    var total = parseFloat(graph.total);
-    var xScale = scaleLinear().domain([0, total]).range([0, width]);
     return (_jsxs("div", __assign({ onMouseLeave: function () { return setHoveringNode(undefined); } }, { children: [_jsx(GraphTooltip, { unit: sampleUnit, total: total, x: pos[0], y: pos[1], hoveringNode: hoveringNode, contextElement: svg.current, strings: graph.stringTable, mappings: graph.mapping, locations: graph.locations, functions: graph.function }), _jsx("svg", __assign({ className: "font-robotoMono", width: width, height: height, onMouseMove: onMouseMove, preserveAspectRatio: "xMinYMid", ref: svg }, { children: _jsx("g", __assign({ ref: ref }, { children: _jsx(MemoizedIcicleGraphRootNode, { node: graph.root, strings: graph.stringTable, mappings: graph.mapping, locations: graph.locations, functions: graph.function, setHoveringNode: setHoveringNode, curPath: curPath, setCurPath: setCurPath, xScale: xScale, total: total, totalWidth: width }) })) }))] })));
 }

package/dist/ProfileView/index.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 // 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.
@@ -109,9 +109,6 @@ export var ProfileView = function (_a) {
         currentSearchString,
     ]);
     var isLoaderVisible = useDelayedLoader(isLoading);
-    if (isLoaderVisible) {
-        return _jsx(_Fragment, { children: loader });
-    }
     if ((flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.error) != null) {
         console.error('Error: ', flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.error);
         return (_jsxs("div", __assign({ className: "p-10 flex justify-center" }, { children: ["An error occurred: ", flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.error.message] })));
@@ -137,8 +134,8 @@ export var ProfileView = function (_a) {
     // TODO: fix colors for dark mode
     var minColor = scaleLinear([isDarkMode ? 'black' : 'white', maxColor])(0.3);
     var colorRange = [minColor, maxColor];
-    return (_jsx(_Fragment, { children: _jsx("div", __assign({ className: "py-3" }, { children: _jsx(Card, { children: _jsxs(Card.Body, { children: [_jsxs("div", __assign({ className: "flex py-3 w-full" }, { children: [_jsxs("div", __assign({ className: "w-2/5 flex space-x-4" }, { children: [_jsxs("div", __assign({ className: "flex space-x-1" }, { children: [profileSource != null && queryClient != null ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsx(Button, __assign({ color: "neutral", onClick: function (e) {
+    return (_jsx(_Fragment, { children: _jsx("div", __assign({ className: "py-3" }, { children: _jsx(Card, { children: _jsxs(Card.Body, { children: [_jsxs("div", __assign({ className: "flex py-3 w-full" }, { children: [_jsxs("div", __assign({ className: "w-2/5 flex space-x-4" }, { children: [_jsxs("div", __assign({ className: "flex space-x-1" }, { children: [profileSource != null && queryClient != null ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient, disabled: isLoading })) : null, _jsx(Button, __assign({ color: "neutral", onClick: function (e) {
                                                         e.preventDefault();
                                                         onDownloadPProf();
-                                                    } }, { children: "Download pprof" }))] })), _jsx(FilterByFunctionButton, {})] })), _jsxs("div", __assign({ className: "flex ml-auto gap-2" }, { children: [_jsx(Button, __assign({ color: "neutral", onClick: resetIcicleGraph, disabled: curPath.length === 0, className: "whitespace-nowrap text-ellipsis" }, { children: "Reset View" })), callgraphEnabled ? (_jsx(Button, __assign({ variant: "".concat(currentView === 'callgraph' ? 'primary' : 'neutral'), onClick: function () { return switchProfileView('callgraph'); }, className: "whitespace-nowrap text-ellipsis" }, { children: "Callgraph" }))) : null, _jsxs("div", __assign({ className: "flex" }, { children: [_jsx(Button, __assign({ variant: "".concat(currentView === 'table' ? 'primary' : 'neutral'), className: "items-center rounded-tr-none rounded-br-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons", onClick: function () { return switchProfileView('table'); } }, { children: "Table" })), _jsx(Button, __assign({ variant: "".concat(currentView === 'both' ? 'primary' : 'neutral'), className: "items-center rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none border-l-0 border-r-0 w-auto px-8 whitespace-nowrap no-outline-on-buttons text-ellipsis", onClick: function () { return switchProfileView('both'); } }, { children: "Both" })), _jsx(Button, __assign({ variant: "".concat(currentView === 'icicle' ? 'primary' : 'neutral'), className: "items-center rounded-tl-none rounded-bl-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons", onClick: function () { return switchProfileView('icicle'); } }, { children: "Icicle Graph" }))] }))] }))] })), _jsxs("div", __assign({ ref: ref, className: "flex space-x-4 justify-between w-full" }, { children: [currentView === 'icicle' && (flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.data) != null && (_jsx("div", __assign({ className: "w-full" }, { children: _jsx(Profiler, __assign({ id: "icicleGraph", onRender: perf === null || perf === void 0 ? void 0 : perf.onRender }, { children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit }) })) }))), currentView === 'callgraph' && (callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.data) != null && (_jsx("div", __assign({ className: "w-full" }, { children: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== undefined && (_jsx(Callgraph, { graph: callgraphData.data, sampleUnit: sampleUnit, width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, colorRange: colorRange })) }))), currentView === 'table' && topTableData != null && (_jsx("div", __assign({ className: "w-full" }, { children: _jsx(TopTable, { data: topTableData.data, sampleUnit: sampleUnit }) }))), currentView === 'both' && (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: "w-1/2" }, { children: _jsx(TopTable, { data: topTableData === null || topTableData === void 0 ? void 0 : topTableData.data, sampleUnit: sampleUnit }) })), _jsx("div", __assign({ className: "w-1/2" }, { children: flamegraphData != null && (_jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit })) }))] }))] }))] }) }) })) }));
+                                                    }, disabled: isLoading }, { children: "Download pprof" }))] })), _jsx(FilterByFunctionButton, {})] })), _jsxs("div", __assign({ className: "flex ml-auto gap-2" }, { children: [_jsx(Button, __assign({ color: "neutral", onClick: resetIcicleGraph, disabled: curPath.length === 0, className: "whitespace-nowrap text-ellipsis" }, { children: "Reset View" })), callgraphEnabled ? (_jsx(Button, __assign({ variant: "".concat(currentView === 'callgraph' ? 'primary' : 'neutral'), onClick: function () { return switchProfileView('callgraph'); }, className: "whitespace-nowrap text-ellipsis" }, { children: "Callgraph" }))) : null, _jsxs("div", __assign({ className: "flex" }, { children: [_jsx(Button, __assign({ variant: "".concat(currentView === 'table' ? 'primary' : 'neutral'), className: "items-center rounded-tr-none rounded-br-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons", onClick: function () { return switchProfileView('table'); } }, { children: "Table" })), _jsx(Button, __assign({ variant: "".concat(currentView === 'both' ? 'primary' : 'neutral'), className: "items-center rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none border-l-0 border-r-0 w-auto px-8 whitespace-nowrap no-outline-on-buttons text-ellipsis", onClick: function () { return switchProfileView('both'); } }, { children: "Both" })), _jsx(Button, __assign({ variant: "".concat(currentView === 'icicle' ? 'primary' : 'neutral'), className: "items-center rounded-tl-none rounded-bl-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons", onClick: function () { return switchProfileView('icicle'); } }, { children: "Icicle Graph" }))] }))] }))] })), isLoaderVisible ? (_jsx(_Fragment, { children: loader })) : (_jsxs("div", __assign({ ref: ref, className: "flex space-x-4 justify-between w-full" }, { children: [currentView === 'icicle' && (flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.data) != null && (_jsx("div", __assign({ className: "w-full" }, { children: _jsx(Profiler, __assign({ id: "icicleGraph", onRender: perf === null || perf === void 0 ? void 0 : perf.onRender }, { children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit }) })) }))), currentView === 'callgraph' && (callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.data) != null && (_jsx("div", __assign({ className: "w-full" }, { children: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== undefined && (_jsx(Callgraph, { graph: callgraphData.data, sampleUnit: sampleUnit, width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, colorRange: colorRange })) }))), currentView === 'table' && topTableData != null && (_jsx("div", __assign({ className: "w-full" }, { children: _jsx(TopTable, { data: topTableData.data, sampleUnit: sampleUnit }) }))), currentView === 'both' && (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: "w-1/2" }, { children: _jsx(TopTable, { data: topTableData === null || topTableData === void 0 ? void 0 : topTableData.data, sampleUnit: sampleUnit }) })), _jsx("div", __assign({ className: "w-1/2" }, { children: flamegraphData != null && (_jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit })) }))] }))] })))] }) }) })) }));
 };

package/dist/components/ProfileShareButton/index.d.ts

@@ -3,6 +3,7 @@ import { QueryRequest, QueryServiceClient } from '@parca/client';
 interface Props {
     queryRequest: QueryRequest;
     queryClient: QueryServiceClient;
+    disabled?: boolean;
 }
-declare const ProfileShareButton: ({ queryRequest, queryClient }: Props) => JSX.Element;
+declare const ProfileShareButton: ({ queryRequest, queryClient, disabled }: Props) => JSX.Element;
 export default ProfileShareButton;

package/dist/components/ProfileShareButton/index.js

@@ -112,8 +112,8 @@ var ProfileShareModal = function (_a) {
                             }, disabled: loading || !isFormDataValid(), type: "submit" }, { children: loading ? 'Sharing' : 'Share' })), error !== '' ? _jsx("p", { children: "Something went wrong please try again" }) : null] })) : (_jsxs(_Fragment, { children: [_jsx(ResultBox, { value: sharedLink, className: "mt-4" }), _jsx("div", __assign({ className: "flex justify-center mt-8" }, { children: _jsx(Button, __assign({ variant: "neutral", className: "w-fit", onClick: onClose }, { children: "Close" })) }))] }))] })) })));
 };
 var ProfileShareButton = function (_a) {
-    var queryRequest = _a.queryRequest, queryClient = _a.queryClient;
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    return (_jsxs(_Fragment, { children: [_jsx(Button, __assign({ color: "neutral", className: "w-fit", onClick: function () { return setIsOpen(true); } }, { children: _jsx(Icon, { icon: "ei:share-apple", width: 20 }) })), _jsx(ProfileShareModal, { isOpen: isOpen, closeModal: function () { return setIsOpen(false); }, queryRequest: queryRequest, queryClient: queryClient })] }));
+    var queryRequest = _a.queryRequest, queryClient = _a.queryClient, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
+    var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
+    return (_jsxs(_Fragment, { children: [_jsx(Button, __assign({ color: "neutral", className: "w-fit", onClick: function () { return setIsOpen(true); }, disabled: disabled }, { children: _jsx(Icon, { icon: "ei:share-apple", width: 20 }) })), _jsx(ProfileShareModal, { isOpen: isOpen, closeModal: function () { return setIsOpen(false); }, queryRequest: queryRequest, queryClient: queryClient })] }));
 };
 export default ProfileShareButton;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.82",
+  "version": "0.16.83",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.16.57",
-    "@parca/components": "^0.16.71",
+    "@parca/client": "^0.16.58",
+    "@parca/components": "^0.16.72",
     "@parca/dynamicsize": "^0.16.51",
     "@parca/functions": "^0.16.53",
     "@parca/parser": "^0.16.51",
@@ -42,5 +42,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "c6e9d529f892c651f46563ead1d5cd8c5e5c4556"
+  "gitHead": "5cb6f84f78525b2bffd1d498d99e83868d793333"
 }

package/src/IcicleGraph.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {MouseEvent, useEffect, useRef, useState} from 'react';
+import React, {MouseEvent, useEffect, useMemo, useRef, useState} from 'react';
 
 import {throttle} from 'lodash';
 import {pointer} from 'd3-selection';
@@ -385,7 +385,17 @@ export default function IcicleGraph({
     }
   }, [width]);
 
-  if (graph.root === undefined || width === undefined) return <></>;
+  const total = useMemo(() => parseFloat(graph.total), [graph.total]);
+  const xScale = useMemo(() => {
+    if (width === undefined) {
+      return () => 0;
+    }
+    return scaleLinear().domain([0, total]).range([0, width]);
+  }, [total, width]);
+
+  if (graph.root === undefined || width === undefined) {
+    return <></>;
+  }
 
   const throttledSetPos = throttle(setPos, 20);
   const onMouseMove = (e: React.MouseEvent<SVGSVGElement | HTMLDivElement>): void => {
@@ -395,9 +405,6 @@ export default function IcicleGraph({
     throttledSetPos([rel[0], rel[1]]);
   };
 
-  const total = parseFloat(graph.total);
-  const xScale = scaleLinear().domain([0, total]).range([0, width]);
-
   return (
     <div onMouseLeave={() => setHoveringNode(undefined)}>
       <GraphTooltip

package/src/ProfileView/index.tsx

@@ -172,10 +172,6 @@ export const ProfileView = ({
 
   const isLoaderVisible = useDelayedLoader(isLoading);
 
-  if (isLoaderVisible) {
-    return <>{loader}</>;
-  }
-
   if (flamegraphData?.error != null) {
     console.error('Error: ', flamegraphData?.error);
     return (
@@ -228,6 +224,7 @@ export const ProfileView = ({
                     <ProfileShareButton
                       queryRequest={profileSource.QueryRequest()}
                       queryClient={queryClient}
+                      disabled={isLoading}
                     />
                   ) : null}
 
@@ -237,6 +234,7 @@ export const ProfileView = ({
                       e.preventDefault();
                       onDownloadPProf();
                     }}
+                    disabled={isLoading}
                   >
                     Download pprof
                   </Button>
@@ -292,58 +290,62 @@ export const ProfileView = ({
               </div>
             </div>
 
-            <div ref={ref} className="flex space-x-4 justify-between w-full">
-              {currentView === 'icicle' && flamegraphData?.data != null && (
-                <div className="w-full">
-                  <Profiler
-                    id="icicleGraph"
-                    onRender={perf?.onRender as React.ProfilerOnRenderCallback}
-                  >
-                    <ProfileIcicleGraph
-                      curPath={curPath}
-                      setNewCurPath={setNewCurPath}
-                      graph={flamegraphData.data}
-                      sampleUnit={sampleUnit}
-                    />
-                  </Profiler>
-                </div>
-              )}
-              {currentView === 'callgraph' && callgraphData?.data != null && (
-                <div className="w-full">
-                  {dimensions?.width !== undefined && (
-                    <Callgraph
-                      graph={callgraphData.data}
-                      sampleUnit={sampleUnit}
-                      width={dimensions?.width}
-                      colorRange={colorRange}
-                    />
-                  )}
-                </div>
-              )}
-              {currentView === 'table' && topTableData != null && (
-                <div className="w-full">
-                  <TopTable data={topTableData.data} sampleUnit={sampleUnit} />
-                </div>
-              )}
-              {currentView === 'both' && (
-                <>
-                  <div className="w-1/2">
-                    <TopTable data={topTableData?.data} sampleUnit={sampleUnit} />
-                  </div>
-
-                  <div className="w-1/2">
-                    {flamegraphData != null && (
+            {isLoaderVisible ? (
+              <>{loader}</>
+            ) : (
+              <div ref={ref} className="flex space-x-4 justify-between w-full">
+                {currentView === 'icicle' && flamegraphData?.data != null && (
+                  <div className="w-full">
+                    <Profiler
+                      id="icicleGraph"
+                      onRender={perf?.onRender as React.ProfilerOnRenderCallback}
+                    >
                       <ProfileIcicleGraph
                         curPath={curPath}
                         setNewCurPath={setNewCurPath}
                         graph={flamegraphData.data}
                         sampleUnit={sampleUnit}
                       />
+                    </Profiler>
+                  </div>
+                )}
+                {currentView === 'callgraph' && callgraphData?.data != null && (
+                  <div className="w-full">
+                    {dimensions?.width !== undefined && (
+                      <Callgraph
+                        graph={callgraphData.data}
+                        sampleUnit={sampleUnit}
+                        width={dimensions?.width}
+                        colorRange={colorRange}
+                      />
                     )}
                   </div>
-                </>
-              )}
-            </div>
+                )}
+                {currentView === 'table' && topTableData != null && (
+                  <div className="w-full">
+                    <TopTable data={topTableData.data} sampleUnit={sampleUnit} />
+                  </div>
+                )}
+                {currentView === 'both' && (
+                  <>
+                    <div className="w-1/2">
+                      <TopTable data={topTableData?.data} sampleUnit={sampleUnit} />
+                    </div>
+
+                    <div className="w-1/2">
+                      {flamegraphData != null && (
+                        <ProfileIcicleGraph
+                          curPath={curPath}
+                          setNewCurPath={setNewCurPath}
+                          graph={flamegraphData.data}
+                          sampleUnit={sampleUnit}
+                        />
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )}
           </Card.Body>
         </Card>
       </div>

package/src/components/ProfileShareButton/index.tsx

@@ -20,6 +20,7 @@ import ResultBox from './ResultBox';
 interface Props {
   queryRequest: QueryRequest;
   queryClient: QueryServiceClient;
+  disabled?: boolean;
 }
 
 interface ProfileShareModalProps {
@@ -117,12 +118,12 @@ const ProfileShareModal = ({
   );
 };
 
-const ProfileShareButton = ({queryRequest, queryClient}: Props): JSX.Element => {
+const ProfileShareButton = ({queryRequest, queryClient, disabled = false}: Props): JSX.Element => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   return (
     <>
-      <Button color="neutral" className="w-fit" onClick={() => setIsOpen(true)}>
+      <Button color="neutral" className="w-fit" onClick={() => setIsOpen(true)} disabled={disabled}>
         <Icon icon="ei:share-apple" width={20} />
       </Button>
       <ProfileShareModal