Unable to render the viewer when deployed in a Flask application

fordanic commented 4 years ago

Trying to embed the viewer in a Flask application following the suggested approach. I.e. I have html file with following content:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="description" content="Open Health Imaging Foundation DICOM Viewer" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="theme-color" content="#000000" />
    <meta http-equiv="cleartype" content="on" />
    <meta name="MobileOptimized" content="320" />
    <meta name="HandheldFriendly" content="True" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- WEB FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap" rel="stylesheet" />
    <title>OHIF Standalone Viewer</title>
</head>

<body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@16.12.0/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@ohif/viewer@1.0.3/dist/index.umd.js" crossorigin></script>
    <script>
        var containerId = "root";
        var componentRenderedOrUpdatedCallback = function () {
            console.log('OHIF Viewer rendered/updated');
        }
        window.OHIFViewer.installViewer(
            {
                routerBasename: '/',
                servers: {
                    dicomWeb: [
                        {
                            name: 'DCM4CHEE',
                            wadoUriRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/wado',
                            qidoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
                            wadoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
                            qidoSupportsIncludeField: true,
                            imageRendering: 'wadors',
                            thumbnailRendering: 'wadors',
                        },
                    ],
                },
            }, containerId, componentRenderedOrUpdatedCallback);
    </script>
</body>

</html>

And a route serving the specified html file. Everything loads properly upon visiting localhost:5000/viewer, no errors, but the page is completely blank. I assume, that I'm missing something basic somewhere, but I have no clue what it is.

Any suggestions are appreciated.

fordanic commented 4 years ago

Hmh, it appears that everything is all good when I serve the html file using a minimal flask application.

#!/usr/bin/python
# coding: utf-8
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def entry_point():
    return render_template("index.html")

if __name__ == '__main__':
    app.run(debug=True)

Ok, will have to rework the other application trying to figure out what happens there.

Why can't I use a specific route to serve the viewer?

#!/usr/bin/python
# coding: utf-8
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/OHIF/')
def entry_point():
    return render_template("index.html")

if __name__ == '__main__':
    app.run(debug=True)

dannyrb commented 4 years ago

@fordanic, you can serve it from a different base url, but you'll need to update the routerBaseName key in the application config. You may also need to setup appropriate rules so SPA (single page application) routing works for direct linking to studies.

Note: you're using an older package of the viewer:

<script src="https://unpkg.com/@ohif/viewer@1.0.3/dist/index.umd.js" crossorigin></script>

The latest version is @ohif/viewer@3.3.4

fordanic commented 4 years ago

Thanks for the hint regarding the routerBaseName, my mistake. Also handled the routing for SPA accordingly (in case someone tries something similar):

#!/usr/bin/python
# coding: utf-8
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def start():
    return "Minimal OHIF + Flask example"

@app.route('/OHIF')
def study_list():
    return render_template("index.html")

@app.route('/OHIF/viewer', defaults={'path': ''})
@app.route('/OHIF/viewer/<path:path>')
def study(path):
    return render_template("index.html")

if __name__ == '__main__':
    app.run(debug=True)

dannyrb commented 4 years ago

Thanks for the update, @fordanic! Lots of small things that are easy to get hung up on. Please don't hesitate to reach out if you have any further questions 👋

OHIF / Viewers

Unable to render the viewer when deployed in a Flask application #1340