Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add TableArtifactViewer for csv file #877

Merged
merged 8 commits into from
Jun 7, 2024

Conversation

keisuke-umezawa
Copy link
Member

@keisuke-umezawa keisuke-umezawa commented May 8, 2024

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

NA

What does this implement/fix? Explain your changes.

Make artifact viewer compatible with CSV files.

sample

import logging
import math
import os
from typing import Tuple

import optuna
from optuna_dashboard._app import create_app


host = "127.0.0.1"
port = 8080

optuna.logging.set_verbosity(logging.CRITICAL)

def create_optuna_storage() -> optuna.storages.InMemoryStorage:
    storage = optuna.storages.InMemoryStorage()

    # Single-objective study
    study = optuna.create_study(study_name="single-objective", storage=storage)

    def objective_single(trial: optuna.Trial) -> float:
        x1 = trial.suggest_float("x1", 0, 10)
        x2 = trial.suggest_float("x2", 0, 10)
        x3 = trial.suggest_categorical("x3", ["foo", "bar"])
        return (x1 - 2) ** 2 + (x2 - 5) ** 2

    study.optimize(objective_single, n_trials=100)

    return storage


def main() -> None:
    storage = create_optuna_storage()
    base_path = "./artifacts"
    os.makedirs(base_path, exist_ok=True)
    artifact_store = optuna.artifacts.FileSystemArtifactStore(base_path=base_path)
    app = create_app(storage, artifact_store, debug=True)
    app.run(host=host, port=port, reloader=True)

if __name__ == "__main__":
    main()

You can see artifact loader on study page.
スクリーンショット 2024-05-12 14 31 02
スクリーンショット 2024-05-12 14 31 10

@keisuke-umezawa keisuke-umezawa changed the title [wip] Add TableArtifactViewer for csv file Add TableArtifactViewer for csv file May 12, 2024
@keisuke-umezawa keisuke-umezawa marked this pull request as ready for review May 12, 2024 05:12
Copy link
Collaborator

@porink0424 porink0424 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you very much for the PR 👍
I left some comments.


useEffect(() => {
const handleFileChange = async () => {
const loadedData = await loadCSV(props)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You may want to catch errors occurred in loadCSV. I think it would be better to display the error message.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added error handling.

@@ -24,6 +24,7 @@ import { StudyDetail } from "ts/types/optuna"
import { actionCreator } from "../../action"
import { ArtifactCardMedia } from "./ArtifactCardMedia"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When a csv table is large, it is too long to display all 50 rows.
スクリーンショット 2024-05-29 15 13 31
It would be better if you fix max height or something.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Stop showing table here. Just leave file open button.

Comment on lines 64 to 100
<Modal
open={open}
onClose={() => {
setOpen(false)
setTarget(["", null])
}}
>
<Box
component="div"
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
bgcolor: "background.paper",
borderRadius: "15px",
}}
>
<IconButton
sx={{
position: "absolute",
top: theme.spacing(2),
right: theme.spacing(2),
}}
onClick={() => {
setOpen(false)
setTarget(["", null])
}}
>
<ClearIcon />
</IconButton>
<TableArtifactViewer
src={target[0]}
filetype={target[1]?.filename.split(".").pop()}
/>
</Box>
</Modal>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar to the comment above, when a csv table is large, the area looks overflow.
スクリーンショット 2024-05-29 15 14 10
You may want to fix the height, and make it scrollable.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make it scrollable.

@porink0424
Copy link
Collaborator

@keisuke-umezawa
Also, This is kind of tiny problem though, the full-screen modal has different size of radius in the upper corners and lower corners.
329827823-fe5ce7d8-58dc-46e2-a025-3912ff62300b

@keisuke-umezawa
Copy link
Member Author

@porink0424
Thank you for reviewing. I followed your comment. Could you review it again?

Copy link
Collaborator

@porink0424 porink0424 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@c-bata c-bata merged commit a6f08cd into optuna:main Jun 7, 2024
9 checks passed
@keisuke-umezawa keisuke-umezawa deleted the feature/table-viewer branch June 9, 2024 05:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants