Enable users to jump arbitrary page numbers from text field #739

nabenabe0928 · 2023-12-21T08:22:19Z

Contributor License Agreement

This repository (optuna-dashboard) and Goptuna share common code.
This pull request may therefore be ported to Goptuna.
Make sure that you understand the consequences concerning licenses and check the box below if you accept the term before creating this pull request.

I agree this patch may be ported to Goptuna by other Goptuna contributors.

Reference Issues/PRs

This PR solves issue#504.

What does this implement/fix? Explain your changes.

This PR adds the following features:

a text field to specify which page number to jump in DataGrid
the pagination for DataGrid will appear only if we have data,
the pagination text field for DataGrid will appear only if we have more than 4 pages, and
the pagination information is slightly modified to tell the page number.

After the Modification

Too many rows to click next many times.
We can specify the page number to jump.
The page number was successfully jumped to the specified page after hitting the enter key.

codecov · 2023-12-21T08:27:15Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (616f08c) 68.20% compared to head (5f73021) 69.48%.
Report is 49 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #739      +/-   ##
==========================================
+ Coverage   68.20%   69.48%   +1.27%     
==========================================
  Files          35       35              
  Lines        2334     2353      +19     
==========================================
+ Hits         1592     1635      +43     
+ Misses        742      718      -24

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

nabenabe0928 · 2023-12-22T04:17:39Z

Could you review this PR?
@eukaryo @keisuke-umezawa

keisuke-umezawa · 2024-01-03T14:45:05Z

I will review it detail later, but can you add e2e test for loading journal storage file similar to sqlite here?

optuna-dashboard/e2e_tests/test_standalone/test_study_list.py

Lines 28 to 74 in 6b05c98

    
           def test_load_storage( 
        
               page: Page, 
        
               server_url: str, 
        
           ) -> None: 
        
               study_name = "single-objective" 
        
               url = f"{server_url}" 
        
               def create_storage_file(filename: str): 
        
                   import optuna 
        
                   storage = optuna.storages.RDBStorage(f"sqlite:///{filename}") 
        
                   study = optuna.create_study(study_name=study_name, storage=storage) 
        
                   def objective(trial: optuna.Trial) -> float: 
        
                       x1 = trial.suggest_float("x1", 0, 10) 
        
                       x2 = trial.suggest_float("x2", 0, 10) 
        
                       return (x1 - 2) ** 2 + (x2 - 5) ** 2 
        
                   study.optimize(objective, n_trials=100) 
        
               with tempfile.TemporaryDirectory() as dir: 
        
                   with tempfile.NamedTemporaryFile() as fp: 
        
                       filename = fp.name 
        
                       path = os.path.join(dir, filename) 
        
                       create_storage_file(filename) 
        
                       page.goto(url) 
        
                       with page.expect_file_chooser() as fc_info: 
        
                           page.get_by_role( 
        
                               "button", 
        
                               name="Load an Optuna Storage Drag your SQLite3 file here or click to browse.", 
        
                           ).click() 
        
                       file_chooser = fc_info.value 
        
                       file_chooser.set_files(path) 
        
                   page.get_by_role("link", name=study_name).click() 
        
                   def count_components(page: Page, component_name: str): 
        
                       component_count = page.evaluate( 
        
                           f"""() => {{ 
        
                           const components = document.querySelectorAll('.{component_name}'); 
        
                           return components.length; 
        
                       }}""" 
        
                       ) 
        
                       return component_count 
        
                   count = count_components(page, "MuiCardContent-root") 
        
                   assert count == 6

keisuke-umezawa

I left some comments. Could you check them?

To add one more comment, can we make the box smaller especially for its hight because it is overlapped with the above line?

keisuke-umezawa · 2024-01-03T15:35:45Z

optuna_dashboard/ts/components/DataGrid.tsx

+              page={page}
+              labelDisplayedRows={({ page }) =>
+                `${page + 1} of ${maxPageNumber}`
+              }


[nits] It seems that we should use default values here. I surveyed some templates for pagination and this one is similar to what you implemented. https://ui-patterns.com/patterns/Pagination/examples/691

How about adding max page number somewhere around PaginationTextFieldComponent?

