feat: add session grouping, improve chart sorting, and optimize crop loading

dashboard.py

@@ -141,49 +141,49 @@ def dashboard():
     if filter_type == 'collections':
         # Only show neetprep collections
         sessions_rows = conn.execute("""
-            SELECT s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type,
+            SELECT s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type, s.group_name,
                    0 as page_count,
                    COUNT(nb.id) as question_count
             FROM sessions s
             LEFT JOIN neetprep_bookmarks nb ON s.id = nb.session_id
             WHERE s.user_id = ? AND s.session_type = 'neetprep_collection'
-            GROUP BY s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type
+            GROUP BY s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type, s.group_name
             ORDER BY s.created_at DESC
         """, (current_user.id,)).fetchall()
     elif filter_type == 'standard':
         # Only show standard sessions (exclude collections and final_pdf)
         sessions_rows = conn.execute("""
-            SELECT s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type,
+            SELECT s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type, s.group_name,
                    COUNT(CASE WHEN i.image_type = 'original' THEN 1 END) as page_count,
                    COUNT(CASE WHEN i.image_type = 'cropped' THEN 1 END) as question_count
             FROM sessions s
             LEFT JOIN images i ON s.id = i.session_id
             WHERE s.user_id = ? AND (s.session_type IS NULL OR s.session_type NOT IN ('final_pdf', 'neetprep_collection'))
-            GROUP BY s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type
+            GROUP BY s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type, s.group_name
             ORDER BY s.created_at DESC
         """, (current_user.id,)).fetchall()
     else:
         # Show all (both standard and collections, but not final_pdf)
         # First get standard sessions
         standard_sessions = conn.execute("""
-            SELECT s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type,
+            SELECT s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type, s.group_name,
                    COUNT(CASE WHEN i.image_type = 'original' THEN 1 END) as page_count,
                    COUNT(CASE WHEN i.image_type = 'cropped' THEN 1 END) as question_count
             FROM sessions s
             LEFT JOIN images i ON s.id = i.session_id
             WHERE s.user_id = ? AND (s.session_type IS NULL OR s.session_type NOT IN ('final_pdf', 'neetprep_collection'))
-            GROUP BY s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type
+            GROUP BY s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type, s.group_name
         """, (current_user.id,)).fetchall()
 
         # Then get neetprep collections
         collection_sessions = conn.execute("""
-            SELECT s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type,
+            SELECT s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type, s.group_name,
                    0 as page_count,
                    COUNT(nb.id) as question_count
             FROM sessions s
             LEFT JOIN neetprep_bookmarks nb ON s.id = nb.session_id
             WHERE s.user_id = ? AND s.session_type = 'neetprep_collection'
-            GROUP BY s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type
+            GROUP BY s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type, s.group_name
         """, (current_user.id,)).fetchall()
 
         # Combine and sort by created_at
@@ -206,6 +206,37 @@ def dashboard():
 
     return render_template('dashboard.html', sessions=sessions, show_size=bool(show_size), filter_type=filter_type)
 
+@dashboard_bp.route('/sessions/update_group', methods=['POST'])
+@login_required
+def update_session_group():
+    data = request.json
+    session_id = data.get('session_id')
+    group_name = data.get('group_name')
+
+    if not session_id:
+        return jsonify({'error': 'Session ID is required'}), 400
+
+    # Sanitize group_name: empty string should be stored as NULL or empty
+    if group_name:
+        group_name = group_name.strip()
+    else:
+        group_name = None
+
+    try:
+        conn = get_db_connection()
+        # Security Check: Ensure the session belongs to the current user
+        session_owner = conn.execute('SELECT user_id FROM sessions WHERE id = ?', (session_id,)).fetchone()
+        if not session_owner or session_owner['user_id'] != current_user.id:
+            conn.close()
+            return jsonify({'error': 'Unauthorized'}), 403
+
+        conn.execute('UPDATE sessions SET group_name = ? WHERE id = ?', (group_name, session_id))
+        conn.commit()
+        conn.close()
+        return jsonify({'success': True})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
 @dashboard_bp.route('/sessions/batch_delete', methods=['POST'])
 @login_required
 def batch_delete_sessions():
@@ -258,6 +289,36 @@ def batch_delete_sessions():
         return jsonify({'error': str(e)}), 500
 
 
