working matched skills view

app.py

@@ -500,80 +500,6 @@ def create_html_output(job_result: Dict, resume_results: List[Dict], filenames:
     avg_leadership = sum(leadership_counts) / len(leadership_counts) if leadership_counts else 0
     avg_collaboration = sum(collaboration_counts) / len(collaboration_counts) if collaboration_counts else 0
     
-    # Create skills summary table
-    html += "<h3>Skills Summary</h3>"
-    html += "<div style='margin-bottom: 10px;'>"
-    html += "<button onclick='toggleSkillsView()' id='skillsToggleBtn' style='background-color: #4CAF50; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;'>Show Only Matched Skills</button>"
-    html += "</div>"
-    html += "<table style='width: 100%; border-collapse: collapse; margin-bottom: 20px;' id='skillsTable'>"
-    html += "<tr style='background-color: #eee;'><th style='padding: 8px; text-align: left; border: 1px solid #ddd;'>Skill</th>"
-    html += "<th style='padding: 8px; text-align: center; border: 1px solid #ddd;'>Years of Experience</th>"
-    html += "<th style='padding: 8px; text-align: center; border: 1px solid #ddd;'>Leadership</th>"
-    html += "<th style='padding: 8px; text-align: center; border: 1px solid #ddd;'>Collaboration</th>"
-    html += "<th style='padding: 8px; text-align: center; border: 1px solid #ddd;'>Match</th></tr>"
-    
-    # Get all unique skills across all resumes
-    all_skills = set()
-    for resume_result in resume_results:
-        for skill in resume_result['skills']:
-            all_skills.add(skill['text'].lower())
-    
-    # Create a list of skill data for sorting
-    skill_data = []
-    for skill in all_skills:
-        # Calculate total years of experience across all resumes
-        total_years = sum(skill_experience.get(skill, 0) for skill_experience in skill_experience_maps)
-        
-        # Check if skill has leadership or collaboration in any resume
-        has_leadership = any(skill in skill_leadership for skill_leadership in skill_leadership_maps)
-        has_collaboration = any(skill in skill_collaboration for skill_collaboration in skill_collaboration_maps)
-        
-        # Check if skill matches job requirements
-        is_match = skill in job_skills
-        
-        skill_data.append({
-            'skill': skill,
-            'years': total_years,
-            'has_leadership': has_leadership,
-            'has_collaboration': has_collaboration,
-            'is_match': is_match
-        })
-    
-    # Sort skills by years of experience (descending)
-    skill_data.sort(key=lambda x: (-x['years'], x['skill']))
-    
-    # Add rows for each skill
-    for data in skill_data:
-        # Add row to summary table
-        html += f"<tr class='skill-row' data-match='{str(data['is_match']).lower()}'><td style='padding: 8px; border: 1px solid #ddd;'>{data['skill']}</td>"
-        html += f"<td style='padding: 8px; text-align: center; border: 1px solid #ddd;'>{data['years']:.1f}</td>"
-        html += f"<td style='padding: 8px; text-align: center; border: 1px solid #ddd; color: {'green' if data['has_leadership'] else 'red'};'>{'Yes' if data['has_leadership'] else 'No'}</td>"
-        html += f"<td style='padding: 8px; text-align: center; border: 1px solid #ddd; color: {'green' if data['has_collaboration'] else 'red'};'>{'Yes' if data['has_collaboration'] else 'No'}</td>"
-        html += f"<td style='padding: 8px; text-align: center; border: 1px solid #ddd; color: {'green' if data['is_match'] else 'red'};'>{'Yes' if data['is_match'] else 'No'}</td></tr>"
-    
-    html += "</table>"
-    
-    # Add JavaScript for toggle functionality
-    html += """
-    <script>
-    function toggleSkillsView() {
-        const button = document.getElementById('skillsToggleBtn');
-        const rows = document.querySelectorAll('.skill-row');
-        const showOnlyMatched = button.textContent.includes('Show Only Matched');
-        
-        rows.forEach(row => {
-            if (showOnlyMatched) {
-                row.style.display = row.dataset.match === 'true' ? '' : 'none';
-            } else {
-                row.style.display = '';
-            }
-        });
-        
-        button.textContent = showOnlyMatched ? 'Show All Skills' : 'Show Only Matched Skills';
-    }
-    </script>
-    """
-    
     # Create summary table if multiple resumes
     if multiple_resumes:
         html += "<h3>Match Summary</h3>"
@@ -743,13 +669,92 @@ def create_html_output(job_result: Dict, resume_results: List[Dict], filenames:
         html += f"<div id='resume-detail-{i}' class='resume-detail' style='margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; display: {display_style};'>"
         html += f"<h3>{resume_file} Details</h3>"
         
+        # Skills Summary specific to this resume - Now inside the detail section
+        html += "<h3>Skills Summary</h3>"
+        html += "<div style='margin-bottom: 10px;'>"
+        html += f"<button onclick='toggleSkillsView{i}()' id='skillsToggleBtn{i}' style='background-color: #4CAF50; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;'>Show All Skills</button>"
+        html += "</div>"
+        html += f"<table style='width: 100%; border-collapse: collapse; margin-bottom: 20px;' id='skillsTable{i}'>"
+        html += "<tr style='background-color: #eee;'><th style='padding: 8px; text-align: left; border: 1px solid #ddd;'>Skill</th>"
+        html += "<th style='padding: 8px; text-align: center; border: 1px solid #ddd;'>Years of Experience</th>"
+        html += "<th style='padding: 8px; text-align: center; border: 1px solid #ddd;'>Leadership</th>"
+        html += "<th style='padding: 8px; text-align: center; border: 1px solid #ddd;'>Collaboration</th>"
+        html += "<th style='padding: 8px; text-align: center; border: 1px solid #ddd;'>Match</th></tr>"
+        
+        # Get all unique skills for this specific resume
+        resume_skills = set()
+        for skill in resume_result['skills']:
+            resume_skills.add(skill['text'].lower())
+        
+        # Get skill maps for this resume
+        skill_experience = skill_experience_maps[i-1]
+        skill_leadership = skill_leadership_maps[i-1]
+        skill_collaboration = skill_collaboration_maps[i-1]
+        
+        # Create a list of skill data for sorting
+        skill_data = []
+        for skill in resume_skills:
+            # Get years of experience for this skill
+            years = skill_experience.get(skill, 0)
+            
+            # Check if skill has leadership or collaboration
+            has_leadership = skill in skill_leadership
+            has_collaboration = skill in skill_collaboration
+            
+            # Check if skill matches job requirements
+            is_match = skill in job_skills
+            
+            skill_data.append({
+                'skill': skill,
+                'years': years,
+                'has_leadership': has_leadership,
+                'has_collaboration': has_collaboration,
+                'is_match': is_match
+            })
+        
+        # Sort skills by years of experience (descending)
+        skill_data.sort(key=lambda x: (-x['years'], x['skill']))
+        
+        # Add rows for each skill
+        for data in skill_data:
+            # Set initial display based on match (only show matched skills by default)
+            display = "none" if not data['is_match'] else ""
+            
+            # Add row to summary table
+            html += f"<tr class='skill-row{i}' data-match='{str(data['is_match']).lower()}' style='display: {display};'>"
+            html += f"<td style='padding: 8px; border: 1px solid #ddd;'>{data['skill']}</td>"
+            html += f"<td style='padding: 8px; text-align: center; border: 1px solid #ddd;'>{data['years']:.1f}</td>"
+            html += f"<td style='padding: 8px; text-align: center; border: 1px solid #ddd; color: {'green' if data['has_leadership'] else 'red'};'>{'Yes' if data['has_leadership'] else 'No'}</td>"
+            html += f"<td style='padding: 8px; text-align: center; border: 1px solid #ddd; color: {'green' if data['has_collaboration'] else 'red'};'>{'Yes' if data['has_collaboration'] else 'No'}</td>"
+            html += f"<td style='padding: 8px; text-align: center; border: 1px solid #ddd; color: {'green' if data['is_match'] else 'red'};'>{'Yes' if data['is_match'] else 'No'}</td></tr>"
+        
+        html += "</table>"
+        
+        # Add JavaScript for toggle functionality for this specific resume's skills table
+        html += f"""
+        <script>
+        function toggleSkillsView{i}() {{
+            const button = document.getElementById('skillsToggleBtn{i}');
+            const rows = document.querySelectorAll('.skill-row{i}');
+            const showOnlyMatched = button.textContent.includes('Show All');
+            
+            rows.forEach(row => {{
+                if (showOnlyMatched) {{
+                    row.style.display = '';
+                }} else {{
+                    row.style.display = row.dataset.match === 'true' ? '' : 'none';
+                }}
+            }});
+            
+            button.textContent = showOnlyMatched ? 'Show Only Matched Skills' : 'Show All Skills';
+        }}
+        </script>
+        """
+        
         # Display all skills found in the resume
         html += "<p><strong>Skills Found:</strong></p>"
         html += "<div style='background-color: #f0f0f0; padding: 10px; border-radius: 5px;'>"
         
-        # Get skill experience map for this resume
-        skill_experience = skill_experience_maps[i-1]
-        
         for skill in resume_result['skills']:
             # Highlight matched skills
             is_match = skill['text'].lower() in job_skills