[Question] Does this mean I should simply remove labelDisplayedRows and add maxPageNumber to the text field?
I reflected what I assumed from your response, so could you confirm it from my modification?

Sorry for my poor explanation. You understood what I meant and fixed them. Thank you.

optuna_dashboard/ts/components/DataGrid.tsx

keisuke-umezawa · 2024-01-03T15:45:23Z

optuna_dashboard/ts/components/DataGrid.tsx

+    ) => {
+      event.preventDefault()
+      const newPage = parseInt(specifiedPageText, 10)
+      setSpecifiedPageText("") // reset the input field


[nits] This line should be the last line of handleSubmitPageNumber.

I fixed it, but could you tell me why it would be better for my knowledge?
Is it just because of code preference or because of its code behavior?

Sorry for my poor explanation. The setSpecifiedPageText("") should be the procedure if the process is correctly handled. In that sense, this line should be put on the last line. More detail, the reason is that if we use early return e.g. if (Number.isNaN(newPage)) {, we should keep text in the field because the user can fix it later.

Thank you for the clarification! Your explanation actually makes sense")

optuna_dashboard/ts/components/DataGrid.tsx

keisuke-umezawa · 2024-01-03T15:57:11Z

optuna_dashboard/ts/components/DataGrid.tsx

+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+            />
+            {maxPageNumber > 4 ? (


[question] Why did you choose 4 here?

I will quickly leave a comment before I forget.
For the other comments, I will address then when I'm back to the work!
The reason is very simple: When we move from page X to Y by the text field, we need three actions. (1) Click the text field, (2) Type a number, (3) Hit the enter key.
Meanwhile when we would like to move any pages for 4-page data grid, we need to make less than or equal to three actions from A to B. Namely, we need to click the prev/next key less than or equal to three times.
That's why it's unnecessary (or at least, not more efficient ) to use the text field in this case.

Is it better to let it stay always?
Plus, is there any other stuff to address?

I understand it. But the reason is not so obvious if we do not put code comment there. We can choose the following options:

Add comments for 4,

Change the number from 4 to 2 (because 2 is much easier to understand the reason), or

Always show it.

nabenabe0928 · 2024-01-15T11:50:29Z

I will review it detail later, but can you add e2e test for loading journal storage file similar to sqlite here?

optuna-dashboard/e2e_tests/test_standalone/test_study_list.py

Lines 28 to 74 in 6b05c98

def test_load_storage(

page: Page,

server_url: str,

) -> None:

study_name = "single-objective"

url = f"{server_url}"

def create_storage_file(filename: str):

import optuna

storage = optuna.storages.RDBStorage(f"sqlite:///{filename}")

study = optuna.create_study(study_name=study_name, storage=storage)

def objective(trial: optuna.Trial) -> float:

x1 = trial.suggest_float("x1", 0, 10)

x2 = trial.suggest_float("x2", 0, 10)

return (x1 - 2) ** 2 + (x2 - 5) ** 2

study.optimize(objective, n_trials=100)

with tempfile.TemporaryDirectory() as dir:

with tempfile.NamedTemporaryFile() as fp:

filename = fp.name

path = os.path.join(dir, filename)

create_storage_file(filename)

page.goto(url)

with page.expect_file_chooser() as fc_info:

page.get_by_role(

"button",

name="Load an Optuna Storage Drag your SQLite3 file here or click to browse.",

).click()

file_chooser = fc_info.value

file_chooser.set_files(path)

page.get_by_role("link", name=study_name).click()

def count_components(page: Page, component_name: str):

component_count = page.evaluate(

f"""() => {{

const components = document.querySelectorAll('.{component_name}');

return components.length;

}}"""

)

return component_count

count = count_components(page, "MuiCardContent-root")

assert count == 6

@keisuke-umezawa
It does not seem to me that this modification relates to my PR, but should I also include it in this PR?

keisuke-umezawa · 2024-01-16T00:15:16Z

@keisuke-umezawa
It does not seem to me that this modification relates to my PR, but should I also include it in this PR?

So sorry, it is a wrong message. you can ignore it.

keisuke-umezawa

It looks good to me other than a nit. I will merge it after your change.

keisuke-umezawa · 2024-01-21T07:04:43Z

optuna_dashboard/ts/components/DataGrid.tsx

+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+            />
+            {maxPageNumber > 4 ? (


I understand it. But the reason is not so obvious if we do not put code comment there. We can choose the following options:

Add comments for 4,

Change the number from 4 to 2 (because 2 is much easier to understand the reason), or

Always show it.

nabenabe0928 · 2024-01-22T04:30:32Z

@keisuke-umezawa I reflected your suggestion

keisuke-umezawa

LGTM! Thank you for working on it.

nabenabe0928 marked this pull request as ready for review December 22, 2023 04:15

nabenabe0928 assigned keisuke-umezawa and eukaryo Dec 22, 2023

keisuke-umezawa suggested changes Jan 3, 2024

View reviewed changes

nabenabe0928 force-pushed the feat/add-more-flexible-pagination branch 2 times, most recently from 501dd2f to 37fbdd6 Compare January 15, 2024 11:44

nabenabe0928 added 9 commits January 15, 2024 12:47

Enable users to jump arbitrary page numbers from text field

e7ea5d1

Apply linter

4e48165

Refactor comments

c792a8b

Modify the pagination info label

22b938e

Disable tslint in a line

0f08fe0

Rename some variables for more clarity

449caf2

Move the text field func to the inside of DataGrid

1c3025e

Address some comments by umezawa

71e9ba5

Adjust the height of the text field

7e2313c

keisuke-umezawa reviewed Jan 21, 2024

View reviewed changes

Address the umezawa's comment

5f73021

nabenabe0928 force-pushed the feat/add-more-flexible-pagination branch from 37fbdd6 to 5f73021 Compare January 22, 2024 04:29

keisuke-umezawa approved these changes Jan 23, 2024

View reviewed changes

keisuke-umezawa merged commit 6c7dc62 into optuna:main Jan 23, 2024
10 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enable users to jump arbitrary page numbers from text field #739

Enable users to jump arbitrary page numbers from text field #739

nabenabe0928 commented Dec 21, 2023 •

edited

Loading

codecov bot commented Dec 21, 2023 •

edited

Loading

nabenabe0928 commented Dec 22, 2023

keisuke-umezawa commented Jan 3, 2024

keisuke-umezawa left a comment

keisuke-umezawa Jan 3, 2024

keisuke-umezawa Jan 3, 2024

nabenabe0928 Jan 15, 2024

keisuke-umezawa Jan 21, 2024

keisuke-umezawa Jan 3, 2024

nabenabe0928 Jan 15, 2024

keisuke-umezawa Jan 21, 2024

nabenabe0928 Jan 22, 2024

keisuke-umezawa Jan 3, 2024

nabenabe0928 Jan 5, 2024 •

edited

Loading

nabenabe0928 Jan 19, 2024

keisuke-umezawa Jan 21, 2024

nabenabe0928 commented Jan 15, 2024 •

edited

Loading

keisuke-umezawa commented Jan 16, 2024

keisuke-umezawa left a comment

keisuke-umezawa Jan 21, 2024

nabenabe0928 commented Jan 22, 2024

keisuke-umezawa left a comment

Enable users to jump arbitrary page numbers from text field #739

Enable users to jump arbitrary page numbers from text field #739

Conversation

nabenabe0928 commented Dec 21, 2023 • edited Loading

Contributor License Agreement

Reference Issues/PRs

What does this implement/fix? Explain your changes.

After the Modification

codecov bot commented Dec 21, 2023 • edited Loading

Codecov Report

nabenabe0928 commented Dec 22, 2023

keisuke-umezawa commented Jan 3, 2024

keisuke-umezawa left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nabenabe0928 Jan 5, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nabenabe0928 commented Jan 15, 2024 • edited Loading

keisuke-umezawa commented Jan 16, 2024

keisuke-umezawa left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nabenabe0928 commented Jan 22, 2024

keisuke-umezawa left a comment

Choose a reason for hiding this comment

nabenabe0928 commented Dec 21, 2023 •

edited

Loading

codecov bot commented Dec 21, 2023 •

edited

Loading

nabenabe0928 Jan 5, 2024 •

edited

Loading

nabenabe0928 commented Jan 15, 2024 •

edited

Loading