search

accordproject / concerto

Business schema language and runtime
https://concerto.accordproject.org
Apache License 2.0
119 stars 105 forks source link

Concerto Model Web Editor #168

Closed ankushbhardwxj closed 4 years ago

ankushbhardwxj commented 4 years ago

This has been listed as a project idea for Google Summer of Code 2020, mentored by @DianaLease and @irmerk. I'm new to Concerto but I like the idea of visualizing a contract while coding it in real time. I read the concepts of Concerto modelling here. As per my understanding, following are the points I gathered about the project:

Example

asd

This data model was created from the contract code given here

Some other options that can be provided are :

Please let me know if I'm missing out something or have got something wrong. PS: made this issue here, because couldn't receive an invite into Slack

jolanglinais commented 4 years ago

Great to see this! Our slack portal is here, and we have a #gsoc channel. I think @mttrbrts, @jeromesimeon, and @dselman will be great resources as well regarding Concerto specifically, and @DianaLease and I will be resource overlaps with front-end work.

I would think to get really familiar with Accord Project templates and models and how to build them by hand, and how they relate to one another.

ankushbhardwxj commented 4 years ago

I would think to get really familiar with Accord Project templates and models and how to build them by hand, and how they relate to one another.

@irmerk Agreed ! I have started to draw some models by hand by following the source code at Accord Project Model Repository.

ankushbhardwxj commented 4 years ago

@irmerk I spent some time understanding jdl-studio, seems like they used nomnoml for making the UML diagram on a canvas. Then I checked out PlantUML's website, where I tried to convert a concerto model code into UML and pasted it on their editor. It was able to create an accurate UML diagram for the code. So, I'd reiterate some points I'd previously discussed.

Create an online web editor to code out the contract in the Concerto modelling language.

  1. This can be done by supporting nomnoml in Concerto, or we can use monaco-editor to just write the code. Parse the code for concepts, enumerations, properties, relationships, decorators.
  2. In this step, we would use Concerto-tools to convert concerto code to uml form.
  3. Use the UML form code to create the UML diagram, something like either nomnoml or plant-uml server

This website shows a demo which resembles our work. I think I'm going in right direction. Please share your suggestions.

DianaLease commented 4 years ago

Then I checked out PlantUML's website, where I tried to convert a concerto model code into UML and pasted it on their editor. It was able to create an accurate UML diagram for the code.

Do you have the UML you pasted or a screenshot of this? I'd be curious to see it. Thanks!

ankushbhardwxj commented 4 years ago

@DianaLease Thanks for your interest. The UML code and diagram can be found here

Also see here and try to copy the code there for an instant preview, just as we want in our project 👍

jeromesimeon commented 4 years ago

@ankingcodes I'm confused by this issue.

  1. UML diagram generations already supported (concerto compile --target PlantUML) and this feature is already used to generate diagram in the models library https://models.accordproject.org
  2. I thought the proposed project in https://github.com/accordproject/techdocs/wiki/Google-Summer-of-Code#concerto-model-web-editor was about allowing to edit the model in a graphical form. Would your suggestion allow that?
ankushbhardwxj commented 4 years ago

UML diagram generations already supported (concerto compile --target PlantUML)

@jeromesimeon Thanks for this.

about allowing to edit the model in a graphical form.

Yes, I agree to that. As far as I understood the project, it would be a developer/user writing a model in Concerto which will dynamically generate a diagram. As an example of this, I had shared links to the PlantUML website. specifically this where at the bottom you'd find an editor and a diagram. I'd encourage you to paste some UML code and playing around with it, you'd find that the diagram is generated dynamically, a similar functionality we want.

So, what I thought for the project was:

Also, if this issue was created at the wrong place. please let me know. ( I think that way, since its an UI issue, maybe concerto-ui would be a better place )

jeromesimeon commented 4 years ago

UML diagram generations already supported (concerto compile --target PlantUML)

@jeromesimeon Thanks for this.

about allowing to edit the model in a graphical form.

Yes, I agree to that. As far as I understood the project, it would be a developer/user writing a model in Concerto which will dynamically generate a diagram. As an example of this, I had shared links to the PlantUML website. specifically this where at the bottom you'd find an editor and a diagram. I'd encourage you to paste some UML code and playing around with it, you'd find that the diagram is generated dynamically, a similar functionality we want.

Are we talking about this proposed project? https://github.com/accordproject/techdocs/wiki/Google-Summer-of-Code#concerto-model-web-editor

Maybe I'm wrong, but I was understanding the project as being the other way around: the user edits the graphical representation, and the system generates a model file (.cto) from it.

I agree the project description is subject to interpretation about that. Maybe @irmerk or @DianaLease can comment?

Note that if the context is Google Summer of Code, the project proposals are not limited to the idea list.

dselman commented 4 years ago

Maybe I'm wrong, but I was understanding the project as being the other way around: the user edits the graphical representation, and the system generates a model file (.cto) from it.

You are correct - we are trying to reduce the barrier to entry for people creating Concerto models by providing a more guided graphical user experience, so they don't have to learn the textual syntax as a first step.

My ideal editor would have the text and the diagram synchronised, with the user able to edit either, as the textual syntax is much more productive for power users.

ankushbhardwxj commented 4 years ago

Are we talking about this proposed project?

@jeromesimeon Yes.

I was understanding the project as being the other way around: the user edits the graphical representation, and the system generates a model file (.cto) from it.

@irmerk and @DianaLease had given an example of jdl-studio (see here) in the proposal, so I didn't make an assumption of this reverse feature you've mentioned.

My ideal editor would have the text and the diagram synchronised,

