Graphical upgrade #90
Comments
|
In GitLab by @ltenorio on Nov 22, 2023, 10:46 Additional things to consider for the graphical upgrade:
|
|
In GitLab by @bdepaula on Nov 22, 2023, 11:03
+1 💯
👍 we adopted a Material library in Cylc, but in hindsight that was not the best choice, because when we had to upgrade Vue2 to Vue3 that library blocked for >1 year the upgrade. I don't think that applies to React libraries (faster development). Said that, the library still helped a lot to speed up our development, instead of relying on Bootstrap or pure CSS.
React Flow looks amazing. We just need to make sure its features cover everything that we have (or that we want to have). But the look and feel and docs look really good. |
|
In GitLab by @ltenorio on Nov 22, 2023, 11:29
That's good to know! I don't think there will be a block if we avoid using UI React component libraries. In this case, Bootstrap and Tailwind can be used with just HTML, CSS, and Javascript. Bootstrap does include some style classes and functions to implement common components, but sometimes they are difficult to customize. On the other hand, Tailwind has many customizable styling class options without dealing too much with CSS. Also, it gives plenty of "recipes" to deal with common things with a lot of flexibility, but some of them need to add dependencies for the functional side. IMO if we want general faster development, Bootstrap is the way. But if we need high out-of-the-box customization, Tailwind will do better. |
|
In GitLab by @bdepaula on Nov 23, 2023, 10:38
👍 agreed, and I trust to make the best choice here! :medal: |
|
In GitLab by @ltenorio on Dec 14, 2023, 09:29 As discussed, one way to validate these mockups is by sending a poll to a group of users. I'm thinking of adding these questions to focus on usability and feedback:
As suggested by @mcastril, we could contact Eric and Gilbert to build this group of users, or send this poll to a mailing list. |
|
In GitLab by @ltenorio on Dec 29, 2023, 11:25 As part of the Graphical Upgrade taking into account issue #92 and the new API route distribution, I have listed the tasks to do:
|
|
In GitLab by @mcastril on Jan 2, 2024, 18:58 These are good questions Luiggi. We have a couple of persons with expertise in UX/UI in BSC-ES. We could ask them about their opinion concerning these questions. Yes, contact Eric and Gilbert as soon as possible. I understand that you don't need a full upgrade (the list of tasks below) before the session, just a few pages. Otherwise, in case the users asked for major changes you would have saved time. |
|
In GitLab by @ltenorio on Jan 12, 2024, 10:59 @mcastril After talking with Eric and Gilbert about relevant users of the Autosubmit GUI we got the following possible users to validate the designs: In AC:
In CES:
In CVC:
Also, it will be good to include some people from Destination Earth:
Now I have some inquiries on how to handle this validation. Instead of having a session with everyone, I think it will be better to start with a form sent to everyone asking for feedback (with the questions set above). Then, with this initial feedback, make an interactive mockup in Figma (or complete the implementation (?) ). Afterwards, it would be better to have small sessions (15-30min) with small groups (2-3), so the users can have more freedom to share their opinions. @bdepaula what do you think? Maybe we can add some things done in Cylc 👀 |
|
In GitLab by @bdepaula on Jan 12, 2024, 12:27 Sounds good, @ltenorio ! Maybe we can add a few small improvements adapting features from Cylc or ecFlow's UI. But I think you will probably have a lot to address just with the new layout :slight_smile: Let's see how much work that will require, and maybe add a few other improvements (some may not require user feedback, e.g. use a websocket instead of polling every N seconds). |
|
In GitLab by @mcastril on Jan 12, 2024, 16:41 Thanks @ltenorio, for sharing the list. From AC, you could also involve Rubén Sousse, who is always running different experiments. Send a form beforehand if you consider it a useful source of information. I thing it would be. About Figma and completing the implementation, maybe there is a compromise solution that does not represent an overhead and allows us to re-use most of the work. For example, leaving a few sections uncomplete. The most important ones for the users are the search view and tree view, and later the quick view and the graph view. If you want to do it in small groups, I agree but I wouldn't split them so much. Maybe one session with AC and CVC and another one with CES (including DE). Finally, I would leave the suggestions for new features noted so that we can evaluate them together and create issues. In any case, it would be work for later. After the graphical upgrade, we should go first for the deployment in Climate DT and the write-mode endpints. Thanks for this work |
|
In GitLab by @ltenorio on Jan 22, 2024, 10:11 Here is a summary of the form that was submitted last week (5 out of 12 responses):
|
|
In GitLab by @bdepaula on Jan 22, 2024, 10:37 Great feedback, thanks for summarizing it, @ltenorio. And kudos for keeping the old setup. I think that will really help existing users. I think most of the items can be fixed in this issue. #69 is for the performance metrics, the setstatus I think depends on https://earth.bsc.es/gitlab/es/autosubmit_api/-/issues/55. Do we have issues already for “Improve visualization of wrappers (and their status) and retries”, ”A button to watch just your experiments on the homepage”, and for “Apart from the new design they asked for improvements to visualize big experiments”? |
|
In GitLab by @ltenorio on Jan 22, 2024, 11:38 About the missing issues:
|
|
In GitLab by @mcastril on Jan 31, 2024, 18:06 I remember Cristian recommended a move to Tailwind before leaving. But it's worth to consider staying in Bootstrap and upgrade.
I agree with Bruno. Maybe you have already seen that, the Graph display is a delicate one. In the first versions of the GUI, the elements were not positioned as we liked (following the chunk order, in rows and spatiated as we used to). At some point, I think that Wilmer had to take the coordinates of the nodes generated by Graphviz in Autosubmit to provide them to the graph library used in the GUI. The other issue was the rendering of bigger graphs, which were taking much time. For that reason, he created a worker ( I don't know if this workflow is compatible with React Flow and if that's more performant. Just things to take into account. |
|
In GitLab by @mcastril on Jan 31, 2024, 18:17 Thanks a lot, Luiggi, for taking the initiative, for holding the session, and for providing the answers summarized here! Sorry for my delay catching up with this. Last week we had a deadline for submitting a National Project (prepared by CES). I wonder what they really meant with the Regarding the size of the boxes, that was also my opinion. The current setup could work well in a tablet or phone thoug, but on bigger screens, we should show more experiments. Concerning the loading time, it's true for bigger workloads. The filter only works after everything is loaded. About improving the visualization for big experiments, we started to work on that with the group buttons in the Graph. In the tree, they are already grouped and there is a filter as you are saying. |
|
In GitLab by @ltenorio on Feb 1, 2024, 10:48
Yes, to do the upgrade faster I did have to stay with Bootstrap (and extend it a little more with Sass). Still, Bootstrap is way more limited in customization than using Tailwind with a compatible component library like Radix. So, we might consider migrating it in the future. |
|
In GitLab by @ltenorio on Feb 1, 2024, 11:45 After this upgrade, I considered creating a new repo for this new GUI. This is mainly, to keep the old issue list of the old GUI here because they will mostly not apply to the new one. Also, we can take the opportunity to rename it from @mcastril WDYT? |
|
In GitLab by @bdepaula on Feb 1, 2024, 12:13 Wouldn't it be easier to keep using this repo, so that we can link issues/commits, and - more importantly - the Git history? +1 to renaming it though 💯 ! |
|
In GitLab by @ltenorio on Feb 1, 2024, 12:48 Agree! For me is better to keep this repo. The only fallbacks that I think I'll have is to manage the issues list between the old and new GUI, and if there were another additional reason why this repo is private (sensitive data maybe? but I remember this was not the case). |
|
In GitLab by @bdepaula on Feb 1, 2024, 13:23 If there are things that are not valid anymore, we can close it as won't fix, or add a label that it needs discussion/etc. As for being private, I think it was only until we made it portable, and had reviewed it to make sure there were no security issues. I don't believe we have any passwords or sensitive information here (we always kept destine/edito/etc. info on issues in those projects' repositories). |
|
In GitLab by @mcastril on Feb 2, 2024, 17:48 I am also in favor of keeping this repository. As Bruno said, you can close issues that are not valid anymore (commenting that they were fixed in the new release) and keep the other ones. If we were going to maintain both versions I would say that you can create labels for v3 and v4, but I don't think this is going to be the case. Regarding the project path, it can be renamed when we decide. And regarding the public repo, it's as Bruno said. |
|
In GitLab by @ltenorio on Feb 5, 2024, 09:36 mentioned in issue digital-twins/de_340/project_management#534 |
|
In GitLab by @ltenorio on Feb 20, 2024, 09:54 I'm preparing the first hands-on session to validate the new GUI using the already developed and deployed in our development environment (https://bscesautosubmitdev01.bsc.es/autosubmitGUI). This will be a 30-minute (or maybe more?) session with the people of MWT and DE:
Then, the following questions will be set for this session:
After this session, the next step will be to focus on the suggestions of the DE people aiming to be the ones that will first use it. Consequently, in ES, we can also deploy the new GUI in parallel like it is the development environment. But to do that we have to request the BSC CAS maintainers add the service names to the CAS whitelist. In this case, add https://earth.bsc.es/autosubmitGUI and https://bscesautosubmitdev01.bsc.es/autosubmitGUI. Is that possible @mcastril? |
|
In GitLab by @mcastril on Mar 19, 2024, 16:24 @ltenorio, thanks for deploying the new GUI, it looks very nice. When do you plan to have this session? Regarding the questions:
The first one shouldn't be an option. Different users from the scientific groups said that this one was very helpful. Even if we allowed the status to be changed directly with the GUI, it would still be a nice help for the CLI. As said through Slack, I think that the experiment's detailed view should either have a button or be accessed by clicking on any part of the card. Using only the header is not intuitive, in my opinion. Title bars are normally used for dragging. |
|
In GitLab by @ltenorio on Mar 19, 2024, 16:46
I wanted to do it after deploying it publicly to the CES members so they have enough time to try it before the session. But now, it seems quicker to send a form like the last time than to look for a free spot from everyone. Maybe the form can be shared in the next MWT meeting to get the attention of everyone. WDYT?
Yes, I got that feedback from some Climate DT people already. I was thinking of implementing it as a shopping cart like in UniProt (people from life sciences will love it) so it can be easily extended to have multiple features.
Yes, that is on the to do list for the next version. The only fallback I see is that the user will not be able to select and copy text inside the card easily but this seems meaningless. |
|
In GitLab by @mcastril on Mar 19, 2024, 17:16
Actually, I think this is a very good idea. Why not use one of the next MWT meetings (the non-reporting ones) to showcase the GUI and ask people for feedback? You could complement it with the sharing of the form, before or after. There are some presentations/sessions in the backlog, but I don't think that they have any objection to letting you a spot in the next weeks: https://trello.com/c/991ldOUj/164-models-workflows-team
So, do you mean adding the tasks to be changed in an overlay instead of just selecting them?
I see. Well, maybe you can leave a part of the card as non-clickable (the part of the text) using another colour and some kind of border. You'd have to test it to see if it's fine |
|
In GitLab by @ltenorio on Mar 19, 2024, 17:30
It will be fun to do it that way. As a disclaimer, it might not be a presentation, instead, it will be an interactive session where we will ask people to do some tasks with the GUI and ask for feedback immediately. I'll add it to the backlog.
Yes, it is not so different from how the "ACTIVATE SELECTION MODE" button works in the old GUI. |
|
In GitLab by @mcastril on Mar 19, 2024, 17:34
I like the idea. You can use the format that you think it'll work best, but this one sounds like a nice team activity. |
|
In GitLab by @ltenorio on Mar 28, 2024, 14:34 A quick debrief of the user testing session of today:
Thanks @mcastril for the notes 🙌 |
|
In GitLab by @ltenorio on Apr 16, 2024, 12:14 Most of the requirements gathered in the testing session are resolved by now. So, I gathered the remaining ones and assigned an effort/priority estimation here: (@mcastril what do you think about the priority estimations?)
The strategy that I suggest is to complete the documentation requirement (first one) and release the official v4.0.0 release for public use. The other requirements will be moved for future releases depending on the needs of our users. |
In GitLab by @ltenorio on Nov 21, 2023, 16:41
After the great presentation of @bdepaula showing the Cylc GUI, I noticed some desire from the team to have a more friendly and aesthetic GUI.
So, I took a little time to mock up a better Home page style to start the discussion about the importance of making an upgrade to the GUI soon.
@mcastril what do you think about this? I know that this is not a priority nowadays, but might be relevant sooner or later.
The text was updated successfully, but these errors were encountered: