[Bug] SliceThickness.toFixed is not a function when trying to open segmentation view

KernelPryanic commented 1 year ago

Describe the Bug

When we're trying to open the segmentation view on the DICOM object we're getting the following error in the console:

Error Boundary TypeError: SliceThickness.toFixed is not a function
    OHIFCornerstoneSEGViewport https://xxx.xxx.xxx.xxx/676.bundle.d88a0ea4fed2e1942919.js:471
    Ch https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:131775
    li https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:131798
    ck https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:131887
    bk https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:131868
    ak https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:131868
    Tj https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:131868
    Lj https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:131861
    jg https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:131741
    unstable_runWithPriority https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:139644
    gg https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:131740
    jg https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:131741
    V https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:139642
    onmessage https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:139638
    39666 https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:139638
    __webpack_require__ https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:145997
    9146 https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:139658
    __webpack_require__ https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:145997
    83975 https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:131630
    __webpack_require__ https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:145997
    12788 https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:131949
    __webpack_require__ https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:145997
    53892 https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:131976
    __webpack_require__ https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:145997
    89294 https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:132981
    __webpack_require__ https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:145997
    63677 https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:21070
    __webpack_require__ https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:145997
    64134 https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:55698
    __webpack_require__ https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:145997
    <anonymous> https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:146422
    <anonymous> https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:146424

Object { componentStack: "\nOHIFCornerstoneSEGViewport@https://xxx.xxx.xxx.xxx/676.bundle.d88a0ea4fed2e1942919.js:216:7\nSuspense\nOHIFCornerstoneSEGViewport\nExtendedOHIFCornerstoneSEGViewport\ndiv\ndiv\ndiv\nViewportPane@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:52916:7\ndiv\nViewportGrid@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:52424:7\nViewportGridWithDataSource@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:57669:12\nErrorBoundary@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:27924:35\nErrorBoundary_ErrorBoundary@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:28171:7\ndiv\ndiv\ndiv\ndiv\nViewerLayoutWithServices@https://xxx.xxx.xxx.xxx/702.bundle.05e2dd57febb90661706.js:2361:12\nDndProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:23866:18\nDragAndDropProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:25108:7\nTrackedMeasurementsContextProvider@https://xxx.xxx.xxx.xxx/744.bundle.c850cc4efc483df3ec37.js:1020:7\nCombinedContextProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:57662:9\nImageViewerProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:25278:7\nModeRoute@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:57580:7\nchildren\nErrorBoundary@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:27924:35\nErrorBoundary_ErrorBoundary@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:28171:7\nRouteWithErrorBoundary@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:58054:9\nPrivateRoute@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:57971:7\nRenderedRoute@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:141712:7\nRoutes@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:142232:7\nRouter@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:142168:7\nBrowserRouter@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:54921:7\nModalProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:25154:7\nDialogProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:21097:7\nSnackbarProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:25512:7\nCineProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:25309:7\nViewportDialogProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:25651:7\nViewportGridProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:25795:7\nThemeWrapper@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:50108:7\nI18nextProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:145870:14\nUserAuthenticationProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:26073:7\nAppConfigProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:58719:7\nCombinedProviders@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:58555:9\nApp@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:58495:7" }

componentStack: "\nOHIFCornerstoneSEGViewport@https://xxx.xxx.xxx.xxx/676.bundle.d88a0ea4fed2e1942919.js:216:7\nSuspense\nOHIFCornerstoneSEGViewport\nExtendedOHIFCornerstoneSEGViewport\ndiv\ndiv\ndiv\nViewportPane@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:52916:7\ndiv\nViewportGrid@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:52424:7\nViewportGridWithDataSource@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:57669:12\nErrorBoundary@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:27924:35\nErrorBoundary_ErrorBoundary@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:28171:7\ndiv\ndiv\ndiv\ndiv\nViewerLayoutWithServices@https://xxx.xxx.xxx.xxx/702.bundle.05e2dd57febb90661706.js:2361:12\nDndProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:23866:18\nDragAndDropProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:25108:7\nTrackedMeasurementsContextProvider@https://xxx.xxx.xxx.xxx/744.bundle.c850cc4efc483df3ec37.js:1020:7\nCombinedContextProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:57662:9\nImageViewerProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:25278:7\nModeRoute@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:57580:7\nchildren\nErrorBoundary@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:27924:35\nErrorBoundary_ErrorBoundary@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:28171:7\nRouteWithErrorBoundary@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:58054:9\nPrivateRoute@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:57971:7\nRenderedRoute@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:141712:7\nRoutes@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:142232:7\nRouter@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:142168:7\nBrowserRouter@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:54921:7\nModalProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:25154:7\nDialogProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:21097:7\nSnackbarProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:25512:7\nCineProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:25309:7\nViewportDialogProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:25651:7\nViewportGridProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:25795:7\nThemeWrapper@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:50108:7\nI18nextProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:145870:14\nUserAuthenticationProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:26073:7\nAppConfigProvider@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:58719:7\nCombinedProviders@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:58555:9\nApp@https://xxx.xxx.xxx.xxx/app.bundle.a5327792edf1edf20f71.js:58495:7"

Adding extensions explicitly in the app-config.js didn't help. But they should be enabled by default as I understood.

