add search suggestion

yilinxia · yilinxia · commit b9f25826ecb9 · 2025-05-25T10:27:51.000-05:00
diff --git a/backend/app/main.py b/backend/app/main.py
@@ -183,6 +183,68 @@ def explain_topic():
         ), 500
 
 
+@app.route("/api/suggest-topics", methods=["GET"])
+def suggest_topics():
+    try:
+        query = request.args.get("query", "").lower().strip()
+        if not query:
+            return jsonify({
+                "success": True,
+                "suggestions": []
+            })
+
+        # Use a more sophisticated query that:
+        # 1. Matches topics containing the search term
+        # 2. Prioritizes exact matches and high-frequency topics
+        # 3. Uses word boundary matching for better relevance
+        sql_query = """
+            WITH ranked_topics AS (
+                SELECT 
+                    topic,
+                    COUNT(*) as count,
+                    CASE 
+                        WHEN LOWER(topic) = ? THEN 3  -- Exact match gets highest priority
+                        WHEN LOWER(topic) LIKE ? THEN 2  -- Starts with query gets second priority
+                        ELSE 1  -- Contains query gets lowest priority
+                    END as match_priority
+                FROM repo_topics
+                WHERE LOWER(topic) LIKE ?
+                GROUP BY topic
+            )
+            SELECT topic, count
+            FROM ranked_topics
+            ORDER BY match_priority DESC, count DESC
+            LIMIT 10
+        """
+        
+        # Prepare search patterns
+        exact_match = query
+        starts_with = f"{query}%"
+        contains = f"%{query}%"
+        
+        # Execute query with all patterns
+        result = topic_service.con.execute(sql_query, [
+            exact_match,  # For exact match priority
+            starts_with,  # For starts-with priority
+            contains     # For contains match
+        ]).fetchall()
+        
+        suggestions = [{"name": name.lower(), "count": count} for name, count in result]
+        
+        return jsonify({
+            "success": True,
+            "suggestions": suggestions
+        })
+
+    except Exception as e:
+        print(f"Error in suggest-topics: {str(e)}")  # Add logging
+        return jsonify({
+            "success": False,
+            "error": str(e),
+            "message": "An error occurred while getting suggestions"
+        }), 500
+
+
 @app.route("/")
 def home():
     return "Hello World!"
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -52,7 +52,7 @@
     "@types/classnames": "^2.3.4",
     "@types/file-saver": "^2.0.7",
     "@types/fs-extra": "^11.0.4",
-    "@types/lodash": "^4.17.13",
+    "@types/lodash": "^4.17.17",
     "@types/node": "^22.10.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
diff --git a/src/lib/config.ts b/src/lib/config.ts
@@ -6,4 +6,5 @@ export const API_ENDPOINTS = {
     PROCESS_TOPICS: `${API_BASE_URL}/api/process-topics`,
     AI_PROCESS: `${API_BASE_URL}/api/ai-process`,
     EXPLAIN_TOPIC: `${API_BASE_URL}/api/explain-topic`,
+    SUGGEST_TOPICS: `${API_BASE_URL}/api/suggest-topics`,
 } as const; 
diff --git a/src/views/HomeView.tsx b/src/views/HomeView.tsx
@@ -1,19 +1,28 @@
-import React, { FC, useEffect, useState } from "react";
+import React, { FC, useEffect, useState, useCallback } from "react";
 import { useLocation, useNavigate } from "react-router";
 import { FaArrowRight, FaSearch } from "react-icons/fa";
-
+import { API_ENDPOINTS } from "../lib/config";
+import { useNotifications } from "../lib/notifications";
 import Footer from "../components/Footer";
 import { getErrorMessage } from "../lib/errors";
-import { useNotifications } from "../lib/notifications";
+import debounce from 'lodash/debounce';
+
+interface TopicSuggestion {
+  name: string;
+  count: number;
+}
 
 const HomeView: FC = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const { notify } = useNotifications();
   const error = ((location.state as { error?: unknown } | undefined)?.error || "") + "";
 
-  // Add state for the search term
+  // Add state for the search term and suggestions
   const [searchTerm, setSearchTerm] = useState("");
+  const [suggestions, setSuggestions] = useState<TopicSuggestion[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [isLoadingSuggestions, setIsLoadingSuggestions] = useState(false);
 
   useEffect(() => {
     if (error)
@@ -23,21 +32,65 @@ const HomeView: FC = () => {
       });
   }, [error, notify]);
 
+  // Debounced function to fetch suggestions
+  const fetchSuggestions = useCallback(
+    debounce(async (query: string) => {
+      if (!query.trim()) {
+        setSuggestions([]);
+        return;
+      }
+
+      setIsLoadingSuggestions(true);
+      try {
+        const response = await fetch(`${API_ENDPOINTS.SUGGEST_TOPICS}?query=${encodeURIComponent(query)}`);
+        const data = await response.json();
+        if (data.success) {
+          setSuggestions(data.suggestions);
+        } else {
+          throw new Error(data.message || 'Failed to get suggestions');
+        }
+      } catch (error) {
+        console.error('Error fetching suggestions:', error);
+        setSuggestions([]);
+      } finally {
+        setIsLoadingSuggestions(false);
+      }
+    }, 300),
+    []
+  );
+
+  // Update suggestions when search term changes
+  useEffect(() => {
+    fetchSuggestions(searchTerm);
+  }, [searchTerm, fetchSuggestions]);
+
   // Function to handle search submission
   const handleSearch = (e?: React.FormEvent) => {
     if (e) e.preventDefault();
+    setShowSuggestions(false);
 
     if (searchTerm.trim()) {
-      // Navigate to frequency page with both search term and topic
       navigate('/topics', {
         state: {
           searchTerm: searchTerm.trim(),
-          userTopic: searchTerm.trim() // Add the user topic
+          userTopic: searchTerm.trim()
         }
       });
     }
   };
 
