From 21af18f1283ffda77650ace1e7813688d77ea05f Mon Sep 17 00:00:00 2001
From: Mattk70 <email@mattkirkland.co.uk>
Date: Wed, 24 Jan 2024 14:41:49 +0000
Subject: [PATCH] Added a help option to show detected classes based on the
 filters and model selected. Location list updates when the default location
 is changed.

---
 index.html       | 42 ++++++++++++++++++++++++++++++------------
 js/BirdNet2.4.js |  3 +++
 js/ui.js         | 43 +++++++++++++++++++++++++++++++++++++++++--
 js/worker.js     | 32 ++++++++++++++++++++++++--------
 4 files changed, 98 insertions(+), 22 deletions(-)

diff --git a/index.html b/index.html
index 38566482..bbeadb34 100644
--- a/index.html
+++ b/index.html
@@ -632,18 +632,21 @@ <h5>Saved Records</h5>
                                                     Help
                                                 </a>
                                                 <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-                                                    <!-- <li><a class="dropdown-item" id="update" href="#">
-                                                        <span class="material-symbols-outlined text-info">browser_updated</span>Update Available!</a></li> -->
-                                                        <li><a class="dropdown-item" id="usage" href="#">
-                                                            <span class="material-symbols-outlined">help</span> Usage</a>
-                                                        </li>
-                                                        <li>
-                                                            <a class="dropdown-item" id="settings" href="#">
-                                                                <span class="material-symbols-outlined">help</span> Settings
-                                                            </a>
-                                                        </li>
-                                                        <li><a class="dropdown-item" id="keyboard" href="#">
-                                                            <span class="material-symbols-outlined">help</span> Keyboard Shortcuts
+                                                    <li>
+                                                        <a class="dropdown-item" id="species" href="#">
+                                                            <span class="material-symbols-outlined">help</span> What species are detected?
+                                                        </a>
+                                                    </li>
+                                                    <li><a class="dropdown-item" id="usage" href="#">
+                                                        <span class="material-symbols-outlined">help</span> Using Chirpity</a>
+                                                    </li>
+                                                    <li>
+                                                        <a class="dropdown-item" id="settings" href="#">
+                                                            <span class="material-symbols-outlined">help</span> Settings
+                                                        </a>
+                                                    </li>
+                                                    <li><a class="dropdown-item" id="keyboard" href="#">
+                                                        <span class="material-symbols-outlined">help</span> Keyboard Shortcuts
                                                         </a>
                                                     </li>
                                                     <li><a class="dropdown-item" id="diagnostics" href="#">
@@ -753,6 +756,21 @@ <h5 class="modal-title" id="helpModalLabel">Help</h5>
                                 </div>
                             </div>
                         </div>
+                        <!-- Species Modal -->
+                        <div class="modal fade" id="speciesModal" tabindex="-1" aria-labelledby="speciesModalLabel" aria-hidden="true">
+                            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+                                <div class="modal-content">
+                                    <div class="modal-header justify-content-center">
+                                        <h5 class="modal-title" id="speciesModalLabel">Detected Species</h5>
+                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                                    </div>
+                                    <div id="speciesModalBody" class="modal-body"></div>
+                                    <div class="modal-footer justify-content-center">
+                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                         <!-- Analyse selection modal -->
                         <div class="modal fade" id="detectionsModal" tabindex="-1" aria-labelledby="detectionsModalLabel" aria-hidden="true">
                             <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
