Going from Java code to DSL & EMF generation enables us to scale our creation of domain specific tooling in ways that aren't possible with a code only approach—which is a good thing! But as we provide desktop applications, one must examine and address the deployment and maintenance questions. The truth is that desktop applications are not very good at solving these issues. By introducing Sirius Web, our goal is not only to provide a way to render graphical modelers in your browser but also to go one step further by providing a full web experience from your first DSL concept to your end user graphical studio entirely in the browser and fully integrated in your Cloud IDE. In this session, we’ll present for the first time, how to integrate a graphical designer to VS Code and Theia. The demo will show how to get in one breath in your Cloud IDE: your graphical editor your model explorer your properties views …all provided by one powerful framework, Sirius Web! We will demonstrate all examples using 100% open-source software, live and in real time. Video available here: https://www.youtube.com/watch?v=5nILfPp1OY4

1. ZERO TO ONE:
How to integrate a graphical editor in a cloud IDE
Stéphane Bégaudeau
Sirius Web Architect
stephane.begaudeau@obeo.fr | sbegaudeau
Axel Richard
Web & Modeling Consultant
axel.richard@obeo.fr | @_axelrichard_

2. Sirius Web
■ Everything you liked in Sirius Desktop, available on a modern cloud-based stack
■ Graphical and Domain specific tooling
■ Defined by a configuration file
■ Deployed on a web server
■ Rendered in a web browser
■ Collaborative support
https://www.eclipse.org/sirius/sirius-web.html

3. What’s in Sirius Web?
READY-TO-USE
Modeling framework
to define and render
graphical applications
in the web

4. What’s in Sirius Web?
READY-TO-USE
Modeling framework
to define and render
graphical applications
in the web MODEL SERVER
Open source model
server components
with a GraphQL API

5. What’s in Sirius Web?
READY-TO-USE
Modeling framework
to define and render
graphical applications
in the web MODEL SERVER
MODEL APPLICATION
Open source model
application (diagram,
properties, forms…)
Open source model
server components
with a GraphQL API

6. Built on top of awesome technologies

7. Obeo Cloud Platform
■ All of Sirius Web with additional collaborative and access control features
■ Authentication and authorization
■ Public/Private projects
■ Role based access control
■ Indicators of active users
https://www.obeosoft.com/en/products/obeo-studio

8. Completely customizable
■ Configure Sirius Web and OCP with the concepts from your domain
■ Define the graphical representation that you need
■ Diagrams
■ Tools
■ Forms
■ Validation
■ Import existing Sirius desktop configuration easily

9. Integration in cloud IDEs
MODEL SERVER
Leverage our GraphQL API
over HTTP and WebSocket to
interact with your servers
GRAPHICAL EDITORS
Manipulate your Sirius Web
graphical editors from your
IDE (diagrams, forms, etc)
VS CODE / THEIA
All that packaged as an
extension for VS Code and
Theia

10. Getting started
■ To start integrating Sirius Web in a cloud IDE, you’ll need
■ The latest release of @eclipse-sirius/sirius-components
■ React components for our graphical editors
■ An instance of a Sirius Web server
■ HTTP and WebSocket GraphQL API

13. DEMO

14. Integration in VS Code
■ TreeViews
■ Servers, projects & representations
■ Model explorer
■ Webview
■ Diagram editor
■ Properties editor

15. Server TreeView
■ Register new Sirius Web / OCP servers

16. Server TreeView
■ Register new Sirius Web / OCP servers

18. Node

19. Node HTML Document

20. Server TreeView - package.json
"contributes": {
"viewsContainers": {
"activitybar": [
{
"id": "siriusweb-view-container",
"title": "Sirius",
"icon": "images/icon_32.png"
}
]
},
"views": {
"siriusweb-view-container": [
{
"id": "siriusweb.serversView",
"name": "Servers"
},
]
},
…
}

21. Server TreeView
■ Register tree data provider in extension.ts
■ Implement TreeDataProvider & extend TreeItem
export function activate(context: vscode.ExtensionContext) {
const serversViewProvider = new ServersViewProvider(...);
vscode.window.registerTreeDataProvider('siriusweb.serversView', serversViewProvider);
}
export class ServersViewProvider implements TreeDataProvider<ServerItem> {
…
getChildren(element?: ServerItem): ProviderResult<ServerItem[]> {
...
}
}
export class ServerItem extends TreeItem {
...
}

