[Feature]: Add Experiment Details View UI

[ihsanKisi]

✏️ Problem Description

We are missing a panel, where the user can view the details of an experiment.

💡 Feature Request

We need the UI that provides the structure for the experiment details view. For the starters, this UI should provide two tabs: Meta (can also be called the overview tab) and metrics. The meta tab will give an overview of a single experiment and the metrics tab will provide graphs that describe metrics such as accuracy over the epocs etc. The implementation should be kept as generic as possible to later on support comparisons between multiple experiments, as well as custom tabs.

🌍 Context

No response

🔍 Additional Information

This figma sketch can give an idea of how it should look.

👍 Code of Conduct

• I agree to follow this project's Code of Conduct

[ihsanKisi]

I just found a design from TensorOpera AI that I think will be useful for our design.

[aiakide]

The experiment detail view should be a separate page and work with a parameter that is the experiment ID (dashboard.local/detail-view?experiment-id=as234234 or dashboard.local/detail-view/as234234).

[aiakide]

The tabs that are displayed in the detailed view must be loaded dynamically based on a configuration. These components all inherit from an abstract class. Each component must decide whether it should be rendered in the current state of the dashboard. For example not every component is suitable for every experiment type. The classes can look like this:

[aiakide]

classDiagram
    class ExperimentDetailComponent{
        + str: name
        - StateManager _state_manager
        
        - _should_be_rendered*()
    }
    <<Abstract>> ExperimentDetailComponent
    class CustomExperimentDetailViewComponet{
        + str: name
        - StateManager _state_manager
        + _should_be_rendered()
    }
    CustomExperimentDetailViewComponet <|-- ExperimentDetailComponent

Loading

[aiakide]

Added by #23