@dselman I'd think that relates to jdl-studio

You are correct - we are trying to reduce the barrier to entry for people creating Concerto models by providing a more guided graphical user experience, so they don't have to learn the textual syntax as a first step.

So that means that an user should be allowed to modify a diagram in anyway possible and also the code should change/ be generated in that way.

dselman commented 4 years ago

So that means that an user should be allowed to modify a diagram in anyway possible and also the code should change/ be generated in that way.

Some core graphical actions might be:

Yes, you can see these equivalents in JDL Studio, and I think something similar for Concerto would be valuable.

ankushbhardwxj commented 4 years ago

@dselman I think jdl-studio takes up a code and draws the corresponding diagram on a canvas element. I dont think they allow users to directly edit the diagram on the canvas element. Am I getting something wrong ?

ankushbhardwxj commented 4 years ago

I'll try to make a small prototype & I'll share with you all, and then let's discuss more on this.

ankushbhardwxj commented 4 years ago

@irmerk @DianaLease @jeromesimeon After the zoomcall today, I thought about how this project would be useful for end users, especially, since tools of Accord Project are used by people with legal backgrounds. So, for the project, I thought of giving option to user to act as either a developer / a non-developer, according to which the web editor would have a different layout which is as follows : Dev (1) For the non-developer scenario, user would have a generate button which would generate the code based on inputs from the diagram created at the drag/drop canvas. Let me know what you all think about this idea ? I'm currently working to build a prototype for the developer scenario, which I'd share soon.

DianaLease commented 4 years ago

@ankingcodes Yes, this is definitely on the right track! I wonder if instead of having two separate layouts, if the user could edit the code or the diagram on one page and the other side would update accordingly. Just a thought though, this is great!

ankushbhardwxj commented 4 years ago

I wonder if instead of having two separate layouts, if the user could edit the code or the diagram on one page and the other side would update accordingly.

@DianaLease The second part of editing the diagram and updating the code seemed rather challenging, but that's a great suggestion and I'll definitely think more on it.

The idea is getting inputs such as class name, properties belonging to a certain class and using that data to automatically write code (in concerto schema language) on a code editor component (for example, monaco editor). I'd be glad if other developers have some ideas on this, and would like to share.

jolanglinais commented 4 years ago

I like this idea. These mockups make me think of sankey diagrams and flowchart generators. My thought on this is that this concept starts with a non-developer. So a future feature could be a developer writing code and generating a diagram.

But this starts with the non-developer, because there are already tools that developers can likely use to make a diagram, that should be an afterthought. How does a non-dev user interact with a drag-and-drop diagram which spits out the code of what they built which could be shared with a developer?

ankushbhardwxj commented 4 years ago

How does a non-dev user interact with a drag-and-drop diagram which spits out the code of what they built which could be shared with a developer?

@irmerk I don't fully understand what you meant by this. But I think you're reiterating the point @DianaLease mentioned. Generating code simultaneously whilst creating the diagram is something that I cannot find a solution to right now, though I am researching on it (perhaps, @jeromesimeon and @dselman can give me some ideas on it), I have a work-around that might satisfy the issue. How about after a non-dev creates the diagram and generates the code, we present the option to switch to scenario 1 and edit the code as a dev ?

dselman commented 4 years ago

I'd approach:

  1. Find a React compatible graphical editor (boxes, arrows, custom styling, drag, layout ....)
  2. Use the editor to edit a diagram model (JSON data structure that represents the model)
  3. Write code to convert the diagram model (JSON) to a Concerto text file
  4. Write code to convert a Concerto model (use the Concerto ModelManager APIs) to a diagram model

By combining 1-4 you should be able to create a React editor that can both create CTO models, and can load CTO models for editing and save back to CTO.

dselman commented 4 years ago

Here is the Concerto meta-models (ie. using Concerto to describe the structure of a Concerto model): https://models.accordproject.org/concerto/metamodel.html

dselman commented 4 years ago

E.g. https://github.com/projectstorm/react-diagrams (there are probably many others)

Anubhavshakya commented 4 years ago

I have read the whole discussion. After that I conclude that in the summer we are going to built a web class diagram editor for non-developer. please correct me if I'm wrong. If I'm wrong in that case we have to work on both editor for developer and non-developer then we can give the option to the user to select which type of editor he/she want. We can use this prototype for the landing page of editor.

Homepage-2x

As we have jdl-studio. But I found a another editor Mermaid Live Editor that is totally based on mermaid we can use this as a reference.

ankushbhardwxj commented 4 years ago

@dselman thanks for your suggestion. I was stuck on what should be used as the intermediate data structure but your comment (JSON) cleared that out for me.

Write code to convert the diagram model (JSON) to a Concerto text file

I believe there is code already written for doing this or the reverse of this ?

ankushbhardwxj commented 4 years ago

@Anubhavshakya Thanks for your interest ! But according to the discussions that have taken place recently, this project requires to create a single component that would be usable both to the developer and the non developer.

jeromesimeon commented 4 years ago

@Anubhavshakya I think @ankingcodes is correct. Developers can already use VSCode, or their favourite editors to create models (and do so on a regular basis). I think the main goal here is: what if someone isn't a developer, can they still design a model (and how?).

Anubhavshakya commented 4 years ago

@ankingcodes Thanks for your reaction. I know that the project requires a single component. At that time I was thinking that developers and non-developers should have different user interfaces. @jeromesimeon Yes, the main goal of this project is to develop a web editor. By using editor non-developer can also create the model. And sorry for the late response because of the Exam.

ankushbhardwxj commented 4 years ago

Since I'm done with discussion regarding the project, I'm closing this issue here.