performance: faster version table load in app for projects with a lot of game versions (#8089)

* performance: faster version table load by ensuring game versions is cached/reused in a vue computed

* pnpm prepr

Author: tdgao

packages/ui/src/components/project/ProjectPageVersions.vue

@@ -123,10 +123,7 @@
 		<template #cell-gameVersions="{ row: version }">
 			<div class="flex min-w-0 w-full max-w-[12rem] flex-wrap gap-1">
 				<TagItem
-					v-for="gameVersionGroup in getDisplayGameVersions(version).slice(
-						0,
-						MAX_GAME_VERSION_TAGS,
-					)"
+					v-for="gameVersionGroup in version.gameVersionGroups.slice(0, MAX_GAME_VERSION_TAGS)"
 					:key="`version-tag-${gameVersionGroup.label}`"
 					v-tooltip="getFilterTooltip(gameVersionGroup.label)"
 					data-no-row-click
@@ -136,23 +133,21 @@
 					<span class="min-w-0 truncate">{{ gameVersionGroup.label }}</span>
 				</TagItem>
 				<FloatingMenu
-					v-if="getDisplayGameVersions(version).length > MAX_GAME_VERSION_TAGS"
+					v-if="version.gameVersionGroups.length > MAX_GAME_VERSION_TAGS"
 					trigger="hover"
 					placement="bottom"
 					data-no-row-click
 					class="w-full min-w-0 cursor-default"
 				>
 					<TagItem class="w-fit max-w-full truncate" tabindex="0">
 						<span class="min-w-0 truncate">
-							+{{ getDisplayGameVersions(version).length - MAX_GAME_VERSION_TAGS }}
+							+{{ version.gameVersionGroups.length - MAX_GAME_VERSION_TAGS }}
 						</span>
 					</TagItem>
 					<template #popper>
 						<div class="flex max-w-[20rem] flex-wrap gap-1">
 							<TagItem
-								v-for="gameVersionGroup in getDisplayGameVersions(version).slice(
-									MAX_GAME_VERSION_TAGS,
-								)"
+								v-for="gameVersionGroup in version.gameVersionGroups.slice(MAX_GAME_VERSION_TAGS)"
 								:key="`overflow-version-tag-${gameVersionGroup.label}`"
 								class="w-fit max-w-full truncate"
 								:action="
@@ -328,7 +323,7 @@
 					<div class="flex flex-col justify-center gap-3">
 						<div class="flex flex-row flex-wrap items-center gap-1.5">
 							<TagItem
-								v-for="gameVersionGroup in getDisplayGameVersions(version).slice(
+								v-for="gameVersionGroup in version.gameVersionGroups.slice(
 									0,
 									MAX_GAME_VERSION_TAGS,
 								)"
@@ -342,18 +337,18 @@
 								{{ gameVersionGroup.label }}
 							</TagItem>
 							<FloatingMenu
-								v-if="getDisplayGameVersions(version).length > MAX_GAME_VERSION_TAGS"
+								v-if="version.gameVersionGroups.length > MAX_GAME_VERSION_TAGS"
 								trigger="hover"
 								placement="bottom"
 								class="cursor-default smart-clickable:allow-pointer-events"
 							>
 								<TagItem tabindex="0">
-									+{{ getDisplayGameVersions(version).length - MAX_GAME_VERSION_TAGS }}
+									+{{ version.gameVersionGroups.length - MAX_GAME_VERSION_TAGS }}
 								</TagItem>
 								<template #popper>
 									<div class="flex max-w-[20rem] flex-wrap gap-1">
 										<TagItem
-											v-for="gameVersionGroup in getDisplayGameVersions(version).slice(
+											v-for="gameVersionGroup in version.gameVersionGroups.slice(
 												MAX_GAME_VERSION_TAGS,
 											)"
 											:key="`overflow-version-tag-${gameVersionGroup.label}`"
@@ -526,7 +521,9 @@ type VersionTableColumn =
 	| 'published'
 	| 'downloads'
 	| 'actions'
