From d8e45721c5c90789e43865729faec05b73266e37 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Wed, 30 Oct 2024 11:25:45 +0000
Subject: [PATCH 01/15] Only search studies by name if key is 'Any'

---
 .../static/idr_gallery/omero_search_form.js     | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/idr_gallery/static/idr_gallery/omero_search_form.js b/idr_gallery/static/idr_gallery/omero_search_form.js
index 17001593..1790bf76 100644
--- a/idr_gallery/static/idr_gallery/omero_search_form.js
+++ b/idr_gallery/static/idr_gallery/omero_search_form.js
@@ -168,14 +168,15 @@ async function getAutoCompleteResults(key, query, knownKeys, operator) {
   let kvp_url = `${SEARCH_ENGINE_URL}resources/all/searchvalues/?` + params;
   let urls = [kvp_url];
 
-  // We always check for Names...
-  // Need to load data from 2 end-points
-  let names_url = `${SEARCH_ENGINE_URL}resources/all/names/?value=${query}`;
-  // NB: Don't show auto-complete for Description yet - issues with 'equals' search
-  // if (key == "Any" || key == "description") {
-  //   names_url += `&use_description=true`;
-  // }
-  urls.push(names_url);
+  // We check for Names if "Any"
+  if (key == "Any") {
+    let names_url = `${SEARCH_ENGINE_URL}resources/all/names/?value=${query}`;
+    // NB: Don't show auto-complete for Description yet - issues with 'equals' search
+    // if (key == "Any" || key == "description") {
+    //   names_url += `&use_description=true`;
+    // }
+    urls.push(names_url);
+  }
 
   const promises = urls.map((p) => fetch(p).then((rsp) => rsp.json()));
   const responses = await Promise.all(promises);

From 2742212c2925166f4db74aa28a7bf8b4ed982179 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Wed, 30 Oct 2024 11:50:49 +0000
Subject: [PATCH 02/15] Move study link under search results section

---
 idr_gallery/static/idr_gallery/omero_search_form.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/idr_gallery/static/idr_gallery/omero_search_form.js b/idr_gallery/static/idr_gallery/omero_search_form.js
index 1790bf76..db20acb2 100644
--- a/idr_gallery/static/idr_gallery/omero_search_form.js
+++ b/idr_gallery/static/idr_gallery/omero_search_form.js
@@ -856,12 +856,12 @@ class OmeroSearchForm {
         return `<li class="studyRow" data-name="${studyName}">
             <div class="studyColumns">
                 <div class="caret"><i class="fa fa-caret-right"></i></div>
-                <div class="studyId">
-                  <a href="${BASE_URL}webclient/?show=${objType}-${objId}" target="_blank">${studyId}</a></div>
+                <div class="studyId">${studyId}</div>
                 <div class="count">${count}</div>
                 <div class="studyName" title="${title}">${title}</div>
             </div>
             <div class="studyImages">
+              <div style="margin-left: 20px">Open study: <a href="${BASE_URL}webclient/?show=${objType}-${objId}" target="_blank">${studyName}</a></div>
               <ul></ul>
               <div class="studyImagesSpinner">
                 ${SPINNER_SVG}

From 16e9d4959a4efed474814fc5016494f08ef5140d Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Fri, 1 Nov 2024 15:28:06 +0000
Subject: [PATCH 03/15] Thumnnail links show popup

---
 .../static/idr_gallery/omero_search_form.js   |   4 +-
 idr_gallery/templates/idr_gallery/search.html | 156 ++++++++++++++++++
 2 files changed, 158 insertions(+), 2 deletions(-)

diff --git a/idr_gallery/static/idr_gallery/omero_search_form.js b/idr_gallery/static/idr_gallery/omero_search_form.js
index db20acb2..0a0ecd29 100644
--- a/idr_gallery/static/idr_gallery/omero_search_form.js
+++ b/idr_gallery/static/idr_gallery/omero_search_form.js
@@ -939,8 +939,8 @@ class OmeroSearchForm {
       .map((img) => {
         // Each thumbnail links to image viewer. Hover menu links to viewer (eye) and webclient (i)
         return `<li class="studyThumb">
-          <a target="_blank" href="${BASE_URL}webclient/img_detail/${img.id}">
-            <img title="${img.name}" src="${BASE_URL}webclient/render_thumbnail/${img.id}/" loading="lazy" />
+          <a class="thumblink" data-image_id="${img.id}" data-image_name="${img.name}" target="_blank" href="${BASE_URL}webclient/img_detail/${img.id}">
+            <img data-image_id="${img.id}" data-image_name="${img.name}" title="${img.name}" src="${BASE_URL}webclient/render_thumbnail/${img.id}/" loading="lazy" />
           </a>
           <ul class="imgLinks">
             <li title="Browse image metadata">
diff --git a/idr_gallery/templates/idr_gallery/search.html b/idr_gallery/templates/idr_gallery/search.html
index 4c327d58..61835637 100644
--- a/idr_gallery/templates/idr_gallery/search.html
+++ b/idr_gallery/templates/idr_gallery/search.html
@@ -58,6 +58,88 @@
     border-radius: 10px;
     margin: 5px;
   }
+
+  .close {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    z-index: 100;
+    font-size: 2rem;
+    padding: 2px 9px;
+  }
+  .scrollable {
+    position: absolute;
+    inset: 0;
+    overflow: auto;
+    height: 100%;
+    z-index: 0;
+    padding: 5px;
+  }
+  #kvp_popover {
+    margin: auto;
+    position: fixed;
+    margin-right: 5px;
+    margin-bottom: 5px;
+    width: 512px;
+    height: 75%;
+    overflow: auto;
+    box-shadow: 5px 4px 10px -5px #737373;
+  }
+  #kvp_popover_content {
+    color: hsl(210, 10%, 30%);
+    font-size: 12px;
+    background-color: hsl(220,20%,95%);
+    display: flex;
+    flex-direction: column;
+    z-index: 0;
+  }
+  #kvp_popover_content h2 {
+    font-size: 16px;
+    color: hsl(210, 10%, 30%);
+    inset: 0;
+    flex: auto 0 0;
+    margin: 10px;
+  }
+  #kvp_popover_content a {
+    font-weight: normal;
+    display: inline-block;
+    border: solid #ccc 1px;
+    padding: 5px;
+    border-radius: 10px;
+    background: rgba(256, 256, 256, 0.5);
+  }
+  #kvp_popover_content i.fas {
+    margin: 0 10px;
+  }
+  #popover_links {
+    flex: auto 0 0;
+    margin: 0 10px 10px 10px;
+  }
+  #popover_kvp {
+    flex: auto 1 1;
+    overflow: auto;
+  }
+
+  @media (max-width: 800px) {
+    #mypopover {
+      width: 100%;
+    }
+  }
+  .map_ann tr {
+    background: hsl(220,20%,95%);
+    border: solid #ddd 1px;
+  }
+  .map_ann td {
+    padding: 2px;
+    background-color: hsl(220,20%,95%);
+    width: 50%;
+    max-width: 50%;
+    overflow-wrap: break-word;
+  }
+  .map_ann {
+    padding: 5px;
+    margin: 5px;
+  }
 </style>
 
 <link rel="stylesheet" href="{% static 'idr_gallery/css/search_form_styles.css' %}?_={{VERSION}}" />
