search

DevOps-MBSE / AaC

Prototype Arch-as-Code
https://devops-mbse.github.io/AaC/
MIT License
28 stars 8 forks source link

UI Initial Study #64

Closed jondavid-black closed 2 years ago

jondavid-black commented 3 years ago

As an AaC developer I want a user interface study performed so that our team establishes our initial path forward based on research and collaboration.

This issue is focused on the discvoery aspect.

AC:

cvchaparro commented 3 years ago

Resource: https://wiki.python.org/moin/GuiProgramming

jondavid-black commented 3 years ago

Outcome of AC 2 is in your e-mail. I think we should defer AC 3 to next sprint.

For AC 1, I suggest we KISS and just start with tkinter (the built in option). I did some basic testing using menus and a tree structure (i.e. model hierarchy) and it seemed pretty easy to work with. The other popular option seems to be wxPython. Best case we would make sure we could draw "boxes and lines" and make a determination from that.

I'll leave it up to you guys. We can claim a small degree of success here or we can just push to next sprint.

Coffee2Bits commented 2 years ago

I'll leave this here as a note for future reference too: There is a python package called pywebview that allows us to leverage a web-based frontend including ReactJS (example). I think we should still continue with tkinter for an MVP UI, but if we want to build more advanced UI features then we should consider pywebview.

jondavid-black commented 2 years ago

Resource: https://zetcode.com/tkinter/drawing/ How to draw shapes w/ tkinter

cvchaparro commented 2 years ago

You can view the wireframes I have here. They should be available for public comment but, if not, please let me know.

jondavid-black commented 2 years ago

I think the wireframe layout looks pretty good. I like the slider to switch between model and text views.

Feedback:

  1. Recommend we remove model content from the tree on the left and just use that for navigation.
  2. I think the tree view is a good start. I actually like organizing things by root type and then name for the MVP. I do worry about scalability and organization. We really haven't established any notion of "package", so I'm not sure things won't get messy over time. Should we consider adding some form of package construct (maybe just by using a folder structure rather than changing the YAML)?
  3. Am I correct assuming that editing would occur in the view window? I can see this being fairly simple in text view, but not sure about model view. Will we need a "properties" type view to accompany the model view to support editing?
cvchaparro commented 2 years ago

I think the wireframe layout looks pretty good. I like the slider to switch between model and text views.

Feedback:

  1. Recommend we remove model content from the tree on the left and just use that for navigation.

Done

  1. I think the tree view is a good start. I actually like organizing things by root type and then name for the MVP. I do worry about scalability and organization. We really haven't established any notion of "package", so I'm not sure things won't get messy over time. Should we consider adding some form of package construct (maybe just by using a folder structure rather than changing the YAML)?

I like the idea of using a package structure based on directories so that the DSL won't need to change to incorporate a package root type.

  1. Am I correct assuming that editing would occur in the view window? I can see this being fairly simple in text view, but not sure about model view. Will we need a "properties" type view to accompany the model view to support editing?

The way I was thinking about it, editing the model could happen in from either view (i.e. the textual view or the diagram view). As far as editing in the diagram view, a properties view could definitely support editing. To that end, perhaps we could default to having the textual view be a properties view instead and have a menu option that allows "power-users" to make the properties view into text. Additionally, for simpler edits (i.e. changing a model's name, or other basic information that's in the diagram, I think it would be useful from a user's perspective to be able to edit directly from the diagram view.

Of course, that might not be good for an MVP so we could add a properties view. I added an alternate version of the diagram view that's tabbed. Maybe that could be a better alternative for an MVP. Here's the alternate version that includes a property view.

cvchaparro commented 2 years ago

Per the discussion from our UX engineer, here are a couple use cases for the UI and the user workflow. The UI wireframes are also updated accordingly.

UI Use Case: A newly-created/edited model/use case/data/enum

For the most part, creating/editing models/use cases/etc would be almost identical except for the fields that are populated.

Assumptions

  1. The model to be edited is open in the application.
  2. The model is selected in the tree view
  3. The model diagram view is active

Workflow

  1. I click on the "Properties" tab
  2. I click into the "Name" field and enter "Test Model"
  3. I click into the "Behavior" field and enter "Behavior 1"
  4. I click the "Edit" icon for the behavior and the fields to edit the behavior show up under the model fields
  5. I see the "Name" field for the behavior populated with "Behavior 1"
  6. I click onto the "Type" field combo-box and select "pub-sub"
  7. I click into the "Input" field text box, enter "Input 1", and click the "+" icon to add it to the list of inputs
  8. I click into the "Output" field text box, enter "Output 1", and click the "+" icon to add it to the list of outputs
  9. I click into the "Acceptance" field text box, enter "Acceptance 1", and click the "+" icon to add it to the list of acceptance
  10. I click the "Save" button (i.e. the check mark) to save my work

Use Case: Importing a model into another model

Assumptions

  1. The model to be edited is open in the application
  2. The data and/or enum exists
  3. The model diagram view is active

Workflow

  1. I click on the "Imports" tab
  2. I click into the "Name" field and enter "Imported Data"
  3. I click the "+" icon to add it to the list of imports
cvchaparro commented 2 years ago

Wireframe export: AaC UI MVP.pdf