window.config = {
  extensions: [
    '@ohif/extension-cornerstone',
    '@ohif/extension-cornerstone-dicom-sr',
    '@ohif/extension-cornerstone-dicom-seg',
    '@ohif/extension-cornerstone-dicom-rt'
  ],
  modes: [],
...
}

Steps to Reproduce

Configure DCM4CHEE data endpoint
Run the OHIF container with the config
Add DICOM Seg objects into PACS
Try to open them in OHIF and click the SEG button

The current behavior

Showing "Something went wrong" message and throws SliceThickness.toFixed is not a function exception.

The expected behavior

Showing segmentation as in this demo: https://v3-demo.ohif.org/viewer?StudyInstanceUIDs=1.3.6.1.4.1.14519.5.2.1.256467663913010332776401703474716742458

OHIF version

v3-stable Commit: 869b8ced0581904ebac1867ca302635a93129f02

OS

macOS 13.4

Node version

16.15.0

Browser

Firefox (113.0.2)

jbocce commented 1 year ago

@KernelPryanic thanks for reporting this issue. Would it be possible for you to provide an anonymized copy of the DICOM file(s) needed to reproduce this problem?

mccle commented 1 year ago

@jbocce, I have also encountered this issue using public data. Similar to @KernelPryanic, it triggers when trying to load the segmentation. I also see the same error: TypeError: Z.toFixed is not a function in reference to SliceThickness in OHIFCornerstoneSEGViewport.tsx. I hope this helps. Let me know if you need any more information.

jbocce commented 1 year ago

Thank you @mccle. That is great information. I tried a few of the patient ids from that public data, however I did not see the problem. Could you please point to a specific study/patient id of that data that demonstrates the problem? Thanks so much.

mccle commented 1 year ago

Thank you for responding so quickly, @jbocce. The cases I had checked had StudyInstanceUIDs of 1.3.6.1.4.1.14519.5.2.1.3671.4754.117496148504386222592571043379, 1.3.6.1.4.1.14519.5.2.1.3671.4754.131608903441424620949571415524, and 1.3.6.1.4.1.14519.5.2.1.3671.4754.121472087445374646718121301133. I encountered the error with all three when trying to view the segmentations.

jbocce commented 1 year ago

@mccle, for whatever reason, I have not been able to reproduce the problem with any of those studies listed. Furthermore, I also arbitrarily checked a few the series for the SliceThickness and SpacingBetweenSlices and found them to have a valid numeric value for which toFixed would be safely called. That said, I suppose we could add further checks of SliceThickness.toFixed and SpacingBetweenSlices.toFixed for further safety. Thoughts?

mccle commented 1 year ago

@jbocce, it looks like the error was the result of my SliceThickness being defined as "3" and being unable to call toFixed. I added parseFloat to a couple of lines in extensions/cornerstone-dicom-seg/src/viewports/OHIFCornerstoneSEGViewport.tsx and it seems to have fixed the problem I was having before and renders segmentations. These are my changes (starting at line 346):

...
            thickness: SliceThickness ? `${parseFloat(SliceThickness).toFixed(2)}mm` : '',
            spacing:
              SpacingBetweenSlices !== undefined
                ? `${parseFloat(SpacingBetweenSlices).toFixed(2)}mm`
                : '',
...

Do you think it would be worthwhile to add these checks? Also, do you have any insight as to why my SliceThickness was a string? I'd be curious to find out if the problem would be better addressed elsewhere.

jbocce commented 1 year ago

Thanks @mccle. I think what you have makes sense. Supplying anonymized DICOM files demonstrating the problem would also be appreciated if possible.

mccle commented 1 year ago

@jbocce, would the data from The Cancer Imaging Archive still work? I do not seem to be able to upload the DICOMs directly, but this is where I obtained them and they only worked for me after my alteration.

For full reproducibility, I should mention the following:

I am currently using this version of DCM4CHEE for my archive.
I used dicomweb to store the MR and SEG files taken from The Cancer Imaging Archive with StudyInstanceUIDs of 1.3.6.1.4.1.14519.5.2.1.3671.4754.117496148504386222592571043379, 1.3.6.1.4.1.14519.5.2.1.3671.4754.131608903441424620949571415524, and 1.3.6.1.4.1.14519.5.2.1.3671.4754.121472087445374646718121301133 in my archive.
The version of OHIF that I am using comes from the 869b8ced0581904ebac1867ca302635a93129f02 commit to v3-stable and was deployed according to these instructions. Files pertaining to my specific setup were mounted to /usr/share/nginx/html/app-config.js, /etc/nginx/nginx.conf, and /etc/nginx/conf.d/default.conf within the resulting container.
I am using podman for everything instead of docker.

If there is anything else you think may be relevant, please let me know.

jbocce commented 1 year ago

Thanks again @mccle. I tried those same studies with a local DCM4CHEE and was NOT able to reproduce the problem.

Hmm, that is a rather old commit. Consider updating and using the master branch as that is now the most recent v3 code.

In any case, do you mind starting a PR with the changes you suggested? It would be greatly appreciated and help the OHIF community out a lot!

Let me know.

mccle commented 1 year ago

@jbocce, Thank you again for your help. As you suggested, I tried again with the most recent commit to master and encountered the same issue as before. The same changes fixed the problem again so I just submitted this PR to add them.

OHIF / Viewers