Merge branch 'wip'

# Conflicts:
#	package-lock.json
#	src/components/search/DefaultFacet.tsx

Author: craquet

.prettierrc

@@ -3,5 +3,5 @@
   "tabWidth": 4,
   "useTabs": false,
   "trailingComma": "none",
-  "printWidth": 200
+  "printWidth": 150
 }

package.json

@@ -38,6 +38,7 @@
         "@radix-ui/react-select": "^2.1.2",
         "@radix-ui/react-slot": "^1.1.0",
         "@types/luxon": "^3.4.2",
+        "@types/sparql-http-client": "^3.0.5",
         "@xyflow/react": "^12.3.6",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -49,6 +50,7 @@
         "prettier": "^3.4.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "sparql-http-client": "^3.0.1",
         "swr": "^2.3.0",
         "tailwind-merge": "^2.5.5",
         "tailwindcss-animate": "^1.0.7",

src/components/search/DefaultFacet.tsx

@@ -1,14 +1,12 @@
 import type { FairDOConfigProvider } from "@/config/FairDOConfigProvider"
 import type { FacetViewProps } from "@elastic/react-search-ui-views"
 import { Button } from "@/components/ui/button"
-import { Checkbox } from "@/components/ui/checkbox"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
 import { PlusIcon, Search } from "lucide-react"
 import { useEffect, useMemo, useRef, useState } from "react"
-import { PidDisplay } from "@/components/result/PidDisplay"
-import { tryURLPrettyPrint } from "@/lib/utils"
+import { DefaultFacetOption } from "@/components/search/DefaultFacetOption"
 
 export function DefaultFacet(props: FacetViewProps & { config: FairDOConfigProvider }) {
     const [search, setSearch] = useState("")
@@ -45,18 +43,15 @@ export function DefaultFacet(props: FacetViewProps & { config: FairDOConfigProvi
                 )}
             </div>
 
-            {props.options.map((option) => {
-                const value = option.value.toString()
-                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 ? props.onSelect(option.value.toString()) : props.onRemove(option.value.toString()))} />
-                        <Label htmlFor={value} className="min-w-0 grow break-words">
-                            {value ? selfConfig?.usePidResolver ? <PidDisplay pid={value} /> : tryURLPrettyPrint(value) : <span className="text-muted-foreground">None</span>}
-                        </Label>
-                        <div className="text-xs text-muted-foreground">{option.count}</div>
-                    </div>
-                )
-            })}
+            {props.options.map((option) => (
+                <DefaultFacetOption
+                    key={option.value.toString()}
+                    option={option}
+                    facetConfig={selfConfig}
+                    onSelect={props.onSelect}
+                    onRemove={props.onRemove}
+                />
+            ))}
 
             {props.showMore ? (
                 <Button className="p-1" onClick={props.onMoreClick} size="sm" variant="link">

src/components/search/DefaultFacetOption.tsx

@@ -0,0 +1,39 @@
+import { Checkbox } from "@/components/ui/checkbox"
+import { Label } from "@/components/ui/label"
+import { PidDisplay } from "@/components/result/PidDisplay"
+import { FacetValue } from "@elastic/search-ui"
+import { FairDOFacetConfig } from "@/config/FairDOConfig"
+import { useEffect, useMemo } from "react"
+import { ontobeeResolver } from "@/lib/OntobeeResolver"
+
+export function DefaultFacetOption({
+    option,
+    facetConfig,
+    onSelect,
+    onRemove
+}: {
+    option: FacetValue
+    facetConfig: FairDOFacetConfig
+    onSelect(v: string): void
+    onRemove(v: string): void
+}) {
+    const value = useMemo(() => {
+        return option.value.toString()
+    }, [option.value])
+
+    useEffect(() => {
+        if (value.startsWith("http://purl.obolibrary.org")) {
+            ontobeeResolver.parse(value)
+        }
+    }, [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>
+            <div className="text-xs text-muted-foreground">{option.count}</div>
+        </div>
+    )
+}

src/lib/OntobeeResolver.ts

@@ -0,0 +1,25 @@
+import { ParsingClient } from "sparql-http-client"
+
+export class OntobeeResolver {
+    private client: ParsingClient
+
+    constructor() {
+        this.client = new ParsingClient({ endpointUrl: "https://sparql.hegroup.org/sparql", fetch: (a, b) => fetch(a, { ...b, mode: "no-cors" }) })
+    }
+
+    async parse(url: string) {
+        try {
+            const result = await this.client.query.select(`
+            DEFINE sql:describe-mode "CBD"
+            DESCRIBE <${url}>
+            FROM <http://purl.obolibrary.org/obo/merged/CHMO>
+        `)
+
+            console.log(result)
+        } catch (e) {
+            console.error(e)
+        }
+    }
+}
+
+export const ontobeeResolver = new OntobeeResolver()