@parca/profile 0.12.20 → 0.12.26

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.12.26](https://github.com/parca-dev/parca/compare/ui-v0.12.25...ui-v0.12.26) (2022-04-28)
+
+## [0.12.24](https://github.com/parca-dev/parca/compare/ui-v0.12.23...ui-v0.12.24) (2022-04-26)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.12.25](https://github.com/parca-dev/parca/compare/ui-v0.12.24...ui-v0.12.25) (2022-04-27)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.12.23](https://github.com/parca-dev/parca/compare/ui-v0.12.22...ui-v0.12.23) (2022-04-25)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.12.20](https://github.com/parca-dev/parca/compare/ui-v0.12.19...ui-v0.12.20) (2022-04-12)
 
 **Note:** Version bump only for package @parca/profile

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@parca/profile",
-  "version": "0.12.20",
+  "version": "0.12.26",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.12.20",
+    "@parca/client": "^0.12.26",
     "@parca/dynamicsize": "^0.12.0",
-    "@parca/parser": "^0.12.3",
+    "@parca/parser": "^0.12.26",
     "d3-scale": "^4.0.2"
   },
   "main": "src/index.tsx",
@@ -19,5 +19,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "72da90d95cc53eda749dbb5dd6b2ea24fe2e6ca2"
+  "gitHead": "a5187e802f95bb7ee967121af9c9b74167d95278"
 }

package/src/IcicleGraph.tsx

@@ -5,8 +5,9 @@ import {scaleLinear} from 'd3-scale';
 import {Flamegraph, FlamegraphNode, FlamegraphRootNode} from '@parca/client';
 import {usePopper} from 'react-popper';
 import {getLastItem, valueFormatter} from '@parca/functions';
+import {useAppSelector, selectDarkMode} from '@parca/store';
 
