Zero to One : How to Integrate a Graphical Editor in a Cloud IDE (27.10.2021)
0 likes•129 views
The document describes the integration of a graphical editor into a cloud IDE through the Sirius web framework, allowing for modeling applications in a web environment. It details features such as a model server with a GraphQL API, customizable tools for domain-specific needs, and support for collaborative projects with access control. It also outlines setup instructions and provides sample code for configuring and interacting with the system using popular IDEs like VS Code and Theia.
![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"
},
]
},
…
}](https://image.slidesharecdn.com/eclipsecon2021-ocp-vscode-211116084736/85/Zero-to-One-How-to-Integrate-a-Graphical-Editor-in-a-Cloud-IDE-27-10-2021-20-320.jpg)
![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 {
...
}](https://image.slidesharecdn.com/eclipsecon2021-ocp-vscode-211116084736/85/Zero-to-One-How-to-Integrate-a-Graphical-Editor-in-a-Cloud-IDE-27-10-2021-21-320.jpg)
![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);
});
}](https://image.slidesharecdn.com/eclipsecon2021-ocp-vscode-211116084736/85/Zero-to-One-How-to-Integrate-a-Graphical-Editor-in-a-Cloud-IDE-27-10-2021-22-320.jpg)
![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
}
}
}
}
}
`;](https://image.slidesharecdn.com/eclipsecon2021-ocp-vscode-211116084736/85/Zero-to-One-How-to-Integrate-a-Graphical-Editor-in-a-Cloud-IDE-27-10-2021-24-320.jpg)
![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);
}
});](https://image.slidesharecdn.com/eclipsecon2021-ocp-vscode-211116084736/85/Zero-to-One-How-to-Integrate-a-Graphical-Editor-in-a-Cloud-IDE-27-10-2021-25-320.jpg)
![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(() => {});
}, []);
}](https://image.slidesharecdn.com/eclipsecon2021-ocp-vscode-211116084736/85/Zero-to-One-How-to-Integrate-a-Graphical-Editor-in-a-Cloud-IDE-27-10-2021-38-320.jpg)
Zero to One : How to Integrate a Graphical Editor in a Cloud IDE (27.10.2021)
- 1. ZERO TO ONE: How to integrate a graphical editor in a cloud IDE Stéphane Bégaudeau Sirius Web Architect [email protected] | sbegaudeau Axel Richard Web & Modeling Consultant [email protected] | @_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
- 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
- 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
- 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!