VIV and AVIVATOR

phaub · December 2, 2020, 7:24am

Hi All,
(probably @ngehlenborg)

I would like to use Viv and/or AVIVATOR to open OME-TIFF files (Hyper resolution image display).

How can I install/build/use Avivator on a local machine?

viv-master is available
Node.js 14.15.1 is installed
npm is accessible

But I can not execute commands like npm install or npm run build:avivator without errors.

Can somebody guide me to the correct steps?

joshmoore · December 1, 2020, 1:29pm

cc: @manzt and @ilan-gold

In the mean time, you might go ahead and list your build errors here, @phaub, just in case.

phaub · December 1, 2020, 1:50pm

Thanks @joshmoore

All cotent from viv-master located in C:\prog\viv.
command npm install executed in command window (with path to C:\prog\viv)

4 log files are created
3 of them contain ‘error’ messages.

Pls find all 4 files attached
_logs.zip (276.5 KB)

manzt · December 1, 2020, 2:52pm

Thanks for pinging us! This looks like a windows/unix issue for building one of the dependencies, geotiff.js. We currently use a git fork (ilan-gold/geotiff.js), so building avivator from source requires building ilan-gold/geotiff.js from source as well.

It turns out others have had issues with building geotiff.js on windows, https://github.com/geotiffjs/geotiff.js/issues/58 due to the use of rm -rf in npm run build:clean. There is a suggestion to use “Git Bash” in that issue. Would you be able to try using “Git Bash”? and then I’ll be sure to open a PR in geotiff to replace this unix call with some cross-platform npm package in the future.

Update: PR - https://github.com/geotiffjs/geotiff.js/pull/188

ilan-gold · December 1, 2020, 2:53pm

Hi @phaub I just wanted to add that if you are trying to “open OMETIFF files” locally, you can drag-and-drop them into avivator.gehlenborglab.org without any servers or the like. Of course if they are too large, you may need to make an image pyramid, but bioformats2raw and raw2ometiff can help with that (see our docs for more info).

phaub · December 1, 2020, 4:22pm

@manzt
I opened Git Bash at C:\prog\viv
and used the command npm install

The output in the bash window:

USER701@User701PC MINGW64 /c/Prog/viv
$ npm install
npm ERR! prepareGitDep 1>
npm ERR! prepareGitDep > deasync@0.1.20 install C:\Users\USER701\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-e254ec83\node_modules\deasync
npm ERR! prepareGitDep > node ./build.js
npm ERR! prepareGitDep
npm ERR! prepareGitDep `win32-x64-node-14` exists; testing
npm ERR! prepareGitDep Binary is fine; exiting
npm ERR! prepareGitDep
npm ERR! prepareGitDep > core-js@2.6.11 postinstall C:\Users\USER701\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-e254ec83\node_modules\core-js
npm ERR! prepareGitDep > node -e "try{require('./postinstall')}catch(e){}"
npm ERR! prepareGitDep
npm ERR! prepareGitDep Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
npm ERR! prepareGitDep
npm ERR! prepareGitDep The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
npm ERR! prepareGitDep > https://opencollective.com/core-js
npm ERR! prepareGitDep > https://www.patreon.com/zloirock
npm ERR! prepareGitDep
npm ERR! prepareGitDep Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
npm ERR! prepareGitDep
npm ERR! prepareGitDep
npm ERR! prepareGitDep > core-js-pure@3.6.5 postinstall C:\Users\USER701\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-e254ec83\node_modules\core-js-pure
npm ERR! prepareGitDep > node -e "try{require('./postinstall')}catch(e){}"
npm ERR! prepareGitDep
npm ERR! prepareGitDep
npm ERR! prepareGitDep > parcel-bundler@1.12.4 postinstall C:\Users\USER701\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-e254ec83\node_modules\parcel-bundler
npm ERR! prepareGitDep > node -e "console.log('\u001b[35m\u001b[1mLove Parcel? You can now donate to our open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/parcel/donate\u001b[0m')"
npm ERR! prepareGitDep
npm ERR! prepareGitDep Love Parcel? You can now donate to our open collective:
npm ERR! prepareGitDep  > https://opencollective.com/parcel/donate
npm ERR! prepareGitDep
npm ERR! prepareGitDep > geotiff@1.0.0-beta.14 prepare C:\Users\USER701\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-e254ec83
npm ERR! prepareGitDep > npm run build
npm ERR! prepareGitDep
npm ERR! prepareGitDep
npm ERR! prepareGitDep > geotiff@1.0.0-beta.14 build C:\Users\USER701\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-e254ec83
npm ERR! prepareGitDep > npm run build:clean; run-p build:browser build:node;
npm ERR! prepareGitDep
npm ERR! prepareGitDep
npm ERR! prepareGitDep 2> npm WARN install Usage of the `--dev` option is deprecated. Use `--also=dev` instead.
npm ERR! prepareGitDep npm ERR! missing script: build:clean;
npm ERR! prepareGitDep npm ERR!
npm ERR! prepareGitDep npm ERR! Did you mean one of these?
npm ERR! prepareGitDep npm ERR!     build:clean
npm ERR! prepareGitDep npm ERR!     build:node
npm ERR! prepareGitDep npm ERR!     dev:clean
npm ERR! prepareGitDep
npm ERR! prepareGitDep npm ERR! A complete log of this run can be found in:
npm ERR! prepareGitDep npm ERR!     C:\Users\USER701\AppData\Roaming\npm-cache\_logs\2020-12-01T16_21_32_358Z-debug.log
npm ERR! prepareGitDep npm ERR! code ELIFECYCLE
npm ERR! prepareGitDep npm ERR! errno 1
npm ERR! prepareGitDep npm ERR! geotiff@1.0.0-beta.14 build: `npm run build:clean; run-p build:browser build:node;`
npm ERR! prepareGitDep npm ERR! Exit status 1
npm ERR! prepareGitDep npm ERR!
npm ERR! prepareGitDep npm ERR! Failed at the geotiff@1.0.0-beta.14 build script.
npm ERR! prepareGitDep npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! prepareGitDep
npm ERR! prepareGitDep npm ERR! A complete log of this run can be found in:
npm ERR! prepareGitDep npm ERR!     C:\Users\USER701\AppData\Roaming\npm-cache\_logs\2020-12-01T16_21_32_377Z-debug.log
npm ERR! prepareGitDep npm ERR! code ELIFECYCLE
npm ERR! prepareGitDep npm ERR! errno 1
npm ERR! prepareGitDep npm ERR! geotiff@1.0.0-beta.14 prepare: `npm run build`
npm ERR! prepareGitDep npm ERR! Exit status 1
npm ERR! prepareGitDep npm ERR!
npm ERR! prepareGitDep npm ERR! Failed at the geotiff@1.0.0-beta.14 prepare script.
npm ERR! prepareGitDep npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! prepareGitDep
npm ERR! prepareGitDep npm ERR! A complete log of this run can be found in:
npm ERR! prepareGitDep npm ERR!     C:\Users\USER701\AppData\Roaming\npm-cache\_logs\2020-12-01T16_21_32_425Z-debug.log
npm ERR! prepareGitDep
npm WARN @hms-dbmi/viv@0.7.0 requires a peer of react@^16.12.0 but none is installed. You must install peer dependencies yourself.
npm WARN @hms-dbmi/viv@0.7.0 requires a peer of react-dom@^16.12.0 but none is installed. You must install peer dependencies yourself.

npm ERR! premature close

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\USER701\AppData\Roaming\npm-cache\_logs\2020-12-01T16_21_42_342Z-debug.log

USER701@User701PC MINGW64 /c/Prog/viv
$

phaub · December 1, 2020, 4:29pm

@ilan-gold
Thanks for the hint. I know, ideally it should be OME-TIFF with pyramids.

In your docs you write
“If you have an OME-TIFF or Bio-Formats “raw” Zarr output saved locally, you may simply drag and drop the file (or directory) over the canvas or use the “Choose file” button to view your data.”

What “canvas” is meant? The browser canvas?

Once vis and/or avivator are build how can I use them?
Do I have to use a WebServer?

ilan-gold · December 1, 2020, 6:56pm

Hi @phaub,

I do mean the browser canvas. Here is a short movie that shows me doing it (you can also use the “CHOOSE A FILE” button): ezgif.com-video-to-gif(10)

Once Viv is built, and you run npm start, it should open automatically in your browser and look identical to the avivator.gehlenborglab.org website you see in the gif above (modulo the image displayed). Here are the instructions for getting started with a locally cloned version.

manzt · December 2, 2020, 12:24am

Just to be totally clear:

Avivator is a purely-client side web viewer (a folder of JS/CSS/HTML). You don’t need to built it from source to use it (even locally).
We host a public version the static site at avivator.gehlenborglab.org that is identical to building the app from source (npm run build:avivator) and serving the contents of avivator/build/ locally using a generic web-server.
To “use” Avivator to view an OME-TIFF, we recommend opening the link above in your web-browser and selecting “CHOOSE A FILE” (or dragging and dropping an OME-TIFF to the empty screen).

With that said, we certainly want to make sure folks on windows don’t have an issue building Avivator and thank you for bringing this to our attention. We definitely want to figure out what’s going on!

manzt · December 2, 2020, 12:36am

I don’t know much about environments on windows, but what stands out is:

npm ERR! prepareGitDep npm ERR! missing script: build:clean;

It seems that on your machine that npm parses the command build:clean as build:clean; (note semi-colon) from this chaining of commands the geotiff.js:

Sorry for my nativity, but is there a better “cross-platform” solution for running these commands. Perhaps using && instead?

phaub · December 2, 2020, 7:38am

Thanks @manzt

Sorry for my beginners questions. I’m not familiar with node, npm, JS …

Is this a question to me?
I can not answer it (see above) and the code is created/downloaded during execting the command. I can not change it.

Do you mean 'use locally by connecting to avivator.gehlenborglab.org ?
This is a helpful option but I would like to host it locally and start and use avivator offline.

npm run build:avivator also throws error messages in my environment.

Is there a way to host and use navivator locally without building it from source?

manzt · December 3, 2020, 7:54am

It really shouldn’t be this painful to build cross-platform. I’m sorry for the issue, but I’m afraid it’s quite difficult to debug on my end. I’ve opened an issue in viv: https://github.com/hms-dbmi/viv/issues/306.

Is there a way to host and use navivator locally without building it from source?

As a happy accident (now), a full build of Avivator was included in the v0.6.0 of Viv (the library) on npm. So to get you started locally for now, you can install the viv tarball with:

$ npm pack @hms-dbmi/viv@0.6.0 # downloads hms-dbmi-viv-0.6.0.tgz tarball from npm

which you can unpack with

$ tar zxvf hms-dbmi-viv-0.6.0.tgz

if you serve the contents of the unpacked package/dist/ with a web-server, you should be able to run it locally.

phaub · December 2, 2020, 9:32am

Thank you

The happy accident works.
Thanks for this workaround. That’s all I need for the first steps.

phaub · December 3, 2020, 10:22am

Hi @manzt and @joshmoore

I was able to open OME test data (‘Artficial dataset’) in Avivator , e.g. the 3 channel 8bit OME-TIFF from https://downloads.openmicroscopy.org/images/OME-TIFF/2016-06/bioformats-artificial/multi-channel.ome.tif.

But, if I create a similar (8bit) 3 channel OME-TIFF via FIJI & Bioformats Avivator can open this image but the channels sliders are not visible and the channels are not accessible.

What are the differences between the OME test images and OME-TIFF files created with the Bioformats plugin?

One difference I identified is the pixel data type:
uint8 : in OME-TIFF from Bioformats
int8 : in the OME test images

Could this be the reason?

joshmoore · December 3, 2020, 11:34am

When I try to load that tif remotely using http://avivator.gehlenborglab.org/ I see:

https://downloads.openmicroscopy.org/images/OME-TIFF/2016-06/bioformats-artificial/multi-channel.offsets.json’ from origin ‘http://avivator.gehlenborglab.org’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

in the console. @manzt, @ilan-gold – I assume we would need to provide the index file for this to work, no?

~J.

ilan-gold · December 3, 2020, 1:20pm

@joshmoore I think the error is deceptive (I assume it’s in your console). I think it’s telling you that CORS is not enabled. The offsets file is optional - none of the OMETIFF “random demos” that appear when you open avivator use it.

ilan-gold · December 3, 2020, 1:40pm

@joshmoore I believe we use that file locally in our unit tests and I was able to show it:

Our tutorial has some info about CORS:

Troubleshooting: Viv relies on cross-origin requests to retrieve data from servers.
The --cors='*' flag is important to ensure that the appropriate Access-Control-Allow-Origin response is sent from your local server. 
In addition, web servers must allow HTTP range requests to support viewing OME-TIFF images.
Range requests are allowed by default by http-server but may need to be enabled explicitly for your production web server.

ilan-gold · December 3, 2020, 1:58pm

Sorry, just catching up on this thread @phaub - in an attempt to recognize RGB images (like H&E stains) Avivator thinks that 3-channel uint8 images are RGB images and hides the sliders, so that is why the image appears but the sliders are not visible. Perhaps this is undesirable behavior… For example, http://avivator.gehlenborglab.org/?image_url=https://viv-demo.storage.googleapis.com/HandEuncompressed_Scan1.ome.tif falls into this category.

phaub · December 3, 2020, 2:25pm

@ilan-gold Thanks for the feedback.

In some cases it is undesirable, yes. E.g. when working with 3channel fluorescence images.

One more issue:
The LUT of the first channel of an multichannel image seems to be (always ?) set to White.
Are channel specific LUTs supported in OME-TIFF?

ilan-gold · December 3, 2020, 2:40pm

@phaub Can you elaborate a bit? It seems that the first channel of a multichannel image is blue by default, unless there is only one channel in which case it is white (but that does not seem to be what you are saying). You can change the color by using the three little dots, though.