mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-21 07:14:11 +00:00
f0f554392d
## Summary - Implement pagination for media assets history to handle large datasets efficiently - Add infinite scroll support with approach-end event handler - Support offset parameter in history API for both V1 and V2 endpoints ## Changes - Add offset parameter support to `api.getHistory()` method - Update history fetchers (V1/V2) to include offset in API requests - Implement `loadMoreHistory()` in assetsStore with pagination state management - Add `loadMore`, `hasMore`, and `isLoadingMore` to IAssetsProvider interface - Add approach-end handler in AssetsSidebarTab for infinite scroll - Set BATCH_SIZE to 200 for efficient loading ## Implementation Improvements Simplified offset-based pagination by removing unnecessary reconciliation logic: - Remove `reconcileHistory`, `taskItemsMap`, `lastKnownQueueIndex` (offset is sufficient) - Replace `assetItemsByPromptId` Map → `loadedIds` Set (store IDs only) - Replace `findInsertionIndex` binary search → push + sort (faster for batch operations) - Replace `loadingPromise` → `isLoadingMore` boolean (simpler state management) - Fix memory leak by cleaning up Set together with array slice ## Test Plan - [x] TypeScript compilation passes - [x] ESLint and Prettier formatting applied - [x] Test infinite scroll in media assets tab - [x] Verify network requests include correct offset parameter - [x] Confirm no duplicate items when loading more 🤖 Generated with [Claude Code](https://claude.ai/code) --------- Co-authored-by: Claude <noreply@anthropic.com>
30 lines
732 B
Vue
30 lines
732 B
Vue
<template>
|
|
<div class="flex flex-col items-center gap-1">
|
|
<MediaTitle :file-name="fileName" />
|
|
<!-- TBD: File size will be provided by backend history API -->
|
|
<div
|
|
v-if="asset.size"
|
|
class="flex items-center gap-2 text-xs text-zinc-400"
|
|
>
|
|
<span>{{ formatSize(asset.size) }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
import { formatSize, getFilenameDetails } from '@/utils/formatUtil'
|
|
|
|
import type { AssetMeta } from '../schemas/mediaAssetSchema'
|
|
import MediaTitle from './MediaTitle.vue'
|
|
|
|
const { asset } = defineProps<{
|
|
asset: AssetMeta
|
|
}>()
|
|
|
|
const fileName = computed(() => {
|
|
return getFilenameDetails(asset.name).filename
|
|
})
|
|
</script>
|