@parca/profile 0.16.228 → 0.16.229

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.229](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.228...@parca/profile@0.16.229) (2023-08-23)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.228](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.227...@parca/profile@0.16.228) (2023-08-23)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileView/index.d.ts

@@ -1,5 +1,5 @@
-import { Table } from 'apache-arrow';
-import { Callgraph as CallgraphType, Flamegraph, QueryServiceClient, Source, Top } from '@parca/client';
+import { Table as ArrowTable } from 'apache-arrow';
+import { Callgraph as CallgraphType, Flamegraph, QueryServiceClient, Source, TableArrow, Top } from '@parca/client';
 import { ProfileSource } from '../ProfileSource';
 type NavigateFunction = (path: string, queryParams: any, options?: {
     replace?: boolean;
@@ -7,13 +7,14 @@ type NavigateFunction = (path: string, queryParams: any, options?: {
 export interface FlamegraphData {
     loading: boolean;
     data?: Flamegraph;
-    table?: Table<any>;
+    table?: ArrowTable<any>;
     total?: bigint;
     filtered?: bigint;
     error?: any;
 }
 export interface TopTableData {
     loading: boolean;
+    arrow?: TableArrow;
     data?: Top;
     total?: bigint;
     filtered?: bigint;

package/dist/ProfileView/index.js

@@ -25,7 +25,7 @@ import { Callgraph } from '../';
 import { jsonToDot } from '../Callgraph/utils';
 import ProfileIcicleGraph from '../ProfileIcicleGraph';
 import { SourceView } from '../SourceView';
-import { TopTable } from '../TopTable';
+import Table from '../Table';
 import ProfileShareButton from '../components/ProfileShareButton';
 import useDelayedLoader from '../useDelayedLoader';
 import FilterByFunctionButton from './FilterByFunctionButton';
@@ -141,7 +141,7 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
                     dimensions?.width !== undefined ? (_jsx(Callgraph, { data: callgraphData.data, svgString: callgraphSVG, sampleUnit: sampleUnit, width: isHalfScreen ? dimensions?.width / 2 : dimensions?.width })) : (_jsx(_Fragment, {}));
             }
             case 'table': {
-                return topTableData != null ? (_jsx(TopTable, { loading: topTableData.loading, data: topTableData.data, sampleUnit: sampleUnit, navigateTo: navigateTo, setActionButtons: setActionButtons, currentSearchString: currentSearchString })) : (_jsx(_Fragment, {}));
+                return topTableData != null ? (_jsx(Table, { loading: topTableData.loading, data: topTableData.arrow?.record, sampleUnit: sampleUnit, navigateTo: navigateTo, setActionButtons: setActionButtons, currentSearchString: currentSearchString })) : (_jsx(_Fragment, {}));
             }
             case 'source': {
                 return sourceData != null ? (_jsx(SourceView, { loading: sourceData.loading, data: sourceData.data, total: total, filtered: filtered, setActionButtons: setActionButtons })) : (_jsx(_Fragment, {}));

package/dist/ProfileViewWithData.js

@@ -52,7 +52,7 @@ export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, })
         groupBy: groupByParam,
     });
     const { perf } = useParcaContext();
-    const { isLoading: topTableLoading, response: topTableResponse, error: topTableError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.TOP, {
+    const { isLoading: tableLoading, response: tableResponse, error: tableError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.TABLE_ARROW, {
         skip: !dashboardItems.includes('table'),
     });
     const { isLoading: callgraphLoading, response: callgraphResponse, error: callgraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.CALLGRAPH, {
@@ -68,8 +68,8 @@ export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, })
             flamegraphResponse?.report.oneofKind === 'flamegraphArrow') {
             perf?.markInteraction('Flamegraph render', flamegraphResponse.total);
         }
-        if (!topTableLoading && topTableResponse?.report.oneofKind === 'top') {
-            perf?.markInteraction('Top table render', topTableResponse.total);
+        if (!tableLoading && tableResponse?.report.oneofKind === 'tableArrow') {
+            perf?.markInteraction('table render', tableResponse.total);
         }
         if (!callgraphLoading && callgraphResponse?.report.oneofKind === 'callgraph') {
             perf?.markInteraction('Callgraph render', callgraphResponse.total);
@@ -82,8 +82,8 @@ export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, })
         flamegraphResponse,
         callgraphResponse,
         callgraphLoading,
-        topTableLoading,
-        topTableResponse,
+        tableLoading,
+        tableResponse,
         sourceLoading,
         sourceResponse,
         perf,
@@ -112,9 +112,9 @@ export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, })
         total = BigInt(flamegraphResponse.total);
         filtered = BigInt(flamegraphResponse.filtered);
     }
