Add DataTableRow["metadata"]

TODO

@@ -1,9 +1,10 @@
 tables should be aware that rows are players who have pids. add bulk/all/select operations at table-level through ... menu
 - ... -> Bulk select players
   - if checkboxes are shown by default, still have this to show the "Bulk" button
-  - only show this if table rows have metadata? or some global prop?
+  - only show if some table rows have metadata? or some global prop?
 - is getPlayersNextWatch too slow with select all on a large table? maybe don't do that on menu open?
 - for header checkbox, only show dropdown if pagination matters (more than 2 options shown), otherwise just toggle immediately?
+- if metadata season is career, how does export season work?
 - controlled mode (selectedRows passed to DataTable and accessible/controlled from outside)
   - is it possible to do this without fully defining stuff outside, like can we access the state of the child?
   - can i make a separate instance of useBulkSelectRows and pass everything in easily?
@@ -15,7 +16,9 @@ tables should be aware that rows are players who have pids. add bulk/all/select
 - replace existing links to "compare players" pages
   - first, make a popup appear when you click the link explaining new UI. set reminder to delete eventually
 - add to all pages - search for <DataTable
-  - done through AwardRaces
+  - done through LeagueStats
+- on DraftHistory page, what should i do about the Export Draft Class button? Kind of redundant now
+  - maybe we want the compare season to be "career", but the export season to be the draft year?
 - places to use
   - could be used for places where we already have check boxes - set showBulkSelectCheckboxes to true even if bulkSelectRows is false
     - trading block 
@@ -26,12 +29,15 @@ tables should be aware that rows are players who have pids. add bulk/all/select
     - import players
     - ProtectPlayers
     - search for other places with checkboxes
+- extra places to add DataTable
+  - Leaders
+  - SortableTable
+  - ResponsiveTableWrapper
 - test
   - interaction with hideAllControls and other options
     - hideAllControls should move to a string always?
     - datatable-negative-margin-top still needed?
   - bulk actions noop with nothing selected
-  - with supercols
   - with col filters showing
   - career totals stats page
   - all seasons stats page

src/ui/components/DataTable/Row.tsx

@@ -71,13 +71,17 @@ const Row = ({
 			})}
 			onClick={clickable ? toggleClicked : undefined}
 		>
