Merge pull request #72 from kit-data-manager/restructure

Restructure and streamline parts of the repository, update exports

Author: craquet

README.md

@@ -4,10 +4,7 @@
 [![Node.js CI](https://github.com/kit-data-manager/react-fairdo-search/actions/workflows/build.yml/badge.svg)](https://github.com/kit-data-manager/react-fairdo-search/actions/workflows/build.yml)
 ![NPM Type Definitions](https://img.shields.io/npm/types/%40kit-data-manager%2Freact-fairdo-search)
 
-
-> ⚠️ This component is in active development. Consider it **not** ready for production.
-
-All-in-one React component for rendering an elastic search UI based on the provided configuration. Includes
+All-in-one, highly configurable React component for rendering an elastic search UI based on the provided configuration. Includes
 an interactive graph of related records.
 
 This is an ESM Module intended for use in modern React applications. Make sure your bundler supports importing CSS files in JavaScript/TypeScript. Next.js is supported out of the box.
@@ -20,13 +17,55 @@ This is an ESM Module intended for use in modern React applications. Make sure y
 
 ## Docs
 
-[Visit the Storybook](https://kit-data-manager.github.io/react-fairdo-search/?path=/docs/getting-started--docs)
+[Visit the Storybook](https://kit-data-manager.github.io/react-fairdo-search/?path=/docs/getting-started--docs) for examples and some documentation. For more documentation, consult the TypeScript typings.
+
+## Quick Start
+
+Refer to the Getting Started Guide in the Storybook
 
 ## Customization
 
+### Result View
+
+Most notably, the result view component should be customized. A `GenericResultView` Component is provided that should work
+for some scenarious out of the box. Otherwise, you should implement your own Result View in React. For a starting point, feel
+free to copy the code of `GenericResultView.ts`, though most of the customization should be thrown out to make it more lightweight.
+
+### Generic Result View
+
+Each field of the generic result view can be mapped to a field in the elastic search index. Additionally, you can specify multiple
+tags from multiple different fields in the elastic index. Take a look at the Storybook for an example.
+
+To map (parts of) the result before feeding it to the `GenericResultView`, you can define you own component that itself
+uses the `GenericResultView` with modified data:
+
+```typescript jsx
+import { useMemo } from "react"
+import { GenericResultView, ResultViewProps } from "@kit-data-manager/react-fairdo-search"
+
+export function MyResultView(props: ResultViewProps) {
+    const mappedResult = useMemo(() => {
+        const copy = structuredClone(props.result)
+        copy.someProperty = copy.something + copy.somethingElse
+        return copy
+    }, [props.result])
+
+    return <GenericResultView result={mappedResult} titleField={"someProperty"} />
+}
+```
+
+Then simply pass your custom component to the search component.
+
+### Styling
+
 Styling is done using tailwind and css variables. Feel free to override these variables in your own CSS.
 
-## Development
+
+## Contributing
+
+Feedback and issue reports are welcome, simply [create an issue](https://github.com/kit-data-manager/react-fairdo-search/issues/new) here on GitHub.
+
+### Development
 
 Install dependencies with
 

src/components/FairDOElasticSearch.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import type { FairDOConfig } from "@/config/FairDOConfig"
+import type { FairDOConfig } from "@/lib/config/FairDOConfig"
 import type { SearchContextState } from "@elastic/search-ui"
 import { FairDOSearchProvider } from "@/components/FairDOSearchProvider"
 import { RelationsGraphProvider } from "@/components/graph/RelationsGraphProvider"
@@ -9,18 +9,18 @@ import { DefaultFacet, OptionViewProps } from "@/components/search/DefaultFacet"
 import { DefaultSearchBox } from "@/components/search/DefaultSearchBox"
 import { ErrorView } from "@/components/search/ErrorView"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { FairDOConfigBuilder } from "@/config/FairDOConfigBuilder"
+import { FairDOConfigBuilder } from "@/lib/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, useCallback, useMemo } from "react"
 import "../index.css"
 import "../elastic-ui.css"
 import { TooltipProvider } from "./ui/tooltip"
-import { useAutoDarkMode } from "@/components/utils"
 import { DefaultSorting } from "@/components/search/DefaultSorting"
 import { NodeTypes } from "@xyflow/react"
 import { ResultViewSelector } from "@/components/result/ResultViewSelector"
+import { useAutoDarkMode } from "@/lib/hooks"
 
 /**
  * All-in-one component for rendering an elastic search UI based on the provided configuration. Includes

src/components/FairDOSearchContext.tsx

@@ -3,7 +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"
+import { FairDOConfig } from "@/lib/config/FairDOConfig"
 
 /**
  * Extends the elasticsearch SearchContext with additional utilities

src/components/FairDOSearchProvider.tsx

@@ -1,8 +1,8 @@
-import type { FairDOConfig } from "@/config/FairDOConfig"
+import type { FairDOConfig } from "@/lib/config/FairDOConfig"
 import type { SearchContextState } from "@elastic/search-ui"
 import type { PropsWithChildren } from "react"
 import { FairDOSearchContext } from "@/components/FairDOSearchContext"
-import { FairDOConfigBuilder } from "@/config/FairDOConfigBuilder"
+import { FairDOConfigBuilder } from "@/lib/config/FairDOConfigBuilder"
 import { arrayToObjectEntries } from "@/lib/utils"
 import { WithSearch } from "@elastic/react-search-ui"
 import { useCallback, useMemo } from "react"

src/components/graph/GraphNodeUtils.ts

@@ -1,10 +1,11 @@
 import { GraphNode } from "@/components/graph/GraphNode"
-import { toArray } from "@/components/result"
+
+import { toArray } from "@/lib/utils"
 
 /**
  * Utilities for working with the RelationsGraph
  */
-export class GraphNodeUtils {
+export abstract class GraphNodeUtils {
     /**
      * 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)

src/components/graph/GraphUtils.ts

@@ -0,0 +1,57 @@
+import { Edge, Node } from "@xyflow/react"
+import Dagre from "@dagrejs/dagre"
+import { GraphNode } from "@/components/graph/GraphNode"
+
+export abstract class GraphUtils {
+    public static buildGraphFromNodes(nodes: GraphNode[]) {
+        const initialNodes: { id: string; type: string; position: { x: number; y: number }; data: Record<string, unknown> }[] = nodes.map((node) => ({
+            type: node.type,
+            id: node.id,
+            position: { x: 0, y: 0 },
+            data: node.data ?? {}
+        }))
+
+        const initialEdges: { id: string; source: string; target: string }[] = []
+
+        for (const node of nodes) {
+            for (const out of node.out) {
+                initialEdges.push({
+                    id: `${node.id}-${out}`,
+                    source: node.id,
+                    target: out
+                })
+            }
+        }
+
+        return { initialNodes, initialEdges }
+    }
+
+    public static computeNodeLayout(nodes: (Node & { type: string })[], edges: Edge[]) {
+        const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}))
+        g.setGraph({ rankdir: "LR", nodesep: 30, ranksep: 150 })
+
+        edges.forEach((edge) => g.setEdge(edge.source, edge.target))
+        nodes.forEach((node) =>
+            g.setNode(node.id, {
+                ...node,
+                width: node.measured?.width ?? 0,
+                height: node.measured?.height ?? 0
+            })
+        )
+
+        Dagre.layout(g)
+
+        return {
+            nodes: nodes.map((node) => {
+                const position = g.node(node.id)
+                // We are shifting the dagre node position (anchor=center center) to the top left
+                // so it matches the React Flow node anchor point (top left).
+                const x = position.x - (node.measured?.width ?? 0) / 2
+                const y = position.y - (node.measured?.height ?? 0) / 2
+
+                return { ...node, position: { x, y } }
+            }),
+            edges
+        }
+    }
+}

src/components/graph/RelationsGraph.tsx

@@ -1,4 +1,4 @@
-import { buildGraphFromNodes, computeNodeLayout } from "@/components/graph/helpers"
+import { GraphUtils } from "@/components/graph/GraphUtils"
 import {
     Background,
     BackgroundVariant,
@@ -40,7 +40,7 @@ export function RelationsGraph(props: {
     }, [])
 
     const { initialEdges, initialNodes } = useMemo(() => {
-        return buildGraphFromNodes(props.nodes)
+        return GraphUtils.buildGraphFromNodes(props.nodes)
     }, [props.nodes])
 
     const nodeTypes = useMemo(() => {
@@ -62,7 +62,7 @@ export function RelationsGraph(props: {
     }, [initialEdges, initialNodes, setEdges, setNodes])
 
     const onLayout = useCallback(() => {
-        const layouted = computeNodeLayout(nodes, edges)
+        const layouted = GraphUtils.computeNodeLayout(nodes, edges)
 
         setNodes([...layouted.nodes])
         setEdges([...layouted.edges])

src/components/graph/helpers.ts

@@ -1,6 +1,13 @@
 export * from "./RelationsGraph"
 export * from "./RelationsGraphModal"
-export * from "./ResultViewWrapper"
-export * from "./helpers"
 export * from "./GraphNode"
 export * from "./GraphNodeUtils"
+export * from "./RelationsGraphContext"
+export * from "./RelationsGraphOptions"
+
+export type * from "./RelationsGraph"
+export type * from "./RelationsGraphModal"
+export type * from "./GraphNode"
+export type * from "./GraphNodeUtils"
+export type * from "./RelationsGraphContext"
+export type * from "./RelationsGraphOptions"

src/components/graph/index.ts

@@ -3,7 +3,6 @@ import { RelationsGraphContext } from "@/components/graph/RelationsGraphContext"
 import { FairDOSearchContext } from "@/components/FairDOSearchContext"
 import { useStore } from "zustand/index"
 import { resultCache } from "@/lib/ResultCache"
-import { autoUnwrap, autoUnwrapArray, toArray } from "@/components/result/utils"
 import { DateTime } from "luxon"
 import { ChevronDown, Download, GitFork, LoaderCircle, Microscope, Pencil, PlusIcon, SearchIcon, TableProperties } from "lucide-react"
 import { Badge } from "@/components/ui/badge"
@@ -16,6 +15,7 @@ import { GenericResultViewImage } from "@/components/result/GenericResultViewIma
 import { GraphNodeUtils } from "@/components/graph/GraphNodeUtils"
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"
 import { PidComponent } from "@kit-data-manager/react-pid-component"
+import { autoUnwrap, autoUnwrapArray, toArray } from "@/lib/utils"
 
 const HTTP_REGEX = /https?:\/\/.*/
 

src/components/result/GenericResultView.tsx

@@ -2,9 +2,9 @@ import { MouseEvent, ReactNode, useCallback, useEffect, useMemo, useState } from
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 import { Badge } from "@/components/ui/badge"
 import { SearchResult } from "@elastic/search-ui"
-import { autoUnwrap } from "@/components/result/utils"
 import { useCopyToClipboard } from "usehooks-ts"
 import { CheckIcon } from "lucide-react"
+import { autoUnwrap } from "@/lib/utils"
 
 export interface GenericResultViewTagProps {
     /**

src/components/result/GenericResultViewTag.tsx

@@ -1,5 +1,5 @@
-import { PidDisplay } from "@/components/result/PidDisplay"
-import { PidResolver } from "@/lib/pidResolver"
+import { PidNameDisplay } from "@/components/result/PidNameDisplay"
+import { PidResolver } from "@/lib/PidResolver"
 
 /**
  * @internal
@@ -9,7 +9,7 @@ import { PidResolver } from "@/lib/pidResolver"
 export function ObjectRender({ data }: { data: Record<string, unknown> }) {
     if ("raw" in data && typeof data.raw === "string") {
         if (PidResolver.isPID(data.raw)) {
-            return <PidDisplay pid={data.raw} />
+            return <PidNameDisplay pid={data.raw} />
         } else {
             return <div>{data.raw}</div>
         }

src/components/result/ObjectRender.tsx

@@ -1,4 +1,4 @@
-import { PidResolver, pidResolver } from "@/lib/pidResolver"
+import { PidResolver, pidResolver } from "@/lib/PidResolver"
 import { memo, useCallback } from "react"
 import { tempResolver } from "@/lib/TempResolver"
 import useSWRImmutable from "swr/immutable"
@@ -8,15 +8,8 @@ import useSWRImmutable from "swr/immutable"
  * @param pid A valid PID
  * @constructor
  */
-export const PidDisplay = memo(function PidDisplay({ pid }: { pid: string }) {
+export const PidNameDisplay = memo(function PidNameDisplay({ pid }: { pid: string }) {
     const resolveContent = useCallback(async (pid: string) => {
-        // Hardcoded for NEP deployment, should be removed in the future if possible!
-        if (pid === "21.T11981/935ad20c-e8f7-485d-8987-b4f22431ff4b") {
-            return "chemotion-repository.net"
-        } else if (pid === "21.T11981/352621cf-b0c6-4105-89a4-324f16cf7776") {
-            return "nmrxiv.org"
-        }
-
         if (PidResolver.isPID(pid)) {
             const content = await pidResolver.resolve(pid)
             return content.name

src/components/result/PidDisplay.tsx renamed to src/components/result/PidNameDisplay.tsx

@@ -1,9 +1,13 @@
 export * from "./GenericResultView"
-export type * from "./GenericResultView"
 export * from "./GenericResultViewImageCarousel"
-export type * from "./GenericResultViewImageCarousel"
-export * from "./PidDisplay"
-export type * from "./PidDisplay"
-export * from "./utils"
+export * from "./PidNameDisplay"
 export * from "./OrcidDisplay"
+export * from "./GenericResultViewImage"
+export * from "./GenericResultViewTag"
+
+export type * from "./GenericResultView"
+export type * from "./GenericResultViewImageCarousel"
+export type * from "./PidNameDisplay"
 export type * from "./OrcidDisplay"
+export type * from "./GenericResultViewImage"
+export type * from "./GenericResultViewTag"