-    else if (topTableResponse !== null) {
-        total = BigInt(topTableResponse.total);
-        filtered = BigInt(topTableResponse.filtered);
+    else if (tableResponse !== null) {
+        total = BigInt(tableResponse.total);
+        filtered = BigInt(tableResponse.filtered);
     }
     else if (callgraphResponse !== null) {
         total = BigInt(callgraphResponse.total);
@@ -136,9 +136,11 @@ export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, })
             filtered: BigInt(flamegraphResponse?.filtered ?? '0'),
             error: flamegraphError,
         }, topTableData: {
-            loading: topTableLoading,
-            data: topTableResponse?.report.oneofKind === 'top' ? topTableResponse.report.top : undefined,
-            error: topTableError,
+            loading: tableLoading,
+            arrow: tableResponse?.report.oneofKind === 'tableArrow'
+                ? tableResponse.report.tableArrow
+                : undefined,
+            error: tableError,
         }, callgraphData: {
             loading: callgraphLoading,
             data: callgraphResponse?.report.oneofKind === 'callgraph'

package/dist/Table/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Table as ArrowTable } from 'apache-arrow';
+import { type NavigateFunction } from '@parca/utilities';
+interface TableProps {
+    data?: Uint8Array;
+    sampleUnit: string;
+    navigateTo?: NavigateFunction;
+    loading: boolean;
+    currentSearchString?: string;
+    setActionButtons?: (buttons: React.JSX.Element) => void;
+}
+export declare const Table: React.NamedExoticComponent<TableProps>;
+export declare const RowName: (table: ArrowTable, row: number) => string;
+export default Table;

package/dist/Table/index.js

@@ -0,0 +1,184 @@
+import { 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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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, { useCallback, useEffect, useMemo } from 'react';
+import { createColumnHelper } from '@tanstack/react-table';
+import { tableFromIPC } from 'apache-arrow';
+import { Button, Table as TableComponent, useURLState } from '@parca/components';
+import { getLastItem, isSearchMatch, parseParams, valueFormatter, } from '@parca/utilities';
+import { hexifyAddress } from '../utils';
+const columnHelper = createColumnHelper();
+export const Table = React.memo(function Table({ data, sampleUnit: unit, navigateTo, loading, currentSearchString, setActionButtons, }) {
+    const router = parseParams(window?.location.search);
+    const [rawDashboardItems] = useURLState({ param: 'dashboard_items' });
+    const [rawcompareMode] = useURLState({ param: 'compare_a' });
+    const compareMode = rawcompareMode === undefined ? false : rawcompareMode === 'true';
+    const dashboardItems = useMemo(() => {
+        if (rawDashboardItems !== undefined) {
+            return rawDashboardItems;
+        }
+        return ['icicle'];
+    }, [rawDashboardItems]);
+    const columns = useMemo(() => {
+        const cols = [
+            columnHelper.accessor('flat', {
+                header: () => 'Flat',
+                cell: info => valueFormatter(info.getValue(), unit, 2),
+                size: 80,
+                meta: {
+                    align: 'right',
+                },
+                invertSorting: true,
+            }),
+            columnHelper.accessor('flatDiff', {
+                header: () => 'Flat Diff',
+                cell: info => addPlusSign(valueFormatter(info.getValue(), unit, 2)),
+                size: 120,
+                meta: {
+                    align: 'right',
+                },
+                invertSorting: true,
+            }),
+            columnHelper.accessor('cumulative', {
+                header: () => 'Cumulative',
+                cell: info => valueFormatter(info.getValue(), unit, 2),
+                size: 130,
+                meta: {
+                    align: 'right',
+                },
+                invertSorting: true,
+            }),
+            columnHelper.accessor('cumulativeDiff', {
+                header: () => 'Cumulative Diff',
+                cell: info => addPlusSign(valueFormatter(info.getValue(), unit, 2)),
+                size: 170,
+                meta: {
+                    align: 'right',
+                },
+                invertSorting: true,
+            }),
+            columnHelper.accessor('name', {
+                header: () => _jsx("span", { className: "text-left", children: "Name" }),
+                cell: info => info.getValue(),
+            }),
+        ];
+        return cols;
+    }, [unit]);
+    const selectSpan = useCallback((span) => {
+        if (navigateTo != null) {
+            navigateTo('/', {
+                ...router,
+                ...{ search_string: span.trim() },
+            }, { replace: true });
+        }
+    }, [navigateTo, router]);
+    const onRowClick = useCallback((row) => {
+        // If there is only one dashboard item, we don't want to select a span
+        if (dashboardItems.length <= 1) {
+            return;
+        }
+        selectSpan(row.name);
+    }, [selectSpan, dashboardItems.length]);
+    const shouldHighlightRow = useCallback((row) => {
+        const name = row.name;
+        return isSearchMatch(currentSearchString, name);
+    }, [currentSearchString]);
+    const enableHighlighting = useMemo(() => {
+        return currentSearchString != null && currentSearchString?.length > 0;
+    }, [currentSearchString]);
+    const clearSelection = useCallback(() => {
+        if (navigateTo != null) {
+            navigateTo('/', {
+                ...router,
+                ...{ search_string: '' },
+            }, { replace: true });
+        }
+    }, [navigateTo, router]);
+    useEffect(() => {
+        if (setActionButtons === undefined) {
+            return;
+        }
+        setActionButtons(dashboardItems.length > 1 ? (_jsx(Button, { color: "neutral", onClick: clearSelection, className: "w-auto", variant: "neutral", disabled: currentSearchString === undefined || currentSearchString.length === 0, children: "Clear selection" })) : (_jsx(_Fragment, {})));
+    }, [dashboardItems, clearSelection, currentSearchString, setActionButtons]);
+    const initialSorting = useMemo(() => {
+        return [
+            {
+                id: compareMode ? 'flatDiff' : 'flat',
+                desc: false, // columns sorting are inverted - so this is actually descending
+            },
+        ];
+    }, [compareMode]);
+    const columnVisibility = useMemo(() => {
+        // TODO: Make this configurable via the UI and add more columns.
+        return {
+            flat: true,
+            flatDiff: compareMode,
+            cumulative: true,
+            cumulativeDiff: compareMode,
+            name: true,
+        };
+    }, [compareMode]);
+    if (loading)
+        return _jsx(_Fragment, { children: "Loading..." });
+    if (data === undefined)
+        return _jsx(_Fragment, { children: "Profile has no samples" });
+    const table = tableFromIPC(data);
+    const flatColumn = table.getChild('flat');
+    const flatDiffColumn = table.getChild('flat_diff');
+    const cumulativeColumn = table.getChild('cumulative');
+    const cumulativeDiffColumn = table.getChild('cumulative_diff');
+    if (table.numRows === 0)
+        return _jsx(_Fragment, { children: "Profile has no samples" });
+    const rows = [];
+    // TODO: Figure out how to only read the data of the columns we need for the virtualized table
+    for (let i = 0; i < table.numRows; i++) {
+        const flat = flatColumn?.get(i) ?? 0n;
+        const flatDiff = flatDiffColumn?.get(i) ?? 0n;
+        const cumulative = cumulativeColumn?.get(i) ?? 0n;
+        const cumulativeDiff = cumulativeDiffColumn?.get(i) ?? 0n;
+        rows.push({
+            name: RowName(table, i),
+            flat,
+            flatDiff,
+            cumulative,
+            cumulativeDiff,
+        });
+    }
+    return (_jsx("div", { className: "relative", children: _jsx("div", { className: "font-robotoMono h-[80vh] w-full", children: _jsx(TableComponent, { data: rows, columns: columns, initialSorting: initialSorting, columnVisibility: columnVisibility, onRowClick: onRowClick, enableHighlighting: enableHighlighting, shouldHighlightRow: shouldHighlightRow, usePointerCursor: dashboardItems.length > 1 }) }) }));
+});
+const addPlusSign = (num) => {
+    if (num.charAt(0) === '0' || num.charAt(0) === '-') {
+        return num;
+    }
+    return `+${num}`;
+};
+export const RowName = (table, row) => {
+    const mappingFileColumn = table.getChild('mapping_file');
+    if (mappingFileColumn === null) {
+        console.error('mapping_file column not found');
+        return '';
+    }
+    const mappingFile = mappingFileColumn?.get(row);
+    let mapping = '';
+    // Show the last item in the mapping file only if there are more than 1 mappings
+    if (mappingFile != null && mappingFileColumn.data.length > 1) {
+        mapping = `[${getLastItem(mappingFile) ?? ''}]`;
+    }
+    const functionName = table.getChild('function_name')?.get(row) ?? '';
+    if (functionName !== null) {
+        return `${mapping} ${functionName}`;
+    }
+    const address = table.getChild('location_address')?.get(row) ?? 0;
+    return hexifyAddress(address);
+};
+export default Table;

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.228",
+  "version": "0.16.229",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.16.85",
-    "@parca/components": "^0.16.181",
+    "@parca/client": "^0.16.86",
+    "@parca/components": "^0.16.182",
     "@parca/dynamicsize": "^0.16.54",
-    "@parca/hooks": "^0.0.20",
+    "@parca/hooks": "^0.0.21",
     "@parca/parser": "^0.16.55",
-    "@parca/store": "^0.16.98",
-    "@parca/utilities": "^0.0.27",
+    "@parca/store": "^0.16.99",
+    "@parca/utilities": "^0.0.28",
     "@tanstack/react-query": "^4.0.5",
     "@types/react-beautiful-dnd": "^13.1.3",
     "apache-arrow": "^12.0.0",
@@ -49,5 +49,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "18567fe5daa44cf7a7f214124e01178a82b1e5a1"
+  "gitHead": "6cc8241e1dba86446268b2c427330e46fe815fb0"
 }

