Improve search dropdown config, allow default entry

craquet · craquet · commit e89cc728e61d · 2025-02-14T11:02:30.000+01:00
diff --git a/src/components/search/DefaultSorting.tsx b/src/components/search/DefaultSorting.tsx
@@ -1,15 +1,18 @@
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { useCallback, useContext } from "react"
+import { useCallback, useContext, useEffect, useMemo, useState } from "react"
 import { SearchContext } from "@elastic/react-search-ui"
 import { ArrowUpDown } from "lucide-react"
 import { FairDOSearchContext } from "@/components/FairDOSearchContext"
+import { SearchState, SortOption } from "@elastic/search-ui"
 
 export function DefaultSorting() {
+    const [value, setValue] = useState("")
     const search = useContext(SearchContext)
     const { config } = useContext(FairDOSearchContext)
 
     const handleChange = useCallback(
         (value: string) => {
+            setValue(value)
             if (value.startsWith("-")) {
                 const field = value.replace("-", "")
                 search.driver.setSort([{ field, direction: "" }], "")
@@ -24,10 +27,45 @@ export function DefaultSorting() {
         [search]
     )
 
+    const makeKey = useCallback((item: SortOption) => {
+        return `${item.direction}-${item.field}`
+    }, [])
+
+    const defaultSortOption = useMemo(() => {
+        return config.sortOptions?.find((elem) => elem.default)
+    }, [config.sortOptions])
+
+    // Set default sorting on first load
+    useEffect(() => {
+        if (defaultSortOption && value === "") {
+            const value = makeKey(defaultSortOption)
+            setValue(value)
+            // Call to setValue does not trigger onValueChange
+            handleChange(value)
+        }
+    }, [defaultSortOption, handleChange, makeKey, value])
+
+    // Update sort dropdown if the sortList changed from the drivers side
+    useEffect(() => {
+        const handler = ({ sortList }: SearchState) => {
+            if (sortList && sortList.length === 1) {
+                const sorting = sortList[0]
+                const sortingValue = makeKey(sorting)
+                setValue(sortingValue)
+            }
+        }
+
+        search.driver.subscribeToStateChanges(handler)
+
+        return () => search.driver.unsubscribeToStateChanges(handler)
+    }, [makeKey, search.driver])
+
+    console.log("haha")
+
     if (!config.sortOptions || config.sortOptions.length === 0) return null
 
     return (
-        <Select onValueChange={handleChange}>
+        <Select value={value} onValueChange={handleChange}>
             <SelectTrigger className="rfs-max-w-[400px]">
                 <div className="rfs-flex rfs-items-center rfs-gap-2">
                     <ArrowUpDown className={"rfs-size-4"} />
@@ -36,11 +74,7 @@ export function DefaultSorting() {
             </SelectTrigger>
             <SelectContent>
                 {config.sortOptions.map((item) => (
-                    <SelectItem
-                        className="rfs-flex rfs-items-center"
-                        key={`${item.direction}-${item.field}`}
-                        value={`${item.direction}-${item.field}`}
-                    >
+                    <SelectItem className="rfs-flex rfs-items-center" key={makeKey(item)} value={makeKey(item)}>
                         {item.label ?? (item.field + " " + item.direction === "asc" ? " (ascending)" : " (descending)")}
                     </SelectItem>
                 ))}
diff --git a/src/config/FairDOConfig.ts b/src/config/FairDOConfig.ts
@@ -87,7 +87,7 @@ export interface FairDOConfig {
     /**
      * Configure possible sort options. Fields to sort by must be present in all used indices.
      */
-    sortOptions?: (SortOption & { label?: string })[]
+    sortOptions?: (SortOption & { label?: string; default?: boolean })[]
     /**
      * Disjunctive facets as specified in the elastic search ui documentation
      * @link https://www.elastic.co/guide/en/search-ui/current/api-react-components-facet.html#api-react-components-facet-example-of-an-or-based-facet-filter
@@ -117,20 +117,7 @@ export interface FairDOConfig {
     imageProxy?: (src: string) => string
 
     /**
-     * Initialize the internal state. This can be useful to specify the default sorting of the results.
-     * @example
-     * initialState: {
-     *         sortList: [
-     *             {
-     *                 field: "_score",
-     *                 direction: "desc"
-     *             },
-     *             {
-     *                 field: "name.keyword",
-     *                 direction: "asc"
-     *             }
-     *         ]
-     *     },
+     * Initialize the internal state. This can be useful to specify some default states.
      */
     initialState?: Partial<RequestState>
 }
diff --git a/src/stories/0 Getting Started.mdx b/src/stories/0 Getting Started.mdx
@@ -41,7 +41,7 @@ export default function Home() {
     const config: FairDOConfig = useMemo(() => {
         return {
             alwaysSearchOnInitialLoad: true,
-            host: <elastic host>,
+            host: "your elastic host",
             indices: [
                 {
                     name: "index-name-here",
@@ -63,17 +63,9 @@ export default function Home() {
             ],
             sortOptions: [
                 { field: "_score", direction: "desc", label: "Relevance" },
-                { field: "name.keyword", direction: "asc", label: "Name (ascending)" },
+                { field: "name.keyword", direction: "asc", label: "Name (ascending)", default: true },
                 { field: "name.keyword", direction: "desc", label: "Name (descending)" }
             ],
-            initialState: {
-                sortList: [
-                    {
-                        field: "name.keyword",
-                        direction: "asc"
-                    }
-                ]
-            },
             connectionOptions: {
                 headers: {
                     // Pass your authentication headers here
diff --git a/src/stories/FairDOElasticSearch.stories.tsx b/src/stories/FairDOElasticSearch.stories.tsx
@@ -112,7 +112,7 @@ const demoConfig: FairDOConfig = {
     ],
     sortOptions: [
         { field: "_score", direction: "desc", label: "Relevance" },
-        { field: "name.keyword", direction: "asc", label: "Name (ascending)" },
+        { field: "name.keyword", direction: "asc", label: "Name (ascending)", default: true },
         { field: "name.keyword", direction: "desc", label: "Name (descending)" },
         { field: "Compound.Molar_mass", direction: "asc", label: "Molar Mass (ascending)" },
         { field: "Compound.Molar_mass", direction: "desc", label: "Molar Mass (descending)" },
@@ -121,14 +121,6 @@ const demoConfig: FairDOConfig = {
         { field: "dateModified", direction: "asc", label: "Date Modified (ascending)" },
         { field: "dateModified", direction: "desc", label: "Date Modified (descending)" }
     ],
-    initialState: {
-        sortList: [
-            {
-                field: "name.keyword",
-                direction: "asc"
-            }
-        ]
-    },
     disjunctiveFacets: [
         "NMR_Method.keyword",
         "resourceType.keyword",
@@ -139,45 +131,6 @@ const demoConfig: FairDOConfig = {
     imageProxy: (src) => `https://wsrv.nl/?url=${src}&h=1000&output=webp&ll`
 }
 
-// const demoConfigWithCompound: 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: "UGNoTW1KUUJ3WmluUHBTcEVpalo6cGloOUVKZ0tTdnlMYVlpTzV4SXBrUQ==",
-//     indices: [
-//         {
-//             name: "fdo-prod",
-//             facets: [
-//                 {
-//                     key: "Compound.Molar_mass",
-//                     label: "Compound",
-//                     type: "min-max-slider"
-//                 }
-//             ],
-//             resultFields: [], // Leave empty to get all fields
-//             searchFields: ["name", "pid", "hasMetadata", "isMetadataFor", "NMR_Method"]
-//         }
-//     ],
-//     initialState: {
-//         sortList: [
-//             {
-//                 field: "_score",
-//                 direction: "desc"
-//             },
-//             {
-//                 field: "name.keyword",
-//                 direction: "asc"
-//             },
-//             {
-//                 field: "locationPreview/Sample.keyword",
-//                 direction: "asc"
-//             }
-//         ]
-//     },
-//     disjunctiveFacets: ["NMR_Method.keyword"]
-// }
-
 export const NoResultRenderer: Story = {
     args: {
         config: demoConfig,
@@ -267,50 +220,3 @@ export const GenericResultRenderer: Story = {
         )
     }
 }
-
-// export const CompoundSlider: Story = {
-//     args: {
-//         config: demoConfigWithCompound,
-//         resultView: (props) => (
-//             <GenericResultView
-//                 result={props.result}
-//                 invertImageInDarkMode
-//                 tags={[
-//                     {
-//                         icon: <GraduationCap className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,
-//                         label: "Resource Type",
-//                         field: "resourceType"
-//                     },
-//                     {
-//                         icon: <GlobeIcon className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,
-//                         field: "hadPrimarySource",
-//                         valueMapper: (v) => tryURLPrettyPrint(v + ""),
-//                         label: "Source"
-//                     },
-//                     {
-//                         icon: <ScaleIcon className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,
-//                         field: "licenseURL",
-//                         valueMapper: (v) => tryURLPrettyPrint(v + ""),
-//                         label: "License URL"
-//                     },
-//                     {
-//                         icon: <AtomIcon className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,
-//                         field: "Compound.Molar_mass",
-//                         label: "Molar Mass",
-//                         valueMapper: (v) => v + " g/mol"
-//                     }
-//                 ]}
-//                 titleField="name"
-//                 creationDateField="dateCreatedRfc3339"
-//                 additionalIdentifierField="identifier"
-//                 digitalObjectLocationField="digitalObjectLocation"
-//                 imageField="locationPreview/Sample"
-//                 parentItemPidField="hasMetadata"
-//                 relatedItemPidsField="isMetadataFor"
-//                 pidField="pid"
-//                 relatedItemsPrefetch={{ searchFields: { pid: {} } }}
-//                 showOpenInFairDoScope
-//             />
-//         )
-//     }
-// }