@@ -105,6 +187,15 @@
 
 </div>
 
+<div id="kvp_popover" popover>
+  <button class="close" popovertarget="kvp_popover">&times;</button>
+  <div id="kvp_popover_content" class="scrollable">
+    <h2 id="popover_imagename">Image Name</h2>
+    <div id="popover_links"></div>
+    <div id="popover_kvp"></div>
+  </div>
+</div>
+
 <script>
   // Various global constants from omero config set...
   var FILTER_KEYS = {{ filter_keys|safe }};
@@ -181,6 +272,71 @@
     searchFromUrl();
   });
 
+  $(".resultsList").on("click", "a.thumblink", function(event){
+    event.preventDefault();
+    document.getElementById("popover_kvp").innerHTML = "Loading Attributes...";
+    document.getElementById("kvp_popover").showPopover();
+
+    let image_id = event.target.dataset.image_id;
+    let image_name = event.target.dataset.image_name;
+    document.getElementById("popover_imagename").innerHTML = image_name;
+    let linkshtml = `
+        <div><a target="_blank" href="${BASE_URL}webclient/?show=image-${image_id}">
+          Browse image metadata<i class="fas fa-info"></i></a>
+        <a target="_blank" href="${BASE_URL}webclient/img_detail/${image_id}">
+          Open Image in Viewer<i class="fas fa-eye"></i></a></div>`
+    document.getElementById("popover_links").innerHTML = linkshtml;
+    
+    let url = `https://idr.openmicroscopy.org/webclient/api/annotations/?type=map&image=${image_id}`;
+    fetch(url)
+      .then(response => response.json())
+      .then(data => {
+        console.log("annotations", data);
+        
+        var experimenters = [];
+        if (data.experimenters.length > 0) {
+            // manipulate data...
+            // make an object of eid: experimenter
+            experimenters = data.experimenters.reduce(function(prev, exp){
+                prev[exp.id + ""] = exp;
+                return prev;
+            }, {});
+        }
+
+        var populate_experimenter = function(ann) {
+            if (data.experimenters.length > 0) {
+                ann.owner = experimenters[ann.owner.id];
+            }
+            if (ann.link && ann.link.owner) {
+                ann.link.owner = experimenters[ann.link.owner.id];
+                // AddedBy IDs for filtering
+                ann.addedBy = [ann.link.owner.id];
+            }
+            return ann;
+        };
+
+        // Populate experimenters within anns
+        var anns = data.annotations.map(populate_experimenter);
+
+        // Update html...
+        console.log("anns", anns);
+        let html = anns.map(ann => {
+          return `<div class="row">
+            <div class="map_ann">
+              <table>
+                ${ann.values.map(v => {
+                  return `<tr>
+                    <td>${v[0]}</td>
+                    <td>${v[1]}</td>
+                  </tr>`
+                }).join("")}
+            </div>`
+        });
+
+        document.getElementById("popover_kvp").innerHTML = html.join("\n");
+      });
+  });
+
 
   window.onpopstate = (event) => {
     console.log(`onpopstate location: ${document.location}, state: ${JSON.stringify(event.state)}`)

From 07f69d3aefdec226e655ee8df13500aad96da23f Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Fri, 1 Nov 2024 15:55:51 +0000
Subject: [PATCH 04/15] CSS fixes to popup

---
 idr_gallery/templates/idr_gallery/search.html | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/idr_gallery/templates/idr_gallery/search.html b/idr_gallery/templates/idr_gallery/search.html
index 61835637..b9834ccc 100644
--- a/idr_gallery/templates/idr_gallery/search.html
+++ b/idr_gallery/templates/idr_gallery/search.html
@@ -78,12 +78,14 @@
   #kvp_popover {
     margin: auto;
     position: fixed;
-    margin-right: 5px;
-    margin-bottom: 5px;
-    width: 512px;
-    height: 75%;
+    margin-right: 15px;
+    margin-bottom: 15px;
+    width: 400px;
+    height: 65%;
     overflow: auto;
     box-shadow: 5px 4px 10px -5px #737373;
+    border: solid 1px black;
+    border-radius: 10px;
   }
   #kvp_popover_content {
     color: hsl(210, 10%, 30%);
