othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix thumbnail loading indicator and display issues (OHIF-36)

Browse Source
This commit is contained in:
Erik Ziegler 2016-08-09 17:47:06 +02:00
parent 8c9b7aef79
commit 5b0f8e83d0
2 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
Packages/viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.js
View File

@ -2,30 +2,30 @@ Template.imageThumbnail.onRendered(() => {
const instance = Template.instance(); const instance = Template.instance();
// Declare DOM and jQuery objects // Declare DOM and jQuery objects
const element = instance.find('.imageThumbnailCanvas'); const $parent = instance.$('.imageThumbnail');
const $element = $(element); const $loading = $parent.find('.imageThumbnailLoadingIndicator');
const $loading = $element.find('.imageThumbnailLoadingIndicator'); const $loadingError = $parent.find('.imageThumbnailErrorLoadingIndicator');
const $loadingError = $element.find('.imageThumbnailErrorLoadingIndicator'); const $element = $parent.find('.imageThumbnailCanvas');
const element = $element.get(0);
instance.refreshImage = () => { instance.refreshImage = () => {
// Disable cornerstone for thumbnail element and remove its canvas // Disable cornerstone for thumbnail element and remove its canvas
cornerstone.disable(element); cornerstone.disable(element);
$element.find('canvas').remove();
// Enable cornerstone for thumbnail element angain creating a new canvas // Enable cornerstone for thumbnail element angain creating a new canvas
cornerstone.enable(element); cornerstone.enable(element);
// Get the image ID // Get the image ID
const imageInstance = instance.data.thumbnail.stack.images[0]; const stack = instance.data.thumbnail.stack;
const imageInstance = stack.images[0];
const thumbnailIndex = instance.data.thumbnail.thumbnailIndex;
const imageId = getImageId(imageInstance); const imageId = getImageId(imageInstance);
// Activate the loading state // Activate the loading state
$loading.css('display', 'block'); $loading.css('display', 'block');
// Add the current index on the global thumbnail loading controller // Add the current index on the global thumbnail loading controller
const thumbnailIndex = $('.imageThumbnailCanvas').index(element);
ThumbnailLoading[thumbnailIndex] = imageId; ThumbnailLoading[thumbnailIndex] = imageId;
instance.data.thumbnailIndex = thumbnailIndex;
// Define a handler for success on image load // Define a handler for success on image load
const loadSuccess = image => { const loadSuccess = image => {
@ -35,7 +35,10 @@ Template.imageThumbnail.onRendered(() => {
}; };
// Define a handler for error on image load // Define a handler for error on image load
const loadError = error => $loadingError.css('display', 'block'); const loadError = () => {
$loading.css('display', 'none');
$loadingError.css('display', 'block');
};
// Call cornerstone image loader with the defined handlers // Call cornerstone image loader with the defined handlers
cornerstone.loadAndCacheImage(imageId).then(loadSuccess, loadError); cornerstone.loadAndCacheImage(imageId).then(loadSuccess, loadError);
@ -43,6 +46,8 @@ Template.imageThumbnail.onRendered(() => {
// Run this computation every time the current study is changed // Run this computation every time the current study is changed
instance.autorun(() => { instance.autorun(() => {
const currentData = Template.currentData();
// Check if there is a reactive var set for current study // Check if there is a reactive var set for current study
if (instance.data.currentStudy) { if (instance.data.currentStudy) {
// Register a dependency from this computation on current study // Register a dependency from this computation on current study
@ -60,9 +65,10 @@ Template.imageThumbnail.helpers({
// Executed every time the image loading progress is changed // Executed every time the image loading progress is changed
percentComplete() { percentComplete() {
const instance = Template.instance(); const instance = Template.instance();
const thumbnailIndex = instance.data.thumbnail.thumbnailIndex;
// Register a dependency from this computation on Session key // Register a dependency from this computation on Session key
const percentComplete = Session.get('CornerstoneThumbnailLoadProgress' + instance.data.thumbnailIndex); const percentComplete = Session.get('CornerstoneThumbnailLoadProgress' + thumbnailIndex);
// Return the complete percent amount of the image loading // Return the complete percent amount of the image loading
if (percentComplete && percentComplete !== 100) { if (percentComplete && percentComplete !== 100) {

2
Packages/viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.styl
View File

@ -28,7 +28,7 @@
.thumbnailLoadingIndicator .thumbnailLoadingIndicator
display: none display: none
pointer-events: none pointer-events: none
color: #f8a13f color: $textSecondaryColor
height: 20px height: 20px
width: 100% width: 100%
top: 0 top: 0