OHIF / Viewers

OHIF zero-footprint DICOM viewer and oncology specific Lesion Tracker, plus shared extension packages
https://docs.ohif.org/
MIT License
3.35k stars 3.37k forks source link

Reload already initialized viewer to display new study uid #2245

Closed sylvainb31 closed 1 year ago

sylvainb31 commented 3 years ago

Hi,

I have embedded the viewer in my web app and everything is working fine.

(version used : "library": "@ohif/viewer@4.5.28",)

I use it to see directly the images of a specific study uid. When I first initialize the viewer, everything works fine, displaying the studyuid I have in my url, but I now need to display other study uid and I don't want to reload the web page containing the ohif viewer to do so.

I have my own list of study uids displayed on the left side of the viewer, and by clicking on a studyuid, I want to be able to reload directly the viewer.

Is there a way to do this ?

Maybe a function like window.OHIFViewer.reload() that would keep the initial configuration initialized but display the new studyuid that I have in my url.

Or is there a way to safely destroy the viewer and reinitialize it again ?

Here is the code of my viewer initialization :

<script src="~/lib/ohif/viewer/dist/index.umd.js?release=3.0.0.3"></script>

<script>

    if (affichageOngletImages == "True") {

        var urlForOhifViewer = "/Home/Viewer/viewer/@(Model.ReponseRecuperationDocument.StudyUid.ToString())";
        console.log("urlForOhifViewer = " + urlForOhifViewer);
        history.replaceState(null, null, urlForOhifViewer);

        var containerId = "root";
        var componentRenderedOrUpdatedCallback = function () {
            console.log('OHIF Viewer rendered/updated');

        }
        window.OHIFViewer.installViewer(
            {
                routerBasename: '/Home/Viewer',
                extensions: [], /* https://github.com/OHIF/Viewers/issues/1722 commentaire pour inclure extensions :  https://github.com/OHIF/Viewers/issues/1003#issuecomment-539190501 */
                showStudyList: true,
                filterQueryParam: false,
                maxConcurrentMetadataRequests: 1,
                servers: {
                    dicomWeb: [
                        {
                            name: 'DCM4CHEE',
                            wadoUriRoot: '/api/WadoUriAPI', /* https://dicomcloud.azurewebsites.net/api https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/wado /api/WadoUriAPI  /api/WadoUriAPI/getImageDicom */
                            qidoRoot: '/api/WadoQidoAPI', /* https://dicomcloud.azurewebsites.net/api https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs /api/WadoQidoAPI */
                            wadoRoot: '/api/WadoQidoAPI', /* https://dicomcloud.azurewebsites.net/api https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs /api/WadoQidoAPI */
                            qidoSupportsIncludeField: true, /* a vérifier l'utilité de la propriété */
                            imageRendering: '@(Model.WadoRsOuWadoUri)', /* wadors / wadouri voir : https://github.com/OHIF/Viewers/issues/1338 et https://github.com/OHIF/Viewers/issues/482 */
                            thumbnailRendering: '@(Model.WadoRsOuWadoUri)', /* wadors / wadouri */
                            enableStudyLazyLoad: true, /* a vérifier l'utilité de la propriété */
                        },
                    ],
                }
            },
            containerId,
            componentRenderedOrUpdatedCallback
        );

    }

</script>

Thanks in advance for your help that would be greatly appreciated :)

Sylvain

sylvainb31 commented 3 years ago

Here is what I've tried to do (you can find the result with the error attached) :

Deleting the container holding the viewer, and adding a new div with an other id. Then initializing the viewer again with this new container.

The metadata are loaded and the thumbnail images are loaded but there is a problem loading the main images. There is also the popup to download the image that appears with an error message.

            $("#viewerWrapperDiv").empty();

            $("#viewerWrapperDiv").append("<div id='newidviewer' style='width: 98 %; height: 90 %; '></div>")

            var containerIdNewViewer = "newidviewer";
            var componentRenderedOrUpdatedCallbackNewViewer = function () {
                console.log('OHIF New Viewer rendered/updated');

            }
            window.OHIFViewer.installViewer(
                {
                    routerBasename: '/Home/Viewer',
                    extensions: [], /* https://github.com/OHIF/Viewers/issues/1722 commentaire pour inclure extensions :  https://github.com/OHIF/Viewers/issues/1003#issuecomment-539190501 */
                    showStudyList: true,
                    filterQueryParam: false,
                    maxConcurrentMetadataRequests: 1,
                    servers: {
                        dicomWeb: [
                            {
                                name: 'DCM4CHEE',
                                wadoUriRoot: '/api/WadoUriAPI', /* https://dicomcloud.azurewebsites.net/api https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/wado /api/WadoUriAPI  /api/WadoUriAPI/getImageDicom */
                                qidoRoot: '/api/WadoQidoAPI', /* https://dicomcloud.azurewebsites.net/api https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs /api/WadoQidoAPI */
                                wadoRoot: '/api/WadoQidoAPI', /* https://dicomcloud.azurewebsites.net/api https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs /api/WadoQidoAPI */
                                qidoSupportsIncludeField: true, /* a vérifier l'utilité de la propriété */
                                imageRendering: 'wadouri', /* wadors / wadouri voir : https://github.com/OHIF/Viewers/issues/1338 et https://github.com/OHIF/Viewers/issues/482 */
                                thumbnailRendering: 'wadouri', /* wadors / wadouri */
                                enableStudyLazyLoad: true, /* a vérifier l'utilité de la propriété */
                            },
                        ],
                    }
                },
                containerIdNewViewer,
                componentRenderedOrUpdatedCallbackNewViewer
            );

OhifViewerReinitProblem

anarnoli commented 1 year ago

Hello @sylvainb31, Did you find any workaround on this?

I'm trying to push new configuration to OHIF viewer using installViewer approach but it always picks previous configurations.

sedghi commented 1 year ago

Please review the latest code in the master branch. I am confident that this issue has been resolved. If it persists, kindly reopen the issue with updated details.

Try viewer-dev.ohif.org instead of viewer.ohif.org Our viewer.ohif.org is deployed from release branch while viewer-dev.ohif.org is our master branch Read more about branch explanations here https://docs.ohif.org/development/getting-started#developing

matthiasg commented 1 year ago

how is this solved now ? is there an api or different behavior ?