Make result view generic

Author: craquet

.storybook/preview.ts

@@ -10,6 +10,9 @@ const preview: Preview = {
                 color: /(background|color)$/i,
                 date: /Date$/i
             }
+        },
+        docs: {
+            toc: true
         }
     },
 

src/components/FairDOElasticSearch.tsx

@@ -4,7 +4,6 @@ import type { FairDOConfig } from "@/config/FairDOConfig"
 import type { SearchContextState } from "@elastic/search-ui"
 import { FairDOSearchProvider } from "@/components/FairDOSearchProvider"
 import { GlobalModalProvider } from "@/components/GlobalModalProvider"
-import { NMRResultView } from "@/components/result/NMRResultView"
 import { ClearFilters } from "@/components/search/ClearFilters"
 import { DefaultFacet, OptionViewProps } from "@/components/search/DefaultFacet"
 import { DefaultSearchBox } from "@/components/search/DefaultSearchBox"
@@ -19,15 +18,23 @@ import "../index.css"
 import "../elastic-ui.css"
 import { TooltipProvider } from "./ui/tooltip"
 import { useAutoDarkMode } from "@/components/utils"
+import { PlaceholderResultView } from "@/components/result/PlaceholderResultView"
 
 /**
  * All-in-one component for rendering an elastic search UI based on the provided configuration. Includes
- * an interactive graph of related records
- * @constructor
+ * an interactive graph of related records. Pass in a config object ({@link FairDOConfig}) to configure the search.
+ *
+ * #### ⚠️ Warning
+ *
+ * Make sure your configuration is memoized or defined outside of any components
+ *
+ *
+ * #### 🖌️ Customization
+ * You can customize the default behaviour by overriding the default result view (resultView) or the views of the facet
+ * options (facetOptionView)
  */
 export function FairDOElasticSearch({
     config: rawConfig,
-    debug,
     resultView,
     facetOptionView,
     dark
@@ -36,14 +43,13 @@ export function FairDOElasticSearch({
      * Make sure the config is either memoized or constant (defined outside any components)
      */
     config: FairDOConfig
-    resultView?: ComponentType<ResultViewProps>
+    resultView: ComponentType<ResultViewProps>
     facetOptionView?: ComponentType<OptionViewProps>
 
     /**
      * Set to true to enable dark mode. Alternatively, set class="dark" on your html or body element
      */
     dark?: boolean
-    debug?: boolean
 }) {
     useAutoDarkMode(dark)
 
@@ -60,8 +66,8 @@ export function FairDOElasticSearch({
     }, [config])
 
     const actualResultView = useMemo(() => {
-        return resultView ?? ((props: ResultViewProps) => <NMRResultView result={props.result} debug={debug} />)
-    }, [debug, resultView])
+        return resultView ?? ((props: ResultViewProps) => <PlaceholderResultView {...props} />)
+    }, [resultView])
 
     return (
         <SearchProvider config={elasticConfig}>
@@ -112,7 +118,7 @@ export function FairDOElasticSearch({
                                                 <>
                                                     {isLoading && !wasSearched && (
                                                         <div className="rfs-flex rfs-justify-center">
-                                                            <LoaderCircle className="size-6 animate-spin" />
+                                                            <LoaderCircle className="rfs-size-6 rfs-animate-spin" />
                                                         </div>
                                                     )}
 

src/components/GlobalModalProvider.tsx

@@ -5,7 +5,7 @@ import type { PropsWithChildren } from "react"
 import { RelationsGraphModal } from "@/components/graph/RelationsGraphModal"
 import { ReactFlowProvider } from "@xyflow/react"
 import { useCallback, useState } from "react"
-import { GlobalModalContext } from "./GlobalModalContext"
+import { RFS_GlobalModalContext } from "./RFS_GlobalModalContext"
 
 export function GlobalModalProvider(props: PropsWithChildren) {
     const [relationGraphState, setRelationGraphState] = useState<{
@@ -31,7 +31,7 @@ export function GlobalModalProvider(props: PropsWithChildren) {
     }, [])
 
     return (
-        <GlobalModalContext.Provider value={{ openRelationGraph }}>
+        <RFS_GlobalModalContext.Provider value={{ openRelationGraph }}>
             <ReactFlowProvider>
                 <RelationsGraphModal
                     isOpen={relationGraphState.isOpen}
@@ -42,6 +42,6 @@ export function GlobalModalProvider(props: PropsWithChildren) {
 
                 {props.children}
             </ReactFlowProvider>
-        </GlobalModalContext.Provider>
+        </RFS_GlobalModalContext.Provider>
     )
 }

src/components/GlobalModalContext.tsx renamed to src/components/RFS_GlobalModalContext.tsx

@@ -1,7 +1,7 @@
 import type { RelationNode } from "@/lib/RelationNode"
 import { createContext } from "react"
 
-export const GlobalModalContext = createContext<{
+export const RFS_GlobalModalContext = createContext<{
     openRelationGraph: (base: RelationNode, referenced: RelationNode[]) => void
 }>({
     openRelationGraph: (): void => {

src/components/graph/RelationsGraph.tsx

@@ -2,15 +2,7 @@ import type { RelationNode } from "@/lib/RelationNode"
 
 import { buildGraphForReferences } from "@/components/graph/helpers"
 import { PlainNode } from "@/components/graph/PlainNode"
-import {
-    Background,
-    BackgroundVariant,
-    ReactFlow,
-    useEdgesState,
-    useNodesInitialized,
-    useNodesState,
-    useReactFlow
-} from "@xyflow/react"
+import { Background, BackgroundVariant, ReactFlow, useEdgesState, useNodesInitialized, useNodesState, useReactFlow } from "@xyflow/react"
 import { useEffect, useMemo } from "react"
 import "@xyflow/react/dist/style.css"
 
@@ -57,7 +49,7 @@ export function RelationsGraph(props: {
             onEdgesChange={onEdgesChange}
             proOptions={{ hideAttribution: true }}
         >
-            <Background color="hsl(var(--border))" variant={BackgroundVariant.Lines} />
+            <Background color="hsl(var(--rfs-border))" variant={BackgroundVariant.Lines} />
         </ReactFlow>
     )
 }