You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airavata.apache.org by ma...@apache.org on 2019/09/20 14:12:38 UTC
[airavata-django-portal] branch master updated: Gateways19
tutorial: change from copy/paste code to uncomment code
This is an automated email from the ASF dual-hosted git repository.
machristie pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
The following commit(s) were added to refs/heads/master by this push:
new 3b887c7 Gateways19 tutorial: change from copy/paste code to uncomment code
3b887c7 is described below
commit 3b887c7554747ab46ef00cce7446b304aad7e0d6
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Fri Sep 20 10:12:29 2019 -0400
Gateways19 tutorial: change from copy/paste code to uncomment code
---
docs/tutorial/gateways2019_tutorial.md | 120 ++++++++++++++++++---------------
1 file changed, 65 insertions(+), 55 deletions(-)
diff --git a/docs/tutorial/gateways2019_tutorial.md b/docs/tutorial/gateways2019_tutorial.md
index 2739408..bc5d3f0 100644
--- a/docs/tutorial/gateways2019_tutorial.md
+++ b/docs/tutorial/gateways2019_tutorial.md
@@ -398,9 +398,10 @@ for now by typing `Control-C` in the console.
### Setup the custom output viewer package
-1. Implement the GaussianEigenvaluesViewProvider in
- `gateways19-tutorial/gateways19_tutorial/output_views.py`. First we'll add
- some imports
+1. We've defined a custom output view provider, called
+ GaussianEigenvaluesViewProvider, in `output_views.py`. Open
+ `gateways19-tutorial/gateways19_tutorial/output_views.py` in your editor and
+ we'll look at how it is implemented. First we add some imports
```python
import io
@@ -414,8 +415,9 @@ from cclib.parser import ccopen
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
```
-2. Next we'll define the GaussianEigenvaluesViewProvider class, set it's
- `display_type` to _image_ and give it a name:
+2. Next we define the GaussianEigenvaluesViewProvider class, set some metadata
+ attributes on the class. We set it's `display_type` to _image_ and give it a
+ _name_:
```python
class GaussianEigenvaluesViewProvider:
@@ -423,8 +425,8 @@ class GaussianEigenvaluesViewProvider:
name = "Gaussian Eigenvalues"
```
-3. Now we'll implement the `generate_data` function. This function should return
- a dictionary with values that are expected for this `display_type`. For a
+3. Now we implement the `generate_data` function. This function should return a
+ dictionary with values that are expected for this `display_type`. For a
display type of _image_, the required return values are _image_ which should
be a bytes array or file-like object with the image bytes and _mime-type_
which should be the image's mime type. Here's the `generate_data` function:
@@ -480,15 +482,15 @@ molecular orbital energies. Then `matplotlib` is used to create two plots of
these values. Finally, the plots are exported as a PNG image that is returns as
a buffer of bytes.
-4. To test this locally we'll need access to a file to test with. While our
- local portal instance can connect to the Airavata API just like the
- production deployed Django portal instance, only the production deployed
- Django portal has access (locally) to the output files generated by users'
- experiments. So for testing purposes we'll define a file to be used when
- there is no Gaussian log file available (this test file will only be sued
- when the Django portal is running in `DEBUG` mode).
+4. To test this locally we need access to a file to test with. While our local
+ portal instance can connect to the Airavata API just like the production
+ deployed Django portal instance, only the production deployed Django portal
+ has access to the output files generated by users' experiments. So for
+ testing purposes we'll define a file to be used when there is no Gaussian log
+ file available (this test file will only be used when the Django portal is
+ running in `DEBUG` mode).
-Just after the `name` attribute of `GaussianEigenvaluesViewProvider` add the
+Just after the `name` attribute of `GaussianEigenvaluesViewProvider` we add the
following:
```python
@@ -560,7 +562,7 @@ class GaussianEigenvaluesViewProvider:
```
6. Now we need to register our _output view provider_ with the package metadata
- so that the Django Portal will be able to discover it. Add the following
+ so that the Django Portal will be able to discover it. We add the following
lines to the `entry_points` parameter in the `setup.py` file:
```python
@@ -672,9 +674,9 @@ output of a computational experiment.
To start, we'll just create a simple "Hello World" page for the Django app and
get it properly registered with the local Django Portal instance.
-1. In the `gateways19-tutorial` directory, create a file with the path
- `gateways19_tutorial/templates/gateways19_tutorial/hello.html` with the
- following contents:
+1. In the `gateways19-tutorial` directory, open
+ `gateways19_tutorial/templates/gateways19_tutorial/hello.html`. Some of the
+ HTML view is commented out. The following is the uncommented content:
```xml
{% extends 'base.html' %}
@@ -690,8 +692,7 @@ get it properly registered with the local Django Portal instance.
{% endblock content %}
```
-2. Create a file with the path `gateways19_tutorial/apps.py` with the following
- contents:
+2. Open the file `gateways19_tutorial/apps.py`:
```python
from django.apps import AppConfig
@@ -708,8 +709,7 @@ This the main metadata for this custom Django app. Besides the normal metadata
that the Django framework expects, this also defines a display name
(`verbose_name`) and an icon (`fa_icon_class`) to use for this custom app.
-3. Create a file with the path `gateways19_tutorial/views.py` with the following
- contents:
+3. Open the file `gateways19_tutorial/views.py`:
```python
from django.shortcuts import render
@@ -723,8 +723,7 @@ def hello_world(request):
This view will simply display the template created in the previous step.
-4. Create a file with the path `gateways19_tutorial/urls.py` with the following
- contents:
+4. Open the file `gateways19_tutorial/urls.py`:
```python
from django.conf.urls import url, include
@@ -740,9 +739,9 @@ urlpatterns = [
This maps the `/hello/` URL to the `hello_world` view.
5. We've created the necessary code for our Django app to display the hello
- world page, but now we need to add some metadata so that the Django Portal
- knows about this Django app. In `setup.py`, add the following to the
- entry_points section:
+ world page, but now we need to add some metadata to this Python package so
+ that the Django Portal knows about this Django app. In `setup.py`, we add the
+ following `[airavata.djangoapp]` metadata to the entry_points section:
```python
setuptools.setup(
@@ -756,12 +755,16 @@ gateways19_tutorial = gateways19_tutorial.apps:Gateways19TutorialAppConfig
)
```
-6. Since we've updated the metadata, we need to install it again into the Django
- Portal's virtual environment. Make sure that the Django Portal's virtual
- environment is activated and run:
+6. When we update the metadata, we need to install it again into the Django
+ Portal's virtual environment. Since the metadata was already there in the
+ file, we don't need to reinstall this Python package, but keep in mind you
+ would need to reinstall it if you are creating one of these from scratch.
+ Here's how you would reinstall it:
**Running Django locally**
+Make sure that the Django Portal's virtual environment is activated and run:
+
```bash
cd ../gateways19-tutorial
# Activate the airavata-django-portal virtual environment if not already activated
@@ -805,13 +808,13 @@ should see it in that menu).
Now we'll create a REST endpoint in our custom Django app that will return
greetings in several languages.
-1. In the `views.py` file, add the following import:
+1. In the `views.py` file, we add the following import:
```python
from django.http import JsonResponse
```
-2. Also add the following view:
+2. Also we add the following view:
```python
@login_required
@@ -837,7 +840,7 @@ def languages(request):
}]})
```
-3. In `urls.py` add a url mapping for the `languages` view:
+3. In `urls.py` we add a url mapping for the `languages` view:
```python
urlpatterns = [
@@ -846,11 +849,13 @@ urlpatterns = [
]
```
-4. In `hello.html` add a `<select>` element to the template which will be used
- to display the greeting options:
+4. In `hello.html`, uncomment the comment that starts
+ `<!-- Adding a list of "Hello" greetings` on line 11 and ends on line 21.
+ That is, just delete lines 11 and 21. This adds a `<select>` element to the
+ template which will be used to display the greeting options:
```html
-<!-- ... -->
+...
<h1>Hello World</h1>
<div class="card">
@@ -862,22 +867,22 @@ urlpatterns = [
<button id="run-button" class="btn btn-primary">Run</button>
</div>
</div>
-<!-- ... --->
+...
```
-5. We'll also add the `{% load static %}` directive and then a `scripts` block
- to the end of `hello.html`. This will load the AiravataAPI JavaScript library
+5. We also add the `{% load static %}` directive and then a `scripts` block to
+ the end of `hello.html`. This will load the AiravataAPI JavaScript library
which has utilities for interacting with the Django portal's REST API (which
can also be used for custom developed REST endpoints) and model classes for
- Airavata's data models. Then the `utils.FetchUtils` is used to load the
- languages REST endpoint.
+ Airavata's data models. The `utils.FetchUtils` is used to load the languages
+ REST endpoint.
```xml
{% extends 'base.html' %}
{% load static %}
-<!-- ... -->
+...
{% endblock content %}
{% block scripts %}
@@ -908,10 +913,13 @@ you should see a dropdown of greetings in several languages, like so:
Now we'll use the `AiravataAPI` library to load the user's recent experiments.
-1. Add a table to display recent experiments to the bottom of `hello.html`:
+1. In `hello.html`, uncomment the comment that begins with
+ `<!-- Displaying a list of recent experiments` on line 21 or so and ends on
+ line 45. This adds table to display recent experiments to the bottom of
+ `hello.html`:
```xml
-<!-- ... -->
+...
<div class="card">
<div class="card-header">
Run "echo" for different languages
@@ -949,7 +957,7 @@ Now we'll use the `AiravataAPI` library to load the user's recent experiments.
```
2. Now we'll use the ExperimentServiceService to load the user's most recent 5
- _Echo_ experiments and display them in the table. Add the following to the
+ _Echo_ experiments and display them in the table. We add the following to the
end of the _scripts_ block in `hello.html`:
```javascript
@@ -994,7 +1002,7 @@ The user interface should now look something like:
Now we'll use `AiravataAPI` to submit an Echo job.
-1. Add a click handler to the _Run_ button that gets the selected greeting
+1. We add a click handler to the _Run_ button that gets the selected greeting
value:
```javascript
@@ -1003,7 +1011,7 @@ $("#run-button").click(e => {
});
```
-2. There are a couple key pieces of information that needed to submit a
+2. There are a couple key pieces of information that are needed to submit a
computational experiment. First, we need the _Application Interface_ for the
application, which defines the inputs and outputs of the application. We'll
create an _Experiment_ instance from the _Application Interface_ definition:
@@ -1090,12 +1098,12 @@ $("#run-button").click(e => {
```
Now that we can launch the experiment we can go ahead and give it a try.
-Unfortunately, the job will ultimately fail because Airavata won't be able to
-transfer the file back to our locally running Django portal (if we had our
-locally running Django portal running a public SSH server we could configure it
-so that Airavata could SCP the file back to our local instance). But this custom
-Django app is also deployed in the hosted tutorial Django instance so you can
-run it there to verify it works.
+However, the job will ultimately fail because Airavata won't be able to transfer
+the file back to our locally running Django portal (if we had our locally
+running Django portal running a public SSH server we could configure it so that
+Airavata could SCP the file back to our local instance). But this custom Django
+app is also deployed in the hosted tutorial Django instance so you can run it
+there to verify it works.
### Displaying the experiment output
@@ -1162,7 +1170,9 @@ if (exp.experimentStatus === models.ExperimentState.COMPLETED) {
3. However, as noted earlier this won't quite work with our local Django
instance since it doesn't have access to the output file. That's fine though
since we can fake the STDOUT text so that we can test our code locally.
- Here's the update to the `loadExperiments` function:
+ Remove the comment starting with `/* Displaying the experiment output` on
+ line 88 and ending on line 116. Here's the update to the `loadExperiments`
+ function:
```javascript
const FAKE_STDOUT = `