[UI Feature] Reconsider Katib UI design

[andreyvelich]

/kind feature

See comment: #972 (comment).

I think we should try to optimise Katib UI design to make Kubeflow User Experience more uniform and clear.

We already use Material UI, which make components similar to other Kubeflow UI application.

We can start with colours and try to use Kubeflow style guide to mark buttons, menu, etc.

@gaocegege @johnugeorge @avdaredevil @sperlingxx please let me know, if you would like to change some UI components.
/cc @jlewi

[issue-label-bot]

Issue-Label Bot is automatically applying the labels:

Label	Probability
area/front-end	0.90

Please mark this comment with 👍 or 👎 to give our bot feedback!
Links: app homepage, dashboard and code for this bot.

[StefanoFioravanzo]

Hey @andreyvelich this is a great idea. I think that just starting to change the theme colour would help in making Katib feel more integrated. Also, it's weird that when Katib is embedded in the Centraldashboard's iframe, the top banner has some padding from the top. Also, the main body has a margin on all sides, so that top bar does not adhere to the iframe borders. It's a bit strange and it's not quite clear to me why the UI was implemented in this way, maybe you can shed some light. Fixing these two things alone would greatly improve how the Katib UI looks.

I'll throw an additional idea to start thinking about how to reorganize a bit the UI to make it more intuitive and user-friendly:

Currently the sidebar has two collapsible sections. One called "HP" ("Submit"/"Monitor") and one called "NAS" ("Submit"/"Monitor"). So each "Submit" or "Monitor" view is entirely a new page. I think that the UI would be much easier to navigate if the Monitor and Submit views were part of the same "page" (i.e. URL). This would mean that the "HP" page shows the current list of experiments, and that a "Create Experiment" button on top could bring up a popup with the submit logic (or behave similarly to how the Kubeflow Notebook app to spin up a new notebook, check it out!)

[andreyvelich]

Hi @StefanoFioravanzo thank you for the comment!

Hey @andreyvelich this is a great idea. I think that just starting to change the theme colour would help in making Katib feel more integrated. Also, it's weird that when Katib is embedded in the Centraldashboard's iframe, the top banner has some padding from the top. Also, the main body has a margin on all sides, so that top bar does not adhere to the iframe borders. It's a bit strange and it's not quite clear to me why the UI was implemented in this way, maybe you can shed some light. Fixing these two things alone would greatly improve how the Katib UI looks.

