ClearML/clearml-docs
1
0
Fork 0
mirror of https://github.com/clearml/clearml-docs synced 2025-02-26 05:59:41 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

collapsible panel redesign (#487)

Browse Source
This commit is contained in:
pollfly 2023-02-22 12:29:36 +02:00 committed by GitHub
parent db692908ff
commit ca60eaf36b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 253 additions and 263 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
docs/apps/clearml_session.md
View File

@ -17,26 +17,19 @@ machine that better meets resource needs. This feature provides local links to a
remote machine over a secure and encrypted SSH connection. By default, the JupyterLab and remote machine over a secure and encrypted SSH connection. By default, the JupyterLab and
VS Code remote sessions use ports 8878 and 8898 respectively. VS Code remote sessions use ports 8878 and 8898 respectively.
<details className="cml-expansion-panel screenshot"> <Collapsible title="JupyterLab Window" type="screenshot">
<summary className="cml-expansion-panel-summary">JupyterLab Window</summary>
<div className="cml-expansion-panel-content">
![image](../img/session_jupyter.png) ![image](../img/session_jupyter.png)
</div> </Collapsible>
</details>
<br/> <br/>
<details className="cml-expansion-panel screenshot"> <Collapsible type="screenshot" title="VS Code Window">
<summary className="cml-expansion-panel-summary">VS Code Window</summary>
<div className="cml-expansion-panel-content">
![image](../img/session_vs_code.png) ![image](../img/session_vs_code.png)
</div> </Collapsible>
</details>
<br/>
:::info Remote PyCharm :::info Remote PyCharm
You can also work with PyCharm in a remote session over SSH. Use the [PyCharm Plugin](../guides/ide/integration_pycharm.md) You can also work with PyCharm in a remote session over SSH. Use the [PyCharm Plugin](../guides/ide/integration_pycharm.md)

8
docs/deploying_clearml/clearml_config_for_clearml_server.md
View File

@ -17,9 +17,7 @@ by setting [configuration options](../configs/clearml_conf.md).
clearml-init clearml-init
``` ```
<details className="cml-expansion-panel info"> <Collapsible type="info" title="Learn about creating multiple ClearML configuration files">
<summary className="cml-expansion-panel-summary">Learn about creating multiple ClearML configuration files</summary>
<div className="cml-expansion-panel-content">
Additional ClearML configuration files can be created, for example, to use inside Docker containers when executing Additional ClearML configuration files can be created, for example, to use inside Docker containers when executing
a Task. a Task.
@ -35,9 +33,7 @@ by setting [configuration options](../configs/clearml_conf.md).
For more information about running experiments inside Docker containers, see [ClearML Agent Deployment](../clearml_agent.md#deployment) For more information about running experiments inside Docker containers, see [ClearML Agent Deployment](../clearml_agent.md#deployment)
and [ClearML Agent Reference](../clearml_agent/clearml_agent_ref.md). and [ClearML Agent Reference](../clearml_agent/clearml_agent_ref.md).
</div> </Collapsible>
</details>
<br/>
If the setup wizard's response indicates that a configuration file already exists, follow the instructions in If the setup wizard's response indicates that a configuration file already exists, follow the instructions in
[here](#add-clearml-to-a-configuration-file). The wizard does not edit or overwrite existing configuration files. [here](#add-clearml-to-a-configuration-file). The wizard does not edit or overwrite existing configuration files.

9
docs/deploying_clearml/upgrade_server_linux_mac.md
View File

@ -2,10 +2,7 @@
title: Linux or macOS title: Linux or macOS
--- ---
<details className="cml-expansion-panel info"> <Collapsible title="Important: Upgrading from v0.14 or older" type="info">
<summary className="cml-expansion-panel-summary">Important: Upgrading from v0.14 or older</summary>
<div class="cml-expansion-panel-content">
For Linux only, if upgrading from <strong>Trains Server</strong> v0.14 or older, configure the <strong>ClearML Agent Services</strong>. For Linux only, if upgrading from <strong>Trains Server</strong> v0.14 or older, configure the <strong>ClearML Agent Services</strong>.
@ -17,13 +14,11 @@ title: Linux or macOS
export CLEARML_AGENT_GIT_USER=git_username_here export CLEARML_AGENT_GIT_USER=git_username_here
export CLEARML_AGENT_GIT_PASS=git_password_here export CLEARML_AGENT_GIT_PASS=git_password_here
:::note :::note
For backwards compatibility, the environment variables ``TRAINS_HOST_IP``, ``TRAINS_AGENT_GIT_USER``, and ``TRAINS_AGENT_GIT_PASS`` are supported. For backwards compatibility, the environment variables ``TRAINS_HOST_IP``, ``TRAINS_AGENT_GIT_USER``, and ``TRAINS_AGENT_GIT_PASS`` are supported.
::: :::
</div> </Collapsible>
</details>
<br/> <br/>

7
docs/fundamentals/hpo.md
View File

@ -33,16 +33,13 @@ The diagram above demonstrates the typical flow of hyperparameter optimization w
![Optimization results summary chart](../img/fundamentals_hpo_summary.png) ![Optimization results summary chart](../img/fundamentals_hpo_summary.png)
<details className="cml-expansion-panel screenshot"> <Collapsible title="Parallel coordinate and scalar plots" type="screenshot">
<summary className="cml-expansion-panel-summary">Parallel coordinate and scalar plots</summary>
<div className="cml-expansion-panel-content">
![Parallel Coordinates](../img/fundamentals_hpo_parallel_coordinates.png) ![Parallel Coordinates](../img/fundamentals_hpo_parallel_coordinates.png)
![Scalars](../img/fundamentals_hpo_scalars.png) ![Scalars](../img/fundamentals_hpo_scalars.png)
</div> </Collapsible>
</details>
### Supported Optimizers ### Supported Optimizers

28
docs/guides/frameworks/pytorch/notebooks/table/tabular_training_pipeline.md
View File

@ -69,9 +69,7 @@ and `fill_numerical_NA`. It will connect a parameter dictionary to the Task whic
The pipeline will override the values of those keys when the pipeline executes the cloned Tasks of the base Task. In this way, The pipeline will override the values of those keys when the pipeline executes the cloned Tasks of the base Task. In this way,
two sets of data are created in the pipeline. two sets of data are created in the pipeline.
<details className="cml-expansion-panel info"> <Collapsible type="info" title="ClearML tracks and reports the preprocessing step">
<summary className="cml-expansion-panel-summary">ClearML tracks and reports the preprocessing step</summary>
<div className="cml-expansion-panel-content">
In the preprocessing data Task, the parameter values in ``data_task_id``, ``fill_categorical_NA``, and ``fill_numerical_NA`` are overridden. In the preprocessing data Task, the parameter values in ``data_task_id``, ``fill_categorical_NA``, and ``fill_numerical_NA`` are overridden.
```python ```python
@ -111,8 +109,7 @@ Finally, the training data and validation data are stored as artifacts.
![image](../../../../../img/preprocessing_and_encoding_07.png) ![image](../../../../../img/preprocessing_and_encoding_07.png)
</div> </Collapsible>
</details>
### Training Step ### Training Step
@ -142,9 +139,7 @@ pipe.add_step(
) )
``` ```
<details className="cml-expansion-panel info"> <Collapsible type="info" title="ClearML tracks and reports the training step">
<summary className="cml-expansion-panel-summary">ClearML tracks and reports the training step</summary>
<div className="cml-expansion-panel-content">
In the training Task, the ``data_task_id`` parameter value is overridden. This allows the pipeline controller to pass a In the training Task, the ``data_task_id`` parameter value is overridden. This allows the pipeline controller to pass a
different Task ID to each instance of training, where each Task has an artifact containing different data. different Task ID to each instance of training, where each Task has an artifact containing different data.
@ -173,8 +168,7 @@ The TensorFlow Definitions appear in the **TF_DEFINE** subsection.
![image](../../../../../img/train_tabular_predictor_02.png) ![image](../../../../../img/train_tabular_predictor_02.png)
</div> </Collapsible>
</details>
### Best Model Step ### Best Model Step
@ -195,9 +189,7 @@ pipe.add_step(
The IDs of the training Tasks from the steps named `train_1` and `train_2` are passed to the best model Task. They take the form `${<stage-name>.<part-of-Task>}`. The IDs of the training Tasks from the steps named `train_1` and `train_2` are passed to the best model Task. They take the form `${<stage-name>.<part-of-Task>}`.
<details className="cml-expansion-panel info"> <Collapsible type="info" title="ClearML tracks and reports the best model step">
<summary className="cml-expansion-panel-summary">ClearML tracks and reports the best model step</summary>
<div className="cml-expansion-panel-content">
In the best model Task, the `train_tasks_ids` parameter is overridden with the Task IDs of the two training tasks. In the best model Task, the `train_tasks_ids` parameter is overridden with the Task IDs of the two training tasks.
@ -221,8 +213,7 @@ The model details appear in the **MODELS** table **>** **>GENERAL**.
![image](../../../../../img/tabular_training_pipeline_04.png) ![image](../../../../../img/tabular_training_pipeline_04.png)
</div> </Collapsible>
</details>
### Pipeline Start, Wait, and Cleanup ### Pipeline Start, Wait, and Cleanup
@ -238,9 +229,7 @@ pipe.wait()
pipe.stop() pipe.stop()
``` ```
<details className="cml-expansion-panel info"> <Collapsible type="info" title="ClearML tracks and reports the pipeline's execution">
<summary className="cml-expansion-panel-summary">ClearML tracks and reports the pipeline's execution</summary>
<div className="cml-expansion-panel-content">
ClearML reports the pipeline with its steps in **PLOTS**. ClearML reports the pipeline with its steps in **PLOTS**.
@ -250,8 +239,7 @@ By hovering over a step or path between nodes, you can view information about it
![image](../../../../../img/tabular_training_pipeline_06.png) ![image](../../../../../img/tabular_training_pipeline_06.png)
</div> </Collapsible>
</details>
## Running the Pipeline ## Running the Pipeline

28
docs/hyperdatasets/masks.md
View File

@ -48,11 +48,8 @@ section of a Frame).
This example demonstrates an original image, its masks, and its frame containing This example demonstrates an original image, its masks, and its frame containing
the `sources` and ROI metadata. the `sources` and ROI metadata.
<details className="cml-expansion-panel info">
<summary className="cml-expansion-panel-summary">Example 1: View the frame</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="info" title="Example 1: View the frame">
This frame contains the `masks` list of dictionaries in `sources`, This frame contains the `masks` list of dictionaries in `sources`,
and the `rois` array, as well as several top-level key-value pairs. and the `rois` array, as well as several top-level key-value pairs.
@ -137,9 +134,7 @@ and the `rois` array, as well as several top-level key-value pairs.
} }
``` ```
</div> </Collapsible>
</details>
<br/>
* In `sources`: * In `sources`:
@ -153,10 +148,7 @@ and the `rois` array, as well as several top-level key-value pairs.
<details className="cml-expansion-panel screenshot"> <Collapsible type="screenshot" title="Example image and masks">
<summary className="cml-expansion-panel-summary">Example image and masks</summary>
<div className="cml-expansion-panel-content">
Original Image Original Image
![image](../img/hyperdatasets/concepts_masks_image_only.png) ![image](../img/hyperdatasets/concepts_masks_image_only.png)
@ -165,19 +157,13 @@ Mask image
![image](../img/hyperdatasets/concepts_masks.png) ![image](../img/hyperdatasets/concepts_masks.png)
</div> </Collapsible>
</details>
<br/>
### Example 2 ### Example 2
This example shows two masks for video from a camera. The masks label cars and the road. This example shows two masks for video from a camera. The masks label cars and the road.
<details className="cml-expansion-panel info"> <Collapsible type="info" title="Example 2: View the frame">
<summary className="cml-expansion-panel-summary">Example 2: View the frame</summary>
<div className="cml-expansion-panel-content">
```json ```json
"sources": [ "sources": [
@ -227,9 +213,7 @@ This example shows two masks for video from a camera. The masks label cars and t
} }
``` ```
</div> </Collapsible>
</details>
<br/>
* In `sources`: * In `sources`:
* The source ID is `front`. * The source ID is `front`.

