@parca/profile 0.16.444 → 0.16.446

package/src/ProfileView/index.tsx

@@ -11,8 +11,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {Profiler, ProfilerProps, useCallback, useEffect, useState} from 'react';
+import {Profiler, ProfilerProps, useCallback, useEffect, useMemo, useState} from 'react';
 
+import {Table as ArrowTable, tableFromIPC} from 'apache-arrow';
 import cx from 'classnames';
 import {scaleLinear} from 'd3';
 import graphviz from 'graphviz-wasm';
@@ -42,10 +43,17 @@ import {Callgraph} from '../';
 import {jsonToDot} from '../Callgraph/utils';
 import ProfileIcicleGraph from '../ProfileIcicleGraph';
 import {FIELD_FUNCTION_NAME} from '../ProfileIcicleGraph/IcicleGraphArrow';
+import useMappingList, {
+  useFilenamesList,
+} from '../ProfileIcicleGraph/IcicleGraphArrow/useMappingList';
 import {ProfileSource} from '../ProfileSource';
 import {SourceView} from '../SourceView';
 import {Table} from '../Table';
-import VisualisationToolbar from '../components/VisualisationToolbar';
+import VisualisationToolbar, {
+  IcicleGraphToolbar,
+  TableToolbar,
+} from '../components/VisualisationToolbar';
+import ColorStackLegend from './ColorStackLegend';
 import {ProfileViewContextProvider} from './ProfileViewContext';
 import {VisualizationPanel} from './VisualizationPanel';
 
@@ -130,10 +138,22 @@ export const ProfileView = ({
   const [graphvizLoaded, setGraphvizLoaded] = useState(false);
   const [callgraphSVG, setCallgraphSVG] = useState<string | undefined>(undefined);
   const [currentSearchString, setSearchString] = useURLState<string | undefined>('search_string');
+  const [colorStackLegend] = useURLState<string | undefined>('color_stack_legend');
+  const [colorBy] = useURLState('color_by');
+
+  const isColorStackLegendEnabled = colorStackLegend === 'true';
+  const colorByValue = colorBy === undefined || colorBy === '' ? 'binary' : (colorBy as string);
 
   const isDarkMode = useAppSelector(selectDarkMode);
   const isMultiPanelView = dashboardItems.length > 1;
 
+  const table: ArrowTable<any> | null = useMemo(() => {
+    return flamegraphData.arrow !== undefined ? tableFromIPC(flamegraphData.arrow.record) : null;
+  }, [flamegraphData.arrow]);
+
+  const mappingsList = useMappingList(flamegraphData.metadataMappingFiles);
+  const filenamesList = useFilenamesList(table);
+
   const {perf, profileViewExternalMainActions} = useParcaContext();
 
   useEffect(() => {
@@ -195,11 +215,9 @@ export const ProfileView = ({
   const getDashboardItemByType = ({
     type,
     isHalfScreen,
-    setActionButtons,
   }: {
     type: string;
     isHalfScreen: boolean;
-    setActionButtons: (actionButtons: JSX.Element) => void;
   }): JSX.Element => {
     switch (type) {
       case 'icicle': {
@@ -221,13 +239,12 @@ export const ProfileView = ({
               filtered={filtered}
               profileType={profileSource?.ProfileType()}
               loading={flamegraphData.loading}
-              setActionButtons={setActionButtons}
               error={flamegraphData.error}
               isHalfScreen={isHalfScreen}
               width={
                 dimensions?.width !== undefined
                   ? isHalfScreen
-                    ? (dimensions.width - 40) / 2
+                    ? (dimensions.width - 54) / 2
                     : dimensions.width - 16
                   : 0
               }
@@ -260,10 +277,10 @@ export const ProfileView = ({
             data={topTableData.arrow?.record}
             unit={topTableData.unit}
             profileType={profileSource?.ProfileType()}
-            setActionButtons={setActionButtons}
             currentSearchString={currentSearchString}
             setSearchString={setSearchString}
             isHalfScreen={isHalfScreen}
+            metadataMappingFiles={flamegraphData.metadataMappingFiles}
           />
         ) : (
           <></>
@@ -276,7 +293,6 @@ export const ProfileView = ({
             data={sourceData.data}
             total={total}
             filtered={filtered}
-            setActionButtons={setActionButtons}
           />
         ) : (
           <></>
@@ -342,6 +358,28 @@ export const ProfileView = ({
     hasProfileSource &&
     (profileViewExternalMainActions === null || profileViewExternalMainActions === undefined);
 
+  const clearSelection = useCallback((): void => {
+    setSearchString?.('');
+  }, [setSearchString]);
+
+  const getActionButtonsWithMultiPanelView = (): {
+    icicle: JSX.Element;
+    table: JSX.Element;
+  } => {
+    return {
+      icicle: <IcicleGraphToolbar curPath={curPath} setNewCurPath={setNewCurPath} />,
+      table: (
+        <TableToolbar
+          profileType={profileSource?.ProfileType()}
+          total={total}
+          filtered={filtered}
+          clearSelection={clearSelection}
+          currentSearchString={currentSearchString}
+        />
+      ),
+    };
+  };
+
   return (
     <KeyDownProvider>
       <ProfileViewContextProvider value={{profileSource, compareMode}}>
@@ -400,6 +438,14 @@ export const ProfileView = ({
           groupByLabels={flamegraphData.metadataLabels ?? []}
         />
 
+        {isColorStackLegendEnabled && (
+          <ColorStackLegend
+            compareMode={compareMode}
+            mappings={colorByValue === 'binary' ? mappingsList : filenamesList}
+            loading={flamegraphData.metadataLoading}
+          />
+        )}
+
         <div className="w-full" ref={ref}>
           <DragDropContext onDragEnd={onDragEnd}>
             <Droppable droppableId="droppable" direction="horizontal">
@@ -429,7 +475,10 @@ export const ProfileView = ({
                               'w-full min-h-96',
                               snapshot.isDragging
                                 ? 'bg-gray-200 dark:bg-gray-500'
-                                : 'bg-white dark:bg-gray-900'
+                                : 'bg-white dark:bg-gray-900',
+                              isMultiPanelView
+                                ? 'border-2 border-gray-100 dark:border-gray-700 rounded-md p-3'
+                                : ''
                             )}
                           >
                             <VisualizationPanel
@@ -439,6 +488,7 @@ export const ProfileView = ({
                               getDashboardItemByType={getDashboardItemByType}
                               dragHandleProps={provided.dragHandleProps}
                               index={index}
+                              actionButtons={getActionButtonsWithMultiPanelView()}
                             />
                           </div>
                         )}

package/src/ProfileViewWithData.tsx

@@ -81,11 +81,8 @@ export const ProfileViewWithData = ({
     profileSource,
     QueryRequest_ReportType.PROFILE_METADATA,
     {
-      skip: !dashboardItems.includes('icicle'),
       nodeTrimThreshold,
       groupBy,
-      invertCallStack,
-      binaryFrameFilter: undefined,
     }
   );
 
@@ -97,6 +94,7 @@ export const ProfileViewWithData = ({
     error: tableError,
   } = useQuery(queryClient, profileSource, QueryRequest_ReportType.TABLE_ARROW, {
     skip: !dashboardItems.includes('table'),
+    binaryFrameFilter,
   });
 
   const {