@@ -133,8 +135,9 @@
     padding: 2px;
     background-color: hsl(220,20%,95%);
     width: 50%;
-    max-width: 50%;
+    max-width: 100px;
     overflow-wrap: break-word;
+    overflow: hidden;
   }
   .map_ann {
     padding: 5px;
@@ -321,7 +324,7 @@ <h2 id="popover_imagename">Image Name</h2>
         // Update html...
         console.log("anns", anns);
         let html = anns.map(ann => {
-          return `<div class="row">
+          return `
             <div class="map_ann">
               <table>
                 ${ann.values.map(v => {
@@ -330,6 +333,7 @@ <h2 id="popover_imagename">Image Name</h2>
                     <td>${v[1]}</td>
                   </tr>`
                 }).join("")}
+              </table>
             </div>`
         });
 

From 40924567e83104d2a5d26754686465e39d00e766 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Fri, 1 Nov 2024 17:21:34 +0000
Subject: [PATCH 05/15] Use mapr-config to add headings to KVPs

---
 idr_gallery/templates/idr_gallery/search.html | 33 +++++++++++++++++--
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/idr_gallery/templates/idr_gallery/search.html b/idr_gallery/templates/idr_gallery/search.html
index b9834ccc..cbf64629 100644
--- a/idr_gallery/templates/idr_gallery/search.html
+++ b/idr_gallery/templates/idr_gallery/search.html
@@ -102,6 +102,10 @@
     flex: auto 0 0;
     margin: 10px;
   }
+  #kvp_popover_content th h2 {
+    font-size: 15px;
+    margin: 0;
+  }
   #kvp_popover_content a {
     font-weight: normal;
     display: inline-block;
@@ -127,11 +131,11 @@
       width: 100%;
     }
   }
