List of Improvements April 18 following review by Tim

[TimLethbridge]

Problem or motivation

Here are some comments on the current release of this system. I am not raising these as separate issues as there are too many small details.

I am being extremely critical, since my expertise in UX tells me that I need to be so.

I will roughly start from the left and move top to bottom.

Sidebar.

• I think the sidebar should be reserved for extended preferences that we may define later. In my comments below I am suggesting that we get rid of everything you currently have here, except the top left bar. Maybe only 'Preferences' should be leftover here (which there are currently not any), so this should be hidden (and content should be moved as defined below).

Top left bar currently in the sidebar (to refactor to the Very top menu)

• Given that I am suggesting the sidebar content be removed, I think that this bar should be permanently visible, and merged to become part of the 'Very top menu' as per my comments below

• The Umple logo + the word UmpleOnline should have a link to the Umple main website (that would open in a different target). I know you have links at the bottom, but people are used to clicking on the logo at the top left to go to the main site. See my other commetns about the very bottom menu of the current sidebar)

• The Umple logo + the word UmpleOnline should have a tooltip explaining that it is a currently an experimental release and that users should currently use the version at try.umple.org for production.

• To avoid confusion can you put '(v2)' after the word UmpleOnline in the menu bar, and can you ensure that browser tabs displaying UmpleOnline instead say 'UmpleOnline v2 (experimental)'.

• The search in this bar prompts to type a command. There are other searches elsewhere. I think that this should be completely changed so that there is only one search for the entire site, and that would be moved to near the top left of the Very top menu (see comments later) The current search in this bar works to invoke a tool but since it is the very top-level search icon people will encounter, users will expect it to find other things such as the examples. But it does not bring up any of the examples. I think it should be able to invoke a command, or load a named example.

Tools, Tassks and UmpleAI menus in current sidebar (to eliminate as duplicative)

• Users will be very confused about the type of example vs. the list of examples of that type. Vs the output to be displayed/generated and also by the duplication of doing almost the same thing in multiple places. So just eliminate the Tools menu as the functionality is elsewhere.
• Ditto for the Tasks menu and the UmpleAI menu, which are duplicated elsewhere. Remove them.
• Make the sidebar not appear by default anymore.

Replacement content for the sidebar

• Have a menu 'Preferences' that will set certain defaults. these would be as follows:
• Dynamically generate while editing. Default is checked. If switched off (for slow computers or networks), then users would have to select to dynamically generate. See Very Top Menu item 6

Very top menu (not the sidebar)