9
docs/hyperdatasets/previews.md
View File

@ -19,9 +19,8 @@ The following is an example of preview metadata.
"timestamp": 0 "timestamp": 0
} }
``` ```
<details className="cml-expansion-panel configuration">
<summary className="cml-expansion-panel-summary">View an entire frame containing a preview</summary> <Collapsible type="configuration" title="View an entire frame containing a preview">
<div className="cml-expansion-panel-content">
```json ```json
{ {
@ -95,9 +94,7 @@ The following is an example of preview metadata.
} }
``` ```
</div> </Collapsible>
</details>
<br/>
Here's an example of Previews in the ClearML Enterprise WebApp (UI). Each thumbnail is a Preview. Here's an example of Previews in the ClearML Enterprise WebApp (UI). Each thumbnail is a Preview.

25
docs/hyperdatasets/single_frames.md
View File

@ -69,9 +69,7 @@ This is useful when working with a video. You can give all the video frames the
The panel below describes the details contained within a `frame`: The panel below describes the details contained within a `frame`:
<details className="cml-expansion-panel configuration"> <Collapsible type="configuration" title="Frame Structure">
<summary className="cml-expansion-panel-summary">Frame Structure</summary>
<div className="cml-expansion-panel-content">
* `id` (*string*) - The unique ID of this frame. * `id` (*string*) - The unique ID of this frame.
* `blob` (*string*) - Raw data. * `blob` (*string*) - Raw data.
@ -130,9 +128,7 @@ The panel below describes the details contained within a `frame`:
* `saved` - The epoch time that the frame was saved. * `saved` - The epoch time that the frame was saved.
* `timestamp` - For images from video, a timestamp that indicates the absolute position of this frame from the source (video). * `timestamp` - For images from video, a timestamp that indicates the absolute position of this frame from the source (video).
</div> </Collapsible>
</details>
<br/>
## WebApp ## WebApp
@ -142,21 +138,16 @@ WebApp (UI).
When viewing a frame on the WebApp, all the information associated with it can be viewed, including its frame labels and When viewing a frame on the WebApp, all the information associated with it can be viewed, including its frame labels and
object annotations, its metadata, and other details. object annotations, its metadata, and other details.
<details className="cml-expansion-panel screenshot"> <Collapsible type="screenshot" title="SingleFrame in the WebApp frame viewer">
<summary className="cml-expansion-panel-summary">SingleFrame in the WebApp frame viewer</summary>
<div className="cml-expansion-panel-content">
This image shows a SingleFrame in the ClearML Enterprise WebApp (UI) [frame viewer](webapp/webapp_datasets_frames.md#frame-viewer). This image shows a SingleFrame in the ClearML Enterprise WebApp (UI) [frame viewer](webapp/webapp_datasets_frames.md#frame-viewer).
![image](../img/hyperdatasets/frame_overview_01.png) ![image](../img/hyperdatasets/frame_overview_01.png)
</div> </Collapsible>
</details>
<br/>
<details className="cml-expansion-panel configuration">
<summary className="cml-expansion-panel-summary">SingleFrame details represented in the WebApp</summary> <Collapsible type="configuration" title="SingleFrame details represented in the WebApp">
<div className="cml-expansion-panel-content">
id : "287024" id : "287024"
@ -197,9 +188,7 @@ This image shows a SingleFrame in the ClearML Enterprise WebApp (UI) [frame view
saved_in_version : "6ad8b10c668e419f9dd40422f667592c" saved_in_version : "6ad8b10c668e419f9dd40422f667592c"
num_frames : 1 num_frames : 1
</div> </Collapsible>
</details>
<br/>
For more information about using Frames in the WebApp, see [Working with Frames](webapp/webapp_datasets_frames.md). For more information about using Frames in the WebApp, see [Working with Frames](webapp/webapp_datasets_frames.md).

25
docs/hyperdatasets/sources.md
View File

@ -23,9 +23,7 @@ The examples below demonstrate the `sources` section of a Frame for different ty
This example demonstrates `sources` for video. This example demonstrates `sources` for video.
<details className="cml-expansion-panel info"> <Collapsible type="info" title="Example 1">
<summary className="cml-expansion-panel-summary">Example 1</summary>
<div className="cml-expansion-panel-content">
```json ```json
/* video from one of four cameras on car */ /* video from one of four cameras on car */
@ -51,9 +49,7 @@ This example demonstrates `sources` for video.
``` ```
</div> </Collapsible>
</details>
<br/>
The `sources` example above details a video from a car that has two cameras. One camera The `sources` example above details a video from a car that has two cameras. One camera
is the source with the ID `front` and the other is the source with the ID `rear`. is the source with the ID `front` and the other is the source with the ID `rear`.
@ -73,9 +69,8 @@ Sources includes a variety of content types. This example shows an mp4 video.
### Example 2: Images Sources ### Example 2: Images Sources
This example demonstrates `sources` images. This example demonstrates `sources` images.
<details className="cml-expansion-panel info">
<summary className="cml-expansion-panel-summary">Example 2</summary> <Collapsible type="info" title="Example 2">
<div className="cml-expansion-panel-content">
```json ```json
/* camera images */ /* camera images */
@ -90,9 +85,7 @@ This example demonstrates `sources` images.
} }
``` ```
</div> </Collapsible>
</details>
<br/>
The `sources` of this frame contains the following information: The `sources` of this frame contains the following information:
* `content_type` - This frame contains an image in `png` format. * `content_type` - This frame contains an image in `png` format.
@ -105,9 +98,7 @@ The `sources` of this frame contains the following information:
This example demonstrates `sources` for video, `masks`, and `preview`. This example demonstrates `sources` for video, `masks`, and `preview`.
<details className="cml-expansion-panel info"> <Collapsible type="info" title="Example 3">
<summary className="cml-expansion-panel-summary">Example 3</summary>
<div className="cml-expansion-panel-content">
```json ```json
@ -182,9 +173,7 @@ This example demonstrates `sources` for video, `masks`, and `preview`.
} }
``` ```
</div> </Collapsible>
</details>
<br/>
This frame shows the `masks` section in `sources`, and the top-level `rois` array. This frame shows the `masks` section in `sources`, and the top-level `rois` array.

