Allow sorting by Count (default), Species, or Max confidence

scripts/utils/interactive_plot.py

@@ -223,15 +223,25 @@ def create_plotly_heatmap(df_birds, now):
         + "</div>"
     )
 
+    # Correct `custom_data_confidence` in the create_plotly_heatmap function:
+    custom_data_confidence = np.array([{'confidence': conf * 100, 'count': count} for conf, count in zip(df_birds_summary['Conf'].values, df_birds_summary['Count'].values)]).reshape(-1, 1)
+
+    # In HTML string:
     html_str = f"""
     <style>.modebar-container {{ display: none !important; }}</style>
     <div class='chart-container' style='position: relative; width: 80%; margin: 0 auto;'>
-        <div style='position: absolute; top: 10px; left: 10px; z-index: 10;'>
+        <div style='position: absolute; bottom: 10px; left: 10px; z-index: 10;'>
             <input type='text' id='birdSearch' placeholder='Search...'
             style='padding: 5px; font-size: 14px; background-color: rgba(255, 255, 255, 0.5); color: #333; border: none;
             border-radius: 3px; width: 150px;' />
             <button id='filterButton' style='margin-left: 5px; padding: 5px; font-size: 14px; background-color: rgba(255, 255, 255, 0.5);
             color: #333; border: none; border-radius: 3px;'>OK</button>
+            <select id='sortOptions' style='margin-left: 5px; padding: 5px; font-size: 14px; background-color: rgba(255, 255, 255, 0.5);
+            color: #333; border: none; border-radius: 3px;'>
+                <option value="count" selected>Count</option>
+                <option value="confidence">Max Confidence</option>
+                <option value="species">Species Name</option>
+            </select>
         </div>
         {fig.to_html(
             include_plotlyjs='cdn',
@@ -249,23 +259,43 @@ def create_plotly_heatmap(df_birds, now):
             )
         )}
     </div>
-
+    
     <script>
         // Store the serialized annotations from Python
         var allAnnotations = {annotations_json};
-
+    
         var plot = document.getElementsByClassName('plotly-graph-div')[0];
         var originalData = JSON.parse(JSON.stringify(plot.data));  // Deep copy of original data
-
+    
         function applyFilter() {{
             var searchTerm = document.getElementById('birdSearch').value.toLowerCase();
+            var sortOption = document.getElementById('sortOptions').value;
             var indicesToShow = [];
             var speciesList = originalData[0].y;
+    
+            // Filter species list based on search term
             speciesList.forEach(function(species, index) {{
                 if (species.toLowerCase().includes(searchTerm)) {{
                     indicesToShow.push(index);
                 }}
             }});
+    
+            // Sort indices based on selected sort option
+            if (sortOption === 'confidence') {{
+                indicesToShow.sort(function(a, b) {{
+                    return originalData[0].customdata[b][0].confidence - originalData[0].customdata[a][0].confidence;
+                }});
+            }} else if (sortOption === 'species') {{
+                indicesToShow.sort(function(a, b) {{
+                    return speciesList[a].localeCompare(speciesList[b]);
+                }});
+            }} else if (sortOption === 'count') {{
+                indicesToShow.sort(function(a, b) {{
+                    return originalData[0].customdata[b][0].count - originalData[0].customdata[a][0].count;
+                }});
+            }}
+    
+            // Prepare new data based on sorted and filtered indices
             var newData = [];
             originalData.forEach(function(trace) {{
                 var newTrace = JSON.parse(JSON.stringify(trace));
@@ -281,23 +311,26 @@ def create_plotly_heatmap(df_birds, now):
                 }}
                 newData.push(newTrace);
             }});
+    
             // Filter annotations based on visible species
             var filteredAnnotations = allAnnotations.filter(function(annotation) {{
                 var species = annotation.y.toLowerCase();
                 return species.includes(searchTerm);
             }});
+    
             // Update the plot with new data and annotations
             Plotly.react(plot, newData, plot.layout);
             Plotly.relayout(plot, {{ annotations: filteredAnnotations }});
         }}
-
+    
         document.getElementById('filterButton').addEventListener('click', applyFilter);
         document.getElementById('birdSearch').addEventListener('keyup', function(event) {{
             if (event.key === 'Enter') {{
                 applyFilter();
             }}
         }});
-
+        document.getElementById('sortOptions').addEventListener('change', applyFilter);
+    
         plot.on('plotly_click', function(data) {{
             if (data.points && data.points[0] && data.points[0].y) {{
                 var species = data.points[0].y.replace(/ /g, '+');