Some slides fail to display (cannot read offset of undefined)

[vadzimvashchanka]

Hi guys. There are some slides with dtype Uint16 which cause that error in the app:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'offset') at blockedsource.js:271:1 at Array.map (<anonymous>) at BlockedSource.readSliceData (blockedsource.js:259:1) at BlockedSource._callee$ (blockedsource.js:159:1) at tryCatch (regeneratorRuntime.js:44:1) at Generator.<anonymous> (regeneratorRuntime.js:125:1) at Generator.next (regeneratorRuntime.js:69:1) at asyncGeneratorStep (asyncToGenerator.js:3:1) at _next (asyncToGenerator.js:22:1)

It comes from here:

The function in viv app which triggers error is this one (getRaster):

export async function getSingleSelectionStats2D({ loader, selection }) {
  const data = Array.isArray(loader) ? loader[loader.length - 1] : loader;
  const raster = await data.getRaster({ selection });
  const selectionStats = getChannelStats(raster.data);
  const { domain, contrastLimits } = selectionStats;
  // Edge case: if the contrast limits are the same, set them to the domain.
  if (contrastLimits[0] === contrastLimits[1]) {
    contrastLimits[0] = domain[0];
    contrastLimits[1] = domain[1];
  }
  return { domain, contrastLimits };
}

I didn't notice anything suspicious in slides metadata if to compare to those slides which are displayed without issues, probably just their size is bigger.

Is there a way to debug it somehow? At least to define is the issue related to the slide/metadata, viewer etc?

[ilan-gold]

@vadzimvashchanka If you can share your data, I can have a look. Can you open your image with another viewer to be sure it isn't a problem with you file?

[vadzimvashchanka]

Hey @ilan-gold ! Here is the file: https://drive.google.com/file/d/14CPWhUZNgwlnuxjwIWxowRO5mJZDjmF6/view?usp=drive_link
I'm able to view it if I download it and select from local files, but when it's fetched from a private Google Storage (using "?image_url=" or specifying the url directly in the code) it has an error mentioned above

[cmmille]

Following this issue since we're having the same problem!

We're serving our images over http-server on a VM local to the organization's network. Some images load just fine over http requests but others spit out the error described above:

index-3ccba696.js:2091 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'offset')
    at index-3ccba696.js:2091:8052
    at Array.map (<anonymous>)
    at atA.readSliceData (index-3ccba696.js:2091:7802)
    at atA.fetch (index-3ccba696.js:2091:6836)
    at async mc.getSlice (index-3ccba696.js:2091:18300)
    at async mc.parseFileDirectoryAt (index-3ccba696.js:2091:18957)
    at async mc.getImage (index-3ccba696.js:2091:19657)
    at async index-3ccba696.js:2093:112098
    at async qm.getRaster (index-3ccba696.js:2093:111096)
    at async dlA (index-3ccba696.js:3906:12353)

If you download the image locally and drag and drop it into the Avivator client then the image loads up just fine. But serving that file over any form of http server (have tried both express.js and http-server) results in the error.

Apologies, can't share a link to a "broken" image due to company policy.

Interestingly, before erroring it does log the images metadata:

