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..ddf99816 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,12 @@
position: relative;
background-color: #ddd;
}
+ .studyThumb img:hover {
+ border: solid 3px #64a3e1;
+ }
+ .studyThumb .selected img {
+ border: solid 5px #64a3e1;
+ }
.imgLinks {
position: absolute;
background: transparent;
diff --git a/idr_gallery/static/idr_gallery/omero_search_form.js b/idr_gallery/static/idr_gallery/omero_search_form.js
index 17001593..1566223a 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);
@@ -783,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;
@@ -855,12 +857,15 @@ class OmeroSearchForm {
return `
-
+
${studyId}
${count}
${title}
+
${SPINNER_SVG}
@@ -938,8 +943,8 @@ class OmeroSearchForm {
.map((img) => {
// Each thumbnail links to image viewer. Hover menu links to viewer (eye) and webclient (i)
return `
-
-
+
+
diff --git a/idr_gallery/templates/idr_gallery/search.html b/idr_gallery/templates/idr_gallery/search.html
index 4c327d58..8c4d86e0 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%;
}
@@ -58,6 +55,108 @@
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: 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%);
+ 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 th h2 {
+ font-size: 15px;
+ margin: 0;
+ }
+ #kvp_popover_content a {
+ font-weight: normal;
+ }
+ #popover_links 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 tbody tr {
+ background: hsl(220,20%,95%);
+ border: solid #ddd 1px;
+ }
+ .map_ann td, .map_ann th {
+ padding: 2px;
+ background-color: hsl(220,20%,95%);
+ width: 50%;
+ max-width: 100px;
+ overflow-wrap: break-word;
+ overflow: hidden;
+ }
+ .map_ann {
+ padding: 5px;
+ margin: 5px;
+ }
+ .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;
+ }
@@ -105,6 +204,15 @@
+
+