package/src/ProfileView/index.tsx

@@ -13,7 +13,7 @@
 
 import {Profiler, ProfilerProps, useEffect, useMemo, useState} from 'react';
 
-import {Table} from 'apache-arrow';
+import {Table as ArrowTable} from 'apache-arrow';
 import cx from 'classnames';
 import {scaleLinear} from 'd3';
 import graphviz from 'graphviz-wasm';
@@ -30,6 +30,7 @@ import {
   Flamegraph,
   QueryServiceClient,
   Source,
+  TableArrow,
   Top,
 } from '@parca/client';
 import {
@@ -49,7 +50,7 @@ import {jsonToDot} from '../Callgraph/utils';
 import ProfileIcicleGraph from '../ProfileIcicleGraph';
 import {ProfileSource} from '../ProfileSource';
 import {SourceView} from '../SourceView';
-import {TopTable} from '../TopTable';
+import Table from '../Table';
 import ProfileShareButton from '../components/ProfileShareButton';
 import useDelayedLoader from '../useDelayedLoader';
 import FilterByFunctionButton from './FilterByFunctionButton';
@@ -62,7 +63,7 @@ type NavigateFunction = (path: string, queryParams: any, options?: {replace?: bo
 export interface FlamegraphData {
   loading: boolean;
   data?: Flamegraph;
-  table?: Table<any>;
+  table?: ArrowTable<any>;
   total?: bigint;
   filtered?: bigint;
   error?: any;
@@ -70,7 +71,8 @@ export interface FlamegraphData {
 
 export interface TopTableData {
   loading: boolean;
-  data?: Top;
+  arrow?: TableArrow;
+  data?: Top; // TODO: Remove this once we only have arrow support
   total?: bigint;
   filtered?: bigint;
   error?: any;
@@ -294,9 +296,9 @@ export const ProfileView = ({
       }
       case 'table': {
         return topTableData != null ? (
-          <TopTable
+          <Table
             loading={topTableData.loading}
-            data={topTableData.data}
+            data={topTableData.arrow?.record}
             sampleUnit={sampleUnit}
             navigateTo={navigateTo}
             setActionButtons={setActionButtons}

package/src/ProfileViewWithData.tsx

@@ -82,10 +82,10 @@ export const ProfileViewWithData = ({
   const {perf} = useParcaContext();
 
   const {
-    isLoading: topTableLoading,
-    response: topTableResponse,
-    error: topTableError,
-  } = useQuery(queryClient, profileSource, QueryRequest_ReportType.TOP, {
+    isLoading: tableLoading,
+    response: tableResponse,
+    error: tableError,
+  } = useQuery(queryClient, profileSource, QueryRequest_ReportType.TABLE_ARROW, {
     skip: !dashboardItems.includes('table'),
   });
 
@@ -115,8 +115,8 @@ export const ProfileViewWithData = ({
       perf?.markInteraction('Flamegraph render', flamegraphResponse.total);
     }
 
-    if (!topTableLoading && topTableResponse?.report.oneofKind === 'top') {
-      perf?.markInteraction('Top table render', topTableResponse.total);
+    if (!tableLoading && tableResponse?.report.oneofKind === 'tableArrow') {
+      perf?.markInteraction('table render', tableResponse.total);
     }
 
     if (!callgraphLoading && callgraphResponse?.report.oneofKind === 'callgraph') {
@@ -131,8 +131,8 @@ export const ProfileViewWithData = ({
     flamegraphResponse,
     callgraphResponse,
     callgraphLoading,
-    topTableLoading,
-    topTableResponse,
+    tableLoading,
+    tableResponse,
     sourceLoading,
     sourceResponse,
     perf,
@@ -163,9 +163,9 @@ export const ProfileViewWithData = ({
   if (flamegraphResponse !== null) {
     total = BigInt(flamegraphResponse.total);
     filtered = BigInt(flamegraphResponse.filtered);
-  } else if (topTableResponse !== null) {
-    total = BigInt(topTableResponse.total);
-    filtered = BigInt(topTableResponse.filtered);
+  } else if (tableResponse !== null) {
+    total = BigInt(tableResponse.total);
+    filtered = BigInt(tableResponse.filtered);
   } else if (callgraphResponse !== null) {
     total = BigInt(callgraphResponse.total);
     filtered = BigInt(callgraphResponse.filtered);
@@ -193,10 +193,12 @@ export const ProfileViewWithData = ({
         error: flamegraphError,
       }}
       topTableData={{
-        loading: topTableLoading,
-        data:
-          topTableResponse?.report.oneofKind === 'top' ? topTableResponse.report.top : undefined,
-        error: topTableError,
+        loading: tableLoading,
+        arrow:
+          tableResponse?.report.oneofKind === 'tableArrow'
+            ? tableResponse.report.tableArrow
+            : undefined,
+        error: tableError,
       }}
       callgraphData={{
         loading: callgraphLoading,

package/src/Table/index.tsx

@@ -0,0 +1,285 @@
+// 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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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, {useCallback, useEffect, useMemo} from 'react';
+
+import {createColumnHelper, type ColumnDef} from '@tanstack/react-table';
+import {Table as ArrowTable, tableFromIPC} from 'apache-arrow';
+
+import {Button, Table as TableComponent, useURLState} from '@parca/components';
+import {
+  getLastItem,
+  isSearchMatch,
+  parseParams,
+  valueFormatter,
+  type NavigateFunction,
+} from '@parca/utilities';
+
+import {hexifyAddress} from '../utils';
+
+const columnHelper = createColumnHelper<row>();
+
+interface row {
+  name: string;
+  flat: bigint;
+  flatDiff: bigint;
+  cumulative: bigint;
+  cumulativeDiff: bigint;
+}
+
+interface TableProps {
+  data?: Uint8Array;
+  sampleUnit: string;
+  navigateTo?: NavigateFunction;
+  loading: boolean;
+  currentSearchString?: string;
+  setActionButtons?: (buttons: React.JSX.Element) => void;
+}
+
+export const Table = React.memo(function Table({
+  data,
+  sampleUnit: unit,
+  navigateTo,
+  loading,
+  currentSearchString,
+  setActionButtons,
+}: TableProps): React.JSX.Element {
+  const router = parseParams(window?.location.search);
+  const [rawDashboardItems] = useURLState({param: 'dashboard_items'});
+  const [rawcompareMode] = useURLState({param: 'compare_a'});
+
+  const compareMode: boolean = rawcompareMode === undefined ? false : rawcompareMode === 'true';
+
+  const dashboardItems = useMemo(() => {
+    if (rawDashboardItems !== undefined) {
+      return rawDashboardItems as string[];
+    }
+    return ['icicle'];
+  }, [rawDashboardItems]);
+
+  const columns = useMemo(() => {
+    const cols: Array<ColumnDef<row, any>> = [
+      columnHelper.accessor('flat', {
+        header: () => 'Flat',
+        cell: info => valueFormatter(info.getValue(), unit, 2),
+        size: 80,
+        meta: {
+          align: 'right',
+        },
+        invertSorting: true,
+      }),
+      columnHelper.accessor('flatDiff', {
+        header: () => 'Flat Diff',
+        cell: info => addPlusSign(valueFormatter(info.getValue(), unit, 2)),
+        size: 120,
+        meta: {
+          align: 'right',
+        },
+        invertSorting: true,
+      }),
+      columnHelper.accessor('cumulative', {
+        header: () => 'Cumulative',
+        cell: info => valueFormatter(info.getValue(), unit, 2),
+        size: 130,
+        meta: {
+          align: 'right',
+        },
+        invertSorting: true,
+      }),
+      columnHelper.accessor('cumulativeDiff', {
+        header: () => 'Cumulative Diff',
+        cell: info => addPlusSign(valueFormatter(info.getValue(), unit, 2)),
+        size: 170,
+        meta: {
+          align: 'right',
+        },
+        invertSorting: true,
+      }),
+      columnHelper.accessor('name', {
+        header: () => <span className="text-left">Name</span>,
+        cell: info => info.getValue(),
+      }),
+    ];
+    return cols;
+  }, [unit]);
+
+  const selectSpan = useCallback(
+    (span: string): void => {
+      if (navigateTo != null) {
+        navigateTo(
+          '/',
+          {
+            ...router,
+            ...{search_string: span.trim()},
+          },
+          {replace: true}
+        );
+      }
+    },
+    [navigateTo, router]
+  );
+
+  const onRowClick = useCallback(
+    (row: row) => {
+      // If there is only one dashboard item, we don't want to select a span
+      if (dashboardItems.length <= 1) {
+        return;
+      }
+      selectSpan(row.name);
+    },
+    [selectSpan, dashboardItems.length]
+  );
+
+  const shouldHighlightRow = useCallback(
+    (row: row) => {
+      const name = row.name;
+      return isSearchMatch(currentSearchString as string, name);
+    },
+    [currentSearchString]
+  );
+
+  const enableHighlighting = useMemo(() => {
+    return currentSearchString != null && currentSearchString?.length > 0;
+  }, [currentSearchString]);
+
+  const clearSelection = useCallback((): void => {
+    if (navigateTo != null) {
+      navigateTo(
+        '/',
+        {
+          ...router,
+          ...{search_string: ''},
+        },
+        {replace: true}
+      );
+    }
+  }, [navigateTo, router]);
+
+  useEffect(() => {
+    if (setActionButtons === undefined) {
+      return;
+    }
+    setActionButtons(
+      dashboardItems.length > 1 ? (
+        <Button
+          color="neutral"
+          onClick={clearSelection}
+          className="w-auto"
+          variant="neutral"
+          disabled={currentSearchString === undefined || currentSearchString.length === 0}
+        >
+          Clear selection
+        </Button>
+      ) : (
+        <></>
+      )
+    );
+  }, [dashboardItems, clearSelection, currentSearchString, setActionButtons]);
+
+  const initialSorting = useMemo(() => {
+    return [
+      {
+        id: compareMode ? 'flatDiff' : 'flat',
+        desc: false, // columns sorting are inverted - so this is actually descending
+      },
+    ];
+  }, [compareMode]);
+
+  const columnVisibility = useMemo(() => {
+    // TODO: Make this configurable via the UI and add more columns.
+    return {
+      flat: true,
+      flatDiff: compareMode,
+      cumulative: true,
+      cumulativeDiff: compareMode,
+      name: true,
+    };
+  }, [compareMode]);
+
+  if (loading) return <>Loading...</>;
+  if (data === undefined) return <>Profile has no samples</>;
+
+  const table = tableFromIPC(data);
+  const flatColumn = table.getChild('flat');
+  const flatDiffColumn = table.getChild('flat_diff');
+  const cumulativeColumn = table.getChild('cumulative');
+  const cumulativeDiffColumn = table.getChild('cumulative_diff');
+
+  if (table.numRows === 0) return <>Profile has no samples</>;
+
+  const rows: row[] = [];
+  // TODO: Figure out how to only read the data of the columns we need for the virtualized table
+  for (let i = 0; i < table.numRows; i++) {
+    const flat: bigint = flatColumn?.get(i) ?? 0n;
+    const flatDiff: bigint = flatDiffColumn?.get(i) ?? 0n;
+    const cumulative: bigint = cumulativeColumn?.get(i) ?? 0n;
+    const cumulativeDiff: bigint = cumulativeDiffColumn?.get(i) ?? 0n;
+    rows.push({
+      name: RowName(table, i),
+      flat,
+      flatDiff,
+      cumulative,
+      cumulativeDiff,
+    });
+  }
+
+  return (
+    <div className="relative">
+      <div className="font-robotoMono h-[80vh] w-full">
+        <TableComponent
+          data={rows}
+          columns={columns}
+          initialSorting={initialSorting}
+          columnVisibility={columnVisibility}
+          onRowClick={onRowClick}
+          enableHighlighting={enableHighlighting}
+          shouldHighlightRow={shouldHighlightRow}
+          usePointerCursor={dashboardItems.length > 1}
+        />
+      </div>
+    </div>
+  );
+});
+
+const addPlusSign = (num: string): string => {
+  if (num.charAt(0) === '0' || num.charAt(0) === '-') {
+    return num;
+  }
+
+  return `+${num}`;
+};
+
+export const RowName = (table: ArrowTable, row: number): string => {
+  const mappingFileColumn = table.getChild('mapping_file');
+  if (mappingFileColumn === null) {
+    console.error('mapping_file column not found');
+    return '';
+  }
+
+  const mappingFile: string | null = mappingFileColumn?.get(row);
+  let mapping = '';
+  // Show the last item in the mapping file only if there are more than 1 mappings
+  if (mappingFile != null && mappingFileColumn.data.length > 1) {
+    mapping = `[${getLastItem(mappingFile) ?? ''}]`;
+  }
+  const functionName: string | null = table.getChild('function_name')?.get(row) ?? '';
+  if (functionName !== null) {
+    return `${mapping} ${functionName}`;
+  }
+
+  const address: bigint = table.getChild('location_address')?.get(row) ?? 0;
+
+  return hexifyAddress(address);
+};
+
+export default Table;