@parca/profile 0.16.227 → 0.16.228

package/src/ProfileView/index.tsx

@@ -25,7 +25,13 @@ import {
   type DropResult,
 } from 'react-beautiful-dnd';
 
-import {Callgraph as CallgraphType, Flamegraph, QueryServiceClient, Top} from '@parca/client';
+import {
+  Callgraph as CallgraphType,
+  Flamegraph,
+  QueryServiceClient,
+  Source,
+  Top,
+} from '@parca/client';
 import {
   Button,
   Card,
@@ -42,10 +48,12 @@ import {Callgraph} from '../';
 import {jsonToDot} from '../Callgraph/utils';
 import ProfileIcicleGraph from '../ProfileIcicleGraph';
 import {ProfileSource} from '../ProfileSource';
+import {SourceView} from '../SourceView';
 import {TopTable} from '../TopTable';
 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';
 
@@ -76,12 +84,19 @@ interface CallgraphData {
   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;
@@ -106,6 +121,7 @@ export const ProfileView = ({
   flamegraphData,
   topTableData,
   callgraphData,
+  sourceData,
   sampleUnit,
   profileSource,
   queryClient,
@@ -158,12 +174,16 @@ export const ProfileView = ({
     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,
   ]);
 
@@ -286,6 +306,19 @@ export const ProfileView = ({
           <></>
         );
       }
+      case 'source': {
+        return sourceData != null ? (
+          <SourceView
+            loading={sourceData.loading}
+            data={sourceData.data}
+            total={total}
+            filtered={filtered}
+            setActionButtons={setActionButtons}
+          />
+        ) : (
+          <></>
+        );
+      }
       default: {
         return <></>;
       }
@@ -314,102 +347,104 @@ export const ProfileView = ({
 
   return (
     <KeyDownProvider>
-      <div className="py-3">
-        <Card>
-          <Card.Body>
-            <div className="flex w-full py-3">
-              <div className="flex space-x-4 lg:w-1/2">
-                <div className="flex space-x-1">
-                  {profileSource !== undefined && queryClient !== undefined ? (
-                    <ProfileShareButton
-                      queryRequest={profileSource.QueryRequest()}
-                      queryClient={queryClient}
-                    />
-                  ) : null}
-
-                  <Button
-                    color="neutral"
-                    onClick={e => {
-                      e.preventDefault();
-                      onDownloadPProf();
-                    }}
-                    disabled={pprofDownloading}
-                  >
-                    {pprofDownloading != null && pprofDownloading
-                      ? 'Downloading'
-                      : 'Download pprof'}
-                  </Button>
+      <ProfileViewContextProvider value={{profileSource, sampleUnit}}>
+        <div className="py-3">
+          <Card>
+            <Card.Body>
+              <div className="flex w-full py-3">
+                <div className="flex space-x-4 lg:w-1/2">
+                  <div className="flex space-x-1">
+                    {profileSource !== undefined && queryClient !== undefined ? (
+                      <ProfileShareButton
+                        queryRequest={profileSource.QueryRequest()}
+                        queryClient={queryClient}
+                      />
+                    ) : null}
+
+                    <Button
+                      color="neutral"
+                      onClick={e => {
+                        e.preventDefault();
+                        onDownloadPProf();
+                      }}
+                      disabled={pprofDownloading}
+                    >
+                      {pprofDownloading != null && pprofDownloading
+                        ? 'Downloading'
+                        : 'Download pprof'}
+                    </Button>
+                  </div>
+                  <FilterByFunctionButton navigateTo={navigateTo} />
+                </div>
+
+                <div className="ml-auto flex gap-2">
+                  <ViewSelector
+                    defaultValue=""
+                    navigateTo={navigateTo}
+                    position={-1}
+                    placeholderText="Add panel..."
+                    primary
+                    addView={true}
+                    disabled={isMultiPanelView || dashboardItems.length < 1}
+                  />
                 </div>
-                <FilterByFunctionButton navigateTo={navigateTo} />
               </div>
 
-              <div className="ml-auto flex gap-2">
-                <ViewSelector
-                  defaultValue=""
-                  navigateTo={navigateTo}
-                  position={-1}
-                  placeholderText="Add panel..."
-                  primary
-                  addView={true}
-                  disabled={isMultiPanelView || dashboardItems.length < 1}
-                />
+              <div className="w-full" ref={ref}>
+                {isLoaderVisible ? (
+                  <>{loader}</>
+                ) : (
+                  <DragDropContext onDragEnd={onDragEnd}>
+                    <Droppable droppableId="droppable" direction="horizontal">
+                      {provided => (
+                        <div
+                          ref={provided.innerRef}
+                          className="flex w-full justify-between space-x-4"
+                          {...provided.droppableProps}
+                        >
+                          {dashboardItems.map((dashboardItem, index) => {
+                            return (
+                              <Draggable
+                                key={dashboardItem}
+                                draggableId={dashboardItem}
+                                index={index}
+                                isDragDisabled={!isMultiPanelView}
+                              >
+                                {(provided, snapshot: {isDragging: boolean}) => (
+                                  <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'
+                                    )}
+                                  >
+                                    <VisualizationPanel
+                                      handleClosePanel={handleClosePanel}
+                                      isMultiPanelView={isMultiPanelView}
+                                      dashboardItem={dashboardItem}
+                                      getDashboardItemByType={getDashboardItemByType}
+                                      dragHandleProps={provided.dragHandleProps}
+                                      navigateTo={navigateTo}
+                                      index={index}
+                                    />
+                                  </div>
+                                )}
+                              </Draggable>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </Droppable>
+                  </DragDropContext>
+                )}
               </div>
-            </div>
-
-            <div className="w-full" ref={ref}>
-              {isLoaderVisible ? (
-                <>{loader}</>
-              ) : (
-                <DragDropContext onDragEnd={onDragEnd}>
-                  <Droppable droppableId="droppable" direction="horizontal">
-                    {provided => (
-                      <div
-                        ref={provided.innerRef}
-                        className="flex w-full justify-between space-x-4"
-                        {...provided.droppableProps}
-                      >
-                        {dashboardItems.map((dashboardItem, index) => {
-                          return (
-                            <Draggable
-                              key={dashboardItem}
-                              draggableId={dashboardItem}
-                              index={index}
-                              isDragDisabled={!isMultiPanelView}
-                            >
-                              {(provided, snapshot: {isDragging: boolean}) => (
-                                <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'
-                                  )}
-                                >
-                                  <VisualizationPanel
-                                    handleClosePanel={handleClosePanel}
-                                    isMultiPanelView={isMultiPanelView}
-                                    dashboardItem={dashboardItem}
-                                    getDashboardItemByType={getDashboardItemByType}
-                                    dragHandleProps={provided.dragHandleProps}
-                                    navigateTo={navigateTo}
-                                    index={index}
-                                  />
-                                </div>
-                              )}
-                            </Draggable>
-                          );
-                        })}
-                      </div>
-                    )}
-                  </Droppable>
-                </DragDropContext>
-              )}
-            </div>
-          </Card.Body>
-        </Card>
-      </div>
+            </Card.Body>
+          </Card>
+        </div>
+      </ProfileViewContextProvider>
     </KeyDownProvider>
   );
 };

package/src/ProfileViewWithData.tsx

@@ -40,6 +40,10 @@ export const ProfileViewWithData = ({
 }: ProfileViewWithDataProps): JSX.Element => {
   const metadata = useGrpcMetadata();
   const [dashboardItems = ['icicle']] = useURLState({param: 'dashboard_items', navigateTo});
+  const [sourceBuildID] = useURLState({param: 'source_buildid', navigateTo}) as unknown as [string];
+  const [sourceFilename] = useURLState({param: 'source_filename', navigateTo}) as unknown as [
+    string
+  ];
   const [groupBy = [FIELD_FUNCTION_NAME]] = useURLState({param: 'group_by', navigateTo});
 
   const [enableTrimming] = useUserPreference<boolean>(USER_PREFERENCES.ENABLE_GRAPH_TRIMMING.key);
@@ -93,6 +97,16 @@ export const ProfileViewWithData = ({
     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') ||
@@ -108,6 +122,10 @@ export const ProfileViewWithData = ({
     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,
@@ -115,6 +133,8 @@ export const ProfileViewWithData = ({
     callgraphLoading,
     topTableLoading,
     topTableResponse,
+    sourceLoading,
+    sourceResponse,
     perf,
   ]);
 
@@ -149,6 +169,9 @@ export const ProfileViewWithData = ({
   } 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 (
@@ -183,6 +206,14 @@ export const ProfileViewWithData = ({
             : undefined,
         error: callgraphError,
       }}
+      sourceData={{
+        loading: sourceLoading,
+        data:
+          sourceResponse?.report.oneofKind === 'source'
+            ? sourceResponse?.report?.source
+            : undefined,
+        error: sourceError,
+      }}
       sampleUnit={sampleUnit}
       profileSource={profileSource}
       queryClient={queryClient}

package/src/SourceView/Highlighter.tsx

@@ -0,0 +1,196 @@
+// 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 {Vector} from 'apache-arrow';
+import cx from 'classnames';
+import {scaleLinear} from 'd3-scale';
+import SyntaxHighlighter, {createElement, type createElementProps} 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';
+
+interface RendererProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  rows: any[];
+  stylesheet: createElementProps['stylesheet'];
+  useInlineStyles: createElementProps['useInlineStyles'];
+}
+
+type Renderer = ({rows, stylesheet, useInlineStyles}: RendererProps) => JSX.Element;
+
+interface HighlighterProps {
+  content: string;
+  language?: string;
+  renderer?: Renderer;
+}
+
+// cannot make this a function on the number as we need the classes to be static for tailwind
+const charsToWidthMap: {[key: number]: string} = {
+  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,
+}: {
+  value: bigint;
+  total: bigint;
+  filtered: bigint;
+}): JSX.Element => {
+  const commonClasses = 'w-[52px] shrink-0';
+  const id = useId();
+  const {sampleUnit} = useProfileViewContext();
+  if (value === 0n) {
+    return <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 (
+    <>
+      <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)}%` : ''
+        })`}
+      >
+        {valueString}
+      </p>
+      <Tooltip id={id} />
+    </>
+  );
+};
+
+const charsToWidth = (chars: number): string => {
+  return charsToWidthMap[chars];
+};
+
+export const profileAwareRenderer = (
+  cumulative: Vector | null,
+  flat: Vector | null,
+  total: bigint,
+  filtered: bigint
+): Renderer => {
+  return function ProfileAwareRenderer({
+    rows,
+    stylesheet,
+    useInlineStyles,
+  }: RendererProps): JSX.Element {
+    const lineNumberWidth = charsToWidth(rows.length.toString().length);
+    const [sourceLine] = useURLState({param: 'source_line', navigateTo: () => {}});
+    return (
+      <>
+        {rows.map((node, i) => {
+          const lineNumber: number = node.children[0].children[0].value as number;
+          const isCurrentLine = sourceLine === lineNumber.toString();
+          node.children = node.children.slice(1);
+          return (
+            <div className="flex gap-1" key={`${i}`}>
+              <div
+                className={cx(
+                  'shrink-0 border-r border-gray-200 pr-1 text-right dark:border-gray-700',
+                  lineNumberWidth
+                )}
+              >
+                <LineNo value={lineNumber} isCurrent={isCurrentLine} />
+              </div>
+              <LineProfileMetadata
+                value={cumulative?.get(i) ?? 0n}
+                total={total}
+                filtered={filtered}
+              />
+              <LineProfileMetadata value={flat?.get(i) ?? 0n} total={total} filtered={filtered} />
+              <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,
+                  }
+                )}
+              >
+                {createElement({
+                  key: `source-line-${i}`,
+                  node,
+                  stylesheet,
+                  useInlineStyles,
+                })}
+              </div>
+            </div>
+          );
+        })}
+      </>
+    );
+  };
+};
+
+export const Highlighter = ({content, language, renderer}: HighlighterProps): JSX.Element => {
+  const isDarkMode = useAppSelector(selectDarkMode);
+
+  return (
+    <div className="relative">
+      <div className="flex gap-2 text-xs">
+        <div
+          className={cx('text-right', charsToWidth(content.split('\n').length.toString().length))}
+        >
+          Line
+        </div>
+        <div className="flex gap-3">
+          <div>Cumulative</div>
+          <div>Flat</div>
+          <div>Source</div>
+        </div>
+      </div>
+      <div className="h-[80vh] overflow-y-auto text-xs">
+        <SyntaxHighlighter
+          language={language}
+          style={isDarkMode ? atomOneDark : atomOneLight}
+          showLineNumbers
+          renderer={renderer}
+        >
+          {content}
+        </SyntaxHighlighter>
+      </div>
+    </div>
+  );
+};

package/src/SourceView/LineNo.tsx

@@ -0,0 +1,31 @@
+// 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';
+
+interface Props {
+  value: number;
+  isCurrent?: boolean;
+}
+
+export const LineNo = ({value, isCurrent = false}: Props): JSX.Element => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isCurrent) {
+      ref.current?.scrollIntoView({behavior: 'smooth', block: 'center'});
+    }
+  }, [isCurrent]);
+
+  return <code ref={ref}>{value.toString() + '\n'}</code>;
+};

package/src/SourceView/index.tsx

@@ -0,0 +1,74 @@
+// 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, {useEffect} from 'react';
+
+import {tableFromIPC} from 'apache-arrow';
+
+import {Source} from '@parca/client';
+import {useParcaContext, useURLState} from '@parca/components';
+
+import {ExpandOnHover} from '../GraphTooltipArrow/ExpandOnHoverValue';
+import {truncateStringReverse} from '../utils';
+import {Highlighter, profileAwareRenderer} from './Highlighter';
+
+interface SourceViewProps {
+  loading: boolean;
+  data?: Source;
+  total: bigint;
+  filtered: bigint;
+  setActionButtons?: (buttons: JSX.Element) => void;
+}
+
+export const SourceView = React.memo(function SourceView({
+  data,
+  loading,
+  total,
+  filtered,
+  setActionButtons,
+}: SourceViewProps): JSX.Element {
+  const [sourceFileName] = useURLState({param: 'source_filename', navigateTo: () => {}});
+  const {loader} = useParcaContext();
+
+  useEffect(() => {
+    setActionButtons?.(
+      <div className="px-2">
+        <ExpandOnHover
+          value={sourceFileName as string}
+          displayValue={truncateStringReverse(sourceFileName as string, 50)}
+        />
+      </div>
+    );
+  }, [sourceFileName, setActionButtons]);
+
+  if (loading) {
+    return <>{loader}</>;
+  }
+
+  if (data === undefined) {
+    return <>Source code not uploaded for this build.</>;
+  }
+
+  const table = tableFromIPC(data.record);
+  const cumulative = table.getChild('cumulative');
+  const flat = table.getChild('flat');
+
+  return (
+    <Highlighter
+      content={data.source}
+      renderer={profileAwareRenderer(cumulative, flat, total, filtered)}
+    />
+  );
+});
+
+export default SourceView;