30
docs/hyperdatasets/webapp/webapp_datasets_versioning.md
View File

@ -73,9 +73,7 @@ Simple frame filtering returns frames containing at least one annotation with a
**To apply a simple frame filter,** select a label from the **LABEL FILTER** list. **To apply a simple frame filter,** select a label from the **LABEL FILTER** list.
<details className="cml-expansion-panel screenshot"> <Collapsible type="screenshot" title="Simple filter example">
<summary className="cml-expansion-panel-summary">Simple filter example</summary>
<div className="cml-expansion-panel-content">
* The **FRAMES** tab in the image below contains 101 frames. * The **FRAMES** tab in the image below contains 101 frames.
@ -86,8 +84,7 @@ Simple frame filtering returns frames containing at least one annotation with a
![Filtered version browser](../../img/hyperdatasets/frame_filtering_02.png) ![Filtered version browser](../../img/hyperdatasets/frame_filtering_02.png)
</div> </Collapsible>
</details>
### Advanced Frame Filtering ### Advanced Frame Filtering
@ -127,9 +124,7 @@ To clear all filters click <img src="/docs/latest/icons/ico-filter-reset.svg" al
#### Filtering Examples #### Filtering Examples
<details className="cml-expansion-panel screenshot"> <Collapsible type="screenshot" title="ROI Rules">
<summary className="cml-expansion-panel-summary">ROI Rules</summary>
<div className="cml-expansion-panel-content">
* Create one ROI rule for the `teddy bear` label, which shows the same three frames as the simple frame filter (above). * Create one ROI rule for the `teddy bear` label, which shows the same three frames as the simple frame filter (above).
@ -144,13 +139,9 @@ To clear all filters click <img src="/docs/latest/icons/ico-filter-reset.svg" al
![Labeled ROIs in frame viewer](../../img/hyperdatasets/frame_filtering_05.png) ![Labeled ROIs in frame viewer](../../img/hyperdatasets/frame_filtering_05.png)
</div> </Collapsible>
</details>
<br/>
<details className="cml-expansion-panel screenshot"> <Collapsible type="screenshot" title="Frame Rules">
<summary className="cml-expansion-panel-summary">Frame Rules</summary>
<div className="cml-expansion-panel-content">
Filter by metadata using Lucene queries. Filter by metadata using Lucene queries.
@ -162,13 +153,9 @@ Filter by metadata using Lucene queries.
![Frame metadata in frame viewer](../../img/hyperdatasets/frame_filtering_09.png) ![Frame metadata in frame viewer](../../img/hyperdatasets/frame_filtering_09.png)
</div> </Collapsible>
</details>
<br/>
<details className="cml-expansion-panel screenshot"> <Collapsible type="screenshot" title="Source Rules">
<summary className="cml-expansion-panel-summary">Source Rules</summary>
<div className="cml-expansion-panel-content">
Filter by sources using Lucene queries. Filter by sources using Lucene queries.
@ -178,8 +165,7 @@ Filter by sources using Lucene queries.
Lucene queries can also be used in ROI label filters and frame rules. Lucene queries can also be used in ROI label filters and frame rules.
</div> </Collapsible>
</details>
### Exporting Frames ### Exporting Frames