-const RowHeight = 20;
+const RowHeight = 26;
 
 const icicleRectStyles = {
   cursor: 'pointer',
@@ -65,7 +66,7 @@ function IcicleRect({
       />
       {width > 5 && (
         <svg width={width - 5} height={height}>
-          <text x={5} y={13} style={{fontSize: '12px'}}>
+          <text x={5} y={15} style={{fontSize: '12px'}}>
             {name}
           </text>
         </svg>
@@ -75,7 +76,7 @@ function IcicleRect({
 }
 
 interface IcicleGraphNodesProps {
-  data: FlamegraphNode.AsObject[];
+  data: FlamegraphNode[];
   x: number;
   y: number;
   total: number;
@@ -83,38 +84,20 @@ interface IcicleGraphNodesProps {
   level: number;
   curPath: string[];
   setCurPath: (path: string[]) => void;
-  setHoveringNode: (
-    node: FlamegraphNode.AsObject | FlamegraphRootNode.AsObject | undefined
-  ) => void;
+  setHoveringNode: (node: FlamegraphNode | FlamegraphRootNode | undefined) => void;
   path: string[];
   xScale: (value: number) => number;
 }
 
-function diffColor(diff: number, cumulative: number): string {
-  const prevValue = cumulative - diff;
-  const diffRatio = prevValue > 0 ? (Math.abs(diff) > 0 ? diff / prevValue : 0) : 1.0;
-
-  const diffTransparency =
-    Math.abs(diff) > 0 ? Math.min((Math.abs(diffRatio) / 2 + 0.5) * 0.8, 0.8) : 0;
-  const color =
-    diff === 0
-      ? '#90c7e0'
-      : diff > 0
-      ? `rgba(221, 46, 69, ${diffTransparency})`
-      : `rgba(59, 165, 93, ${diffTransparency})`;
-
-  return color;
-}
-
-export function nodeLabel(node: FlamegraphNode.AsObject): string {
+export function nodeLabel(node: FlamegraphNode): string {
   if (node.meta === undefined) return '<unknown>';
   const mapping = `${
     node.meta?.mapping?.file !== undefined && node.meta?.mapping?.file !== ''
       ? '[' + getLastItem(node.meta.mapping.file) + '] '
       : ''
   }`;
-  if (node.meta.pb_function?.name !== undefined && node.meta.pb_function?.name !== '')
-    return mapping + node.meta.pb_function.name;
+  if (node.meta.function?.name !== undefined && node.meta.function?.name !== '')
+    return mapping + node.meta.function.name;
 
   const address = `${
     node.meta.location?.address !== undefined && node.meta.location?.address !== 0
@@ -126,6 +109,26 @@ export function nodeLabel(node: FlamegraphNode.AsObject): string {
   return fallback === '' ? '<unknown>' : fallback;
 }
 
+function diffColor(diff: number, cumulative: number, isDarkMode: boolean): string {
+  const prevValue = cumulative - diff;
+  const diffRatio = prevValue > 0 ? (Math.abs(diff) > 0 ? diff / prevValue : 0) : 1.0;
+
+  const diffTransparency =
+    Math.abs(diff) > 0 ? Math.min((Math.abs(diffRatio) / 2 + 0.5) * 0.8, 0.8) : 0;
+
+  const newSpanColor = isDarkMode ? '#B3BAE1' : '#929FEB';
+  const increasedSpanColor = isDarkMode
+    ? `rgba(255, 177, 204, ${diffTransparency})`
+    : `rgba(254, 153, 187, ${diffTransparency})`;
+  const reducedSpanColor = isDarkMode
+    ? `rgba(103, 158, 92, ${diffTransparency})`
+    : `rgba(164, 214, 153, ${diffTransparency})`;
+
+  const color = diff === 0 ? newSpanColor : diff > 0 ? increasedSpanColor : reducedSpanColor;
+
+  return color;
+}
+
 export function IcicleGraphNodes({
   data,
   x,
@@ -139,6 +142,8 @@ export function IcicleGraphNodes({
   setCurPath,
   curPath,
 }: IcicleGraphNodesProps) {
+  const isDarkMode = useAppSelector(selectDarkMode);
+
   const nodes =
     curPath.length === 0 ? data : data.filter(d => d != null && curPath[0] === nodeLabel(d));
 
@@ -147,23 +152,25 @@ export function IcicleGraphNodes({
   return (
     <g transform={`translate(${x}, ${y})`}>
       {nodes.map((d, i) => {
-        const start = nodes.slice(0, i).reduce((sum, d) => sum + d.cumulative, 0);
+        const cumulative = parseFloat(d.cumulative);
+        const diff = parseFloat(d.diff);
+        const start = nodes.slice(0, i).reduce((sum, d) => sum + parseFloat(d.cumulative), 0);
 
         const nextCurPath = curPath.length === 0 ? [] : curPath.slice(1);
         const width =
           nextCurPath.length > 0 || (nextCurPath.length === 0 && curPath.length === 1)
             ? totalWidth
-            : xScale(d.cumulative);
+            : xScale(cumulative);
 
         if (width <= 1) {
           return <></>;
         }
 
-        const key = `${level}-${i}`;
         const name = nodeLabel(d);
+        const key = `${level}-${i}`;
         const nextPath = path.concat([name]);
 
-        const color = diffColor(d.diff === undefined ? 0 : d.diff, d.cumulative);
+        const color = diffColor(diff, cumulative, isDarkMode);
 
         const onClick = () => {
           setCurPath(nextPath);
@@ -172,7 +179,7 @@ export function IcicleGraphNodes({
         const xStart = xScale(start);
         const newXScale =
           nextCurPath.length === 0 && curPath.length === 1
-            ? scaleLinear().domain([0, d.cumulative]).range([0, totalWidth])
+            ? scaleLinear().domain([0, cumulative]).range([0, totalWidth])
             : xScale;
 
         const onMouseEnter = () => setHoveringNode(d);
@@ -196,7 +203,7 @@ export function IcicleGraphNodes({
             {data !== undefined && data.length > 0 && (
               <IcicleGraphNodes
                 key={`node-${key}`}
-                data={d.childrenList}
+                data={d.children}
                 x={xStart}
                 y={RowHeight}
                 xScale={newXScale}
@@ -223,14 +230,14 @@ interface FlamegraphTooltipProps {
   y: number;
   unit: string;
   total: number;
-  hoveringNode: FlamegraphNode.AsObject | FlamegraphRootNode.AsObject | undefined;
+  hoveringNode: FlamegraphNode | FlamegraphRootNode | undefined;
   contextElement: Element | null;
 }
 
 const FlamegraphNodeTooltipTableRows = ({
   hoveringNode,
 }: {
-  hoveringNode: FlamegraphNode.AsObject;
+  hoveringNode: FlamegraphNode;
 }): JSX.Element => {
   if (hoveringNode.meta === undefined) return <></>;
 
@@ -338,20 +345,21 @@ export const FlamegraphTooltip = ({
 
   if (hoveringNode === undefined || hoveringNode == null) return <></>;
 
-  const diff = hoveringNode.diff === undefined ? 0 : hoveringNode.diff;
-  const prevValue = hoveringNode.cumulative - diff;
+  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.AsObject;
+  const hoveringFlamegraphNode = hoveringNode as FlamegraphNode;
   const metaRows =
     hoveringFlamegraphNode.meta === undefined ? (
       <></>
     ) : (
-      <FlamegraphNodeTooltipTableRows hoveringNode={hoveringNode as FlamegraphNode.AsObject} />
+      <FlamegraphNodeTooltipTableRows hoveringNode={hoveringNode as FlamegraphNode} />
     );
 
   return (
@@ -369,13 +377,13 @@ export const FlamegraphTooltip = ({
                     <p>root</p>
                   ) : (
                     <>
-                      {hoveringFlamegraphNode.meta.pb_function !== undefined &&
-                      hoveringFlamegraphNode.meta.pb_function.name !== '' ? (
-                        <p>{hoveringFlamegraphNode.meta.pb_function.name}</p>
+                      {hoveringFlamegraphNode.meta.function !== undefined &&
+                      hoveringFlamegraphNode.meta.function.name !== '' ? (
+                        <p>{hoveringFlamegraphNode.meta.function.name}</p>
                       ) : (
                         <>
                           {hoveringFlamegraphNode.meta.location !== undefined &&
-                          hoveringFlamegraphNode.meta.location.address !== 0 ? (
+                          parseInt(hoveringFlamegraphNode.meta.location.address, 10) !== 0 ? (
                             <p>
                               {'0x' + hoveringFlamegraphNode.meta.location.address.toString(16)}
                             </p>
@@ -393,8 +401,8 @@ export const FlamegraphTooltip = ({
                       <tr>
                         <td className="w-1/5">Cumulative</td>
                         <td className="w-4/5">
-                          {valueFormatter(hoveringNode.cumulative, unit, 2)} (
-                          {((hoveringNode.cumulative * 100) / total).toFixed(2)}%)
+                          {valueFormatter(hoveringNodeCumulative, unit, 2)} (
+                          {((hoveringNodeCumulative * 100) / total).toFixed(2)}%)
                         </td>
                       </tr>
                       {hoveringNode.diff !== undefined && diff !== 0 && (
@@ -417,15 +425,13 @@ export const FlamegraphTooltip = ({
 };
 
 interface IcicleGraphRootNodeProps {
-  node: FlamegraphRootNode.AsObject;
+  node: FlamegraphRootNode;
   xScale: (value: number) => number;
   total: number;
   totalWidth: number;
   curPath: string[];
   setCurPath: (path: string[]) => void;
-  setHoveringNode: (
-    node: FlamegraphNode.AsObject | FlamegraphRootNode.AsObject | undefined
-  ) => void;
+  setHoveringNode: (node: FlamegraphNode | FlamegraphRootNode | undefined) => void;
 }
 
 export function IcicleGraphRootNode({
@@ -437,7 +443,11 @@ export function IcicleGraphRootNode({
   setCurPath,
   curPath,
 }: IcicleGraphRootNodeProps) {
-  const color = diffColor(node.diff === undefined ? 0 : node.diff, node.cumulative);
+  const isDarkMode = useAppSelector(selectDarkMode);
+
+  const cumulative = parseFloat(node.cumulative);
+  const diff = parseFloat(node.diff);
+  const color = diffColor(diff, cumulative, isDarkMode);
 
   const onClick = () => setCurPath([]);
   const onMouseEnter = () => setHoveringNode(node);
@@ -459,7 +469,7 @@ export function IcicleGraphRootNode({
         curPath={curPath}
       />
       <MemoizedIcicleGraphNodes
-        data={node.childrenList}
+        data={node.children}
         x={0}
         y={RowHeight}
         xScale={xScale}
@@ -478,15 +488,22 @@ export function IcicleGraphRootNode({
 const MemoizedIcicleGraphRootNode = React.memo(IcicleGraphRootNode);
 
 interface IcicleGraphProps {
-  graph: Flamegraph.AsObject;
+  graph: Flamegraph;
+  sampleUnit: string;
   width?: number;
   curPath: string[];
   setCurPath: (path: string[]) => void;
 }
 
-export default function IcicleGraph({graph, width, setCurPath, curPath}: IcicleGraphProps) {
+export default function IcicleGraph({
+  graph,
+  width,
+  setCurPath,
+  curPath,
+  sampleUnit,
+}: IcicleGraphProps) {
   const [hoveringNode, setHoveringNode] = useState<
-    FlamegraphNode.AsObject | FlamegraphRootNode.AsObject | undefined
+    FlamegraphNode | FlamegraphRootNode | undefined
   >();
   const [pos, setPos] = useState([0, 0]);
   const [height, setHeight] = useState(0);
@@ -509,19 +526,26 @@ export default function IcicleGraph({graph, width, setCurPath, curPath}: IcicleG
     throttledSetPos([rel[0], rel[1]]);
   };
 
-  const xScale = scaleLinear().domain([0, graph.total]).range([0, width]);
+  const total = parseFloat(graph.total);
+  const xScale = scaleLinear().domain([0, total]).range([0, width]);
 
   return (
     <div onMouseLeave={() => setHoveringNode(undefined)}>
       <FlamegraphTooltip
-        unit={graph.unit}
-        total={graph.total}
+        unit={sampleUnit}
+        total={total}
         x={pos[0]}
         y={pos[1]}
         hoveringNode={hoveringNode}
         contextElement={svg.current}
       />
-      <svg width={width} height={height} onMouseMove={onMouseMove} ref={svg}>
+      <svg
+        className="font-robotoMono"
+        width={width}
+        height={height}
+        onMouseMove={onMouseMove}
+        ref={svg}
+      >
         <g ref={ref}>
           <MemoizedIcicleGraphRootNode
             node={graph.root}
@@ -529,7 +553,7 @@ export default function IcicleGraph({graph, width, setCurPath, curPath}: IcicleG
             curPath={curPath}
             setCurPath={setCurPath}
             xScale={xScale}
-            total={graph.total}
+            total={total}
             totalWidth={width}
           />
         </g>

package/src/ProfileIcicleGraph.tsx

@@ -3,17 +3,32 @@ import {Flamegraph} from '@parca/client';
 
 interface ProfileIcicleGraphProps {
   width?: number;
-  graph: Flamegraph.AsObject | undefined;
+  graph: Flamegraph | undefined;
+  sampleUnit: string;
   curPath: string[] | [];
   setNewCurPath: (path: string[]) => void;
 }
 
-const ProfileIcicleGraph = ({width, graph, curPath, setNewCurPath}: ProfileIcicleGraphProps) => {
+const ProfileIcicleGraph = ({
+  width,
+  graph,
+  curPath,
+  setNewCurPath,
+  sampleUnit,
+}: ProfileIcicleGraphProps) => {
   if (graph === undefined) return <div>no data...</div>;
   const total = graph.total;
-  if (total === 0) return <>Profile has no samples</>;
+  if (parseFloat(total) === 0) return <>Profile has no samples</>;
 
-  return <IcicleGraph width={width} graph={graph} curPath={curPath} setCurPath={setNewCurPath} />;
+  return (
+    <IcicleGraph
+      width={width}
+      graph={graph}
+      curPath={curPath}
+      setCurPath={setNewCurPath}
+      sampleUnit={sampleUnit}
+    />
+  );
 };
 
 export default ProfileIcicleGraph;

package/src/ProfileSource.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
 import {formatDate} from '@parca/functions';
-import {Query} from '@parca/parser';
+import {Query, ProfileType} from '@parca/parser';
 import {
   Label,
   QueryRequest,
+  QueryRequest_Mode,
+  QueryRequest_ReportType,
   ProfileDiffSelection,
-  SingleProfile,
-  MergeProfile,
-  DiffProfile,
+  ProfileDiffSelection_Mode,
+  Timestamp,
 } from '@parca/client';
-import {Timestamp} from 'google-protobuf/google/protobuf/timestamp_pb';
 
 export interface ProfileSource {
   QueryRequest: () => QueryRequest;
+  ProfileType: () => ProfileType;
   DiffSelection: () => ProfileDiffSelection;
   Describe: () => JSX.Element;
   toString: () => string;
@@ -42,8 +43,8 @@ export function SuffixParams(params: {[key: string]: any}, suffix: string): {[ke
   );
 }
 
-export function ParseLabels(labels: string[]): Label.AsObject[] {
-  return labels.map(function (labelString): Label.AsObject {
+export function ParseLabels(labels: string[]): Label[] {
+  return labels.map(function (labelString): Label {
     const parts = labelString.split('=', 2);
     return {name: parts[0], value: parts[1]};
   });
@@ -55,6 +56,7 @@ export function ProfileSelectionFromParams(
   to: string | undefined,
   merge: string | undefined,
   labels: string[] | undefined,
+  profileName: string | undefined,
   time: string | undefined
 ): ProfileSelection | null {
   if (
@@ -66,28 +68,30 @@ export function ProfileSelectionFromParams(
   ) {
     return new MergedProfileSelection(parseInt(from), parseInt(to), expression);
   }
-  if (labels !== undefined && time !== undefined) {
-    return new SingleProfileSelection(ParseLabels(labels), parseInt(time));
+  if (labels !== undefined && time !== undefined && profileName !== undefined) {
+    return new SingleProfileSelection(profileName, ParseLabels(labels), parseInt(time));
   }
   return null;
 }
 
 export class SingleProfileSelection implements ProfileSelection {
-  labels: Label.AsObject[];
+  profileName: string;
+  labels: Label[];
   time: number;
 
-  constructor(labels: Label.AsObject[], time: number) {
+  constructor(profileName: string, labels: Label[], time: number) {
+    this.profileName = profileName;
     this.labels = labels;
     this.time = time;
   }
 
   ProfileName(): string {
-    const label = this.labels.find(e => e.name === '__name__');
-    return label !== undefined ? label.value : '';
+    return this.profileName;
   }
 
   HistoryParams(): {[key: string]: any} {
     return {
+      profile_name: this.profileName,
       labels: this.labels.map(label => `${label.name}=${label.value}`),
       time: this.time,
     };
@@ -98,7 +102,7 @@ export class SingleProfileSelection implements ProfileSelection {
   }
 
   ProfileSource(): ProfileSource {
-    return new SingleProfileSource(this.labels, this.time);
+    return new SingleProfileSource(this.profileName, this.labels, this.time);
   }
 }
 
@@ -136,50 +140,58 @@ export class MergedProfileSelection implements ProfileSelection {
 }
 
 export class SingleProfileSource implements ProfileSource {
-  labels: Label.AsObject[];
+  profName: string;
+  labels: Label[];
   time: number;
 
-  constructor(labels: Label.AsObject[], time: number) {
+  constructor(profileName: string, labels: Label[], time: number) {
+    this.profName = profileName;
     this.labels = labels;
     this.time = time;
   }
 
   query(): string {
-    const seriesQuery = this.labels.reduce(function (agg: string, label: Label.AsObject) {
-      return agg + `${label.name}="${label.value}",`;
-    }, '{');
+    const seriesQuery =
+      this.profName +
+      this.labels.reduce(function (agg: string, label: Label) {
+        return agg + `${label.name}="${label.value}",`;
+      }, '{');
     return seriesQuery + '}';
   }
 
   DiffSelection(): ProfileDiffSelection {
-    const sel = new ProfileDiffSelection();
-    sel.setMode(ProfileDiffSelection.Mode.MODE_SINGLE_UNSPECIFIED);
-
-    const singleProfile = new SingleProfile();
-    const ts = new Timestamp();
-    ts.fromDate(new Date(this.time));
-    singleProfile.setTime(ts);
-    singleProfile.setQuery(this.query());
-    sel.setSingle(singleProfile);
-
-    return sel;
+    return {
+      options: {
+        oneofKind: 'single',
+        single: {
+          time: Timestamp.fromDate(new Date(this.time)),
+          query: this.query(),
+        },
+      },
+      mode: ProfileDiffSelection_Mode.SINGLE_UNSPECIFIED,
+    };
   }
 
   QueryRequest(): QueryRequest {
-    const req = new QueryRequest();
-    req.setMode(QueryRequest.Mode.MODE_SINGLE_UNSPECIFIED);
-    const singleQueryRequest = new SingleProfile();
-    const ts = new Timestamp();
-    ts.fromDate(new Date(this.time));
-    singleQueryRequest.setTime(ts);
-    singleQueryRequest.setQuery(this.query());
-    req.setSingle(singleQueryRequest);
-    return req;
+    return {
+      options: {
+        oneofKind: 'single',
+        single: {
+          time: Timestamp.fromDate(new Date(this.time)),
+          query: this.query(),
+        },
+      },
+      reportType: QueryRequest_ReportType.FLAMEGRAPH_UNSPECIFIED,
+      mode: QueryRequest_Mode.SINGLE_UNSPECIFIED,
+    };
+  }
+
+  ProfileType(): ProfileType {
+    return ProfileType.fromString(this.profName);
   }
 
   profileName(): string {
-    const label = this.labels.find(e => e.name === '__name__');
-    return label !== undefined ? label.value : '';
+    return this.profName;
   }
 
   Describe(): JSX.Element {
@@ -208,8 +220,8 @@ export class SingleProfileSource implements ProfileSource {
 
   stringLabels(): string[] {
     return this.labels
-      .filter((label: Label.AsObject) => label.name !== '__name__')
-      .map((label: Label.AsObject) => `${label.name}=${label.value}`);
+      .filter((label: Label) => label.name !== '__name__')
+      .map((label: Label) => `${label.name}=${label.value}`);
   }
 
   toString(): string {
@@ -229,19 +241,25 @@ export class ProfileDiffSource implements ProfileSource {
   }
 
   DiffSelection(): ProfileDiffSelection {
-    return new ProfileDiffSelection();
+    throw new Error('Method not implemented.');
   }
 
   QueryRequest(): QueryRequest {
-    const req = new QueryRequest();
-    req.setMode(QueryRequest.Mode.MODE_DIFF);
-    const diffQueryRequest = new DiffProfile();
-
-    diffQueryRequest.setA(this.a.DiffSelection());
-    diffQueryRequest.setB(this.b.DiffSelection());
+    return {
+      options: {
+        oneofKind: 'diff',
+        diff: {
+          a: this.a.DiffSelection(),
+          b: this.b.DiffSelection(),
+        },
+      },
+      reportType: QueryRequest_ReportType.FLAMEGRAPH_UNSPECIFIED,
+      mode: QueryRequest_Mode.DIFF,
+    };
+  }
 
-    req.setDiff(diffQueryRequest);
-    return req;
+  ProfileType(): ProfileType {
+    return this.a.ProfileType();
   }
 
   Describe(): JSX.Element {
@@ -269,45 +287,36 @@ export class MergedProfileSource implements ProfileSource {
   }
 
   DiffSelection(): ProfileDiffSelection {
-    const sel = new ProfileDiffSelection();
-    sel.setMode(ProfileDiffSelection.Mode.MODE_MERGE);
-
-    const mergeProfile = new MergeProfile();
-
-    const startTs = new Timestamp();
-    startTs.fromDate(new Date(this.from));
-    mergeProfile.setStart(startTs);
-
-    const endTs = new Timestamp();
-    endTs.fromDate(new Date(this.to));
-    mergeProfile.setEnd(endTs);
-
-    mergeProfile.setQuery(this.query);
-
-    sel.setMerge(mergeProfile);
-
-    return sel;
+    return {
+      options: {
+        oneofKind: 'merge',
+        merge: {
+          start: Timestamp.fromDate(new Date(this.from)),
+          end: Timestamp.fromDate(new Date(this.to)),
+          query: this.query,
+        },
+      },
+      mode: ProfileDiffSelection_Mode.MERGE,
+    };
   }
 
   QueryRequest(): QueryRequest {
-    const req = new QueryRequest();
-    req.setMode(QueryRequest.Mode.MODE_MERGE);
-
-    const mergeQueryRequest = new MergeProfile();
-
-    const startTs = new Timestamp();
-    startTs.fromDate(new Date(this.from));
-    mergeQueryRequest.setStart(startTs);
-
-    const endTs = new Timestamp();
-    endTs.fromDate(new Date(this.to));
-    mergeQueryRequest.setEnd(endTs);
-
-    mergeQueryRequest.setQuery(this.query);
-
-    req.setMerge(mergeQueryRequest);
+    return {
+      options: {
+        oneofKind: 'merge',
+        merge: {
+          start: Timestamp.fromDate(new Date(this.from)),
+          end: Timestamp.fromDate(new Date(this.to)),
+          query: this.query,
+        },
+      },
+      reportType: QueryRequest_ReportType.FLAMEGRAPH_UNSPECIFIED,
+      mode: QueryRequest_Mode.MERGE,
+    };
+  }
 
-    return req;
+  ProfileType(): ProfileType {
+    return ProfileType.fromString(Query.parse(this.query).profileName());
   }
 
   Describe(): JSX.Element {

package/src/ProfileView.tsx

@@ -1,12 +1,14 @@
 import React, {useEffect, useState} from 'react';
 import {CalcWidth} from '@parca/dynamicsize';
 import {parseParams} from '@parca/functions';
-import {QueryRequest, QueryResponse, QueryServiceClient, ServiceError} from '@parca/client';
+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 ProfileIcicleGraph from './ProfileIcicleGraph';
 import {ProfileSource} from './ProfileSource';
+import {useQuery} from './useQuery';
 import TopTable from './TopTable';
 
 import './ProfileView.styles.css';
@@ -20,12 +22,6 @@ interface ProfileViewProps {
   compare?: boolean;
 }
 
-export interface IQueryResult {
-  isLoading: boolean;
-  response: QueryResponse | null;
-  error: ServiceError | null;
-}
-
 function arrayEquals(a, b): boolean {
   return (
     Array.isArray(a) &&
@@ -35,41 +31,6 @@ function arrayEquals(a, b): boolean {
   );
 }
 
-export const useQuery = (
-  client: QueryServiceClient,
-  profileSource: ProfileSource
-): IQueryResult => {
-  const [result, setResult] = useState<IQueryResult>({
-    isLoading: false,
-    response: null,
-    error: null,
-  });
-  const metadata = useGrpcMetadata();
-
-  useEffect(() => {
-    setResult({
-      ...result,
-      isLoading: true,
-    });
-    const req = profileSource.QueryRequest();
-    req.setReportType(QueryRequest.ReportType.REPORT_TYPE_FLAMEGRAPH_UNSPECIFIED);
-
-    client.query(
-      req,
-      metadata,
-      (error: ServiceError | null, responseMessage: QueryResponse | null) => {
-        setResult({
-          isLoading: false,
-          response: responseMessage,
-          error: error,
-        });
-      }
-    );
-  }, [client, profileSource]);
-
-  return result;
-};
-
 export const ProfileView = ({
   queryClient,
   profileSource,
@@ -79,7 +40,11 @@ export const ProfileView = ({
   const currentViewFromURL = router.currentProfileView as string;
   const [curPath, setCurPath] = useState<string[]>([]);
   const [isLoaderVisible, setIsLoaderVisible] = useState<boolean>(false);
-  const {isLoading, response, error} = useQuery(queryClient, profileSource);
+  const {isLoading, response, error} = useQuery(
+    queryClient,
+    profileSource,
+    QueryRequest_ReportType.FLAMEGRAPH_UNSPECIFIED
+  );
   const [currentView, setCurrentView] = useState<string | undefined>(currentViewFromURL);
   const grpcMetadata = useGrpcMetadata();
 
@@ -94,7 +59,7 @@ export const ProfileView = ({
       setIsLoaderVisible(false);
     }
     return () => clearTimeout(showLoaderTimeout);
-  }, [isLoading]);
+  }, [isLoading, isLoaderVisible]);
 
   if (isLoaderVisible) {
     return (
@@ -132,40 +97,35 @@ export const ProfileView = ({
     );
   }
 
-  if (error) {
+  if (error !== null) {
     return <div className="p-10 flex justify-center">An error occurred: {error.message}</div>;
   }
 
   const downloadPProf = (e: React.MouseEvent<HTMLElement>) => {
     e.preventDefault();
 
-    const req = profileSource.QueryRequest();
-    req.setReportType(QueryRequest.ReportType.REPORT_TYPE_PPROF);
+    const req = {
+      ...profileSource.QueryRequest(),
+      reportType: QueryRequest_ReportType.PPROF,
+    };
 
-    queryClient.query(
-      req,
-      grpcMetadata,
-      (
-        error: ServiceError | null,
-        responseMessage: parca_query_v1alpha1_query_pb.QueryResponse | null
-      ) => {
-        if (error != null) {
-          console.error('Error while querying', error);
+    queryClient
+      .query(req, grpcMetadata)
+      .response.then(response => {
+        if (response.report.oneofKind !== 'pprof') {
+          console.log('Expected pprof report, got:', response.report.oneofKind);
           return;
         }
-        if (responseMessage !== null) {
-          const bytes = responseMessage.getPprof();
-          const blob = new Blob([bytes], {type: 'application/octet-stream'});
-
-          const link = document.createElement('a');
-          link.href = window.URL.createObjectURL(blob);
-          link.download = 'profile.pb.gz';
-          link.click();
-        } else {
-          console.error(error);
-        }
-      }
-    );
+        const blob = new Blob([response.report.pprof], {type: 'application/octet-stream'});
+
+        const link = document.createElement('a');
+        link.href = window.URL.createObjectURL(blob);
+        link.download = 'profile.pb.gz';
+        link.click();
+      })
+      .catch(error => {
+        console.error('Error while querying', error);
+      });
   };
 
   const resetIcicleGraph = () => setCurPath([]);
@@ -177,13 +137,15 @@ export const ProfileView = ({
   };
 
   const switchProfileView = (view: string) => {
-    if (!navigateTo) return;
+    if (navigateTo === undefined) return;
 
     setCurrentView(view);
 
     navigateTo('/', {...router, ...{currentProfileView: view}});
   };
 
+  const sampleUnit = profileSource.ProfileType().sampleUnit;
+
   return (
     <>
       <div className="py-3">
@@ -204,7 +166,7 @@ export const ProfileView = ({
                     color="neutral"
                     onClick={resetIcicleGraph}
                     disabled={curPath.length === 0}
-                    additionalClasses="whitespace-nowrap text-ellipsis"
+                    className="whitespace-nowrap text-ellipsis"
                   >
                     Reset View
                   </Button>
@@ -212,7 +174,7 @@ export const ProfileView = ({
 
                 <Button
                   color={`${currentView === 'table' ? 'primary' : 'neutral'}`}
-                  additionalClasses={`rounded-tr-none rounded-br-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons`}
+                  className="rounded-tr-none rounded-br-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons"
                   onClick={() => switchProfileView('table')}
                 >
                   Table
@@ -220,7 +182,7 @@ export const ProfileView = ({
 
                 <Button
                   color={`${currentView === 'both' ? 'primary' : 'neutral'}`}
-                  additionalClasses={`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="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
@@ -228,7 +190,7 @@ export const ProfileView = ({
 
                 <Button
                   color={`${currentView === 'icicle' ? 'primary' : 'neutral'}`}
-                  additionalClasses={`rounded-tl-none rounded-bl-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons`}
+                  className="rounded-tl-none rounded-bl-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons"
                   onClick={() => switchProfileView('icicle')}
                 >
                   Icicle Graph
@@ -237,28 +199,39 @@ export const ProfileView = ({
             </div>
 
             <div className="flex space-x-4 justify-between">
-              {currentView === 'icicle' && (
-                <div className="w-full">
-                  <CalcWidth throttle={300} delay={2000}>
-                    <ProfileIcicleGraph
-                      curPath={curPath}
-                      setNewCurPath={setNewCurPath}
-                      graph={response?.getFlamegraph()?.toObject()}
-                    />
-                  </CalcWidth>
-                </div>
-              )}
+              {currentView === 'icicle' &&
+                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>
+                  </div>
+                )}
 
               {currentView === 'table' && (
                 <div className="w-full">
-                  <TopTable queryClient={queryClient} profileSource={profileSource} />
+                  <TopTable
+                    queryClient={queryClient}
+                    profileSource={profileSource}
+                    sampleUnit={sampleUnit}
+                  />
                 </div>
               )}
 
               {currentView === 'both' && (
                 <>
                   <div className="w-1/2">
-                    <TopTable queryClient={queryClient} profileSource={profileSource} />
+                    <TopTable
+                      queryClient={queryClient}
+                      profileSource={profileSource}
+                      sampleUnit={sampleUnit}
+                    />
                   </div>
 
                   <div className="w-1/2">
@@ -266,7 +239,12 @@ export const ProfileView = ({
                       <ProfileIcicleGraph
                         curPath={curPath}
                         setNewCurPath={setNewCurPath}
-                        graph={response?.getFlamegraph()?.toObject()}
+                        graph={
+                          response?.report.oneofKind === 'flamegraph'
+                            ? response.report.flamegraph
+                            : undefined
+                        }
+                        sampleUnit={sampleUnit}
                       />
                     </CalcWidth>
                   </div>

package/src/TopTable.tsx

@@ -1,27 +1,21 @@
 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 {
-  QueryRequest,
   QueryResponse,
   QueryServiceClient,
-  ServiceError,
+  QueryRequest_ReportType,
   TopNodeMeta,
 } from '@parca/client';
-import * as parca_query_v1alpha1_query_pb from '@parca/client/src/parca/query/v1alpha1/query_pb';
-import {getLastItem, valueFormatter} from '@parca/functions';
-import {useGrpcMetadata} from '@parca/components';
-import {useAppSelector, selectCompareMode} from '@parca/store';
-
 import {ProfileSource} from './ProfileSource';
+import {useQuery} from './useQuery';
 import './TopTable.styles.css';
 
 interface ProfileViewProps {
   queryClient: QueryServiceClient;
   profileSource: ProfileSource;
-}
-
-export interface IQueryResult {
-  response: QueryResponse | null;
-  error: ServiceError | null;
+  sampleUnit: string;
 }
 
 const Arrow = ({direction}: {direction: string | undefined}) => {
@@ -47,11 +41,12 @@ const useSortableData = (
     config
   );
 
-  const rawTableReport = response?.toObject().top?.listList;
+  const rawTableReport =
+    response !== null && response.report.oneofKind === 'top' ? response.report.top.list : [];
 
-  const items = rawTableReport?.map(node => ({
+  const items = rawTableReport.map(node => ({
     ...node,
-    name: node.meta?.pb_function?.name,
+    name: node.meta?.function?.name,
   }));
 
   const sortedItems = React.useMemo(() => {
@@ -83,71 +78,43 @@ const useSortableData = (
   return {items: sortedItems, requestSort, sortConfig};
 };
 
-export const useQuery = (
-  client: QueryServiceClient,
-  profileSource: ProfileSource
-): IQueryResult => {
-  const [result, setResult] = useState<IQueryResult>({
-    response: null,
-    error: null,
-  });
-  const metadata = useGrpcMetadata();
-
-  useEffect(() => {
-    const req = profileSource.QueryRequest();
-    req.setReportType(QueryRequest.ReportType.REPORT_TYPE_TOP);
-
-    client.query(
-      req,
-      metadata,
-      (
-        error: ServiceError | null,
-        responseMessage: parca_query_v1alpha1_query_pb.QueryResponse | null
-      ) => {
-        setResult({
-          response: responseMessage,
-          error: error,
-        });
-      }
-    );
-  }, [client, profileSource]);
-
-  return result;
-};
-
-export const RowLabel = (meta: TopNodeMeta.AsObject | undefined): string => {
+export const RowLabel = (meta: TopNodeMeta | undefined): string => {
   if (meta === undefined) return '<unknown>';
   const mapping = `${
     meta?.mapping?.file !== undefined && meta?.mapping?.file !== ''
       ? `[${getLastItem(meta.mapping.file)}]`
       : ''
   }`;
-  if (meta.pb_function?.name !== undefined && meta.pb_function?.name !== '')
-    return `${mapping} ${meta.pb_function.name}`;
+  if (meta.function?.name !== undefined && meta.function?.name !== '')
+    return `${mapping} ${meta.function.name}`;
 
+  const addr = parseInt(meta.location?.address ?? '0', 10);
   const address = `${
-    meta.location?.address !== undefined && meta.location?.address !== 0
-      ? `0x${meta.location.address.toString(16)}`
-      : ''
+    meta.location?.address !== undefined && addr !== 0 ? `0x${addr.toString(16)}` : ''
   }`;
   const fallback = `${mapping} ${address}`;
 
   return fallback === '' ? '<unknown>' : fallback;
 };
 
-export const TopTable = ({queryClient, profileSource}: ProfileViewProps): JSX.Element => {
-  const {response, error} = useQuery(queryClient, profileSource);
+export const TopTable = ({
+  queryClient,
+  profileSource,
+  sampleUnit,
+}: ProfileViewProps): JSX.Element => {
+  const {response, error} = useQuery(queryClient, profileSource, QueryRequest_ReportType.TOP);
   const {items, requestSort, sortConfig} = useSortableData(response);
 
   const compareMode = useAppSelector(selectCompareMode);
 
-  const unit = response?.toObject().top?.unit as string;
+  const unit = sampleUnit;
 
   if (error != null) {
     return <div className="p-10 flex justify-center">An error occurred: {error.message}</div>;
   }
 
-  const total = response?.toObject().top?.listList.length;
+  const total =
+    response !== null && response.report.oneofKind === 'top' ? response.report.top.list.length : 0;
   if (total === 0) return <>Profile has no samples</>;
 
   const getClassNamesFor = name => {
@@ -167,7 +134,7 @@ export const TopTable = ({queryClient, profileSource}: ProfileViewProps): JSX.El
 
   return (
     <>
-      <div className="w-full">
+      <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">
           <thead className="bg-gray-50 dark:bg-gray-800">
             <tr>

package/src/useQuery.tsx

@@ -0,0 +1,42 @@
+import React, {useEffect, useState} from 'react';
+import {QueryServiceClient, QueryResponse, QueryRequest_ReportType} from '@parca/client';
+import {RpcError} from '@protobuf-ts/runtime-rpc';
+import {useGrpcMetadata} from '@parca/components';
+import {ProfileSource} from './ProfileSource';
+
+export interface IQueryResult {
+  response: QueryResponse | null;
+  error: RpcError | null;
+  isLoading: boolean;
+}
+
+export const useQuery = (
+  client: QueryServiceClient,
+  profileSource: ProfileSource,
+  reportType: QueryRequest_ReportType
+): IQueryResult => {
+  const [result, setResult] = useState<IQueryResult>({
+    response: null,
+    error: null,
+    isLoading: false,
+  });
+  const metadata = useGrpcMetadata();
+
+  useEffect(() => {
+    setResult({
+      response: null,
+      error: null,
+      isLoading: true,
+    });
+    const req = profileSource.QueryRequest();
+    req.reportType = reportType;
+
+    const call = client.query(req, metadata);
+
+    call.response
+      .then(response => setResult({response: response, error: null, isLoading: false}))
+      .catch(error => setResult({error: error, response: null, isLoading: false}));
+  }, [client, profileSource, metadata, reportType]);
+
+  return result;
+};