22. Server TreeView
■ Perform the authentication to support Obeo Cloud Platform
import axios from 'axios';
private connectToServer(): Promise<boolean> {
const authenticateURL = `${this.serverAddress}/api/authenticate`;
const params = new URLSearchParams({ username: this.username, password: this.password, 'remember-me': 'true' });
return axios
.post(authenticateURL, params.toString())
.then((response) => {
if (response.status !== 200) {
return Promise.reject(false);
} else {
this.cookie = response.headers['set-cookie'][0];
return Promise.resolve(true);
}
})
.catch((error) => {
return Promise.reject(false);
});
}

23. Project TreeView
■ Used to manipulate Sirius Web / OCP projects
■ Leverage our GraphQL API over HTTP

24. Project TreeView
■ Retrieve the projects using a GraphQL query
private fetchProjects(): Promise<ProjectData[]> {
const queryURL = `${this.serverAddress}/api/graphql`;
const headers = { headers: { Cookie: this.cookie } };
const graphQLQuery = `
query getProjects($page: Int!) {
viewer {
id
projects(page: $page) {
edges {
node {
id
name
visibility
}
}
}
}
}
`;

25. Project TreeView
■ Then process the result to display the data in the TreeView
return axios.post(
queryURL,
{
query: graphQLQuery,
variables: { page: 0 },
},
headers
)
.then((response) => {
if (response.status !== 200) {
return Promise.reject([]);
} else {
const projectsData = [];
// Transform response.data into projects
return Promise.resolve(this.projectsData);
}
});

26. Representations TreeView
■ Same logic as in the previous TreeView
■ GraphQL query over HTTP
■ Updated when the project selected changes

27. Explorer TreeView
■ Used to display the model elements from the project
■ Based on the configuration of the explorer of the server
■ Can be parameterized
■ Based on a tree representation
■ Using a GraphQL subscription for real time update
■ Based on the graphql-ws protocol

28. Explorer TreeView

29. Explorer TreeView
■ When the connection is established, we will send out a start message
■ Used to subscribe to events from a GraphQL subscription
■ It allows us to receive updates in real time

30. Explorer TreeView
■ After that, we will receive messages for each event
■ Refresh events will be used to give us the new data structure to display

32. VS Code WebView

34. VS Code WebView
public static getWebviewContent(webView: vscode.Webview, webViewContext: WebViewContext): string {
const reactAppPathOnDisk = vscode.Uri.file(path.join(webViewContext.extensionPath, 'siriusweb', 'siriusweb.js'));
const reactAppUri = webView.asWebviewUri(reactAppPathOnDisk);
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${webViewContext.representationLabel}</title>
<script>
window.acquireVsCodeApi = acquireVsCodeApi;
window.serverAddress = '${webViewContext.serverAddress}';
window.username = '${webViewContext.username}';
window.password = '${webViewContext.password}';
window.editingContextId = '${webViewContext.editingContextId}';
window.representationId = '${webViewContext.representationId}';
window.representationLabel = '${webViewContext.representationLabel}';
window.representationKind = '${webViewContext.representationKind}';
</script>
</head>
<body>
<script src="${reactAppUri}"></script>
</body>
</html>`;
}

35. VS Code WebView

36. VS Code WebView

37. VS Code WebView
import { DiagramWebSocketContainer, PropertiesWebSocketContainer, Selection } from '@eclipse-sirius/sirius-components';
export const App = ({...}: AppProps) => {
let component;
if (representationKind === 'Diagram') {
component = (
<DiagramWebSocketContainer
editingContextId={state.editingContextId}
representationId={state.representationId}
readOnly={false}
selection={state.selection}
setSelection={setSelection}
/>
);
} else {
component = (
<PropertiesWebSocketContainer
editingContextId={state.editingContextId}
readOnly={false}
selection={state.selection}
/>
);
}
}

38. VS Code WebView
export const App = ({...}: AppProps) => {
useEffect(() => {
fetch(`${serverAddress}/api/authenticate`, {
method: 'POST',
credentials: 'include',
mode: 'cors',
body: new URLSearchParams({ username, password, 'remember-me': 'true' }),
})
.then(() => {
setState((prevState) => {
return { ...prevState, authenticate: true };
});
})
.catch(() => {});
}, []);
}

48. From VS Code to Theia

49. Integration in Theia

50. Integration in Theia
■ Package vscode extension as VSIX file
■ Run vsce from the VSCode extension folder
■ Put the VSIX file created in the Theia extensions folder
■ Run Theia

51. DEMO

52. Thank you!