@parca/profile 0.16.121 → 0.16.123

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;