Apache Airavata


Abstract

The goal of this project is to translate the GeoGateway web-app into a custom Django app for the Airavata Django Portal and to develop

a process and best practices for streamlined development of GIS based Airavata Gateways. A GeoGateway developed with the MVC (Model View Controller)

architecture of the Django framework will be flexible and modular, enabling rapid deployment of future changes and updates to the app.



The main changes to be made are:

  • JS GIS tools → Modular tools powered by Vue.js
  • GeoGatewayServer.js → Airavata API Server
  • GeoGateway HTML/CSS → Django Templates
    • Front-end JS built with Bootstrap-Vue
  • MongoDB for GIS tools  →  Django Data Models
  • Airavata Authorization process




May 11th – June 29th

Develop skeleton of app for proof of concept:

  • Make decision on Map library (django-google-maps, leaflet… etc)
  • Create custom Django app in local Airavata Django Portal dev. Environment
  • Integrate Vue.js and Bootstrap-Vue with Django (Example of app which does this: https://github.com/InterACTWEL/interactactwel-django-app)
  • Modularize some of the simpler JS GIS tools (Map Tools, UAVSAR, Moment Magnitude Calculator...) and

June 29th – July 27th


Develop extensive MVC architecture:

Django Data Models for GeoGateway data

Django view representations for tools.js

translate original HTML/CSS to dynamic Django templates

July 27th – August 24th

Document, Test, and Revise

Document changes made from original webapp for future GIS app translations

Integrate with Airavata Django Portal and test Custom App implementation

Revise UX/UI if needed



June 29th Midterm Report:

(May 11th - June29th)



MilestoneDescriptionCommitsDev-list Emails
Vue.js + Django IntegrationWorked to create a stable and reproducible development environment with Django + Vue.js + Webpack deployed as a modular Django app to the Airavata Django Portal. This required adding Webpack to the frontend Vue config and the backend Django settings, adjusting project structure, and adjusting package versions to match the Airavata Django portal.5/29

https://lists.apache.org/thread.html/re48655d046a777a74b73d93797d7c87dd3446bd684340ece87e22c7c%40%3Cdev.airavata.apache.org%3E
Created UI skeletonDeveloped skeleton of UI with Vue.js and Bootstrap-Vue. Used basic layout of original GeoGateway. Learned basic functionality of Vue components and how they communicate.6/2
Added Vuex for State ManagementThis was a choice I made based on some recommendations from other Vue developers. It seemed that the nature of this GIS app and its potential size warranted use of Vuex to make communication between components a simpler process. I would later remove this in favor of an event bus as it seemed to add an additional layer of unneeded complexity.6/4https://lists.apache.org/thread.html/r437bf836affdfe49347d40d5a644884915819eb770b0cf354d11d73b%40%3Cdev.airavata.apache.org%3E
Map Tools

Added the Map Tools as the first tool-tab. These mainly involve displaying KML data on the Leaflet map. To do this I used the leaflet-kml plugin as per Jun's recommendation. 

6/4
Refining Map Layer Logic (Ongoing)This has been something I update nearly every commit. I initially used the vue2-leaflet plugin to work with the map layers but found it wasn't flexible enough with map data. I've gone through a few different data structures as I learn how best to store and display map data. After switching from Vuex to the event bus I made the most significant update to how the tool components access and process the data and subsequently add it to the parent map component.6/5
6/15
(These are the largest updates to the logic, more updates made throughout commits)
Added Event Bus and Removed VuexThis was a significant change to the application. Instead of referring to a global store, the map component relied on global event listeners and callback functions to process the data sent by the child. This simplified the process immensely.6/10
6/18		https://lists.apache.org/thread.html/r975ea5aa518247ec56a23ffd35f782e62c45ede2aacae0b4dce2514d%40%3Cdev.airavata.apache.org%3E
GNSS, Forecast, Moment Magnitude and Seismicity Tools

Things I Learned from each Tool:

GNSS:

  • How to implement a reverse proxy to bypass CORS
  • Axios library
  • leaflet-kml plugin

Forecast:

  • Leaflet-draw library and how to dynamically fill forms with data from drawn objects
  • creating custom map layers with dynamic popups

Moment Magnitude Calculator:

  • Trivial implementation

Seismicity:

  • Required the most extensive development so far
  • How GeoJSON files and features are structured
  • How to populate map with conditionally rendered features based on GeoJSON feature properties
  • How to filter GeoJSON data from USGS catalog based on feature properties


GNSS

6/9
6/9

6/16

Forecast/Nowcast

6/18

6/22

6/22

Moment Mag.

6/16

Seismicity

6/22

6/23

6/25



https://lists.apache.org/thread.html/r975ea5aa518247ec56a23ffd35f782e62c45ede2aacae0b4dce2514d%40%3Cdev.airavata.apache.org%3E


https://lists.apache.org/thread.html/r99071ae1a54b47e1446d18a64d95bd4d7fac001aeaab54cbdd403681%40%3Cdev.airavata.apache.org%3E


https://lists.apache.org/thread.html/r437bf836affdfe49347d40d5a644884915819eb770b0cf354d11d73b%40%3Cdev.airavata.apache.org%3




  • No labels

For an overview of Apache Airavata visit the Website - https://airavata.apache.org/