QoL: search teams for transfers, add legend to ranking

app/cbb/ranking/columns.ts

@@ -7,7 +7,7 @@ export const getHeaderColumns = ({ rankView }: {rankView: string}) => {
       id: 'composite_rank',
       numeric: true,
       label: 'Rk',
-      tooltip: 'Composite rank',
+      tooltip: 'srating.io Rank',
       'sticky': true,
       'disabled': true,
       'sort': 'lower',
@@ -24,147 +24,147 @@ export const getHeaderColumns = ({ rankView }: {rankView: string}) => {
       id: 'field_goal',
       numeric: true,
       label: 'FG',
-      tooltip: 'Average field goals per game',
+      tooltip: (rankView === 'player' || rankView === 'transfer' ? 'Total field goals made in season' : 'Average field goals per game'),
       'sort': 'higher',
     },
     'field_goal_attempts': {
       id: 'field_goal_attempts',
       numeric: true,
       label: 'FGA',
-      tooltip: 'Average field goal attempts per game',
+      tooltip: (rankView === 'player' || rankView === 'transfer' ? 'Total field goal attempts in season' : 'Average field goal attempts per game'),
       'sort': 'higher',
     },
     'field_goal_percentage': {
       id: 'field_goal_percentage',
       numeric: true,
       label: 'FG%',
-      tooltip: 'Average field goal percentage per game',
+      tooltip: 'Field goal percentage',
       'sort': 'higher',
     },
     'two_point_field_goal': {
       id: 'two_point_field_goal',
       numeric: true,
       label: '2FG',
-      tooltip: 'Average two point field goals per game',
+      tooltip: (rankView === 'player' || rankView === 'transfer' ? 'Total two point field goals made in season' : 'Average two point field goals per game'),
       'sort': 'higher',
     },
     'two_point_field_goal_attempts': {
       id: 'two_point_field_goal_attempts',
       numeric: true,
       label: '2FGA',
-      tooltip: 'Average two point field goal attempts per game',
+      tooltip: (rankView === 'player' || rankView === 'transfer' ? 'Total two point field goal attempts in season' : 'Average two point field goal attempts per game'),
       'sort': 'higher',
     },
     'two_point_field_goal_percentage': {
       id: 'two_point_field_goal_percentage',
       numeric: true,
       label: '2FG%',
-      tooltip: 'Average two point field goal percentage per game',
+      tooltip: 'Two point field goal percentage',
       'sort': 'higher',
     },
     'three_point_field_goal': {
       id: 'three_point_field_goal',
       numeric: true,
       label: '3FG',
-      tooltip: 'Average three point field goals per game',
+      tooltip: (rankView === 'player' || rankView === 'transfer' ? 'Total three point field goals made in season' : 'Average three point field goals per game'),
       'sort': 'higher',
     },
     'three_point_field_goal_attempts': {
       id: 'three_point_field_goal_attempts',
       numeric: true,
       label: '3FGA',
-      tooltip: 'Average three field goal attempts per game',
+      tooltip: (rankView === 'player' || rankView === 'transfer' ? 'Total three field goal attempts in season' : 'Average three field goal attempts per game'),
       'sort': 'higher',
     },
     'three_point_field_goal_percentage': {
       id: 'three_point_field_goal_percentage',
       numeric: true,
       label: '3FG%',
-      tooltip: 'Average three field goal percentage per game',
+      tooltip: 'Three field goal percentage',
       'sort': 'higher',
     },
     'free_throws': {
       id: 'free_throws',
       numeric: true,
       label: 'FT',
-      tooltip: 'Average free throws per game',
+      tooltip: (rankView === 'player' || rankView === 'transfer' ? 'Total free throws made in season' : 'Average free throws per game'),
       'sort': 'higher',
     },
     'free_throw_attempts': {
       id: 'free_throw_attempts',
       numeric: true,
       label: 'FTA',
-      tooltip: 'Average free throw attempts per game',
+      tooltip: (rankView === 'player' || rankView === 'transfer' ? 'Total free throw attempts in season' : 'Average free throw attempts per game'),
       'sort': 'higher',
     },
     'free_throw_percentage': {
       id: 'free_throw_percentage',
       numeric: true,
       label: 'FT%',
-      tooltip: 'Average free throw percentage per game',
+      tooltip: 'Free throw percentage',
       'sort': 'higher',
     },
     'offensive_rebounds': {
       id: 'offensive_rebounds',
       numeric: true,
       label: 'ORB',
-      tooltip: 'Average offensive rebounds per game',
+      tooltip: (rankView === 'player' || rankView === 'transfer' ? 'Total offensive rebounds in season' : 'Average offensive rebounds per game'),
       'sort': 'higher',
     },
     'defensive_rebounds': {
       id: 'defensive_rebounds',
       numeric: true,
       label: 'DRB',
-      tooltip: 'Average defensive rebounds per game',
+      tooltip: (rankView === 'player' || rankView === 'transfer' ? 'Total defensive rebounds in season' : 'Average defensive rebounds per game'),
       'sort': 'higher',
     },
     'total_rebounds': {
       id: 'total_rebounds',
       numeric: true,
       label: 'TRB',
-      tooltip: 'Average total rebounds per game',
+      tooltip: (rankView === 'player' || rankView === 'transfer' ? 'Total rebounds in season' : 'Average total rebounds per game'),
       'sort': 'higher',
     },
     'assists': {
       id: 'assists',
       numeric: true,
       label: 'AST',
-      tooltip: 'Average assists per game',
+      tooltip: (rankView === 'player' || rankView === 'transfer' ? 'Total assists in season' : 'Average assists per game'),
       'sort': 'higher',
     },
     'steals': {
       id: 'steals',
       numeric: true,
       label: 'STL',
-      tooltip: 'Average steals per game',
+      tooltip: (rankView === 'player' || rankView === 'transfer' ? 'Total steals in season' : 'Average steals per game'),
       'sort': 'higher',
     },
     'blocks': {
       id: 'blocks',
       numeric: true,
       label: 'BLK',
-      tooltip: 'Average blocks per game',
+      tooltip: (rankView === 'player' || rankView === 'transfer' ? 'Total blocks in season' : 'Average blocks per game'),
       'sort': 'higher',
     },
     'turnovers': {
       id: 'turnovers',
       numeric: true,
       label: 'TOV',
-      tooltip: 'Average turnovers per game',
+      tooltip: (rankView === 'player' || rankView === 'transfer' ? 'Total turnovers in season' : 'Average turnovers per game'),
       'sort': 'lower',
     },
     'fouls': {
       id: 'fouls',
       numeric: true,
       label: 'PF',
-      tooltip: 'Average fouls per game',
+      tooltip: (rankView === 'player' || rankView === 'transfer' ? 'Total fouls in season' : 'Average fouls per game'),
       'sort': 'lower',
     },
     'points': {
       id: 'points',
       numeric: true,
       label: 'PTS',
-      tooltip: 'Average points per game',
+      tooltip: (rankView === 'player' || rankView === 'transfer' ? 'Total points in season' : 'Average points per game'),
       'sort': 'higher',
     },
     'offensive_rating': {
@@ -272,7 +272,7 @@ export const getHeaderColumns = ({ rankView }: {rankView: string}) => {
         id: 'streak',
         numeric: true,
         label: 'Streak',
-        tooltip: 'Streak',
+        tooltip: 'Number of wins or losses in a row (negative for loss)',
         sort: 'higher',
       },
       'win_margin': {
@@ -555,7 +555,7 @@ export const getHeaderColumns = ({ rankView }: {rankView: string}) => {
           id: 'committed_team_name',
           numeric: false,
           label: 'New team',
-          tooltip: 'New team player committed',
+          tooltip: 'New (committed) team name',
         },
       });
     }