+@dashboard_bp.route('/sessions/batch_update_group', methods=['POST'])
+@login_required
+def batch_update_session_group():
+    data = request.json
+    session_ids = data.get('ids', [])
+    group_name = data.get('group_name')
+
+    if not session_ids:
+        return jsonify({'error': 'No session IDs provided'}), 400
+
+    if group_name:
+        group_name = group_name.strip()
+    else:
+        group_name = None
+
+    try:
+        conn = get_db_connection()
+        for session_id in session_ids:
+            # Security Check
+            session_owner = conn.execute('SELECT user_id FROM sessions WHERE id = ?', (session_id,)).fetchone()
+            if session_owner and session_owner['user_id'] == current_user.id:
+                conn.execute('UPDATE sessions SET group_name = ? WHERE id = ?', (group_name, session_id))
+        
+        conn.commit()
+        conn.close()
+        return jsonify({'success': True})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+
 @dashboard_bp.route('/sessions/reduce_space/<session_id>', methods=['POST'])
 @login_required
 def reduce_space(session_id):

database.py

@@ -29,7 +29,8 @@ def setup_database():
         persist INTEGER DEFAULT 0,
         name TEXT,
         user_id INTEGER,
-        session_type TEXT DEFAULT 'standard'
+        session_type TEXT DEFAULT 'standard',
+        group_name TEXT
     );
     """)
 
@@ -390,6 +391,11 @@ def setup_database():
     except sqlite3.OperationalError:
         cursor.execute("ALTER TABLE users ADD COLUMN two_page_crop INTEGER DEFAULT 0")
 
+    try:
+        cursor.execute("SELECT group_name FROM sessions LIMIT 1")
+    except sqlite3.OperationalError:
+        cursor.execute("ALTER TABLE sessions ADD COLUMN group_name TEXT")
+
     try:
         cursor.execute("SELECT pdf_viewer FROM users LIMIT 1")
     except sqlite3.OperationalError:

routes/general.py

@@ -1,5 +1,5 @@
 import os
-from flask import jsonify, render_template, redirect, url_for, current_app
+from flask import jsonify, render_template, redirect, url_for, current_app, request
 from .common import main_bp, get_db_connection, login_required, current_user, upload_progress
 from strings import ROUTE_INDEX, METHOD_DELETE, METHOD_POST
 
@@ -107,96 +107,33 @@ def chart():
 def stacked_chart():
     conn = get_db_connection()
     
-    # Get classified questions grouped by session_id, subject, and topic (chapter)
-    # Filter for only specific subjects (P, C, B, Z, M) as requested
-    # Also normalize subject names to ensure consistency
-    classified_data = conn.execute("""
-        SELECT s.id as session_id, s.name as session_name, 
-               CASE 
-                 WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
-                 WHEN q.subject = 'PHYSICS' THEN 'Physics'
-                 WHEN q.subject = 'BIOLOGY' THEN 'Biology'
-                 WHEN q.subject = 'MATHEMATICS' THEN 'Mathematics'
-                 WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
-                 WHEN q.subject = 'BOTANY' THEN 'Botany'
-                 ELSE q.subject
-               END as subject,
-               q.chapter, COUNT(*) as question_count
-        FROM questions q
-        JOIN sessions s ON q.session_id = s.id
-        WHERE s.user_id = ? 
-          AND q.subject IS NOT NULL 
-          AND q.chapter IS NOT NULL
-          AND UPPER(SUBSTR(TRIM(
-               CASE 
-                 WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
-                 WHEN q.subject = 'PHYSICS' THEN 'Physics'
-                 WHEN q.subject = 'BIOLOGY' THEN 'Biology'
-                 WHEN q.subject = 'MATHEMATICS' THEN 'Mathematics'
-                 WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
-                 WHEN q.subject = 'BOTANY' THEN 'Botany'
-                 ELSE q.subject
-               END
-          ), 1, 1)) IN ('P', 'C', 'B', 'Z', 'M')
-        GROUP BY s.id, s.name, 
-               CASE 
-                 WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
-                 WHEN q.subject = 'PHYSICS' THEN 'Physics'
-                 WHEN q.subject = 'BIOLOGY' THEN 'Biology'
-                 WHEN q.subject = 'MATHEMATICS' THEN 'Mathematics'
-                 WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
-                 WHEN q.subject = 'BOTANY' THEN 'Botany'
-                 ELSE q.subject
-               END,
-               q.chapter
-        ORDER BY s.created_at DESC, s.id, 
-               CASE 
-                 WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
-                 WHEN q.subject = 'PHYSICS' THEN 'Physics'
-                 WHEN q.subject = 'BIOLOGY' THEN 'Biology'
-                 WHEN q.subject = 'MATHEMATICS' THEN 'Mathematics'
-                 WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
-                 WHEN q.subject = 'BOTANY' THEN 'Botany'
-                 ELSE q.subject
-               END,
-               q.chapter
-    """, (current_user.id,)).fetchall()
-    
-    # Group the data by session_id for the chart
-    sessions_data = {}
-    for row in classified_data:
-        session_id = row['session_id']
-        session_name = row['session_name'] or session_id  # Use session_id if name is None
-        subject = row['subject']
-        topic = row['chapter']
-        count = row['question_count']
-        
-        if session_id not in sessions_data:
-            sessions_data[session_id] = {
-                'session_name': session_name,
-                'subjects': {}
-            }
-        
-        if subject not in sessions_data[session_id]['subjects']:
-            sessions_data[session_id]['subjects'][subject] = {}
-        
-        sessions_data[session_id]['subjects'][subject][topic] = count
+    # Get all unique group names for this user to populate the group selector
+    groups_rows = conn.execute("SELECT DISTINCT group_name FROM sessions WHERE user_id = ? AND group_name IS NOT NULL AND group_name != '' ORDER BY group_name", (current_user.id,)).fetchall()
+    groups = [row['group_name'] for row in groups_rows]
     
     conn.close()
-    
-    return render_template('stacked_chart.html', sessions_data=sessions_data)
+    return render_template('stacked_chart.html', groups=groups)
 
 
 @main_bp.route('/api/stacked_chart_data')
 @login_required
 def api_stacked_chart_data():
     conn = get_db_connection()
+    group_filter = request.args.get('group')
     
-    # Get classified questions grouped by session_id, subject, and topic (chapter)
-    # Filter for only specific subjects (P, C, B, Z, M) as requested
-    # Also normalize subject names to ensure consistency
-    classified_data = conn.execute("""
-        SELECT s.id as session_id, s.name as session_name, s.original_filename,
+    # Base WHERE clause components
+    where_clause = "WHERE s.user_id = ? AND q.subject IS NOT NULL AND q.chapter IS NOT NULL"
+    params = [current_user.id]
+    
+    if group_filter:
+        where_clause += " AND s.group_name = ?"
+        params.append(group_filter)
+    else:
+        # Default: show sessions with NO group
+        where_clause += " AND (s.group_name IS NULL OR s.group_name = '')"
+    
+    # Filter for only specific subjects (P, C, B, Z, M)
+    where_clause += """ AND UPPER(SUBSTR(TRIM(
                CASE 
                  WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
                  WHEN q.subject = 'PHYSICS' THEN 'Physics'
@@ -205,14 +142,12 @@ def api_stacked_chart_data():
                  WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
                  WHEN q.subject = 'BOTANY' THEN 'Botany'
                  ELSE q.subject
-               END as subject,
-               q.chapter, COUNT(*) as question_count
-        FROM questions q
-        JOIN sessions s ON q.session_id = s.id
-        WHERE s.user_id = ? 
-          AND q.subject IS NOT NULL 
-          AND q.chapter IS NOT NULL
-          AND UPPER(SUBSTR(TRIM(
+               END
+          ), 1, 1)) IN ('P', 'C', 'B', 'Z', 'M')"""
+
+    # Get classified questions grouped by session_id, subject, and topic (chapter)
+    classified_data = conn.execute(f"""
+        SELECT s.id as session_id, s.name as session_name, s.original_filename, s.created_at,
                CASE 
                  WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
                  WHEN q.subject = 'PHYSICS' THEN 'Physics'
@@ -221,9 +156,12 @@ def api_stacked_chart_data():
                  WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
                  WHEN q.subject = 'BOTANY' THEN 'Botany'
                  ELSE q.subject
-               END
-          ), 1, 1)) IN ('P', 'C', 'B', 'Z', 'M')
-        GROUP BY s.id, s.name, s.original_filename,
+               END as subject,
+               q.chapter, COUNT(*) as question_count
+        FROM questions q
+        JOIN sessions s ON q.session_id = s.id
+        {where_clause}
+        GROUP BY s.id, s.name, s.original_filename, s.created_at,
                CASE 
                  WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
                  WHEN q.subject = 'PHYSICS' THEN 'Physics'
@@ -245,10 +183,10 @@ def api_stacked_chart_data():
                  ELSE q.subject
                END,
                q.chapter
-    """, (current_user.id,)).fetchall()
+    """, params).fetchall()
     
-    # Get topic occurrence statistics - total occurrences and number of sessions for each topic
-    topic_stats = conn.execute("""
+    # Get topic occurrence statistics
+    topic_stats = conn.execute(f"""
         SELECT 
                CASE 
                  WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
@@ -264,20 +202,7 @@ def api_stacked_chart_data():
                COUNT(DISTINCT q.session_id) as total_sessions_with_topic
         FROM questions q
         JOIN sessions s ON q.session_id = s.id
-        WHERE s.user_id = ? 
-          AND q.subject IS NOT NULL 
-          AND q.chapter IS NOT NULL
-          AND UPPER(SUBSTR(TRIM(
-               CASE 
-                 WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
-                 WHEN q.subject = 'PHYSICS' THEN 'Physics'
-                 WHEN q.subject = 'BIOLOGY' THEN 'Biology'
-                 WHEN q.subject = 'MATHEMATICS' THEN 'Mathematics'
-                 WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
-                 WHEN q.subject = 'BOTANY' THEN 'Botany'
-                 ELSE q.subject
-               END
-          ), 1, 1)) IN ('P', 'C', 'B', 'Z', 'M')
+        {where_clause}
         GROUP BY 
                CASE 
                  WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
@@ -289,59 +214,14 @@ def api_stacked_chart_data():
                  ELSE q.subject
                END,
                q.chapter
-    """, (current_user.id,)).fetchall()
-    
-    # Get wrong ratios for topics - aggregated by topic across all sessions
-    wrong_ratios = conn.execute("""
-        SELECT 
-               CASE 
-                 WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
-                 WHEN q.subject = 'PHYSICS' THEN 'Physics'
-                 WHEN q.subject = 'BIOLOGY' THEN 'Biology'
-                 WHEN q.subject = 'MATHEMATICS' THEN 'Mathematics'
-                 WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
-                 WHEN q.subject = 'BOTANY' THEN 'Botany'
-                 ELSE q.subject
-               END as subject,
-               q.chapter,
-               SUM(CASE WHEN q.status = 'wrong' THEN 1 ELSE 0 END) as total_wrongs,
-               COUNT(DISTINCT q.session_id) as total_sessions_with_wrongs
-        FROM questions q
-        JOIN sessions s ON q.session_id = s.id
-        WHERE s.user_id = ? 
-          AND q.subject IS NOT NULL 
-          AND q.chapter IS NOT NULL
-          AND UPPER(SUBSTR(TRIM(
-               CASE 
-                 WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
-                 WHEN q.subject = 'PHYSICS' THEN 'Physics'
-                 WHEN q.subject = 'BIOLOGY' THEN 'Biology'
-                 WHEN q.subject = 'MATHEMATICS' THEN 'Mathematics'
-                 WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
-                 WHEN q.subject = 'BOTANY' THEN 'Botany'
-                 ELSE q.subject
-               END
-          ), 1, 1)) IN ('P', 'C', 'B', 'Z', 'M')
-        GROUP BY 
-               CASE 
-                 WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
-                 WHEN q.subject = 'PHYSICS' THEN 'Physics'
-                 WHEN q.subject = 'BIOLOGY' THEN 'Biology'
-                 WHEN q.subject = 'MATHEMATICS' THEN 'Mathematics'
-                 WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
-                 WHEN q.subject = 'BOTANY' THEN 'Botany'
-                 ELSE q.subject
-               END,
-               q.chapter
-    """, (current_user.id,)).fetchall()
+    """, params).fetchall()
     
     # Group the data by session_id for the chart
     sessions_data = {}
     for row in classified_data:
         session_id = row['session_id']
-        session_name = row['session_name'] or session_id  # Use session_id if name is None
+        session_name = row['session_name'] or session_id
         
-        # Use original_filename if session_name is the same as session_id
         if session_name == session_id and row['original_filename']:
             session_name = row['original_filename']
         
@@ -352,6 +232,7 @@ def api_stacked_chart_data():
         if session_id not in sessions_data:
             sessions_data[session_id] = {
                 'session_name': session_name,
+                'created_at': row['created_at'],
                 'subjects': {}
             }
         
@@ -360,40 +241,25 @@ def api_stacked_chart_data():
         
         sessions_data[session_id]['subjects'][subject][topic] = count
     
-    # Create mapping for topic stats (total occurrences and number of sessions with topic)
+    # Create mapping for topic stats
     topic_stats_map = {}
     for row in topic_stats:
         subject = row['subject']
         topic = row['chapter']
-        total_occurrences = row['total_occurrences']
-        total_sessions_with_topic = row['total_sessions_with_topic']
-        
         topic_stats_map[f"{subject}|{topic}"] = {
-            'total_occurrences': total_occurrences,
-            'total_sessions_with_topic': total_sessions_with_topic
+            'total_occurrences': row['total_occurrences'],
+            'total_sessions_with_topic': row['total_sessions_with_topic']
         }
     
-    # Add topic occurrence ratios to the data for each session
+    # Add topic statistics to sessions_data
     for session_id in sessions_data:
+        sessions_data[session_id]['wrong_ratios'] = {}
         for subject in sessions_data[session_id]['subjects']:
+            sessions_data[session_id]['wrong_ratios'][subject] = {}
             for topic in sessions_data[session_id]['subjects'][subject]:
-                # Store topic occurrence ratio data
-                if 'wrong_ratios' not in sessions_data[session_id]:
-                    sessions_data[session_id]['wrong_ratios'] = {}
-                if subject not in sessions_data[session_id]['wrong_ratios']:
-                    sessions_data[session_id]['wrong_ratios'][subject] = {}
-                
                 key = f"{subject}|{topic}"
-                
-                # Get topic stats (total occurrences and number of sessions with topic)
                 topic_stat = topic_stats_map.get(key, {'total_occurrences': 0, 'total_sessions_with_topic': 0})
-                
-                # Store topic occurrence ratio: total occurrences / number of sessions with topic
-                sessions_data[session_id]['wrong_ratios'][subject][topic] = {
-                    'total_occurrences': topic_stat['total_occurrences'],
-                    'total_sessions_with_topic': topic_stat['total_sessions_with_topic']
-                }
+                sessions_data[session_id]['wrong_ratios'][subject][topic] = topic_stat
     
     conn.close()
-    
     return jsonify(sessions_data)

templates/cropv2.html

@@ -671,6 +671,7 @@
             infoEl: document.getElementById('progress-info'),
             textEl: document.querySelector('#progress-info .progress-text'),
             bytesEl: document.getElementById('progress-bytes'),
+            activeRequests: new Map(), // url -> {loaded, total}
 
             formatBytes(bytes) {
                 if (bytes === 0) return '0 B';
@@ -681,18 +682,41 @@
             },
 
             show(progress = 0) {
-                this.el.style.transform = `scaleX(${progress})`;
+                if (progress > 0) this.el.style.transform = `scaleX(${progress})`;
                 this.el.classList.add('active');
                 this.infoEl.classList.add('show');
             },
 
-            update(progress, loadedBytes = 0, totalBytes = 0) {
-                const p = Math.min(1, Math.max(0, progress));
-                this.el.style.transform = `scaleX(${p})`;
-                this.textEl.textContent = Math.round(p * 100) + '%';
+            update(url, loaded, total) {
+                this.activeRequests.set(url, { loaded, total });
+                this.calculateTotal();
+            },
+
+            calculateTotal() {
+                let totalLoaded = 0;
+                let totalSize = 0;
+                let count = 0;
+
+                this.activeRequests.forEach(req => {
+                    totalLoaded += req.loaded;
+                    totalSize += req.total;
+                    count++;
+                });
+
+                if (totalSize > 0) {
+                    const p = totalLoaded / totalSize;
+                    this.el.style.transform = `scaleX(${p})`;
+                    this.textEl.textContent = Math.round(p * 100) + '%';
+                    this.bytesEl.textContent = `${this.formatBytes(totalLoaded)} / ${this.formatBytes(totalSize)}`;
+                }
+            },
 
-                if (totalBytes > 0) {
-                    this.bytesEl.textContent = `${this.formatBytes(loadedBytes)} / ${this.formatBytes(totalBytes)}`;
+            removeRequest(url) {
+                this.activeRequests.delete(url);
+                if (this.activeRequests.size === 0) {
+                    this.hide();
+                } else {
+                    this.calculateTotal();
                 }
             },
 
@@ -700,13 +724,46 @@
                 this.el.classList.remove('active');
                 this.infoEl.classList.remove('show');
                 setTimeout(() => {
-                    this.el.style.transform = 'scaleX(0)';
-                    this.textEl.textContent = '0%';
-                    this.bytesEl.textContent = '0 KB / 0 KB';
+                    if (this.activeRequests.size === 0) {
+                        this.el.style.transform = 'scaleX(0)';
+                        this.textEl.textContent = '0%';
+                        this.bytesEl.textContent = '0 KB / 0 KB';
+                    }
                 }, 300);
             }
         };
 
+        // --- FETCH QUEUE FOR PARALLEL LOADING ---
+        const FetchQueue = {
+            maxParallel: 8,
+            running: 0,
+            queue: [],
+
+            async add(task) {
+                return new Promise((resolve, reject) => {
+                    this.queue.push({ task, resolve, reject });
+                    this.process();
+                });
+            },
+
+            async process() {
+                if (this.running >= this.maxParallel || this.queue.length === 0) return;
+
+                this.running++;
+                const { task, resolve, reject } = this.queue.shift();
+
+                try {
+                    const result = await task();
+                    resolve(result);
+                } catch (err) {
+                    reject(err);
+                } finally {
+                    this.running--;
+                    this.process();
+                }
+            }
+        };
+
         // --- INDEXED DB CACHE WITH LAZY LOADING ---
         const ThumbCache = {
             DB_NAME: 'PDF_Crop_Thumbs',
@@ -765,9 +822,9 @@
                             imgElement.classList.add('loaded');
                             if (loaderElement) loaderElement.remove();
                         } else {
-                            // Not cached - fetch with progress
+                            // Not cached - queue fetch
                             try {
-                                const blob = await this.fetchWithProgress(url, showProgress);
+                                const blob = await FetchQueue.add(() => this.fetchWithProgress(url, showProgress));
                                 const txWrite = db.transaction(this.STORE_NAME, 'readwrite');
                                 txWrite.objectStore(this.STORE_NAME).put({
                                     url: url,
@@ -779,6 +836,7 @@
                                 imgElement.classList.add('loaded');
                                 if (loaderElement) loaderElement.remove();
                             } catch (err) {
+                                console.error('Fetch failed for', url, err);
                                 imgElement.src = url;
                                 imgElement.classList.add('loaded');
                                 if (loaderElement) loaderElement.remove();
@@ -799,20 +857,20 @@
                     xhr.responseType = 'blob';
 
                     if (showProgress) {
-                        ProgressBar.show(0);
+                        ProgressBar.show();
+                        ProgressBar.update(url, 0, 0); // Init
                     }
 
                     xhr.onprogress = (e) => {
                         if (e.lengthComputable && showProgress) {
-                            const progress = e.loaded / e.total;
-                            ProgressBar.update(progress, e.loaded, e.total);
+                            ProgressBar.update(url, e.loaded, e.total);
                         }
                     };
 
                     xhr.onload = () => {
                         if (showProgress) {
-                            ProgressBar.update(1, xhr.response.size, xhr.response.size);
-                            setTimeout(() => ProgressBar.hide(), 500);
+                            ProgressBar.update(url, xhr.response.size, xhr.response.size);
+                            setTimeout(() => ProgressBar.removeRequest(url), 200);
                         }
                         if (xhr.status === 200) {
                             resolve(xhr.response);
@@ -822,7 +880,7 @@
                     };
 
                     xhr.onerror = () => {
-                        if (showProgress) ProgressBar.hide();
+                        if (showProgress) ProgressBar.removeRequest(url);
                         reject(new Error('Network error'));
                     };
 
@@ -935,7 +993,7 @@
             els.cropArea.classList.add('loading');
 
             try {
-                const blob = await ThumbCache.fetchWithProgress(imageUrl, true);
+                const blob = await FetchQueue.add(() => ThumbCache.fetchWithProgress(imageUrl, true));
                 els.image.src = URL.createObjectURL(blob);
                 els.image.onload = () => {
                     els.image.classList.add('loaded');
@@ -949,7 +1007,6 @@
                     els.cropArea.classList.remove('loading');
                     fitImage();
                 };
-                ProgressBar.hide();
             }
         }
 
@@ -960,7 +1017,7 @@
             els.rightCropArea.classList.add('loading');
 
             try {
-                const blob = await ThumbCache.fetchWithProgress(imageUrl, false); // Don't show progress for second image
+                const blob = await FetchQueue.add(() => ThumbCache.fetchWithProgress(imageUrl, true));
                 els.rightImage.src = URL.createObjectURL(blob);
                 els.rightImage.onload = () => {
                     els.rightImage.classList.add('loaded');

templates/dashboard.html

@@ -43,7 +43,10 @@
 <div class="container-fluid mt-4" style="width: 90%; margin: auto;">
     <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
         <h2>Session Dashboard</h2>
-        <button id="delete-selected-btn" class="btn btn-danger" style="display: none;">Delete Selected</button>
+        <div class="d-flex gap-2">
+            <button id="batch-group-btn" class="btn btn-outline-info" style="display: none;">Set Group</button>
+            <button id="delete-selected-btn" class="btn btn-danger" style="display: none;">Delete Selected</button>
+        </div>
     </div>
 
     <!-- Filter tabs -->
@@ -68,6 +71,7 @@
                     <th scope="col" style="width: 3%;">S.No.</th>
                     <th scope="col" style="width: 3%;"><input type="checkbox" id="select-all-checkbox"></th>
                     <th scope="col" class="name-column">Name</th>
+                    <th scope="col">Group</th>
                     <th scope="col">Created At</th>
                     <th scope="col">Pages</th>
                     <th scope="col">{{ 'Bookmarks' if filter_type == 'collections' else 'Questions' }}</th>
@@ -88,6 +92,11 @@
                         <i class="fas fa-pencil-alt edit-name-icon ms-2" style="cursor: pointer;"></i>
                         <input type="text" class="form-control form-control-sm d-none" value="{{ session.name or session.original_filename }}">
                     </td>
+                    <td class="editable-group">
+                        <span class="group-name text-muted small">{{ session.group_name or 'None' }}</span>
+                        <i class="fas fa-pencil-alt edit-group-icon ms-2" style="cursor: pointer; font-size: 0.8rem;"></i>
+                        <input type="text" class="form-control form-control-sm d-none" value="{{ session.group_name or '' }}" placeholder="Group Name">
+                    </td>
                     <td><span class="badge bg-secondary">{{ session.created_at | humanize }}</span></td>
                     <td>{{ session.page_count }}</td>
                     <td>{{ session.question_count }}</td>
@@ -147,12 +156,14 @@
 $(document).ready(function() {
     // Checkbox selection logic
     const deleteBtn = $('#delete-selected-btn');
+    const batchGroupBtn = $('#batch-group-btn');
     const selectAllCheckbox = $('#select-all-checkbox');
     const sessionCheckboxes = $('.session-checkbox');
 
     function toggleDeleteButton() {
         const anyChecked = sessionCheckboxes.is(':checked');
         deleteBtn.css('display', anyChecked ? 'inline-block' : 'none');
+        batchGroupBtn.css('display', anyChecked ? 'inline-block' : 'none');
     }
 
     selectAllCheckbox.on('change', function() {
@@ -191,6 +202,31 @@ $(document).ready(function() {
         }
     });
 
+    // Batch update group
+    batchGroupBtn.on('click', function() {
+        const selectedIds = [];
+        sessionCheckboxes.filter(':checked').each(function() {
+            selectedIds.push($(this).closest('tr').data('session-id'));
+        });
+
+        const newGroup = prompt(`Enter group name for ${selectedIds.length} sessions (leave empty to remove group):`);
+        if (newGroup !== null) {
+            $.ajax({
+                url: '/sessions/batch_update_group',
+                type: 'POST',
+                contentType: 'application/json',
+                data: JSON.stringify({ ids: selectedIds, group_name: newGroup.trim() || null }),
+                success: function(response) {
+                    if (response.success) {
+                        location.reload();
+                    } else {
+                        alert('Error updating groups: ' + response.error);
+                    }
+                }
+            });
+        }
+    });
+
     // Editable name
     $('.edit-name-icon').on('click', function() {
         const icon = $(this);
@@ -232,6 +268,47 @@ $(document).ready(function() {
         }
     });
 
+    // Group editing logic
+    $('.edit-group-icon').on('click', function() {
+        const icon = $(this);
+        const span = icon.prev('.group-name');
+        const input = icon.next('input');
+        span.addClass('d-none');
+        icon.addClass('d-none');
+        input.removeClass('d-none').focus();
+    });
+
+    $('.editable-group input').on('blur keyup', function(e) {
+        if (e.type === 'blur' || e.key === 'Enter') {
+            const input = $(this);
+            const span = input.siblings('.group-name');
+            const icon = input.siblings('.edit-group-icon');
+            const newGroup = input.val().trim();
+            const oldGroup = span.text() === 'None' ? '' : span.text();
+            const sessionId = input.closest('tr').data('session-id');
+
+            if (newGroup !== oldGroup) {
+                $.ajax({
+                    url: '/sessions/update_group',
+                    type: 'POST',
+                    contentType: 'application/json',
+                    data: JSON.stringify({ session_id: sessionId, group_name: newGroup }),
+                    success: function(response) {
+                        if (response.success) {
+                            span.text(newGroup || 'None');
+                        } else {
+                            alert('Error updating group: ' + response.error);
+                            input.val(oldGroup);
+                        }
+                    }
+                });
+            }
+            input.addClass('d-none');
+            span.removeClass('d-none');
+            icon.removeClass('d-none');
+        }
+    });
+
     // Toggle persist
     $('.toggle-persist-btn').on('click', function() {
         const button = $(this);

templates/stacked_chart.html

@@ -206,7 +206,17 @@
     <div class="card bg-dark text-white border-0 shadow">
         <div class="card-header text-center py-4" style="background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.1);">
             <h1 class="h3 mb-1 fw-bold">Classified Questions</h1>
-            <p class="mb-0 text-white-50 small">Session → Subjects → Topics</p>
+            <p class="mb-3 text-white-50 small">Session → Subjects → Topics</p>
+            
+            <div class="d-flex justify-content-center align-items-center gap-2">
+                <span class="small text-white-50">View Group:</span>
+                <select id="groupSelector" class="form-select form-select-sm bg-dark text-white border-secondary" style="width: auto; min-width: 150px;">
+                    <option value="">Main (No Group)</option>
+                    {% for group in groups %}
+                    <option value="{{ group }}">{{ group }}</option>
+                    {% endfor %}
+                </select>
+            </div>
         </div>
         <div class="card-body px-3 px-md-4 py-4">
 
@@ -286,6 +296,12 @@ let originalData = null;
 let selectedSubjects = new Set();
 let sortByWrongRatio = false;
 
+function getSortedSessionIds(data) {
+    return Object.keys(data).sort((a, b) => {
+        return new Date(data[b].created_at) - new Date(data[a].created_at);
+    });
+}
+
 const SUBJECT_PALETTE = {
     P: { border: '#f97316' },
     C: { border: '#22d3ee' },
@@ -390,32 +406,62 @@ const topAxisPlugin = {
 };
 
 document.addEventListener('DOMContentLoaded', function () {
-    fetch('/api/stacked_chart_data')
-        .then(r => r.json())
-        .then(data => {
-            originalData = data;
-
-            const allSubjects = new Set();
-            Object.keys(data).forEach(sid => {
-                Object.keys(data[sid].subjects).forEach(s => allSubjects.add(s));
+    const groupSelector = document.getElementById('groupSelector');
+    
+    function fetchData(group = '') {
+        // Show loading state in table
+        document.getElementById('dataTableBody').innerHTML = `
+            <tr>
+                <td colspan="6">
+                    <div class="loading-overlay">
+                        <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+                        Loading group data…
+                    </div>
+                </td>
+            </tr>`;
+            
+        const url = group ? `/api/stacked_chart_data?group=${encodeURIComponent(group)}` : '/api/stacked_chart_data';
+        
+        fetch(url)
+            .then(r => r.json())
+            .then(data => {
+                originalData = data;
+
+                const allSubjects = new Set();
+                Object.keys(data).forEach(sid => {
+                    Object.keys(data[sid].subjects).forEach(s => allSubjects.add(s));
+                });
+
+                const subjectList = Array.from(allSubjects);
+                // Reset selected subjects to include all from the new data
+                selectedSubjects = new Set();
+                subjectList.forEach(s => selectedSubjects.add(s));
+
+                createSubjectCheckboxes(subjectList);
+                createMainChartSubjectCheckboxes(subjectList);
+
+                createStackedChart(data);
+                createTopicChart(data);
+                populateDataTable(data);
+            })
+            .catch(err => {
+                console.error('Error fetching chart data:', err);
+                document.getElementById('dataTableBody').innerHTML = '<tr><td colspan="6" class="text-center text-danger">Error loading data</td></tr>';
             });
+    }
 
-            const subjectList = Array.from(allSubjects);
-            subjectList.forEach(s => selectedSubjects.add(s));
-
-            createSubjectCheckboxes(subjectList);
-            createMainChartSubjectCheckboxes(subjectList);
+    // Initial fetch
+    fetchData(groupSelector.value);
 
-            createStackedChart(data);
-            createTopicChart(data);
-            populateDataTable(data);
+    // Fetch on group change
+    groupSelector.addEventListener('change', function() {
+        fetchData(this.value);
+    });
 
-            document.getElementById('sortByWrongRatio').addEventListener('change', function () {
-                sortByWrongRatio = this.checked;
-                applySubjectFilter();
-            });
-        })
-        .catch(err => console.error('Error fetching chart data:', err));
+    document.getElementById('sortByWrongRatio').addEventListener('change', function () {
+        sortByWrongRatio = this.checked;
+        applySubjectFilter();
+    });
 });
 
 function buildPills(container, subjects, idPrefix, labelFn) {
@@ -473,9 +519,10 @@ function applySubjectFilter() {
     }
 
     const filtered = {};
-    Object.keys(originalData).forEach(sid => {
+    getSortedSessionIds(originalData).forEach(sid => {
         filtered[sid] = {
             session_name: originalData[sid].session_name,
+            created_at: originalData[sid].created_at,
             subjects: {},
             wrong_ratios: originalData[sid].wrong_ratios
         };
@@ -492,7 +539,7 @@ function applySubjectFilter() {
 
 function createStackedChart(data) {
     const ctx = document.getElementById('stackedChart').getContext('2d');
-    const sessionIds = Object.keys(data);
+    const sessionIds = getSortedSessionIds(data);
     const sessionNames = sessionIds.map(id => data[id].session_name || id);
 
     const datasetMap = {};
@@ -722,7 +769,7 @@ function parseWrongRatio(ratioStr) {
 function populateDataTable(data) {
     const tbody = document.getElementById('dataTableBody');
     tbody.innerHTML = '';
-    const sessionIds = Object.keys(data);
+    const sessionIds = getSortedSessionIds(data);
 
     sessionIds.forEach(sid => {
         const sd = data[sid];