@parca/profile 0.16.227 → 0.16.229

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

package/dist/GraphTooltipArrow/Content.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Table } from 'apache-arrow';
+import { type NavigateFunction } from '@parca/utilities';
 interface GraphTooltipArrowContentProps {
     table: Table<any>;
     unit: string;
@@ -8,6 +9,7 @@ interface GraphTooltipArrowContentProps {
     row: number | null;
     level: number;
     isFixed: boolean;
+    navigateTo: NavigateFunction;
 }
-declare const GraphTooltipArrowContent: ({ table, unit, total, totalUnfiltered, row, level, isFixed, }: GraphTooltipArrowContentProps) => React.JSX.Element;
+declare const GraphTooltipArrowContent: ({ table, unit, total, totalUnfiltered, row, level, isFixed, navigateTo, }: GraphTooltipArrowContentProps) => React.JSX.Element;
 export default GraphTooltipArrowContent;

package/dist/GraphTooltipArrow/Content.js

@@ -13,16 +13,21 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // limitations under the License.
 import { useState } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { Tooltip } from 'react-tooltip';
+import { QueryRequest_ReportType } from '@parca/client';
+import { Button, useParcaContext, useURLState } from '@parca/components';
 import { divide, getLastItem, valueFormatter } from '@parca/utilities';
 import { FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_START_LINE, FIELD_LOCATION_ADDRESS, FIELD_LOCATION_LINE, FIELD_MAPPING_BUILD_ID, FIELD_MAPPING_FILE, } from '../ProfileIcicleGraph/IcicleGraphArrow';
 import { nodeLabel } from '../ProfileIcicleGraph/IcicleGraphArrow/utils';
+import { useProfileViewContext } from '../ProfileView/ProfileViewContext';
+import { useQuery } from '../useQuery';
 import { hexifyAddress, truncateString, truncateStringReverse } from '../utils';
 import { ExpandOnHover } from './ExpandOnHoverValue';
 let timeoutHandle = null;
 const NoData = () => {
     return _jsx("span", { className: "rounded bg-gray-200 px-2 dark:bg-gray-800", children: "Not available" });
 };
-const GraphTooltipArrowContent = ({ table, unit, total, totalUnfiltered, row, level, isFixed, }) => {
+const GraphTooltipArrowContent = ({ table, unit, total, totalUnfiltered, row, level, isFixed, navigateTo, }) => {
     const [isCopied, setIsCopied] = useState(false);
     if (row === null) {
         return _jsx(_Fragment, {});
@@ -44,7 +49,6 @@ const GraphTooltipArrowContent = ({ table, unit, total, totalUnfiltered, row, le
     const diffPercentageText = diffSign + (diffRatio * 100).toFixed(2) + '%';
     const diffText = `${diffValueText} (${diffPercentageText})`;
     const name = nodeLabel(table, row, level, false);
-    console.log(level, row, name);
     const getTextForCumulative = (hoveringNodeCumulative) => {
         const filtered = totalUnfiltered > total
             ? ` / ${(100 * divide(hoveringNodeCumulative, total)).toFixed(2)}% of filtered`
@@ -52,12 +56,12 @@ const GraphTooltipArrowContent = ({ table, unit, total, totalUnfiltered, row, le
         return `${valueFormatter(hoveringNodeCumulative, unit, 2)}
     (${(100 * divide(hoveringNodeCumulative, totalUnfiltered)).toFixed(2)}%${filtered})`;
     };
-    return (_jsx("div", { className: `flex text-sm ${isFixed ? 'w-full' : ''}`, children: _jsx("div", { className: `m-auto w-full ${isFixed ? 'w-full' : ''}`, children: _jsxs("div", { className: "min-h-52 flex w-[500px] flex-col justify-between rounded-lg border border-gray-300 bg-gray-50 p-3 shadow-lg dark:border-gray-500 dark:bg-gray-900", children: [_jsx("div", { className: "flex flex-row", children: _jsxs("div", { className: "mx-2", children: [_jsx("div", { className: "flex h-10 items-center break-all font-semibold", children: row === 0 ? (_jsx("p", { children: "root" })) : (_jsx(_Fragment, { children: name !== '' ? (_jsx(CopyToClipboard, { onCopy: onCopy, text: name, children: _jsx("button", { className: "cursor-pointer text-left", children: name }) })) : (_jsx(_Fragment, { children: locationAddress !== 0n ? (_jsx(CopyToClipboard, { onCopy: onCopy, text: hexifyAddress(locationAddress), children: _jsx("button", { className: "cursor-pointer text-left", children: hexifyAddress(locationAddress) }) })) : (_jsx("p", { children: "unknown" })) })) })) }), _jsx("table", { className: "my-2 w-full table-fixed pr-0 text-gray-700 dark:text-gray-300", children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Cumulative" }), _jsx("td", { className: "w-3/4", children: _jsx(CopyToClipboard, { onCopy: onCopy, text: getTextForCumulative(cumulative), children: _jsx("button", { className: "cursor-pointer", children: getTextForCumulative(cumulative) }) }) })] }), diff !== 0n && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Diff" }), _jsx("td", { className: "w-3/4", children: _jsx(CopyToClipboard, { onCopy: onCopy, text: diffText, children: _jsx("button", { className: "cursor-pointer", children: diffText }) }) })] })), _jsx(TooltipMetaInfo, { table: table, row: row, onCopy: onCopy })] }) })] }) }), _jsx("span", { className: "mx-2 block text-xs text-gray-500", children: isCopied ? 'Copied!' : 'Hold shift and click on a value to copy.' })] }) }) }));
+    return (_jsx("div", { className: `flex text-sm ${isFixed ? 'w-full' : ''}`, children: _jsx("div", { className: `m-auto w-full ${isFixed ? 'w-full' : ''}`, children: _jsxs("div", { className: "min-h-52 flex w-[500px] flex-col justify-between rounded-lg border border-gray-300 bg-gray-50 p-3 shadow-lg dark:border-gray-500 dark:bg-gray-900", children: [_jsx("div", { className: "flex flex-row", children: _jsxs("div", { className: "mx-2", children: [_jsx("div", { className: "flex h-10 items-center break-all font-semibold", children: row === 0 ? (_jsx("p", { children: "root" })) : (_jsx(_Fragment, { children: name !== '' ? (_jsx(CopyToClipboard, { onCopy: onCopy, text: name, children: _jsx("button", { className: "cursor-pointer text-left", children: name }) })) : (_jsx(_Fragment, { children: locationAddress !== 0n ? (_jsx(CopyToClipboard, { onCopy: onCopy, text: hexifyAddress(locationAddress), children: _jsx("button", { className: "cursor-pointer text-left", children: hexifyAddress(locationAddress) }) })) : (_jsx("p", { children: "unknown" })) })) })) }), _jsx("table", { className: "my-2 w-full table-fixed pr-0 text-gray-700 dark:text-gray-300", children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Cumulative" }), _jsx("td", { className: "w-3/4", children: _jsx(CopyToClipboard, { onCopy: onCopy, text: getTextForCumulative(cumulative), children: _jsx("button", { className: "cursor-pointer", children: getTextForCumulative(cumulative) }) }) })] }), diff !== 0n && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Diff" }), _jsx("td", { className: "w-3/4", children: _jsx(CopyToClipboard, { onCopy: onCopy, text: diffText, children: _jsx("button", { className: "cursor-pointer", children: diffText }) }) })] })), _jsx(TooltipMetaInfo, { table: table, row: row, onCopy: onCopy, navigateTo: navigateTo })] }) })] }) }), _jsx("span", { className: "mx-2 block text-xs text-gray-500", children: isCopied ? 'Copied!' : 'Hold shift and click on a value to copy.' })] }) }) }));
 };
 const TooltipMetaInfo = ({ table, 
 // total,
 // totalUnfiltered,
-onCopy, row, }) => {
+onCopy, row, navigateTo, }) => {
     const mappingFile = table.getChild(FIELD_MAPPING_FILE)?.get(row) ?? '';
     const mappingBuildID = table.getChild(FIELD_MAPPING_BUILD_ID)?.get(row) ?? '';
     const locationAddress = table.getChild(FIELD_LOCATION_ADDRESS)?.get(row) ?? 0n;
@@ -66,12 +70,21 @@ onCopy, row, }) => {
     const functionStartLine = table.getChild(FIELD_FUNCTION_START_LINE)?.get(row) ?? 0n;
     const pprofLabelPrefix = 'pprof_labels.';
     const labelColumnNames = table.schema.fields.filter(field => field.name.startsWith(pprofLabelPrefix));
+    const { queryServiceClient } = useParcaContext();
+    const { profileSource } = useProfileViewContext();
+    const { isLoading: sourceLoading, response: sourceResponse } = useQuery(queryServiceClient, profileSource, QueryRequest_ReportType.SOURCE, {
+        skip: profileSource === undefined,
+        sourceBuildID: mappingBuildID,
+        sourceFilename: functionFilename,
+        sourceOnly: true,
+    });
+    const isSourceAvailable = !sourceLoading && sourceResponse != null;
     const getTextForFile = () => {
         if (functionFilename === '')
             return '<unknown>';
         return `${functionFilename} ${locationLine !== 0n
             ? ` +${locationLine.toString()}`
-            : `${functionStartLine !== 0n ? ` +${functionStartLine}` : ''}`}`;
+            : `${functionStartLine !== 0n ? `:${functionStartLine}` : ''}`}`;
     };
     const file = getTextForFile();
     const labelPairs = labelColumnNames
@@ -81,6 +94,31 @@ onCopy, row, }) => {
     ])
         .filter(value => value[1] !== '');
     const labels = labelPairs.map((l) => (_jsx("span", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: `${l[0]}="${l[1]}"` }, l[0])));
-    return (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "File" }), _jsx("td", { className: "w-3/4 break-all", children: functionFilename === '' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: file, children: _jsx("button", { className: "cursor-pointer whitespace-nowrap text-left", children: _jsx(ExpandOnHover, { value: file, displayValue: truncateStringReverse(file, 40) }) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Address" }), _jsx("td", { className: "w-3/4 break-all", children: locationAddress === 0n ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: hexifyAddress(locationAddress), children: _jsx("button", { className: "cursor-pointer", children: hexifyAddress(locationAddress) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Binary" }), _jsx("td", { className: "w-3/4 break-all", children: mappingFile === '' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: mappingFile, children: _jsx("button", { className: "cursor-pointer", children: getLastItem(mappingFile) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Build Id" }), _jsx("td", { className: "w-3/4 break-all", children: mappingBuildID === '' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: mappingBuildID, children: _jsx("button", { className: "cursor-pointer", children: truncateString(getLastItem(mappingBuildID), 28) }) })) })] }), labelPairs.length > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Labels" }), _jsx("td", { className: "w-3/4 break-all", children: labels })] }))] }));
+    const [dashboardItems, setDashboardItems] = useURLState({
+        param: 'dashboard_items',
+        navigateTo,
+    });
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [unusedBuildId, setSourceBuildId] = useURLState({
+        param: 'source_buildid',
+        navigateTo,
+    });
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [unusedFilename, setSourceFilename] = useURLState({
+        param: 'source_filename',
+        navigateTo,
+    });
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [unusedLine, setSourceLine] = useURLState({
+        param: 'source_line',
+        navigateTo,
+    });
+    const openFile = () => {
+        setDashboardItems([dashboardItems[0], 'source']);
+        setSourceBuildId(mappingBuildID);
+        setSourceFilename(functionFilename);
+        setSourceLine(locationLine.toString());
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "File" }), _jsx("td", { className: "w-3/4 break-all", children: functionFilename === '' ? (_jsx(NoData, {})) : (_jsxs("div", { className: "flex gap-4", children: [_jsx(CopyToClipboard, { onCopy: onCopy, text: file, children: _jsx("button", { className: "cursor-pointer whitespace-nowrap text-left", children: _jsx(ExpandOnHover, { value: file, displayValue: truncateStringReverse(file, 30) }) }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx("div", { "data-tooltip-id": "open-source-button-help", "data-tooltip-content": "There is no source code uploaded for this build", children: _jsx(Button, { variant: 'neutral', onClick: () => openFile(), className: "shrink-0", disabled: !isSourceAvailable, children: "open" }) }), !isSourceAvailable ? _jsx(Tooltip, { id: "open-source-button-help" }) : null] })] })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Address" }), _jsx("td", { className: "w-3/4 break-all", children: locationAddress === 0n ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: hexifyAddress(locationAddress), children: _jsx("button", { className: "cursor-pointer", children: hexifyAddress(locationAddress) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Binary" }), _jsx("td", { className: "w-3/4 break-all", children: mappingFile === '' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: mappingFile, children: _jsx("button", { className: "cursor-pointer", children: getLastItem(mappingFile) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Build Id" }), _jsx("td", { className: "w-3/4 break-all", children: mappingBuildID === '' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: mappingBuildID, children: _jsx("button", { className: "cursor-pointer", children: truncateString(getLastItem(mappingBuildID), 28) }) })) })] }), labelPairs.length > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Labels" }), _jsx("td", { className: "w-3/4 break-all", children: labels })] }))] }));
 };
 export default GraphTooltipArrowContent;

package/dist/GraphTooltipArrow/ExpandOnHoverValue.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const ExpandOnHover = ({ value, displayValue }) => {
-    return (_jsxs("div", { className: "group relative w-full", children: [_jsx("div", { className: "w-full overflow-hidden text-ellipsis whitespace-nowrap", children: displayValue ?? value }), _jsx("div", { className: "absolute -inset-2 hidden h-fit max-w-[500px] whitespace-normal break-all rounded bg-gray-50 p-2 shadow-[0_0_10px_2px_rgba(0,0,0,0.3)] group-hover:flex dark:bg-gray-900", children: value })] }));
+    return (_jsxs("div", { className: "group relative w-full", children: [_jsx("div", { className: "w-full overflow-hidden text-ellipsis whitespace-nowrap", children: displayValue ?? value }), _jsx("div", { className: "absolute -inset-2 hidden h-fit max-w-[500px] whitespace-normal break-all rounded bg-gray-50 p-2 shadow-[0_0_10px_2px_rgba(0,0,0,0.3)] group-hover:flex dark:bg-gray-900 z-10", children: value })] }));
 };

package/dist/MetricsGraph/useMetricsGraphDimensions.js

@@ -17,6 +17,15 @@ const margin = 50;
 export const useMetricsGraphDimensions = (comparing) => {
     let { width } = useWindowSize();
     const { profileExplorer } = useParcaContext();
+    if (profileExplorer == null) {
+        return {
+            width: 0,
+            height: 0,
+            heightStyle: '0',
+            margin: 0,
+            marginRight: 0,
+        };
+    }
     width = width - profileExplorer.PaddingX;
     if (comparing) {
         width = width / 2 - 32;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js

@@ -128,6 +128,6 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ table, total, f
     if (table.numRows === 0 || width === undefined) {
         return _jsx(_Fragment, {});
     }
-    return (_jsxs("div", { onMouseLeave: () => dispatch(setHoveringNode(undefined)), children: [_jsx(ColorStackLegend, { mappingColors: mappingColors, navigateTo: navigateTo, compareMode: compareMode }), _jsx(GraphTooltipArrow, { contextElement: svg.current, children: _jsx(GraphTooltipArrowContent, { table: table, row: hoveringRow, level: hoveringLevel ?? 0, isFixed: false, total: total, totalUnfiltered: total + filtered, unit: sampleUnit }) }), root] }));
+    return (_jsxs("div", { onMouseLeave: () => dispatch(setHoveringNode(undefined)), children: [_jsx(ColorStackLegend, { mappingColors: mappingColors, navigateTo: navigateTo, compareMode: compareMode }), _jsx(GraphTooltipArrow, { contextElement: svg.current, children: _jsx(GraphTooltipArrowContent, { table: table, row: hoveringRow, level: hoveringLevel ?? 0, isFixed: false, total: total, totalUnfiltered: total + filtered, unit: sampleUnit, navigateTo: navigateTo }) }), root] }));
 });
 export default IcicleGraphArrow;

package/dist/ProfileView/ProfileViewContext.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { ProfileSource } from '../ProfileSource';
+interface Props {
+    profileSource?: ProfileSource;
+    sampleUnit: string;
+}
+export declare const defaultValue: Props;
+declare const ProfileViewContext: import("react").Context<Props>;
+export declare const ProfileViewContextProvider: ({ children, value, }: {
+    children: ReactNode;
+    value?: Props | undefined;
+}) => JSX.Element;
+export declare const useProfileViewContext: () => Props;
+export default ProfileViewContext;

package/dist/ProfileView/ProfileViewContext.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } 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 { createContext, useContext } from 'react';
+export const defaultValue = {
+    profileSource: undefined,
+    sampleUnit: 'bytes',
+};
+const ProfileViewContext = createContext(defaultValue);
+export const ProfileViewContextProvider = ({ children, value, }) => {
+    return (_jsx(ProfileViewContext.Provider, { value: { ...defaultValue, ...(value ?? {}) }, children: children }));
+};
+export const useProfileViewContext = () => {
+    const context = useContext(ProfileViewContext);
+    if (context == null) {
+        return defaultValue;
+    }
+    return context;
+};
+export default ProfileViewContext;

package/dist/ProfileView/ViewSelector.js

@@ -22,6 +22,7 @@ const ViewSelector = ({ defaultValue, navigateTo, position, placeholderText, pri
     const allItems = [
         { key: 'table', canBeSelected: !dashboardItems.includes('table') },
         { key: 'icicle', canBeSelected: !dashboardItems.includes('icicle') },
+        { key: 'source', canBeSelected: false },
     ];
     if (callgraphEnabled) {
         allItems.push({

package/dist/ProfileView/index.d.ts

@@ -1,5 +1,5 @@
-import { Table } from 'apache-arrow';
-import { Callgraph as CallgraphType, Flamegraph, QueryServiceClient, 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;
@@ -26,12 +27,18 @@ interface CallgraphData {
     filtered?: bigint;
     error?: any;
 }
+interface SourceData {
+    loading: boolean;
+    data?: Source;
+    error?: any;
+}
 export interface ProfileViewProps {
     total: bigint;
     filtered: bigint;
     flamegraphData?: FlamegraphData;
     topTableData?: TopTableData;
     callgraphData?: CallgraphData;
+    sourceData?: SourceData;
     sampleUnit: string;
     profileSource?: ProfileSource;
     queryClient?: QueryServiceClient;
@@ -40,5 +47,5 @@ export interface ProfileViewProps {
     onDownloadPProf: () => void;
     pprofDownloading?: boolean;
 }
-export declare const ProfileView: ({ total, filtered, flamegraphData, topTableData, callgraphData, sampleUnit, profileSource, queryClient, navigateTo, onDownloadPProf, pprofDownloading, }: ProfileViewProps) => JSX.Element;
+export declare const ProfileView: ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, sampleUnit, profileSource, queryClient, navigateTo, onDownloadPProf, pprofDownloading, }: ProfileViewProps) => JSX.Element;
 export {};

package/dist/ProfileView/index.js

@@ -24,10 +24,12 @@ import { getNewSpanColor } from '@parca/utilities';
 import { Callgraph } from '../';
 import { jsonToDot } from '../Callgraph/utils';
 import ProfileIcicleGraph from '../ProfileIcicleGraph';
-import { TopTable } from '../TopTable';
+import { SourceView } from '../SourceView';
+import Table from '../Table';
 import ProfileShareButton from '../components/ProfileShareButton';
 import useDelayedLoader from '../useDelayedLoader';
 import FilterByFunctionButton from './FilterByFunctionButton';
+import { ProfileViewContextProvider } from './ProfileViewContext';
 import ViewSelector from './ViewSelector';
 import { VisualizationPanel } from './VisualizationPanel';
 function arrayEquals(a, b) {
@@ -36,7 +38,7 @@ function arrayEquals(a, b) {
         a.length === b.length &&
         a.every((val, index) => val === b[index]));
 }
-export const ProfileView = ({ total, filtered, flamegraphData, topTableData, callgraphData, sampleUnit, profileSource, queryClient, navigateTo, onDownloadPProf, pprofDownloading, }) => {
+export const ProfileView = ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, sampleUnit, profileSource, queryClient, navigateTo, onDownloadPProf, pprofDownloading, }) => {
     const { ref, dimensions } = useContainerDimensions();
     const [curPath, setCurPath] = useState([]);
     const [rawDashboardItems = ['icicle'], setDashboardItems] = useURLState({
@@ -76,12 +78,16 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
         if (dashboardItems.includes('table')) {
             return Boolean(topTableData?.loading);
         }
+        if (dashboardItems.includes('source')) {
+            return Boolean(sourceData?.loading);
+        }
         return false;
     }, [
         dashboardItems,
         callgraphData?.loading,
         flamegraphData?.loading,
         topTableData?.loading,
+        sourceData?.loading,
         callgraphSVG,
     ]);
     const isLoaderVisible = useDelayedLoader(isLoading);
@@ -135,7 +141,10 @@ 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, {}));
             }
             default: {
                 return _jsx(_Fragment, {});
@@ -157,13 +166,13 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
             setDashboardItems(newDashboardItems);
         }
     };
-    return (_jsx(KeyDownProvider, { children: _jsx("div", { className: "py-3", children: _jsx(Card, { children: _jsxs(Card.Body, { children: [_jsxs("div", { className: "flex w-full py-3", children: [_jsxs("div", { className: "flex space-x-4 lg:w-1/2", children: [_jsxs("div", { className: "flex space-x-1", children: [profileSource !== undefined && queryClient !== undefined ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsx(Button, { color: "neutral", onClick: e => {
-                                                        e.preventDefault();
-                                                        onDownloadPProf();
-                                                    }, disabled: pprofDownloading, children: pprofDownloading != null && pprofDownloading
-                                                        ? 'Downloading'
-                                                        : 'Download pprof' })] }), _jsx(FilterByFunctionButton, { navigateTo: navigateTo })] }), _jsx("div", { className: "ml-auto flex gap-2", children: _jsx(ViewSelector, { defaultValue: "", navigateTo: navigateTo, position: -1, placeholderText: "Add panel...", primary: true, addView: true, disabled: isMultiPanelView || dashboardItems.length < 1 }) })] }), _jsx("div", { className: "w-full", ref: ref, children: isLoaderVisible ? (_jsx(_Fragment, { children: loader })) : (_jsx(DragDropContext, { onDragEnd: onDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", children: provided => (_jsx("div", { ref: provided.innerRef, className: "flex w-full justify-between space-x-4", ...provided.droppableProps, children: dashboardItems.map((dashboardItem, index) => {
-                                            return (_jsx(Draggable, { draggableId: dashboardItem, index: index, isDragDisabled: !isMultiPanelView, children: (provided, snapshot) => (_createElement("div", { ref: provided.innerRef, ...provided.draggableProps, key: dashboardItem, className: cx('rounded border border-gray-300 p-3 dark:border-gray-500 dark:bg-gray-700', isMultiPanelView ? 'w-1/2' : 'w-full', snapshot.isDragging ? 'bg-gray-200' : 'bg-white') },
-                                                    _jsx(VisualizationPanel, { handleClosePanel: handleClosePanel, isMultiPanelView: isMultiPanelView, dashboardItem: dashboardItem, getDashboardItemByType: getDashboardItemByType, dragHandleProps: provided.dragHandleProps, navigateTo: navigateTo, index: index }))) }, dashboardItem));
-                                        }) })) }) })) })] }) }) }) }));
+    return (_jsx(KeyDownProvider, { children: _jsx(ProfileViewContextProvider, { value: { profileSource, sampleUnit }, children: _jsx("div", { className: "py-3", children: _jsx(Card, { children: _jsxs(Card.Body, { children: [_jsxs("div", { className: "flex w-full py-3", children: [_jsxs("div", { className: "flex space-x-4 lg:w-1/2", children: [_jsxs("div", { className: "flex space-x-1", children: [profileSource !== undefined && queryClient !== undefined ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsx(Button, { color: "neutral", onClick: e => {
+                                                            e.preventDefault();
+                                                            onDownloadPProf();
+                                                        }, disabled: pprofDownloading, children: pprofDownloading != null && pprofDownloading
+                                                            ? 'Downloading'
+                                                            : 'Download pprof' })] }), _jsx(FilterByFunctionButton, { navigateTo: navigateTo })] }), _jsx("div", { className: "ml-auto flex gap-2", children: _jsx(ViewSelector, { defaultValue: "", navigateTo: navigateTo, position: -1, placeholderText: "Add panel...", primary: true, addView: true, disabled: isMultiPanelView || dashboardItems.length < 1 }) })] }), _jsx("div", { className: "w-full", ref: ref, children: isLoaderVisible ? (_jsx(_Fragment, { children: loader })) : (_jsx(DragDropContext, { onDragEnd: onDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", children: provided => (_jsx("div", { ref: provided.innerRef, className: "flex w-full justify-between space-x-4", ...provided.droppableProps, children: dashboardItems.map((dashboardItem, index) => {
+                                                return (_jsx(Draggable, { draggableId: dashboardItem, index: index, isDragDisabled: !isMultiPanelView, children: (provided, snapshot) => (_createElement("div", { ref: provided.innerRef, ...provided.draggableProps, key: dashboardItem, className: cx('rounded border border-gray-300 p-3 dark:border-gray-500 dark:bg-gray-700', isMultiPanelView ? 'w-1/2' : 'w-full', snapshot.isDragging ? 'bg-gray-200' : 'bg-white') },
+                                                        _jsx(VisualizationPanel, { handleClosePanel: handleClosePanel, isMultiPanelView: isMultiPanelView, dashboardItem: dashboardItem, getDashboardItemByType: getDashboardItemByType, dragHandleProps: provided.dragHandleProps, navigateTo: navigateTo, index: index }))) }, dashboardItem));
+                                            }) })) }) })) })] }) }) }) }) }));
 };

package/dist/ProfileViewWithData.js

@@ -24,6 +24,8 @@ import { downloadPprof } from './utils';
 export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, }) => {
     const metadata = useGrpcMetadata();
     const [dashboardItems = ['icicle']] = useURLState({ param: 'dashboard_items', navigateTo });
+    const [sourceBuildID] = useURLState({ param: 'source_buildid', navigateTo });
+    const [sourceFilename] = useURLState({ param: 'source_filename', navigateTo });
     const [groupBy = [FIELD_FUNCTION_NAME]] = useURLState({ param: 'group_by', navigateTo });
     const [enableTrimming] = useUserPreference(USER_PREFERENCES.ENABLE_GRAPH_TRIMMING.key);
     const [arrowFlamegraphEnabled] = useUIFeatureFlag('flamegraph-arrow');
@@ -50,30 +52,40 @@ 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, {
         skip: !dashboardItems.includes('callgraph'),
     });
+    const { isLoading: sourceLoading, response: sourceResponse, error: sourceError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.SOURCE, {
+        skip: !dashboardItems.includes('source'),
+        sourceBuildID,
+        sourceFilename,
+    });
     useEffect(() => {
         if ((!flamegraphLoading && flamegraphResponse?.report.oneofKind === 'flamegraph') ||
             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);
         }
+        if (!sourceLoading && sourceResponse?.report.oneofKind === 'source') {
+            perf?.markInteraction('Source render', sourceResponse.total);
+        }
     }, [
         flamegraphLoading,
         flamegraphResponse,
         callgraphResponse,
         callgraphLoading,
-        topTableLoading,
-        topTableResponse,
+        tableLoading,
+        tableResponse,
+        sourceLoading,
+        sourceResponse,
         perf,
     ]);
     const sampleUnit = profileSource.ProfileType().sampleUnit;
@@ -100,14 +112,18 @@ 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);
         filtered = BigInt(callgraphResponse.filtered);
     }
+    else if (sourceResponse !== null) {
+        total = BigInt(sourceResponse.total);
+        filtered = BigInt(sourceResponse.filtered);
+    }
     return (_jsx(ProfileView, { total: total, filtered: filtered, flamegraphData: {
             loading: flamegraphLoading,
             data: flamegraphResponse?.report.oneofKind === 'flamegraph'
@@ -120,15 +136,23 @@ 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'
                 ? callgraphResponse?.report?.callgraph
                 : undefined,
             error: callgraphError,
+        }, sourceData: {
+            loading: sourceLoading,
+            data: sourceResponse?.report.oneofKind === 'source'
+                ? sourceResponse?.report?.source
+                : undefined,
+            error: sourceError,
         }, sampleUnit: sampleUnit, profileSource: profileSource, queryClient: queryClient, navigateTo: navigateTo, onDownloadPProf: () => void downloadPProfClick(), pprofDownloading: pprofDownloading }));
 };
 export default ProfileViewWithData;

package/dist/SourceView/Highlighter.d.ts

@@ -0,0 +1,16 @@
+import { Vector } from 'apache-arrow';
+import { type createElementProps } from 'react-syntax-highlighter';
+interface RendererProps {
+    rows: any[];
+    stylesheet: createElementProps['stylesheet'];
+    useInlineStyles: createElementProps['useInlineStyles'];
+}
+type Renderer = ({ rows, stylesheet, useInlineStyles }: RendererProps) => JSX.Element;
+interface HighlighterProps {
+    content: string;
+    language?: string;
+    renderer?: Renderer;
+}
+export declare const profileAwareRenderer: (cumulative: Vector | null, flat: Vector | null, total: bigint, filtered: bigint) => Renderer;
+export declare const Highlighter: ({ content, language, renderer }: HighlighterProps) => JSX.Element;
+export {};

package/dist/SourceView/Highlighter.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 { useId } from 'react';
+import cx from 'classnames';
+import { scaleLinear } from 'd3-scale';
+import SyntaxHighlighter, { createElement } from 'react-syntax-highlighter';
+import { atomOneDark, atomOneLight } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { Tooltip } from 'react-tooltip';
+import { useURLState } from '@parca/components';
+import { selectDarkMode, useAppSelector } from '@parca/store';
+import { useProfileViewContext } from '../ProfileView/ProfileViewContext';
+import { LineNo } from './LineNo';
+// cannot make this a function on the number as we need the classes to be static for tailwind
+const charsToWidthMap = {
+    1: 'w-3',
+    2: 'w-5',
+    3: 'w-7',
+    4: 'w-9',
+    5: 'w-11',
+    6: 'w-[52px]',
+    7: 'w-[60px]]',
+    8: 'w-[68px]',
+    9: 'w-[76px]',
+    10: 'w-[84px]',
+    11: 'w-[92px]',
+    12: 'w-[100px]',
+    13: 'w-[108px]',
+    14: 'w-[116px]',
+};
+const intensityScale = scaleLinear().domain([0, 99]).range([0.05, 0.75]);
+const LineProfileMetadata = ({ value, total, filtered, }) => {
+    const commonClasses = 'w-[52px] shrink-0';
+    const id = useId();
+    const { sampleUnit } = useProfileViewContext();
+    if (value === 0n) {
+        return _jsx("div", { className: cx(commonClasses) });
+    }
+    const unfilteredPercent = (Number(value) / Number(total + filtered)) * 100;
+    const filteredPercent = (Number(value) / Number(total)) * 100;
+    const valueString = value.toString();
+    const valueWithUnit = `${valueString}${sampleUnit}`;
+    return (_jsxs(_Fragment, { children: [_jsx("p", { className: cx('w- flex justify-end overflow-hidden text-ellipsis whitespace-nowrap', commonClasses), style: { backgroundColor: `rgba(236, 151, 6, ${intensityScale(unfilteredPercent)})` }, "data-tooltip-id": id, "data-tooltip-content": `${valueWithUnit} (${unfilteredPercent.toFixed(2)}%${filtered > 0n ? ` / ${filteredPercent.toFixed(2)}%` : ''})`, children: valueString }), _jsx(Tooltip, { id: id })] }));
+};
+const charsToWidth = (chars) => {
+    return charsToWidthMap[chars];
+};
+export const profileAwareRenderer = (cumulative, flat, total, filtered) => {
+    return function ProfileAwareRenderer({ rows, stylesheet, useInlineStyles, }) {
+        const lineNumberWidth = charsToWidth(rows.length.toString().length);
+        const [sourceLine] = useURLState({ param: 'source_line', navigateTo: () => { } });
+        return (_jsx(_Fragment, { children: rows.map((node, i) => {
+                const lineNumber = node.children[0].children[0].value;
+                const isCurrentLine = sourceLine === lineNumber.toString();
+                node.children = node.children.slice(1);
+                return (_jsxs("div", { className: "flex gap-1", children: [_jsx("div", { className: cx('shrink-0 border-r border-gray-200 pr-1 text-right dark:border-gray-700', lineNumberWidth), children: _jsx(LineNo, { value: lineNumber, isCurrent: isCurrentLine }) }), _jsx(LineProfileMetadata, { value: cumulative?.get(i) ?? 0n, total: total, filtered: filtered }), _jsx(LineProfileMetadata, { value: flat?.get(i) ?? 0n, total: total, filtered: filtered }), _jsx("div", { className: cx('w-11/12 flex-grow-0 border-l border-gray-200 pl-1 dark:border-gray-700', {
+                                'bg-yellow-200 dark:bg-yellow-700': isCurrentLine,
+                            }), children: createElement({
+                                key: `source-line-${i}`,
+                                node,
+                                stylesheet,
+                                useInlineStyles,
+                            }) })] }, `${i}`));
+            }) }));
+    };
+};
+export const Highlighter = ({ content, language, renderer }) => {
+    const isDarkMode = useAppSelector(selectDarkMode);
+    return (_jsxs("div", { className: "relative", children: [_jsxs("div", { className: "flex gap-2 text-xs", children: [_jsx("div", { className: cx('text-right', charsToWidth(content.split('\n').length.toString().length)), children: "Line" }), _jsxs("div", { className: "flex gap-3", children: [_jsx("div", { children: "Cumulative" }), _jsx("div", { children: "Flat" }), _jsx("div", { children: "Source" })] })] }), _jsx("div", { className: "h-[80vh] overflow-y-auto text-xs", children: _jsx(SyntaxHighlighter, { language: language, style: isDarkMode ? atomOneDark : atomOneLight, showLineNumbers: true, renderer: renderer, children: content }) })] }));
+};

package/dist/SourceView/LineNo.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    value: number;
+    isCurrent?: boolean;
+}
+export declare const LineNo: ({ value, isCurrent }: Props) => JSX.Element;
+export {};

package/dist/SourceView/LineNo.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } 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 { useEffect, useRef } from 'react';
+export const LineNo = ({ value, isCurrent = false }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (isCurrent) {
+            ref.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    }, [isCurrent]);
+    return _jsx("code", { ref: ref, children: value.toString() + '\n' });
+};

package/dist/SourceView/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Source } from '@parca/client';
+interface SourceViewProps {
+    loading: boolean;
+    data?: Source;
+    total: bigint;
+    filtered: bigint;
+    setActionButtons?: (buttons: JSX.Element) => void;
+}
+export declare const SourceView: React.NamedExoticComponent<SourceViewProps>;
+export default SourceView;