feat(ui): allow specifying page size in grid (#3434)

weave-js/src/components/PagePanelComponents/Home/Browse3/grid/pagination.ts

@@ -1,7 +1,7 @@
 import {GridPaginationModel} from '@mui/x-data-grid-pro';
 
 const MAX_PAGE_SIZE = 100;
-export const DEFAULT_PAGE_SIZE = 100;
+export const DEFAULT_PAGE_SIZE = 50;
 
 export const getValidPaginationModel = (
   queryPage: string | undefined,

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallDetails.tsx

@@ -189,6 +189,7 @@ export const CallDetails: FC<{
               entity={call.entity}
               project={call.project}
               allowedColumnPatterns={ALLOWED_COLUMN_PATTERNS}
+              paginationModel={isPeeking ? {page: 0, pageSize: 10} : undefined}
             />
           );
           if (isPeeking) {

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsTable.tsx

@@ -941,14 +941,14 @@ export const CallsTable: FC<{
         paginationMode="server"
         paginationModel={paginationModel}
         onPaginationModelChange={onPaginationModelChange}
-        pageSizeOptions={[DEFAULT_PAGE_SIZE]}
         // PAGINATION SECTION END
         rowHeight={38}
         columns={muiColumns}
         disableRowSelectionOnClick
         rowSelectionModel={rowSelectionModel}
         // columnGroupingModel={groupingModel}
         columnGroupingModel={columns.colGroupingModel}
+        hideFooter={!callsLoading && callsTotal === 0}
         hideFooterSelectedRowCount
         onColumnWidthChange={newCol => {
           setUserDefinedColumnWidths(curr => {
@@ -1022,7 +1022,7 @@ export const CallsTable: FC<{
             );
           },
           columnMenu: CallsCustomColumnMenu,
-          pagination: PaginationButtons,
+          pagination: () => <PaginationButtons hideControls={hideControls} />,
           columnMenuSortDescendingIcon: IconSortDescending,
           columnMenuSortAscendingIcon: IconSortAscending,
           columnMenuHideIcon: IconNotVisible,

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsTableButtons.tsx

@@ -26,6 +26,7 @@ import classNames from 'classnames';
 import React, {Dispatch, FC, SetStateAction, useRef, useState} from 'react';
 
 import * as userEvents from '../../../../../../integrations/analytics/userEvents';
+import {Select} from '../../../../../Form/Select';
 import {useWFHooks} from '../wfReactInterface/context';
 import {Query} from '../wfReactInterface/traceServerClientInterface/query';
 import {
@@ -642,7 +643,16 @@ curl '${baseUrl}/calls/stream_query' \\
   return baseCurl;
 }
 
-export const PaginationButtons = () => {
+type PageSizeOption = {
+  readonly value: number;
+  readonly label: string;
+};
+
+type PaginationButtonsProps = {
+  hideControls?: boolean;
+};
+
+export const PaginationButtons = ({hideControls}: PaginationButtonsProps) => {
   const apiRef = useGridApiContext();
   const page = useGridSelector(apiRef, gridPageSelector);
   const pageCount = useGridSelector(apiRef, gridPageCountSelector);
@@ -661,35 +671,81 @@ export const PaginationButtons = () => {
   const start = rowCount > 0 ? page * pageSize + 1 : 0;
   const end = Math.min(rowCount, (page + 1) * pageSize);
 
+  const pageSizes = [10, 25, 50, 100];
+  if (!pageSizes.includes(pageSize)) {
+    pageSizes.push(pageSize);
+    pageSizes.sort((a, b) => a - b);
+  }
+  const pageSizeOptions = pageSizes.map(sz => ({
+    value: sz,
+    label: sz.toString(),
+  }));
+  const pageSizeValue = pageSizeOptions.find(o => o.value === pageSize);
+  const onPageSizeChange = (option: PageSizeOption | null) => {
+    if (option) {
+      apiRef.current.setPageSize(option.value);
+    }
+  };
+
   return (
-    <Box display="flex" alignItems="center" justifyContent="center" padding={1}>
-      <Button
-        variant="ghost"
-        size="medium"
-        onClick={handlePrevPage}
-        disabled={page === 0}
-        icon="chevron-back"
-      />
-      <Box
-        mx={1}
-        sx={{
-          fontSize: '14px',
-          fontWeight: '400',
-          color: MOON_500,
-          // This is so that when we go from 1-100 -> 101-200, the buttons dont jump
-          minWidth: '90px',
-          display: 'flex',
-          justifyContent: 'center',
-        }}>
-        {start}-{end} of {rowCount}
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="space-between"
+      width="100%"
+      padding={1}>
+      <Box display="flex" alignItems="center">
+        <Button
+          variant="ghost"
+          size="medium"
+          onClick={handlePrevPage}
+          disabled={page === 0}
+          icon="chevron-back"
+        />
+        <Box
+          mx={1}
+          sx={{
+            fontSize: '14px',
+            fontWeight: '400',
+            color: MOON_500,
+            // This is so that when we go from 1-100 -> 101-200, the buttons don't jump
+            minWidth: '90px',
+            display: 'flex',
+            justifyContent: 'center',
+          }}>
+          {start}-{end} of {rowCount}
+        </Box>
+        <Button
+          variant="ghost"
+          size="medium"
+          onClick={handleNextPage}
+          disabled={page >= pageCount - 1}
+          icon="chevron-next"
+        />
       </Box>
-      <Button
-        variant="ghost"
-        size="medium"
-        onClick={handleNextPage}
-        disabled={page >= pageCount - 1}
-        icon="chevron-next"
-      />
+      {hideControls ? null : (
+        <Box
+          sx={{
+            fontSize: '14px',
+            fontWeight: '400',
+            color: MOON_500,
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            // Regrettable hack to appear over Material scrollbar's z-index of 6.
+            zIndex: 7,
+          }}>
+          Per page:
+          <Select<PageSizeOption>
+            size="small"
+            menuPlacement="top"
+            options={pageSizeOptions}
+            value={pageSizeValue}
+            isSearchable={false}
+            onChange={onPageSizeChange}
+          />
+        </Box>
+      )}
     </Box>
   );
 };

weave-js/src/components/PagePanelComponents/Home/Browse3/views/Leaderboard/LeaderboardGrid.tsx

@@ -400,7 +400,7 @@ export const LeaderboardGrid: React.FC<LeaderboardGridProps> = ({
           },
         }}
         slots={{
-          pagination: PaginationButtons,
+          pagination: () => <PaginationButtons />,
         }}
       />
     </Box>