Register
Submit a solution
The challenge is finished.

Challenge Overview

Welcome to Anemoi Data Pipeline UI Prototype Contest - Part 3 contest. This is the third in a series of UI Prototype contests where we would like you to build a user interface for our clients Data Pipeline Project.

 

IMPORTANT!

Members from certain countries are restricted from working on this challenge, due to the client’s company policy. Challenge submissions cannot be accepted from members registered in a country with a score of 37 or less according to Transparency International's Corruption Perception Index 2015. This includes reviewers too.

Unfortunately if your country is highlighted in red in the following sheet your submission WILL NOT be accepted. This is NOT a new Topcoder policy or something that will become a normal part of future challenges. This is an isolated policy and requirement for this specific client and their challenges. Thank you for your understanding.

https://docs.google.com/spreadsheets/d/1MFZCGwIqgllzWBJuh2adC_BRCCG4kZwN1m8j4ZgbuLc/edit?usp=sharing

 

Set up

  • The base HTML, CSS and Javascript can be found in the Git repository here. Fork this repository and work of this branch. Note that the branch has been automatically selected for you - the feature/30053248_UI_Prototype_3 branch.

  • The additional assets (.png and .psd files) you will need to complete this project can be found in this Git repository here

  • Please contact the co-pilot to gain access to the repositories

 

Project Overview

The goal of this challenge is to design a web front-end that manages a set of pipelines for processing data. The application is responsible for acquiring data into the system and then coordinating the storage and analysis of that data. The application allows the user to configure a pipeline, as well as manage previously built pipelines. It additionally provides standard patterns for data logging and metric collection.The structure and high-level workflow is similar to Apache nifi and AWS CloudFormation Designer.

 

Contest Overview

We ran a Design contest previously where we created multiple screens for the Data Pipeline project. Following that Design contest we launched the first of the UI prototypes contests, the output of which you will used as a basis for building out the remainder of the web application. There is also a second UI prototype contest running in parallel this contest to build out another set of screens.

 

As part of this contest, we would like you to take the HTML / CSS from the previous UI prototype and the output of the Design contest to build the screens that were created as part of the design contest and create the remainder of the HTML / CSS Prototype for our client. We expect your work to be significantly reduced since you can reuse the existing elements to build the additional screens in scope for this contest. However, in the process, kindly ensure that the existing prototype continues to function as it does currently and that your changes do not introduce any side effects to it.

 

The primary task for this challenge is to build the drag and drop Pipeline Editor. Only the following screens are in scope for this contest:

  1. Pipeline Editor

    1. New Pipeline

    2. Add / Configure Acquirer

    3. New / Configure Data Store

    4. New / Configure Process / Stages

    5. New / Configure Data Accessor

    6. New from Existing Pipeline

    7. Delete Pipeline

    8. Zoom In/Out of Pipeline

    9. Layouts for 2560x1440 display

 

UI Prototype Page Requirements

Below are the required pages for this prototype to be integrated with the screens developed in the first UI prototype contest.

 

