From 8b5161fd9d7e50e153cb3ce3ed8b6f58d9b7435b Mon Sep 17 00:00:00 2001 From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com> Date: Wed, 29 Oct 2025 11:43:59 +0100 Subject: [PATCH 1/4] feat --- README.md | 21 +++++-- src/dashboard/Data/Browser/Browser.react.js | 3 + .../Data/Browser/DataBrowser.react.js | 63 +++++++++++++++++++ 3 files changed, 82 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index f981e4b8f..02b5394df 100644 --- a/README.md +++ b/README.md @@ -224,6 +224,9 @@ Each class in `columnPreference` can have an array of column configurations: | `cloudCodeFunction` | String | no | - | `"getUserDetails"` | Cloud Function receiving selected object. | | `prefetchObjects` | Number | yes | `0` | `2` | Number of next rows to prefetch. | | `prefetchStale` | Number | yes | `0` | `10` | Seconds after which prefetched data is stale. | +| `prefetchImage` | Boolean | yes | `true` | `false` | Whether to prefetch image content. | +| `prefetchVideo` | Boolean | yes | `true` | `false` | Whether to prefetch video content. | +| `prefetchAudio` | Boolean | yes | `true` | `false` | Whether to prefetch audio content. | ##### User Configuration (`users[]`) @@ -1020,7 +1023,10 @@ The following example dashboard configuration shows an info panel for the `_User "classes": ["_User"], "cloudCodeFunction": "getUserDetails", "prefetchObjects": 2, - "prefetchStale": 10 + "prefetchStale": 10, + "prefetchImage": true, + "prefetchVideo": true, + "prefetchAudio": true } ] } @@ -1321,13 +1327,18 @@ Example: To reduce the time for info panel data to appear, data can be prefetched. -| Parameter | Type | Optional | Default | Example | Description | -|--------------------------------|--------|----------|---------|---------|-----------------------------------------------------------------------------------------------------------------------------------| -| `infoPanel[*].prefetchObjects` | Number | yes | `0` | `2` | Number of next rows to prefetch when browsing sequential rows. For example, `2` means the next 2 rows will be fetched in advance. | -| `infoPanel[*].prefetchStale` | Number | yes | `0` | `10` | Duration in seconds after which prefetched data is discarded as stale. | +| Parameter | Type | Optional | Default | Example | Description | +|--------------------------------|---------|----------|---------|---------|-----------------------------------------------------------------------------------------------------------------------------------| +| `infoPanel[*].prefetchObjects` | Number | yes | `0` | `2` | Number of next rows to prefetch when browsing sequential rows. For example, `2` means the next 2 rows will be fetched in advance. | +| `infoPanel[*].prefetchStale` | Number | yes | `0` | `10` | Duration in seconds after which prefetched data is discarded as stale. | +| `infoPanel[*].prefetchImage` | Boolean | yes | `true` | `false` | Whether to prefetch image content when prefetching objects. Only applies when `prefetchObjects` is enabled. | +| `infoPanel[*].prefetchVideo` | Boolean | yes | `true` | `false` | Whether to prefetch video content when prefetching objects. Only applies when `prefetchObjects` is enabled. | +| `infoPanel[*].prefetchAudio` | Boolean | yes | `true` | `false` | Whether to prefetch audio content when prefetching objects. Only applies when `prefetchObjects` is enabled. | Prefetching is particularly useful when navigating through lists of objects. To optimize performance and avoid unnecessary data loading, prefetching is triggered only after the user has moved through 3 consecutive rows using the keyboard down-arrow key or by mouse click. +When `prefetchObjects` is enabled, media content (images, videos, and audio) in the info panel can also be prefetched to improve loading performance. By default, all media types are prefetched, but you can selectively disable prefetching for specific media types using the `prefetchImage`, `prefetchVideo`, and `prefetchAudio` options. + ### Freeze Columns ▶️ *Core > Browser > Freeze column* diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js index ca760536d..00faca75b 100644 --- a/src/dashboard/Data/Browser/Browser.react.js +++ b/src/dashboard/Data/Browser/Browser.react.js @@ -465,6 +465,9 @@ class Browser extends DashboardView { classes: panel.classes, prefetchObjects: panel.prefetchObjects || 0, prefetchStale: panel.prefetchStale || 0, + prefetchImage: panel.prefetchImage ?? true, + prefetchVideo: panel.prefetchVideo ?? true, + prefetchAudio: panel.prefetchAudio ?? true, }); }); }); diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js index 121837295..33cd3ef4a 100644 --- a/src/dashboard/Data/Browser/DataBrowser.react.js +++ b/src/dashboard/Data/Browser/DataBrowser.react.js @@ -768,6 +768,9 @@ export default class DataBrowser extends React.Component { return { prefetchObjects: config?.prefetchObjects || 0, prefetchStale: config?.prefetchStale || 0, + prefetchImage: config?.prefetchImage ?? true, + prefetchVideo: config?.prefetchVideo ?? true, + prefetchAudio: config?.prefetchAudio ?? true, }; } @@ -809,6 +812,52 @@ export default class DataBrowser extends React.Component { } } + extractMediaUrls(data) { + const urls = { images: [], videos: [], audios: [] }; + + if (!data?.panel?.segments) { + return urls; + } + + data.panel.segments.forEach(segment => { + if (segment.items) { + segment.items.forEach(item => { + if (item.type === 'image' && item.url) { + urls.images.push(item.url); + } else if (item.type === 'video' && item.url) { + urls.videos.push(item.url); + } else if (item.type === 'audio' && item.url) { + urls.audios.push(item.url); + } + }); + } + }); + + return urls; + } + + prefetchMedia(urls, mediaType) { + if (!urls || urls.length === 0) { + return; + } + + urls.forEach(url => { + try { + if (mediaType === 'image') { + const img = new Image(); + img.src = url; + } else if (mediaType === 'video' || mediaType === 'audio') { + // For video and audio, we can use fetch to cache the content + fetch(url, { mode: 'no-cors' }).catch(() => { + // Silently fail - the media will load normally if prefetch fails + }); + } + } catch (error) { + // Silently fail - the media will load normally if prefetch fails + } + }); + } + prefetchObject(objectId) { const { className, app } = this.props; const cloudCodeFunction = @@ -831,6 +880,20 @@ export default class DataBrowser extends React.Component { [objectId]: { data: result, timestamp: Date.now() }, }, })); + + // Prefetch media if enabled + const { prefetchImage, prefetchVideo, prefetchAudio } = this.getPrefetchSettings(); + const mediaUrls = this.extractMediaUrls(result); + + if (prefetchImage && mediaUrls.images.length > 0) { + this.prefetchMedia(mediaUrls.images, 'image'); + } + if (prefetchVideo && mediaUrls.videos.length > 0) { + this.prefetchMedia(mediaUrls.videos, 'video'); + } + if (prefetchAudio && mediaUrls.audios.length > 0) { + this.prefetchMedia(mediaUrls.audios, 'audio'); + } }).catch(error => { console.error(`Failed to prefetch object ${objectId}:`, error); }); From 79b9801b7766f0688bb10fb6ca53ce5a062074fd Mon Sep 17 00:00:00 2001 From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com> Date: Wed, 29 Oct 2025 11:51:28 +0100 Subject: [PATCH 2/4] lint --- .../Data/Browser/DataBrowser.react.js | 23 +++++++++---------- 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js index 33cd3ef4a..6685ad735 100644 --- a/src/dashboard/Data/Browser/DataBrowser.react.js +++ b/src/dashboard/Data/Browser/DataBrowser.react.js @@ -842,18 +842,17 @@ export default class DataBrowser extends React.Component { } urls.forEach(url => { - try { - if (mediaType === 'image') { - const img = new Image(); - img.src = url; - } else if (mediaType === 'video' || mediaType === 'audio') { - // For video and audio, we can use fetch to cache the content - fetch(url, { mode: 'no-cors' }).catch(() => { - // Silently fail - the media will load normally if prefetch fails - }); - } - } catch (error) { - // Silently fail - the media will load normally if prefetch fails + if (mediaType === 'image') { + const img = new Image(); + img.onerror = () => { + console.error(`Failed to prefetch image: ${url}`); + }; + img.src = url; + } else if (mediaType === 'video' || mediaType === 'audio') { + // For video and audio, we can use fetch to cache the content + fetch(url, { mode: 'no-cors' }).catch(error => { + console.error(`Failed to prefetch ${mediaType}: ${url}`, error); + }); } }); } From 3427d532f1816f6de9c92bc0bcb67c2b5113e3cf Mon Sep 17 00:00:00 2001 From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com> Date: Wed, 29 Oct 2025 12:09:46 +0100 Subject: [PATCH 3/4] improve --- .../Data/Browser/DataBrowser.react.js | 61 ++++++++++++------- 1 file changed, 38 insertions(+), 23 deletions(-) diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js index 6685ad735..70ee69d20 100644 --- a/src/dashboard/Data/Browser/DataBrowser.react.js +++ b/src/dashboard/Data/Browser/DataBrowser.react.js @@ -812,8 +812,17 @@ export default class DataBrowser extends React.Component { } } + isSafeHttpUrl(url) { + try { + const parsed = new URL(url); + return parsed.protocol === 'http:' || parsed.protocol === 'https:'; + } catch { + return false; + } + } + extractMediaUrls(data) { - const urls = { images: [], videos: [], audios: [] }; + const urls = { images: new Set(), videos: new Set(), audios: new Set() }; if (!data?.panel?.segments) { return urls; @@ -822,12 +831,12 @@ export default class DataBrowser extends React.Component { data.panel.segments.forEach(segment => { if (segment.items) { segment.items.forEach(item => { - if (item.type === 'image' && item.url) { - urls.images.push(item.url); - } else if (item.type === 'video' && item.url) { - urls.videos.push(item.url); - } else if (item.type === 'audio' && item.url) { - urls.audios.push(item.url); + if (item.type === 'image' && item.url && this.isSafeHttpUrl(item.url)) { + urls.images.add(item.url); + } else if (item.type === 'video' && item.url && this.isSafeHttpUrl(item.url)) { + urls.videos.add(item.url); + } else if (item.type === 'audio' && item.url && this.isSafeHttpUrl(item.url)) { + urls.audios.add(item.url); } }); } @@ -837,23 +846,29 @@ export default class DataBrowser extends React.Component { } prefetchMedia(urls, mediaType) { - if (!urls || urls.length === 0) { + if (!urls || urls.size === 0) { return; } urls.forEach(url => { - if (mediaType === 'image') { - const img = new Image(); - img.onerror = () => { - console.error(`Failed to prefetch image: ${url}`); - }; - img.src = url; - } else if (mediaType === 'video' || mediaType === 'audio') { - // For video and audio, we can use fetch to cache the content - fetch(url, { mode: 'no-cors' }).catch(error => { - console.error(`Failed to prefetch ${mediaType}: ${url}`, error); - }); - } + // Use link-based prefetching for better browser optimization and caching + const link = document.createElement('link'); + link.rel = mediaType === 'image' ? 'preload' : 'prefetch'; + link.as = mediaType; + link.href = url; + + link.onerror = () => { + console.error(`Failed to prefetch ${mediaType}: ${url}`); + }; + + document.head.appendChild(link); + + // Clean up the link element after a delay to prevent memory leaks + setTimeout(() => { + if (link.parentNode) { + link.parentNode.removeChild(link); + } + }, 30000); // Remove after 30 seconds }); } @@ -884,13 +899,13 @@ export default class DataBrowser extends React.Component { const { prefetchImage, prefetchVideo, prefetchAudio } = this.getPrefetchSettings(); const mediaUrls = this.extractMediaUrls(result); - if (prefetchImage && mediaUrls.images.length > 0) { + if (prefetchImage && mediaUrls.images.size > 0) { this.prefetchMedia(mediaUrls.images, 'image'); } - if (prefetchVideo && mediaUrls.videos.length > 0) { + if (prefetchVideo && mediaUrls.videos.size > 0) { this.prefetchMedia(mediaUrls.videos, 'video'); } - if (prefetchAudio && mediaUrls.audios.length > 0) { + if (prefetchAudio && mediaUrls.audios.size > 0) { this.prefetchMedia(mediaUrls.audios, 'audio'); } }).catch(error => { From a99cae0823013416341a74a9fa83730f3c366239 Mon Sep 17 00:00:00 2001 From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com> Date: Wed, 29 Oct 2025 12:18:07 +0100 Subject: [PATCH 4/4] link prefetch optimization --- src/dashboard/Data/Browser/DataBrowser.react.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js index 70ee69d20..8311bf1d1 100644 --- a/src/dashboard/Data/Browser/DataBrowser.react.js +++ b/src/dashboard/Data/Browser/DataBrowser.react.js @@ -857,18 +857,18 @@ export default class DataBrowser extends React.Component { link.as = mediaType; link.href = url; + link.onload = () => { + // Resource successfully cached, safe to remove the link element + link.remove(); + }; + link.onerror = () => { console.error(`Failed to prefetch ${mediaType}: ${url}`); + // Failed to fetch, remove the link element + link.remove(); }; document.head.appendChild(link); - - // Clean up the link element after a delay to prevent memory leaks - setTimeout(() => { - if (link.parentNode) { - link.parentNode.removeChild(link); - } - }, 30000); // Remove after 30 seconds }); }