import React, { useEffect, useState } from "react"; import { apiClient, ModelInfo } from "../apiClient"; import "../static/style.css"; // Ensure the main CSS file is imported interface SidebarProps { selectedModel: string; setSelectedModel: (model: string) => void; modality: "raman" | "ftir"; setModality: (modality: "raman" | "ftir") => void; } const Sidebar: React.FC = ({ selectedModel, setSelectedModel, modality, setModality, }) => { const [models, setModels] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [aboutExpanded, setAboutExpanded] = useState(false); const [helpExpanded, setHelpExpanded] = useState(false); // --- Effect 1: Fetch models only once on component mount --- useEffect(() => { const fetchModels = async () => { try { setLoading(true); setError(null); const modelList = await apiClient.getModels(); setModels(modelList); } catch (err) { console.error("Failed to fetch models:", err); setError("Failed to load models."); } finally { setLoading(false); } }; fetchModels(); }, []); // Empty dependency array means this runs only ONCE. // --- Effect 2: Set a default model after models have loaded --- useEffect(() => { // Don't do anything until models are loaded if (models.length === 0) return; const availableModels = models.filter((m) => m.available); const currentModelIsAvailable = availableModels.some( (m) => m.name === selectedModel ); // If there are available models but the currently selected one isn't in that list, // then update the selection to the first available model. if (availableModels.length > 0 && !currentModelIsAvailable) { setSelectedModel(availableModels[0].name); } }, [models, selectedModel, setSelectedModel]); // This effect correctly depends on these values. const selectedModelInfo = models.find((m) => m.name === selectedModel); return ( <> ); }; export default Sidebar;