23
docs/webapp/datasets/webapp_dataset_viewing.md
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: to view:
* **CONTENT** - Table summarizing version contents, including file names, file sizes, and hashes * **CONTENT** - Table summarizing version contents, including file names, file sizes, and hashes
<details className="cml-expansion-panel screenshot"> <Collapsible type="screenshot" title="Version Content">
<summary className="cml-expansion-panel-summary">Version Content</summary>
<div className="cml-expansion-panel-content">
![content](../../img/webapp_dataset_content.png) ![content](../../img/webapp_dataset_content.png)
</div> </Collapsible>
</details>
<br/>
* **PREVIEW** - A preview of the dataset version's contents * **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. 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"> <Collapsible type="screenshot" title="Version Preview">
<summary className="cml-expansion-panel-summary">Version Preview</summary>
<div className="cml-expansion-panel-content">
![preview](../../img/webapp_dataset_preview.png) ![preview](../../img/webapp_dataset_preview.png)
</div> </Collapsible>
</details>
<br/>
* **CONSOLE** - The dataset version’s console output * **CONSOLE** - The dataset version’s console output
<details className="cml-expansion-panel screenshot"> <Collapsible type="screenshot" title="Version Console">
<summary className="cml-expansion-panel-summary">Version Console</summary>
<div className="cml-expansion-panel-content">
![console](../../img/webapp_dataset_console.png) ![console](../../img/webapp_dataset_console.png)
</div> </Collapsible>
</details>
<br/> <br/>

