Process slideshow requests in batches, add more memory

web/src/harmonie/ReferenceTimes.tsx

@@ -6,7 +6,7 @@ import { drawGrib } from './draw/drawGrib'
 import { CROP_BOUNDS } from './DrawView'
 
 import styles from './harmonie.module.css'
-import { handleProgressivePromises } from '../helpers/progressivePromises'
+import { processPromisesInBatches } from '../helpers/progressivePromises'
 
 const METEO_PARAMS: [string, MeteoParam][] = [
     ['temperature', { discipline: 0, category: 0, product: 0, levelType: -1, levelValue: -1, subType: 'now' }],
@@ -62,7 +62,7 @@ export const ReferenceTimes: Component<{
             .map((grib): [string, undefined] => [grib.time.forecastTime, undefined])
             .sort((a, b) => a[0] > b[0] ? 1 : -1)
         setImgList(emptyImgList)
-        const promiseList = forecastList.map(async (grib): Promise<[string, ImageBitmap]> => {
+        const promiseFnsList = forecastList.map((grib): () => Promise<[string, ImageBitmap]> => async () => {
             const canvas = document.createElement('canvas')
             const [messages, buffers, bitmasks] = await fetchGribBinaries(grib, getGribList())
             drawGrib(canvas, messages, buffers, bitmasks, cropBounds, contour, isInterpolated)
@@ -72,8 +72,8 @@ export const ReferenceTimes: Component<{
             return [grib.time.forecastTime, img]
         })
 
-        handleProgressivePromises(
-            promiseList,
+        processPromisesInBatches(
+            promiseFnsList,
             ([forecastDate, img]) => {
                 const udpdatedImgList = [...getImgList()]
                 const idx = udpdatedImgList.findIndex(([d]) => forecastDate === d)

web/src/helpers/progressivePromises.ts

@@ -1,10 +1,10 @@
-export async function handleProgressivePromises<T>(
-    promises: Promise<T>[],
+async function processPromises<T>(
+    promiseFns: (() => Promise<T>)[],
     onProgress: (result: T) => void,
 ): Promise<(T | undefined)[]> {
-    const allPromises = promises.map(async promise => {
+    const allPromises = promiseFns.map(async promise => {
         try {
-            const result = await promise;
+            const result = await promise();
             onProgress(result)
             return result
         } catch (error) {
@@ -17,3 +17,20 @@ export async function handleProgressivePromises<T>(
         result.status === 'fulfilled' ? result.value : undefined
     )
 }
+
+export async function processPromisesInBatches<T>(
+    promiseFns: (() => Promise<T>)[],
+    onProgress: (result: T) => void,
+    batchSize = 3,
+): Promise<(T | undefined)[]> {
+    const results = []
+    while(await promiseFns.length > 0) {
+        const size = Math.min(batchSize, promiseFns.length)
+        const batchPromises = promiseFns.splice(0, size)
+        console.log('process:', batchPromises.length)
+        const batchResults = await processPromises(batchPromises, onProgress)
+        results.push(...batchResults)
+    }
+
+    return results
+}