Add tooltips to facets

Author: craquet

src/components/search/DefaultFacet.tsx

@@ -9,6 +9,7 @@ import { ComponentType, useEffect, useMemo, useRef, useState } from "react"
 import { DefaultFacetOption } from "@/components/search/DefaultFacetOption"
 import type { FacetValue } from "@elastic/search-ui"
 import type { FairDOFacetConfig } from "@/config/FairDOConfig"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 
 export interface OptionViewProps {
     option: FacetValue
@@ -40,7 +41,13 @@ export function DefaultFacet(props: FacetViewProps & { config: FairDOConfigBuild
     return (
         <div className="rfs-px-4 rfs-pt-0 rfs-pb-8">
             <div className="rfs-flex rfs-items-center rfs-justify-between rfs-pb-2">
-                <div className="rfs-text-sm rfs-font-bold">{props.label}</div>
+                <Tooltip disableHoverableContent={true} open={selfConfig.description ? undefined : false}>
+                    <TooltipTrigger asChild>
+                        <div className="rfs-text-sm rfs-font-bold">{props.label}</div>
+                    </TooltipTrigger>
+                    <TooltipContent>{selfConfig.description}</TooltipContent>
+                </Tooltip>
+
                 {props.showSearch && (
                     <Popover>
                         <PopoverTrigger asChild>

src/config/FairDOConfig.ts

@@ -3,6 +3,7 @@ import { RequestState, SearchFieldConfiguration } from "@elastic/search-ui"
 export interface FairDOCoreFacetConfig {
     key: string
     label: string
+    description?: string
     /**
      * Not properly implemented at the moment
      */

src/stories/DefaultFacet.stories.tsx

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { DefaultFacet } from "@/components/search/DefaultFacet"
+import { FairDOConfigBuilder } from "@/config/FairDOConfigBuilder"
+import { TooltipProvider } from "@/components/ui/tooltip"
+import { GlobalModalProvider } from "@/components/GlobalModalProvider"
+import { GenericResultView } from "@/components/result"
+import type { FairDOConfig } from "@/config/FairDOConfig"
+
+const meta = {
+    component: DefaultFacet
+} satisfies Meta<typeof DefaultFacet>
+
+export default meta
+
+const demoConfig: FairDOConfig = {
+    debug: false,
+    alwaysSearchOnInitialLoad: true,
+    // host: "https://matwerk.datamanager.kit.edu/search-proxy/api/v1",
+    host: "",
+    apiKey: "",
+    indices: [
+        {
+            name: "fdo-prod",
+            facets: [
+                { label: "My Facet", key: "facet1" },
+                { label: "Pretty URLs", key: "facet2", prettyPrintURLs: true },
+                { label: "With Pid Resolver", key: "facet3", usePidResolver: true }
+            ],
+            resultFields: [], // Leave empty to get all fields
+            searchFields: []
+        }
+    ]
+}
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    decorators: [
+        (Story) => (
+            <TooltipProvider>
+                <GlobalModalProvider resultView={GenericResultView}>
+                    <div className="rfs-max-w-60">
+                        <Story />
+                    </div>
+                </GlobalModalProvider>
+            </TooltipProvider>
+        )
+    ],
+    args: {
+        label: "My Facet",
+        onMoreClick: () => {},
+        onRemove: () => {},
+        onChange: () => {},
+        onSelect: () => {},
+        options: [
+            { count: 10, value: "First entry" },
+            { count: 20, value: "Second entry" },
+            { count: 30, value: "Third entry" },
+            { count: 42, value: "Fourth entry" }
+        ],
+        showMore: false,
+        values: [],
+        showSearch: false,
+        onSearch: () => {},
+        searchPlaceholder: "",
+        config: new FairDOConfigBuilder(demoConfig)
+    }
+}
+
+export const PrettyURL: Story = {
+    decorators: [
+        (Story) => (
+            <TooltipProvider>
+                <GlobalModalProvider resultView={GenericResultView}>
+                    <div className="rfs-max-w-60">
+                        <Story />
+                    </div>
+                </GlobalModalProvider>
+            </TooltipProvider>
+        )
+    ],
+    args: {
+        label: "Pretty URLs",
+        onMoreClick: () => {},
+        onRemove: () => {},
+        onChange: () => {},
+        onSelect: () => {},
+        options: [
+            { count: 10, value: "https://kit.edu/test" },
+            { count: 20, value: "https://www.example.org/" }
+        ],
+        showMore: false,
+        values: [],
+        showSearch: false,
+        onSearch: () => {},
+        searchPlaceholder: "",
+        config: new FairDOConfigBuilder(demoConfig)
+    }
+}
+
+export const WithPidResolver: Story = {
+    decorators: [
+        (Story) => (
+            <TooltipProvider>
+                <GlobalModalProvider resultView={GenericResultView}>
+                    <div className="rfs-max-w-60">
+                        <Story />
+                    </div>
+                </GlobalModalProvider>
+            </TooltipProvider>
+        )
+    ],
+    args: {
+        label: "With Pid Resolver",
+        onMoreClick: () => {},
+        onRemove: () => {},
+        onChange: () => {},
+        onSelect: () => {},
+        options: [
+            { count: 10, value: "21.T11148/010acb220a9c2c8c0ee6" },
+            { count: 20, value: "21.T11148/ca9fd0b2414177b79ac2" }
+        ],
+        showMore: false,
+        values: [],
+        showSearch: false,
+        onSearch: () => {},
+        searchPlaceholder: "",
+        config: new FairDOConfigBuilder(demoConfig)
+    }
+}