GPTCharts Update

client/src/components/game/GPTHeader.tsx

@@ -1,45 +1,7 @@
 import Navbar from "components/nav/Navbar";
 import NavItem from "components/nav/NavItem";
-import MiniTable from "components/tables/components/MiniTable";
-import ApiError from "components/util/ApiError";
-import Loading from "components/util/Loading";
-import useApiQuery from "components/util/query/useApiQuery";
 import { UserSettingsContext } from "context/UserSettingsContext";
 import React, { useContext } from "react";
-import { Game } from "tachi-common";
-import { GPTStatsReturn } from "types/api-returns";
-import { Playtype } from "types/tachi";
-
-export function GPTHeaderBody({ game, playtype }: { game: Game; playtype: Playtype }) {
-	const { data, isLoading, error } = useApiQuery<GPTStatsReturn>(`/games/${game}/${playtype}`);
-
-	return (
-		<>
-			<div className="col-12 col-lg-4 offset-lg-4">
-				{error ? (
-					<ApiError error={error} />
-				) : isLoading || !data ? (
-					<Loading />
-				) : (
-					<MiniTable headers={["Stats"]} colSpan={2}>
-						<tr>
-							<td>Player Count</td>
-							<td>{data.playerCount}</td>
-						</tr>
-						<tr>
-							<td>Available Charts</td>
-							<td>{data.chartCount}</td>
-						</tr>
-						<tr>
-							<td>Total Scores</td>
-							<td>{data.scoreCount}</td>
-						</tr>
-					</MiniTable>
-				)}
-			</div>
-		</>
-	);
-}
 
 export function GPTBottomNav({ baseUrl }: { baseUrl: string }) {
 	const { settings } = useContext(UserSettingsContext);

client/src/components/game/charts/ChartInfoFormat.tsx

@@ -0,0 +1,108 @@
+import QuickTooltip from "components/layout/misc/QuickTooltip";
+import MiniTable from "components/tables/components/MiniTable";
+import ApiError from "components/util/ApiError";
+import Icon from "components/util/Icon";
+import Loading from "components/util/Loading";
+import Muted from "components/util/Muted";
+import useApiQuery from "components/util/query/useApiQuery";
+import { UserContext } from "context/UserContext";
+import React, { useContext } from "react";
+import { Col, Row } from "react-bootstrap";
+import { Link } from "react-router-dom";
+import { ChartDocument, FolderDocument, Game, GetGamePTConfig } from "tachi-common";
+import { GamePT } from "types/react";
+
+export default function ChartInfoFormat({
+	chart,
+	game,
+	playtype,
+}: { chart: ChartDocument } & GamePT) {
+	const gptConfig = GetGamePTConfig(game, playtype);
+
+	const withTierlists = gptConfig.tierlists.filter(e => chart.tierlistInfo[e]);
+
+	const { data, isLoading, error } = useApiQuery<FolderDocument[]>(
+		`/games/${game}/${playtype}/charts/${chart.chartID}/folders`
+	);
+
+	const { user } = useContext(UserContext);
+
+	if (error) {
+		<ApiError error={error} />;
+	}
+
+	if (!data || isLoading) {
+		return <Loading />;
+	}
+
+	return (
+		<Row
+			className="text-center align-items-center"
+			style={{
+				paddingTop: "2.2rem",
+				justifyContent: "space-evenly",
+			}}
+		>
+			<Col xs={12} lg={3}>
+				<h4>Appears In</h4>
+				{data.length !== 0 ? (
+					data.map(e => (
+						<li key={e.folderID}>
+							{user ? (
+								<Link
+									className="gentle-link"
+									to={`/dashboard/users/${user.username}/games/${game}/${playtype}/folders/${e.folderID}`}
+								>
+									{e.title}
+								</Link>
+							) : (
+								<span>{e.title}</span>
+							)}
+						</li>
+					))
+				) : (
+					<Muted>No folders...</Muted>
+				)}
+			</Col>
+			<Col xs={12} lg={4}>
+				<ChartInfoMiddle chart={chart} game={game} />
+			</Col>
+			<Col xs={12} lg={3}>
+				{withTierlists.length !== 0 ? (
+					<>
+						<MiniTable headers={["Tierlist Info"]} colSpan={2}>
+							{withTierlists.map(e => (
+								<tr key={e}>
+									<td>{e}</td>
+									<td>
+										{chart.tierlistInfo[e]!.text}{" "}
+										<Muted>({chart.tierlistInfo[e]!.value})</Muted>
+										{chart.tierlistInfo[e]!.individualDifference && (
+											<>
+												<br />
+												<QuickTooltip tooltipContent="Individual Difference - The difficulty of this varies massively between people!">
+													<span>
+														<Icon type="balance-scale-left" />
+													</span>
+												</QuickTooltip>
+											</>
+										)}
+									</td>
+								</tr>
+							))}
+						</MiniTable>
+						<Muted>Disagree with these tiers? Let us know in the discord.</Muted>
+					</>
+				) : (
+					<Muted>No tierlist info.</Muted>
+				)}
+			</Col>
+		</Row>
+	);
+}
+
+function ChartInfoMiddle({ game, chart }: { chart: ChartDocument; game: Game }) {
+	// someday
+
+	return <></>;
+}

client/src/components/game/songs/DefaultSongInfoFormat.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { ChartDocument, FormatDifficulty, Game, SongDocument } from "tachi-common";
+
+export default function DefaultSongChartInfoFormat({
+	song,
+	chart,
+	game,
+}: {
+	song: SongDocument;
+	chart: ChartDocument | null;
+	game: Game;
+}) {
+	return (
+		<>
+			<h4>
+				{song.artist} - {song.title}
+			</h4>
+			{chart && <h5>({FormatDifficulty(chart, game)})</h5>}
+		</>
+	);
+}

client/src/components/game/songs/SongInfoFormat.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { ChartDocument, FormatDifficulty, Game, SongDocument } from "tachi-common";
+import { FormatBMSTables } from "util/misc";
+import DefaultSongChartInfoFormat from "./DefaultSongInfoFormat";
+
+export default function SongChartInfoFormat({
+	song: tempSong,
+	chart: tempChart,
+	game,
+}: {
+	song: SongDocument;
+	chart: ChartDocument | null;
+	game: Game;
+}) {
+	// lazy casting hack to avoid IDStrings
+	const props = { song: tempSong, chart: tempChart, game } as any;
+	const { song, chart } = props;
+
+	if (game === "bms") {
+		if (!chart) {
+			return (
+				<>
+					<h4>{song.data.genre}</h4>
+					<h4 style={{ fontSize: "2.5rem", fontWeight: "bold" }}>{song.title}</h4>
+					<h4>{song.artist}</h4>
+				</>
+			);
+		}
+		const hasLevel = chart.data.tableFolders.length > 0;
+
+		const levelText = hasLevel ? FormatBMSTables(chart.data.tableFolders) : "No Level";
+
+		return (
+			<>
+				<h4>{song.data.genre}</h4>
+				<h4 style={{ fontSize: "2.5rem", fontWeight: "bold" }}>{song.title}</h4>
+				<h4>{song.artist}</h4>
+				{chart && <h5>({levelText})</h5>}
+			</>
+		);
+	} else if (game === "iidx") {
+		return (
+			<>
+				<h4>{song.data.genre}</h4>
+				<h4 style={{ fontSize: "2.5rem", fontWeight: "bold" }}>{song.title}</h4>
+				<h4>{song.artist}</h4>
+				{chart && <h5>({FormatDifficulty(chart, game)})</h5>}
+			</>
+		);
+	}
+
+	return <DefaultSongChartInfoFormat {...props} />;
+}

client/src/components/tables/dropdowns/GenericPBDropdown.tsx

@@ -1,23 +1,18 @@
+import ApiError from "components/util/ApiError";
 import DebugContent from "components/util/DebugContent";
+import HasDevModeOn from "components/util/HasDevModeOn";
 import Icon from "components/util/Icon";
-import SelectButton from "components/util/SelectButton";
-import React, { useContext, useMemo, useState } from "react";
-import DropdownStructure from "./components/DropdownStructure";
-import {
-	PublicUserDocument,
-	ChartDocument,
-	ScoreDocument,
-	PBScoreDocument,
-	IDStrings,
-} from "tachi-common";
-import { GamePT, SetState } from "types/react";
-import { UGPTChartPBComposition } from "types/api-returns";
 import Loading from "components/util/Loading";
+import useApiQuery from "components/util/query/useApiQuery";
+import SelectButton from "components/util/SelectButton";
+import { UserSettingsContext } from "context/UserSettingsContext";
+import React, { useContext, useMemo, useState } from "react";
+import { ChartDocument, IDStrings, integer, PBScoreDocument, ScoreDocument } from "tachi-common";
+import { UGPTChartPBComposition } from "types/api-returns";
+import { GamePT, SetState } from "types/react";
+import DropdownStructure from "./components/DropdownStructure";
 import GenericScoreContentDropdown from "./components/GenericScoreContentDropdown";
 import PlayHistory from "./components/PlayHistory";
-import useApiQuery from "components/util/query/useApiQuery";
-import { UserSettingsContext } from "context/UserSettingsContext";
-import HasDevModeOn from "components/util/HasDevModeOn";
 
 export interface ScoreState {
 	highlight: boolean;
@@ -33,13 +28,13 @@ export interface ScoreDropdownProps<I extends IDStrings = IDStrings> {
 export default function GenericPBDropdown<I extends IDStrings = IDStrings>({
 	game,
 	playtype,
-	reqUser,
 	chart,
 	scoreState,
 	defaultView = "pb",
+	userID,
 	DocComponent = GenericScoreContentDropdown,
 }: {
-	reqUser: PublicUserDocument;
+	userID: integer;
 	chart: ChartDocument;
 	scoreState: ScoreState;
 	defaultView?: "pb" | "scorePB" | "lampPB" | "history" | "debug";
@@ -55,12 +50,12 @@ export default function GenericPBDropdown<I extends IDStrings = IDStrings>({
 	const [view, setView] = useState(defaultView);
 
 	const { isLoading, error, data } = useApiQuery<UGPTChartPBComposition<I>>(
-		`/users/${reqUser.id}/games/${game}/${playtype}/pbs/${chart.chartID}?getComposition=true`
+		`/users/${userID}/games/${game}/${playtype}/pbs/${chart.chartID}?getComposition=true`
 	);
 
 	const { isLoading: histIsLoading, error: histError, data: histData } = useApiQuery<
 		ScoreDocument<I>[]
-	>(`/users/${reqUser.id}/games/${game}/${playtype}/scores/${chart.chartID}`);
+	>(`/users/${userID}/games/${game}/${playtype}/scores/${chart.chartID}`);
 
 	const currentScoreDoc: ScoreDocument<I> | PBScoreDocument<I> | null = useMemo(() => {
 		if (!data) {
@@ -73,7 +68,7 @@ export default function GenericPBDropdown<I extends IDStrings = IDStrings>({
 				// scores have more information than PBs.
 				// In this case, the PB is only composed of one score,
 				// so we should default to this instead.
-				return data.scores[0];
+				return data.scores.filter(e => e.scoreID === data.pb.composedFrom.lampPB)[0];
 			}
 			return data.pb;
 		}
@@ -89,7 +84,7 @@ export default function GenericPBDropdown<I extends IDStrings = IDStrings>({
 	}, [view, data]);
 
 	if (error) {
-		return <>An error has occured. Whoops.</>;
+		return <ApiError error={error} />;
 	}
 
 	if (isLoading || !data) {

client/src/components/tables/dropdowns/IIDXPBDropdown.tsx

@@ -1,5 +1,11 @@
 import React from "react";
-import { ChartDocument, PBScoreDocument, PublicUserDocument, ScoreDocument } from "tachi-common";
+import {
+	ChartDocument,
+	integer,
+	PBScoreDocument,
+	PublicUserDocument,
+	ScoreDocument,
+} from "tachi-common";
 import { UGPTChartPBComposition } from "types/api-returns";
 import { GamePT, SetState } from "types/react";
 import DropdownScoreButtons from "./components/DropdownScoreButtons";
@@ -10,11 +16,11 @@ import GenericPBDropdown, { ScoreState } from "./GenericPBDropdown";
 export default function IIDXPBDropdown({
 	game,
 	playtype,
-	reqUser,
 	chart,
 	scoreState,
+	userID,
 }: {
-	reqUser: PublicUserDocument;
+	userID: integer;
 	chart: ChartDocument<"iidx:SP" | "iidx:DP">;
 	scoreState: {
 		highlight: boolean;
@@ -23,7 +29,7 @@ export default function IIDXPBDropdown({
 } & GamePT) {
 	return (
 		<GenericPBDropdown
-			{...{ game, playtype, chart, reqUser, scoreState }}
+			{...{ game, playtype, chart, userID, scoreState }}
 			DocComponent={DocumentDisplay}
 		/>
 	);

client/src/components/tables/folders/BMSFolderTable.tsx

@@ -94,7 +94,7 @@ function Row({
 			dropdown={
 				<GenericPBDropdown
 					chart={data}
-					reqUser={reqUser}
+					userID={score.userID}
 					game={game}
 					playtype={data.playtype}
 					scoreState={scoreState}

client/src/components/tables/folders/GenericFolderTable.tsx

@@ -106,7 +106,7 @@ function Row({
 			dropdown={
 				<GenericPBDropdown
 					chart={data}
-					reqUser={reqUser}
+					userID={score.userID}
 					game={game}
 					playtype={data.playtype}
 					scoreState={scoreState}

client/src/components/tables/folders/IIDXFolderTable.tsx

@@ -117,7 +117,7 @@ function Row({
 			dropdown={
 				<IIDXPBDropdown
 					chart={data}
-					reqUser={reqUser}
+					userID={score.userID}
 					game={game}
 					playtype={data.playtype}
 					scoreState={scoreState}

client/src/components/tables/folders/MusecaFolderTable.tsx

@@ -89,7 +89,7 @@ function Row({
 			dropdown={
 				<GenericPBDropdown
 					chart={data}
-					reqUser={reqUser}
+					userID={score.userID}
 					game={game}
 					playtype={data.playtype}
 					scoreState={scoreState}

client/src/components/tables/folders/SDVXFolderTable.tsx

@@ -88,7 +88,7 @@ function Row({
 			dropdown={
 				<GenericPBDropdown
 					chart={data}
-					reqUser={reqUser}
+					userID={score.userID}
 					game={game}
 					playtype={data.playtype}
 					scoreState={scoreState}

client/src/components/tables/game-core-cells/ScoreCoreCells.tsx

@@ -1,5 +1,11 @@
 import React from "react";
-import { Game, IDStrings, ScoreCalculatedDataLookup, ScoreDocument } from "tachi-common";
+import {
+	Game,
+	IDStrings,
+	PBScoreDocument,
+	ScoreCalculatedDataLookup,
+	ScoreDocument,
+} from "tachi-common";
 import { GamePT } from "types/react";
 import BMSScoreCoreCells from "./BMSScoreCoreCells";
 import GenericScoreCoreCells from "./GenericScoreCoreCells";
@@ -12,7 +18,7 @@ export default function ScoreCoreCells({
 	score,
 	rating,
 }: {
-	score: ScoreDocument;
+	score: ScoreDocument | PBScoreDocument;
 	rating: ScoreCalculatedDataLookup[IDStrings];
 	game: Game;
 }) {

client/src/components/tables/pbs/BMSPBTable.tsx

@@ -36,12 +36,10 @@ export default function BMSPBTable({
 	dataset,
 	indexCol = true,
 	showPlaycount = false,
-	reqUser,
 	playtype,
 }: {
 	dataset: PBDataset<"bms:7K" | "bms:14K">;
 	indexCol?: boolean;
-	reqUser: PublicUserDocument;
 	showPlaycount?: boolean;
 	playtype: "7K" | "14K";
 }) {
@@ -110,7 +108,6 @@ export default function BMSPBTable({
 				<Row
 					pb={pb}
 					key={`${pb.chartID}:${pb.userID}`}
-					reqUser={reqUser}
 					showPlaycount={showPlaycount}
 					indexCol={indexCol}
 				/>
@@ -122,13 +119,11 @@ export default function BMSPBTable({
 function Row({
 	pb,
 	indexCol,
-	reqUser,
 	showPlaycount,
 }: {
 	pb: PBDataset<"bms:7K" | "bms:14K">[0];
 	indexCol: boolean;
 	showPlaycount: boolean;
-	reqUser: PublicUserDocument;
 }) {
 	const scoreState = usePBState(pb);
 
@@ -137,7 +132,7 @@ function Row({
 			dropdown={
 				<GenericPBDropdown
 					chart={pb.__related.chart}
-					reqUser={reqUser}
+					userID={pb.userID}
 					game={pb.game}
 					playtype={pb.playtype}
 					scoreState={scoreState}

client/src/components/tables/pbs/GenericPBTable.tsx

@@ -24,7 +24,6 @@ export default function GenericPBTable({
 	dataset,
 	indexCol = true,
 	showPlaycount = false,
-	reqUser,
 	game,
 	playtype,
 	showScore,
@@ -32,7 +31,6 @@ export default function GenericPBTable({
 	dataset: PBDataset;
 	indexCol?: boolean;
 	showPlaycount?: boolean;
-	reqUser: PublicUserDocument;
 	game: Game;
 	playtype: Playtype;
 	showScore?: boolean;
@@ -73,7 +71,6 @@ export default function GenericPBTable({
 				<Row
 					pb={pb}
 					key={`${pb.chartID}:${pb.userID}`}
-					reqUser={reqUser}
 					indexCol={indexCol}
 					showScore={showScore}
 					showPlaycount={showPlaycount}
@@ -86,14 +83,12 @@ export default function GenericPBTable({
 function Row({
 	pb,
 	indexCol,
-	reqUser,
 	showScore,
 	showPlaycount,
 }: {
 	pb: PBDataset[0];
 	indexCol: boolean;
 	showPlaycount: boolean;
-	reqUser: PublicUserDocument;
 	showScore?: boolean;
 }) {
 	const scoreState = usePBState(pb);
@@ -103,13 +98,12 @@ function Row({
 			dropdown={
 				<GenericPBDropdown
 					chart={pb.__related.chart}
-					reqUser={reqUser}
+					userID={pb.userID}
 					game={pb.game}
 					playtype={pb.playtype}
 					scoreState={scoreState}
 				/>
 			}
-			
 		>
 			{indexCol && <IndexCell index={pb.__related.index} />}
 			<DifficultyCell game={pb.game} chart={pb.__related.chart} />

client/src/components/tables/pbs/IIDXPBTable.tsx

@@ -1,13 +1,13 @@
 import useScoreRatingAlg from "components/util/useScoreRatingAlg";
+import { UserContext } from "context/UserContext";
 import { nanoid } from "nanoid";
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { PublicUserDocument, ScoreCalculatedDataLookup } from "tachi-common";
-import { FormatDifficulty } from "tachi-common/js/utils/util";
 import { PBDataset } from "types/tables";
 import { IsNullish } from "util/misc";
 import { NumericSOV, StrSOV } from "util/sorts";
-import { HumanFriendlyStrToGradeIndex, HumanFriendlyStrToLampIndex } from "util/str-to-num";
 import { CreateDefaultPBSearchParams } from "util/tables/create-search";
+import { GetPBLeadingHeaders } from "util/tables/get-pb-leaders";
 import DeltaCell from "../cells/DeltaCell";
 import DifficultyCell from "../cells/DifficultyCell";
 import IIDXLampCell from "../cells/IIDXLampCell";
@@ -17,36 +17,40 @@ import RankingCell from "../cells/RankingCell";
 import ScoreCell from "../cells/ScoreCell";
 import TimestampCell from "../cells/TimestampCell";
 import TitleCell from "../cells/TitleCell";
+import UserCell from "../cells/UserCell";
 import DropdownRow from "../components/DropdownRow";
 import SelectableRating from "../components/SelectableRating";
 import TachiTable, { Header, ZTableTHProps } from "../components/TachiTable";
 import { usePBState } from "../components/UseScoreState";
 import IIDXPBDropdown from "../dropdowns/IIDXPBDropdown";
-import IndicatorHeader from "../headers/IndicatorHeader";
 
 export default function IIDXPBTable({
 	dataset,
 	indexCol = true,
 	showPlaycount = false,
-	reqUser,
+	showUser = false,
+	showChart = true,
 	alg,
 	playtype,
 }: {
 	dataset: PBDataset<"iidx:SP" | "iidx:DP">;
 	indexCol?: boolean;
 	showPlaycount?: boolean;
-	reqUser: PublicUserDocument;
+	showUser?: boolean;
+	showChart?: boolean;
 	alg?: ScoreCalculatedDataLookup["iidx:SP" | "iidx:DP"];
 	playtype: "SP" | "DP";
 }) {
 	const defaultRating = useScoreRatingAlg<"iidx:SP" | "iidx:DP">("iidx", playtype);
 
+	console.log(alg, defaultRating);
+
 	const [rating, setRating] = useState<ScoreCalculatedDataLookup["iidx:SP" | "iidx:DP"]>(
 		alg ?? defaultRating
 	);
 
 	const headers: Header<PBDataset<"iidx:SP" | "iidx:DP">[0]>[] = [
-		[
+		...GetPBLeadingHeaders(showUser, showChart, [
 			"Chart",
 			"Chart",
 			NumericSOV(
@@ -55,9 +59,7 @@ export default function IIDXPBTable({
 					x.__related.chart.tierlistInfo["kt-HC"]?.value ??
 					x.__related.chart.levelNum
 			),
-		],
-		IndicatorHeader,
-		["Song", "Song", StrSOV(x => x.__related.song.title)],
+		]),
 		["Score", "Score", NumericSOV(x => x.scoreData.percent)],
 		["Deltas", "Deltas", NumericSOV(x => x.scoreData.percent)],
 		["Lamp", "Lamp", NumericSOV(x => x.scoreData.lampIndex)],
@@ -69,7 +71,7 @@ export default function IIDXPBTable({
 				<SelectableRating<"iidx:SP" | "iidx:DP">
 					key={nanoid()}
 					game="iidx"
-					playtype="SP"
+					playtype={playtype}
 					rating={rating}
 					setRating={setRating}
 					{...thProps}
@@ -84,10 +86,16 @@ export default function IIDXPBTable({
 		headers.push(["Playcount", "Plays", NumericSOV(x => x.__playcount ?? 0)]);
 	}
 
+	// if (hideRankingCell) {
+
+	// }
+
 	if (indexCol) {
 		headers.unshift(["#", "#", NumericSOV(x => x.__related.index)]);
 	}
 
+	const { user } = useContext(UserContext);
+
 	return (
 		<TachiTable
 			dataset={dataset}
@@ -99,10 +107,12 @@ export default function IIDXPBTable({
 				<Row
 					pb={pb}
 					key={`${pb.chartID}:${pb.userID}`}
-					reqUser={reqUser}
 					showPlaycount={showPlaycount}
 					indexCol={indexCol}
 					rating={rating}
+					showUser={showUser}
+					showChart={showChart}
+					user={user}
 				/>
 			)}
 		/>
@@ -112,24 +122,29 @@ export default function IIDXPBTable({
 function Row({
 	pb,
 	indexCol,
-	reqUser,
 	rating,
 	showPlaycount,
+	showChart,
+	showUser,
+	user,
 }: {
 	pb: PBDataset<"iidx:SP" | "iidx:DP">[0];
 	indexCol: boolean;
-	reqUser: PublicUserDocument;
 	showPlaycount: boolean;
+	showUser: boolean;
+	showChart: boolean;
 	rating: ScoreCalculatedDataLookup["iidx:SP"];
+	user: PublicUserDocument | null;
 }) {
 	const scoreState = usePBState(pb);
 
 	return (
 		<DropdownRow
+			className={pb.userID === user?.id ? "highlighted-row" : ""}
 			dropdown={
 				<IIDXPBDropdown
 					chart={pb.__related.chart}
-					reqUser={reqUser}
+					userID={pb.userID}
 					game="iidx"
 					playtype={pb.playtype}
 					scoreState={scoreState}
@@ -137,9 +152,27 @@ function Row({
 			}
 		>
 			{indexCol && <IndexCell index={pb.__related.index} />}
-			<DifficultyCell chart={pb.__related.chart} game={"iidx"} />
-			<IndicatorsCell highlight={scoreState.highlight} />
-			<TitleCell song={pb.__related.song} chart={pb.__related.chart} game="iidx" />
+			{showUser && showChart && (
+				<>
+					<UserCell game="iidx" playtype={pb.playtype} user={pb.__related.user!} />
+					<DifficultyCell chart={pb.__related.chart} game={"iidx"} />
+					<IndicatorsCell highlight={scoreState.highlight} />
+					<TitleCell song={pb.__related.song} chart={pb.__related.chart} game="iidx" />
+				</>
+			)}
+			{showUser && !showChart && (
+				<>
+					<IndicatorsCell highlight={scoreState.highlight} />
+					<UserCell game="iidx" playtype={pb.playtype} user={pb.__related.user!} />
+				</>
+			)}
+			{!showUser && showChart && (
+				<>
+					<DifficultyCell chart={pb.__related.chart} game={"iidx"} />
+					<IndicatorsCell highlight={scoreState.highlight} />
+					<TitleCell song={pb.__related.song} chart={pb.__related.chart} game="iidx" />
+				</>
+			)}
 			<ScoreCell score={pb} />
 			<DeltaCell
 				game="iidx"

client/src/components/tables/pbs/MusecaPBTable.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { PublicUserDocument } from "tachi-common";
 import { PBDataset } from "types/tables";
 import { NumericSOV, StrSOV } from "util/sorts";
-import { HumanFriendlyStrToGradeIndex, HumanFriendlyStrToLampIndex } from "util/str-to-num";
 import { CreateDefaultPBSearchParams } from "util/tables/create-search";
 import DifficultyCell from "../cells/DifficultyCell";
 import IndexCell from "../cells/IndexCell";
@@ -24,13 +23,11 @@ export default function MusecaPBTable({
 	dataset,
 	indexCol = true,
 	showPlaycount = false,
-	reqUser,
 	playtype,
 }: {
 	dataset: PBDataset<"museca:Single">;
 	indexCol?: boolean;
 	showPlaycount?: boolean;
-	reqUser: PublicUserDocument;
 	playtype: "Single";
 }) {
 	const headers: Header<PBDataset<"museca:Single">[0]>[] = [
@@ -64,7 +61,6 @@ export default function MusecaPBTable({
 				<Row
 					pb={pb}
 					key={`${pb.chartID}:${pb.userID}`}
-					reqUser={reqUser}
 					indexCol={indexCol}
 					showPlaycount={showPlaycount}
 				/>
@@ -76,13 +72,11 @@ export default function MusecaPBTable({
 function Row({
 	pb,
 	indexCol,
-	reqUser,
 	showPlaycount,
 }: {
 	pb: PBDataset<"museca:Single">[0];
 	indexCol: boolean;
 	showPlaycount: boolean;
-	reqUser: PublicUserDocument;
 }) {
 	const scoreState = usePBState(pb);
 
@@ -91,7 +85,7 @@ function Row({
 			dropdown={
 				<GenericPBDropdown
 					chart={pb.__related.chart}
-					reqUser={reqUser}
+					userID={pb.userID}
 					game={pb.game}
 					playtype={pb.playtype}
 					scoreState={scoreState}

client/src/components/tables/pbs/PBTable.tsx

@@ -11,23 +11,25 @@ import SDVXPBTable from "./SDVXPBTable";
 export default function PBTable({
 	dataset,
 	indexCol = true,
-	reqUser,
 	playtype,
 	showPlaycount,
 	game,
 	alg,
+	showChart = true,
+	showUser = false,
 }: {
 	dataset: PBDataset;
 	indexCol?: boolean;
 	showPlaycount?: boolean;
-	reqUser: PublicUserDocument;
 	alg?: ScoreCalculatedDataLookup[IDStrings];
+	showChart?: boolean;
+	showUser?: boolean;
 } & GamePT) {
 	// We're just going to ignore all these errors
 	// and assume we just won't make a mistake.
 	// ever.
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	const props = { dataset, indexCol, reqUser, playtype, showPlaycount, alg } as any;
+	const props = { dataset, indexCol, playtype, showPlaycount, alg, showChart, showUser } as any;
 
 	if (game === "iidx") {
 		return <IIDXPBTable {...props} />;

client/src/components/tables/pbs/SDVXPBTable.tsx

@@ -23,13 +23,11 @@ export default function SDVXPBTable({
 	dataset,
 	indexCol = true,
 	showPlaycount = false,
-	reqUser,
 	playtype,
 }: {
 	dataset: PBDataset<"sdvx:Single">;
 	indexCol?: boolean;
 	showPlaycount?: boolean;
-	reqUser: PublicUserDocument;
 	playtype: "7K" | "14K";
 }) {
 	const headers: Header<PBDataset<"sdvx:Single">[0]>[] = [
@@ -63,7 +61,6 @@ export default function SDVXPBTable({
 				<Row
 					pb={pb}
 					key={`${pb.chartID}:${pb.userID}`}
-					reqUser={reqUser}
 					indexCol={indexCol}
 					showPlaycount={showPlaycount}
 				/>
@@ -76,12 +73,10 @@ function Row({
 	pb,
 	indexCol,
 	showPlaycount,
-	reqUser,
 }: {
 	pb: PBDataset<"sdvx:Single">[0];
 	indexCol: boolean;
 	showPlaycount: boolean;
-	reqUser: PublicUserDocument;
 }) {
 	const scoreState = usePBState(pb);
 
@@ -90,13 +85,12 @@ function Row({
 			dropdown={
 				<GenericPBDropdown
 					chart={pb.__related.chart}
-					reqUser={reqUser}
+					userID={pb.userID}
 					game={pb.game}
 					playtype={pb.playtype}
 					scoreState={scoreState}
 				/>
 			}
-			
 		>
 			{indexCol && <IndexCell index={pb.__related.index} />}
 			<DifficultyCell game="sdvx" chart={pb.__related.chart} />

client/src/components/tables/scores/GenericScoreTable.tsx

@@ -87,7 +87,6 @@ function Row({
 
 	return (
 		<DropdownRow
-			
 			dropdown={
 				<GenericScoreDropdown
 					chart={sc.__related.chart}

client/src/components/tables/scores/IIDXScoreTable.tsx

@@ -1,7 +1,7 @@
 import useScoreRatingAlg from "components/util/useScoreRatingAlg";
 import { nanoid } from "nanoid";
 import React, { useState } from "react";
-import { integer, Playtypes, PublicUserDocument, ScoreCalculatedDataLookup } from "tachi-common";
+import { integer, Playtypes, ScoreCalculatedDataLookup } from "tachi-common";
 import { ScoreDataset } from "types/tables";
 import { Playtype } from "types/tachi";
 import { NumericSOV, StrSOV } from "util/sorts";
@@ -108,7 +108,6 @@ function Row({
 
 	return (
 		<DropdownRow
-			
 			dropdown={
 				<IIDXScoreDropdown
 					chart={sc.__related.chart}

client/src/components/tables/scores/MusecaScoreTable.tsx

@@ -68,7 +68,6 @@ function Row({
 
 	return (
 		<DropdownRow
-			
 			dropdown={
 				<GenericScoreDropdown
 					chart={sc.__related.chart}

client/src/components/util/LinkButton.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { Link } from "react-router-dom";
 import { JustChildren } from "types/react";
 
@@ -6,12 +6,16 @@ export default function LinkButton({
 	to,
 	className = "btn-primary",
 	children,
+	style,
+	onClick,
 }: {
 	to: string;
 	className?: string;
+	style?: CSSProperties;
+	onClick?: () => void;
 } & JustChildren) {
 	return (
-		<Link to={to} className={`btn ${className}`}>
+		<Link onClick={onClick} to={to} className={`btn ${className}`} style={style}>
 			{children}
 		</Link>
 	);