Cannot append a slice with different number of columns

[mingjuitsai]

Hi,

I am trying to build a dicom viewer integrating with Swiper JS slider http://idangero.us/swiper/api/#methods

Functions:
When user clicks on a thumbnail then it loads a new array or URLs.

dicom.init({
    "containerDivId": container_id,
    "fitToWindow": true,
    "gui": ["tool"],
    "tools": ['Scroll', 'ZoomAndPan'],
    "isMobile": true,
});

var dicom_thumbnail_swiper = new Swiper ('.swiper-container', {
  direction: 'vertical',
  mousewheel: true,
  slidesPerView: 4,
  centeredSlides: true,
  spaceBetween: 2,
  slideToClickedSlide: true,
  // Navigation arrows
  navigation: {
    nextEl: '.dicom-button-next',
    prevEl: '.dicom-button-prev',
  }
});

dicom_thumbnail_swiper.on('slideChange', function(event) {
  var active_index = dicom_thumbnail_swiper.activeIndex;

  if(active_index !== undefined && active_index !== null) {
    // Slide is changed
    dicom.loadURLs(data[active_index].files);
  }
});

Issue:
However I keep getting this error Cannot append a slice with different number of columns or Cannot append a slice with different SeriesInstanceUID especially when the current array of URLs of dcm files have not finished loading ( inspecting from Google Chrome dev tool network ) before switching to a new thumbnail.

I have tried many ways including but none is working.. is it the problem with my code or the DCM files????

Methods I have tried:

Fake the ctrl-x to cancel image loading

var e = new Event("keydown");
e.keyCode = 88;
e.which = e.keyCode;
e.altKey = false;
e.ctrlKey = true;
e.shiftKey = false;
e.metaKey = false;
window.dispatchEvent(e);

Clear the canvas

dicom.getImageLayer().clear();

I've tried to disable the Swiper while dicom viewer are loading urls but I still get same error sometimes

dicom.addEventListener('load-start', function(){
  console.log('load start');
  dicom_thumbnail_swiper.allowSlideNext = false;
  dicom_thumbnail_swiper.allowSlidePrev = false;
  dicom_thumbnail_swiper.detachEvents()
});
dicom.addEventListener('load-end', function(){
  console.log('load end');
  dicom_thumbnail_swiper.allowSlideNext = true;
  dicom_thumbnail_swiper.allowSlidePrev = true;
});

Here is the project URL
http://mripro.plot.net.au/#/case

[ivmartel]

Relates to #412.

[ivmartel]

The problem is maybe due to an image load thread still being alive, I'll try to reproduce.
I'll also make the abort method public on the application so that you do not need to fake the event,

[mingjuitsai]

Hi,

Thanks so much for looking into it.

I think at the moment it does abort the remaining requests thread but the dcm slices that have already been loaded seem to still append to the dicom canvas view area along with the newly loaded URLs. I am still getting the error :(

Please let me know if the abort method is made public right now it seems to be still under function scope. Thanks again. This is a great plugin!

In network it does show that the dcm files that have not been loaded are aborted. But the loaded ones seem to be just there.. then the same error pop up

In the console it does say files are aborted

[mingjuitsai]

or is there way to remove the previously loaded slices before loading a new series?
I have updated the DICOM case to show the current error, you can click through the thumbnails on the left and the error will popup.
http://mripro.plot.net.au/#/case

[mingjuitsai]

Hi Yves,

Thanks for adding that to public method.. I used your built in Grunt and tried out the abortLoad().

Somehow still getting the error :( is it possible that the previously loaded slices are already appended to the view and newly loaded slices tries to append then cause error :( ?

[ivmartel]

I get the error for the Pelvis Mri/T1 Coronal Pelvis series, IM-0001-0032-0001.dcm is different from the others. So the error seems to be correct.

[ivmartel]

Hi @mingjuitsai, do you confirm my previous comment? Does it solve your problem?

[mingjuitsai]

Hi,

Yes we do find slices that are different from the series.

We will try to simply delete that slice, which should solve the problem. WIll test it out today.

The doctor suspected that this error occurs because every now and then the actual MRI machine itself randomly exports the stacks like this.

[ivmartel]

Ok, closing for now. Feel free to comment if you still have problems.

[mingjuitsai]

Hi,

Please I've tested again with other dcm files. This time I separated the test from the app I was building.

Please see:
https://jsfiddle.net/mingjuitsai/8xmruou2/8/

This is a forked of a example JSfiddle of dwv.. I set an array of dicom file URLs which I have uploaded to CloudFront ( hard-coded ), then dynamically create buttons depending on length of the dicom-url-array. Then set the event listener to load relative URLS when clicking on each button.

As shown in GIF below.. when I clicked on each button slowly with short interval.. no errors at all. But when I click on each button with quick interval. The error of either Error: Cannot append a slice with different SeriesInstanceUID or Error: Cannot append a slice with different number of columns would show up..

I still don't quite understand what's causing the error. I have check the dcm files slices again. I think this time the dcm files shouldn't have wrong slice in the series.

Any clues?

[mingjuitsai]

Any progress? I am not sure this issue is fully resolved yet :(

[ivmartel]

I created a new version of the fiddle: https://jsfiddle.net/ivmartel/8xmruou2/20/
I made it use dwv 0.22.1 and the abortLoad method.

This one seems to work, at least on Google Chrome. Can you confirm?

[pawelarybak]

Unfortunately, problem still seems to exist. Even when testing your fiddle and I keep getting Error: Cannot append a slice with different number of columns :(
(I was testing on Chrome 69)

UPDATE: I added some timeout between resetting and and loading new urls and it seems to be working properly. It seems a little bit like a workaround but I didn't come up with better solution. Would be grateful for one, though.

[madhugore1]

Even I am getting the errors: Error: Cannot append a slice with different number of columns or
Error: Cannot append a slice with different SeriesInstanceUID.
After calling abortLoad method, the loading of URLs is stopped, but the dicom viewer continues to load the previous series and tries to append the slices of current series to it. Is there any way to completely stop the loading/processing of the previous series?
I am loading a study consisting of multiple series, so when a user clicks on a study to view, he is provided with the list of series to choose from. When a user clicks on a particular series, that series is loaded in the browser. But a scenario may occur where before all the slices of a series are loaded, the user clicks on a different series. This is the case where I'm getting the above errors.
So is there any other method apart from abortLoad which will solve my problem? I tried app.reset() as specified in your jsfiddle, but even that does not solve the problem.

[ivmartel]

Your issue is more related to the load abort, I think it is worth its own issue, could you create a new one please?

When aborting, it is possible that some slices were already loaded by the viewer, like you say, I was not sure when implementing if the viewer should reset or not. This is something you can do by listening to the abort event and resting the app when you receive it. You say this does not work, could you explain in the new ticket what you do and what error you are having if you are receiving any? I'm wondering if you should wait for load-end to reset just in case some data is still loading.