Frontend API

export class GLComponent implements OnInit

This component implements Golden Layout, the main component above the topbar on the workspace view. Golden Layout is a multi-screen layout manager for webapps. A multi-screen layout manager is a component that is composed of windows, similar to OS’s desktop windows. Those windows can be redimensionned and moved all over the layout manager. Each window act as a container for any HTML code.

On the developer perspective, the other components are developed without any constraint.

In this app, we use Golden Layout to maximize the view’s customization. So that the user can create her own working environnement.

This Angular Component implements all the configuration of the Golden Layout component and imports all the components to use into it.

Created by antoine on 07/06/17.

async ngOnInit()

On init, create the GoldenLayout instance, retrieve and share the event hub, register the UI components that will be available from Golden Layout and initialize the layout to display it.

• Returns: Promise<void> — ignored promise.

openWindow (node: Node)

Open the detailed view for the given Node. If already opened, will show it.

• Parameters: node — the node to display the detailed view for.

closeWindow (node: Node)

Close the given node’s detailed view.

• Parameters: node — the node to close the detailed view for.

updateTabName (node: Node)

Update the label of the tab of the given node’s detailed view to reflect the node’s name.

• Parameters: node — the node to use

getGLItem (node: Node): any

Returns the detailed view’s of the given node. This detailed view is a Golden Layout’s item.

Item’s documentation

• Parameters: node —
• Returns: any —

showGraph ()

Show the graph window. Reopen it if closed.

showComponentsList ()

Show the window containing the list of components that can be used to create the workflow. Reopen it if closed.

showFileExplorer ()

Show the graph window. Reopen it if closed.

showWindow (id: string, componentName: string, title: string, addToRoot: boolean): void

Show the window of the component with the given id. If closed, reopen it with the given component, tab’s title and, display it either in the root layout or in the main-stack.

• Parameters:

  • id — id of the window
  • componentName — name of the component to use if it’s needed to recreate the window
  • title — title to use for the tab if it’s needed to recreate the window

  • addToRoot — use only if it’s needed to recreate the window. In this case, if true, add the

    window in the root element, else add it into the main stack created in the constructor.

addToRoot (item: object)

Add the given item into the root element of the GL’s layout. Reconfigure the root element if needed.

• Parameters: item — the new item to add

reconfigureLayout ()

Reconfigure the layout of the Golden Layout element if the rootEl have been deleted and replaced with a single element.

addToMainStack (item: object)

Add the given item into the main stack element of the GL’s layout. Reconfigure the layout if needed.

• Parameters: item — the item to add

registerLayoutComponent (name: string, component: any)

Register the given component as a GolenLayout component.

• Parameters:
  • name — the name of the component. Can be use to query components and create new windows.
  • component —

configureEventHubListeners ()

Subscribe to useful events and bind events to the proper method calls.

It subscribes to : - openWindow : when the user wants to display a block’s detailed view - closeWindow : when the user wants to close a block’s detailed view - blockNameChanged : when the user change a block’s name - gl-component:show-graph : to display the graph’s window - gl-component:show-components-list : to display the components list’s window - gl-component:show-file-explorer : to display the file explorer’s window

@HostListener(‘window:resize’, [‘$event’]) onResize()

Add a HostListener on the window:resize event to update the layout size when the user resize the browser window.

sleep(ms: number)

Pause the execution for the given amount of milliseconds.

• Parameters: ms — the amount of milliseconds to pause the execution.
• Returns: Promise<T> — ignored promise