Distribute config through internal context

Author: craquet

src/components/FairDOElasticSearch.tsx

@@ -138,7 +138,7 @@ export function FairDOElasticSearch({
                                                             )}
                                                         />
                                                     )}
-                                                    {wasSearched && <DefaultSorting config={rawConfig} />}
+                                                    {wasSearched && <DefaultSorting />}
                                                 </div>
                                             }
                                             bodyFooter={

src/components/FairDOSearchContext.tsx

@@ -3,6 +3,7 @@
 import type { ResponseState } from "@elastic/search-ui"
 import type ElasticsearchAPIConnector from "@elastic/search-ui-elasticsearch-connector"
 import { createContext } from "react"
+import { FairDOConfig } from "@/config/FairDOConfig"
 
 /**
  * Extends the elasticsearch SearchContext with additional utilities
@@ -29,6 +30,7 @@ export interface FairDOSearchContext {
     searchTerm: string
 
     elasticConnector?: ElasticsearchAPIConnector
+    config: FairDOConfig
 }
 
 /**
@@ -45,5 +47,8 @@ export const FairDOSearchContext = createContext<FairDOSearchContext>({
     async searchForBackground(): Promise<ResponseState | undefined> {
         console.error(`FairDOSearchContext not mounted, but searchFor was executed`)
         return undefined
+    },
+    get config(): FairDOConfig {
+        throw "FairDOSearchContext not mounted, but tried to read config"
     }
 })

src/components/FairDOSearchProvider.tsx

@@ -15,11 +15,18 @@ import { useCallback, useMemo } from "react"
  */
 export function FairDOSearchProvider(props: PropsWithChildren & { config: FairDOConfig }) {
     const connector = useMemo(() => {
-        return new FairDOConfigBuilder(props.config).buildConnector()
+        try {
+            return new FairDOConfigBuilder(props.config).buildConnector()
+        } catch (e) {
+            console.error("Failed to build connector in FairDOSearchProvider", e)
+            return undefined
+        }
     }, [props.config])
 
     const searchForBackground = useCallback(
-        (query: string) => {
+        async (query: string) => {
+            if (!connector) return
+
             // Hacky but works
             return connector.onSearch(
                 { searchTerm: query, resultsPerPage: 20 },
@@ -34,6 +41,25 @@ export function FairDOSearchProvider(props: PropsWithChildren & { config: FairDO
         [connector, props.config.indices]
     )
 
+    // Fallback for testing without elastic context
+    if (!connector) {
+        console.warn("Using fallback context for FairDOSearchProvider as elastic config is invalid. Elastic-related features will not work.")
+        return (
+            <FairDOSearchContext.Provider
+                value={{
+                    searchTerm: "",
+                    searchFor: () => {},
+                    searchForBackground: async () => {
+                        return undefined
+                    },
+                    config: props.config
+                }}
+            >
+                {props.children}
+            </FairDOSearchContext.Provider>
+        )
+    }
+
     return (
         <WithSearch
             mapContextToProps={({ searchTerm, setSearchTerm, clearFilters, setSort }: SearchContextState) => ({
@@ -59,7 +85,8 @@ export function FairDOSearchProvider(props: PropsWithChildren & { config: FairDO
                                 })
                             },
                             elasticConnector: connector,
-                            searchForBackground
+                            searchForBackground,
+                            config: props.config
                         }}
                     >
                         {props.children}

src/components/graph/RelationsGraphModal.tsx

@@ -42,7 +42,8 @@ export function RelationsGraphModal({
                         searchFor: localSearchFor,
                         searchTerm: searchContext.searchTerm,
                         searchForBackground: searchContext.searchForBackground,
-                        elasticConnector: searchContext.elasticConnector
+                        elasticConnector: searchContext.elasticConnector,
+                        config: searchContext.config
                     }}
                 >
                     <RelationsGraph referencedBy={referencedBy} references={references} base={base} resultView={resultView} />

src/components/result/GenericResultView.tsx

@@ -13,7 +13,6 @@ 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?:\/\/.*/
 
@@ -97,11 +96,6 @@ 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
 }
 
 /**
@@ -124,11 +118,11 @@ export function GenericResultView({
     additionalIdentifierField = "identifier",
     relatedItemsPrefetch = { searchFields: { pid: {} } },
     tags = [],
-    showOpenInFairDoScope = true,
-    config
+    showOpenInFairDoScope = true
 }: GenericResultViewProps) {
     const { openRelationGraph } = useContext(RFS_GlobalModalContext)
-    const { searchTerm, elasticConnector, searchFor } = useContext(FairDOSearchContext)
+    const { searchTerm, elasticConnector, searchFor, config } = useContext(FairDOSearchContext)
+    console.log(config)
     const addToResultCache = useStore(resultCache, (s) => s.set)
     const [loadingRelatedItems, setLoadingRelatedItems] = useState(false)
 

src/components/search/DefaultSorting.tsx

@@ -1,11 +1,12 @@
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { useCallback, useContext } from "react"
 import { SearchContext } from "@elastic/react-search-ui"
-import { FairDOConfig } from "@/config/FairDOConfig"
 import { ArrowUpDown } from "lucide-react"
+import { FairDOSearchContext } from "@/components/FairDOSearchContext"
 
-export function DefaultSorting({ config }: { config: FairDOConfig }) {
+export function DefaultSorting() {
     const search = useContext(SearchContext)
+    const { config } = useContext(FairDOSearchContext)
 
     const handleChange = useCallback(
         (value: string) => {

src/stories/GenericResultView.stories.tsx

@@ -5,6 +5,7 @@ import { AtomIcon, GlobeIcon, GraduationCap, ScaleIcon } from "lucide-react"
 import { tryURLPrettyPrint } from "@/lib/utils"
 import { GlobalModalProvider } from "@/components/GlobalModalProvider"
 import { TooltipProvider } from "@/components/ui/tooltip"
+import { FairDOSearchProvider } from "@/components/FairDOSearchProvider"
 
 const meta = {
     component: GenericResultView,
@@ -21,11 +22,11 @@ export const Simple: Story = {
     decorators: [
         (Story) => (
             <TooltipProvider>
-                <GlobalModalProvider resultView={(props) => <GenericResultView {...props} {...Simple.args} config={emptyConfig} />}>
-                    <div>
+                <FairDOSearchProvider config={emptyConfig}>
+                    <GlobalModalProvider resultView={(props) => <GenericResultView {...props} {...Simple.args} />}>
                         <Story />
-                    </div>
-                </GlobalModalProvider>
+                    </GlobalModalProvider>
+                </FairDOSearchProvider>
             </TooltipProvider>
         )
     ],
@@ -37,20 +38,19 @@ export const Simple: Story = {
         titleField: "title",
         descriptionField: "description",
         imageField: undefined,
-        invertImageInDarkMode: true,
-        config: emptyConfig
+        invertImageInDarkMode: true
     }
 }
 
 export const MultipleImages: Story = {
     decorators: [
         (Story) => (
             <TooltipProvider>
-                <GlobalModalProvider resultView={(props) => <GenericResultView {...props} {...MultipleImages.args} config={emptyConfig} />}>
-                    <div>
+                <FairDOSearchProvider config={emptyConfig}>
+                    <GlobalModalProvider resultView={(props) => <GenericResultView {...props} {...MultipleImages.args} />}>
                         <Story />
-                    </div>
-                </GlobalModalProvider>
+                    </GlobalModalProvider>
+                </FairDOSearchProvider>
             </TooltipProvider>
         )
     ],
@@ -69,20 +69,19 @@ export const MultipleImages: Story = {
         titleField: "title",
         descriptionField: "description",
         invertImageInDarkMode: true,
-        imageField: "images",
-        config: emptyConfig
+        imageField: "images"
     }
 }
 
 export const Full: Story = {
     decorators: [
         (Story) => (
             <TooltipProvider>
-                <GlobalModalProvider resultView={(props) => <GenericResultView {...props} {...Full.args} config={{ host: "", indices: [] }} />}>
-                    <div>
+                <FairDOSearchProvider config={emptyConfig}>
+                    <GlobalModalProvider resultView={(props) => <GenericResultView {...props} {...Full.args} />}>
                         <Story />
-                    </div>
-                </GlobalModalProvider>
+                    </GlobalModalProvider>
+                </FairDOSearchProvider>
             </TooltipProvider>
         )
     ],
@@ -164,7 +163,6 @@ export const Full: Story = {
                 field: "stringArrayTest",
                 singleValueMapper: (v) => v.toUpperCase()
             }
-        ],
-        config: emptyConfig
+        ]
     }
 }

src/stories/RelationsGraph.stories.tsx

@@ -2,6 +2,9 @@ import type { Meta, StoryObj } from "@storybook/react"
 import { ReactFlowProvider } from "@xyflow/react"
 import { RelationsGraph } from "@/components/graph/RelationsGraph"
 import { GenericResultView } from "@/components/result"
+import { resultCache } from "@/lib/ResultCache"
+import { FairDOSearchProvider } from "@/components/FairDOSearchProvider"
+import { FairDOConfig } from "@/config/FairDOConfig"
 
 const meta = {
     component: RelationsGraph,
@@ -12,20 +15,36 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
+const emptyConfig: FairDOConfig = { host: "", indices: [] }
+
 export const Default: Story = {
     decorators: [
-        (Story) => (
-            <ReactFlowProvider>
-                <div style={{ width: "100%", height: "min(70vh, 700px)" }}>
-                    <Story />
-                </div>
-            </ReactFlowProvider>
-        )
+        (Story) => {
+            resultCache.getState().set("a", { name: "Left side A" })
+            resultCache.getState().set("b", { name: "Left side B" })
+            resultCache.getState().set("c", { name: "Left side C" })
+            resultCache.getState().set("self", { name: "Center entry" })
+            resultCache.getState().set("1", { name: "Right side A" })
+            resultCache.getState().set("2", { name: "Right side B" })
+            resultCache.getState().set("3", { name: "Right side C" })
+            resultCache.getState().set("4", { name: "Right side D" })
+            resultCache.getState().set("5", { name: "Right side E" })
+
+            return (
+                <ReactFlowProvider>
+                    <FairDOSearchProvider config={emptyConfig}>
+                        <div style={{ width: "100%", height: "min(70vh, 700px)" }}>
+                            <Story />
+                        </div>
+                    </FairDOSearchProvider>
+                </ReactFlowProvider>
+            )
+        }
     ],
     args: {
         referencedBy: ["a", "b", "c"],
         base: "self",
         references: ["1", "2", "3", "4", "5"],
-        resultView: (props) => <GenericResultView {...props} config={{ host: "", indices: [] }} />
+        resultView: (props) => <GenericResultView {...props} />
     }
 }