Image Analytics Prototype Challenge

Challenge Objectives

• Build the Image Analytics prototype pages based on the provided UI Design and wireframe.
• Responsive Web App

Project Background

• The purpose of this project is to develop a web application that will be used to run, track, and analyze test results. 
• The application will be used by operators, manufacturing, R&D, and engineers.

Technology Stack

• Angular 7
• HTML5
• Javascript
• CSS

Screen Requirements

1. Login

• Simulate login error
• After successful login, user will be redirected to the Home screen

���2. Home

• Click any row number will be mark that row as checked
• Clicking the “Sweep” button will check all rows (see 01_02_02_Home_All_Sweep@2x.png)
• Checked row can be uncheck
• If any of the row is checked, the “Sweep Selected” and “Cancel” button will show and hide the “Sweep” button
• Clicking the “Cancel” button will uncheck all checked items and hide the “Sweep Selected” and “Cancel” buttons and show the “Sweep” button
• Clicking on any row (or card when in Grid view) links to the Running Test Details screen
• Search features offer auto-suggest functionality ( see 01_02_09_Home_New_Grid_Search@2x.png )
• Filters will show filter screen as shown in 01_02_10_Home_New_Grid_Filter@2x.png
  • Follow the drop down design
  • Implement the Calendar functionality
• Implement the “Refresh” and the “Ellipsis” dot popup functionalities as shown in screen 01_02_03_Home_All_Sweep@2x.png and 01_02_04_Home_All_Sweep@2x.png
• The statistic cards at the top should be clickable and act like a filtered display
  • The content for the New, Running, and Paused will have different actions
  • Implement the popup for the “Stop” action as shown in “01_02_07_Home_New_Are you sure do you want to about this operation@2x.png”
• The colors of the progress bar depends on the test status
  • Red for failed
  • Orange for running
  • Blue for completed
  • Gray for paused
• Implement Grid / List screen views
• Implement the dropdown functionality in the user avatar, see the wireframe for this functionality
• Other functionality shown in the wireframe should be implemented

3. General Settings

• “Discard” button will redirect to the Home screen
• “Save Changes” button when clicked will animate the success message to show up, see 01_03_02_General Settings_Congratulations@2x.png
• “New Test” button redirects to Create New Test screen

4. Running Test Details

• Logs are like accordion type and can be opened more than one at a time
• Different icons below the page title will do different actions, these are:
  • Duplicate Test
  • Edit Test
  • Activity Infos
  • Other Variables
  • Delete Test
• Implement the same actions functionalities as shown in the wireframe for each Test items
• Clicking the “Settings” icon will animate to show the filter settings as shown in 01_04_05_Test Settings@2x.png
  • Fields are dynamic and should be based on an XML file
• Clicking on the row item number will mark it checked, then the “Sweep” button will hide and show the “Sweep Selected” button
• Checked item can be toggled to uncheck
• Clicking any small/thumb image will show in the image in the bigger container
• Clicking the “Maximize” icon will make the image section occupies the whole screen, see 01_04_04_Running Test Details _Enlarge@2x.png
• Clicking the “Minimize” icon will restore back the image section size
• Log Search features will provide auto-suggest functionality
• Log Filters will be a context menu with the following options:
  • Service - Static data
  • Algorithm - Dynamic Data
  • Pattern - Dynamic Data
  • Micro pattern - Dynamic Data
  • Macro Pattern - Dynamic Data
  • Measured state - Static Data
• Other functionality shown in the wireframe should be implemented

5. Create New Test

• On Select Test Files
  • User should be able to open a file dialog box to browse an XML to upload
  • User can also drag and drop a file to upload
  • Only one file should be selected for a test
• Select Image Sources will just be a dropdown options
• Select Test Parameters, some of the dropdown options are dynamic fields based on the selected/uploaded XML file while some are static/hardcoded. Need to simulate this implementation.
• On user clicks the “Create Test” button, it will lead to the New Test Details screen

6. New Test Details

• This screen will be almost identical to the Running Test Details including its functionalities except for some features as shown in the design and wireframe

Note: Wireframe will be provided for just a reference only for functionality, you still need to follow the provided design for the UI.

IMPORTANT REQUIREMENTS

• Prototype should use configurable field names and validation messages (Key and Values are Defined in JSON file)
• Implement field level validation (error message should be displayed below the mandatory fields)
• Show loading spinners when populating data from API / local JSON to UI
• No linting errors
• No errors with prod builds
• Please follow provided designs accurately, follow fonts, colors, padding, margins everything.

GENERAL REQUIREMENTS

• Must use Angular 7 and follow the provided design.
• The main content should have fluid width to fill all the available space.
• Pagination should work whenever applicable.
• Must follow Angular best coding practices
• You are expected to create a detailed README file including information on how to setup, run and verify your application.

HTML REQUIREMENTS

• HTML should be valid HTML5 compliant.
• Provide comments on the page elements 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 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.

CODE REQUIREMENTS

• 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.
• Do not create a single .css/.scss file for the whole app. Each component should have its own stylesheet file.
• Ensure that there are no lint errors.
• All CSS naming should not have any conflicts.
• You’re free to choose between CSS & SCSS but you need to use flex instead of float.
• Follow a clean folder structure.
• Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
• Make sure npm run build works without any errors.

JAVASCRIPT REQUIREMENTS

• 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 typescript and linter for code quality 

LICENSES & ATTRIBUTION

• Third-party assets used to build your item must be properly licensed and free for commercial use. MIT and Apache v2 licenses are ok, for any others please check with us to get approval first.
• Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online. 

BROWSER REQUIREMENTS

• Windows: IE 11+, Chrome Latest, Firefox Latest
• Mac: Safari Latest, Chrome Latest, Firefox Latest
• Mobile: Safari / Chrome on iPhone, Chrome on Android devices

Final Submission Guidelines

Submission Deliverable

• Source code
• Deployment Guide and Verification Guide