Please note the overall layout and design of the Pipeline Editor in the image below.

 

 

  1. “Pipeline Editor” screen - 1280 width

    1. New Pipeline

      1. User clicks on “+NEW PIPELINE”, as seen in the “My Pipelines” list view (this screen was built in the previous contest)

      2. User is presented with the Pipeline Editor. Refer to 05_1_New_Pipeline_1280.png

      3. They can enter the Pipeline Name and Description. This information is not mandatory until they “Save as Draft” or “Submit”. Note, the “Save as Draft” and “Submit” buttons have no action.

      4. Please refer to the designers notes in 05_2_New_Pipeline_1280.png for more details. Do not add these notes to the actually page, they are there for your guidance.

    2. Add / Configure Acquirer

      1. User drags the “Acquirer” object on to the Pipeline Editor canvas in 05_3_New_Pipeline_1280.png

      2. User configures the “Acquirer”. Refer to the designer notes and user flow in 05_4_New_Pipeline_1280.png, 05_5_New_Pipeline_1280.png, 05_6_New_Pipeline_1280.png and 05_7_New_Pipeline_1280.png

      3. The “Connected to…” field displays a list Data Stores for the user to select. The user can leave this field blank.

      4. User right-clicks on the object to display a menu. They click “Duplicate” to create a copy of the object on the canvas. The “Documentation” option has no action. Refer to 05_8_New_Pipeline_1280.png. 05_9_New_Pipeline_1280.png and 05_10_New_Pipeline_1280.png. “Delete” option should delete the component with a prompt, like the “Delete Pipeline” prompt in 07_6_pipeline_detail_1280.png, except the prompt should be attached the object to be deleted.

      5. User updates the information for the duplicated Acquirer, selecting Data Store XX in 05_10_New_Pipeline_1280.png. The Data Store XX is then automatically added to the canvas and connected to the Acquirer as in 05_12_New_Pipeline_1280.png

      6. When no objects are selected the pipeline info panel is show. See 05_11_New_Pipeline_1280.png

    3. New / Configure Data Store

      1. Users drags a “Data Store” object on to the canvas in 05_13_New_Pipeline_1280.png. The user configures the Data Store and wires it up to the Acquirer in 05_14_New_Pipeline_1280.png and 05_15_New_Pipeline_1280.png.

    4. New / Configure Process / Stages

      1. User drags a “Process” object on to the canvas in 05_16_New_Pipeline_1280.png and adds a Name and selects an “Execution Engine” (assume Execution Engines already exist).

      2. User adds a series of stages to the Process and configures them in 05_17_New_Pipeline_1280.png, 05_18_New_Pipeline_1280.png, 05_19_New_Pipeline_1280.png and 05_20_New_Pipeline_1280.png. The Stage Name gets updated on the canvas when the Stage Type is selected.

    5. New / Configure Data Accessor

      1. User drags a “Data Accessor” object on to the canvas in 05_21_New_Pipeline_1280.png and configures.

    6. Pipeline information

      1. When no objects are selected, the Pipeline Information panel appears as in 05_22_New_Pipeline_1280.png

      2. In this example the “Acquirer01” is missing a parameter value so the user selects and updates the parameter in 05_23_New_Pipeline_1280.png and closes the panel in 05_24_New_Pipeline_1280.png

    7. “New from Existing Pipelines”

      1. User selects “Create a copy of an existing pipeline” in 13_1_New_From_Existing_Pipelines.png

      2. User is presented with a list of their existing pipelines in 13_2_New_From_Existing_Pipelines.png. User selects a pipeline from the list and then clicks the “Select” button

      3. New Pipeline is created from the Existing Pipeline. User is prompted to enter a Name and Description for the Pipeline in 13_3_New_From_Existing_Pipelines.png. Note warning to user to “Confirm or adjust parameters” for each of the pipeline objects

      4. Before the user can “Submit” or “Save as Draft” the pipeline they must select each pipeline object on the canvas or from the “Pipeline Objects” list confirm the selected parameters by clicking the “Confirm selected parameters” button in 13_3_New_From_Existing_Pipelines.png

 

  1. Zoom In/Out of Pipeline

    1. The user can zoom in and out of the canvas using “+” and “-” and the scroll wheel. Use sensible increments for the values. See 05_25_New_Pipeline_1280.png.

    2. The “Zoom to Fit” button centers the Pipeline on the canvas and adjusts the level of Zoom so that the entire Pipeline is visible. Refer to 05_24_New_Pipeline_1280.png

  2. Delete Pipeline

    1. When clicking “Delete” the user is prompted as to whether they would like to delete the pipeline as in 05_26_New_Pipeline_1280.png. “Yes, Delete” and “Cancel” have no action, pop-up should close after they are clicked.

  3. Layouts for 2560x1440 display

    1. Refer to 06_1_New_Pipeline_1280.png, 06_2_New_Pipeline_1280.png and 06_3_New_Pipeline_1280.png

    2. Please make sure your prototype follows the layout for these screens when the screen resolution is equal to or above 2560x1440

 

In addition to the above points, kindly note the following:

  1. This a non-functional prototype.

  2. Use texts wherever possible. Images are only for icons and logos. “Pipeline Editor” itself will be a text.

  3. Graphs are static images that can extracted from the design repo. However, feel free to use d3.js and dummy data to simulate the graphs if you prefer.

  4. Use Arial font for the screens everywhere.

  5. In the “UI Prototype Page Requirements” section above where the screen resolution requirement is “1280 width” i.e. 1280x1024, the screen layout should be identical for all resolutions. Some screens are explicitly designed for “2560 width” i.e. 2560x1440, please ensure your prototype uses the specified layout at this resolution and above.

 

Client Priorities (The items that are considered highest prototype priorities):

  • Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.

  • All elements should be Pixel Precisions, pay attention to padding, margin, line-height, etc.

  • Matching the storyboards (as close as possible) across the required browsers.

 

CODE REQUIREMENTS

HTML5

  • Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.

  • Please use clean INDENTATION for all HTML code so future developers can follow the code.

  • All HTML code naming should not have any conflicts or errors.

  • Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)

  • Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.

  • No inline CSS styles- all styles must be placed in an external stylesheet.

  • Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.

 

CSS3

  • Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.

  • Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.

  • Please use clean INDENTATION for all CSS so developers can follow the code.

  • All CSS naming should not have any conflicts.

  • As possible use CSS3 style when create all styling.

  • You MUST use SASS to make the CSS code clean, provide source files on your submission.

  • Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.

 

Javascript

  • Keep Javascript use to a minimum. Use CSS wherever possible to achieve dynamic behaviour. Where dynamic behaviour cannot be achieved using CSS, you have permission to Javascript libraries (e.g. jQuery). Please DO NOT use Javascript frameworks (e.g. AngularJS).

  • To create the drag ‘n’ drop canvas, you can use JointJShttp://jointjs.com/download . Please use the Core Library and not the paid Rappid library.

  • All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.

  • Use bower for any third party libraries. Your submission should not ship with these files. Only provide a bower.json file (and an optional .bowerrc file) mentioning the dependencies.

 

Desktop Browsers Requirements

Windows & Mac OS

  • IE11+

  • Chrome (latest version)

 

Tablet/Mobile

Not required

 



Final Submission Guidelines

Before submitting, make sure that your HTML , CSS and Javascript codes have been validated and there are no errors. In case of any exceptions that the reviewer needs to make, specify this in your README file. Verify that it meets all the requirements mentioned earlier.

 

  1. Upload your code as a .zip file to the Submit and Review tool for this contest.

  2. Upload documentation for how to run your submission

  3. Winner will be required to submit a pull request against the branch specified
  4. We will require the winner’s assistance when we merge code from the other UI contest running in parallel to this contest

ELIGIBLE EVENTS:

2016 TopCoder(R) Open

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30053550