• This currently has a control for Tasks and Examples. I think that these should be refactored as below. i.e. change the top menu replacing Tasks, Examples, Compile, Class, Generate, AI etc.
• Item 1: Leftmost: UmpleOnline logo and the word UmpleOnline. See comments above.
• Item 2: Icon to display/hide the sidebar.
• Item 3: Manual. A link to the user manual is absolutely critical. It must not be hidden as it is now.
• Item 4: Example Set. (a menu) This should just control the content of the item 5 (same as in the original UmpleOnline). The Example sets should be 'Data Model Examples 1/Data Model Examples 2/State Model Examples/Feature Model Examples/Composite Structure Examples'. The menu should NOT display the view types. The set 2 would be the extra ones currently visible in the original UmpleOnline.
• Item 5: The actual list of a set of examples (a menu), that would change depending on the set. This menu would be too long to contain all the examples in all the sets, so it needs to be dynamic. Please also add 'Blank' at the top, so that people can quickly load an empty model. It should show exactly the same examples as in the old UmpleOnline, and it should load these from the main Umple repository dynamically (changing whenever the main repository changes). Why? a) Those examples will evolve as bugs are fixed and new ones are added. b) Those examples are the ones used to drive testing of the compiler. c) Those examples should also be loadable using URL options identical to the options in the original UmpleOnline.
• Item 6: Generate: (a menu) Let's merge together the notion of dynamic view with generate, and, unless the preference 'Dynamically generate while editing' is unset, always have generation run (whether it be for diagram or code) at every single change in the Umple text (after the delay, as currently). This menu should start with the categorized diagrams (with the default being the default for any selected example diagram set ... or class diagram initially before any diagram is selected), then it would list programming language code and the other categories. (note that 'class views' should be changed to 'data model views'.
• Item 7: Execute. Note that this does not currently work I get bad output each time in your installation. "For main method in class Shape2D: Error processing Umple code execution request"
• Item 8: AI (as current). I have not tested this in the current version. I will test in the next iteration.
• Item 9: Tasks (as current). I have not tested this yet. Will test in the next iteration.
• Farthest to the right 1. Please replicate what appears in the user manual. We need to acknowledge the University visibly, and NSERC and Digital research alliance. Have this float, but be hidden if there is not enough horizontal space.
• Next (moving left now). The search icon (see other comments) that would search for commands or examples).
• Next (moving left ) Icon for privacy and security (don't hide this in a menu at the bottom of the sidebar ... this is very important). I like the icon you currently have.
• Next (moving left) Github icon linking to that repo
• Next (still moving left, final icons at top right): A Question mark with a link to the 'Ask a question' page on stack overflow.

Text editing view

I have not had time to test this completely. I will do more in the next iteration.

• It does not seem to be up to date with the latest changes to the LSP. For example at the top level if I type control-space it lists all the keywords. Johan fixed this. We need to ensure that any time the LSP is changed, this can be updated.
• When AI is active, there is an 'ask me anything', but it floats somewhat annoyingly and can't be dismissed. I suggest popping up questions, but putting out output in the message output pane.

Right Hand View

• At the top there are two controls. One is 'Diagram'. The other is a menu of output types. But the 'Diagram' does not allow me to control what type of diagram. For that, just use what I have suggested at the very top menu. So get rid of both and have the control of output be controlled by the Generate in the very top menu.
• See my above comments for 'Dynamically generate while editing' as a preference that would normally be on. But if off, then the right hand pane should be frozen and slightly greyed if any model edits occur in the text and a 'regenerate' button added.
• If there is a compilation error, the diagram currently freezes and jumps to gv view (or if a new generation is tried, blank appears). Instead do similarly as if Dynamically generate while editing' was unset, and temporarily deactivate the generate menu. Instead of 'regenerate', add text 'To regenerate, fix the error in the text'.
• I can make the output view (diagram etc) fill the screen. I should be able to do the same for the text view (which would temporarily switch off automatic generation of course).
• I like the location of the layout algorithms and display options, but these can be moved up into the area that currently says 'Diagram' when a diagram is being displayed.
• In the display options one item I notice missing is 'gvortho'.
• The filter options are not present. Please bring them back and put them next to the layout options. Please replicate what is currently provided in the current system, including pattern matching for one or more classes, negative patterns with ~, jump steps by typing an integer.
• When code is displayed, please enable the splitting of the code into tabs, as we currently allow. It should be default to display all the code though, so it can be searched using the browser's search capability.

Output view (at bottom)

• See my comments above for Execute output not working
• It says by default 'Output from compilation and code generation will appear here.' but that is not strictly true since the actual code appears on the right. So rename this as 'Message output'
• When a line number appears in a message, it should be clickable to jump to that line.
• The error or warning number should appear along with the link to the manual. Although general UX guitance for non-technical people is to hide such numbers, for developers it should be visible.
• When AI is activated, there is a 'Fix' item for errors. But it does not seem to work, and the output looks terrible as compared to the original UmpleOnline. Is it passing the correct context? It worked better in the old UmpleOnline where it showed a nice suggestion. This needs considerable work.

Codebase questions/comments

• I notice that code-exec has a lot of similarities to the existing UmpleOnline. However, in the config file the default port is the same. This would cause problems for people testing both. Can we ensure there would be no conflicts. In the Readme it would also be good to say how this differs from the original. And it says "If you development the project on Windows, MUST set eof to LF"; but where/how?
• Can there be a readme in the collab folder please explaining its architecture (and also a reference to how it differs from the original) ... ditto for the backend, frontend, lsp-proxy ...
• Examples directory: See my comments earlier. I really don't want to have to keep two repos in sync!
• Please add top level comments on source code. I want to be able to understand this as a human.

I will do more review later as the above get improved. Sorry the list is so long.

Proposed solution

See above

Alternatives considered

No response

Area

Editor