fix ai explain

Author: yilinxia

backend/app/main.py

@@ -101,13 +101,19 @@ def extract_topic_name(s):
 def explain_topic():
     try:
         data = request.get_json()
+        print("Received explain-topic request with data:", {k: v for k, v in data.items() if k != 'apiKey'})  # Log data without API key
 
         topic = data.get("topic", "")
         search_term = data.get("searchTerm", "")
         original_topic = data.get("originalTopic", "")
         api_key = data.get("apiKey", "")
 
         if not topic or not search_term or not original_topic:
+            print("Missing required parameters:", {
+                "topic": bool(topic),
+                "search_term": bool(search_term),
+                "original_topic": bool(original_topic)
+            })
             return jsonify(
                 {
                     "success": False,
@@ -116,6 +122,7 @@ def explain_topic():
             ), 400
 
         if not api_key:
+            print("Missing API key")
             return jsonify(
                 {
                     "success": False,
@@ -127,34 +134,46 @@ def explain_topic():
         prompt = f"""Explain '{topic}' in the context of '{search_term}'. 
                     If it's an abbreviation, what it stands for in '{search_term}'
                     Keep it concise but informative (1-2 sentences)."""
+        print("Generated prompt:", prompt)
 
         try:
             # Create an event loop and run the async function
             loop = asyncio.new_event_loop()
             asyncio.set_event_loop(loop)
 
+            print("Initializing AI processor with Gemini model")
             # Use Gemini for explanations
             explanation = loop.run_until_complete(
                 ai_processor.process_topics(
                     model="gemini-1.5-flash",
                     api_key=api_key,  # Use the API key from the request
                     prompt=prompt,
                     topics=[topic],
+                    search_term=search_term  # Add the missing search_term parameter
                 )
             )
             loop.close()
 
+            print("Received explanation:", explanation)
             if explanation and len(explanation) > 0:
                 return jsonify({"success": True, "explanation": explanation[0]})
             else:
+                print("No explanation generated")
                 return jsonify(
                     {"success": False, "message": "Failed to generate explanation"}
                 ), 500
 
         except Exception as ai_error:
-            raise ai_error
+            print("AI processing error:", str(ai_error))
+            # Return a more detailed error response
+            return jsonify({
+                "success": False,
+                "error": str(ai_error),
+                "message": "Error during AI processing"
+            }), 500
 
     except Exception as e:
+        print("Top-level error in explain-topic:", str(e))
         return jsonify(
             {
                 "success": False,

src/components/MultiRangeSlider.tsx

@@ -5,20 +5,31 @@ interface MultiRangeSliderProps {
     min: number;
     max: number;
     onChange: (values: { min: number; max: number }) => void;
-    value: { min: number; max: number };
+    value?: { min: number; max: number };
 }
 
 export const MultiRangeSlider: React.FC<MultiRangeSliderProps> = ({
     min,
     max,
     onChange,
-    value
+    value = { min: 0, max: 1 }
 }) => {
     const [minVal, setMinVal] = useState(value.min);
     const [maxVal, setMaxVal] = useState(value.max);
     const minValRef = useRef(value.min);
     const maxValRef = useRef(value.max);
     const range = useRef<HTMLDivElement>(null);
+    const isUpdatingRef = useRef(false);
+
+    // Update internal state when value prop changes
+    useEffect(() => {
+        if (!isUpdatingRef.current) {
+            setMinVal(value.min);
+            setMaxVal(value.max);
+            minValRef.current = value.min;
+            maxValRef.current = value.max;
+        }
+    }, [value.min, value.max]);
 
     // Convert to percentage
     const getPercent = useCallback(
@@ -49,21 +60,34 @@ export const MultiRangeSlider: React.FC<MultiRangeSliderProps> = ({
 
     // Get min and max values when their state changes
     useEffect(() => {
-        onChange({ min: minVal, max: maxVal });
+        if (isUpdatingRef.current) {
+            isUpdatingRef.current = false;
+            onChange({ min: minVal, max: maxVal });
+        }
     }, [minVal, maxVal, onChange]);
 
+    const handleMinChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value = Math.min(Number(event.target.value), maxVal - 1);
+        isUpdatingRef.current = true;
+        setMinVal(value);
+        minValRef.current = value;
+    };
+
+    const handleMaxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value = Math.max(Number(event.target.value), minVal + 1);
+        isUpdatingRef.current = true;
+        setMaxVal(value);
+        maxValRef.current = value;
+    };
+
     return (
         <div className="slider-container">
             <input
                 type="range"
                 min={min}
                 max={max}
                 value={minVal}
-                onChange={(event) => {
-                    const value = Math.min(Number(event.target.value), maxVal - 1);
-                    setMinVal(value);
-                    minValRef.current = value;
-                }}
+                onChange={handleMinChange}
                 className="thumb thumb--left"
                 style={{ zIndex: minVal > max - 100 ? "5" : undefined }}
             />
@@ -72,11 +96,7 @@ export const MultiRangeSlider: React.FC<MultiRangeSliderProps> = ({
                 min={min}
                 max={max}
                 value={maxVal}
-                onChange={(event) => {
-                    const value = Math.max(Number(event.target.value), minVal + 1);
-                    setMaxVal(value);
-                    maxValRef.current = value;
-                }}
+                onChange={handleMaxChange}
                 className="thumb thumb--right"
             />
 

src/views/TopicHistogram.tsx

@@ -175,14 +175,16 @@ const TopicHistogram: FC = () => {
     const [selectedTopics, setSelectedTopics] = useState<string[]>([]);
 
     // State for frequency range
-    const [frequencyRange, setFrequencyRange] = useState({ min: 0, max: 100 });
+    const [frequencyRange, setFrequencyRange] = useState({ min: 0, max: 1 });
     const [hasAdjustedRange, setHasAdjustedRange] = useState(false);
     const maxCount = Math.max(...extractedTopics.map(item => item.count || 0), 1);
 
-    // Update frequency range when maxCount changes
+    // Update frequency range when maxCount changes, but only if it hasn't been adjusted yet
     useEffect(() => {
-        setFrequencyRange({ min: 0, max: maxCount });
-    }, [maxCount]);
+        if (!hasAdjustedRange) {
+            setFrequencyRange({ min: 0, max: 1 });  // Keep it at 0-1 until user adjusts
+        }
+    }, [maxCount, hasAdjustedRange]);
 
     // State for final topics
     const [finalTopics, setFinalTopics] = useState<string[]>([]);
@@ -208,12 +210,17 @@ const TopicHistogram: FC = () => {
 
     // Function to handle topic click
     const handleTopicClick = (topic: string) => {
+        console.log('Topic clicked:', topic);
+        console.log('Current API key:', apiKey ? 'Present' : 'Missing');
+
         if (!apiKey) {
+            console.log('No API key, showing modal');
             // Show API key modal if no key is set
             setShowApiKeyModal(true);
             return;
         }
 
+        console.log('Starting explanation fetch for topic:', topic);
         // Show explanation modal immediately with loading state
         setSelectedTopicForExplanation(topic);
         setTopicExplanation("");  // Clear previous explanation
@@ -334,7 +341,9 @@ const TopicHistogram: FC = () => {
 
     // Function to fetch topic explanation
     const fetchTopicExplanation = async (topic: string) => {
+        console.log('Fetching explanation for topic:', topic);
         if (!apiKey) {
+            console.log('No API key in fetchTopicExplanation');
             notify({
                 message: "Please set your Google API key first",
                 type: "warning"
@@ -344,6 +353,7 @@ const TopicHistogram: FC = () => {
         }
 
         try {
+            console.log('Making API request to:', API_ENDPOINTS.EXPLAIN_TOPIC);
             const response = await fetch(API_ENDPOINTS.EXPLAIN_TOPIC, {
                 method: 'POST',
                 headers: {
@@ -357,11 +367,13 @@ const TopicHistogram: FC = () => {
                 })
             });
 
+            console.log('Response status:', response.status);
             if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
 
             const data = await response.json();
+            console.log('Response data:', data);
             if (data.success) {
                 setTopicExplanation(data.explanation);
             } else {