chore(ui): Call table footer - pagination sizing, call-out for Alt/Option command

weave-js/src/common/util/browser.ts

@@ -6,5 +6,12 @@ export const isFirefox = browser?.name === 'firefox';
 export const isSafari = browser?.name === 'safari';
 
 // navigator.platform is deprecated, so fallback to navigator.userAgent
-export const isMac =
-  navigator.platform?.startsWith('Mac') ?? navigator.userAgent.includes('Mac');
+export const isMac = () => {
+  const platform = navigator.platform || '';
+  const userAgent = navigator.userAgent || '';
+  const appVersion = navigator.appVersion || '';
+  const checkString = (str: string) => /Mac|iPhone|iPod|iPad/i.test(str);
+  return (
+    checkString(platform) || checkString(userAgent) || checkString(appVersion)
+  );
+};

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

@@ -392,7 +392,7 @@ export const DataTableView: FC<{
   const displayRows = 10;
   const hideFooter = USE_TABLE_FOR_ARRAYS && gridRows.length <= displayRows;
   const headerHeight = 40;
-  const footerHeight = 52;
+  const footerHeight = 40;
   const rowHeight = 36;
   const contentHeight = rowHeight * Math.min(displayRows, gridRows.length);
   const loadingHeight = 100;

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

@@ -965,6 +965,7 @@ export const CallsTable: FC<{
           // This moves the pagination controls to the left
           '& .MuiDataGrid-footerContainer': {
             justifyContent: 'flex-start',
+            minHeight: 40,
           },
           '& .MuiDataGrid-main:focus-visible': {
             outline: 'none',

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

@@ -9,9 +9,10 @@ import {
   useGridApiContext,
   useGridSelector,
 } from '@mui/x-data-grid-pro';
-import {MOON_500} from '@wandb/weave/common/css/color.styles';
+import {MOON_400, MOON_500} from '@wandb/weave/common/css/color.styles';
 import {useOrgName} from '@wandb/weave/common/hooks/useOrganization';
 import {useViewerUserInfo2} from '@wandb/weave/common/hooks/useViewerUserInfo';
+import {isMac} from '@wandb/weave/common/util/browser';
 import {Radio, Switch} from '@wandb/weave/components';
 import {Button} from '@wandb/weave/components/Button';
 import {CodeEditor} from '@wandb/weave/components/CodeEditor';
@@ -666,34 +667,44 @@ export const PaginationButtons = () => {
   const end = Math.min(rowCount, (page + 1) * pageSize);
 
   return (
-    <Box display="flex" alignItems="center" justifyContent="center" padding={1}>
-      <Button
-        variant="quiet"
-        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="center" padding={1} width="100%">
+      <Box display="flex" alignItems="center">
+        <Button
+          variant="quiet"
+          size="small"
+          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>
+        <Button
+          variant="quiet"
+          size="small"
+          onClick={handleNextPage}
+          disabled={page >= pageCount - 1}
+          icon="chevron-next"
+        />
+      </Box>
+      <Box display="flex" alignItems="center" marginLeft="auto" marginRight={1} sx={{ fontSize: '14px', color: MOON_500 }}>
+        <Box component="span" sx={{ fontSize: '14px', border: `1px solid ${MOON_400}`, fontWeight: '600', padding: '0px 4px', marginRight: '4px', borderRadius: '4px' }}>
+          {isMac ? 'Alt' : 'Option'}
+        </Box>
+        + 
+        <Box component="span" sx={{ fontSize: '14px', border: `1px solid ${MOON_400}`, fontWeight: '600', padding: '0px 4px', marginLeft: '4px', marginRight: '8px', borderRadius: '4px' }}>Click</Box>
+        on a cell to filter by the value
       </Box>
-      <Button
-        variant="quiet"
-        size="medium"
-        onClick={handleNextPage}
-        disabled={page >= pageCount - 1}
-        icon="chevron-next"
-      />
     </Box>
   );
-};
+};

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundChat/PlaygroundChatInput.tsx

@@ -1,5 +1,6 @@
 import {Box, Divider} from '@mui/material';
 import {MOON_250, MOON_500} from '@wandb/weave/common/css/color.styles';
+import {isMac} from '@wandb/weave/common/util/browser';
 import {Button} from '@wandb/weave/components/Button';
 import React, {useState} from 'react';
 
@@ -15,16 +16,6 @@ type PlaygroundChatInputProps = {
   settingsTab: number | null;
 };
 
-const isMac = () => {
-  const platform = navigator.platform || '';
-  const userAgent = navigator.userAgent || '';
-  const appVersion = navigator.appVersion || '';
-  const checkString = (str: string) => /Mac|iPhone|iPod|iPad/i.test(str);
-  return (
-    checkString(platform) || checkString(userAgent) || checkString(appVersion)
-  );
-};
-
 export const PlaygroundChatInput: React.FC<PlaygroundChatInputProps> = ({
   chatText,
   setChatText,

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

@@ -380,6 +380,7 @@ export const LeaderboardGrid: React.FC<LeaderboardGridProps> = ({
           borderRadius: 0,
           '& .MuiDataGrid-footerContainer': {
             justifyContent: 'flex-start',
+            minHeight: 40,
           },
           '& .MuiDataGrid-cell': {
             cursor: 'pointer',