+  // Function to handle suggestion click
+  const handleSuggestionClick = (suggestion: TopicSuggestion) => {
+    setSearchTerm(suggestion.name);
+    setShowSuggestions(false);
+    navigate('/topics', {
+      state: {
+        searchTerm: suggestion.name,
+        userTopic: suggestion.name
+      }
+    });
+  };
+
   return (
     <main className="home-view d-flex flex-column justify-content-center" style={{ padding: "0 2rem", minHeight: "100vh", paddingTop: "10vh" }}>
       <div className="title-block text-center">
@@ -59,17 +112,18 @@ const HomeView: FC = () => {
           Discover and explore research software using large scale graphs
         </h2>
 
-        {/* Wrap the search bar in a form to handle Enter key submission */}
-        <form onSubmit={handleSearch} className="search-bar mb-4 d-flex justify-content-center">
+        {/* Search form with suggestions */}
+        <form onSubmit={handleSearch} className="search-bar mb-4 d-flex justify-content-center position-relative">
           <div
             className="input-group align-items-center"
             style={{
               border: "1px solid #ddd",
               borderRadius: "20px",
               overflow: "hidden",
-              width: "800px", // Fixed width
+              width: "800px",
               boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)",
-              backgroundColor: "#fff", // Unified background
+              backgroundColor: "#fff",
+              position: "relative",
             }}
           >
             <span
@@ -78,7 +132,7 @@ const HomeView: FC = () => {
                 padding: "0.75rem",
                 fontSize: "1rem",
                 color: "#6c757d",
-                backgroundColor: "transparent", // Transparent icon background
+                backgroundColor: "transparent",
               }}
             >
               <FaSearch />
@@ -91,10 +145,16 @@ const HomeView: FC = () => {
                 boxShadow: "none",
                 fontSize: "1rem",
                 padding: "0.75rem",
-                backgroundColor: "transparent", // Transparent input background
+                backgroundColor: "transparent",
               }}
               value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value.replace(/\s+/g, '-'))}
+              onChange={(e) => {
+                const value = e.target.value.replace(/\s+/g, '-');
+                setSearchTerm(value);
+                setShowSuggestions(true);
+              }}
+              onFocus={() => setShowSuggestions(true)}
+              onBlur={() => setTimeout(() => setShowSuggestions(false), 200)}
             />
             <button
               type="submit"
@@ -113,6 +173,87 @@ const HomeView: FC = () => {
               <FaArrowRight />
             </button>
           </div>
+
+          {/* Suggestions dropdown */}
+          {showSuggestions && (searchTerm.trim() || isLoadingSuggestions) && (
+            <div
+              className="position-absolute bg-white rounded-3 shadow-lg"
+              style={{
+                top: "calc(100% + 8px)",
+                left: "50%",
+                transform: "translateX(-50%)",
+                width: "700px",
+                maxHeight: "300px",
+                overflowY: "auto",
+                zIndex: 1000,
+                border: "1px solid rgba(0,0,0,0.08)",
+                backdropFilter: "blur(8px)",
+                backgroundColor: "rgba(255, 255, 255, 0.98)",
+              }}
+            >
+              {isLoadingSuggestions ? (
+                <div className="p-4 text-center">
+                  <div className="spinner-border spinner-border-sm text-primary me-2" role="status">
+                    <span className="visually-hidden">Loading...</span>
+                  </div>
+                  <span className="text-muted">Finding relevant topics...</span>
+                </div>
+              ) : suggestions.length > 0 ? (
+                <div className="list-group list-group-flush">
+                  {suggestions.map((suggestion, index) => (
+                    <button
+                      key={suggestion.name}
+                      className="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3 px-4"
+                      onClick={() => handleSuggestionClick(suggestion)}
+                      style={{
+                        border: "none",
+                        cursor: "pointer",
+                        transition: "all 0.2s ease",
+                        backgroundColor: "transparent",
+                        borderBottom: index !== suggestions.length - 1 ? "1px solid rgba(0,0,0,0.05)" : "none",
+                      }}
+                      onMouseEnter={(e) => {
+                        e.currentTarget.style.backgroundColor = "rgba(13, 110, 253, 0.05)";
+                      }}
+                      onMouseLeave={(e) => {
+                        e.currentTarget.style.backgroundColor = "transparent";
+                      }}
+                    >
+                      <div className="d-flex align-items-center">
+                        <span className="me-2" style={{ fontSize: "1.1rem" }}>{suggestion.name}</span>
+                        {index === 0 && suggestion.name.toLowerCase() === searchTerm.toLowerCase() && (
+                          <span className="badge bg-success rounded-pill" style={{ fontSize: "0.7rem" }}>
+                            Exact match
+                          </span>
+                        )}
+                      </div>
+                      <div className="d-flex align-items-center">
+                        <span
+                          className="badge rounded-pill px-3 py-2"
+                          style={{
+                            backgroundColor: "rgba(108, 117, 125, 0.1)",
+                            color: "#495057",
+                            fontSize: "0.9rem",
+                            fontWeight: "500"
+                          }}
+                        >
+                          {suggestion.count.toLocaleString()} repos
+                        </span>
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              ) : (
+                <div className="p-4 text-center">
+                  <div className="text-muted mb-2">
+                    <i className="fas fa-search me-2"></i>
+                    No matching topics found
+                  </div>
+                  <small className="text-muted">Try a different search term</small>
+                </div>
+              )}
+            </div>
+          )}
         </form>
 
         <div className="tags d-flex flex-wrap justify-content-center mb-4" style={{ maxWidth: "600px", margin: "0 auto" }}>