diff --git a/js/BirdNet2.4.js b/js/BirdNet2.4.js
index 71ffce89..f93efc7a 100644
--- a/js/BirdNet2.4.js
+++ b/js/BirdNet2.4.js
@@ -134,6 +134,9 @@ onmessage = async (e) => {
             }
             case "list": {
                 myModel.list = e.data.list;
+                myModel.lat = parseFloat(e.data.lat);
+                myModel.lon = parseFloat(e.data.lon);
+                myModel.week = parseInt(e.data.week) || myModel.week;
                 DEBUG && console.log(`Setting list to ${myModel.list}`);
                 await myModel.setList();
                 postMessage({
diff --git a/js/ui.js b/js/ui.js
index 9b844d77..791c929f 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -622,7 +622,7 @@ const showLocation = async (fromSelect) => {
 
 const displayLocationAddress = async (where) => {
     const custom = where.includes('custom');
-    let latEl, lonEl, placeEl, place;
+    let latEl, lonEl, placeEl;
     if (custom){
         latEl = document.getElementById('customLat');
         lonEl = document.getElementById('customLon');
@@ -630,6 +630,7 @@ const displayLocationAddress = async (where) => {
         address = await fetchLocationAddress(latEl.value, lonEl.value, false);
         placeEl.value = address || 'Location not available';
     } else {
+
         latEl = document.getElementById('latitude');
         lonEl = document.getElementById('longitude');
         placeEl = document.getElementById('place');
@@ -645,6 +646,16 @@ const displayLocationAddress = async (where) => {
             lat: config.latitude,
             lon: config.longitude,
         });
+        // Initially, so changes to the default location are immediately reflected in subsequent analyses
+        // We will switch to location filtersing when the default location is changed.
+        config.list = 'location';
+        updateListIcon();
+        document.getElementById('list-to-use').value = config.list;
+        worker.postMessage({
+            action: 'update-list',
+            list: 'location'
+        });
+        
     }
 }
 
@@ -1546,6 +1557,9 @@ break;
 }
                 case "seen-species-list": {generateBirdList("seenSpecies", args.list);
 break;
+}
+                case "valid-species-list": {populateSpeciesModal(args.rows);
+break;
 }
                 case "show-spinner": {showLoadingSpinner(500);
 break;
@@ -1618,7 +1632,13 @@ function generateBirdOptionList({ store, rows, selected }) {
     return listHTML;
 }
 
-
+function generateBirdIDList(rows) {
+    let listHTML = '';
+    for (const item in rows) {
+        listHTML += `   <tr><td>${rows[item].cname}</td> <td><i>${rows[item].sname}</i></td></tr>\n`;
+    }
+    return listHTML;
+}
 
 const getActiveRowID = () => activeRow?.rowIndex - 1;
 
@@ -3189,6 +3209,11 @@ document.getElementById('keyboard').addEventListener('click', async () => {
 document.getElementById('settings').addEventListener('click', async () => {
     await populateHelpModal('Help/settings.html', 'Settings Help');
 });
+
+document.getElementById('species').addEventListener('click', async () => {
+    worker.postMessage({action: 'get-valid-species'})
+});
+
 document.getElementById('usage').addEventListener('click', async () => {
     await populateHelpModal('Help/usage.html', 'Usage Guide');
 });
@@ -3201,6 +3226,20 @@ const populateHelpModal = async (file, label) => {
     help.show();
 }
 
+const populateSpeciesModal = async (rows) => {
+    const model = config.model === 'v2.4' ? 'BirdNET' : 'Chirpity';
+    const location = config.list === 'location' ? ` centered on ${place.textContent.replace('fmd_good', '')}` : '';
+    let modalContent =  `
+    <h6>Using the <b>${model}</b> model and the <b>${config.list}</b> list${location}, the following species can be detected:</h6>
+    `
+    modalContent += '<table class="table table-striped"><thead class="bg-text-dark"><tr><th>Common Name</th><th>Scientific Name</th></tr></thead><tbody>\n';
+    modalContent += generateBirdIDList(rows);
+    modalContent += '</tbody></table>\n';
+    document.getElementById('speciesModalBody').innerHTML = modalContent;
+    const species = new bootstrap.Modal(document.getElementById('speciesModal'));
+    species.show();
+}
+
 // Prevent the settings menu disappearing on click
 document.getElementById('settingsMenu').addEventListener('click', (e) => {
     e.stopImmediatePropagation();
diff --git a/js/worker.js b/js/worker.js
index e1939ee1..1a163ead 100644
--- a/js/worker.js
+++ b/js/worker.js
@@ -292,7 +292,10 @@ break;
 }
 break;
 }
-        case "get-detected-species-list": {getSpecies();
+        case "get-detected-species-list": {getDetectedSpecies();
+break;
+}
+        case "get-valid-species": {getValidSpecies();
 break;
 }
         case "get-locations": {getLocations({
@@ -357,7 +360,10 @@ break;
 SEEN_LIST_UPDATE = false;
 predictWorkers.forEach((worker) => worker.postMessage({
     message: "list",
-    list: args.list
+    list: args.list,
+    lat: STATE.lat,
+    lon: STATE.lon,
+    week: -1
 }));
 break;
 }
@@ -1657,7 +1663,7 @@ function spawnWorkers(model, list, batchSize, threads) {
             backend: BACKEND,
             lat: STATE.lat,
             lon: STATE.lon,
-            week: new Date(1617229255088).getWeekNumber()
+            week: -1 // new Date(1617229255088).getWeekNumber()
         })
         worker.onmessage = async (e) => {
             await parseMessage(e)
@@ -1969,7 +1975,7 @@ break;
     if (response["updateResults"] && STATE.db) {
         await Promise.all([getResults(), getSummary()]);
         if (["explore", "chart"].includes(STATE.mode)) {
-            getSpecies();
+            getDetectedSpecies();
         }
     }
 }
@@ -2543,7 +2549,7 @@ const getRate = (species) => {
     })
 }
 
-const getSpecies = () => {
+const getDetectedSpecies = () => {
     const range = STATE.explore.range;
     const confidence = STATE.detect.confidence;
     let sql = `SELECT cname, locationID
@@ -2563,6 +2569,16 @@ const getSpecies = () => {
     })
 };
 
+const getValidSpecies = () => {
+    let sql = `SELECT cname, sname FROM species`;
+    if (STATE.blocked.length) {
+        sql += ` WHERE id NOT IN (${STATE.blocked.join(',')})`;
+    }
+    sql += ' GROUP BY cname ORDER BY cname';
+    diskDB.all(sql, (err, rows) => {
+        err ? console.log(err) : UI.postMessage({ event: 'valid-species-list', rows: rows })
+    })
+};
 
 const onUpdateFileStart = async (args) => {
     let file = args.file;
@@ -2622,7 +2638,7 @@ async function onDelete({
         }
         // Update the seen species list
         if (db === diskDB) {
-            getSpecies();
+            getDetectedSpecies();
         } else {
             UI.postMessage({event: 'unsaved-records'});
         }
@@ -2651,7 +2667,7 @@ async function onDeleteSpecies({
     if (changes) {
         if (db === diskDB) {
             // Update the seen species list
-            getSpecies();
+            getDetectedSpecies();
         } else {
             UI.postMessage({event: 'unsaved-records'});
         }
@@ -2746,7 +2762,7 @@ const onFileDelete = async (fileName) => {
     const result = await diskDB.runAsync('DELETE FROM files WHERE name = ?', fileName);
     if (result.changes) {
         onChangeMode('analyse');
-        getSpecies();
+        getDetectedSpecies();
         UI.postMessage({
             event: 'generate-alert',
             message: `${fileName}