@parca/profile 0.16.227 → 0.16.229

package/src/ProfileView/ProfileViewContext.tsx

@@ -0,0 +1,52 @@
+// 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 {ReactNode, createContext, useContext} from 'react';
+
+import {ProfileSource} from '../ProfileSource';
+
+interface Props {
+  profileSource?: ProfileSource;
+  sampleUnit: string;
+}
+
+export const defaultValue: Props = {
+  profileSource: undefined,
+  sampleUnit: 'bytes',
+};
+
+const ProfileViewContext = createContext<Props>(defaultValue);
+
+export const ProfileViewContextProvider = ({
+  children,
+  value,
+}: {
+  children: ReactNode;
+  value?: Props;
+}): JSX.Element => {
+  return (
+    <ProfileViewContext.Provider value={{...defaultValue, ...(value ?? {})}}>
+      {children}
+    </ProfileViewContext.Provider>
+  );
+};
+
+export const useProfileViewContext = (): Props => {
+  const context = useContext(ProfileViewContext);
+  if (context == null) {
+    return defaultValue;
+  }
+  return context;
+};
+
+export default ProfileViewContext;

package/src/ProfileView/ViewSelector.tsx

@@ -43,6 +43,7 @@ const ViewSelector = ({
   const allItems: Array<{key: string; canBeSelected: boolean; supportingText?: string}> = [
     {key: 'table', canBeSelected: !dashboardItems.includes('table')},
     {key: 'icicle', canBeSelected: !dashboardItems.includes('icicle')},
+    {key: 'source', canBeSelected: false},
   ];
   if (callgraphEnabled) {
     allItems.push({

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';
@@ -25,7 +25,14 @@ import {
   type DropResult,
 } from 'react-beautiful-dnd';
 
-import {Callgraph as CallgraphType, Flamegraph, QueryServiceClient, Top} from '@parca/client';
+import {
+  Callgraph as CallgraphType,
+  Flamegraph,
+  QueryServiceClient,
+  Source,
+  TableArrow,
+  Top,
+} from '@parca/client';
 import {
   Button,
   Card,
@@ -42,10 +49,12 @@ import {Callgraph} from '../';
 import {jsonToDot} from '../Callgraph/utils';
 import ProfileIcicleGraph from '../ProfileIcicleGraph';
 import {ProfileSource} from '../ProfileSource';
-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';
 
@@ -54,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;
@@ -62,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;
@@ -76,12 +86,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 +123,7 @@ export const ProfileView = ({
   flamegraphData,
   topTableData,
   callgraphData,
+  sourceData,
   sampleUnit,
   profileSource,
   queryClient,
@@ -158,12 +176,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,
   ]);
 
@@ -274,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}
@@ -286,6 +308,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 +349,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);
@@ -78,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'),
   });
 
@@ -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') ||
@@ -101,20 +115,26 @@ 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') {
       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,
   ]);
 
@@ -143,12 +163,15 @@ 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);
+  } else if (sourceResponse !== null) {
+    total = BigInt(sourceResponse.total);
+    filtered = BigInt(sourceResponse.filtered);
   }
 
   return (
@@ -170,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,
@@ -183,6 +208,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}