Skip to content

Commit

Permalink
Resolve some issues in updating styles along with frames.
Browse files Browse the repository at this point in the history 
If we don't specify a style, the baseQuad is still used.  Oddly, when we
stop using the baseQuad I see some webGL warnings which I'll hunt down
separately.

It would be better to set a style of undefined if not needed (for
instance not using channel compositing).

There is one workaround of a potential caching bug that I'll also look
into later.
  • Loading branch information
@manthey @annehaley
manthey authored and annehaley committed Apr 5, 2023
1 parent e3683f8 commit a563949
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 41 deletions.
2 changes: 1 addition & 1 deletion girder/girder_large_image/web_client/templates/imageViewerSelectWidget.pug
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
each viewer in viewers
option(value=viewer.name) #{viewer.label}
.image-controls
div#vue-container
#vue-container
span.image-controls-frame.hidden
label(for='image-frame') Frame:
input#image-frame-number.image-controls-number(type='number', min='0', value='0')
Expand Down
96 changes: 57 additions & 39 deletions girder/girder_large_image/web_client/views/imageViewerWidget/geojs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ var GeojsImageViewerWidget = ImageViewerWidget.extend({
return restRequest({
type: 'GET',
url: 'item/' + this.itemId + '/tiles',
data: {projection: 'EPSG:3857'}
data: { projection: 'EPSG:3857' }
}).done((resp) => {
this.levels = resp.levels;
this.tileWidth = resp.tileWidth;
Expand Down Expand Up @@ -80,16 +80,18 @@ var GeojsImageViewerWidget = ImageViewerWidget.extend({
this.viewer = geo.map(params.map);
params.layer.autoshareRenderer = false;
this._layer = this.viewer.createLayer('osm', params.layer);
if (false && this.metadata.frames && this.metadata.frames.length > 1) {
if (this.metadata.frames && this.metadata.frames.length > 1) {
const baseUrl = this._getTileUrl('{z}', '{x}', '{y}');
const updated = new URLSearchParams(baseUrl.split('?')[1]).get('_');
setFrameQuad(this.metadata, this._layer, {
// allow more and larger textures is slower, balancing
// performance and appearance
// maxTextures: 16,
// maxTotalTexturePixels: 256 * 1024 * 1024,
baseUrl: this._getTileUrl('{z}', '{x}', '{y}').split('/tiles/')[0] + '/tiles',
baseUrl: baseUrl.split('/tiles/')[0] + '/tiles',
restRequest: restRequest,
restUrl: 'item/' + this.itemId + '/tiles',
query: 'cache=true'
query: 'cache=true' + (updated ? '&_=' + encodeURIComponent(updated) : '')
});
this._layer.setFrameQuad(0);
}
Expand All @@ -103,7 +105,7 @@ var GeojsImageViewerWidget = ImageViewerWidget.extend({
};
// the metadata levels is the count including level 0, so use one
// less than the value specified
this.viewer = geo.map({node: this.el, max: this.levels - 1});
this.viewer = geo.map({ node: this.el, max: this.levels - 1 });
if (this.metadata.bounds.xmin !== this.metadata.bounds.xmax && this.metadata.bounds.ymin !== this.metadata.bounds.ymax) {
this.viewer.bounds({
left: this.metadata.bounds.xmin,
Expand Down Expand Up @@ -145,71 +147,87 @@ var GeojsImageViewerWidget = ImageViewerWidget.extend({
},

frameUpdate: function (frame, style) {
this._baseUrl = this._layer._options.originalUrl;
const targetUrl = this.getFrameUrl(frame, style);

if (this._frame === undefined) {
// don't set up layers until the we access the first non-zero frame
if (frame === 0) {
if (frame === 0 && style === undefined) {
return;
}
this._frame = 0;
let quadLoaded = ((this._layer.setFrameQuad || {}).status || {}).loaded;
if (!quadLoaded) {
// use two layers to get smooth transitions until we load
// background quads.
this._layer2 = this.viewer.createLayer('osm', this._layer._options);
this._layer2.moveDown();
// setFrameQuad((this._layer.setFrameQuad.status || {}).tileinfo, this._layer2, (this._layer.setFrameQuad.status || {}).options);
// this._layer2.setFrameQuad(0);
}
this._style = undefined;
this._baseurl = this._layer.url();
// use two layers to get smooth transitions until we load
// background quads. Always cteate this, as styles will use
// this, even if pure frame do not.
this._layer2 = this.viewer.createLayer('osm', this._layer._options);
this._layer2.moveDown();
setFrameQuad((this._layer.setFrameQuad.status || {}).tileinfo, this._layer2, (this._layer.setFrameQuad.status || {}).options);
this._layer2.setFrameQuad(0);
}
frame = frame || 0;
this._nextframe = frame;
if (style || (frame !== this._frame && !this._updating)) {
this._nextstyle = style;
if ((frame !== this._frame || style !== this._style) && !this._updating) {
this._frame = frame;
this._style = style;
this.trigger('g:imageFrameChanging', this, frame);
const quadLoaded = ((this._layer.setFrameQuad || {}).status || {}).loaded;
if (quadLoaded) {
if (this._layer2) {
this.viewer.deleteLayer(this._layer2);
delete this._layer2;
}
this._layer.url(targetUrl);
if (quadLoaded && this._style === undefined) {
this._layer.url(this.getFrameAndUrl().url);
this._layer.setFrameQuad(frame);
this._layer.frame = frame;
this.trigger('g:imageFrameChanged', this, frame);
return;
}

if (this._layer.frame !== undefined) {
this._layer.setFrameQuad(undefined);
this._layer.frame = undefined;
}
this._updating = true;
this.viewer.onIdle(() => {
this._layer2.url(targetUrl);
// this._layer2.setFrameQuad(frame);
this._layer2.frame = frame;
this._layer2.url(this.getFrameAndUrl().url);
if (this._style === undefined) {
this._layer2.setFrameQuad(frame);
this._layer2.frame = frame;
} else {
this._layer2.setFrameQuad(undefined);
this._layer2.frame = undefined;
}
this.viewer.onIdle(() => {
this._layer.moveDown();
var ltemp = this._layer;
this._layer = this._layer2;
this._layer2 = ltemp;
this._updating = false;
this.trigger('g:imageFrameChanged', this, frame);
if (frame !== this._nextframe) {
this.frameUpdate(this._nextframe, style);
if (frame !== this._nextframe || style !== this._nextstyle) {
this.frameUpdate(this._nextframe, this._nextstyle);
}
});
});
}
},

getFrameUrl: function (frame, style) {
let url = this._baseUrl.split('?')[0];
if (style) {
const encodedStyle = encodeURIComponent(JSON.stringify(style));
url += '?style=' + encodedStyle;
} else if (frame) {
url += '?frame=' + frame;
getFrameAndUrl: function () {
let frame = this._frame || 0;
let url = this._baseurl || this._layer.url();
// setting the frame to the first frame used in a style seems to
// resolve a caching issue, which is probably a bug in the styling
// functions. Until that is resolved, we do this.
if (this._style && this._style.bands && !this._style.bands.some((b) => b.frame === undefined) && this._style.bands.length) {
frame = this._style.bands[0].frame;
}
if (frame) {
url += (url.indexOf('?') >= 0 ? '&' : '?') + 'frame=' + frame;
}
if (this._style !== undefined) {
const encodedStyle = encodeURIComponent(JSON.stringify(this._style));
url += (url.indexOf('?') >= 0 ? '&' : '?') + 'style=' + encodedStyle;
}
return url;
return {
frame: frame,
style: this._style,
url: url
};
},

destroy: function () {
Expand Down
4 changes: 3 additions & 1 deletion girder/girder_large_image/web_client/views/imageViewerWidget/setFrameQuad.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,9 @@ function setFrameQuad(tileinfo, layer, options) {
return status;
});
layer.setFrameQuad = function (frame) {
if (status.framesToIdx[frame] !== undefined && status.loaded) {
if (frame === undefined) {
layer.baseQuad = undefined;
} else if (status.framesToIdx[frame] !== undefined && status.loaded) {
layer.baseQuad = Object.assign({}, status.quads[status.framesToIdx[frame]]);
}
status.frame = frame;
Expand Down

0 comments on commit a563949

Please sign in to comment.