36
docs/webapp/webapp_exp_track_visual.md
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) 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). can be performed from the table (as well as the menu in the info panel).
<details className="cml-expansion-panel screenshot"> <Collapsible type="screenshot" title="View a screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![Info panel](../img/webapp_tracking_40.png) ![Info panel](../img/webapp_tracking_40.png)
</div> </Collapsible>
</details>
### Full Screen Details View ### Full Screen Details View
The full screen details view allows for easier viewing and working with experiment tracking and results. The experiments 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. table is not visible when the full screen details view is open. Perform experiment actions from the menu.
<details className="cml-expansion-panel screenshot"> <Collapsible type="screenshot" title="View a screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![Full screen view](../img/webapp_tracking_33.png) ![Full screen view](../img/webapp_tracking_33.png)
</div> </Collapsible>
</details>
## Execution ## 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 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**. is downloadable. To view the end of the log, click **Jump to end**.
<details className="cml-expansion-panel screenshot"> <Collapsible type="screenshot" title="View a screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![Console tab](../img/webapp_tracking_32.png) ![Console tab](../img/webapp_tracking_32.png)
</div> </Collapsible>
</details>
@ -270,26 +261,19 @@ are on the left side of the window. The tools include:
* **Group by** - Select one of the following: * **Group by** - Select one of the following:
* **Metric** - All variants for a metric on the same plot * **Metric** - All variants for a metric on the same plot
<details className="cml-expansion-panel screenshot"> <Collapsible type="screenshot" title="View a screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![Plots grouped by metric](../img/webapp_tracking_33.png) ![Plots grouped by metric](../img/webapp_tracking_33.png)
</div> </Collapsible>
</details>
<br/>
* **None** - Group by metric and variant (individual metric-variant plots). * **None** - Group by metric and variant (individual metric-variant plots).
<details className="cml-expansion-panel screenshot"> <Collapsible type="screenshot" title="View a screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![Plots groups my metric and variant](../img/webapp_tracking_34.png) ![Plots groups my metric and variant](../img/webapp_tracking_34.png)
</div> </Collapsible>
</details>
* 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" /> * 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. on those you want to see.