-			{showBulkSelectCheckboxes && row.metadata ? (
-				<BulkSelectCheckbox
-					checked={bulkSelectChecked}
-					rowKey={row.key}
-					metadata={row.metadata}
-					onToggle={onBulkSelectToggle}
-				/>
+			{showBulkSelectCheckboxes ? (
+				row.metadata ? (
+					<BulkSelectCheckbox
+						checked={bulkSelectChecked}
+						rowKey={row.key}
+						metadata={row.metadata}
+						onToggle={onBulkSelectToggle}
+					/>
+				) : (
+					<td />
+				)
 			) : null}
 			{row.data.map((value = null, i) => {
 				// Value is either the value, or an object containing the value as a property

src/ui/components/DataTable/index.tsx

@@ -50,7 +50,7 @@ export type SuperCol = {
 export type DataTableRowMetadata = {
 	type: "player";
 	pid: number;
-	season: number;
+	season: number | "career";
 	playoffs: "playoffs" | "regularSeason" | "combined";
 };
 

src/ui/views/AwardsRecords.tsx

@@ -4,6 +4,7 @@ import useTitleBar from "../hooks/useTitleBar";
 import { getCols, helpers } from "../util";
 import type { View } from "../../common/types";
 import { wrappedPlayerNameLabels } from "../components/PlayerNameLabels";
+import type { DataTableRow } from "../components/DataTable";
 
 const formatYear = (year: {
 	[key: string]: { team: string; season: number }[];
@@ -57,11 +58,17 @@ const AwardsRecords = ({
 		},
 	});
 
-	const rows = awardsRecords.map(a => {
+	const rows: DataTableRow[] = awardsRecords.map(a => {
 		const yearsGrouped = groupBy(a.years, "team");
 
 		return {
 			key: a.pid,
+			metadata: {
+				type: "player",
+				pid: a.pid,
+				season: a.lastYear,
+				playoffs: "regularSeason",
+			},
 			data: [
 				wrappedPlayerNameLabels({
 					pid: a.pid,

src/ui/views/Colleges.tsx

@@ -4,6 +4,7 @@ import { CountryFlag, DataTable } from "../components";
 import type { View } from "../../common/types";
 import { frivolitiesMenu } from "./Frivolities";
 import { wrappedPlayerNameLabels } from "../components/PlayerNameLabels";
+import type { DataTableRow } from "../components/DataTable";
 
 export const genView = (
 	type: "college" | "country" | "draftPosition" | "jerseyNumbers",
@@ -73,7 +74,7 @@ export const genView = (
 			},
 		);
 
-		const rows = infos.map(c => {
+		const rows: DataTableRow[] = infos.map(c => {
 			const p = c.p;
 
 			const abbrev = teamInfoCache[p.legacyTid]?.abbrev;
@@ -82,6 +83,12 @@ export const genView = (
 
 			return {
 				key: c.name,
+				metadata: {
+					type: "player",
+					pid: p.pid,
+					season: "career",
+					playoffs: "regularSeason",
+				},
 				data: [
 					<a
 						href={helpers.leagueUrl([

src/ui/views/Draft.tsx

@@ -14,6 +14,7 @@ import {
 	wrappedContractExp,
 } from "../components/contract";
 import { wrappedPlayerNameLabels } from "../components/PlayerNameLabels";
+import type { DataTableRow } from "../components/DataTable";
 
 const DraftButtons = ({
 	spectator,
@@ -133,7 +134,7 @@ const Draft = ({
 		colsUndrafted.splice(3, 0, ...getCols(["Team"]));
 	}
 
-	const rowsUndrafted = undrafted.map(p => {
+	const rowsUndrafted: DataTableRow[] = undrafted.map(p => {
 		const data = [
 			p.rank,
 			wrappedPlayerNameLabels({
@@ -202,6 +203,12 @@ const Draft = ({
 
 		return {
 			key: p.pid,
+			metadata: {
+				type: "player",
+				pid: p.pid,
+				season,
+				playoffs: "regularSeason",
+			},
 			data,
 		};
 	});
@@ -217,7 +224,7 @@ const Draft = ({
 
 	const teamInfoCache = useLocal(state => state.teamInfoCache);
 
-	const rowsDrafted = drafted.map((p, i) => {
+	const rowsDrafted: DataTableRow[] = drafted.map((p, i) => {
 		const data = [
 			`${p.draft.round}-${p.draft.pick}`,
 			{
@@ -354,6 +361,15 @@ const Draft = ({
 
 		return {
 			key: i,
+			metadata:
+				p.pid >= 0
+					? {
+							type: "player",
+							pid: p.pid,
+							season,
+							playoffs: "regularSeason",
+						}
+					: undefined,
 			data,
 			classNames: {
 				"table-info":

src/ui/views/DraftHistory.tsx

@@ -7,6 +7,7 @@ import { bySport, PLAYER } from "../../common";
 import { wrappedAgeAtDeath } from "../components/AgeAtDeath";
 import { wrappedPlayerNameLabels } from "../components/PlayerNameLabels";
 import { orderBy } from "../../common/utils";
+import type { DataTableRow } from "../components/DataTable";
 
 const Summary = ({
 	players,
@@ -187,7 +188,7 @@ const ExportButton = ({ season }: { season: number }) => {
 	const [exporting, setExporting] = useState(false);
 	return (
 		<button
-			className="btn btn-secondary"
+			className="btn btn-secondary mb-3"
 			disabled={exporting}
 			onClick={async () => {
 				setExporting(true);
@@ -270,11 +271,17 @@ const DraftHistory = ({
 
 	const teamInfoCache = useLocal(state => state.teamInfoCache);
 
-	const rows = players.map(p => {
+	const rows: DataTableRow[] = players.map(p => {
 		const showRatings = !challengeNoRatings || p.currentTid === PLAYER.RETIRED;
 
 		return {
 			key: p.pid,
+			metadata: {
+				type: "player",
+				pid: p.pid,
+				season: "career",
+				playoffs: "regularSeason",
+			},
 			data: [
 				p.draft.round >= 1 ? `${p.draft.round}-${p.draft.pick}` : null,
 				wrappedPlayerNameLabels({
@@ -288,9 +295,9 @@ const DraftHistory = ({
 				}),
 				p.pos,
 				{
-					searchValue: `${teamInfoCache[p.draft.tid]?.abbrev} ${teamInfoCache[
-						p.draft.originalTid
-					]?.abbrev}`,
+					searchValue: `${teamInfoCache[p.draft.tid]?.abbrev} ${
+						teamInfoCache[p.draft.originalTid]?.abbrev
+					}`,
 					sortValue: `${p.draft.tid} ${p.draft.originalTid}`,
 					value: (
 						<DraftAbbrev

src/ui/views/DraftTeamHistory.tsx

@@ -10,6 +10,7 @@ import { getCols, helpers, useLocal } from "../util";
 import type { View } from "../../common/types";
 import { PLAYER } from "../../common";
 import { wrappedPlayerNameLabels } from "../components/PlayerNameLabels";
+import type { DataTableRow } from "../components/DataTable";
 
 const DraftTeamHistory = ({
 	abbrev,
@@ -77,11 +78,17 @@ const DraftTeamHistory = ({
 
 	const teamInfoCache = useLocal(state => state.teamInfoCache);
 
-	const rows = players.map(p => {
+	const rows: DataTableRow[] = players.map(p => {
 		const showRatings = !challengeNoRatings || p.currentTid === PLAYER.RETIRED;
 
 		return {
 			key: p.pid,
+			metadata: {
+				type: "player",
+				pid: p.pid,
+				season: "career",
+				playoffs: "regularSeason",
+			},
 			data: [
 				<a href={helpers.leagueUrl(["draft_history", p.draft.year])}>
 					{p.draft.year}

src/ui/views/FreeAgents.tsx

@@ -20,6 +20,7 @@ import clsx from "clsx";
 import { range } from "../../common/utils";
 import type { DropdownOption } from "../hooks/useDropdownOptions";
 import type { FreeAgentTransaction } from "../../worker/views/freeAgents";
+import type { DataTableRow } from "../components/DataTable";
 
 const useSeasonsFreeAgents = () => {
 	const { phase, season, startingSeason } = useLocalPartial([
@@ -188,9 +189,15 @@ const FreeAgents = ({
 		freeAgencySeason +
 		(season === "current" && phase < PHASE.FREE_AGENCY ? 1 : 0);
 
-	const rows = players.map(p => {
+	const rows: DataTableRow[] = players.map(p => {
 		return {
 			key: p.pid,
+			metadata: {
+				type: "player",
+				pid: p.pid,
+				season: playerInfoSeason,
+				playoffs: "regularSeason",
+			},
 			data: [
 				wrappedPlayerNameLabels({
 					pid: p.pid,

src/ui/views/FrivolitiesDraftClasses.tsx

@@ -5,6 +5,7 @@ import type { View } from "../../common/types";
 import { frivolitiesMenu } from "./Frivolities";
 import { bySport } from "../../common";
 import { wrappedPlayerNameLabels } from "../components/PlayerNameLabels";
+import type { DataTableRow } from "../components/DataTable";
 
 const FrivolitiesDraftClasses = ({
 	challengeNoRatings,
@@ -45,12 +46,18 @@ const FrivolitiesDraftClasses = ({
 		...stats.map(stat => `stat:${stat}`),
 	]);
 
-	const rows = draftClasses.map((draftClass, i) => {
+	const rows: DataTableRow[] = draftClasses.map((draftClass, i) => {
 		const p = draftClass.bestPlayer;
 		const showRatings = !challengeNoRatings || p.retiredYear !== Infinity;
 
 		return {
 			key: p.pid,
+			metadata: {
+				type: "player",
+				pid: p.pid,
+				season: "career",
+				playoffs: "regularSeason",
+			},
 			data: [
 				i + 1,
 				<a href={helpers.leagueUrl(["draft_history", draftClass.season])}>

src/ui/views/HallOfFame.tsx

@@ -3,6 +3,7 @@ import { getCols, helpers } from "../util";
 import { DataTable } from "../components";
 import type { View } from "../../common/types";
 import { wrappedPlayerNameLabels } from "../components/PlayerNameLabels";
+import type { DataTableRow } from "../components/DataTable";
 
 const HallOfFame = ({ players, stats, userTid }: View<"hallOfFame">) => {
 	useTitleBar({ title: "Hall of Fame" });
@@ -35,9 +36,15 @@ const HallOfFame = ({ players, stats, userTid }: View<"hallOfFame">) => {
 		...stats.map(stat => `stat:${stat}`),
 	]);
 
-	const rows = players.map(p => {
+	const rows: DataTableRow[] = players.map(p => {
 		return {
 			key: p.pid,
+			metadata: {
+				type: "player",
+				pid: p.pid,
+				season: "career",
+				playoffs: "regularSeason",
+			},
 			data: [
 				wrappedPlayerNameLabels({
 					pid: p.pid,

src/ui/views/Injuries.tsx

@@ -4,6 +4,7 @@ import { getCols, helpers, toWorker } from "../util";
 import type { View } from "../../common/types";
 import { PLAYER } from "../../common";
 import { wrappedPlayerNameLabels } from "../components/PlayerNameLabels";
+import type { DataTableRow } from "../components/DataTable";
 
 const Injuries = ({
 	abbrev,
@@ -35,11 +36,19 @@ const Injuries = ({
 		"Pot Drop",
 	]);
 
-	const rows = injuries.map((p, i) => {
+	const numericSeason = typeof season === "number" ? season : currentSeason;
+
+	const rows: DataTableRow[] = injuries.map((p, i) => {
 		const showRatings = !challengeNoRatings || p.tid === PLAYER.RETIRED;
 
 		return {
 			key: season === "current" ? p.pid : i,
+			metadata: {
+				type: "player",
+				pid: p.pid,
+				season: numericSeason,
+				playoffs: "regularSeason",
+			},
 			data: [
 				wrappedPlayerNameLabels({
 					pid: p.pid,
@@ -50,7 +59,7 @@ const Injuries = ({
 					firstNameShort: p.firstNameShort,
 					lastName: p.lastName,
 					awards: p.awards,
-					awardsSeason: typeof season === "number" ? season : currentSeason,
+					awardsSeason: numericSeason,
 				}),
 				p.ratings.pos,
 				<a