Sirius Web Advanced : Customize and Extend the Platform
1 like302 views
The document discusses Sirius Web, a cloud-based platform that offers graphical and domain-specific tooling similar to Sirius Desktop, with customization options and collaborative features. It highlights the inclusion of a modeling framework, a GraphQL API, and capabilities for representation registration and synchronization with external services. The document also details architecture for handling map representations, event processing, and integration with various applications, including guidance for using it in a web IDE.
![MapRepresentation.tsx
export const MapRepresentation = ({ editingContextId, representationId }: RepresentationComponentProps) => {
const [state, setState] = useState<MapRepresentationState>({ center: null, zoom: 10 });
useSubscription(subscription, { ... });
return (
<div>
{state.center ? (
<GoogleMapReact
bootstrapURLKeys={{ key: 'XXXXXXXXXXXX' }}
center={state.center}
zoom={state.zoom}></GoogleMapReact>
) : null}
</div>
);
};](https://image.slidesharecdn.com/siriuscon2022-220622081527-58545fa9/85/Sirius-Web-Advanced-Customize-and-Extend-the-Platform-35-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/siriuscon2022-220622081527-58545fa9/85/Sirius-Web-Advanced-Customize-and-Extend-the-Platform-57-320.jpg)
Sirius Web Advanced : Customize and Extend the Platform
- 1. Sirius Web Advanced: Customize and extend the platform Stéphane Bégaudeau Sirius Web Architect stephane.begaudeau@obeo.fr | sbegaudeau
- 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. Obeo Studio ■ 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
- 4. Completely customizable ■ Configure Sirius Web and Obeo Studio with the concepts from your domain ■ Define the graphical representation that you need ■ Diagrams ■ Tools ■ Forms ■ Validation ■ Import existing Sirius desktop configuration easily
- 5. What’s in Sirius Web? READY-TO-USE Modeling framework to define and render graphical applications in the web
- 6. 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
- 7. 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
- 8. Built on top of awesome technologies
- 9. The Sirius Web ecosystem
- 11. Code-based customization ■ Customize icons ■ Customize the child creation proposals available in the explorer ■ Advanced behavior for diagram tools ■ Java services ■ Java based representation descriptions
- 12. Provide Java services @Service public class CustomServicesProvider implements IJavaServiceProvider { @Override public List<Class<?>> getServiceClasses(View view) { return List.of(CustomServices.class); } } public class CustomServices { public String getValue(EObject self, String name) { return self.eClass().eGet(self.eClass().getEStructuralFeature(name)).toString(); } } aql:self.getValue('name')
- 13. Register representation descriptions @Configuration public class RepresentationDescriptionRegistryConfigurer implements IRepresentationDescriptionRegistryConfigurer { @Override public void addRepresentationDescriptions(IRepresentationDescriptionRegistry registry) { DiagramDescription diagramDescription = DiagramDescription.newDiagramDescription("customDiagram") .nodeDescriptions(List.of()) .edgeDescriptions(List.of()) .toolSections(List.of()) .build(); registry.add(diagramDescription); } }
- 14. Extension of the platform
- 15. Let’s extend the platform! ■ Add a new kind of representation ■ Contribute it to our backend ■ Describe it in our GraphQL API ■ Integrate it in the frontend of your application ■ Synchronize our data with another application
- 17. Map based representation ■ Map representation based on Google Maps ■ A dedicated metamodel ■ to create semantic elements with map-related attributes ■ Display and refresh our map in real time when the objects are modified
- 18. Backend ■ Add support for the map representation ■ Representation description and instance ■ Creation process ■ Event processor ■ GraphQL API
- 19. Register metamodel @Configuration public class MapPackageConfiguration { @Bean public EPackage mapPackage() { EClass mapEClass = EcoreFactory.eINSTANCE.createEClass(); mapEClass.setName("Map"); // Contribute the attributes of the class: lat, lng, zoom EPackage mapEPackage = EcoreFactory.eINSTANCE.createEPackage(); mapEPackage.setName("Map"); mapEPackage.setNsPrefix("map"); mapEPackage.setNsURI("https://www.eclipse.org/sirius/map"); mapEPackage.getEClassifiers().add(mapEClass); return mapEPackage; } }
- 22. MapDescription.java public class MapDescription implements IRepresentationDescription { @Override public String getId() { return "map"; } @Override public String getLabel() { return "Map"; } @Override public Predicate<VariableManager> getCanCreatePredicate() { return variableManager -> variableManager.get("class", EClass.class) .filter(eClass -> eClass.getEPackage().getNsURI().equals("https://www.eclipse.org/sirius/map")) .isPresent(); } }
- 23. Map.java public class Map implements IRepresentation, ISemanticRepresentation { public static final String KIND = IRepresentation.KIND_PREFIX + "?type=Map"; private String id; private String descriptionId = "map"; private String targetObjectId; private String label; private double lng; private double lat; private int zoom; }
- 24. Representation description registration @Configuration public class MapRepresentationDescriptionRegistryConfigurer implements IRepresentationDescriptionRegistryConfigurer { @Override public void addRepresentationDescriptions(IRepresentationDescriptionRegistry registry) { registry.add(new MapDescription()); } }
- 25. Create maps @Service public class CreateMapEventHandler implements IEditingContextEventHandler { @Override public boolean canHandle(IEditingContext editingContext, IInput input) { // Check that the input is for the creation of a map representation } @Override public void handle(One<IPayload> payloadSink, Many<ChangeDescription> changeDescriptionSink, IEditingContext editingContext, IInput input) { Map map = new Map(...); this.representationPersistenceService.save(editingContext, map); changeDescriptionSink.tryEmitNext( new ChangeDescription(ChangeKind.REPRESENTATION_CREATION, editingContext.getId(), input) ); payloadSink.tryEmitValue(new CreateRepresentationSuccessPayload(input.getId(), map)); } }
- 26. Tell Jackson how to read the map @Service public class MapDeserialiser implements IRepresentationDeserializer { @Override public boolean canHandle(ObjectNode root) { return Optional.ofNullable(root.get("kind")) .map(JsonNode::asText) .filter(Map.KIND::equals) .isPresent(); } @Override public Optional<IRepresentation> handle(ObjectMapper mapper, ObjectNode root) { try { return Optional.of(mapper.readValue(root.toString(), Map.class)); } catch (JsonProcessingException exception) {} return Optional.empty(); } }
- 29. GraphQL Schema extend type Subscription { mapEvent(input: MapEventInput!): MapEventPayload! } input MapEventInput { id: ID! editingContextId: ID! mapId: ID! } union MapEventPayload = ErrorPayload | SubscribersUpdatedEventPayload | MapRefreshedEventPayload type MapRefreshedEventPayload { id: ID! map: Map! } type Map implements Representation { id: ID! metadata: RepresentationMetadata! lng: Float! lat: Float! zoom: Int! } type MapDescription implements RepresentationDescription {}
- 30. GraphQL Subscription @SubscriptionDataFetcher(type = "Subscription", field = "mapEvent") public class SubscriptionMapEventDataFetcher implements IDataFetcherWithFieldCoordinates<Publisher<IPayload>> { @Override public Publisher<IPayload> get(DataFetchingEnvironment environment) throws Exception { Object argument = environment.getArgument("input"); var input = this.objectMapper.convertValue(argument, MapEventInput.class); var mapConfiguration = new MapConfiguration(input.getMapId()); return this.editingContextEventProcessorRegistry .getOrCreateEditingContextEventProcessor(input.getEditingContextId()) .flatMap(processor -> processor.acquireRepresentationEventProcessor( IMapEventProcessor.class, mapConfiguration, input )) .map(representationEventProcessor -> representationEventProcessor.getOutputEvents(input)) .orElse(Flux.empty()); } }
- 31. Subscribe to the representation @Service public class MapEventProcessorFactory implements IRepresentationEventProcessorFactory { @Override public <T extends IRepresentationEventProcessor> Optional<T> createRepresentationEventProcessor(Class<T> representationEventProcessorClass, IRepresentationConfiguration configuration, IEditingContext editingContext) { var optionalMap = this.representationSearchService.findById(editingContext, mapConfiguration.getId(), Map.class); if (optionalMap.isPresent()) { Map map = optionalMap.get(); IRepresentationEventProcessor mapEventProcessor = new MapEventProcessor(...); return Optional.of(mapEventProcessor) .filter(representationEventProcessorClass::isInstance) .map(representationEventProcessorClass::cast); } return Optional.empty(); } }
- 32. Subscribe to the representation public class MapEventProcessor implements IMapEventProcessor { @Override public void refresh(ChangeDescription changeDescription) { // Refresh, save the new version of the map and send it using the mapEventFlux } @Override public Flux<IPayload> getOutputEvents(IInput input) { return Flux.merge( this.mapEventFlux.getFlux(input), this.subscriptionManager.getFlux(input) ); } @Override public void dispose() { this.subscriptionManager.dispose(); this.mapEventFlux.dispose(); } }
- 34. Frontend ■ On the frontend side ■ New representation component using React ■ Register the component in the entry point of the application ■ Subscribe to map events using our GraphQL API
- 35. MapRepresentation.tsx export const MapRepresentation = ({ editingContextId, representationId }: RepresentationComponentProps) => { const [state, setState] = useState<MapRepresentationState>({ center: null, zoom: 10 }); useSubscription(subscription, { ... }); return ( <div> {state.center ? ( <GoogleMapReact bootstrapURLKeys={{ key: 'XXXXXXXXXXXX' }} center={state.center} zoom={state.zoom}></GoogleMapReact> ) : null} </div> ); };
- 36. MapRepresentation.tsx const subscription = gql` subscription getMapEvent($input: MapEventInput!) { mapEvent(input: $input) { ... on MapRefreshedEventPayload { map { lng lat zoom } } } } `;
- 37. MapRepresentation.tsx useSubscription(subscription, { variables, fetchPolicy: 'no-cache', onSubscriptionData: ({ subscriptionData }) => { const { data } = subscriptionData; if (data && data.mapEvent.__typename === 'MapRefreshedEventPayload') { const { map: { lng, lat, zoom } } = data.mapEvent; setState((prevState) => { return { ...prevState, center: { lng, lat }, zoom }; }); } }, });
- 38. index.tsx const registry = { getComponent: (representation: Representation): RepresentationComponent | null => { const query = representation.kind.substring(representation.kind.indexOf('?') + 1, representation.kind.length); const params = new URLSearchParams(query); const type = params.get('type'); if (type === 'Map') { return MapRepresentation; } else if (type === 'Diagram') { return DiagramWebSocketContainer; } return null; }, };
- 39. index.tsx ReactDOM.render( <ApolloProvider client={ApolloGraphQLClient}> <BrowserRouter> <ThemeProvider theme={siriusWebTheme}> <CssBaseline /> <div style={style}> <RepresentationContext.Provider value={{ registry }}> <Main /> </RepresentationContext.Provider> </div> </ThemeProvider> </BrowserRouter> </ApolloProvider>, document.getElementById('root') );
- 42. DEMO
- 43. Additional ideas ■ Update the properties of the object when the map is modified ■ Listen to change in coordinates or zoom level ■ Send a mutation to the backend ■ Update the data in the MapEventProcessor and refresh the map
- 45. Publish a gist with the coordinates
- 46. MapEventProcessor.java public class MapEventProcessor implements IMapEventProcessor { @Override public void refresh(ChangeDescription changeDescription) { // Refresh, save the new version of the map and send it using the mapEventFlux LocalDateTime now = LocalDateTime.now(); String datetime = now.format(DateTimeFormatter.ISO_LOCAL_DATE_TIME); String content = datetime + " --- Latitude: " + lat + ", Longitude: " + lng; //$NON-NLS-1$//$NON-NLS-2$ String body = "{"description":"Update","files":{"MapData":{"content":"" + content + ""}}}"; var uri = URI.create("https://api.github.com/gists/58875db0a0146ccd7d17945079f489e1"); var httpClient = HttpClient.newHttpClient(); var httpRequest = HttpRequest.newBuilder() .uri(uri) .method("PATCH", HttpRequest.BodyPublishers.ofString(body)) .header("Accept", "application/vnd.github.v3+json") .header("Authorization", "token XXXXXXXXXXXXXXXXXXX") .build(); httpClient.send(httpRequest, BodyHandlers.ofString()); } }
- 47. Synchronize with a remote service ■ You can check to see if there are any difference with the previous version first ■ Perform the request asynchronously to improve performance ■ In order to synchronize data the other way ■ Send a GraphQL query to Sirius Web ■ Contribute an IEditingContextEventHandler to perform the change
- 49. Integration in other products
- 50. Integration in web applications 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 app (diagrams, forms, etc)
- 51. 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
- 52. VSCode example
- 54. Node
- 56. Project TreeView ■ Used to manipulate Sirius Web / Obeo Studio projects ■ Leverage our GraphQL API over HTTP
- 57. 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 } } } } } `;
- 58. 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
- 61. VS Code WebView
- 62. 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>`; }
- 63. 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} /> ); } }
- 66. Thank you!