You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* Remove deprecated Bio.Alphabet module
* Added assets, updated layout_helper import, and fixed dcc.Loading css
* Remove common directory and update requirements
* Adding back common directory
* Remove unnecessary gallery scripts and add common template
* Updated CONTRIBUTING and CHANGELOG
* Add extract-meta
* Linting
* Update CONTRIBUTING.md
Co-authored-by: Alex Johnson <[email protected]>
Co-authored-by: Alex Johnson <[email protected]>
*`callbacks(app)` should contain all of the callbacks in the application and
79
-
not return anything, e.g.,
80
-
```python
81
-
defcallbacks(app):
82
-
@app.callback(
83
-
Output('my-component-output', 'children'),
84
-
[Input('my-component', 'someProperty')]
85
-
)
86
-
defupdate_output(property):
87
-
return"Value: {}".format(str(property))
88
-
```
89
-
90
-
###### Testing
55
+
### Demo applications
56
+
Dash Bio demo apps follow a standardized template and showcase the properties
57
+
of the component and possible use-cases with sample datasets. The `assets` and
58
+
`layout_helper.py` modules in the `common` subdirectory include the base CSS styling for
59
+
demo apps and helper functions to generate the layout and callback structure to run
60
+
the demo as a standalone Dash app. These should be added to your demo app directory
61
+
to ensure that the layout and structure of your app is consistent when deployed
62
+
to the Dash Gallery. See *Setup* below for more details on using `layout_helper.py`
63
+
within your demo application.
64
+
65
+
### Setup
66
+
In the `tests/dashbio_demos/common` subdirectory, you will find the minimal project structure for a Dash Bio demo app. This includes the following files:
67
+
68
+
*`app.py`: This contains your Python app code with the demo component. The `app.py` in this case contains a basic outline of the code required for a Dash Bio sample app, but it can be modified or replaced as necessary for a particular component or demo app. If you are using this template, please note the following:
69
+
>*`layout()` should return whatever you would have in your `app.layout`. Due to
70
+
>the way the CSS is set up for each application, it is advisable to create a
71
+
>container `div` that will house your application, e.g.,
>*`callbacks(app)` should contain all of the callbacks in the application and
81
+
>notreturn anything, e.g.,
82
+
>```python
83
+
>defcallbacks(app):
84
+
>@app.callback(
85
+
> Output('my-component-output', 'children'),
86
+
> [Input('my-component', 'someProperty')]
87
+
> )
88
+
>defupdate_output(property):
89
+
>return"Value: {}".format(str(property))
90
+
>```
91
+
92
+
*`requirements.txt`: A text file which includes all the Python dependencies that need to be installed in order to run the app.
93
+
*`layout_helper.py`: A Python module with helper functions to generate the template app layout and callback structure for a Dash Bio gallery app.
94
+
*`data`: A directory that can contain sample datasets.
95
+
*`assets`: A directory which can contain custom CSS, JS, favicon, or styling assets. Dash will automatically serve all of the files that are included in this folder.
96
+
*`Procfile`: Procfile is a required text file that declares which commands should be run by the server on startup like starting your app's web server, scheduling jobs and running background processes. For Dash Bio demo apps, it can remain unmodified.
97
+
98
+
99
+
### Testing
91
100
Test out your application by going to the repository's root directory and
92
101
running
93
102
94
103
```bash
95
-
python index.py
104
+
python tests/dashbio_demos/{YOUR_DEMO_APP}/app.py
96
105
```
97
-
Then navigate to `localhost:8050` in your web browser. You should see the
98
-
gallery page. To get to your application, click on the square that displays the
99
-
name of your component upon hover.
106
+
107
+
Then navigate to `localhost:8050` in your web browser.
100
108
101
109
You will need to quit the Python application and rerun it if you have made
102
110
changes to the Python file itself, or have recently rebuilt/reinstalled the
103
111
Dash Bio package. To see updated CSS changes, you can simply reload the webpage
104
-
in your browser.
112
+
in your browser, or enable hot-reloading with [Dash Dev Tools](https://dash.plotly.com/devtools).
105
113
106
-
######CSS
114
+
### CSS
107
115
All custom CSS stylesheets should go in the `assets/` folder. Please create a
108
116
stylesheet with a filename specific to your component. In addition, all ids and
109
117
class names in your application should be prefixed by the name of your
@@ -115,39 +123,39 @@ if you want to make a container `div` for your application as mentioned in the
115
123
Setup subsection, please account for an extra height of `100px` that is taken
116
124
up by the header when you are specifying the height of the container.
117
125
118
-
######Final touches
126
+
### Final touches
119
127
In the `tests/dashbio_demos/images/` subfolder, please include a PNG file named
120
128
`pic_{your component name in snake case}.png`.
121
129
122
130
In your demo app file, please include the following functions:
123
-
*`description()` is responsible for the text that shows up on hovering over
131
+
>*`description()` is responsible for the text that shows up on hovering over
124
132
your application in the gallery page. It should return a short string with a
125
133
description of the component, e.g.,
126
-
```python
127
-
defdescription():
128
-
return"Display bioinformatics data with this component."
129
-
```
130
-
*`header_colors()` controls the appearance of the header for your application.
134
+
>```python
135
+
>defdescription():
136
+
>return"Display bioinformatics data with this component."
137
+
>```
138
+
>*`header_colors()` controls the appearance of the header for your application.
131
139
It should return a dictionary withanyorall of the specified keys `bg_color`
132
140
(string), `font_color` (string), and`light_logo` (boolean). Please change the
133
141
background color from default, andtry to choose one that isn't used for
134
142
another application, e.g.,
135
-
```python
136
-
defheader_colors():
137
-
return {
138
-
'bg_color': 'rgb(255, 0, 0)',
139
-
'font_color': 'rgb(255, 255, 255)',
140
-
'light_logo': True
141
-
}
142
-
```
143
+
>```python
144
+
>def header_colors():
145
+
>return {
146
+
>'bg_color': 'rgb(255, 0, 0)',
147
+
>'font_color': 'rgb(255, 255, 255)',
148
+
>'light_logo': True
149
+
> }
150
+
>```
143
151
144
152
Please lint any additions to Python code with`pylint`and/or`flake8`.
145
153
146
154
Commit each changeset corresponding to a conceptual entity.
147
155
Write commit messages at the imperative (e.g., "Document workflow").
148
156
Each commit is small; a pull request typically consists of a few commits.
149
157
150
-
####Step 3: Run tests locally
158
+
## Step 3: Run tests locally
151
159
152
160
To run integration tests locally on, say, Google Chrome:
153
161
```bash
@@ -160,7 +168,7 @@ pytest tests/integration #for testing all apps
160
168
pytest tests/integration/test_yourNewApp #for testing only one app
161
169
```
162
170
Do not worry if you get errors running this last command. You will have to
163
-
download a Chrome driver (Linux:chromium), install it, and add its path.
171
+
download a Chrome driver (Linux:chromium), install it, and add it to your PATH.
164
172
Follow what the error messages point to (this will be platform-specific).
Edit the `Procfile` at the root of the repository to say `gunicorn
212
-
tests.dashbio_demos.app_name:server`, where `app_name` is the name of
213
-
the app you want to deploy in the `tests/dashbio_demos/` folder.
214
-
215
-
##### Step 2b: Edit `config.py`
216
-
Edit the `config.py` file at the root of the repository such that the variable
217
-
`DASH_APP_NAME` be set to the name of your app, but with `app`
218
-
replaced by `dash` and underscores (`_`) replaced by dashes
219
-
(`-`). (e.g., for `app_manhattan_plot`, the `DASH_APP_NAME` variable
220
-
should be set to `dash-manhattan-plot`.)
221
-
222
-
##### Step 2c: Commit the changes
223
-
Commit the `Procfile` and `config.py`, but *do not push to the
224
-
`dash-bio` repo*!
219
+
>#### Step 2a: Edit the `Procfile`
220
+
>Edit the `Procfile` at the root of the repository to say `web: gunicorn app:server`.
221
+
>
222
+
>#### Step 2b: Commit the changes
223
+
>Commit the `Procfile`and other changes, but *do not push to the
224
+
`dash-bio` repo* !
225
225
226
226
#### Step 3: Push to the playground server
227
-
Run `git push [app name]-test master`. This will deploy the app
228
-
on the playground server. Check that it works by visiting the URL that
229
-
is displayed in the console. Try out a few of the callbacks to make
227
+
Run `git subtree push --prefix tests/dashbio_demos/[app directory] [app name]-test master`. This will deploy the app on the playground server. Check that it works by visiting the URL that is displayed in the console. Try out a few of the callbacks to make
230
228
sure that they are working.
231
229
232
230
#### Step 4: Initialize the app on the dash-gallery server and push to it
233
231
Log into the `developers` account on
234
232
[dash-gallery.plotly.host](dash-gallery.plotly.host) and follow the same
235
233
instructions asin Step 1, but give this remote a different name
236
-
(e.g., by running `git remote add gallery [deployment server git
237
-
URL]`). Then, run `git push gallery master`.
234
+
(e.g. by running `git remote add gallery [deployment server git
235
+
URL]`). Then, run `git subtree push--prefix tests/dashbio_demos/[app directory] gallery master`.
238
236
239
237
#### Step 5: Undo the app-specific commit
240
238
Run `git log` to find the ID of the commit prior to the one that you
241
239
just made to change the `Procfile`. Then, reset your local branch to
242
-
this commit so that the `index.py` app still deploys and runs
240
+
this commit so that the `app.py` app still deploys and runs
243
241
normally. You can do this by running `git reset --hard [commit ID]`.
244
242
245
243
#### Step 6: Ensure that your branch is even with `master`
0 commit comments