Dash apps are just Python applications. They make use of packages published by Plotly, both Dash itself and the Plotly graphic objects, e.g.:
from dash import Dash, callback, callback_context, clientside_callback
from dash import html, dcc, Input, Output, State, ALL, ctx, no_update
from dash.exceptions import PreventUpdate
import dash_bootstrap_components as dbc
import dash_ag_grid as dag
import plotly.express as px
import plotly.graph_objs as go
All of this can be install with a simple
pip install dash pip install dash_bootstrap_components pip install dash_ag_grid
For our apps, which use our astronomical image model "mviewer", we need:
import mviewer
from PIL import Image
This requires pip installing "pillow" and our locally-developed "mviewer" package. Once we have thoroughly vetted the latter it will be uploaded to PyPI. For now we maintain it as a "wheel" file here. This can be downloaded and installed:
pip install mviewer
The source code for the mviewer React package is kept in the Montage GitHub repo: https://github.com/Caltech-IPAC/Montage/tree/main/react .
We use "mviewer" to display maps of metadata associated with the Keck Observatory Archive (KOA) through a Dash app. This is also installable:
pip install koaviewer
The source code for the koaviewer dash app package is kept in a "nexsci-dash-notebooks" GitHub repo: https://github.com/IPAC-SW/nexsci-dash-notebooks/tree/main/dashapps/koaviewer .
Finally, our Python apps use Montage for most of the image generation and processing, e.g.:
from MontagePy.main import mExamine, mCoord, mSubimage, mShrink, mViewer, mCoverageCheck
For this, you can:
pip install MontagePy
If you wish, you can build Montage and the wheel from scratch on your machine. To build Montage, download MontagePy from GitHub and run "make". Then to make the wheel file, "cd python/MontagePy" and run "make_local.sh". The wheel file will be built in the "dist" subdirectory.
We have also constructed a Jupyter Notebook that retrieves KOA metadata for a region on the sky and then uses koaviewer/mviewer to display and interact with it. We have a set of notebooks in https://github.com/IPAC-SW/nexsci-dash-notebooks, including KOA.ipynb. Download, run "jupyter notebook" and select KOA.ipynb.
This section is only needed if you plan to augment or modify the "mviewer" React component. Simply using the mviewer wheel file described above should be adequate for most applications.
Building and wrapping a React component for use by Dash has a lot of fiddly details, so Dash provides a tool for setting things up. You still have to write the React code but this boilerplate will construct a starting point and manage the resources needed for the actual build. For a more detailed write-up, see:
https://dash.plotly.com/react-for-python-developers
The notes here are just a quick overview of that more detailed explanation.
To start with, we need to have an up-to-date Node.js and npm (Node package manager) installation, then follow a pattern defined in the Dash documentation. They recommend using NVM (Node version manager). I doubt we will need anything but the current Node version but we might as well do this by the book. There is an NVM install guide here:
https://www.freecodecamp.org/news/node-version-manager-nvm-install-guide/
which says to run:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
With this we can run:
nvm install node
which installes node and npm.
All of this is written up in
https://dash.plotly.com/react-for-python-developers
Basically, Plotly provides a "dash-component-boilerplate" that organizes everything and after having run through this we only have to write the actual React .js file and run a build command. Read the above for details, but here are the shorthand notes:
pip install cookiecutter
cookiecutter https://github.com/plotly/dash-component-boilerplate.git
The cookiecutter will ask a bunch of questions to gather information for setting up the project structure and used in building the React package. We used:
project_name: Mviewer
project_shortname: mviewer
component_name: Mviewer
author_name/author_email: John Good / jcg@caltech.edu
description: Interactive astronomical image viewer.
component_type: Class Component
license: MIT
publish_on_npm: False
install_dependencies: True
There are other parameters but we just take the default.
Next, there is a little more work to get our Python environment set up for this build. We change into the 'mviewer' subdirectory and run the following:
virtualenv venv
. venv/bin/activate
pip install -r requirements.txt
At this point we have all the Node.js and Python infrastructure need for building the React component and for build the Dash Python wrapper around it.
We did all this in an empty ~/React directory. The cookie cutter created an 'mviewer' subdirectory with the above stuff in it but of this there is only one file we will actually edit:
mviewer/src/lib/components/Mviewer.react.js
The cookiecutter already created this file but with no content beyond the basic functions and naming. This should be replaced with the version distributed as part of Montage (from GitHub https://github.com/Caltech-IPAC/Montage) in the "react" subdirectory. This will allow us to build the component and wrapper:
npm run build
python setup.py sdist bdist_wheel
The first command creates the React-related files (mainly mviewer/mviewer.min.js and mviewer/Mviewer.py -- one more layer of mviewer subdirectory) and the second constructs a Python wheel file that can be pip-installed. Note that while we used the local virtual environment to run setup.py we need to turn it off again to install the wheel for operational use:
deactivate
pip uninstall mviewer [if a copy is already installed]
pip install dist/mviewer*.whl