collapsible panel redesign (#487)

This commit is contained in:
pollfly
2023-02-22 12:29:36 +02:00
committed by GitHub
parent db692908ff
commit ca60eaf36b
15 changed files with 253 additions and 263 deletions

View File

@@ -62,39 +62,28 @@ Click on **DETAILS** on the top left of the info panel or hover over a version n
to view:
* **CONTENT** - Table summarizing version contents, including file names, file sizes, and hashes
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">Version Content</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="Version Content">
![content](../../img/webapp_dataset_content.png)
</div>
</details>
<br/>
</Collapsible>
* **PREVIEW** - A preview of the dataset version's contents
access [plot tools](../webapp_exp_track_visual.md#scalar-plot-tools). Click on a debug sample to expand it.
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">Version Preview</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="Version Preview">
![preview](../../img/webapp_dataset_preview.png)
</div>
</details>
<br/>
</Collapsible>
* **CONSOLE** - The dataset versions console output
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">Version Console</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="Version Console">
![console](../../img/webapp_dataset_console.png)
</div>
</details>
</Collapsible>
<br/>

View File

@@ -32,28 +32,22 @@ table / full screen**.
The info panel keeps the experiment table in view so that [experiment actions](webapp_exp_table.md#experiment-actions)
can be performed from the table (as well as the menu in the info panel).
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="View a screenshot">
![Info panel](../img/webapp_tracking_40.png)
</div>
</details>
</Collapsible>
### Full Screen Details View
The full screen details view allows for easier viewing and working with experiment tracking and results. The experiments
table is not visible when the full screen details view is open. Perform experiment actions from the menu.
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="View a screenshot">
![Full screen view](../img/webapp_tracking_33.png)
</div>
</details>
</Collapsible>
## Execution
@@ -241,14 +235,11 @@ tools (e.g. Notion). See [Plot Controls](#plot-controls).
The complete experiment log containing everything printed to stdout and stderr appears in the **CONSOLE** tab. The full log
is downloadable. To view the end of the log, click **Jump to end**.
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="View a screenshot">
![Console tab](../img/webapp_tracking_32.png)
</div>
</details>
</Collapsible>
@@ -270,26 +261,19 @@ are on the left side of the window. The tools include:
* **Group by** - Select one of the following:
* **Metric** - All variants for a metric on the same plot
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="View a screenshot">
![Plots grouped by metric](../img/webapp_tracking_33.png)
</div>
</details>
<br/>
</Collapsible>
* **None** - Group by metric and variant (individual metric-variant plots).
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="View a screenshot">
![Plots groups my metric and variant](../img/webapp_tracking_34.png)
</div>
</details>
</Collapsible>
* Show / hide plots - Click **HIDE ALL**, and then click <img src="/docs/latest/icons/ico-show.svg" alt="Eye Show All" className="icon size-md space-sm" />
on those you want to see.