In this challenge we are doing multiple changes and improvements to the Myyna Web Application.

Project Overview

The Planetary Data System (PDS http://pds.nasa.gov/) is an archive of data from NASA’s planetary missions. The mission data (called products) can be raw images, time-series data  or text documents.

While this treasure trove of information is accessible to the public, utilization has been somewhat limited by barriers to entry such as required expertise on the domain, and familiarity with the data format.

The goal of this (PDS Storyboard) project is to develop a web application that will make the data easier to find and use by a wider range of people. PDS data is only as valuable as the ease of access and adoption – and NASA wants to make sure all this valuable mission data reaches a broader audience to further scientific discovery and research.

We are building a basic web application version. We are starting by reusing an open source web application called myyna. The point is to create a Pinterest-like social web application that address the need to make PDS data more accessible, and foster greater use of the available resources through collaboration and ease of distribution of data and research. By making PDS data easily accessible, and providing a Pinterest-like collaboration tool, the goal is to advance research and utilization of the data. This new web application will be called the “Planetary Data Storyboard” (Or PDS).

We are customizing Myyna web application to include the features we need to implement in the first version of this PDS Storyboard web application.

Challenge Requirements

UI Prototype

Provided in challenge forums an updated UI prototype for the frontend changes requested.

Background

Update the background of header/body to match the provided UI prototype.

Header

Update the activity button in header to match the updated UI prototype.

Logo

Update logo in landing and other pages to match the one in UI prototype. The application allows uploading different logo via admin portal but the css styling is changed in UI prototype to support the smaller logo, so we need to update the css to match UI prototype so logo can look like the UI prototype.

Activity and Timeline stories

You are making changes to the /timeline UI and Activity feed (activity feed is opened when you click on clock icon in header). It is important to be know all the stories we display in the feed and timeline, we support following stories :

• Create category

• Update category

• Add user to category

• Remove user from category

• Renamed a category

• Add board

• Edit board

• Renamed a board

• Moved a board

• Add user to board

• Remove user from board

• User follow a board

• Add pin

• Edit pin

• Like a pin

• Re-pin a pin

• Comment on a pin

• User updated profile picture.

In current timeline and activity feed, when the page load we load old stories (not in real time), the loaded stories will be aggregated. You can find this information in storyModel.js.

Timeline Page

• Route : /timeline

• UI prototype page : timeline_loggedin.html

• Update the page to match the timeline design in the provided UI prototype.

• Hide the activity icon (electricity) from the /timeline page.

• When new items are added to the timeline it gets highlighted as shown in UI prototype.

• When user is scrolling the page and new items get added, then a button in header get displayed to indicate there are new stories to load, this should be implemented.

• The new timeline has following icons next to each item depends on the story VERB (the below are the css rule name of the icon - refer to UI prototype in timeline page):

  • icon_plus

    • Used in add or create action.

  • icon_multip

    • Used in remove or delete action.

  • icon_write

    • Used in update or edit action.

  • icon_fixed

    • Used in repin/pin action.

  • icon_fresh

    • Used in following action.

  • icon_unfresh

    • Used in unfollowing action.

  • icon_letter

    • Used when commenting

  • icon_praise

    • Used when voting up

• The UI prototype covers all stories types we support in our code, you only need to update the UI, it is not expected to make any backend changes.

  • In aggregation we no more show everything, we only show up to 4 items, if there are move items to show we use the + (plus) icon on the description and the 4th thumbnail.

    • For pins aggregated stories, don’t use the pin description, it should saying “Added X pins” or “Updated X pins” that’s it.

    • When clicking on the + icon take user to the user profile of the person who did the action in the story.

  • All icons under single category/board/pin widgets should be functional, this includes the date icon, heart icon, comment button/icon, board icon .. etc.

  • Clicking on comments icon will toggle the visibility of a disqus widget, the widget by default is not visible and not initialized, when user click on it first time it should be initialized only, then by clicking on the comment icon it will be toggled (hide/show)

  • Same as existing code the timeline will be updated in real time via web socket, and will support progressive scrolling (meaning that items get added when user reach bottom of the timeline)

  • If there is a story that does not exist in the timeline ask in forums and copilot will clarify its design.

Activity Feed

• We have this activity feed in all pages except /timeline page, this is displayed by clicking on “clock” icon in header.

• The clock icon will be replaced with the electricity icon as shown in UI prototype.

• Update the Activity Feed to match the provided UI prototype.

• The activity feed contains items that cover all stories we have.

• The activity feed works same as we do in the /timeline page (as mentioned under Timeline page section earlier)

• If there is an activity story not covered in UI prototype please ask in forums and copilot will clarify how it should look like.

Misc Fixes

• Update logo link, default redirect login, and Home item in Hamburger menu to take user to /timeline page instead of /pins page.

Testing

Please provide test scenarios that cover all activities/timelines stories.

General Notes

• All updates should work in responsive views (tablet and mobile)

• Update readme with deployment and configuration information.

• Update data generator if needed.

  • Data generator include the pds data generators as well.

Gitlab Access

• We have cloned the Myyna github and placed it in gitlab, user the gitlab repository as basis for your work.  https://gitlab.com/nasa-pds-storyboard/storyboard-frontend

  • You need to be logged in to view the repository.

  • The app requires nodejs 0.8.28, and mongo 2.6

Final Submission Guidelines

Deliverable

• Patch file of changes.

• Updated readme file with deployment and verification steps.

• Text file for reviewers.