Rename some props and change docs to make related items clearer on GenericResultView

Author: craquet

src/components/result/GenericResultView.tsx

@@ -59,17 +59,20 @@ export interface GenericResultViewProps {
     pidField?: string
 
     /**
-     * The elastic field where the related items of the current FDO will be read from. Should be an array of PIDs or otherwise unique identifiers. Will be displayed in a related items graph.
+     * The elastic field where the unique identifier of the child item(s) of the current FDO will be read from. Should be an array of PIDs or otherwise unique identifiers. Will be displayed in a related items graph.
      */
-    relatedItemPidsField?: string
+    childItemPidField?: string
 
     /**
      * Options for prefetching of related items in the relations graph. It is recommended to define this if the default settings don't work properly.
+     * @default Value of pidField
+     * @example
+     * relatedItemsPrefetch={{ searchFields: { pid: {} } }}
      */
-    relatedItemsPrefetch?: { searchFields?: Record<string, SearchFieldConfiguration> }
+    relatedItemsPrefetchOptions?: { searchFields?: Record<string, SearchFieldConfiguration> }
 
     /**
-     * The elastic field where the unique identifier of the parent item (metadata item) of the current FDO will be read from. Will be accessible via a `Find Metadata` button
+     * The elastic field where the unique identifier of the parent item(s) of the current FDO will be read from. Should be an array of PIDs or otherwise unique identifiers. Will be displayed in a related items graph.
      */
     parentItemPidField?: string
 
@@ -112,12 +115,12 @@ export function GenericResultView({
     landingPageLocationField = "landingPageLocation",
     digitalObjectLocationField = "digitalObjectLocation",
     pidField = "pid",
-    relatedItemPidsField = "isMetadataFor",
+    childItemPidField = "isMetadataFor",
     parentItemPidField = "hasMetadata",
     creationDateField = "creationDate",
     editedDateField = "editedDate",
     additionalIdentifierField = "identifier",
-    relatedItemsPrefetch = { searchFields: { pid: {} } },
+    relatedItemsPrefetchOptions = { searchFields: { pid: {} } },
     tags = [],
     showOpenInFairDoScope = true
 }: GenericResultViewProps) {
@@ -229,9 +232,9 @@ export function GenericResultView({
     }, [getArrayOrSingleField, additionalIdentifierField])
 
     const isMetadataFor = useMemo(() => {
-        const val = getArrayOrSingleField(relatedItemPidsField ?? "isMetadataFor")
+        const val = getArrayOrSingleField(childItemPidField ?? "isMetadataFor")
         return val ? toArray(val) : undefined
-    }, [getArrayOrSingleField, relatedItemPidsField])
+    }, [getArrayOrSingleField, childItemPidField])
 
     const creationDate = useMemo(() => {
         const value = getField(creationDateField ?? "dateCreated")
@@ -260,7 +263,7 @@ export function GenericResultView({
                     {
                         result_fields: {},
                         searchTerm: term,
-                        search_fields: relatedItemsPrefetch?.searchFields ?? { [pidField ?? "pid"]: {} },
+                        search_fields: relatedItemsPrefetchOptions?.searchFields ?? { [pidField ?? "pid"]: {} },
                         resultsPerPage: amount
                     }
                 )
@@ -277,7 +280,7 @@ export function GenericResultView({
                 alert("Failed to fetch related items, graph may be incomplete")
             }
         },
-        [addToResultCache, elasticConnector, pidField, relatedItemsPrefetch?.searchFields]
+        [addToResultCache, elasticConnector, pidField, relatedItemsPrefetchOptions?.searchFields]
     )
 
     const showRelatedItemsGraph = useCallback(async () => {

src/stories/0 Getting Started.mdx

@@ -81,7 +81,15 @@ export default function Home() {
         return (
             <GenericResultView
                 result={props.result}
-                invertImageInDarkMode // Not recommended for colorful images
+
+                pidField="pid"
+                titleField="name"
+                creationDateField="dateCreatedRfc3339"
+                imageField="locationPreview/Sample"
+
+                parentItemPidField="hasMetadata"
+                childItemPidField="isMetadataFor"
+
                 tags={[
                     {
                         icon: <GraduationCap />,
@@ -91,28 +99,24 @@ export default function Home() {
                     {
                         icon: <GlobeIcon />,
                         field: "hadPrimarySource",
-                        valueMapper: tryURLPrettyPrint
+                        singleValueMapper: tryURLPrettyPrint
                     },
                     {
                         icon: <ScaleIcon />,
                         field: "licenseURL",
-                        valueMapper: tryURLPrettyPrint
+                        singleValueMapper: value => value + " can be mapped" // Can use simple string mapping
                     },
                     {
                         icon: <AtomIcon />,
-                        field: "Compound"
+                        field: "Compound",
+                        singleValueMapper: value => <div>{value}</div> // Can pass any component as tag content
                     }
                 ]}
-                titleField="name"
-                creationDateField="dateCreatedRfc3339"
-                identifierField="identifier"
-                digitalObjectLocationField="digitalObjectLocation"
-                imageField="locationPreview/Sample"
-                parentItemPidField="hasMetadata"
-                relatedItemPidsField="isMetadataFor"
-                pidField="pid"
-                relatedItemsPrefetch={{ searchFields: { pid: {} } }}
-                showOpenInFairDoScope // Many more options exist, use TypeScript to easily view them in your code
+
+                invertImageInDarkMode // Not recommended for colorful images
+                showOpenInFairDoScope
+
+                // ...many more options exist, use TypeScript to easily view them in your code
             />
         )
     }, [])

src/stories/FairDOElasticSearch.stories.tsx

@@ -212,9 +212,8 @@ export const GenericResultRenderer: Story = {
                 digitalObjectLocationField="digitalObjectLocation"
                 imageField="locationPreview/Sample"
                 parentItemPidField="hasMetadata"
-                relatedItemPidsField="isMetadataFor"
+                childItemPidField="isMetadataFor"
                 pidField="pid"
-                relatedItemsPrefetch={{ searchFields: { pid: {} } }}
                 showOpenInFairDoScope
             />
         )