add features stop and filter class

App.tsx

@@ -31,6 +31,8 @@ const App: React.FC = () => {
   const [selectedPatternId, setSelectedPatternId] = useState<number | null>(null);
   const [isAnalyzing, setIsAnalyzing] = useState(false);
 
+  const stopRef = React.useRef(false);
+
   // Metadata state for Backend
   const [selectedWG, setSelectedWG] = useState<string>("");
   const [selectedMeeting, setSelectedMeeting] = useState<string>("");
@@ -96,15 +98,33 @@ const App: React.FC = () => {
     setInnovations([]);
   }, []);
 
+  const handleStop = () => {
+    stopRef.current = true;
+  };
+
   // Logic: Backend Processing Engine (Phase 2 - SQLite)
   const handleExtractInnovations = async () => {
     if (files.length === 0) return;
     setIsProcessing(true);
-    setProcessedCount(0);
-    setInnovations([]);
+
+    let startIndex = 0;
+
+    // Resume logic: If we have processed some but not all
+    if (processedCount > 0 && processedCount < files.length) {
+      startIndex = processedCount;
+    } else {
+      // Start fresh
+      setInnovations([]);
+      setProcessedCount(0);
+      startIndex = 0;
+    }
+
+    stopRef.current = false;
 
     // Sequential Processing Logic
-    for (let i = 0; i < files.length; i++) {
+    for (let i = startIndex; i < files.length; i++) {
+      if (stopRef.current) break;
+
       const file = files[i];
       setCurrentProcessingFile(file.filename);
 
@@ -120,6 +140,7 @@ const App: React.FC = () => {
 
     setIsProcessing(false);
     setCurrentProcessingFile("");
+    stopRef.current = false;
   };
 
   const handleClassify = async (id: string, classification: Classification) => {
@@ -172,51 +193,62 @@ const App: React.FC = () => {
     }
 
     setIsAnalyzing(true);
+    stopRef.current = false;
 
     try {
-      const updatedInnovations = [...innovations];
+      // Use index to iterate
+      const total = innovations.length;
+
+      for (let i = 0; i < total; i++) {
+        if (stopRef.current) break;
 
-      for (let i = 0; i < updatedInnovations.length; i++) {
-        const inv = updatedInnovations[i];
-        let result: string | null = null;
-        let resultId: number | undefined;
+        // Always get fresh state in loop if needed, but here we can iterate by index
+        // However, updates need to be functional
+        // Let's just grab the item from current state reference if possible or just use the initial list
+        // Since we are not adding items during analysis, looking up by ID is safer for updates
+        // But iterating the initial list is fine.
+        const inv = innovations[i]; // accessing closed-over innovations is fine as we only read static data from it for the request
+
+        // Skip if already analyzed or classification is DELETE
+        if (inv.classification === Classification.DELETE) continue; // optimization
+
+        let analysisData: any = null;
 
         // If it's an uploaded file (id starts with uploaded-), pass text content
         if (inv.id.startsWith('uploaded-')) {
           const res = await backendService.analyzeContent(selectedPatternId, undefined, inv.answer);
-          if (res) {
-            updatedInnovations[i] = {
-              ...inv,
-              analysis_result: res.content,
-              result_id: res.result_id,
-              methodology: res.methodology,
-              context: res.context,
-              problem: res.problem,
-              pattern_name: res.pattern_name
-            };
-          }
+          if (res) analysisData = res;
         } else {
           // It's a processed doc, pass the ID
           const res = await backendService.analyzeContent(selectedPatternId, inv.id);
-          if (res) {
-            updatedInnovations[i] = {
-              ...inv,
-              analysis_result: res.content,
-              result_id: res.result_id,
-              methodology: res.methodology,
-              context: res.context,
-              problem: res.problem,
-              pattern_name: res.pattern_name
-            };
-          }
+          if (res) analysisData = res;
+        }
+
+        if (analysisData) {
+          // Real-time update
+          setInnovations(current =>
+            current.map(item =>
+              item.id === inv.id
+                ? {
+                  ...item,
+                  analysis_result: analysisData.content,
+                  result_id: analysisData.result_id,
+                  methodology: analysisData.methodology,
+                  context: analysisData.context,
+                  problem: analysisData.problem,
+                  pattern_name: analysisData.pattern_name
+                }
+                : item
+            )
+          );
         }
       }
 
-      setInnovations(updatedInnovations);
     } catch (error) {
       console.error("Error during analysis:", error);
     } finally {
       setIsAnalyzing(false);
+      stopRef.current = false;
     }
   };
 
@@ -302,18 +334,23 @@ const App: React.FC = () => {
                   </div>
                 )}
 
-                <div className="mt-4">
-                  <button
-                    onClick={handleExtractInnovations}
-                    disabled={files.length === 0 || isProcessing}
-                    className="w-full bg-slate-900 hover:bg-slate-800 text-white font-medium py-3 rounded-lg shadow-md transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
-                  >
-                    {isProcessing ? (
-                      <><CircleDashed className="w-4 h-4 mr-2 animate-spin" /> Processing...</>
-                    ) : (
-                      <><Play className="w-4 h-4 mr-2 fill-current" /> Start Extraction</>
-                    )}
-                  </button>
+                <div className="mt-4 flex space-x-2">
+                  {!isProcessing && !isAnalyzing ? (
+                    <button
+                      onClick={handleExtractInnovations}
+                      disabled={files.length === 0}
+                      className="w-full bg-slate-900 hover:bg-slate-800 text-white font-medium py-3 rounded-lg shadow-md transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
+                    >
+                      <Play className="w-4 h-4 mr-2 fill-current" /> Start Extraction
+                    </button>
+                  ) : (
+                    <button
+                      onClick={handleStop}
+                      className="w-full bg-red-600 hover:bg-red-700 text-white font-medium py-3 rounded-lg shadow-md transition-all flex items-center justify-center animate-pulse"
+                    >
+                      <CircleDashed className="w-4 h-4 mr-2 animate-spin" /> Stop {isProcessing ? "Extraction" : "Analysis"}
+                    </button>
+                  )}
                 </div>
               </div>
 
@@ -346,17 +383,26 @@ const App: React.FC = () => {
                     {/* Upload status is now handled in the main list */}
                   </div>
 
-                  <button
-                    onClick={handleAnalyze}
-                    disabled={isAnalyzing || innovations.length === 0}
-                    className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 rounded-lg shadow-sm transition-all disabled:opacity-50 flex items-center justify-center text-sm"
-                  >
-                    {isAnalyzing ? (
-                      <><CircleDashed className="w-4 h-4 mr-2 animate-spin" /> Analyzing...</>
-                    ) : (
-                      <><Play className="w-4 h-4 mr-2 fill-current" /> Analyse</>
-                    )}
-                  </button>
+                  {!isAnalyzing && !isProcessing ? (
+                    <button
+                      onClick={handleAnalyze}
+                      disabled={innovations.length === 0}
+                      className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 rounded-lg shadow-sm transition-all disabled:opacity-50 flex items-center justify-center text-sm"
+                    >
+                      <Play className="w-4 h-4 mr-2 fill-current" /> Analyse
+                    </button>
+                  ) : isAnalyzing ? (
+                    <button
+                      onClick={handleStop}
+                      className="w-full bg-red-600 hover:bg-red-700 text-white font-medium py-2 rounded-lg shadow-sm transition-all flex items-center justify-center text-sm animate-pulse"
+                    >
+                      <CircleDashed className="w-4 h-4 mr-2 animate-spin" /> Stop Analysis
+                    </button>
+                  ) : (
+                    <button disabled className="w-full bg-slate-300 text-white font-medium py-2 rounded-lg shadow-sm cursor-not-allowed flex items-center justify-center text-sm">
+                      Processing...
+                    </button>
+                  )}
                 </div>
               </div>
             </div>

backend/main.py

@@ -26,7 +26,15 @@ logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
 
 app = FastAPI(title="3GPP Innovation Backend")
-
+from fastapi.middleware.cors import CORSMiddleware
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # React dev server
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
 # Initialize DataService
 data_service = DataService()
 

components/StatsDashboard.tsx

@@ -15,6 +15,14 @@ const StatsDashboard: React.FC<StatsDashboardProps> = ({ isVisible }) => {
   const [dbInnovations, setDbInnovations] = useState<ResultResponse[]>([]);
   const [loading, setLoading] = useState(false);
 
+  // Filter Toggle State
+  const [activeFilters, setActiveFilters] = useState<Classification[]>([
+    Classification.HIGH,
+    Classification.MEDIUM,
+    Classification.LOW,
+    Classification.UNCLASSIFIED
+  ]);
+
   // Fetch from DB for the "True" state
   const fetchDbInnovations = async () => {
     setLoading(true);
@@ -52,9 +60,15 @@ const StatsDashboard: React.FC<StatsDashboardProps> = ({ isVisible }) => {
     }
   };
 
+  const toggleFilter = (cls: Classification) => {
+    setActiveFilters(prev =>
+      prev.includes(cls) ? prev.filter(c => c !== cls) : [...prev, cls]
+    );
+  };
+
   // Filter for Display (High, Medium, Low, Unclassified)
   const displayInnovations = dbInnovations.filter(i =>
-    [Classification.HIGH, Classification.MEDIUM, Classification.LOW, Classification.UNCLASSIFIED].includes(i.classification as Classification)
+    activeFilters.includes(i.classification as Classification)
   );
 
   // Stats Logic - Use DB data for charts to be consistent with the list below
@@ -122,12 +136,32 @@ const StatsDashboard: React.FC<StatsDashboardProps> = ({ isVisible }) => {
 
       {/* Classified List Section */}
       <div className="bg-white p-6 rounded-lg shadow-sm border border-slate-200">
-        <div className="flex items-center justify-between mb-6">
+        <div className="flex flex-col md:flex-row items-center justify-between mb-6 gap-4">
           <h3 className="text-lg font-semibold text-slate-800">Classified Innovations</h3>
-          <button onClick={fetchDbInnovations} className="text-sm text-slate-500 hover:text-blue-600 flex items-center">
-            {loading && <CircleDashed className="w-4 h-4 mr-1 animate-spin" />}
-            Refresh
-          </button>
+
+          <div className="flex items-center space-x-2 flex-wrap gap-y-2 justify-center">
+            {[Classification.HIGH, Classification.MEDIUM, Classification.LOW, Classification.UNCLASSIFIED].map(cls => (
+              <button
+                key={cls}
+                onClick={() => toggleFilter(cls)}
+                className={`px-3 py-1.5 rounded text-xs font-medium border transition-colors flex items-center
+                        ${activeFilters.includes(cls)
+                    ? `bg-slate-800 text-white border-slate-800`
+                    : `bg-white text-slate-600 border-slate-300 hover:bg-slate-50`
+                  }`}
+              >
+                <span
+                  className="w-2 h-2 rounded-full mr-1.5"
+                  style={{ backgroundColor: COLOR_MAP[cls] }}
+                ></span>
+                {cls}
+              </button>
+            ))}
+            <button onClick={fetchDbInnovations} className="text-sm text-slate-500 hover:text-blue-600 flex items-center ml-4">
+              {loading && <CircleDashed className="w-4 h-4 mr-1 animate-spin" />}
+              Refresh
+            </button>
+          </div>
         </div>
 
         {displayInnovations.length === 0 ? (