Add image carousel and robust type validation

Author: craquet

package-lock.json

@@ -43,6 +43,7 @@
         "@xyflow/react": "^12.3.6",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "embla-carousel-react": "^8.5.2",
         "lucide-react": "^0.468.0",
         "luxon": "^3.5.0",
         "moment": "^2.30.1",

package.json

@@ -10,16 +10,18 @@ import { BookText, ChevronDown, GitFork, ImageOff, LinkIcon, Microscope } from "
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
-import { SearchFieldConfiguration, SearchResult } from "@elastic/search-ui"
+import { SearchFieldConfiguration } from "@elastic/search-ui"
 import { GenericResultViewTag, GenericResultViewTagProps } from "@/components/result/GenericResultViewTag"
+import { GenericResultViewImageCarousel } from "@/components/result/GenericResultViewImageCarousel"
+import { z } from "zod"
 
 const HTTP_REGEX = /https?:\/\/[a-z]+\.[a-z]+.*/gm
 
 export interface GenericResultViewProps {
     /**
      * Search result that will be rendered in this view. Will be provided by FairDOElasticSearch
      */
-    result: SearchResult
+    result: Record<string, unknown>
 
     /**
      * The elastic field where the title of the card will be read from
@@ -114,18 +116,53 @@ export function GenericResultView({
 
     const getField = useCallback(
         (field: string) => {
-            return autoUnwrap(result[field])
+            try {
+                return autoUnwrap(
+                    z
+                        .string()
+                        .or(z.object({ raw: z.string() }))
+                        .optional()
+                        .parse(result[field])
+                )
+            } catch (e) {
+                console.error(`Parsing field ${field} failed`, e)
+                return undefined
+            }
         },
         [result]
     )
 
     const getArrayField = useCallback(
         (field: string) => {
-            return autoUnwrapArray(result[field])
+            try {
+                return autoUnwrapArray(
+                    z
+                        .string()
+                        .array()
+                        .or(z.object({ raw: z.string().array() }))
+                        .optional()
+                        .parse(result[field])
+                )
+            } catch (e) {
+                console.error(`Parsing array field ${field} failed`, e)
+                return []
+            }
         },
         [result]
     )
 
+    const getArrayOrSingleField = useCallback(
+        (field: string) => {
+            const _field: unknown = result[field]
+            if (Array.isArray(_field) || (typeof _field === "object" && _field && "raw" in _field && Array.isArray(_field.raw))) {
+                return getArrayField(field)
+            } else {
+                return getField(field)
+            }
+        },
+        [getArrayField, getField, result]
+    )
+
     const pid = useMemo(() => {
         const _pid = getField(pidField ?? "pid")
         if (_pid && _pid.startsWith("https://")) {
@@ -151,8 +188,9 @@ export function GenericResultView({
     }, [digitalObjectLocationField, getField])
 
     const previewImage = useMemo(() => {
-        return getField(imageField ?? "imageURL")
-    }, [getField, imageField])
+        const images = getArrayOrSingleField(imageField ?? "imageURL")
+        return Array.isArray(images) ? (images.length === 1 ? images[0] : images) : images
+    }, [getArrayOrSingleField, imageField])
 
     const identifier = useMemo(() => {
         return getField(additionalIdentifierField ?? "identifier")
@@ -164,6 +202,7 @@ export function GenericResultView({
 
     const creationDate = useMemo(() => {
         const value = getField(creationDateField ?? "dateCreated")
+        if (!value) return undefined
         const dateTime = DateTime.fromISO(value)
         return dateTime.isValid ? dateTime.toLocaleString() : value
     }, [creationDateField, getField])
@@ -185,9 +224,11 @@ export function GenericResultView({
 
         if (search) {
             for (const entry of search.results) {
-                addToResultCache(autoUnwrap(entry[pidField ?? "pid"]), {
-                    pid: autoUnwrap(entry[pidField ?? "pid"]),
-                    name: autoUnwrap(entry[titleField ?? "name"])
+                const pid = autoUnwrap(entry[pidField ?? "pid"])
+                if (!pid) continue
+                addToResultCache(pid, {
+                    pid,
+                    name: autoUnwrap(entry[titleField ?? "name"]) ?? ""
                 })
             }
         }
@@ -198,8 +239,8 @@ export function GenericResultView({
 
         openRelationGraph(
             {
-                id: pid,
-                label: title,
+                id: pid ?? "source",
+                label: title ?? "Source",
                 tag: "Current",
                 remoteURL: doLocation,
                 searchQuery: pid
@@ -212,6 +253,7 @@ export function GenericResultView({
     }, [doLocation, fetchRelatedItems, getResultFromCache, isMetadataFor, openRelationGraph, pid, title])
 
     const goToMetadata = useCallback(() => {
+        if (!hasMetadata) return
         searchFor(hasMetadata)
     }, [hasMetadata, searchFor])
 
@@ -229,7 +271,9 @@ export function GenericResultView({
     }, [addToResultCache, pid, title])
 
     return (
-        <div className={`rfs-m-2 rfs-rounded-lg rfs-border rfs-border-border rfs-p-4 ${exactPidMatch ? "rfs-animate-outline-ping" : ""}`}>
+        <div
+            className={`rfs-m-2 rfs-rounded-lg rfs-border rfs-border-border rfs-p-4 rfs-group/resultView ${exactPidMatch ? "rfs-animate-outline-ping" : ""}`}
+        >
             <div
                 className={`rfs-grid ${imageField ? "rfs-grid-rows-[100px_1fr] md:rfs-grid-cols-[200px_1fr] md:rfs-grid-rows-1" : ""} rfs-gap-4 rfs-overflow-x-auto md:rfs-max-w-full`}
             >
@@ -238,7 +282,11 @@ export function GenericResultView({
                         className={`rfs-flex rfs-justify-center rfs-rounded md:rfs-items-center rfs-p-2 d ${invertImageInDarkMode ? "dark:rfs-invert" : ""} `}
                     >
                         {previewImage ? (
-                            <img className="md:rfs-size-[200px]" src={previewImage} alt={`Preview for ${title}`} />
+                            Array.isArray(previewImage) ? (
+                                <GenericResultViewImageCarousel images={previewImage} title={title} />
+                            ) : (
+                                <img className="md:rfs-size-[200px]" src={previewImage} alt={`Preview for ${title}`} />
+                            )
                         ) : (
                             <div className="rfs-flex rfs-flex-col rfs-justify-center dark:rfs-text-background">
                                 <ImageOff className="rfs-size-6 rfs-text-muted-foreground/50" />

src/components/result/GenericResultView.tsx

@@ -0,0 +1,36 @@
+import { Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"
+import { useEffect, useState } from "react"
+
+export function GenericResultViewImageCarousel({ images, title }: { images: string[]; title?: string }) {
+    const [api, setApi] = useState<CarouselApi>()
+    const [slide, setSlide] = useState<number>(0)
+
+    useEffect(() => {
+        if (api) {
+            api.on("select", () => setSlide(api.selectedScrollSnap()))
+        }
+    }, [api])
+
+    return (
+        <Carousel className="w-full max-w-xs" setApi={setApi}>
+            <CarouselContent>
+                {images.map((image, index) => (
+                    <CarouselItem key={index}>
+                        <img
+                            className="md:rfs-size-[200px]"
+                            src={image}
+                            alt={`Preview ${index + 1} of ${images.length} for ${title ?? "unnamed result"}`}
+                        />
+                    </CarouselItem>
+                ))}
+            </CarouselContent>
+            <div className={"rfs-opacity-0 group-hover/resultView:rfs-opacity-100 rfs-transition-opacity"}>
+                <CarouselPrevious />
+                <CarouselNext />
+            </div>
+            <div className="rfs-text-muted-foreground rfs-text-center rfs-text-xs rfs-mt-2">
+                Image {slide + 1} of {images.length}
+            </div>
+        </Carousel>
+    )
+}

src/components/result/GenericResultViewImageCarousel.tsx

@@ -1,5 +1,7 @@
-export function autoUnwrap(item: string | { raw: string }) {
-    if (typeof item === "string") {
+export function autoUnwrap(item?: string | { raw: string }) {
+    if (!item) {
+        return undefined
+    } else if (typeof item === "string") {
         return item
     } else if (typeof item === "object" && "raw" in item && typeof item.raw === "string") {
         return item.raw
@@ -8,7 +10,7 @@ export function autoUnwrap(item: string | { raw: string }) {
     }
 }
 
-export function autoUnwrapArray(item: string[] | { raw: string[] }) {
+export function autoUnwrapArray(item?: string[] | { raw: string[] }) {
     if (!item) {
         return []
     }