Better config for facet options and truncate long words

Author: craquet

.storybook/main.ts

@@ -2,7 +2,13 @@ import type { StorybookConfig } from "@storybook/react-vite"
 
 const config: StorybookConfig = {
     stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-    addons: ["@storybook/addon-essentials", "@chromatic-com/storybook", "@storybook/addon-interactions", "@storybook/addon-themes"],
+    addons: [
+        "@storybook/addon-essentials",
+        "@chromatic-com/storybook",
+        "@storybook/addon-interactions",
+        "@storybook/addon-themes",
+        "@storybook/addon-docs"
+    ],
     framework: {
         name: "@storybook/react-vite",
         options: {}

package-lock.json

@@ -37,6 +37,7 @@
         "@radix-ui/react-popover": "^1.1.2",
         "@radix-ui/react-select": "^2.1.2",
         "@radix-ui/react-slot": "^1.1.0",
+        "@storybook/addon-docs": "^8.5.0",
         "@types/luxon": "^3.4.2",
         "@types/sparql-http-client": "^3.0.5",
         "@xyflow/react": "^12.3.6",

package.json

@@ -4,6 +4,7 @@ import { PidDisplay } from "@/components/result/PidDisplay"
 import { FacetValue } from "@elastic/search-ui"
 import { FairDOFacetConfig } from "@/config/FairDOConfig"
 import { useMemo } from "react"
+import { tryURLPrettyPrint } from "@/lib/utils"
 
 export function DefaultFacetOption({
     option,
@@ -20,18 +21,25 @@ export function DefaultFacetOption({
         return option.value.toString()
     }, [option.value])
 
-    // TODO find a way to query obolibrary
-    // useEffect(() => {
-    //     if (value.startsWith("http://purl.obolibrary.org")) {
-    //         ontobeeResolver.parse(value)
-    //     }
-    // }, [value])
+    const modifiedValue = useMemo(() => {
+        if (facetConfig.prettyPrintURLs) {
+            return tryURLPrettyPrint(value)
+        } else return value
+    }, [facetConfig.prettyPrintURLs, value])
 
     return (
         <div key={value} className="flex max-w-full items-center gap-2 break-words p-1 pb-2">
             <Checkbox id={value} checked={option.selected} onCheckedChange={(v) => (v ? onSelect(value) : onRemove(value))} />
-            <Label htmlFor={value} className="min-w-0 grow break-words">
-                {value ? facetConfig.usePidResolver ? <PidDisplay pid={value} /> : value : <span className="text-muted-foreground">None</span>}
+            <Label htmlFor={value} className="min-w-0 grow break-words [&:not(:hover)]:truncate">
+                {value ? (
+                    facetConfig.usePidResolver ? (
+                        <PidDisplay pid={value} />
+                    ) : (
+                        modifiedValue
+                    )
+                ) : (
+                    <span className="text-muted-foreground">None</span>
+                )}
             </Label>
             <div className="text-xs text-muted-foreground">{option.count}</div>
         </div>

src/components/search/DefaultFacetOption.tsx

@@ -1,8 +1,12 @@
 export interface FairDOCoreFacetConfig {
     key: string
     label: string
+    /**
+     * Not properly implemented at the moment
+     */
     isFilterable?: boolean
     usePidResolver?: boolean
+    prettyPrintURLs?: boolean
 }
 
 export interface FairDONumericRangeFacetConfig extends FairDOCoreFacetConfig {
@@ -43,18 +47,10 @@ export interface FairDOIndexConfig {
  * Configuration for the {@link FairDOElasticSearch} component
  */
 export interface FairDOConfig {
-    /**
-     * Unused
-     */
-    logo: string
-    /**
-     * Unused
-     */
-    title: string
     /**
      * Enables debug features. Should be disabled in production
      */
-    debug: boolean
+    debug?: boolean
     /**
      * Directly issue a search query to the elastic endpoint when the component is loaded
      */
@@ -75,7 +71,7 @@ export interface FairDOConfig {
      * 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
      */
-    disjunctiveFacets: string[]
+    disjunctiveFacets?: string[]
 
     /**
      * Specify connection options, like an Authorization header

src/config/FairDOConfig.ts

@@ -52,11 +52,6 @@ export class FairDOConfigBuilder {
         return facets
     }
 
-    getFieldMappings(index: string) {
-        const indexConfig = this.getConfig().indices.find((c) => c.name === index)
-        return indexConfig?.fieldMappings
-    }
-
     getSearchOptions() {
         const config = this.getConfig()
         const index_names: string[] = []

src/config/FairDOConfigBuilder.ts

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks"
 
 import "../index.css"