@aics/vole-core 3.12.4

package/es/loaders/JsonImageInfoLoader.js

@@ -0,0 +1,255 @@
+import { Box3, Vector3 } from "three";
+import { ThreadableVolumeLoader } from "./IVolumeLoader.js";
+import { computeAtlasSize } from "../ImageInfo.js";
+import { getDataRange } from "../utils/num_utils.js";
+
+/* eslint-disable @typescript-eslint/naming-convention */
+
+/* eslint-enable @typescript-eslint/naming-convention */
+
+const rescalePixelSize = json => {
+  // the pixel_size_x/y/z are the physical size of the original pixels represented by
+  // width and height.  We need to get a physical pixel size that is consistent
+  // with the tile_width and tile_height.
+  const px = json.pixel_size_x * json.width / json.tile_width;
+  const py = json.pixel_size_y * json.height / json.tile_height;
+  const pz = json.pixel_size_z;
+  return [px, py, pz];
+};
+const convertImageInfo = json => {
+  const [px, py, pz] = rescalePixelSize(json);
+  // translation is in pixels that are in the space of json.width, json.height.
+  // We need to convert this to the space of the tile_width and tile_height.
+  const tr = json.transform?.translation ?? [0, 0, 0];
+  tr[0] = tr[0] * json.tile_width / json.width;
+  tr[1] = tr[1] * json.tile_height / json.height;
+  return {
+    name: json.name,
+    atlasTileDims: [json.cols, json.rows],
+    subregionSize: [json.tile_width, json.tile_height, json.tiles],
+    subregionOffset: [0, 0, 0],
+    combinedNumChannels: json.channels,
+    channelNames: json.channel_names,
+    channelColors: json.channel_colors,
+    multiscaleLevel: 0,
+    multiscaleLevelDims: [{
+      shape: [json.times || 1, json.channels, json.tiles, json.tile_height, json.tile_width],
+      spacing: [json.time_scale || 1, 1, pz, py, px],
+      spaceUnit: json.pixel_size_unit || "μm",
+      timeUnit: json.time_unit || "s",
+      dataType: "uint8"
+    }],
+    transform: {
+      translation: tr,
+      rotation: json.transform?.rotation ? json.transform.rotation : [0, 0, 0],
+      scale: [1, 1, 1]
+    },
+    userData: {
+      ...json.userData,
+      // for metadata display reasons
+      originalVolumeSize: [json.width, json.height, json.tiles],
+      originalPhysicalPixelSize: [json.pixel_size_x, json.pixel_size_y, json.pixel_size_z]
+    }
+  };
+};
+class JsonImageInfoLoader extends ThreadableVolumeLoader {
+  syncChannels = false;
+  constructor(urls, cache) {
+    super();
+    if (Array.isArray(urls)) {
+      this.urls = urls;
+    } else {
+      this.urls = [urls];
+    }
+    this.jsonInfo = new Array(this.urls.length);
+    this.cache = cache;
+  }
+  async getJsonImageInfo(time) {
+    const cachedInfo = this.jsonInfo[time];
+    if (cachedInfo) {
+      return cachedInfo;
+    }
+    const response = await fetch(this.urls[time]);
+    const imageInfo = await response.json();
+    imageInfo.pixel_size_unit = imageInfo.pixel_size_unit || "μm";
+    imageInfo.times = imageInfo.times || this.urls.length;
+    this.jsonInfo[time] = imageInfo;
+    return imageInfo;
+  }
+  syncMultichannelLoading(sync) {
+    this.syncChannels = sync;
+  }
+  async loadDims(loadSpec) {
+    const jsonInfo = await this.getJsonImageInfo(loadSpec.time);
+    const [px, py, pz] = rescalePixelSize(jsonInfo);
+    const d = {
+      shape: [jsonInfo.times || 1, jsonInfo.channels, jsonInfo.tiles, jsonInfo.tile_height, jsonInfo.tile_width],
+      spacing: [1, 1, pz, py, px],
+      spaceUnit: jsonInfo.pixel_size_unit ?? "μm",
+      dataType: "uint8",
+      timeUnit: jsonInfo.time_unit ?? "s"
+    };
+    return [d];
+  }
+  async createImageInfo(loadSpec) {
+    const jsonInfo = await this.getJsonImageInfo(loadSpec.time);
+    return {
+      imageInfo: convertImageInfo(jsonInfo),
+      loadSpec
+    };
+  }
+  async loadRawChannelData(imageInfo, loadSpec, onUpdateMetadata, onData) {
+    // if you need to adjust image paths prior to download,
+    // now is the time to do it.
+    // Try to figure out the urlPrefix from the LoadSpec.
+    // For this format we assume the image data is in the same directory as the json file.
+    const jsonInfo = await this.getJsonImageInfo(loadSpec.time);
+    let images = jsonInfo?.images;
+    if (!images) {
+      return;
+    }
+    const requestedChannels = loadSpec.channels;
+    if (requestedChannels) {
+      // If only some channels are requested, load only images which contain at least one requested channel
+      images = images.filter(({
+        channels
+      }) => channels.some(ch => requestedChannels.includes(ch)));
+    }
+
+    // This regex removes everything after the last slash, so the url had better be simple.
+    const urlPrefix = this.urls[loadSpec.time].replace(/[^/]*$/, "");
+    images = images.map(element => ({
+      ...element,
+      name: urlPrefix + element.name
+    }));
+
+    // Update `image`'s `loadSpec` before loading
+    const adjustedLoadSpec = {
+      ...loadSpec,
+      // `subregion` and `multiscaleLevel` are unused by this loader
+      subregion: new Box3(new Vector3(0, 0, 0), new Vector3(1, 1, 1)),
+      multiscaleLevel: 0,
+      // include all channels in any loaded images
+      channels: images.flatMap(({
+        channels
+      }) => channels)
+    };
+    onUpdateMetadata(undefined, adjustedLoadSpec);
+    const [w, h] = computeAtlasSize(imageInfo);
+    const wrappedOnData = (ch, dtype, data, ranges) => onData(ch, dtype, data, ranges, [w, h]);
+    await JsonImageInfoLoader.loadVolumeAtlasData(images, wrappedOnData, this.cache, this.syncChannels);
+  }
+
+  /**
+   * load per-channel volume data from a batch of image files containing the volume slices tiled across the images
+   * @param {Array.<{name:string, channels:Array.<number>}>} imageArray
+   * @param {RawChannelDataCallback} onData Per-channel callback. Called when each channel's atlased volume data is loaded
+   * @param {VolumeCache} cache
+   * @example loadVolumeAtlasData([{
+   *     "name": "AICS-10_5_5.ome.tif_atlas_0.png",
+   *     "channels": [0, 1, 2]
+   * }, {
+   *     "name": "AICS-10_5_5.ome.tif_atlas_1.png",
+   *     "channels": [3, 4, 5]
+   * }, {
+   *     "name": "AICS-10_5_5.ome.tif_atlas_2.png",
+   *     "channels": [6, 7, 8]
+   * }], mycallback);
+   */
+  static async loadVolumeAtlasData(imageArray, onData, cache, syncChannels = false) {
+    const resultChannelIndices = [];
+    const resultChannelDtype = [];
+    const resultChannelData = [];
+    const resultChannelRanges = [];
+    const imagePromises = imageArray.map(async image => {
+      // Because the data is fetched such that one fetch returns a whole batch,
+      // if any in batch is cached then they all should be. So if any in batch is NOT cached,
+      // then we will have to do a batch request. This logic works both ways because it's all or nothing.
+      let cacheHit = true;
+      for (let j = 0; j < Math.min(image.channels.length, 4); ++j) {
+        const chindex = image.channels[j];
+        const cacheResult = cache?.get(`${image.name}/${chindex}`);
+        if (cacheResult) {
+          // all data coming from this loader is natively 8-bit
+          const channelData = new Uint8Array(cacheResult);
+          if (syncChannels) {
+            // if we are synchronizing channels, we need to keep track of the data
+            resultChannelIndices.push(chindex);
+            resultChannelDtype.push("uint8");
+            resultChannelData.push(channelData);
+            resultChannelRanges.push(getDataRange(channelData));
+          } else {
+            onData([chindex], ["uint8"], [channelData], [getDataRange(channelData)]);
+          }
+        } else {
+          cacheHit = false;
+          // we can stop checking because we know we are going to have to fetch the whole batch
+          break;
+        }
+      }
+
+      // if all channels were in cache then we can move on to the next
+      // image (batch) without requesting
+      if (cacheHit) {
+        return;
+      }
+      const response = await fetch(image.name, {
+        mode: "cors"
+      });
+      const blob = await response.blob();
+      const bitmap = await createImageBitmap(blob);
+      const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        console.log("Error creating canvas 2d context for " + image.name);
+        return;
+      }
+      ctx.globalCompositeOperation = "copy";
+      ctx.globalAlpha = 1.0;
+      ctx.drawImage(bitmap, 0, 0);
+      const iData = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
+      const channelsBits = [];
+      const length = bitmap.width * bitmap.height;
+
+      // allocate channels in batch
+      for (let ch = 0; ch < Math.min(image.channels.length, 4); ++ch) {
+        channelsBits.push(new Uint8Array(length));
+      }
+
+      // extract the data
+      const channelRange = [];
+      for (let j = 0; j < Math.min(image.channels.length, 4); ++j) {
+        let rawMin = Infinity;
+        let rawMax = -Infinity;
+        for (let px = 0; px < length; px++) {
+          channelsBits[j][px] = iData.data[px * 4 + j];
+          rawMin = Math.min(rawMin, channelsBits[j][px]);
+          rawMax = Math.max(rawMax, channelsBits[j][px]);
+        }
+        channelRange[j] = [rawMin, rawMax];
+      }
+
+      // done with `iData` and `canvas` now.
+
+      for (let ch = 0; ch < Math.min(image.channels.length, 4); ++ch) {
+        const chindex = image.channels[ch];
+        cache?.insert(`${image.name}/${chindex}`, channelsBits[ch]);
+        // NOTE: the atlas dimensions passed in here are currently unused by `JSONImageInfoLoader`
+        // all data coming from this loader is natively 8-bit
+        if (syncChannels) {
+          resultChannelIndices.push(chindex);
+          resultChannelDtype.push("uint8");
+          resultChannelData.push(channelsBits[ch]);
+          resultChannelRanges.push(channelRange[ch]);
+        } else {
+          onData([chindex], ["uint8"], [channelsBits[ch]], [channelRange[ch]], [bitmap.width, bitmap.height]);
+        }
+      }
+    });
+    await Promise.all(imagePromises);
+    if (syncChannels) {
+      onData(resultChannelIndices, resultChannelDtype, resultChannelData, resultChannelRanges);
+    }
+  }
+}
+export { JsonImageInfoLoader };