Add Zarr info on homepage and show Zarr studies at the top

idr_gallery/static/idr_gallery/categories.js

@@ -115,19 +115,23 @@ function render() {
   let idrIds = [];
 
   let html = "";
+  let zarrHtml = "";
   if (!groupByType) {
-    // Show all studies...
-    html = model.studies
-      .map((study) => {
-        let idrId = study.Name.split("-")[0];
-        // Ignore multiple projects/screens from same study/publication
-        if (idrIds.includes(idrId)) {
-          return "";
-        }
-        idrIds.push(idrId);
-        return studyHtml(study, studyContainers[idrId]);
-      })
-      .join("");
+    // Show all studies... with 'zarr' stuides in a different section at the top
+    zarrHtml = `<div style="color:#666; margin-bottom: 5px">OME-Zarr studies</div>`;
+    model.studies.forEach((study) => {
+      let idrId = study.Name.split("-")[0];
+      // Ignore multiple projects/screens from same study/publication
+      if (idrIds.includes(idrId)) {
+        return "";
+      }
+      idrIds.push(idrId);
+      if (study.zarr) {
+        zarrHtml += studyHtml(study, studyContainers[idrId]);
+      } else {
+        html += studyHtml(study, studyContainers[idrId]);
+      } 
+    });
   } else {
     // group by Categories
     let categories = Object.keys(CATEGORY_QUERIES);
@@ -179,6 +183,7 @@ function render() {
   }
 
   document.getElementById("studies").innerHTML = html;
+  document.getElementById("zarrStudies").innerHTML = zarrHtml;
 
   // tooltips - NB: updated when thumbnails loaded
   tippy(".studyThumb", {

idr_gallery/static/idr_gallery/model.js

@@ -302,6 +302,9 @@ class StudiesModel {
     // Load Map Annotations
     await this.loadStudiesMapAnnotations();
 
+    // Load OME-NGFF tag and add 'zarr' attribute to studies with this tag
+    await this.loadZarrTag();
+
     // Generate StudyDescription (removes 'Publication Title' etc from project.Description)
     this.studies.forEach((study) => {
       study["StudyTitle"] = this.getStudyTitle(study);
@@ -332,6 +335,34 @@ class StudiesModel {
     }
   }
 
+  async loadZarrTag() {
+    // Load OME-NGFF tag and add 'zarr' attribute to studies with this tag.
+    // First load all tags to find the "OME-NGFF" tag and its ID
+    let url = this.base_url + "webclient/api/tags/?orphaned=true&experimenter_id=-1&page=0";
+    let tagJson = await fetch(url).then((response) => response.json());
+    console.log("Found tags", tagJson);
+    let ngffTag = tagJson["tags"].find((tag) => tag.value.includes("OME-NGFF"));
+    if (!ngffTag) {
+      console.warn("No OME-NGFF tag found");
+      return;
+    }
+    let ngffTagId = ngffTag.id;
+    url = this.base_url + `webclient/api/tags/?id=${ngffTagId}`;
+    let zarrStudies = await fetch(url).then((response) => response.json());
+    let zarrStudyIds = new Set();  // set of 'screen-123' or 'project-456' that have the OME-NGFF tag
+    zarrStudies.screens.forEach((screen) => zarrStudyIds.add(`screen-${screen.id}`));
+    zarrStudies.projects.forEach((project) => zarrStudyIds.add(`project-${project.id}`));
+    console.log("zarrStudyIds", zarrStudyIds);
+    // add "zarr" attribute to studies with this tag...
+    this.studies = this.studies.map((study) => {
+      if (zarrStudyIds.has(study.objId)) {
+        console.log("Study with OME-NGFF tag:", study.objId);
+        study.zarr = true;
+      }
+      return study;
+    });
+  }
+
   async loadStudiesMapAnnotations() {
     let url = this.base_url + "webclient/api/annotations/?type=map";
     let data = this.studies

idr_gallery/templates/idr_gallery/image.html

@@ -16,6 +16,9 @@
     box-shadow: 0 2px 5px rgba(0,0,0,0.1);
     border: solid 1px lightgrey;
   }
+  .download_list li {
+    word-break: break-word;
+  }
   a.file_download {
     color: #03A9F4;
     text-decoration: none;

idr_gallery/templates/idr_gallery/index.html

@@ -464,7 +464,20 @@ <h2 class="hero-subheader small-10 medium-10 large-10 small-offset-1 medium-offs
 <div class="row horizontal" style="position: relative">
   <div class="small-12 medium-12 large-12 columns">
     <div class="panel" style="float: left">
-      <form>
+      <div id="zarrInfo" style="margin-bottom: 10px; color: #333">
+        <h3 style="color: white; padding: 15px; background: red;">Moving to OME-Zarr</h3>
+        <p>
+          The IDR is transitioning to the <a href="https://ngff.openmicroscopy.org/" target="_blank">OME-Zarr</a>
+          format for improved data accessibility and performance. Images in other formats can no longer be fully
+          viewed from our image viewer, but thumbnails are available.
+          We are working to convert all studies to OME-Zarr, and in the meantime non-Zarr images can be download for local viewing.
+          All new studies must be submitted in OME-Zarr format.
+        </p>
+      </div>
+      <div id="zarrStudies" style="margin-bottom: 15px">
+      </div>
+      <div style="clear:both; padding: 7px"></div>
+      <form style="clear:both">
         <label class="switchLabel">Group Studies by type</label>
         <label class="switch" style="margin-right: 20px">
           <input id="groupByType" type="checkbox">