-type VersionTableRow = DisplayVersion & Record<string, unknown>
+type VersionTableRow = DisplayVersion & {
+	gameVersionGroups: VersionDisplayGroup[]
+} & Record<string, unknown>
 
 const props = withDefaults(
 	defineProps<{
@@ -643,10 +640,6 @@ function hasNoModLoader(loaders: string[]): boolean {
 	)
 }
 
-function getDisplayGameVersions(version: DisplayVersion): VersionDisplayGroup[] {
-	return getVersionGroupsForDisplay(version.game_versions, props.gameVersions)
-}
-
 function getFilterTooltip(filter: string): string {
 	return formatMessage(messages.toggleFilterTooltip, { filter })
 }
@@ -726,10 +719,12 @@ function isAnySelected(value: string, selected: string[]) {
 }
 
 const currentVersions = computed(() =>
-	filteredVersions.value.slice(
-		(currentPage.value - 1) * pageSize.value,
-		currentPage.value * pageSize.value,
-	),
+	filteredVersions.value
+		.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
+		.map((version) => ({
+			...version,
+			gameVersionGroups: getVersionGroupsForDisplay(version.game_versions, props.gameVersions),
+		})),
 )
 const currentVersionRows = computed<VersionTableRow[]>(
 	() => currentVersions.value as VersionTableRow[],

packages/utils/projects.ts

@@ -88,6 +88,7 @@ export function getVersionGroupsForDisplay(
 ): VersionDisplayGroup[] {
 	const inputVersions = gameVersions.slice()
 	const allVersions = allGameVersions.slice()
+	const versionTags = new Map(allVersions.map((version) => [version.version, version]))
 
 	const allSnapshots = allVersions.filter((version) => version.version_type === 'snapshot')
 	const allReleases = allVersions.filter((version) => version.version_type === 'release')
@@ -103,20 +104,20 @@ export function getVersionGroupsForDisplay(
 		inputVersions.sort((a, b) => indices[a] - indices[b])
 	}
 
-	const releaseVersions = inputVersions.filter((projVer) =>
-		allReleases.some((gameVer) => gameVer.version === projVer),
+	const releaseVersions = inputVersions.filter(
+		(projVer) => versionTags.get(projVer)?.version_type === 'release',
 	)
 
-	const dateString = allReleases.find((version) => version.version === releaseVersions[0])?.date
+	const dateString = versionTags.get(releaseVersions[0])?.date
 
 	const latestReleaseVersionDate = dateString ? Date.parse(dateString) : 0
-	const latestSnapshot = inputVersions.find((projVer) =>
-		allSnapshots.some(
-			(gameVer) =>
-				gameVer.version === projVer &&
-				(!latestReleaseVersionDate || latestReleaseVersionDate < Date.parse(gameVer.date)),
-		),
-	)
+	const latestSnapshot = inputVersions.find((projVer) => {
+		const gameVer = versionTags.get(projVer)
+		return (
+			gameVer?.version_type === 'snapshot' &&
+			(!latestReleaseVersionDate || latestReleaseVersionDate < Date.parse(gameVer.date))
+		)
+	})
 
 	const allReleasesGrouped = groupVersions(
 		allReleases.map((release) => release.version),
@@ -146,16 +147,19 @@ export function getVersionGroupsForDisplay(
 	)
 
 	const legacyVersionsAsRanges = groupConsecutiveIndices(
-		inputVersions.filter((projVer) => allLegacy.some((gameVer) => gameVer.version === projVer)),
+		inputVersions.filter((projVer) => {
+			const gameVer = versionTags.get(projVer)
+			return gameVer && gameVer.version_type !== 'snapshot' && gameVer.version_type !== 'release'
+		}),
 		allLegacy,
 	)
 
 	let output: VersionDisplayGroup[] = [...legacyVersionsAsRanges]
 
 	// show all snapshots if there's no release versions
 	if (releaseVersionsAsRanges.length === 0) {
-		const snapshotVersions = inputVersions.filter((projVer) =>
-			allSnapshots.some((gameVer) => gameVer.version === projVer),
+		const snapshotVersions = inputVersions.filter(
+			(projVer) => versionTags.get(projVer)?.version_type === 'snapshot',
 		)
 		const snapshotVersionsAsRanges =
 			snapshotVersions.length > 3