@parca/profile 0.16.122 → 0.16.124

package/src/ProfileView/index.tsx

@@ -13,7 +13,6 @@
 
 import {Profiler, ProfilerProps, useEffect, useMemo, useState} from 'react';
 
-import {Icon} from '@iconify/react';
 import cx from 'classnames';
 import {scaleLinear} from 'd3';
 import {
@@ -35,7 +34,6 @@ import {
 } from '@parca/components';
 import {useContainerDimensions} from '@parca/dynamicsize';
 import {getNewSpanColor} from '@parca/functions';
-import {CloseIcon} from '@parca/icons';
 import {selectDarkMode, useAppSelector} from '@parca/store';
 
 import {Callgraph} from '../';
@@ -46,6 +44,7 @@ import ProfileShareButton from '../components/ProfileShareButton';
 import useDelayedLoader from '../useDelayedLoader';
 import FilterByFunctionButton from './FilterByFunctionButton';
 import ViewSelector from './ViewSelector';
+import {VisualizationPanel} from './VisualizationPanel';
 
 type NavigateFunction = (path: string, queryParams: any, options?: {replace?: boolean}) => void;
 
@@ -106,6 +105,7 @@ export const ProfileView = ({
     param: 'dashboard_items',
     navigateTo,
   });
+  const [currentSearchString] = useURLState({param: 'search_string'});
   const dashboardItems = rawDashboardItems as string[];
   const isDarkMode = useAppSelector(selectDarkMode);
   const isMultiPanelView = dashboardItems.length > 1;
@@ -154,9 +154,11 @@ export const ProfileView = ({
   const getDashboardItemByType = ({
     type,
     isHalfScreen,
+    setActionButtons,
   }: {
     type: string;
     isHalfScreen: boolean;
+    setActionButtons: (actionButtons: JSX.Element) => void;
   }): JSX.Element => {
     switch (type) {
       case 'icicle': {
@@ -177,6 +179,7 @@ export const ProfileView = ({
               onContainerResize={onFlamegraphContainerResize}
               navigateTo={navigateTo}
               loading={flamegraphData.loading}
+              setActionButtons={setActionButtons}
             />
           </ConditionalWrapper>
         ) : (
@@ -202,6 +205,8 @@ export const ProfileView = ({
             data={topTableData.data}
             sampleUnit={sampleUnit}
             navigateTo={navigateTo}
+            setActionButtons={setActionButtons}
+            currentSearchString={currentSearchString as string}
           />
         ) : (
           <></>
@@ -305,41 +310,15 @@ export const ProfileView = ({
                                     snapshot.isDragging ? 'bg-gray-200' : 'bg-white'
                                   )}
                                 >
-                                  <div className="w-full flex justify-end pb-2">
-                                    <div className="w-full flex justify-between">
-                                      <div
-                                        className={cx(
-                                          isMultiPanelView ? 'visible' : 'invisible',
-                                          'flex items-center'
-                                        )}
-                                        {...provided.dragHandleProps}
-                                      >
-                                        <Icon
-                                          className="text-xl"
-                                          icon="material-symbols:drag-indicator"
-                                        />
-                                      </div>
-                                      <ViewSelector
-                                        defaultValue={dashboardItem}
-                                        navigateTo={navigateTo}
-                                        position={index}
-                                      />
-                                    </div>
-
-                                    {isMultiPanelView && (
-                                      <button
-                                        type="button"
-                                        onClick={() => handleClosePanel(dashboardItem)}
-                                        className="pl-2"
-                                      >
-                                        <CloseIcon />
-                                      </button>
-                                    )}
-                                  </div>
-                                  {getDashboardItemByType({
-                                    type: dashboardItem,
-                                    isHalfScreen: isMultiPanelView,
-                                  })}
+                                  <VisualizationPanel
+                                    handleClosePanel={handleClosePanel}
+                                    isMultiPanelView={isMultiPanelView}
+                                    dashboardItem={dashboardItem}
+                                    getDashboardItemByType={getDashboardItemByType}
+                                    dragHandleProps={provided.dragHandleProps}
+                                    navigateTo={navigateTo}
+                                    index={index}
+                                  />
                                 </div>
                               )}
                             </Draggable>

package/src/TopTable/index.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useCallback, useMemo} from 'react';
+import React, {useCallback, useEffect, useMemo} from 'react';
 
 import {createColumnHelper, type ColumnDef} from '@tanstack/react-table';
 
@@ -32,6 +32,8 @@ interface TopTableProps {
   data?: Top;
   sampleUnit: string;
   navigateTo?: NavigateFunction;
+  currentSearchString?: string;
+  setActionButtons?: (buttons: JSX.Element) => void;
 }
 
 export const RowLabel = (meta: TopNodeMeta | undefined): string => {
@@ -60,15 +62,16 @@ const addPlusSign = (num: string): string => {
   return `+${num}`;
 };
 
-export const TopTable = ({
+export const TopTable = React.memo(function TopTable({
   data: top,
   sampleUnit: unit,
   navigateTo,
   loading,
-}: TopTableProps): JSX.Element => {
+  currentSearchString,
+  setActionButtons,
+}: TopTableProps): JSX.Element {
   const router = parseParams(window.location.search);
   const [rawDashboardItems] = useURLState({param: 'dashboard_items'});
-  const [currentSearchString] = useURLState({param: 'search_string'});
   const [rawcompareMode] = useURLState({param: 'compare_a'});
 
   const compareMode: boolean = rawcompareMode === undefined ? false : rawcompareMode === 'true';
@@ -185,6 +188,27 @@ export const TopTable = ({
     }
   }, [navigateTo, router]);
 
+  useEffect(() => {
+    if (setActionButtons === undefined) {
+      return;
+    }
+    setActionButtons(
+      dashboardItems.length > 1 ? (
+        <Button
+          color="neutral"
+          onClick={clearSelection}
+          className="w-auto"
+          variant="neutral"
+          disabled={currentSearchString === undefined || currentSearchString.length === 0}
+        >
+          Clear selection
+        </Button>
+      ) : (
+        <></>
+      )
+    );
+  }, [dashboardItems, clearSelection, currentSearchString, setActionButtons]);
+
   const initialSorting = useMemo(() => {
     return [{id: compareMode ? 'diff' : 'cumulative', desc: true}];
   }, [compareMode]);
@@ -195,21 +219,6 @@ export const TopTable = ({
 
   return (
     <div className="relative">
-      {/* Clearing the selection is only useful when two visualizations types are selected. So we'll only show it in that case */}
-      {dashboardItems.length > 1 && (
-        <div className="left-[25px] top-[-45px] absolute">
-          <Button
-            color="neutral"
-            onClick={clearSelection}
-            className="w-auto"
-            variant="neutral"
-            disabled={currentSearchString === undefined || currentSearchString.length === 0}
-          >
-            Clear selection
-          </Button>
-        </div>
-      )}
-
       <div className="w-full font-robotoMono h-[80vh] overflow-scroll">
         <Table
           data={top?.list ?? []}
@@ -223,6 +232,6 @@ export const TopTable = ({
       </div>
     </div>
   );
-};
+});
 
 export default TopTable;