41
src/components/Collapsible.js Normal file
View File

@ -0,0 +1,41 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
import React from 'react';
class Collapsible extends React.Component {
constructor(props) {
super(props);
this.state = { open: false };
}
toggle=() => {
const { open } = this.state;
this.setState({ open: !open });
}
render() {
const { open } = this.state;
const { title, children, type } = this.props;
return (
<div className={`panel ${open ? "panel-open" : "panel-close"} ${type}`} >
<button type="button" className="panel-title" onClick={this.toggle}>
{title}
</button>
<div className="panel-content">
{children}
</div>
</div>
);
}
}
export default Collapsible;

206
src/css/custom.css
View File

@ -666,88 +666,6 @@ html[data-theme="light"] .icon {
left: calc(50% - 10px); left: calc(50% - 10px);
} }
/* expansion panel */
.cml-expansion-panel {
position: relative;
padding: 0 0 0 40px !important;
background-color: var(--ifm-toc-background-color);
/*border-left: 4px solid transparent;*/
border-radius: 4px;
transition: border-left 0.4s ease;
border: none !important;
}
div[class^="collapsibleContent"] {
margin: 0 !important;
padding: 0 !important;
border-top: none !important;
}
.cml-expansion-panel-summary {
outline: none;
color: #8f9dc9;
padding: 8px 24px 8px 32px;
line-height: 1.6rem;
cursor: pointer;
position: relative;
transition: color 0.4s ease;
}
.cml-expansion-panel-summary:before {
content:"";
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 24px;
line-height: 16px;
position: absolute;
left: -40px !important;
top: 4px !important;
background-color: var(--ifm-toc-background-color);
background-repeat: no-repeat;
background-position: center;
transform: rotate(0deg) !important;
}
.cml-expansion-panel-summary:after {
content:"";
position: absolute;
right: 12px;
top: 8px;
width: 24px;
height: 24px;
transform: rotate(0);
transition: 0.25s;
background: url('/icons/ico-chevron-down.svg') no-repeat center;
}
/* expansion content */
.cml-expansion-panel-content {
padding:16px;
}
/* icon types */
/* -> info */
.cml-expansion-panel.info .cml-expansion-panel-summary:before {
background-image: url('/icons/ico-info-circle.svg') !important;
}
/* -> tips */
.cml-expansion-panel.tips .cml-expansion-panel-summary:before {
background-image: url('/icons/ico-tips.svg') !important;
}
/* -> alert */
.cml-expansion-panel.alert .cml-expansion-panel-summary:before {
background-image: url('/icons/ico-alert.svg');
}
/* -> screenshot */
.cml-expansion-panel.screenshot .cml-expansion-panel-summary:before {
background-image: url('/icons/ico-image.svg');
}
/* -> configuration */
.cml-expansion-panel.configuration .cml-expansion-panel-summary:before {
background-image: url('/icons/ico-config.svg');
}
/* light mode */ /* light mode */
html[data-theme="light"] .cml-expansion-panel[open] { html[data-theme="light"] .cml-expansion-panel[open] {
@ -859,3 +777,127 @@ html[data-theme="dark"] .alert.alert--secondary {
.markdown .img-swt { .markdown .img-swt {
margin-bottom: 2.4rem; margin-bottom: 2.4rem;
} }
/* PANEL COLLAPSIBLE */
.panel {
margin-bottom: 12px;
padding: 0;
border: 1px solid;
border-radius: var(--ifm-global-radius);
box-shadow: none;
overflow: hidden;
}
/* PANEL COLORS */
.panel.info {
background-color: var(--ifm-color-info-contrast-background);
border-color: var(--ifm-color-info-lightest);
}
html[data-theme="dark"] .panel.info {
border-color: var(--ifm-color-info-darkest);
}
.panel.tips {
background-color: var(--ifm-color-success-contrast-background);
border-color: var(--ifm-color-success-dark);
}
.panel.alert {
background-color: var(--ifm-color-warning-contrast-background);
border-color: var(--ifm-color-warning-dark);
}
.panel.screenshot {
background-color: var(--ifm-color-gray-100);
border-color: var(--ifm-color-gray-600);
}
html[data-theme="dark"] .panel.screenshot {
background-color: var(--ifm-toc-background-color);
border-color: rgba(255,255,255,0.1);
}
.panel.configuration {
background-color: var(--ifm-color-gray-100);
border-color: var(--ifm-color-gray-600);
}
html[data-theme="dark"] .panel.configuration {
background-color: var(--ifm-toc-background-color);
border-color: rgba(255,255,255,0.1);
}
/* PANEL TITLE */
.panel-title {
display: flex;
align-items: center;
width: 100%;
margin: 0;
padding: 12px;
position: relative;
cursor: pointer;
font-size: 16px;
text-align: left;
background-color: inherit;
border: none;
color: var(--ifm-font-color-base);
}
.panel-title:after {
content:"";
position: absolute;
right: 12px;
top: calc(50% - 12px);
width: 24px;
height: 24px;
transform: rotate(0);
transition: transform 0.35s;
background: url('/icons/ico-chevron-down.svg') no-repeat center;
}
.panel-open .panel-title:after {
transform: rotate(-180deg);
}
/* PANEL CONTENT */
.panel-content {
padding: 12px 40px;
max-height: unset;
overflow: hidden;
transition: padding 0.35s;
}
.panel-close .panel-content {
padding: 0 40px;
max-height: 0;
}
/* PANEL ICONS */
/* info */
.panel.info .panel-title:before {
background-image: url('/icons/ico-info-circle.svg');
}
/* tips */
.panel.tips .panel-title:before {
background-image: url('/icons/ico-tips.svg');
}
/* alert */
.panel.alert .panel-title:before {
background-image: url('/icons/ico-alert.svg');
}
/* screenshot */
.panel.screenshot .panel-title:before {
background-image: url('/icons/ico-image.svg');
}
/* configuration */
.panel.configuration .panel-title:before {
background-image: url('/icons/ico-config.svg');
}
/* panel icon generic style */
.panel-title:before {
content:"";
display: flex;
align-items: center;
justify-content: center;
margin-right: 6px;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

20
src/theme/MDXComponents.js Normal file
View File

@ -0,0 +1,20 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
// Import the original mapper
import MDXComponents from '@theme-original/MDXComponents';
import Collapsible from '../components/Collapsible';
export default {
// Re-use the default mapping
...MDXComponents,
// Map the "collapsible" tag to our <Collapsible /> component!
// `Collapsible` will receive all props that were passed to `collapsible` in MDX
Collapsible,
};