@parca/profile 0.12.36 → 0.13.3

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.3](https://github.com/parca-dev/parca/compare/ui-v0.13.2...ui-v0.13.3) (2022-06-07)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.13.1](https://github.com/parca-dev/parca/compare/ui-v0.13.0...ui-v0.13.1) (2022-05-31)
+
+**Note:** Version bump only for package @parca/profile
+
+# [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.3",
   "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": "f5e7eadd0ffae7a9de6bdd7a57534d26f072c1d3"
 }

package/src/IcicleGraph.tsx

@@ -3,9 +3,9 @@ import {throttle} from 'lodash';
 import {pointer} from 'd3-selection';
 import {scaleLinear} from 'd3-scale';
 import {Flamegraph, FlamegraphNode, FlamegraphRootNode} from '@parca/client';
-import {usePopper} from 'react-popper';
-import {getLastItem, valueFormatter, diffColor} from '@parca/functions';
-import {useAppSelector, selectDarkMode} from '@parca/store';
+import {FlamegraphTooltip} from '@parca/components';
+import {getLastItem, diffColor, isSearchMatch, SEARCH_STRING_COLOR} from '@parca/functions';
+import {useAppSelector, selectDarkMode, selectSearchNodeString} from '@parca/store';
 
 interface IcicleGraphProps {
   graph: Flamegraph;
@@ -29,15 +29,6 @@ interface IcicleGraphNodesProps {
   xScale: (value: number) => number;
 }
 
-interface FlamegraphTooltipProps {
-  x: number;
-  y: number;
-  unit: string;
-  total: number;
-  hoveringNode: FlamegraphNode | FlamegraphRootNode | undefined;
-  contextElement: Element | null;
-}
-
 interface IcicleGraphRootNodeProps {
   node: FlamegraphRootNode;
   xScale: (value: number) => number;
@@ -85,6 +76,7 @@ function IcicleRect({
   onClick,
   curPath,
 }: IcicleRectProps) {
+  const currentSearchString = useAppSelector(selectSearchNodeString);
   const isFaded = curPath.length > 0 && name !== curPath[curPath.length - 1];
   const styles = isFaded ? fadedIcicleRectStyles : icicleRectStyles;
 
@@ -102,6 +94,8 @@ function IcicleRect({
         width={width - 1}
         height={height - 1}
         style={{
+          opacity:
+            Boolean(currentSearchString) && !isSearchMatch(currentSearchString, name) ? 0.5 : 1,
           fill: color,
         }}
       />
@@ -232,196 +226,6 @@ export function IcicleGraphNodes({
 
 const MemoizedIcicleGraphNodes = React.memo(IcicleGraphNodes);
 
-const FlamegraphNodeTooltipTableRows = ({
-  hoveringNode,
-}: {
-  hoveringNode: FlamegraphNode;
-}): JSX.Element => {
-  if (hoveringNode.meta === undefined) return <></>;
-
-  return (
-    <>
-      {hoveringNode.meta.pb_function?.filename !== undefined &&
-        hoveringNode.meta.pb_function?.filename !== '' && (
-          <tr>
-            <td className="w-1/5">File</td>
-            <td className="w-4/5">
-              {hoveringNode.meta.pb_function.filename}
-              {hoveringNode.meta.line?.line !== undefined && hoveringNode.meta.line?.line !== 0
-                ? ` +${hoveringNode.meta.line.line.toString()}`
-                : `${
-                    hoveringNode.meta.pb_function?.startLine !== undefined &&
-                    hoveringNode.meta.pb_function?.startLine !== 0
-                      ? ` +${hoveringNode.meta.pb_function.startLine.toString()}`
-                      : ''
-                  }`}
-            </td>
-          </tr>
-        )}
-      {hoveringNode.meta.location?.address !== undefined &&
-        hoveringNode.meta.location?.address !== 0 && (
-          <tr>
-            <td className="w-1/5">Address</td>
-            <td className="w-4/5">{' 0x' + hoveringNode.meta.location.address.toString(16)}</td>
-          </tr>
-        )}
-      {hoveringNode.meta.mapping !== undefined && hoveringNode.meta.mapping.file !== '' && (
-        <tr>
-          <td className="w-1/5">Binary</td>
-          <td className="w-4/5">{getLastItem(hoveringNode.meta.mapping.file)}</td>
-        </tr>
-      )}
-    </>
-  );
-};
-
-function generateGetBoundingClientRect(contextElement: Element, x = 0, y = 0) {
-  const domRect = contextElement.getBoundingClientRect();
-  return () =>
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    ({
-      width: 0,
-      height: 0,
-      top: domRect.y + y,
-      left: domRect.x + x,
-      right: domRect.x + x,
-      bottom: domRect.y + y,
-    } as ClientRect);
-}
-
-const virtualElement = {
-  getBoundingClientRect: () =>
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    ({
-      width: 0,
-      height: 0,
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-    } as ClientRect),
-};
-
-export const FlamegraphTooltip = ({
-  x,
-  y,
-  unit,
-  total,
-  hoveringNode,
-  contextElement,
-}: FlamegraphTooltipProps): JSX.Element => {
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-
-  const {styles, attributes, ...popperProps} = usePopper(virtualElement, popperElement, {
-    placement: 'auto-start',
-    strategy: 'absolute',
-    modifiers: [
-      {
-        name: 'preventOverflow',
-        options: {
-          tether: false,
-          altAxis: true,
-        },
-      },
-      {
-        name: 'offset',
-        options: {
-          offset: [30, 30],
-        },
-      },
-    ],
-  });
-
-  const update = popperProps.update;
-
-  useEffect(() => {
-    if (contextElement != null) {
-      virtualElement.getBoundingClientRect = generateGetBoundingClientRect(contextElement, x, y);
-      update?.();
-    }
-  }, [x, y, contextElement, update]);
-
-  if (hoveringNode === undefined || hoveringNode == null) return <></>;
-
-  const hoveringNodeCumulative = parseFloat(hoveringNode.cumulative);
-  const diff = hoveringNode.diff === undefined ? 0 : parseFloat(hoveringNode.diff);
-  const prevValue = hoveringNodeCumulative - diff;
-  const diffRatio = Math.abs(diff) > 0 ? diff / prevValue : 0;
-  const diffSign = diff > 0 ? '+' : '';
-  const diffValueText = diffSign + valueFormatter(diff, unit, 1);
-  const diffPercentageText = diffSign + (diffRatio * 100).toFixed(2) + '%';
-  const diffText = `${diffValueText} (${diffPercentageText})`;
-
-  const hoveringFlamegraphNode = hoveringNode as FlamegraphNode;
-  const metaRows =
-    hoveringFlamegraphNode.meta === undefined ? (
-      <></>
-    ) : (
-      <FlamegraphNodeTooltipTableRows hoveringNode={hoveringNode as FlamegraphNode} />
-    );
-
-  return (
-    <div ref={setPopperElement} style={styles.popper} {...attributes.popper}>
-      <div className="flex">
-        <div className="m-auto">
-          <div
-            className="border-gray-300 dark:border-gray-500 bg-gray-50 dark:bg-gray-900 rounded-lg p-3 shadow-lg opacity-90"
-            style={{borderWidth: 1}}
-          >
-            <div className="flex flex-row">
-              <div className="ml-2 mr-6">
-                <span className="font-semibold">
-                  {hoveringFlamegraphNode.meta === undefined ? (
-                    <p>root</p>
-                  ) : (
-                    <>
-                      {hoveringFlamegraphNode.meta.function !== undefined &&
-                      hoveringFlamegraphNode.meta.function.name !== '' ? (
-                        <p>{hoveringFlamegraphNode.meta.function.name}</p>
-                      ) : (
-                        <>
-                          {hoveringFlamegraphNode.meta.location !== undefined &&
-                          parseInt(hoveringFlamegraphNode.meta.location.address, 10) !== 0 ? (
-                            <p>
-                              {'0x' + hoveringFlamegraphNode.meta.location.address.toString(16)}
-                            </p>
-                          ) : (
-                            <p>unknown</p>
-                          )}
-                        </>
-                      )}
-                    </>
-                  )}
-                </span>
-                <span className="text-gray-700 dark:text-gray-300 my-2">
-                  <table className="table-fixed">
-                    <tbody>
-                      <tr>
-                        <td className="w-1/5">Cumulative</td>
-                        <td className="w-4/5">
-                          {valueFormatter(hoveringNodeCumulative, unit, 2)} (
-                          {((hoveringNodeCumulative * 100) / total).toFixed(2)}%)
-                        </td>
-                      </tr>
-                      {hoveringNode.diff !== undefined && diff !== 0 && (
-                        <tr>
-                          <td className="w-1/5">Diff</td>
-                          <td className="w-4/5">{diffText}</td>
-                        </tr>
-                      )}
-                      {metaRows}
-                    </tbody>
-                  </table>
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
 export function IcicleGraphRootNode({
   node,
   xScale,
@@ -521,9 +325,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, Input, SearchNodes, useGrpcMetadata, useParcaTheme} from '@parca/components';
 
 import ProfileIcicleGraph from './ProfileIcicleGraph';
 import {ProfileSource} from './ProfileSource';
@@ -127,6 +124,8 @@ export const ProfileView = ({
                     Download pprof
                   </Button>
                 </div>
+
+                <SearchNodes />
               </div>
 
               <div className="flex ml-auto">
@@ -143,7 +142,7 @@ export const ProfileView = ({
 
                 <Button
                   variant={`${currentView === 'table' ? 'primary' : 'neutral'}`}
-                  className="rounded-tr-none rounded-br-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons"
+                  className="items-center rounded-tr-none rounded-br-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons"
                   onClick={() => switchProfileView('table')}
                 >
                   Table
@@ -151,7 +150,7 @@ export const ProfileView = ({
 
                 <Button
                   variant={`${currentView === 'both' ? 'primary' : 'neutral'}`}
-                  className="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 no-outline-on-buttons text-ellipsis"
+                  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 no-outline-on-buttons text-ellipsis"
                   onClick={() => switchProfileView('both')}
                 >
                   Both
@@ -159,7 +158,7 @@ export const ProfileView = ({
 
                 <Button
                   variant={`${currentView === 'icicle' ? 'primary' : 'neutral'}`}
-                  className="rounded-tl-none rounded-bl-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons"
+                  className="items-center rounded-tl-none rounded-bl-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons"
                   onClick={() => switchProfileView('icicle')}
                 >
                   Icicle Graph
@@ -172,14 +171,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 +201,14 @@ export const ProfileView = ({
                   </div>
 
                   <div className="w-1/2">
-                    <CalcWidth throttle={300} delay={2000}>
+                    {response !== null && response.report.oneofKind === 'flamegraph' && (
                       <ProfileIcicleGraph
                         curPath={curPath}
                         setNewCurPath={setNewCurPath}
-                        graph={
-                          response?.report.oneofKind === 'flamegraph'
-                            ? response.report.flamegraph
-                            : undefined
-                        }
+                        graph={response.report.flamegraph}
                         sampleUnit={sampleUnit}
                       />
-                    </CalcWidth>
+                    )}
                   </div>
                 </>
               )}

package/src/TopTable.tsx

@@ -1,7 +1,6 @@
-import React, {useEffect, useState} from 'react';
-import * as parca_query_v1alpha1_query_pb from '@parca/client/src/parca/query/v1alpha1/query_pb';
-import {getLastItem, valueFormatter} from '@parca/functions';
-import {useAppSelector, selectCompareMode} from '@parca/store';
+import React from 'react';
+import {getLastItem, valueFormatter, isSearchMatch, SEARCH_STRING_COLOR} from '@parca/functions';
+import {useAppSelector, selectCompareMode, selectSearchNodeString} from '@parca/store';
 import {
   QueryResponse,
   QueryServiceClient,
@@ -107,6 +106,7 @@ export const TopTable = ({
 }: ProfileViewProps): JSX.Element => {
   const {response, error} = useQuery(queryClient, profileSource, QueryRequest_ReportType.TOP);
   const {items, requestSort, sortConfig} = useSortableData(response);
+  const currentSearchString = useAppSelector(selectSearchNodeString);
 
   const compareMode = useAppSelector(selectCompareMode);
 
@@ -184,22 +184,36 @@ export const TopTable = ({
             </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">{RowLabel(report.meta)}</td>
-                <td className="text-xs py-1.5 text-right">
-                  {valueFormatter(report.flat, unit, 2)}
-                </td>
-                <td className="text-xs py-1.5 text-right pr-2">
-                  {valueFormatter(report.cumulative, unit, 2)}
-                </td>
-                {compareMode && (
+            {items?.map((report, index) => {
+              const name = RowLabel(report.meta);
+              return (
+                <tr
+                  key={index}
+                  className="hover:bg-[#62626212] dark:hover:bg-[#ffffff12]"
+                  style={{
+                    opacity:
+                      currentSearchString !== undefined &&
+                      currentSearchString !== '' &&
+                      !isSearchMatch(currentSearchString, name)
+                        ? 0.5
+                        : 1,
+                  }}
+                >
+                  <td className="text-xs py-1.5 pl-2">{name}</td>
+                  <td className="text-xs py-1.5 text-right">
+                    {valueFormatter(report.flat, unit, 2)}
+                  </td>
                   <td className="text-xs py-1.5 text-right pr-2">
-                    {addPlusSign(valueFormatter(report.diff, unit, 2))}
+                    {valueFormatter(report.cumulative, unit, 2)}
                   </td>
-                )}
-              </tr>
-            ))}
+                  {compareMode && (
+                    <td className="text-xs py-1.5 text-right pr-2">
+                      {addPlusSign(valueFormatter(report.diff, unit, 2))}
+                    </td>
+                  )}
+                </tr>
+              );
+            })}
           </tbody>
         </table>
       </div>