Updates to ImageBox3 and GeoTIFFTileSource

episphere · Feb 25, 2024 · dc9f5d2 · dc9f5d2
1 parent a31e4ea
commit dc9f5d2
Show file tree

Hide file tree

Showing 10 changed files with 169 additions and 96 deletions.
diff --git a/index.html b/index.html
@@ -288,5 +288,5 @@ <h5 class="modal-title">Create Dataset</h5>
 <!-- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.7.0/dist/tf.min.js"></script> -->
 <!-- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-automl@1.0.0/dist/tf-automl.min.js"></script> -->
 <script src="https://cdn.jsdelivr.net/npm/openseadragon@latest/build/openseadragon/openseadragon.js" defer></script>
-<script src="https://cdn.jsdelivr.net/gh/episphere/GeoTIFFTileSource-JPEG2k@latest/GeoTIFFTileSource.js" crossorigin="anonymous" type="module" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/episphere/GeoTIFFTileSource-JPEG2k@ed333822e17a52dbaf151312ec29c29b5b1d4da5/GeoTIFFTileSource.js" crossorigin="anonymous" type="module" defer></script>
 </html>
diff --git a/path.css b/path.css
@@ -200,6 +200,12 @@ canvas {
   bottom: 0;
 }
 
+#moreFilesLoaderImg {
+  position: relative;
+  width: 50px;
+  height: 50px;
+}
+
 #imgHeader {
   height: 6%;
 }
@@ -978,12 +984,14 @@ canvas {
 
 .wsiProcessing {
   outline: 1px dashed rgba(65, 105, 225, 0.6);
+  pointer-events: none;
 }
 
 .tileProcessing {
   outline: 1px dotted lightseagreen;
   background-color: rgba(240, 240, 240, 0.2);
   transition: background .5s linear;
+  pointer-events: none;
 }
 
 .tileProcessing.transition {

diff --git a/scripts/annotations.js b/scripts/annotations.js
@@ -294,9 +294,11 @@ annotations.populateAnnotationCard = async (annotationCardContentDiv, annotation
           userAnnotations.forEach(({rectBounds, label, createdAt, comment}, ind) => {
             label = label || `${displayName} ${labels[0].displayText}`
             const annotationElement = annotations.createWSIAnnotationElement(annotationId, metaName, { label, createdAt, comment, ...rectBounds }, {modelAnnotation: false, addToParent: false})
-            tempDocumentFragment.appendChild(annotationElement)
-            if (ind !== userAnnotations.length - 1) {
-              tempDocumentFragment.appendChild(document.createElement("hr"))
+            if (annotationElement) {
+              tempDocumentFragment.appendChild(annotationElement)
+              if (ind !== userAnnotations.length - 1) {
+                tempDocumentFragment.appendChild(document.createElement("hr"))
+              }
             }
           })
           annotationsContainerElement.appendChild(tempDocumentFragment)
@@ -418,6 +420,9 @@ annotations.createWSIAnnotationElement = (annotationId, metaName, annotationData
   const { modelAnnotation=false, addToParent=false } = options
   let annotationElement
   let { x, y, width, height } = annotationData
+  if (!path.wsiViewer?.world?.getItemAt(0)) {
+    return
+  }
   if (modelAnnotation) {
     const { selectedLabels=wsi.defaultSelectedLabels, requestedTileSize=wsi.defaultTileSize, scoreThreshold=annotations.predictionScoreThreshold  } = options
     const { predictedLabel, predictionScore, modelId, userFeedback } = annotationData

diff --git a/scripts/datasetTab.js b/scripts/datasetTab.js
@@ -14,7 +14,8 @@ dataset.loadModels = (modelsConfig=[]) => {
 
   Object.values(selectedModelPerAnnotation).forEach(modelConfig => {
     dataset.predictionWorkers[modelConfig.correspondingAnnotation] = new Worker(`${basePath}scripts/modelPrediction.js`, {
-      name: path.datasetConfig.annotations.find(annot => annot.annotationId === modelConfig.correspondingAnnotation).annotationName
+      name: path.datasetConfig.annotations.find(annot => annot.annotationId === modelConfig.correspondingAnnotation).annotationName,
+      type: 'module'
     })
     dataset.predictionWorkers[modelConfig.correspondingAnnotation].onmessage = (e) => {
       const {op, ...dataFromWorker} = e.data

diff --git a/scripts/miscProcessing.js b/scripts/miscProcessing.js
@@ -1,4 +1,4 @@
-importScripts("https://episphere.github.io/imagebox3/imagebox3.js")
+import Imagebox3 from "https://cdn.jsdelivr.net/gh/episphere/imagebox3/imagebox3.mjs"
 
 const epiPathBasePath = "https://episphere.github.io/path"
 const tileServerPathSuffix = "iiif"
@@ -8,6 +8,8 @@ const tileServerBasePath = `https://imageboxv2-oxxe7c4jbq-uc.a.run.app/${tileSer
 const wsiFileTypes = [".svs", ".ndpi"]
 const validFileTypes = [".jpg", ".jpeg", ".png", ".tiff", ...wsiFileTypes]
 
+let imagebox3Instance = {}
+
 const indexedDBConfig = {
   dbName: "boxCreds",
   objectStoreName: "oauth"
@@ -175,21 +177,29 @@ const handleTIFFConversion = async (op, imageId, jpegRepresentationsFolderId, na
 const getWSIInfo = async (url, imgbox3=false) => {
   let imageInfo = {}
   if (imgbox3) {
-    imageInfo = await imagebox3.getImageInfo(url)
+    if (!imagebox3Instance[url]) {
+      imagebox3Instance[url] = new Imagebox3(url, 0)
+      await imagebox3Instance[url].init()
+    }
+    imageInfo = await imagebox3Instance[url].getInfo()
   } else {
     const infoURL = `${tileServerBasePath}?iiif=${url}/info.json`
     imageInfo =  await fetch(infoURL)
   }
-  return imageInfo.json()
+  return await imageInfo.json()
 }
 
 const getWSIThumbnail = async (url, width, height, imgbox3=false) => {
   let thumbnailImage = {}
   if (imgbox3) {
-    const tileParams = {
-      thumbnailWidthToRender: 256
-    };
-    thumbnailImage = await imagebox3.getImageThumbnail(url, tileParams)
+    const thumbnailWidthToRender = 256
+
+    if (!imagebox3Instance[url]) {
+      imagebox3Instance[url] = new Imagebox3(url, 0)
+      await imagebox3Instance[url].init()
+    }
+
+    thumbnailImage = await imagebox3Instance[url].getThumbnail(thumbnailWidthToRender)
   } else {
     const thumbnailURL = `${tileServerBasePath}?iiif=${url}/0,0,${width},${height}/256,/0/default.jpg`
     thumbnailImage = await fetch(thumbnailURL)
@@ -426,7 +436,7 @@ onmessage = async (evt) => {
   }
 }
 
-main = async () => {
+const main = async () => {
   workerDB = await fetchIndexedDBInstance()
 }