Upgrade Viv@0.9.2 #73
Conversation
|
@will-moore, I'm about ready to merge this. A few highlights:
I've tried out almost all the examples from the OME-Blog and things seems to be working (much faster loading too!). The final issue I need to tackle is that all plates/wells are assumed to be complete. I think we actually need a better data-structure for // src/ome.ts
const plateAttrs = attrs.plate;
const rows = plateAttrs.rows.map(row => row.name);
const plate = plateAttrs.columns.map(col => col.name);
const promises = plateAttrs.wells.map(well => grp.getItem(well.path).then(arr => [well.path, arr]));
const loaders: Map<string, ZarrPixelSource> = new Map(await Promise.all(promises));
// loaders.get('A/0').getTile(...)
// gridLayer.ts
const gridLayers = rows.flatMap((row, i) => {
return columns.map((col, j) => {
const y = top + i * (height + spacer);
const x = left + j * (width + spacer);
const offset = col + row * columns;
const layerProps = {
channelData: gridData.get(`${row}/${col}`) || null, // coerce to null if no data
bounds: scaleBounds(width, height, [x, y]),
id: `${id}-GridLayer-${row}-${col}`,
dtype: loaders[offset]?.dtype || '<u2', // fallback if missing,
};
return new XRLayer({ ...this.props, ...layerProps });
});
});What are your thoughts? |
|
Still experimenting... but using a different data structure might also allow us keep names around for an additional text layer.
Maybe something like this would be easiest, const loaders = [
{ label: 'A0', row: 0, col: 0, data: new ZarrPixelSource(...) },
/* ... */
] |
|
I have implemented this. I can disable the "text" for now, and we can think about adding UI to toggle the labels on and off in a follow up PR: https://deploy-preview-73--vizarr.netlify.app/?source=https://s3.embassy.ebi.ac.uk/idr/zarr/v0.1/plates/2551.zarr |
|
Hi @manzt - Thanks, it's looking great. Centering is improved. |
Changes:
PixelSourcerather thanZarrLoader.openGroup+openArrayand walks hierarchy). Rather than relying on URLs, we can use the zarrpathto link to different nodes in the store. This will allow for non-HTTP backends (e.g. via imjoy-rpc).Known issues:
src/utils.tsincludes a new methodtrimPyramidthat tries to trim an image pyramid to resolutions that Viv can render. Notably, theMutliscaleImageLayerin Viv can only support resolutions that have the same chunk shape inxandyexcept for the lowest resolution. This type of "trimming" occured increateLoaderbefore, and ideally that logic should be replicated identically here (or improved).ZarrPixelSourcein Viv to allow for a declarative "tileSize". We now guess a tile size given the chunkshape of the highest resolution, which allows us to use all levels of the pyramid.src/components/AcquisitionController.tsxhas a callback that is specific to anHTTPStorefor an OME-Zarr acquisition. Ideally the logic in our components (and UI elements) should be agnostic of the type of image. Perhaps there is a better way to declare UI elements per layer at the config level than hard-coding this in the UI. I have commented this out for now, but will fix.the pickable layer seems to be disabled for our customThis seems to be working now.GridLayer. Need to investigate what's going on.I still see a "Too many pickable layers" error in the console for a large grid, however, although the linking is working.Resolved. I disabled picking on the grid elements, and enabled picking on the polygon layer.I'm eager to find the time to finish this, but unfortunately it's not a priority for me at the moment. I'll hopefully be able to set aside a day and finish in the next week. I wanted to make something public towards migrating to the newest release of Viv. Feel free to test previous examples (using the netlify link below) and report here if something isn't working.