Register
Submit a solution
The challenge is finished.

Challenge Overview

Overview

Our client is developing an application that will be used in the HBGDki initiative (Healthy Birth, Growth, and Development knowledge integration). The application provides several different modes of analysis / data exploration, one of which will use a version of the Earth project globe for data visualization. The globe is now embedded into their larger application. We are working with the client to add additional capabilities to the Earth map. To date we have the basic globe working and embedded in the client's Frame. We have also added a new data set - "studies" to the globe. In addition to that, we recently ran a couple of challenges to figure out efficient and effective data management and storage practice for our application and added support for rendering live weather data and chemical/aerosol data inside the Globe (similar to what you can see in the original Earth Project linked above).  In this challenge we want to enhance the UI capabilities of the application to provide more information about the “studies” dataset that we added in past challenge.


Challenge Objectives

As mentioned in overview, in this challenge you'll be extending the existing code base to add/display details about each of studies available in “Studies” dataset.  Specifically, at this point we have made the application feature-rich by adding support for three datasets - “studies”, “Live weather data” and “live chemical/aerosol data”. The next step in this process is to provide  textual information display related to Studies in panel on right of the screen.

There are 4 main goals in this challenge (please read them all before beginning as these goals interact with each other).


1. Display “Study” Details in Right Panel


The Details box on the right of the application (an iFrame) is used by other aspects of the Data Journey application to show additional detail. The iFrame will remain in this box, and should be left untouched. An additional DIV should be added above the iFrame (so that it shows in this same "space"). This new DIV will be used  to display additional detail about a study selected on the Globe (or in the menu on the left hand side).

When the user selects a study on the Globe, or on the left-hand menu (see Left Hand Menu section below), these additional details should be displayed.
Use the table below and the existing study data CSV (or JSON file) [ described in resources] to display this additional information in the new DIV.
The final item in the table, "GALLERY" should display a Carousel of images (small "thumbnails"). These images will be "per study". Please use placeholder images for now. There will be multiple images associated with a study.

Please update the study JSON so that each study has a directory path associated with it. All images in that directory should be shown in the carousel (again - for this challenge, you can use stock / placeholder images in the directory to demonstrate). Alternative approaches to achieve this can be discussed, but the main point on this is that all the client should need to do to add images to the carousel for a given study is copy the image file to a particular directory.
 
Details of the information to be shown in the "Details" panel on the right:
 

ABOUT - Study ID + Short Description + Study Description (column B + column D + Column E), Study URL (Column E), Study Type (Column K),  Intervention Type (Column L), Age of Subjects (Column M-P), Dates of Study (Column Q-R), Study Locations (Column T),  Study Population (Column U), 

TEAM - PI Name (Column W), Kikm URI (Column Z)

PUBLICATIONS - (Column Z) Kikm URI
GALLERY - Carousel - GUSTO as use case for images and video links

Please note: You do not need to show the details exactly in table like above. You just need to display them in nice and readable way.


2. Studies and Left Panel on Globe
 

 

The Data Journey application should be running as an "integrated" application with the Globe. For example, when studies are selected on the left hand menu, they should reflect on the Globe and the study details should be shown in the Details pane. Likewise, when a study is selected on the Globe, the "current selection" (on the left-hand menu) should be updated to reflect the selected study (and again, the additional study details should be shown in the panel on the right).

Please note: A user can select other datasets like weather and chemical data. In this scenario, the study dataset turns off. When that happens, the right panel should retain and display the details of the more recent study that was displayed before changing the dataset. The display should not become blank.
 

3. Changes in Main Menu

The following changes need to be made to the main menu:
The client would like to "rearrange" the Globe menu. This will require you to both rearrange and in some cases "split up" the menu. Essentially we'll be replacing the "earth" menu "Tag" with a small set of data. When clicked, the small set of data should open the full menu (just like currently clicking "earth" does).
 

Please see details in the following image:

 

Additional Details

- As depicted in the image above, each of the selections in the bottom section should be replaced with drop-down menus. Note: When you choose a different mode (like Air or Ocean, the choice below may be different, but they should still be represented as a drop-down.

- Please pay special attention to the new ordering and arrangement of the menu as depicted above.

- In addition, add a new option in the globe config file which controls the size of the text used in the menu (so that the menu can be configured to be smaller).

- The "Transparent Whitespace" should be like the white space currently placed in between the "earth" main tag and the rest of the menu.


4. Bug Fixes and Minor Changes

The following fixes need to be resolved in the application:

1. Chemical / Aerosol Data Availability: In the current base submission, a hack was implemented with following details:
Chemical data (COsc, CO2sc) has no forecast readily availalbe at NASA server, nor forecast data are available at Nullschool (sure these data can be estimated from other related forecast data published at NASA server). There are historical data though, availalbe for up to 2 previous years at [http://opendap.nccs.nasa.gov/dods/GEOS-5/fp/0.25_deg/assim/tavg3_2d_chm_Nx.info](http://opendap.nccs.nasa.gov/dods/GEOS-5/fp/0.25_deg/assim/tavg3_2d_chm_Nx.info). It looks though, that these data lags a bit behind the latest data expected to be available (and available at Nullschool). Note also, that in the Nullschool version, when a user selects these data the date is automatically switched to one corresponding to the latest available data. It won't quite work for development because of the following reason:
1.  In Chem mode the globe renders both chemicals and wind data;
2.  The wind data are currently pulled from the forecasts, i.e. when the app is started with a clean database the wind data are available only starting from the most recent forecast time;
3.  The latest available chem data easily can be dated before the oldest availalbe wind data, thus no matter what date/time is choosen, either wind or chem data will be missed and the frontend will fail.
To deal with this, the following hack is used: when COsc or CO2sc data for specific date/time are requested, the backend returns data corresponding to the moment 24 hours earlier (see /earth/router.js, lines 59, 60).
 
We want to remove this hack and implement it in better way. 
One possible solution: Do not make any timeshift, and just accept that if you start the app with an empty database, you have to wait for 12-24 hours until it pulls enough data so you can see those data for some moments in time.

Please note: While the above is a plausible solution, we are not very confident about how to exactly handle this. For this reason, please participate in a discussion in forums to discuss this problem and potential soltuions. Alternative solutions to the one provided above are welcome but must be discussed in forums first.

2. [Bug Fix]: When we try to load data from previous hours when data does not exist we get an error: https://gyazo.com/d104699e9e23acb6394d2b8495fe2184.

The following smaller changes also need to be made to the application:

- The background for the Globe needs to be changed to White.
The dots representing the studies on the globe should be reduced in size by 50 percent. In addition, to this add configuration options in the config file for the size and color of the study dots.

 

Resources

Github Earth Project - The original base project
Natural Earth - vector data used in the Globe
StudyInfo-HBGD.csv : This file contains the details about studies  that you are required to display. It is available in data/folder of the source code



Final Submission Guidelines

- Include a zip file containing your submission.
- Update the existing deployment guide in markdown format.
- Include a vidoe demonstration of your solution.

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30055879