Mapper and Lettuce integration (#1212)

Author: AndrewThien

app/next-client-app/api/recommendations.ts

@@ -2,32 +2,41 @@
 
 import request from "@/lib/api/request";
 import {
-  unisonBaseUrl,
-  unisonApiKey,
-  recommendationService,
+  recommendationServiceBaseUrl,
+  recommendationServiceApiKey,
+  recommendationServiceName,
 } from "@/constants";
 
-export const getConceptRecommendationsUnison = async (
-  // Unison can query by concept name, or concept code (exact match).
-  // The latter is used first in searching, then the former.
+export const getRecommendations = async (
   queryValue: string,
   domainId: string
-): Promise<UnisonConceptResponse> => {
+): Promise<RecommendationServiceResponse> => {
   try {
-    if (recommendationService === "unison") {
-      const endpoint = `${queryValue}?apiKey=${unisonApiKey}&domain=${domainId}`;
-      return await request<UnisonConceptResponse>(endpoint, {
-        baseUrl: unisonBaseUrl,
+    // Unison recommendation service
+    // Unison can query by concept name, or concept code (exact match).
+    // The latter is used first in searching, then the former.
+    if (recommendationServiceName === "unison") {
+      const endpoint = `${queryValue}?apiKey=${recommendationServiceApiKey}&domain=${domainId}`;
+      return await request<RecommendationServiceResponse>(endpoint, {
+        baseUrl: recommendationServiceBaseUrl,
         headers: {
           Accept: "application/json",
         },
       });
     }
-    // TODO: Implement Lettuce recommendation service
-    else if (recommendationService === "lettuce") {
-      console.log("Lettuce recommendation service");
+    // Lettuce recommendation service
+    if (recommendationServiceName === "lettuce") {
+      const endpoint = `${queryValue}?domain=${domainId}`;
+      return await request<RecommendationServiceResponse>(endpoint, {
+        baseUrl: recommendationServiceBaseUrl,
+        headers: {
+          Accept: "application/json",
+          Authorization: `Bearer ${recommendationServiceApiKey}`,
+        },
+        authMode: "apiKey",
+      });
     }
-
+    // Other recommendation services not supported
     throw new Error("Recommendation service not supported");
   } catch (error) {
     console.error("Error fetching recommendations:", error);

app/next-client-app/components/core/Tooltips.tsx

@@ -2,7 +2,7 @@ import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
-  TooltipTrigger
+  TooltipTrigger,
 } from "@/components/ui/tooltip";
 
 import { InfoIcon } from "lucide-react";
@@ -22,7 +22,10 @@ export function Tooltips({
         <TooltipTrigger asChild>
           <InfoIcon className="ml-1 h-4 w-4 text-muted-foreground" />
         </TooltipTrigger>
-        <TooltipContent className="max-w-96 text-center" side={side}>
+        <TooltipContent
+          className="max-w-96 text-center whitespace-pre-wrap"
+          side={side}
+        >
           <p>
             {content}
             {link && (

app/next-client-app/components/recommendations/ai-suggesions-button.tsx

@@ -3,15 +3,15 @@ import { useState } from "react";
 import { Button } from "../ui/button";
 import { Sparkles, Loader2 } from "lucide-react";
 import AISuggestionDialog from "./ai-suggestions-dialog";
-import { getConceptRecommendationsUnison } from "@/api/recommendations";
+import { getRecommendations } from "@/api/recommendations";
 import { addConcept } from "@/api/concepts";
 import { toast } from "sonner";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuLabel,
   DropdownMenuSeparator,
-  DropdownMenuTrigger
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { domains } from "@/constants/domains";
 import { DropdownMenuItem } from "@radix-ui/react-dropdown-menu";
@@ -20,7 +20,7 @@ export function AISuggestionsButton({
   value,
   tableId,
   rowId,
-  contentType
+  contentType,
 }: {
   value: string;
   tableId: string;
@@ -29,7 +29,8 @@ export function AISuggestionsButton({
 }) {
   const [isLoading, setIsLoading] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
-  const [suggestions, setSuggestions] = useState<UnisonConceptItem[]>([]);
+  const [suggestions, setSuggestions] = useState<RecommendationItem[]>([]);
+  const [metadata, setMetadata] = useState<RecommendationMetadata | null>(null);
   const [domainId, setDomainId] = useState<string>("");
 
   // Fetches AI suggestions from the API
@@ -42,14 +43,16 @@ export function AISuggestionsButton({
     setIsLoading(true);
 
     try {
-      // Call the getConceptRecommendations function
-      const recommendations: UnisonConceptResponse =
-        await getConceptRecommendationsUnison(value, domainId);
+      const recommendations: RecommendationServiceResponse =
+        await getRecommendations(value, domainId);
       // Filter to get only unique concept IDs
       const uniqueRecommendations = recommendations.items.filter(
         (item, index, array) =>
           array.findIndex((i) => i.conceptId === item.conceptId) === index
       );
+      if (recommendations.metadata) {
+        setMetadata(recommendations.metadata);
+      }
 
       setSuggestions(uniqueRecommendations);
       setIsOpen(true);
@@ -136,6 +139,7 @@ export function AISuggestionsButton({
         rowId={rowId}
         domainId={domainId}
         contentType={contentType}
+        metadata={metadata}
       />
     </>
   );

app/next-client-app/components/recommendations/ai-suggestions-dialog.tsx

@@ -10,7 +10,7 @@ import { InfoItem } from "../core/InfoItem";
 interface AISuggestionDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  suggestions: UnisonConceptItem[];
+  suggestions: RecommendationItem[];
   onApplySuggestion: (data: {
     concept: number;
     object_id: number;
@@ -23,6 +23,7 @@ interface AISuggestionDialogProps {
   rowId: number;
   domainId: string;
   contentType: string;
+  metadata?: RecommendationMetadata | null;
 }
 
 // Main dialog component combining all parts
@@ -36,6 +37,7 @@ export default function AISuggestionDialog({
   rowId,
   domainId,
   contentType,
+  metadata,
 }: AISuggestionDialogProps) {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -66,6 +68,16 @@ export default function AISuggestionDialog({
               }
               className="py-1 md:py-0 md:px-3"
             />
+            {metadata && (
+              <InfoItem
+                label="Pipeline"
+                value={
+                  metadata.pipeline.charAt(0).toUpperCase() +
+                  metadata.pipeline.slice(1)
+                }
+                className="py-1 md:py-0 md:px-3"
+              />
+            )}
           </div>
         </DialogHeader>
 

app/next-client-app/components/recommendations/columns.tsx

@@ -16,15 +16,15 @@ export const columns = (
     table_id: string;
   }) => void,
   contentType: string
-): ColumnDef<UnisonConceptItem>[] => [
+): ColumnDef<RecommendationItem>[] => [
   {
     id: "Concept Name",
     header: ({ column }) => (
       <DataTableColumnHeader column={column} title="Concept Name" />
     ),
     cell: ({ row }) => {
       const { conceptName } = row.original;
-      return <div className="w-[500px]">{conceptName}</div>;
+      return <div className="w-[500px] whitespace-pre-wrap">{conceptName}</div>;
     },
     enableSorting: false,
     enableHiding: true,
@@ -63,13 +63,20 @@ export const columns = (
     id: "Accuracy",
     header: ({ column }) => (
       <div className="text-center w-full">
-        <DataTableColumnHeader column={column} title="Accuracy/Confidence" />
+        <DataTableColumnHeader column={column} title="Accuracy/Score" />
       </div>
     ),
     enableSorting: false,
     enableHiding: true,
     cell: ({ row }) => {
-      const { accuracy, explanation } = row.original;
+      const { accuracy, explanation, scores } = row.original;
+      if (scores) {
+        return (
+          <div className="text-center w-full flex items-center justify-center gap-1">
+            {((1 - (scores?.["vector-search"] || 0)) * 100).toFixed(2)}%
+          </div>
+        );
+      }
       return (
         <div className="text-center w-full flex items-center justify-center gap-1">
           {accuracy}

app/next-client-app/components/recommendations/stored-recommendations-button.tsx

@@ -10,7 +10,7 @@ import {
   DropdownMenuContent,
   DropdownMenuLabel,
   DropdownMenuSeparator,
-  DropdownMenuTrigger
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { domains } from "@/constants/domains";
 import { DropdownMenuItem } from "@radix-ui/react-dropdown-menu";
@@ -20,7 +20,7 @@ export function StoredRecommendationsButton({
   tableId,
   rowId,
   contentType,
-  mappingRecommendations
+  mappingRecommendations,
 }: {
   value: string;
   tableId: string;
@@ -31,7 +31,7 @@ export function StoredRecommendationsButton({
   mappingRecommendations: MappingRecommendation[];
 }) {
   const [isOpen, setIsOpen] = useState(false);
-  const [suggestions, setSuggestions] = useState<UnisonConceptItem[]>([]);
+  const [suggestions, setSuggestions] = useState<RecommendationItem[]>([]);
   const [domainId, setDomainId] = useState<string>("");
 
   // Handle click to show stored recommendations
@@ -57,7 +57,7 @@ export function StoredRecommendationsButton({
   // Transform mapping recommendations to expected format
   const transformMappingRecommendations = (
     recommendations: MappingRecommendation[]
-  ): UnisonConceptItem[] => {
+  ): RecommendationItem[] => {
     return recommendations.map((rec) => ({
       accuracy: rec.score ?? null,
       conceptId: rec.concept.concept_id,
@@ -68,7 +68,7 @@ export function StoredRecommendationsButton({
       conceptClass: rec.concept.concept_class_id ?? "Unknown",
       explanation: rec.score
         ? `Pre-computed recommendation from ${rec.tool_name} (score: ${rec.score})`
-        : `Pre-computed recommendation from ${rec.tool_name} (no score)`
+        : `Pre-computed recommendation from ${rec.tool_name} (no score)`,
     }));
   };
 

app/next-client-app/components/recommendations/stored-recommendations-dialog.tsx

@@ -9,7 +9,7 @@ import { InfoItem } from "../core/InfoItem";
 interface RecommendationsDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  suggestions: UnisonConceptItem[];
+  suggestions: RecommendationItem[];
   onApplySuggestion: (data: {
     concept: number;
     object_id: number;
@@ -36,7 +36,7 @@ export default function RecommendationsDialog({
   rowId,
   domainId,
   contentType,
-  source
+  source,
 }: RecommendationsDialogProps) {
   const getSourceLabel = () => {
     return source === "v3"

app/next-client-app/constants/index.ts

@@ -3,11 +3,11 @@ import { MAX_FILE_SIZE_BYTES } from "./config";
 
 export const apiUrl = process.env.BACKEND_URL;
 
-export const recommendationService = process.env.RECOMMENDATION_SERVICE;
+export const recommendationServiceBaseUrl =
+  process.env.RECOMMENDATION_SERVICE_BASE_URL;
 
-export const unisonBaseUrl = process.env.UNISON_BASE_URL;
-
-export const unisonApiKey = process.env.UNISON_API_KEY;
+export const recommendationServiceApiKey =
+  process.env.RECOMMENDATION_SERVICE_API_KEY;
 
 export const enableReuseTriggerOption = env(
   "NEXT_PUBLIC_ENABLE_REUSE_TRIGGER_OPTION"
@@ -22,7 +22,7 @@ export const enableStoredRecommendation = env(
 );
 
 export const recommendationServiceName = env(
-  "NEXT_PUBLIC_RECOMMENDATION_SERVICE_NAME"
+  "NEXT_PUBLIC_RECOMMENDATION_SERVICE"
 );
 
 // Re-export MAX_FILE_SIZE_BYTES from config.js

app/next-client-app/package-lock.json

@@ -1,4 +1,4 @@
-interface UnisonConceptItem {
+interface RecommendationItem {
   accuracy: number | null;
   conceptId: number;
   conceptName: string;
@@ -7,11 +7,21 @@ interface UnisonConceptItem {
   domain: string;
   conceptClass: string;
   explanation: string;
+  standardConcept?: string;
+  scores?: { "vector-search": number };
 }
 
-interface UnisonConceptResponse {
-  items: UnisonConceptItem[];
-  count: number;
+interface RecommendationMetadata {
+  assistant: string;
+  version: string;
+  pipeline: string;
+  info: string | null;
+}
+
+interface RecommendationServiceResponse {
+  items: RecommendationItem[];
+  count?: number;
+  metadata?: RecommendationMetadata;
 }
 
 interface MappingRecommendation {
@@ -23,4 +33,4 @@ interface MappingRecommendation {
   tool_name: string;
   tool_version: string;
   created_at: Date;
-}
+}