Add image proxy capabilities

Author: craquet

src/components/result/GenericResultView.tsx

@@ -13,6 +13,7 @@ import { SearchFieldConfiguration } from "@elastic/search-ui"
 import { GenericResultViewTag, GenericResultViewTagProps } from "@/components/result/GenericResultViewTag"
 import { z } from "zod"
 import { GenericResultViewImage } from "@/components/result/GenericResultViewImage"
+import { FairDOConfig } from "@/config/FairDOConfig"
 
 const HTTP_REGEX = /https?:\/\/.*/
 
@@ -96,6 +97,11 @@ export interface GenericResultViewProps {
      * Whether to show the open in FairDOScope button in the dropdown
      */
     showOpenInFairDoScope?: boolean
+
+    /**
+     * Pass the same config here as passed to FairDOElasticSearch
+     */
+    config: FairDOConfig
 }
 
 /**
@@ -118,7 +124,8 @@ export function GenericResultView({
     additionalIdentifierField = "identifier",
     relatedItemsPrefetch = { searchFields: { pid: {} } },
     tags = [],
-    showOpenInFairDoScope = true
+    showOpenInFairDoScope = true,
+    config
 }: GenericResultViewProps) {
     const { openRelationGraph } = useContext(RFS_GlobalModalContext)
     const { searchTerm, elasticConnector, searchFor } = useContext(FairDOSearchContext)
@@ -216,8 +223,11 @@ export function GenericResultView({
 
     const previewImage = useMemo(() => {
         const images = getArrayOrSingleField(imageField ?? "imageURL")
-        return Array.isArray(images) ? (images.length === 1 ? images[0] : images) : images
-    }, [getArrayOrSingleField, imageField])
+        const normalized = Array.isArray(images) ? (images.length === 1 ? images[0] : images) : images
+        if (config.imageProxy && normalized) {
+            return Array.isArray(normalized) ? normalized.map(config.imageProxy) : config.imageProxy(normalized)
+        } else return normalized
+    }, [config, getArrayOrSingleField, imageField])
 
     const identifier = useMemo(() => {
         const maybeArray = getArrayOrSingleField(additionalIdentifierField ?? "identifier")

src/config/FairDOConfig.ts

@@ -108,6 +108,14 @@ export interface FairDOConfig {
         headers?: Record<string, string>
     }
 
+    /**
+     * Rewrite image source URLs to use proxies for the images. You might want to consider using an image proxy
+     * if the images in you dataset are large.
+     * @example
+     * imageProxy: (src) => `https://myproxy.org/${src}?format=webp`
+     */
+    imageProxy?: (src: string) => string
+
     /**
      * Initialize the internal state. This can be useful to specify the default sorting of the results.
      * @example

src/stories/0 Getting Started.mdx

@@ -88,6 +88,7 @@ export default function Home() {
         return (
             <GenericResultView
                 result={props.result}
+                config={config}
                 invertImageInDarkMode // Not recommended for colorful images
                 tags={[
                     {

src/stories/FairDOElasticSearch.stories.tsx

@@ -135,7 +135,8 @@ const demoConfig: FairDOConfig = {
         "Pulse_Sequence_Name.keyword",
         "Acquisition_Nucleus.keyword",
         "licenseURL.keyword"
-    ]
+    ],
+    imageProxy: (src) => `https://wsrv.nl/?url=${src}&h=1000&output=webp&ll`
 }
 
 // const demoConfigWithCompound: FairDOConfig = {
@@ -191,6 +192,7 @@ export const GenericResultRenderer: Story = {
             <GenericResultView
                 result={props.result}
                 invertImageInDarkMode
+                config={demoConfig}
                 tags={[
                     {
                         icon: <UserIcon className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,