feat: monitor bulk ann downloads

src/annotation.js

@@ -1,5 +1,5 @@
 import dcmjs from 'dcmjs'
-import { _fetchBulkdata } from './utils.js'
+import { _fetchBulkdata, throttle } from './utils.js'
 
 const _attrs = Symbol('attrs')
 
@@ -235,17 +235,25 @@ async function _fetchGraphicData ({
         `Could not find bulkdata of annotation group "${uid}".`
       )
     } else {
+      const progressCallback = (progressEvent) => {
+        console.info(`Loaded ${Math.round(progressEvent.loaded / 1024 / 1024 * 100) / 100} MB from annotation group "${uid}"`)
+      }
+      const options = {
+        progressCallback: throttle(progressCallback, 1000),
+      }
       if ('PointCoordinatesData' in bulkdataItem) {
         console.info(`fetch point coordinate data of annotation group "${uid}"`)
         return await _fetchBulkdata({
           client,
-          reference: bulkdataItem.PointCoordinatesData
+          reference: bulkdataItem.PointCoordinatesData,
+          options,
         })
       } else if ('DoublePointCoordinatesData' in bulkdataItem) {
         console.info(`fetch point coordinate data of annotation group "${uid}"`)
         return await _fetchBulkdata({
           client,
-          reference: bulkdataItem.DoublePointCoordinatesData
+          reference: bulkdataItem.DoublePointCoordinatesData,
+          options
         })
       } else {
         /** Attempt to retrieve it from P10 */

src/utils.js

@@ -600,8 +600,8 @@ const doContentItemsMatch = (contentItem1, contentItem2) => {
  *
  * @private
  */
-async function _fetchBulkdata ({ client, reference }) {
-  const retrieveOptions = { BulkDataURI: reference.BulkDataURI }
+async function _fetchBulkdata ({ client, reference, options }) {
+  const retrieveOptions = { BulkDataURI: reference.BulkDataURI, ...options }
   return await client.retrieveBulkData(retrieveOptions).then(data => {
     const byteArray = new Uint8Array(data[0])
     if (reference.vr === 'OB') {
@@ -661,6 +661,20 @@ function rgb2hex (values) {
   return '#' + (0x1000000 + (r << 16) + (g << 8) + b).toString(16).slice(1)
 }
 
+function throttle(mainFunction, delay) {
+  let timerFlag = null; // Variable to keep track of the timer
+
+  // Returning a throttled version
+  return (...args) => {
+    if (timerFlag === null) { // If there is no timer currently running
+      mainFunction(...args); // Execute the main function
+      timerFlag = setTimeout(() => { // Set a timer to clear the timerFlag after the specified delay
+        timerFlag = null; // Clear the timerFlag to allow the main function to be executed again
+      }, delay);
+    }
+  };
+}
+
 export {
   _getUnitSuffix,
   applyInverseTransform,
@@ -680,5 +694,6 @@ export {
   areCodedConceptsEqual,
   getContentItemNameCodedConcept,
   rgb2hex,
-  rescale
+  rescale,
+  throttle,
 }

src/viewer.js

@@ -3362,6 +3362,8 @@ class VolumeImageViewer {
        * ellipse or rectangle is counted as one Annotation.
        */
       const numberOfAnnotations = Number(metadataItem.NumberOfAnnotations)
+      console.log("AnnotationGroupUID:", metadataItem.AnnotationGroupUID, "NumberOfAnnotations:", numberOfAnnotations)
+
       /** Point, Open/Closed Polygon, Circle, Ellipse, etc. */
       const graphicType = metadataItem.GraphicType
       /** 2D or 3D dimentionality: (x, y) if value 2 and (x, y, z) if value 3. */