Refactor relations modal context and allow specifying custom node types

Author: craquet

src/components/FairDOElasticSearch.tsx

@@ -3,7 +3,7 @@
 import type { FairDOConfig } from "@/config/FairDOConfig"
 import type { SearchContextState } from "@elastic/search-ui"
 import { FairDOSearchProvider } from "@/components/FairDOSearchProvider"
-import { GlobalModalProvider } from "@/components/GlobalModalProvider"
+import { RelationsGraphProvider } from "@/components/graph/RelationsGraphProvider"
 import { ClearFilters } from "@/components/search/ClearFilters"
 import { DefaultFacet, OptionViewProps } from "@/components/search/DefaultFacet"
 import { DefaultSearchBox } from "@/components/search/DefaultSearchBox"
@@ -20,6 +20,7 @@ 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"
 
 /**
  * All-in-one component for rendering an elastic search UI based on the provided configuration. Includes
@@ -32,21 +33,41 @@ import { DefaultSorting } from "@/components/search/DefaultSorting"
  *
  * #### 🖌️ Customization
  * You can customize the default behaviour by overriding the default result view (resultView) or the views of the facet
- * options (facetOptionView)
+ * options (facetOptionView).
+ *
+ * You can also specify your own graph nodes to dynamically render any relationships between objects. ([Package Docs](https://reactflow.dev/learn/customization/custom-nodes))
  */
 export function FairDOElasticSearch({
     config: rawConfig,
     resultView,
     facetOptionView,
-    dark
+    dark,
+    graphNodeTypes
 }: {
     /**
      * Make sure the config is either memoized or constant (defined outside any components)
      */
     config: FairDOConfig
+
+    /**
+     * React Component that will be used to render the results from the current search. Consider using the `GenericResultView`
+     */
     resultView: ComponentType<ResultViewProps>
+
+    /**
+     * React Component that will be used to render the individual options (text right of the checkboxes) in a facet.
+     */
     facetOptionView?: ComponentType<OptionViewProps>
 
+    /**
+     * Specify additional node types to render in the relations graph. Optional. The "result" node type is present by default
+     * and can be overwritten here.
+     * > **⚠ Important**: Make sure to memoize the object passed to this prop, or pass a constant object.
+     *
+     * Consult the [React Flow Documentation](https://reactflow.dev/learn/customization/custom-nodes) on how to specify nodes. **Make sure your node has one `target` and one `source` Handle.**
+     */
+    graphNodeTypes?: NodeTypes
+
     /**
      * Set to true to enable dark mode
      */
@@ -74,7 +95,7 @@ export function FairDOElasticSearch({
         <SearchProvider config={elasticConfig}>
             <FairDOSearchProvider config={rawConfig}>
                 <TooltipProvider>
-                    <GlobalModalProvider resultView={actualResultView} dark={dark}>
+                    <RelationsGraphProvider resultView={actualResultView} dark={dark} nodeTypes={graphNodeTypes}>
                         <WithSearch
                             mapContextToProps={({ wasSearched, isLoading }: SearchContextState) => ({
                                 wasSearched,
@@ -181,7 +202,7 @@ export function FairDOElasticSearch({
                                 )
                             }}
                         </WithSearch>
-                    </GlobalModalProvider>
+                    </RelationsGraphProvider>
                 </TooltipProvider>
             </FairDOSearchProvider>
         </SearchProvider>

src/components/GlobalModalProvider.tsx

@@ -1,8 +1,24 @@
 import { GraphNode } from "@/components/graph/GraphNode"
 import { toArray } from "@/components/result"
 
+/**
+ * Utilities for working with the RelationsGraph
+ */
 export class GraphNodeUtils {
-    static buildNodesSequential(type: string, ...ids: (string | string[])[]): GraphNode[] {
+    /**
+     * Build a sequential graph (n:n:n:...) by passing just the identifiers of the nodes in layers.
+     * @param type Type of the nodes (use "result" to display your resultView)
+     * @param ids Each entry resembled one layer in the sequential graph
+     * @example
+     * buildSequentialGraphFromIds("result", "a", ["b", "c", "d"], "e")
+     * // result:
+     * //        b
+     * //     /     \
+     * //    a - c - e
+     * //     \     /
+     * //        d
+     */
+    static buildSequentialGraphFromIds(type: string, ...ids: (string | string[])[]): GraphNode[] {
         const nodes: GraphNode[] = []
 
         for (let layer = 0; layer < ids.length; layer++) {

src/components/RFS_GlobalModalContext.tsx

@@ -6,6 +6,7 @@ import {
     Controls,
     MiniMap,
     NodeProps,
+    NodeTypes,
     ReactFlow,
     useEdgesState,
     useNodesInitialized,
@@ -28,6 +29,7 @@ export function RelationsGraph(props: {
     options?: RelationsGraphOptions
     resultView: ComponentType<ResultViewProps>
     dark?: boolean
+    nodeTypes?: NodeTypes
 }) {
     const [colorMode, setColorMode] = useState<ColorMode>(props.dark ? "dark" : "light")
 
@@ -43,9 +45,10 @@ export function RelationsGraph(props: {
 
     const nodeTypes = useMemo(() => {
         return {
-            result: (nodeProps: NodeProps) => <ResultViewWrapper {...nodeProps} resultView={props.resultView} />
+            result: (nodeProps: NodeProps) => <ResultViewWrapper {...nodeProps} resultView={props.resultView} />,
+            ...props.nodeTypes
         }
-    }, [props.resultView])
+    }, [props.nodeTypes, props.resultView])
 
     const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
     const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)

src/components/graph/GraphNodeUtils.ts

@@ -0,0 +1,36 @@
+import { createContext } from "react"
+import { GraphNode } from "@/components/graph/GraphNode"
+import { RelationsGraphOptions } from "@/components/graph/RelationsGraphOptions"
+
+export const RelationsGraphContext = createContext<{
+    /**
+     * Open the relations graph modal with the specified nodes and options. If the graph is already open, the current graph is replaced
+     * with the specified nodes and options.
+     * @param nodes Nodes to display in the Graph. Consider using GraphNodeUtils for constructing the nodes.
+     * @param options Options to further configure the graph
+     */
+    openRelationsGraph: (nodes: GraphNode[], options?: RelationsGraphOptions) => void
+
+    /**
+     * Open the relations graph modal with the specified nodes and options. If the graph is already open, the current graph is extended
+     * with the specified nodes. Iff options are specified, they will override the options of the currently open graph.
+     * @param nodes Nodes to display in the Graph or add to the already open Graph. Consider using GraphNodeUtils for constructing the nodes.
+     * @param options Options to further configure the Graph.
+     */
+    openOrAddToRelationsGraph: (nodes: GraphNode[], options?: RelationsGraphOptions) => void
+
+    /**
+     * Close the relations graph modal
+     */
+    closeRelationsGraph: () => void
+}>({
+    openRelationsGraph: (): void => {
+        throw "RelationsGraphProvider not mounted"
+    },
+    openOrAddToRelationsGraph: () => {
+        throw "RelationsGraphProvider not mounted"
+    },
+    closeRelationsGraph: (): void => {
+        throw "RelationsGraphProvider not mounted"
+    }
+})

src/components/graph/RelationsGraph.tsx

@@ -8,21 +8,24 @@ import { GraphNode } from "@/components/graph/GraphNode"
 import { RelationsGraphOptions } from "@/components/graph/RelationsGraphOptions"
 import { Button } from "@/components/ui/button"
 import { X } from "lucide-react"
+import { NodeTypes } from "@xyflow/react"
 
 export function RelationsGraphModal({
     isOpen,
     onOpenChange,
     nodes,
     resultView,
     options,
-    dark
+    dark,
+    nodeTypes
 }: {
     isOpen: boolean
     onOpenChange: (val: boolean) => void
     nodes: GraphNode[]
     options?: RelationsGraphOptions
     resultView: ComponentType<ResultViewProps>
     dark?: boolean
+    nodeTypes?: NodeTypes
 }) {
     const searchContext = useContext(FairDOSearchContext)
 
@@ -50,7 +53,7 @@ export function RelationsGraphModal({
                         config: searchContext.config
                     }}
                 >
-                    <RelationsGraph nodes={nodes} resultView={resultView} options={options} dark={dark} />
+                    <RelationsGraph nodes={nodes} resultView={resultView} options={options} dark={dark} nodeTypes={nodeTypes} />
                 </FairDOSearchContext.Provider>
 
                 <div className="rfs-absolute rfs-right-4 rfs-top-4">

src/components/graph/RelationsGraphContext.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+import { ComponentType, PropsWithChildren, useCallback, useState } from "react"
+import { RelationsGraphModal } from "@/components/graph/RelationsGraphModal"
+import { NodeTypes, ReactFlowProvider } from "@xyflow/react"
+import { RelationsGraphContext } from "./RelationsGraphContext"
+import { ResultViewProps } from "@elastic/react-search-ui-views"
+import { GraphNode } from "@/components/graph/GraphNode"
+import { RelationsGraphOptions } from "@/components/graph/RelationsGraphOptions"
+
+export function RelationsGraphProvider(
+    props: PropsWithChildren<{ resultView: ComponentType<ResultViewProps>; dark?: boolean; nodeTypes?: NodeTypes }>
+) {
+    const [state, setState] = useState<{
+        nodes: GraphNode[]
+        options: RelationsGraphOptions
+        isOpen: boolean
+    }>({
+        nodes: [],
+        options: {},
+        isOpen: false
+    })
+
+    const openRelationsGraph = useCallback((nodes: GraphNode[], options?: RelationsGraphOptions) => {
+        setState({
+            nodes,
+            isOpen: true,
+            options: options ?? {}
+        })
+    }, [])
+
+    const openOrAddToRelationsGraph = useCallback((nodes: GraphNode[], options?: RelationsGraphOptions) => {
+        setState((prev) => ({
+            nodes: prev.nodes
+                .concat(nodes)
+                .reduce<GraphNode[]>((acc, node) => (acc.find((inner) => inner.id === node.id) ? acc : acc.concat(node)), []),
+            isOpen: true,
+            options: options ?? prev.options ?? {}
+        }))
+    }, [])
+
+    const onRelationsGraphOpenChange = useCallback((isOpen: boolean) => {
+        setState((prev) => ({ ...prev, isOpen }))
+    }, [])
+
+    const closeRelationsGraph = useCallback(() => {
+        onRelationsGraphOpenChange(false)
+    }, [onRelationsGraphOpenChange])
+
+    return (
+        <RelationsGraphContext.Provider value={{ openRelationsGraph, closeRelationsGraph, openOrAddToRelationsGraph }}>
+            <ReactFlowProvider>
+                <RelationsGraphModal
+                    nodes={state.nodes}
+                    isOpen={state.isOpen}
+                    onOpenChange={onRelationsGraphOpenChange}
+                    resultView={props.resultView}
+                    options={state.options}
+                    dark={props.dark}
+                    nodeTypes={props.nodeTypes}
+                />
+
+                {props.children}
+            </ReactFlowProvider>
+        </RelationsGraphContext.Provider>
+    )
+}

src/components/graph/RelationsGraphModal.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useContext, useEffect, useMemo, useState } from "react"
-import { RFS_GlobalModalContext } from "@/components/RFS_GlobalModalContext"
+import { RelationsGraphContext } from "@/components/graph/RelationsGraphContext"
 import { FairDOSearchContext } from "@/components/FairDOSearchContext"
 import { useStore } from "zustand/index"
 import { resultCache } from "@/lib/ResultCache"
@@ -132,7 +132,7 @@ export function GenericResultView({
     showOpenInFairDoScope = true,
     showInspectFDO = true
 }: GenericResultViewProps) {
-    const { openRelationGraph } = useContext(RFS_GlobalModalContext)
+    const { openRelationsGraph } = useContext(RelationsGraphContext)
     const { searchTerm, elasticConnector, searchFor, config } = useContext(FairDOSearchContext)
     const addToResultCache = useStore(resultCache, (s) => s.set)
     const [loadingRelatedItems, setLoadingRelatedItems] = useState(false)
@@ -299,11 +299,11 @@ export function GenericResultView({
         if (hasMetadata) await fetchRelatedItems(hasMetadata.join(" "), hasMetadata.length)
         setLoadingRelatedItems(false)
 
-        const nodes = GraphNodeUtils.buildNodesSequential("result", hasMetadata ?? [], pid, isMetadataFor ?? [])
-        openRelationGraph(nodes, {
+        const nodes = GraphNodeUtils.buildSequentialGraphFromIds("result", hasMetadata ?? [], pid, isMetadataFor ?? [])
+        openRelationsGraph(nodes, {
             focusedNodes: [pid]
         })
-    }, [fetchRelatedItems, hasMetadata, isMetadataFor, openRelationGraph, pid])
+    }, [fetchRelatedItems, hasMetadata, isMetadataFor, openRelationsGraph, pid])
 
     const showRelatedItemsButton = useMemo(() => {
         return (hasMetadata && hasMetadata.length > 0) || (isMetadataFor && isMetadataFor.length > 0)