@@ -588,13 +588,13 @@ export const getHeaderColumns = ({ rankView }: {rankView: string}) => {
         id: 'height',
         numeric: false,
         label: 'Height',
-        tooltip: 'Play height',
+        tooltip: 'Player height',
       },
       'minutes_played': {
         id: 'minutes_played',
         numeric: true,
         label: 'MP',
-        tooltip: 'Minutes played',
+        tooltip: 'Total minutes played',
         'sort': 'higher',
       },
       'minutes_per_game': {
@@ -671,7 +671,7 @@ export const getHeaderColumns = ({ rankView }: {rankView: string}) => {
         id: 'player_efficiency_rating',
         numeric: true,
         label: 'PER',
-        tooltip: 'Player efficiency rating.',
+        tooltip: 'Player efficiency rating metric',
         'sort': 'higher',
       },
       'true_shooting_percentage': {

app/cbb/ranking/page.tsx

@@ -96,7 +96,7 @@ async function getData(searchParams) {
       'function': 'read',
       'arguments': {
         'season': season,
-        'team_id': Object.values(teams).map(team => team.team_id),
+        'team_id': teams ? Object.values(teams).map(team => team.team_id) : null,
       }
     });
 

app/cbb/ranking/ranking-page.tsx

@@ -26,7 +26,9 @@ import TableSortLabel from '@mui/material/TableSortLabel';
 import Paper from '@mui/material/Paper';
 import Tooltip from '@mui/material/Tooltip';
 import { visuallyHidden } from '@mui/utils';
+
 import CheckIcon from '@mui/icons-material/Check';
+import HelpIcon from '@mui/icons-material/Help';
 
 import OptionPicker from '@/components/generic/OptionPicker';
 import SeasonPicker from '@/components/generic/CBB/SeasonPicker';
@@ -44,6 +46,8 @@ import { getHeaderColumns } from './columns';
 import { getRowsData } from './rows';
 import AdditionalOptions from '@/components/generic/CBB/Ranking/AdditionalOptions';
 import { setOrder, setOrderBy, setTableScrollTop } from '@/redux/features/ranking-slice';
+import { Link } from '@mui/material';
+import Legend from '@/components/generic/CBB/Ranking/Legend';
 
 
 // TODO Filter out people who play under x minutes?
@@ -109,6 +113,7 @@ const Ranking = (props) => {
 
   const [loading, setLoading] = useState(false);
   const [spin, setSpin] = useState(false);
+  const [legendOpen, setLegendOpen] = useState(false);
   const [season, setSeason] = useState(searchParams?.get('season') || new HelperCBB().getCurrentSeason());
   const [rankView, setRankView] = useState(searchParams?.get('view') || 'team');
   const [view, setView] = useState('composite');
@@ -569,10 +574,15 @@ const Ranking = (props) => {
     return moment(lastUpdated.split('T')[0]).format('MMMM Do YYYY');
   };
 
+  const handleLegend = () => {
+    setLegendOpen(!legendOpen);
+  };
+
 
   return (
     <div>
       <BackdropLoader open = {spin} />
+      <Legend open = {legendOpen} onClose={handleLegend} columns={getColumns()} rankView={rankView} />
       {
         loading ? 
         <div style = {{'display': 'flex', 'justifyContent': 'center'}}><CircularProgress /></div> :
@@ -583,7 +593,15 @@ const Ranking = (props) => {
               <SeasonPicker selected = {season} actionHandler = {handleSeason} />
             </div>
             <Typography variant = 'h5'>{'College basketball' + (rankView === 'transfer' ? ' transfers.' : ' rankings.')}</Typography>
-            {lastUpdated ? <Typography color="text.secondary" variant = 'body1' style = {{'fontStyle': 'italic'}}>{'Last updated: ' + getLastUpdated()}</Typography> : ''}
+            {
+              lastUpdated ?
+              <div style = {{'display': 'flex', 'alignItems': 'center', 'alignContent': 'center'}}>
+                <Typography color="text.secondary" variant = 'body1' style = {{'fontStyle': 'italic'}}>{'Last updated: ' + getLastUpdated()}</Typography>
+                <HelpIcon style = {{'margin': '0px 5px'}} fontSize='small' color = 'info' />
+                <Typography color="text.secondary" variant = 'body1' style = {{'fontStyle': 'italic'}}><Link style = {{'cursor': 'pointer'}} underline="hover" onClick = {handleLegend}>{'Legend'}</Link></Typography>
+              </div> : 
+              ''
+            }
             <div style = {{'display': 'flex', 'justifyContent': 'center', 'flexWrap': 'wrap'}}>
               <Chip sx = {{'margin': '5px'}} label='Composite' variant={view !== 'composite' ? 'outlined' : 'filled'} color={view !== 'composite' ? 'primary' : 'success'} onClick={() => handleRankingView('composite')} />
               <Chip sx = {{'margin': '5px'}} label='Offense' variant={view !== 'offense' ? 'outlined' : 'filled'} color={view !== 'offense' ? 'primary' : 'success'} onClick={() => handleRankingView('offense')} />
@@ -597,7 +615,7 @@ const Ranking = (props) => {
                 {rankView === 'player' || rankView === 'team' || rankView === 'transfer' ? <ConferencePicker /> : ''}
                 {rankView === 'player' || rankView === 'transfer' ? <PositionPicker selected = {positions} /> : ''}
               </div>
-              <RankSearch rows = {allRows} callback = {handleSearch} />
+              <RankSearch rows = {allRows} callback = {handleSearch} rankView = {rankView} />
             </div>
             {confChips}
             {positionChips}

app/cbb/ranking/rows.ts

@@ -1,6 +1,6 @@
 
 
-interface rowDatatype {
+export interface rowDatatype {
   team_id: string;
   composite_rank: number;
   ap_rank: number,
@@ -147,6 +147,11 @@ interface rowDatatype {
   opponent_offensive_rating_rank: number;
   opponent_defensive_rating_rank: number;
   opponent_efficiency_rating_rank: number;
+  committed?: boolean;
+  committed_team_id?: string;
+  committed_team_name?: string;
+  committed_conference?: string;
+  team_name?: string;
 };
 
 export const getRowsData = ({ data, rankView, conferences, positions, hideCommitted, hideUnderTwoMPG, filterCommittedConf, filterOriginalConf }) => {

components/generic/CBB/Ranking/Legend.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Dialog, DialogContent, DialogTitle, IconButton, Typography } from '@mui/material';
+
+import CloseIcon from '@mui/icons-material/Close';
+import { getHeaderColumns } from '@/app/cbb/ranking/columns';
+
+const Legend = ({ open, onClose, columns, rankView }) => {
+
+  const headers = getHeaderColumns({rankView})
+
+  return (
+    <>
+      <Dialog
+        open={open}
+        onClose={onClose}
+      >
+        <DialogTitle id="alert-dialog-title-legend">
+          <div style = {{'display': 'flex', 'justifyContent': 'space-between'}}>
+            {'Column legend'}
+            {<IconButton aria-label="close" onClick={onClose}><CloseIcon /></IconButton>}
+          </div>
+        </DialogTitle>
+        <DialogContent>
+          {
+            columns.map((column) => {
+              return (
+                <div style = {{'display': 'flex', 'margin': '5px 0px'}}>
+                  <Typography color = 'text.secondary' variant = 'subtitle2'>{headers[column].label}:</Typography>
+                  <Typography style = {{'marginLeft': 10}} variant = 'body2'>{headers[column].tooltip}</Typography>
+                </div>
+              );
+            })
+          }
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+export default Legend;

components/generic/RankSearch.jsx → components/generic/RankSearch.tsx

@@ -3,6 +3,7 @@ import { styled, alpha, useTheme } from '@mui/material/styles';
 
 import InputBase from '@mui/material/InputBase';
 import SearchIcon from '@mui/icons-material/Search';
+import { rowDatatype } from '@/app/cbb/ranking/rows';
 
 const Container = styled('div')(({ theme }) => ({
   position: 'relative',
@@ -39,20 +40,24 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
 }));
 
 
-const RankSearch = (props) => {
-  const rows = props.rows;
-  const [value, setValue] = useState('');
+const RankSearch = ({ rows, callback, rankView }: {rows: Array<rowDatatype>, callback: Function, rankView: string}) => {
+  const [value, setValue] = useState<string>('');
 
   const onChange = (e) => {
     const value = e.target.value;
     setValue(value || '');
 
     if (value.length) {
       const regex = new RegExp(value, 'i');
-      const filteredRows = rows.filter(row => regex.test(row.name));
-      props.callback(filteredRows);
+      let filteredRows = rows.filter(row => regex.test(row.name));
+
+      if (rankView === 'transfer') {
+        filteredRows = filteredRows.concat(rows.filter(row => regex.test(row.committed_team_name || '')));
+        filteredRows = filteredRows.concat(rows.filter(row => regex.test(row.team_name || '')));
+      }
+      callback(filteredRows);
     } else {
-      props.callback(false);
+      callback(false);
     }
   };