Better initial sorting and pid display fix

Author: craquet

src/components/FairDOElasticSearch.tsx

@@ -120,12 +120,40 @@ export function FairDOElasticSearch({
                                                         )}
                                                     />
                                                 )}
+                                                {/*{wasSearched && (
+                                                    <Sorting
+                                                        sortOptions={[
+                                                            {
+                                                                name: "Relevance",
+                                                                value: "",
+                                                                direction: ""
+                                                            },
+                                                            {
+                                                                name: "Title",
+                                                                value: "name.keyword",
+                                                                direction: "asc"
+                                                            },
+                                                            {
+                                                                name: "Image",
+                                                                value: "locationPreview/Sample.keyword",
+                                                                direction: "asc"
+                                                            }
+                                                        ]}
+                                                    />
+                                                )}*/}
+                                            </div>
+                                        }
+                                        bodyFooter={
+                                            <div className="flex items-center flex-col gap-2 md:grid grid-cols-[1fr_auto_1fr] w-full p-2">
+                                                <div />
+                                                <Paging />
                                                 {wasSearched && (
                                                     <ResultsPerPage
+                                                        options={[20, 50, 100, 250]}
                                                         view={(props) => {
                                                             return (
-                                                                <div className="flex h-full items-center gap-2">
-                                                                    <div>Results per Page</div>
+                                                                <div className="flex h-full items-center gap-2 justify-self-end">
+                                                                    <div className="text-xs text-muted-foreground">Results per Page</div>
                                                                     <Select
                                                                         value={`${props.value}`}
                                                                         onValueChange={(v) => props.onChange(Number.parseInt(v))}
@@ -150,7 +178,6 @@ export function FairDOElasticSearch({
                                                 )}
                                             </div>
                                         }
-                                        bodyFooter={<Paging />}
                                     />
                                 </ErrorBoundary>
                             )

src/components/result/NMRResultView.tsx

@@ -167,7 +167,7 @@ export function NMRResultView({ result, debug }: { result: SearchResult; debug?:
     return (
         <div className={`m-2 rounded-lg border border-border p-4 ${exactPidMatch ? "animate-outline-ping" : ""}`}>
             <div className="grid grid-rows-[100px_1fr] gap-4 overflow-x-auto md:max-w-full md:grid-cols-[200px_1fr] md:grid-rows-1">
-                <div className="flex justify-center rounded dark:bg-white md:items-center md:p-2">
+                <div className="flex justify-center rounded md:items-center p-2 dark:invert">
                     {previewImage ? (
                         <img className="md:size-[200px]" src={previewImage} alt={`Preview for ${title}`} />
                     ) : (
@@ -185,7 +185,7 @@ export function NMRResultView({ result, debug }: { result: SearchResult; debug?:
                     <div className="font-bold md:text-xl">
                         {title}
                         <span className="ml-2 text-sm font-normal text-muted-foreground">
-                            {identifier} -{creationDate}
+                            {identifier} - {creationDate}
                         </span>
                     </div>
                     <a href={`https://hdl.handle.net/${id}`} target="_blank" className="mb-2 block leading-3 hover:underline">

src/components/result/PidDisplay.tsx

@@ -1,7 +1,7 @@
 import { PidResolver, pidResolver } from "@/lib/pidResolver"
 import { memo, useCallback } from "react"
-import useSWR from "swr"
 import { ontobeeResolver } from "@/lib/OntobeeResolver"
+import useSWRImmutable from "swr/immutable"
 
 /**
  * Resolves a PID and displays the name of the received record
@@ -20,7 +20,7 @@ export const PidDisplay = memo(function PidDisplay({ pid }: { pid: string }) {
         }
     }, [])
 
-    const { data, error } = useSWR(pid, resolveContent)
+    const { data, error } = useSWRImmutable(pid, resolveContent)
 
     if (error) {
         return <div className="text-red-500">{JSON.stringify(error) || "Unknown error"}</div>

src/config/FairDOConfig.ts

@@ -1,3 +1,5 @@
+import { RequestState } from "@elastic/search-ui"
+
 export interface FairDOCoreFacetConfig {
     key: string
     label: string
@@ -86,4 +88,6 @@ export interface FairDOConfig {
          */
         headers?: Record<string, string>
     }
+
+    initialState?: Partial<RequestState>
 }

src/config/FairDOConfigBuilder.ts

@@ -1,4 +1,4 @@
-import type { FacetConfiguration, FilterValueRange } from "@elastic/search-ui"
+import type { FacetConfiguration, FilterValueRange, SearchDriverOptions, SearchFieldConfiguration, SearchQuery } from "@elastic/search-ui"
 import type { FairDOConfig, FairDODateRangeFacetConfig, FairDOFacetConfig, FairDONumericRangeFacetConfig } from "./FairDOConfig"
 import ElasticsearchAPIConnector from "@elastic/search-ui-elasticsearch-connector"
 import moment from "moment"
@@ -24,15 +24,16 @@ export class FairDOConfigBuilder {
         })
     }
 
-    buildElasticSearchConfig() {
+    buildElasticSearchConfig(): SearchDriverOptions {
         return {
             searchQuery: {
                 facets: this.getFacetConfig(),
                 ...this.getSearchOptions()
             },
             autocompleteQuery: this.getAutocompleteQueryConfig(),
             apiConnector: this.buildConnector(),
-            alwaysSearchOnInitialLoad: true
+            alwaysSearchOnInitialLoad: true,
+            initialState: this.getConfig().initialState
         }
     }
 
@@ -52,30 +53,26 @@ export class FairDOConfigBuilder {
         return facets
     }
 
-    getSearchOptions() {
+    getSearchOptions(): SearchQuery & { index_names: string[] } {
         const config = this.getConfig()
         const index_names: string[] = []
-        let allSearchFields: Record<string, Record<never, never>> = {}
+        let allSearchFields: Record<string, SearchFieldConfiguration> = {}
         let allResultFields: Record<string, { raw: Record<never, never> }> = {}
 
         for (const index of config.indices) {
-            // store index name
             index_names.push(index.name)
 
-            // obtain search fields
-            allSearchFields = (index.searchFields || []).reduce(
-                // accumulate from config.searchFields
-                (acc, n) => {
-                    // initialize accumulator if acc is not available, yet
-                    acc = acc || {}
-                    // set n-element (n is resultFieldKey) in acc
+            allSearchFields = (index.searchFields || []).reduce((acc, n) => {
+                if (n === "locationPreview/Sample") {
+                    acc[n] = {
+                        weight: 10
+                    }
+                } else {
                     acc[n] = {}
-                    // return current acc to next iteration
-                    return acc
-                },
-                // set initial value to already collected fields
-                allSearchFields
-            )
+                }
+
+                return acc
+            }, allSearchFields)
 
             // build result fields for current index
             allResultFields = (index.resultFields || []).reduce(

src/stories/FairDOElasticSearch.stories.tsx

@@ -53,15 +53,15 @@ const demoConfig: FairDOConfig = {
     ]
 }
 
-const demoConfig2: FairDOConfig = {
+const demoConfig3: FairDOConfig = {
     debug: false,
     alwaysSearchOnInitialLoad: true,
     // host: "https://matwerk.datamanager.kit.edu/search-proxy/api/v1",
     host: "https://ddaa9283-f114-4496-b6ed-af12ee34b107.ka.bw-cloud-instance.org:9200",
     apiKey: "VG9NNFNwUUJyWWdtamJ6UGExcjY6aXhKUkk1M0xTT1dTS2xzN3daQjA3UQ==",
     indices: [
         {
-            name: "fdo-test-2",
+            name: "fdo-test-3",
             facets: [
                 {
                     key: "resourceType.keyword",
@@ -92,6 +92,18 @@ const demoConfig2: FairDOConfig = {
             searchFields: ["name", "pid", "hasMetadata", "isMetadataFor", "NMR_Method"]
         }
     ],
+    initialState: {
+        sortList: [
+            {
+                field: "name.keyword",
+                direction: "asc"
+            },
+            {
+                field: "locationPreview/Sample.keyword",
+                direction: "asc"
+            }
+        ]
+    },
     disjunctiveFacets: ["NMR_Method.keyword"]
 }
 
@@ -102,9 +114,9 @@ export const DemoElastic: Story = {
     }
 }
 
-export const DemoElastic2: Story = {
+export const DemoElastic3: Story = {
     args: {
-        config: demoConfig2,
+        config: demoConfig3,
         debug: false
     }
 }