@parca/profile 0.16.57 → 0.16.59

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.59](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.58...@parca/profile@0.16.59) (2022-11-03)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.58](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.57...@parca/profile@0.16.58) (2022-11-02)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.57](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.56...@parca/profile@0.16.57) (2022-11-02)
 
 **Note:** Version bump only for package @parca/profile

package/dist/Callgraph/Edge/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface IEdge {
     source: number;
     target: number;

package/dist/Callgraph/Node/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface INode {
     id: number;
     x: number;

package/dist/Callgraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Callgraph as CallgraphType } from '@parca/client';
 export interface Props {
     graph: CallgraphType;

package/dist/GraphTooltip/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CallgraphNode, FlamegraphNode, FlamegraphNodeMeta, FlamegraphRootNode } from '@parca/client';
 import { Function, Location, Mapping } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 interface GraphTooltipProps {

package/dist/IcicleGraph.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Flamegraph, FlamegraphNode, FlamegraphRootNode } from '@parca/client';
 import { Mapping, Function, Location } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 interface IcicleGraphProps {

package/dist/MatchersInput/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Query } from '@parca/parser';
 import { LabelsResponse, QueryServiceClient, ValuesResponse } from '@parca/client';
 interface MatchersInputProps {

package/dist/MetricsCircle/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface MetricsCircleProps {
     cx: number;
     cy: number;

package/dist/MetricsGraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SingleProfileSelection } from '..';
 import { MetricsSeries as MetricsSeriesPb, Label } from '@parca/client';
 import { DateTimeRange } from '@parca/components';

package/dist/MetricsSeries/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import * as d3 from 'd3';
 interface MetricsSeriesProps {
     data: any;

package/dist/ProfileExplorer/ProfileExplorerCompare.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ProfileSelection } from '..';
 import { QueryServiceClient } from '@parca/client';
 import { NavigateFunction } from '.';

package/dist/ProfileExplorer/ProfileExplorerSingle.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import { ProfileSelection } from '..';
 import { NavigateFunction } from '../ProfileExplorer';

package/dist/ProfileExplorer/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 export declare type NavigateFunction = (path: string, queryParams: any) => void;
 interface ProfileExplorerProps {

package/dist/ProfileIcicleGraph.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Flamegraph } from '@parca/client';
 interface ProfileIcicleGraphProps {
     width?: number;

package/dist/ProfileMetricsGraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ProfileSelection } from '..';
 import { QueryServiceClient, QueryRangeResponse } from '@parca/client';
 import { RpcError } from '@protobuf-ts/runtime-rpc';

package/dist/ProfileSelector/CompareButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const CompareButton: ({ disabled, onClick, }: {
     disabled: boolean;
     onClick: () => void;

package/dist/ProfileSelector/MergeButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const MergeButton: ({ disabled, onClick, }: {
     disabled: boolean;
     onClick: () => void;

package/dist/ProfileSelector/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient, ProfileTypesResponse } from '@parca/client';
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 import { ProfileSelection } from '..';

package/dist/ProfileSource.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ProfileType } from '@parca/parser';
 import { Label, QueryRequest, ProfileDiffSelection } from '@parca/client';
 export interface ProfileSource {

package/dist/ProfileTypeSelector/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ProfileType, ProfileTypesResponse } from '@parca/client';
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 interface WellKnownProfile {

package/dist/ProfileView.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient, Flamegraph, Top, Callgraph } from '@parca/client';
 import { ProfileSource } from './ProfileSource';
 import './ProfileView.styles.css';

package/dist/ProfileViewWithData.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import { ProfileSource } from './ProfileSource';
 declare type NavigateFunction = (path: string, queryParams: any) => void;

package/dist/TopTable.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TopNodeMeta, Top } from '@parca/client';
 import './TopTable.styles.css';
 interface TopTableProps {

package/dist/TopTable.js

@@ -33,7 +33,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // limitations under the License.
 import React from 'react';
 import { getLastItem, valueFormatter, isSearchMatch } from '@parca/functions';
-import { useAppSelector, selectCompareMode, selectSearchNodeString } from '@parca/store';
+import { useAppSelector, selectCompareMode, selectSearchNodeString, setSearchNodeString, useAppDispatch, } from '@parca/store';
 import { hexifyAddress } from './utils';
 import './TopTable.styles.css';
 var Arrow = function (_a) {
@@ -110,6 +110,7 @@ export var TopTable = function (_a) {
     var _f = useSortableData(top), items = _f.items, requestSort = _f.requestSort, sortConfig = _f.sortConfig;
     var currentSearchString = useAppSelector(selectSearchNodeString);
     var compareMode = useAppSelector(selectCompareMode);
+    var dispatch = useAppDispatch();
     var unit = sampleUnit;
     var total = top != null ? top.list.length : 0;
     if (total === 0)
@@ -126,15 +127,18 @@ export var TopTable = function (_a) {
         }
         return "+".concat(num);
     };
-    return (_jsx(_Fragment, { children: _jsx("div", __assign({ className: "w-full font-robotoMono" }, { children: _jsxs("table", __assign({ className: "iciclegraph-table table-fixed text-left w-full divide-y divide-gray-200 dark:divide-gray-700" }, { children: [_jsx("thead", __assign({ className: "bg-gray-50 dark:bg-gray-800" }, { children: _jsxs("tr", { children: [_jsxs("th", __assign({ className: "text-sm cursor-pointer pt-2 pb-2 pl-2", onClick: function () { return requestSort('name'); } }, { children: ["Name", _jsx("span", __assign({ className: "inline-block align-middle ml-2 ".concat((_b = getClassNamesFor('name')) !== null && _b !== void 0 ? _b : '') }, { children: _jsx(Arrow, { direction: getClassNamesFor('name') }) }))] })), _jsxs("th", __assign({ className: "text-right text-sm cursor-pointer pt-2 pb-2 w-[150px]", onClick: function () { return requestSort('flat'); } }, { children: ["Flat", _jsx("span", __assign({ className: "inline-block align-middle ml-2 ".concat((_c = getClassNamesFor('flat')) !== null && _c !== void 0 ? _c : '') }, { children: _jsx(Arrow, { direction: getClassNamesFor('flat') }) }))] })), _jsxs("th", __assign({ className: "text-right text-sm cursor-pointer pt-2 pb-2 pr-2 w-[150px]", onClick: function () { return requestSort('cumulative'); } }, { children: ["Cumulative", _jsx("span", __assign({ className: "inline-block align-middle ml-2 ".concat((_d = getClassNamesFor('cumulative')) !== null && _d !== void 0 ? _d : '') }, { children: _jsx(Arrow, { direction: getClassNamesFor('cumulative') }) }))] })), compareMode && (_jsxs("th", __assign({ className: "text-right text-sm cursor-pointer pt-2 pb-2 pr-2 w-[150px]", onClick: function () { return requestSort('diff'); } }, { children: ["Diff", _jsx("span", __assign({ className: "inline-block align-middle ml-2 ".concat((_e = getClassNamesFor('diff')) !== null && _e !== void 0 ? _e : '') }, { children: _jsx(Arrow, { direction: getClassNamesFor('diff') }) }))] })))] }) })), _jsx("tbody", __assign({ className: "bg-white divide-y divide-gray-200 dark:bg-gray-900 dark:divide-gray-700" }, { children: items === null || items === void 0 ? void 0 : items.map(function (report, index) {
+    var selectSpan = function (span) {
+        dispatch(setSearchNodeString(span.trim()));
+    };
+    return (_jsx(_Fragment, { children: _jsx("div", __assign({ className: "w-full font-robotoMono" }, { children: _jsxs("table", __assign({ className: "iciclegraph-table table-fixed text-left w-full divide-y divide-gray-200 dark:divide-gray-700", tabIndex: 1 }, { children: [_jsx("thead", __assign({ className: "bg-gray-50 dark:bg-gray-800" }, { children: _jsxs("tr", { children: [_jsxs("th", __assign({ className: "text-sm cursor-pointer pt-2 pb-2 pl-2", onClick: function () { return requestSort('name'); } }, { children: ["Name", _jsx("span", __assign({ className: "inline-block align-middle ml-2 ".concat((_b = getClassNamesFor('name')) !== null && _b !== void 0 ? _b : '') }, { children: _jsx(Arrow, { direction: getClassNamesFor('name') }) }))] })), _jsxs("th", __assign({ className: "text-right text-sm cursor-pointer pt-2 pb-2 w-[150px]", onClick: function () { return requestSort('flat'); } }, { children: ["Flat", _jsx("span", __assign({ className: "inline-block align-middle ml-2 ".concat((_c = getClassNamesFor('flat')) !== null && _c !== void 0 ? _c : '') }, { children: _jsx(Arrow, { direction: getClassNamesFor('flat') }) }))] })), _jsxs("th", __assign({ className: "text-right text-sm cursor-pointer pt-2 pb-2 pr-2 w-[150px]", onClick: function () { return requestSort('cumulative'); } }, { children: ["Cumulative", _jsx("span", __assign({ className: "inline-block align-middle ml-2 ".concat((_d = getClassNamesFor('cumulative')) !== null && _d !== void 0 ? _d : '') }, { children: _jsx(Arrow, { direction: getClassNamesFor('cumulative') }) }))] })), compareMode && (_jsxs("th", __assign({ className: "text-right text-sm cursor-pointer pt-2 pb-2 pr-2 w-[150px]", onClick: function () { return requestSort('diff'); } }, { children: ["Diff", _jsx("span", __assign({ className: "inline-block align-middle ml-2 ".concat((_e = getClassNamesFor('diff')) !== null && _e !== void 0 ? _e : '') }, { children: _jsx(Arrow, { direction: getClassNamesFor('diff') }) }))] })))] }) })), _jsx("tbody", __assign({ className: "bg-white divide-y divide-gray-200 dark:bg-gray-900 dark:divide-gray-700" }, { children: items === null || items === void 0 ? void 0 : items.map(function (report, index) {
                             var name = RowLabel(report.meta);
-                            return (_jsxs("tr", __assign({ className: "hover:bg-[#62626212] dark:hover:bg-[#ffffff12]", style: {
+                            return (_jsxs("tr", __assign({ className: "hover:bg-[#62626212] dark:hover:bg-[#ffffff12] cursor-pointer", style: {
                                     opacity: currentSearchString !== undefined &&
                                         currentSearchString !== '' &&
                                         !isSearchMatch(currentSearchString, name)
                                         ? 0.5
                                         : 1,
-                                } }, { children: [_jsx("td", __assign({ className: "text-xs py-1.5 pl-2" }, { children: name })), _jsx("td", __assign({ className: "text-xs py-1.5 text-right" }, { children: valueFormatter(report.flat, unit, 2) })), _jsx("td", __assign({ className: "text-xs py-1.5 text-right pr-2" }, { children: valueFormatter(report.cumulative, unit, 2) })), compareMode && (_jsx("td", __assign({ className: "text-xs py-1.5 text-right pr-2" }, { children: addPlusSign(valueFormatter(report.diff, unit, 2)) })))] }), index));
+                                }, onClick: function () { return selectSpan(name); } }, { children: [_jsx("td", __assign({ className: "text-xs py-1.5 pl-2" }, { children: name })), _jsx("td", __assign({ className: "text-xs py-1.5 text-right" }, { children: valueFormatter(report.flat, unit, 2) })), _jsx("td", __assign({ className: "text-xs py-1.5 text-right pr-2" }, { children: valueFormatter(report.cumulative, unit, 2) })), compareMode && (_jsx("td", __assign({ className: "text-xs py-1.5 text-right pr-2" }, { children: addPlusSign(valueFormatter(report.diff, unit, 2)) })))] }), index));
                         }) }))] })) })) }));
 };
 export default TopTable;

package/dist/components/DiffLegend.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const DiffLegend: () => JSX.Element;
 export default DiffLegend;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
     value: string;
     className?: string;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryRequest, QueryServiceClient } from '@parca/client';
 interface Props {
     queryRequest: QueryRequest;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.57",
+  "version": "0.16.59",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@iconify/react": "^3.2.2",
     "@parca/client": "^0.16.53",
-    "@parca/components": "^0.16.54",
+    "@parca/components": "^0.16.55",
     "@parca/dynamicsize": "^0.16.51",
     "@parca/functions": "^0.16.51",
     "@parca/parser": "^0.16.49",
@@ -39,5 +39,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "4a84ba064260df403f1b84ae72737744d11ceafd"
+  "gitHead": "d1389b648874097c3eeb9143c94469847fedede2"
 }

package/src/TopTable.tsx

@@ -14,7 +14,13 @@
 import React from 'react';
 
 import {getLastItem, valueFormatter, isSearchMatch} from '@parca/functions';
-import {useAppSelector, selectCompareMode, selectSearchNodeString} from '@parca/store';
+import {
+  useAppSelector,
+  selectCompareMode,
+  selectSearchNodeString,
+  setSearchNodeString,
+  useAppDispatch,
+} from '@parca/store';
 import {TopNode, TopNodeMeta, Top} from '@parca/client';
 
 import {hexifyAddress} from './utils';
@@ -136,8 +142,8 @@ export const RowLabel = (meta: TopNodeMeta | undefined): string => {
 export const TopTable = ({data: top, sampleUnit}: TopTableProps): JSX.Element => {
   const {items, requestSort, sortConfig} = useSortableData(top);
   const currentSearchString = useAppSelector(selectSearchNodeString);
-
   const compareMode = useAppSelector(selectCompareMode);
+  const dispatch = useAppDispatch();
 
   const unit = sampleUnit;
 
@@ -159,10 +165,17 @@ export const TopTable = ({data: top, sampleUnit}: TopTableProps): JSX.Element =>
     return `+${num}`;
   };
 
+  const selectSpan = (span: string): void => {
+    dispatch(setSearchNodeString(span.trim()));
+  };
+
   return (
     <>
       <div className="w-full font-robotoMono">
-        <table className="iciclegraph-table table-fixed text-left w-full divide-y divide-gray-200 dark:divide-gray-700">
+        <table
+          className="iciclegraph-table table-fixed text-left w-full divide-y divide-gray-200 dark:divide-gray-700"
+          tabIndex={1}
+        >
           <thead className="bg-gray-50 dark:bg-gray-800">
             <tr>
               <th
@@ -221,7 +234,7 @@ export const TopTable = ({data: top, sampleUnit}: TopTableProps): JSX.Element =>
               return (
                 <tr
                   key={index}
-                  className="hover:bg-[#62626212] dark:hover:bg-[#ffffff12]"
+                  className="hover:bg-[#62626212] dark:hover:bg-[#ffffff12] cursor-pointer"
                   style={{
                     opacity:
                       currentSearchString !== undefined &&
@@ -230,6 +243,7 @@ export const TopTable = ({data: top, sampleUnit}: TopTableProps): JSX.Element =>
                         ? 0.5
                         : 1,
                   }}
+                  onClick={() => selectSpan(name)}
                 >
                   <td className="text-xs py-1.5 pl-2">{name}</td>
                   <td className="text-xs py-1.5 text-right">