-  .map_ann tr {
+  .map_ann tbody tr {
     background: hsl(220,20%,95%);
     border: solid #ddd 1px;
   }
-  .map_ann td {
+  .map_ann td, .map_ann th {
     padding: 2px;
     background-color: hsl(220,20%,95%);
     width: 50%;
@@ -143,6 +147,9 @@
     padding: 5px;
     margin: 5px;
   }
+  .map_ann table {
+    margin: 0;
+  }
 </style>
 
 <link rel="stylesheet" href="{% static 'idr_gallery/css/search_form_styles.css' %}?_={{VERSION}}" />
@@ -289,7 +296,7 @@ <h2 id="popover_imagename">Image Name</h2>
         <a target="_blank" href="${BASE_URL}webclient/img_detail/${image_id}">
           Open Image in Viewer<i class="fas fa-eye"></i></a></div>`
     document.getElementById("popover_links").innerHTML = linkshtml;
-    
+
     let url = `https://idr.openmicroscopy.org/webclient/api/annotations/?type=map&image=${image_id}`;
     fetch(url)
       .then(response => response.json())
@@ -321,18 +328,32 @@ <h2 id="popover_imagename">Image Name</h2>
         // Populate experimenters within anns
         var anns = data.annotations.map(populate_experimenter);
 
+        // Replace namespace with label
+        var ns2menu = {};
+        Object.entries(MAPR_CONFIG).forEach(([key, obj]) => {
+          ns2menu[obj.ns] = obj.label;
+        });
+        console.log("ns2menu", ns2menu);
+
         // Update html...
         console.log("anns", anns);
         let html = anns.map(ann => {
           return `
             <div class="map_ann">
               <table>
+                <thead>
+                <tr title="${ann.ns}">
+                  <th colspan="2"><h2>${ns2menu[ann.ns] || ann.ns}</h2></th>
+                </tr>
+                </thead>
+                <tbody>
                 ${ann.values.map(v => {
                   return `<tr>
                     <td>${v[0]}</td>
                     <td>${v[1]}</td>
                   </tr>`
                 }).join("")}
+                </tbody>
               </table>
             </div>`
         });
@@ -341,6 +362,12 @@ <h2 id="popover_imagename">Image Name</h2>
       });
   });
 