{
    "ID": "Image:0",
    "AquisitionDate": "",
    "Description": "",
    "Pixels": {
        "Channels": [
            {
                "ID": "Channel:0",
                "SamplesPerPixel": 1,
                "Name": "DAPI",
                "Color": [
                    0,
                    189,
                    255,
                    255
                ]
            },
            {
                "ID": "Channel:1",
                "SamplesPerPixel": 1,
                "Name": "Cy5",
                "Color": [
                    254,
                    225,
                    0,
                    255
                ]
            },
            {
                "ID": "Channel:2",
                "SamplesPerPixel": 1,
                "Name": "TRITC",
                "Color": [
                    0,
                    255,
                    0,
                    255
                ]
            },
            {
                "ID": "Channel:3",
                "SamplesPerPixel": 1,
                "Name": "ICOS - Cy5",
                "Color": [
                    255,
                    0,
                    255,
                    255
                ]
            },
            {
                "ID": "Channel:4",
                "SamplesPerPixel": 1,
                "Name": "Transgelin - TRITC",
                "Color": [
                    0,
                    255,
                    225,
                    255
                ]
            },
            {
                "ID": "Channel:5",
                "SamplesPerPixel": 1,
                "Name": "T-bet - Cy5",
                "Color": [
                    255,
                    13,
                    0,
                    255
                ]
            },
            {
                "ID": "Channel:6",
                "SamplesPerPixel": 1,
                "Name": "CD163 - TRITC",
                "Color": [
                    0,
                    201,
                    255,
                    255
                ]
            },
            {
                "ID": "Channel:7",
                "SamplesPerPixel": 1,
                "Name": "CD4 - Cy5",
                "Color": [
                    255,
                    183,
                    0,
                    255
                ]
            },
            {
                "ID": "Channel:8",
                "SamplesPerPixel": 1,
                "Name": "HLA-ABC_1:2000 - TRITC",
                "Color": [
                    73,
                    254,
                    0,
                    255
                ]
            },
            {
                "ID": "Channel:9",
                "SamplesPerPixel": 1,
                "Name": "CD3_1:1000 - Cy5",
                "Color": [
                    184,
                    0,
                    255,
                    255
                ]
            },
            {
                "ID": "Channel:10",
                "SamplesPerPixel": 1,
                "Name": "CK_1:150 - TRITC",
                "Color": [
                    0,
                    255,
                    183,
                    255
                ]
            },
            {
                "ID": "Channel:11",
                "SamplesPerPixel": 1,
                "Name": "PD-1_1:200 - Cy5",
                "Color": [
                    255,
                    55,
                    0,
                    255
                ]
            },
            {
                "ID": "Channel:12",
                "SamplesPerPixel": 1,
                "Name": "CD20 - TRITC",
                "Color": [
                    2,
                    175,
                    255,
                    255
                ]
            },
            {
                "ID": "Channel:13",
                "SamplesPerPixel": 1,
                "Name": "PD-L1_1:150 - Cy5",
                "Color": [
                    255,
                    140,
                    0,
                    255
                ]
            },
            {
                "ID": "Channel:14",
                "SamplesPerPixel": 1,
                "Name": "CD8 - TRITC",
                "Color": [
                    115,
                    255,
                    0,
                    255
                ]
            },
            {
                "ID": "Channel:15",
                "SamplesPerPixel": 1,
                "Name": "CD103_1:800 - Cy5",
                "Color": [
                    140,
                    0,
                    255,
                    255
                ]
            },
            {
                "ID": "Channel:16",
                "SamplesPerPixel": 1,
                "Name": "Trem2_1:200 - Cy5",
                "Color": [
                    0,
                    255,
                    139,
                    255
                ]
            },
            {
                "ID": "Channel:17",
                "SamplesPerPixel": 1,
                "Name": "LAG-3_1:500 - TRITC",
                "Color": [
                    255,
                    98,
                    0,
                    255
                ]
            },
            {
                "ID": "Channel:18",
                "SamplesPerPixel": 1,
                "Name": "CD14 - Cy5",
                "Color": [
                    0,
                    116,
                    255,
                    255
                ]
            },
            {
                "ID": "Channel:19",
                "SamplesPerPixel": 1,
                "Name": "CD68_1:100 - TRITC",
                "Color": [
                    255,
                    98,
                    0,
                    255
                ]
            },
            {
                "ID": "Channel:20",
                "SamplesPerPixel": 1,
                "Name": "CD39_Abcam1:2000 - Cy5",
                "Color": [
                    158,
                    255,
                    0,
                    255
                ]
            },
            {
                "ID": "Channel:21",
                "SamplesPerPixel": 1,
                "Name": "CD11c - Cy5",
                "Color": [
                    97,
                    0,
                    255,
                    255
                ]
            },
            {
                "ID": "Channel:22",
                "SamplesPerPixel": 1,
                "Name": "FoxP3 - Cy5",
                "Color": [
                    0,
                    255,
                    97,
                    255
                ]
            },
            {
                "ID": "Channel:23",
                "SamplesPerPixel": 1,
                "Name": "Ki67_1:150 - TRITC",
                "Color": [
                    255,
                    140,
                    0,
                    255
                ]
            },
            {
                "ID": "Channel:24",
                "SamplesPerPixel": 1,
                "Name": "Granzyme-B - Cy5",
                "Color": [
                    0,
                    72,
                    255,
                    255
                ]
            },
            {
                "ID": "Channel:25",
                "SamplesPerPixel": 1,
                "Name": "HLA-DR - TRITC",
                "Color": [
                    255,
                    55,
                    0,
                    255
                ]
            },
            {
                "ID": "Channel:26",
                "SamplesPerPixel": 1,
                "Name": "CD34 - Cy5",
                "Color": [
                    200,
                    255,
                    0,
                    255
                ]
            },
            {
                "ID": "Channel:27",
                "SamplesPerPixel": 1,
                "Name": "CD66b-B - Cy5",
                "Color": [
                    56,
                    0,
                    255,
                    255
                ]
            }
        ],
        "ID": "Pixels:0",
        "DimensionOrder": "XYCZT",
        "Type": "uint8",
        "SizeT": 1,
        "SizeC": 28,
        "SizeZ": 1,
        "SizeY": 39676,
        "SizeX": 39558,
        "PhysicalSizeX": 0.23,
        "PhysicalSizeY": 0.23,
        "PhysicalSizeXUnit": "µm",
        "PhysicalSizeYUnit": "µm",
        "PhysicalSizeZUnit": "µm"
    }
}

[ilan-gold]

This appears to be an issue with our upstream tiff-reading library, which will be difficult to fix. I will report it there. To reproduce (in node):

const { fromUrl } = await import("geotiff");
const tiff = await fromUrl('http://127.0.0.1:8080/1.ome.tiff');
await tiff.getImage(2)