SLD Editor Challenge #1

Challenge Objectives
RCS is an Asset Reliability Centered Business Performance Tool, specifically designed for Power Grids and Substations asset reliability management. For this project, we are going to run a series of prototype challenges to build a web based UI for the tool.
 
Challenge Objectives
There’s an important module called SLD (Single Line Diagram) editor in the tool, which is an editor used to create diagrams.
 
For the purpose of this challenge, we need the community to help build an SLD Editor using GoJS, that covers the basic functionality of such an editor. Please keep reading to find out details.
 
Technology Stack

• GoJS
• AngularJS 6
• HTML5
• Javascript
• CSS

 
Challenge Requirements
The purpose of this challenge is to build a web based SLD Editor covering the following:

• Use GoJS as base, and build a custom editor that uses the set of custom items, you’ll need to cut them out of AssetImages.png and it’s ok if they don’t look great.
• The editor must be fully usable, at a minimum we expect the following features to be working:
  • Create a new diagram
  • Add items to the diagram by dragging and dropping items from right panel
  • Remove items from the diagram
  • Connect the items
  • Edit components metadata, metadata popup will be displayed on right click of components. Check below for detailed metadata requirements:
    • Data-Model-AIS-MV-Disconnector-Switch.xlsx: 
    • Data-Model-AIS-MV-Ground-Switch.xlsx: 
    • Data-Model-MV-AIS-Fuse.xlsx: 
  • Zoom the diagram - scroll up/down using the mouse scroll wheel while holding down Ctrl
  • Select multiple diagram items - hold down Ctrl and click to select/deselect items
  • Select multiple diagram items - hold the left mouse button down and drag across an area of the diagram
  • Rotate selected item – select an equipment and drag the rotation handle or press Ctrl + R
  • Resize selected diagram item - select an item and drag one of the resize handles and all edit menu options, that are already there in gojs
  • Move a diagram item - drag it with the mouse
  • Move multiple diagram item - select  and drag
  • Select a single item - click
  • Print the diagram
• Make this editor reusable as an Angular 6 component, and demonstrate this using an Angular 6 based web app. We plan to integrate this editor into another bigger Angular 6 web app later so making it reusable / easy to integrate is important.
• You don’t have to worry too much about the overall look & feel of the editor / web app, just make sure the above mentioned features are working properly on a simple UI.
• You are expected to create a detailed README file including information on how to setup, run and verify your application.

 
Bonus Prizes

Top 2 winners will get an extra bonus of $200 if the post-appeals score is over 90.
 
HTML Requirements

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

 
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. We should try to keep gojs core library untouched and only create extensions to support what we need.
• 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

• Developers need to follow GoJS licensing terms.
• 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
Tablets: Safari / Chrome on iPad, Chrome on Android Tablets
 
Documentation
Register to download the following documents we provided in the forum

• Widgets to be used in the editor
• Functional Spec for SLD (reference only)
• Screencasts of existing SDL Editor

 
 

Final Submission Guidelines

• Full code that covers all the requirements.
• A detailed README file including information on how to setup and run your application.