+  // load mapr config at the start...
+  window.MAPR_CONFIG = {};
+  let maprConigUrl = `https://idr.openmicroscopy.org/mapr/api/config/`;
+  fetch(maprConigUrl).then(response => response.json())
+  .then(data => {window.MAPR_CONFIG = data;});
+
 
   window.onpopstate = (event) => {
     console.log(`onpopstate location: ${document.location}, state: ${JSON.stringify(event.state)}`)

From e627b630b017b443a28e766306c566a8b315d675 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Fri, 1 Nov 2024 22:26:14 +0000
Subject: [PATCH 06/15] css tweaks and tidy

---
 idr_gallery/templates/idr_gallery/search.html | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/idr_gallery/templates/idr_gallery/search.html b/idr_gallery/templates/idr_gallery/search.html
index cbf64629..e2c414d7 100644
--- a/idr_gallery/templates/idr_gallery/search.html
+++ b/idr_gallery/templates/idr_gallery/search.html
@@ -284,7 +284,7 @@ <h2 id="popover_imagename">Image Name</h2>
 
   $(".resultsList").on("click", "a.thumblink", function(event){
     event.preventDefault();
-    document.getElementById("popover_kvp").innerHTML = "Loading Attributes...";
+    document.getElementById("popover_kvp").innerHTML = `<div style='padding:10px'>Loading Attributes...</div>`;
     document.getElementById("kvp_popover").showPopover();
 
     let image_id = event.target.dataset.image_id;
@@ -300,9 +300,7 @@ <h2 id="popover_imagename">Image Name</h2>
     let url = `https://idr.openmicroscopy.org/webclient/api/annotations/?type=map&image=${image_id}`;
     fetch(url)
       .then(response => response.json())
-      .then(data => {
-        console.log("annotations", data);
-        
+      .then(data => {        
         var experimenters = [];
         if (data.experimenters.length > 0) {
             // manipulate data...
@@ -333,10 +331,8 @@ <h2 id="popover_imagename">Image Name</h2>
         Object.entries(MAPR_CONFIG).forEach(([key, obj]) => {
           ns2menu[obj.ns] = obj.label;
         });
-        console.log("ns2menu", ns2menu);
 
         // Update html...
-        console.log("anns", anns);
         let html = anns.map(ann => {
           return `
             <div class="map_ann">

From c1d3cdc16fd56997d0c5778f811e505043259770 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Fri, 1 Nov 2024 22:45:55 +0000
Subject: [PATCH 07/15] Use BASE_URL on new urls

---
 idr_gallery/templates/idr_gallery/search.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/idr_gallery/templates/idr_gallery/search.html b/idr_gallery/templates/idr_gallery/search.html
index e2c414d7..ed3285c1 100644
--- a/idr_gallery/templates/idr_gallery/search.html
+++ b/idr_gallery/templates/idr_gallery/search.html
@@ -297,7 +297,7 @@ <h2 id="popover_imagename">Image Name</h2>
           Open Image in Viewer<i class="fas fa-eye"></i></a></div>`
     document.getElementById("popover_links").innerHTML = linkshtml;
 
-    let url = `https://idr.openmicroscopy.org/webclient/api/annotations/?type=map&image=${image_id}`;
+    let url = `${BASE_URL}webclient/api/annotations/?type=map&image=${image_id}`;
     fetch(url)
       .then(response => response.json())
       .then(data => {        
@@ -360,7 +360,7 @@ <h2 id="popover_imagename">Image Name</h2>
 
   // load mapr config at the start...
   window.MAPR_CONFIG = {};
-  let maprConigUrl = `https://idr.openmicroscopy.org/mapr/api/config/`;
+  let maprConigUrl = `${BASE_URL}mapr/api/config/`;
   fetch(maprConigUrl).then(response => response.json())
   .then(data => {window.MAPR_CONFIG = data;});
 

From 791491d96ee594274ffb1553ebf4c03df89c402b Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Thu, 14 Nov 2024 16:23:52 +0000
Subject: [PATCH 08/15] Fix text wrapping in popup KVP table

---
 idr_gallery/templates/idr_gallery/search.html | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/idr_gallery/templates/idr_gallery/search.html b/idr_gallery/templates/idr_gallery/search.html
index ed3285c1..822f082c 100644
--- a/idr_gallery/templates/idr_gallery/search.html
+++ b/idr_gallery/templates/idr_gallery/search.html
@@ -32,9 +32,6 @@
     max-height: 45px;
     max-width: 45px;
   }
-  table td {
-    white-space: nowrap;
-  }
   .filterMessage {
     font-size: 120%;
   }

From ac50a5f609a7ece451ffbd61b45b5330a8dd1b17 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Thu, 14 Nov 2024 16:32:44 +0000
Subject: [PATCH 09/15] KVPs in popup link to search results

---
 idr_gallery/templates/idr_gallery/search.html | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/idr_gallery/templates/idr_gallery/search.html b/idr_gallery/templates/idr_gallery/search.html
index 822f082c..6ea6a78a 100644
--- a/idr_gallery/templates/idr_gallery/search.html
+++ b/idr_gallery/templates/idr_gallery/search.html
@@ -105,6 +105,9 @@
   }
   #kvp_popover_content a {
     font-weight: normal;
+  }
+  #popover_links a {
+    font-weight: normal;
     display: inline-block;
     border: solid #ccc 1px;
     padding: 5px;
@@ -343,7 +346,9 @@ <h2 id="popover_imagename">Image Name</h2>
                 ${ann.values.map(v => {
                   return `<tr>
                     <td>${v[0]}</td>
-                    <td>${v[1]}</td>
+                    <td>
+                      <a href="/search/?key=${encodeURIComponent(v[0])}&value=${encodeURIComponent(v[1])}&operator=equals&resource=image">${v[1]}</a>
+                    </td>
                   </tr>`
                 }).join("")}
                 </tbody>

From b35d1d8abd50449bddf1b8463312777912752452 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Mon, 18 Nov 2024 17:45:53 +0000
Subject: [PATCH 10/15] Add favicon link to ontoloty URLs in popup KVPs

---
 idr_gallery/templates/idr_gallery/search.html | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/idr_gallery/templates/idr_gallery/search.html b/idr_gallery/templates/idr_gallery/search.html
index 6ea6a78a..3b947dad 100644
--- a/idr_gallery/templates/idr_gallery/search.html
+++ b/idr_gallery/templates/idr_gallery/search.html
@@ -150,6 +150,13 @@
   .map_ann table {
     margin: 0;
   }
+  .favion img {
+    border: 1px solid hsl(210, 8%, 65%);
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+    vertical-align: middle;
+    width: 15px;
+    height: 15px;
+  }
 </style>
 
 <link rel="stylesheet" href="{% static 'idr_gallery/css/search_form_styles.css' %}?_={{VERSION}}" />
@@ -332,6 +339,23 @@ <h2 id="popover_imagename">Image Name</h2>
           ns2menu[obj.ns] = obj.label;
         });
 
+        // Combine e.g. "Gene Identifier" and following "Gene Identifier URL" into one
+        anns = anns.map((ann, i) => {
+          ann.values = ann.values.map((kv, idx) => {
+            if (ann.values[idx + 1] && ann.values[idx + 1][0] === kv[0] + " URL") {
+              let url = ann.values[idx + 1][1];
+              // Add URL to kvp
+              kv = [...kv, url];
+            }
+            return kv;
+          });
+          ann.values = ann.values.filter((kv, idx) => {
+            // if the previous kvp have URL, skip this one
+            return !(idx > 0 && ann.values[idx - 1][2]);
+          });
+          return ann;
+        });
+
         // Update html...
         let html = anns.map(ann => {
           return `
@@ -348,6 +372,9 @@ <h2 id="popover_imagename">Image Name</h2>
                     <td>${v[0]}</td>
                     <td>
                       <a href="/search/?key=${encodeURIComponent(v[0])}&value=${encodeURIComponent(v[1])}&operator=equals&resource=image">${v[1]}</a>
+                      ${v[2] ? `<span class='favicon'><a href="${v[2]}" target="_blank">
+                        <img src="/mapr/favicon/?u=${v[2]}">
+                      </a></span>` : ""}
                     </td>
                   </tr>`
                 }).join("")}

From db4b8b33386a4752584cecc9db284db01b5d851a Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Wed, 20 Nov 2024 14:09:11 +0000
Subject: [PATCH 11/15] Add tooltip for Study link

---
 idr_gallery/static/idr_gallery/omero_search_form.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/idr_gallery/static/idr_gallery/omero_search_form.js b/idr_gallery/static/idr_gallery/omero_search_form.js
index 0a0ecd29..773862bd 100644
--- a/idr_gallery/static/idr_gallery/omero_search_form.js
+++ b/idr_gallery/static/idr_gallery/omero_search_form.js
@@ -861,7 +861,10 @@ class OmeroSearchForm {
                 <div class="studyName" title="${title}">${title}</div>
             </div>
             <div class="studyImages">
-              <div style="margin-left: 20px">Open study: <a href="${BASE_URL}webclient/?show=${objType}-${objId}" target="_blank">${studyName}</a></div>
+              <div style="margin-left: 20px">
+                Images from study: <a href="${BASE_URL}webclient/?show=${objType}-${objId}" target="_blank" title="Open Study in webclient showing ALL images">
+                  ${studyName}</a>
+              </div>
               <ul></ul>
               <div class="studyImagesSpinner">
                 ${SPINNER_SVG}

From 9cf5e69cbcbee807a74eea2dce4c8c6b3343309b Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Wed, 20 Nov 2024 14:15:58 +0000
Subject: [PATCH 12/15] Console.log search query to aid debugging etc

---
 idr_gallery/static/idr_gallery/omero_search_form.js | 1 +
 idr_gallery/templates/idr_gallery/search.html       | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/idr_gallery/static/idr_gallery/omero_search_form.js b/idr_gallery/static/idr_gallery/omero_search_form.js
index 773862bd..1566223a 100644
--- a/idr_gallery/static/idr_gallery/omero_search_form.js
+++ b/idr_gallery/static/idr_gallery/omero_search_form.js
@@ -784,6 +784,7 @@ class OmeroSearchForm {
   submitSearch() {
     console.log("Submit search...");
     let query = this.getCurrentQuery();
+    console.log(JSON.stringify(query));
     if (!this.validateQuery(query)) {
       console.log("Form not valid");
       return;
diff --git a/idr_gallery/templates/idr_gallery/search.html b/idr_gallery/templates/idr_gallery/search.html
index 3b947dad..24bcb2c2 100644
--- a/idr_gallery/templates/idr_gallery/search.html
+++ b/idr_gallery/templates/idr_gallery/search.html
@@ -371,7 +371,9 @@ <h2 id="popover_imagename">Image Name</h2>
                   return `<tr>
                     <td>${v[0]}</td>
                     <td>
-                      <a href="/search/?key=${encodeURIComponent(v[0])}&value=${encodeURIComponent(v[1])}&operator=equals&resource=image">${v[1]}</a>
+                      <a title="Search for images with ${v[0]}: ${v[1]}" href="/search/?key=${encodeURIComponent(v[0])}&value=${encodeURIComponent(v[1])}&operator=equals&resource=image">
+                        ${v[1]}
+                      </a>
                       ${v[2] ? `<span class='favicon'><a href="${v[2]}" target="_blank">
                         <img src="/mapr/favicon/?u=${v[2]}">
                       </a></span>` : ""}

From d427380f122e5dbc176b5d4ce0c705c3ec02f64c Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Wed, 20 Nov 2024 14:57:44 +0000
Subject: [PATCH 13/15] Show hover outline on thumbnails (links)

---
 idr_gallery/static/idr_gallery/css/search_form_styles.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/idr_gallery/static/idr_gallery/css/search_form_styles.css b/idr_gallery/static/idr_gallery/css/search_form_styles.css
index 55446563..c2bd0d55 100644
--- a/idr_gallery/static/idr_gallery/css/search_form_styles.css
+++ b/idr_gallery/static/idr_gallery/css/search_form_styles.css
@@ -147,6 +147,9 @@
     position: relative;
     background-color: #ddd;
   }
+  .studyThumb img:hover {
+    border: solid 1px #1976d2;
+  }
   .imgLinks {
     position: absolute;
     background: transparent;

From 5e8fc67ea36fc87e7be2917d297675f59d5bf315 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Thu, 21 Nov 2024 14:38:20 +0000
Subject: [PATCH 14/15] Increase visibility of hover border

---
 idr_gallery/static/idr_gallery/css/search_form_styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/idr_gallery/static/idr_gallery/css/search_form_styles.css b/idr_gallery/static/idr_gallery/css/search_form_styles.css
index c2bd0d55..73396cb7 100644
--- a/idr_gallery/static/idr_gallery/css/search_form_styles.css
+++ b/idr_gallery/static/idr_gallery/css/search_form_styles.css
@@ -148,7 +148,7 @@
     background-color: #ddd;
   }
   .studyThumb img:hover {
-    border: solid 1px #1976d2;
+    border: solid 4px #64a3e1;
   }
   .imgLinks {
     position: absolute;

From 2e5ecebdc6fa2f71edbb707105ff4c5c5e35729e Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Thu, 21 Nov 2024 14:59:43 +0000
Subject: [PATCH 15/15] Show thicker border for 'selected' thumbnail

---
 idr_gallery/static/idr_gallery/css/search_form_styles.css | 5 ++++-
 idr_gallery/templates/idr_gallery/search.html             | 3 +++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/idr_gallery/static/idr_gallery/css/search_form_styles.css b/idr_gallery/static/idr_gallery/css/search_form_styles.css
index 73396cb7..ddf99816 100644
--- a/idr_gallery/static/idr_gallery/css/search_form_styles.css
+++ b/idr_gallery/static/idr_gallery/css/search_form_styles.css
@@ -148,7 +148,10 @@
     background-color: #ddd;
   }
   .studyThumb img:hover {
-    border: solid 4px #64a3e1;
+    border: solid 3px #64a3e1;
+  }
+  .studyThumb .selected img {
+    border: solid 5px #64a3e1;
   }
   .imgLinks {
     position: absolute;
diff --git a/idr_gallery/templates/idr_gallery/search.html b/idr_gallery/templates/idr_gallery/search.html
index 24bcb2c2..8c4d86e0 100644
--- a/idr_gallery/templates/idr_gallery/search.html
+++ b/idr_gallery/templates/idr_gallery/search.html
@@ -293,6 +293,9 @@ <h2 id="popover_imagename">Image Name</h2>
     event.preventDefault();
     document.getElementById("popover_kvp").innerHTML = `<div style='padding:10px'>Loading Attributes...</div>`;
     document.getElementById("kvp_popover").showPopover();
+    let $thumb = $(event.target);
+    $(".studyThumb a").removeClass("selected");
+    $thumb.parents(".studyThumb").find("a").addClass("selected");
 
     let image_id = event.target.dataset.image_id;
     let image_name = event.target.dataset.image_name;