Front End Architecture
This is the main workhorse service of SBOLCanvas. It is responsible for manipulating the mxGraph structure that represents a diagram. It has been split into four classes to keep organization clean. These classes are
- graph.service.ts - Contains all of the public methods that components or other services may need access to.
- graph-helpers.ts - Contains all helper methods that shouldn't be public outside of the graph service.
- graph-base.ts - Contains all initialization code and extensions for mxGraph objects.
- graph-edits.ts - Contains edit classes that are necessary for undo/redo history.
The files service handles any REST requests that convert data models, loads and stores files locally or from SynBioHub, and querying SynBioHub for parts.
The glyph service handles loading stencils for use in rendering.
The Login service handles login to SynBioHub instances, and keeping track of user tokens.
Used to share variables across multiple classes without causing blocking issues.
Components are Angular's way of defining graphical components.
The SBOLCanvas logo on the toolbar.
The main editing area of canvas.
Popup that appears from the 'Create Collection' button on the Upload component. Used to create a new collection on SynBioHub.
A wrapper around the color picker that shows up under the design menu.
A popup that allows editing of combinatorial designs. Can be opened by creating a new component design, selecting a component, and clicking 'Edit Combinatorial Design' in the bottom of the info menu.
Generic confirm (yes/no). Mainly used to inform the user of a ownership change.
Right Sidebar of SBOLCanvas under the 'Design' tab. Gathers information from all selected parts, and changes various design aspects, such as fill and stroke color, font size, arrow spacing, and line shape.
Popup that appears after File->Download, clicking 'Import Part' at the bottom of the Info menu, or adding variants in the Combinatorial editor. Used to download a design from SynBioHub.
Popup that appears when an error occurs. Primarily used in the http.interceptor to detect a problem with a REST request.
Popup that appears after File->Export File. Used to export the current design to one of the supported formats.
Popup that appears after File->Export Image. Used to export the current design as one of the supported image types.
Popup that appears after selecting a design from the Download Component (assuming that any associated combinatorials were found for the design). Let's the user select which combinatorial to download, or none if cancelled.
Left sidebar of SBOLCanvas. Used to drag and drop parts into the main editing area.
Root component of SBOLCanvas. Contains the toolbar, sidebars, and editing area.
Right sidebar of SBOLCanvas under the Info tab. Automatically populated based on the selection in the Graph Service.
Separate page opened by clicking the Help->About button on the toolbar. Contains information about SBOLCanvas' development and developers.
Popup that appears after File->Load. Lets the user select a file to convert to mxGraph and load in the editing area.
Popup that appears after clicking the "Login" button on various other popups. Lets the user login to a SynBioHub instance.
The top bar of SBOLCanvas. 'File', 'View', 'Help', etc...
Separate page opened by clicking the Help->Tutorial button on the toolbar. Contains a text/image tutorial on how to use SBOLCanvas.
Popup opened after File->Upload. Used to upload a design to SynBioHub.
Primarily used to store and ferry data to the backend.
- canvasAnnotation - Translates to SBOL's Annotation
- combinatorialInfo - Translates to SBOL's Combinatorial
- variableComponentInfo - Translates to SBOL's VariableComponent
- glyphInfo - Translates to SBOL's ComponentDefinition
- identifiedInfo - JSON esque data container that represents the results of a SynBioHub query, such as parts in a collection.
- interactionInfo - Translates loosely to SBOL's Interaction, and Participation
- moduleInfo - Translates to SBOL's ModuleDefinition
- style-info - Passed to and from the design menu, and graph service.
- CustomShapes - Class used to create custom mxGraph shapes. Mainly used to create a custom Component shape that supports rendering indicators such as missing sequence, combinatorial part, and composite.
- http.interceptor - Used to intercept http requests, and display the Error component if a request returned a not ok response.
- environments/* - In essence, global variables that will get swapped out depending on development/deployment builds. versions.ts will be automatically changed to contain the most recent git hash on docker build.