TOSCA POC VIII | Canvas Network Enhancements

Welcome to the TOSCA POC VIII | Canvas Network Enhancements Challenge. In this challenge, we are looking for you to update the Angular 2+ POC application based on requirements below.

Let us know any question you have!

Technology stack

• Angular 7
• NodeJS
• HTML
• SCSS
• JavaScript

General requirements

Layout

• The POC should support resolutions 1920px x 1080px and above.
• The application layout should appear somewhat similar to the sides/images provided.
• It's NOT required to exactly match font, font-size, color, element dimension, etc because the focus is mainly on the POC functions.

Framework specific

• Imp!: Blueprint data should be fetched from YAML file for other application data JSON format mock files can be used.
• Use Observable & Observable.subscribe() method wherever applicable. You may refer this: https://angular.io/tutorial/toh-pt4#subscribe-in-heroescomponent
• Use Dependency Injection coding pattern.
• ng build should work without throwing any error.

Code formatting

• Make sure code is well documented, all classes, methods, variables, parameters, return values must be documented in every single code file, and appropriate inline comments should be provided too where the code is not straightforward to understand.
• Please use clean INDENTATION for all HTML code so future developers can follow the code.
• Use appropriate linter to validate your code.

HTML Specific

• HTML should be valid HTML5 compliant.
• 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.

CSS Specific

• Use CSS3 Media Queries to load different styles for each page. Do not build a different page for different device/layout.
• You may use SCSS in the project.

Platform

• Desktop: Chrome latest, Firefox latest (Mac & Windows), Safari latest (Mac), IE11+ (Windows), MS Edge
• IE11 is the primary browser.

App Requirement

0 Resources & links

• Refer to the forum.

1 Storyboard:

2. Canvas enhancements

Based on 1. Storyboard update:

1. The background grid layout.
2. Update the color & thickness of lines connecting blocks.
3. Update the intersection points layout from where the lines start & terminate. Ref: https://d.pr/free/i/8Yingx
4. Make the arrow on the line smaller.
5. Update the border color of square node blocks to purple. Also, update the border width to match the storyboard.
6. The border width of the selected node should be 2px. https://d.pr/free/i/2Uc2bn
7. Hide the text next to green ticks. https://d.pr/free/i/2Uc2bn
8. If a block has green ticks then it should also show the four surrounding icons like the selected node.
9. At present, it's a bit confusing to connect two blocks. A user has to click the green tick icon in order to connect two nodes. Instead of this, make the connection with the green ticked nodes on clicking the connection icon ref: https://d.pr/free/i/qlBg2I

3. Node_tempplate.yaml updates

1. Remove all the positionX: 0 & positionY: 0 from node_tempplate.yaml. After removing this drawing network should work as it's now.
2. Rename node_tempplate.yaml to base-nodes.yaml.

3. Autodraw

• Add a new Auto layout icon here: https://d.pr/free/i/NPytDW . Use any suitable icon from material icons for this icon button.
• Clicking this should auto-draw/redraw the network based on the existing algorithm.
• Right now when a user uploads a file ex: network-test.yaml using Import button the network is auto drawn based on an also. For the Auto-draw button we want to reuse the function.

4. Refreshing the page

1. Currently, on refreshing the page, the canvas network stays as it is. We are using LocalStorage to store network info. This feature should work after implementing the requirements here.