Allow specifying result views per index

Author: craquet

src/components/FairDOElasticSearch.tsx

@@ -13,14 +13,14 @@ import { FairDOConfigBuilder } from "@/config/FairDOConfigBuilder"
 import { ErrorBoundary, Facet, Paging, PagingInfo, Results, ResultsPerPage, SearchBox, SearchProvider, WithSearch } from "@elastic/react-search-ui"
 import { Layout, ResultViewProps } from "@elastic/react-search-ui-views"
 import { LoaderCircle } from "lucide-react"
-import { ComponentType, useMemo } from "react"
+import { ComponentType, useCallback, useMemo } from "react"
 import "../index.css"
 import "../elastic-ui.css"
 import { TooltipProvider } from "./ui/tooltip"
 import { useAutoDarkMode } from "@/components/utils"
-import { PlaceholderResultView } from "@/components/result/PlaceholderResultView"
 import { DefaultSorting } from "@/components/search/DefaultSorting"
 import { NodeTypes } from "@xyflow/react"
+import { ResultViewSelector } from "@/components/result/ResultViewSelector"
 
 /**
  * All-in-one component for rendering an elastic search UI based on the provided configuration. Includes
@@ -40,6 +40,7 @@ import { NodeTypes } from "@xyflow/react"
 export function FairDOElasticSearch({
     config: rawConfig,
     resultView,
+    resultViewPerIndex,
     facetOptionView,
     dark,
     graphNodeTypes
@@ -50,9 +51,27 @@ export function FairDOElasticSearch({
     config: FairDOConfig
 
     /**
-     * React Component that will be used to render the results from the current search. Consider using the `GenericResultView`
+     * React Component that will be used to render the results from the current search. Consider using the `GenericResultView`.
+     * You can set custom result views per view using the `resultViewPerIndex` prop. Will be used as the result view
+     * for all indices that have no override configured in `resultViewPerIndex`
+     * @optional Can be omitted when `resultViewPerIndex` is specified for each index
+     * @example
+     * resultView={ ({ result }) => <GenericResultView result={result} ... /> }
      */
-    resultView: ComponentType<ResultViewProps>
+    resultView?: ComponentType<ResultViewProps>
+
+    /**
+     * React Component that will be used to render the results from the current search. Consider using the `GenericResultView`.
+     * In this prop you have to additionally specify which index the result view should be used for. If you want to use
+     * the same result view for all indices, use `resultView`.
+     * @optional can be omitted when `resultView` is set
+     * @example
+     * resultViewPerIndex={{
+     *     "my-index-1": ({ result }) => <GenericResultView result={result} ... />
+     *     "my-index-2": OtherResultView
+     * }}
+     */
+    resultViewPerIndex?: Record<string, ComponentType<ResultViewProps>>
 
     /**
      * React Component that will be used to render the individual options (text right of the checkboxes) in a facet.
@@ -87,9 +106,12 @@ export function FairDOElasticSearch({
         return config.getFacetFields()
     }, [config])
 
-    const actualResultView = useMemo(() => {
-        return resultView ?? ((props: ResultViewProps) => <PlaceholderResultView {...props} />)
-    }, [resultView])
+    const actualResultView = useCallback(
+        (props: ResultViewProps) => {
+            return <ResultViewSelector resultProps={props} resultView={resultView} resultViewPerIndex={resultViewPerIndex} />
+        },
+        [resultView, resultViewPerIndex]
+    )
 
     return (
         <SearchProvider config={elasticConfig}>

src/components/result/PlaceholderResultView.tsx

@@ -6,7 +6,10 @@ import { ObjectRender } from "@/components/result/ObjectRender"
 export function PlaceholderResultView(props: ResultViewProps) {
     return (
         <div className="rfs-border rfs-p-4 rfs-mb-2 rfs-rounded-lg rfs-space-y-2">
-            <div>Please specify resultView to render results</div>
+            <div>
+                No result view has been specified. Please specify <code>resultView</code> or <code>resultViewPerIndex</code> on the{" "}
+                <code>FairDOElasticSearch</code> component
+            </div>
             <Dialog>
                 <DialogTrigger asChild>
                     <Button variant="secondary" size="sm">

src/components/result/ResultViewSelector.tsx

@@ -0,0 +1,47 @@
+import { ResultViewProps } from "@elastic/react-search-ui-views"
+import { ComponentType, useMemo } from "react"
+import { PlaceholderResultView } from "@/components/result/PlaceholderResultView"
+import { z } from "zod"
+
+interface ResultViewSelectorProps {
+    resultView?: ComponentType<ResultViewProps>
+    resultViewPerIndex?: Record<string, ComponentType<ResultViewProps>>
+    resultProps: ResultViewProps
+}
+
+const resultWithMeta = z.object({
+    _meta: z.object({
+        rawHit: z.object({
+            _index: z.string()
+        })
+    })
+})
+
+export function ResultViewSelector({ resultProps, resultView, resultViewPerIndex }: ResultViewSelectorProps) {
+    const fallbackResultView: ComponentType<ResultViewProps> = useMemo(() => {
+        return resultView ?? ((props: ResultViewProps) => <PlaceholderResultView {...props} />)
+    }, [resultView])
+
+    const index = useMemo(() => {
+        try {
+            const parsed = resultWithMeta.parse(resultProps.result)
+            return parsed._meta.rawHit._index
+        } catch (e) {
+            console.error("Could not determine result source index in ResultViewSelector", e)
+            return null
+        }
+    }, [resultProps.result])
+
+    const specificResultView = useMemo(() => {
+        if (index === null) return null
+        if (resultViewPerIndex && index in resultViewPerIndex) {
+            return resultViewPerIndex[index]
+        } else return null
+    }, [index, resultViewPerIndex])
+
+    const Selected = useMemo(() => {
+        return specificResultView ?? fallbackResultView
+    }, [fallbackResultView, specificResultView])
+
+    return <Selected {...resultProps} />
+}

src/stories/FairDOElasticSearch.stories.tsx

@@ -219,3 +219,34 @@ export const GenericResultRenderer: Story = {
         )
     }
 }
+
+const test: FairDOConfig = {
+    debug: false,
+    alwaysSearchOnInitialLoad: true,
+    // host: "https://matwerk.datamanager.kit.edu/search-proxy/api/v1",
+    host: "https://demo.datamanager.kit.edu/base-repo/api/v1/",
+    apiKey: "UGNoTW1KUUJ3WmluUHBTcEVpalo6cGloOUVKZ0tTdnlMYVlpTzV4SXBrUQ==",
+    indices: [
+        {
+            name: "baserepo",
+            facets: [
+                {
+                    key: "created",
+                    type: "date_time_no_millis",
+                    label: "Created"
+                }
+            ],
+            resultFields: [], // Leave empty to get all fields
+            searchFields: []
+        }
+    ],
+    disjunctiveFacets: [],
+    imageProxy: (src) => `https://wsrv.nl/?url=${src}&h=1000&output=webp&ll`
+}
+
+export const Test: Story = {
+    args: {
+        config: test,
+        resultView: null!
+    }
+}