feat: harmonize node documentation with node selector

bchapuis · bchapuis · commit 9cfa191613c1 · 2025-10-21T16:06:27.000+02:00
diff --git a/apps/web/src/components/docs/node-card.tsx b/apps/web/src/components/docs/node-card.tsx
@@ -12,9 +12,16 @@ import { NodeDocsDialog } from "./node-docs-dialog";
 interface NodeCardProps {
   nodeType: NodeType;
   variant?: "card" | "list";
+  searchQuery?: string;
+  highlightMatch?: (text: string, searchTerm: string) => React.ReactNode;
 }
 
-export function NodeCard({ nodeType, variant = "card" }: NodeCardProps) {
+export function NodeCard({
+  nodeType,
+  variant = "card",
+  searchQuery = "",
+  highlightMatch,
+}: NodeCardProps) {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
 
   if (variant === "list") {
@@ -33,7 +40,7 @@ export function NodeCard({ nodeType, variant = "card" }: NodeCardProps) {
                   className="h-4 w-4 text-blue-500 shrink-0"
                 />
                 <CardTitle className="text-base font-semibold leading-tight truncate">
-                  {nodeType.name}
+                  {highlightMatch ? highlightMatch(nodeType.name, searchQuery) : nodeType.name}
                 </CardTitle>
                 {nodeType.tags.map((tag, index) => (
                   <Badge
@@ -50,7 +57,7 @@ export function NodeCard({ nodeType, variant = "card" }: NodeCardProps) {
               {nodeType.description && (
                 <div className="hidden md:block flex-1 min-w-0">
                   <p className="text-sm text-muted-foreground leading-relaxed truncate">
-                    {nodeType.description}
+                    {highlightMatch ? highlightMatch(nodeType.description, searchQuery) : nodeType.description}
                   </p>
                 </div>
               )}
@@ -93,7 +100,7 @@ export function NodeCard({ nodeType, variant = "card" }: NodeCardProps) {
                 className="h-4 w-4 text-blue-500 shrink-0"
               />
               <CardTitle className="text-base font-semibold leading-tight truncate">
-                {nodeType.name}
+                {highlightMatch ? highlightMatch(nodeType.name, searchQuery) : nodeType.name}
               </CardTitle>
             </div>
             <NodeTags
@@ -105,7 +112,7 @@ export function NodeCard({ nodeType, variant = "card" }: NodeCardProps) {
         <CardContent className="pt-0">
           {nodeType.description && (
             <p className="text-sm text-muted-foreground leading-relaxed max-h-16 overflow-hidden">
-              {nodeType.description}
+              {highlightMatch ? highlightMatch(nodeType.description, searchQuery) : nodeType.description}
             </p>
           )}
           {nodeType.compatibility && nodeType.compatibility.length > 0 && (
diff --git a/apps/web/src/components/docs/nodes-browser.tsx b/apps/web/src/components/docs/nodes-browser.tsx
@@ -7,51 +7,201 @@ import { Button } from "@/components/ui/button";
 import { SearchInput } from "@/components/ui/search-input";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { TagFilterButtons } from "@/components/ui/tag-filter-buttons";
-import { useSearch } from "@/hooks/use-search";
 import { useTagCounts } from "@/hooks/use-tag-counts";
 import { useNodeTypes } from "@/services/type-service";
+import { normalizeText } from "@/utils/text-normalization";
 
 import { NodeCard } from "./node-card";
 
 type ViewMode = "card" | "list";
 
+// Helper function to highlight matching text
+function highlightMatch(text: string, searchTerm: string) {
+  if (!searchTerm.trim()) return text;
+
+  // Split search term into individual words and escape special regex characters
+  const words = searchTerm
+    .trim()
+    .split(/\s+/)
+    .map((word) => word.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"))
+    .filter((word) => word.length > 0);
+
+  if (words.length === 0) return text;
+
+  // Create a regex that matches any of the words
+  const regex = new RegExp(`(${words.join("|")})`, "gi");
+  const parts = text.split(regex);
+
+  return parts.map((part, index) => {
+    // Check if this part matches any of the search words
+    if (words.some((word) => new RegExp(`^${word}$`, "i").test(part))) {
+      return (
+        <mark
+          key={index}
+          className="bg-yellow-200 dark:bg-yellow-900 font-semibold"
+        >
+          {part}
+        </mark>
+      );
+    }
+    return part;
+  });
+}
+
 export function NodesBrowser() {
   const { nodeTypes, isNodeTypesLoading, nodeTypesError } = useNodeTypes();
   const [searchQuery, setSearchQuery] = useState("");
-  const [selectedTag, setSelectedTag] = useState<string | null>(null);
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
   const [viewMode, setViewMode] = useState<ViewMode>("card");
 
-  // Use the search hook with intelligent search
-  const searchResults = useSearch({
-    items: nodeTypes,
-    searchQuery,
-    searchFields: (nodeType) => [
-      nodeType.name,
-      nodeType.description || "",
-      ...nodeType.tags,
-      nodeType.type,
-    ],
-  });
+  // Combined scoring using substring matching (not fuzzy)
+  const scoredAndFilteredNodes = useMemo(() => {
+    // Normalize search query (for scoring only - no filtering)
+    const searchKeywords = normalizeText(searchQuery, {
+      removeStopWords: true,
+      useLemmatization: true,
+      minTokenLength: 2,
+    });
+
+    // Also keep original search term for partial matching
+    const rawSearchTerm = searchQuery.toLowerCase().trim();
+
+    // Helper function for partial word matching
+    const containsPartialMatch = (
+      text: string,
+      searchTerm: string
+    ): boolean => {
+      if (!searchTerm) return false;
+      return text.toLowerCase().includes(searchTerm);
+    };
+
+    // Score each node type
+    const scored = nodeTypes
+      .map((nodeType) => {
+        let score = 0;
+
+        // Normalize node type fields
+        const nameTokens = new Set(
+          normalizeText(nodeType.name, {
+            removeStopWords: false, // Keep all words in name
+            useLemmatization: true,
+            minTokenLength: 2,
+          })
+        );
+        const descTokens = new Set(
+          normalizeText(nodeType.description || "", {
+            removeStopWords: true,
+            useLemmatization: true,
+            minTokenLength: 2,
+          })
+        );
+        const tagTokens = new Set(
+          nodeType.tags.flatMap((tag) =>
+            normalizeText(tag, {
+              removeStopWords: false,
+              useLemmatization: true,
+              minTokenLength: 2,
+            })
+          )
+        );
 
-  // Get tag counts (using all tags, not just the first one)
-  const tagCounts = useTagCounts(nodeTypes);
+        // Score based on search keywords (if present) - exact token match
+        searchKeywords.forEach((keyword) => {
+          if (nameTokens.has(keyword)) score += 20;
+          if (descTokens.has(keyword)) score += 10;
+          if (tagTokens.has(keyword)) score += 15;
+        });
 
-  // Filter nodes based on search results and selected tag
+        // Bonus scoring for partial matches in search term (substring matching)
+        if (rawSearchTerm) {
+          if (containsPartialMatch(nodeType.name, rawSearchTerm)) score += 15;
+          if (containsPartialMatch(nodeType.description || "", rawSearchTerm))
+            score += 8;
+          nodeType.tags.forEach((tag) => {
+            if (containsPartialMatch(tag, rawSearchTerm)) score += 12;
+          });
+        }
+
+        // Check if matches search filter (partial or exact match)
+        const matchesSearch =
+          !rawSearchTerm ||
+          containsPartialMatch(nodeType.name, rawSearchTerm) ||
+          containsPartialMatch(nodeType.description || "", rawSearchTerm) ||
+          nodeType.tags.some((tag) =>
+            containsPartialMatch(tag, rawSearchTerm)
+          ) ||
+          searchKeywords.some(
+            (keyword) =>
+              nameTokens.has(keyword) ||
+              descTokens.has(keyword) ||
+              tagTokens.has(keyword)
+          );
+
+        return { nodeType, score, matchesSearch };
+      })
+      .filter((s) => s.matchesSearch) // Filter by search query
+      .sort((a, b) => {
+        // Sort by score (highest first), then alphabetically
+        if (b.score !== a.score) return b.score - a.score;
+        return a.nodeType.name.localeCompare(b.nodeType.name);
+      });
+
+    return {
+      sorted: scored.map((s) => s.nodeType),
+      scores: scored,
+    };
+  }, [nodeTypes, searchQuery]);
+
+  // Filter nodes based on selected tags (all must match)
   const filteredNodes = useMemo(() => {
-    let filtered = searchResults;
+    return scoredAndFilteredNodes.sorted.filter((nodeType) => {
+      // If no tags selected, show all
+      if (selectedTags.length === 0) return true;
 
-    // Filter by tag (check if any tag matches)
-    if (selectedTag) {
-      filtered = filtered.filter((nodeType) => {
+      // Check if all selected tags match
+      return selectedTags.every((selectedTag) => {
         if (selectedTag === "Tools") {
           return !!nodeType.functionCalling;
         }
         return nodeType.tags.includes(selectedTag);
       });
-    }
+    });
+  }, [scoredAndFilteredNodes.sorted, selectedTags]);
 
-    return filtered.sort((a, b) => a.name.localeCompare(b.name));
-  }, [searchResults, selectedTag]);
+  // Get overall tag counts (for display)
+  const overallTagCounts = useTagCounts(scoredAndFilteredNodes.sorted);
+
+  // Get filtered tag counts (for discrimination/ordering)
+  const filteredTagCounts = useTagCounts(filteredNodes);
+
+  // Combine: use filtered counts for ordering, but display overall counts
+  // Show top 20 tags by filtered count
+  const tagCounts = filteredTagCounts.slice(0, 20).map(({ tag }) => {
+    const overallCount =
+      overallTagCounts.find((tc) => tc.tag === tag)?.count ?? 0;
+    return { tag, count: overallCount };
+  });
+
+  // Get overall counts for selected tags (sorted by count desc, then alphabetically)
+  const selectedTagCounts = overallTagCounts
+    .filter((tc) => selectedTags.includes(tc.tag))
+    .sort((a, b) => {
+      if (b.count !== a.count) return b.count - a.count;
+      return a.tag.localeCompare(b.tag);
+    });
+
+  // Handle tag change
+  const handleTagChange = (tag: string | null) => {
+    if (tag === null) {
+      setSelectedTags([]);
+    } else if (selectedTags.includes(tag)) {
+      // Remove tag if already selected
+      setSelectedTags(selectedTags.filter((t) => t !== tag));
+    } else {
+      // Add tag if not selected
+      setSelectedTags([...selectedTags, tag]);
+    }
+  };
 
   if (nodeTypesError) {
     return (
@@ -99,9 +249,10 @@ export function NodesBrowser() {
         {/* Tag Filter */}
         <TagFilterButtons
           categories={tagCounts}
-          selectedTag={selectedTag}
-          onTagChange={setSelectedTag}
-          totalCount={nodeTypes.length}
+          selectedTags={selectedTags}
+          selectedTagCounts={selectedTagCounts}
+          onTagChange={handleTagChange}
+          totalCount={scoredAndFilteredNodes.sorted.length}
         />
       </div>
 
@@ -135,7 +286,7 @@ export function NodesBrowser() {
                 className="mt-2"
                 onClick={() => {
                   setSearchQuery("");
-                  setSelectedTag(null);
+                  setSelectedTags([]);
                 }}
               >
                 Clear filters
@@ -157,6 +308,8 @@ export function NodesBrowser() {
                   key={nodeType.id}
                   nodeType={nodeType}
                   variant={viewMode}
+                  searchQuery={searchQuery}
+                  highlightMatch={highlightMatch}
                 />
               ))}
             </div>