I think that is because we have padding and margin for root element (https://github.com/kubeflow/katib/blob/master/pkg/ui/v1beta1/frontend/src/components/App.jsx#L25-L27), we can remove it, but we need to fix other pages also, they are dependent with this style.

Currently the sidebar has two collapsible sections. One called "HP" ("Submit"/"Monitor") and one called "NAS" ("Submit"/"Monitor"). So each "Submit" or "Monitor" view is entirely a new page. I think that the UI would be much easier to navigate if the Monitor and Submit views were part of the same "page" (i.e. URL). This would mean that the "HP" page shows the current list of experiments, and that a "Create Experiment" button on top could bring up a popup with the submit logic (or behave similarly to how the Kubeflow Notebook app to spin up a new notebook, check it out!).

Do you mean that in Menu we left 3 sections: HP, NAS, Trial Template?
That makes sense to me, because Pipelines and Notebooks, as you said, follows this way.

As well, I have 2 ideas in my mind.

1. We can redesign Katib main page. Currently it has only 2 big buttons for HP and NAS which is very uninformative. Maybe we can also show list of all Katib Experiments and some other information.

2. We can make Experiment monitor page more useful and add functionality to resume experiment.
   Maybe we can follow Pipelines UI design and have graph for each Experiment.
   This graph can contain this workflow: Experiment -> Suggestion -> Trials.
   We can add dynamically update of this graph and user can clearly see current status for each object and check the YAML and logs for Trial or Suggestion, clicking on appropriate block.
   Currently, to see YAML for Experiment or Trial user has to click on appropriate button and dialog is opened.
   After implementing this: [UI Feature] Monitor Experiment dynamically #1278, I think it is better to show YAML and Logs not in opened dialog views.
   The question that I have, is it fine to show the graph if Experiment has many Trials, e.g > 100 Trials ?

[StefanoFioravanzo]

Do you mean that in Menu we left 3 sections: HP, NAS, Trial Template?
Exactly!

Another improvements that I think would align Katib to what KFP does, is having a page with all the Trials. Each row would have a link to the experiment page, and vice versa. It would be very useful in case you have multiple experiments running, so you have a view over what actual Trials are running concurrently.

[StefanoFioravanzo]

but we need to fix other pages also, they are dependent with this style.

@andreyvelich What are these "other pages"?

[andreyvelich]

concurrently

Maybe we could add this list to the main page also in addition to Experiment list?

[andreyvelich]

but we need to fix other pages also, they are dependent with this style.

@andreyvelich What are these "other pages"?

We need to investigate in which pages we need to add this margin, because they are all under root element: https://github.com/kubeflow/katib/blob/master/pkg/ui/v1beta1/frontend/src/components/App.jsx#L34-L45 and, if we disable margin from the root element, all other components will move.
For example TabPanel: https://github.com/kubeflow/katib/blob/master/pkg/ui/v1beta1/frontend/src/components/Common/Create/TabPanel.jsx in Experiment create page.

[StefanoFioravanzo]

Maybe we could add this list to the main page also in addition to Experiment list?

I would advocate for a brand new page that just shows all the Trials, just like the "Runs" page in KFP shows all the pipelines. Then the Home page could show just the "Running" Trials

[andreyvelich]

Maybe we could add this list to the main page also in addition to Experiment list?

I would advocate for a brand new page that just shows all the Trials, just like the "Runs" page in KFP shows all the pipelines. Then the Home page could show just the "Running" Trials

Why do you think it is better to create separate page with trial list instead of adding this list to Main page?

Looking for KFP UI in pipelines page user can upload/delete pipelines, but with Trials user can't make any manipulations.
On the main page we can also show trial status, create date, which experiment is owned Trial and link to the appropriate experiment info.

[StefanoFioravanzo]

Why do you think it is better to create separate page with trial list instead of adding this list to Main page?

Because the "main page" of a web app is supposed to be a collection of quick actions, summary of the state of the app and it's resources etc.. Since we don't even have a single view of all the running (and past) Trials, it would make sense to start from there.

On the main page we can also show trial status, create date, which experiment is owned Trial and link to the appropriate experiment info.

All of this information can be shows in the Trials page, and then we can recycle some of this logic in the main page to show just the running Trials.

Also note that: in general we would like to push for Kubeflow to become a more integrated platform. That is what we showcased in the community meeting with a revamped centraldashboard sidebar (we will push this upstream real soon). In that instance, we are aligning the concept of KFP Experiments and Katib Experiments (because semantically they are the same thing!) and we would love to be able to align KFP Runs with Katib Trials, but there is no corresponding page in Katib as of now.

Moreover, a Katib "Main page" would make sense in a Katib standalone deployment. When integrated in Kubeflow, you would have specific buttons in the Kubeflow Centraldashboard sidebar that point to Katib Experiments, Katib Trials, etc..

If we want to have a summary of the Katib state, we could extend the Centraldashboard's main page to show some Katib related information. And this is totally doable! But I'd say this is a next step

[avdaredevil]

One thing I'd like to add is that aside from the style-guide we also created an SDK for namespace sync for Kubeflow sub-apps. This SDK will allow the app to know whether or not it's running in an iframe, and what namespace is currently selected, along with event binding for said namespace selector.

• Docs: Client-Side Library
• Examples: JWA

[StefanoFioravanzo]

@avdaredevil Absolutely, even KFP uses the Centraldashboard's shared library to automatically receive the current namespace. It should be quite simple to integrate the Katib UI with this. (KFP example: https://github.com/kubeflow/pipelines/blob/8a7ea0fa0d868a95396c1f843f6676c8025c982a/frontend/src/lib/KubeflowClient.tsx)

[andreyvelich]

Why do you think it is better to create separate page with trial list instead of adding this list to Main page?

Because the "main page" of a web app is supposed to be a collection of quick actions, summary of the state of the app and it's resources etc.. Since we don't even have a single view of all the running (and past) Trials, it would make sense to start from there.

On the main page we can also show trial status, create date, which experiment is owned Trial and link to the appropriate experiment info.

All of this information can be shows in the Trials page, and then we can recycle some of this logic in the main page to show just the running Trials.

Also note that: in general we would like to push for Kubeflow to become a more integrated platform. That is what we showcased in the community meeting with a revamped centraldashboard sidebar (we will push this upstream real soon). In that instance, we are aligning the concept of KFP Experiments and Katib Experiments (because semantically they are the same thing!) and we would love to be able to align KFP Runs with Katib Trials, but there is no corresponding page in Katib as of now.

Moreover, a Katib "Main page" would make sense in a Katib standalone deployment. When integrated in Kubeflow, you would have specific buttons in the Kubeflow Centraldashboard sidebar that point to Katib Experiments, Katib Trials, etc..

If we want to have a summary of the Katib state, we could extend the Centraldashboard's main page to show some Katib related information. And this is totally doable! But I'd say this is a next step

I got your point @StefanoFioravanzo, thanks. Do we want to have just a list of Trials or also add some action when user clicks on the Trial?
@gaocegege @johnugeorge @sperlingxx What do you think about having the page with all Trials there?

[andreyvelich]

• JWA

@avdaredevil We have already integrated this SDK to Katib UI: https://github.com/kubeflow/katib/blob/master/pkg/ui/v1beta1/frontend/src/components/KubeflowDashboard.jsx#L15-L28 (ref PR: #982).
The related work there, is to how deal with user's refresh page (ref #1136).
When user updates page on Katib UI, the Kubeflow namespace is unset.

[andreyvelich]

/priority p2

[issue-label-bot]

Issue-Label Bot is automatically applying the labels:

Label	Probability
area/frontend	1.00

Please mark this comment with 👍 or 👎 to give our bot feedback!
Links: app homepage, dashboard and code for this bot.

[issue-label-bot]

Issue-Label Bot is automatically applying the labels:

Label	Probability
area/frontend	1.00

Please mark this comment with 👍 or 👎 to give our bot feedback!
Links: app homepage, dashboard and code for this bot.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[andreyvelich]

/lifecycle frozen

[andreyvelich]

We can close this issues since we are creating new Katib UI: #1421.