mirror of
https://github.com/clearml/clearml-docs
synced 2025-02-25 21:49:39 +00:00
collapsible panel redesign (#487)
This commit is contained in:
parent
db692908ff
commit
ca60eaf36b
docs
apps
deploying_clearml
fundamentals
guides/frameworks/pytorch/notebooks/table
hyperdatasets
webapp
src
@ -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
|
||||
VS Code remote sessions use ports 8878 and 8898 respectively.
|
||||
|
||||
<details className="cml-expansion-panel screenshot">
|
||||
<summary className="cml-expansion-panel-summary">JupyterLab Window</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
<Collapsible title="JupyterLab Window" type="screenshot">
|
||||
|
||||

|
||||
|
||||
</div>
|
||||
</details>
|
||||
</Collapsible>
|
||||
|
||||
<br/>
|
||||
|
||||
<details className="cml-expansion-panel screenshot">
|
||||
<summary className="cml-expansion-panel-summary">VS Code Window</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
<Collapsible type="screenshot" title="VS Code Window">
|
||||
|
||||

|
||||
|
||||
</div>
|
||||
</details>
|
||||
<br/>
|
||||
</Collapsible>
|
||||
|
||||
:::info Remote PyCharm
|
||||
You can also work with PyCharm in a remote session over SSH. Use the [PyCharm Plugin](../guides/ide/integration_pycharm.md)
|
||||
|
@ -17,9 +17,7 @@ by setting [configuration options](../configs/clearml_conf.md).
|
||||
clearml-init
|
||||
```
|
||||
|
||||
<details className="cml-expansion-panel info">
|
||||
<summary className="cml-expansion-panel-summary">Learn about creating multiple ClearML configuration files</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
<Collapsible type="info" title="Learn about creating multiple ClearML configuration files">
|
||||
|
||||
Additional ClearML configuration files can be created, for example, to use inside Docker containers when executing
|
||||
a Task.
|
||||
@ -35,10 +33,8 @@ 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)
|
||||
and [ClearML Agent Reference](../clearml_agent/clearml_agent_ref.md).
|
||||
|
||||
</div>
|
||||
</details>
|
||||
<br/>
|
||||
|
||||
</Collapsible>
|
||||
|
||||
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.
|
||||
|
||||
|
@ -2,12 +2,9 @@
|
||||
title: Linux or macOS
|
||||
---
|
||||
|
||||
<details className="cml-expansion-panel info">
|
||||
<summary className="cml-expansion-panel-summary">Important: Upgrading from v0.14 or older</summary>
|
||||
<div class="cml-expansion-panel-content">
|
||||
<Collapsible title="Important: Upgrading from v0.14 or older" type="info">
|
||||
|
||||
|
||||
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>.
|
||||
|
||||
* If ``CLEARML_HOST_IP`` is not provided, then **ClearML Agent Services** uses the external public address of the ClearML Server.
|
||||
* If ``CLEARML_AGENT_GIT_USER`` / ``CLEARML_AGENT_GIT_PASS`` are not provided, then **ClearML Agent Services** can't access any private repositories for running service tasks.
|
||||
@ -16,15 +13,13 @@ title: Linux or macOS
|
||||
export CLEARML_HOST_IP=server_host_ip_here
|
||||
export CLEARML_AGENT_GIT_USER=git_username_here
|
||||
export CLEARML_AGENT_GIT_PASS=git_password_here
|
||||
|
||||
|
||||
:::note
|
||||
For backwards compatibility, the environment variables ``TRAINS_HOST_IP``, ``TRAINS_AGENT_GIT_USER``, and ``TRAINS_AGENT_GIT_PASS`` are supported.
|
||||
:::
|
||||
|
||||
</div>
|
||||
</details>
|
||||
|
||||
</Collapsible>
|
||||
|
||||
<br/>
|
||||
|
||||
**To upgrade ClearML Server Docker deployment:**
|
||||
|
@ -33,16 +33,13 @@ The diagram above demonstrates the typical flow of hyperparameter optimization w
|
||||
|
||||

|
||||
|
||||
<details className="cml-expansion-panel screenshot">
|
||||
<summary className="cml-expansion-panel-summary">Parallel coordinate and scalar plots</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
<Collapsible title="Parallel coordinate and scalar plots" type="screenshot">
|
||||
|
||||

|
||||
|
||||

|
||||
|
||||
</div>
|
||||
</details>
|
||||
</Collapsible>
|
||||
|
||||
### Supported Optimizers
|
||||
|
||||
|
@ -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,
|
||||
two sets of data are created in the pipeline.
|
||||
|
||||
<details className="cml-expansion-panel info">
|
||||
<summary className="cml-expansion-panel-summary">ClearML tracks and reports the preprocessing step</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
<Collapsible type="info" title="ClearML tracks and reports the preprocessing step">
|
||||
|
||||
In the preprocessing data Task, the parameter values in ``data_task_id``, ``fill_categorical_NA``, and ``fill_numerical_NA`` are overridden.
|
||||
```python
|
||||
@ -111,8 +109,7 @@ Finally, the training data and validation data are stored as artifacts.
|
||||
|
||||

|
||||
|
||||
</div>
|
||||
</details>
|
||||
</Collapsible>
|
||||
|
||||
|
||||
### Training Step
|
||||
@ -142,9 +139,7 @@ pipe.add_step(
|
||||
)
|
||||
```
|
||||
|
||||
<details className="cml-expansion-panel info">
|
||||
<summary className="cml-expansion-panel-summary">ClearML tracks and reports the training step</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
<Collapsible type="info" title="ClearML tracks and reports the training step">
|
||||
|
||||
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.
|
||||
@ -173,8 +168,7 @@ The TensorFlow Definitions appear in the **TF_DEFINE** subsection.
|
||||
|
||||

|
||||
|
||||
</div>
|
||||
</details>
|
||||
</Collapsible>
|
||||
|
||||
|
||||
### 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>}`.
|
||||
|
||||
<details className="cml-expansion-panel info">
|
||||
<summary className="cml-expansion-panel-summary">ClearML tracks and reports the best model step</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
<Collapsible type="info" title="ClearML tracks and reports the best model step">
|
||||
|
||||
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**.
|
||||
|
||||

|
||||
|
||||
</div>
|
||||
</details>
|
||||
</Collapsible>
|
||||
|
||||
|
||||
### Pipeline Start, Wait, and Cleanup
|
||||
@ -238,9 +229,7 @@ pipe.wait()
|
||||
pipe.stop()
|
||||
```
|
||||
|
||||
<details className="cml-expansion-panel info">
|
||||
<summary className="cml-expansion-panel-summary">ClearML tracks and reports the pipeline's execution</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
<Collapsible type="info" title="ClearML tracks and reports the pipeline's execution">
|
||||
|
||||
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
|
||||
|
||||

|
||||
|
||||
</div>
|
||||
</details>
|
||||
</Collapsible>
|
||||
|
||||
|
||||
## Running the Pipeline
|
||||
|
@ -48,11 +48,8 @@ section of a Frame).
|
||||
|
||||
This example demonstrates an original image, its masks, and its frame containing
|
||||
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`,
|
||||
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>
|
||||
</details>
|
||||
<br/>
|
||||
</Collapsible>
|
||||
|
||||
|
||||
* 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">
|
||||
<summary className="cml-expansion-panel-summary">Example image and masks</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
|
||||
<Collapsible type="screenshot" title="Example image and masks">
|
||||
Original Image
|
||||
|
||||

|
||||
@ -165,19 +157,13 @@ Mask image
|
||||
|
||||

|
||||
|
||||
</div>
|
||||
</details>
|
||||
<br/>
|
||||
|
||||
</Collapsible>
|
||||
|
||||
### Example 2
|
||||
|
||||
This example shows two masks for video from a camera. The masks label cars and the road.
|
||||
|
||||
<details className="cml-expansion-panel info">
|
||||
<summary className="cml-expansion-panel-summary">Example 2: View the frame</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
|
||||
<Collapsible type="info" title="Example 2: View the frame">
|
||||
|
||||
```json
|
||||
"sources": [
|
||||
@ -227,9 +213,7 @@ This example shows two masks for video from a camera. The masks label cars and t
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
</details>
|
||||
<br/>
|
||||
</Collapsible>
|
||||
|
||||
* In `sources`:
|
||||
* The source ID is `front`.
|
||||
|
@ -19,9 +19,8 @@ The following is an example of preview metadata.
|
||||
"timestamp": 0
|
||||
}
|
||||
```
|
||||
<details className="cml-expansion-panel configuration">
|
||||
<summary className="cml-expansion-panel-summary">View an entire frame containing a preview</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
|
||||
<Collapsible type="configuration" title="View an entire frame containing a preview">
|
||||
|
||||
```json
|
||||
{
|
||||
@ -95,9 +94,7 @@ The following is an example of preview metadata.
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
</details>
|
||||
<br/>
|
||||
</Collapsible>
|
||||
|
||||
Here's an example of Previews in the ClearML Enterprise WebApp (UI). Each thumbnail is a Preview.
|
||||
|
||||
|
@ -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`:
|
||||
|
||||
<details className="cml-expansion-panel configuration">
|
||||
<summary className="cml-expansion-panel-summary">Frame Structure</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
<Collapsible type="configuration" title="Frame Structure">
|
||||
|
||||
* `id` (*string*) - The unique ID of this frame.
|
||||
* `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.
|
||||
* `timestamp` - For images from video, a timestamp that indicates the absolute position of this frame from the source (video).
|
||||
|
||||
</div>
|
||||
</details>
|
||||
<br/>
|
||||
</Collapsible>
|
||||
|
||||
## 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
|
||||
object annotations, its metadata, and other details.
|
||||
|
||||
<details className="cml-expansion-panel screenshot">
|
||||
<summary className="cml-expansion-panel-summary">SingleFrame in the WebApp frame viewer</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
<Collapsible type="screenshot" title="SingleFrame in the WebApp frame viewer">
|
||||
|
||||
This image shows a SingleFrame in the ClearML Enterprise WebApp (UI) [frame viewer](webapp/webapp_datasets_frames.md#frame-viewer).
|
||||
|
||||

|
||||
|
||||
</div>
|
||||
</details>
|
||||
<br/>
|
||||
</Collapsible>
|
||||
|
||||
<details className="cml-expansion-panel configuration">
|
||||
<summary className="cml-expansion-panel-summary">SingleFrame details represented in the WebApp</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
|
||||
<Collapsible type="configuration" title="SingleFrame details represented in the WebApp">
|
||||
|
||||
|
||||
id : "287024"
|
||||
@ -197,9 +188,7 @@ This image shows a SingleFrame in the ClearML Enterprise WebApp (UI) [frame view
|
||||
saved_in_version : "6ad8b10c668e419f9dd40422f667592c"
|
||||
num_frames : 1
|
||||
|
||||
</div>
|
||||
</details>
|
||||
<br/>
|
||||
</Collapsible>
|
||||
|
||||
For more information about using Frames in the WebApp, see [Working with Frames](webapp/webapp_datasets_frames.md).
|
||||
|
||||
|
@ -23,9 +23,7 @@ The examples below demonstrate the `sources` section of a Frame for different ty
|
||||
|
||||
This example demonstrates `sources` for video.
|
||||
|
||||
<details className="cml-expansion-panel info">
|
||||
<summary className="cml-expansion-panel-summary">Example 1</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
<Collapsible type="info" title="Example 1">
|
||||
|
||||
```json
|
||||
/* video from one of four cameras on car */
|
||||
@ -51,9 +49,7 @@ This example demonstrates `sources` for video.
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
</details>
|
||||
<br/>
|
||||
</Collapsible>
|
||||
|
||||
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`.
|
||||
@ -73,9 +69,8 @@ Sources includes a variety of content types. This example shows an mp4 video.
|
||||
### Example 2: Images Sources
|
||||
|
||||
This example demonstrates `sources` images.
|
||||
<details className="cml-expansion-panel info">
|
||||
<summary className="cml-expansion-panel-summary">Example 2</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
|
||||
<Collapsible type="info" title="Example 2">
|
||||
|
||||
```json
|
||||
/* camera images */
|
||||
@ -90,9 +85,7 @@ This example demonstrates `sources` images.
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
</details>
|
||||
<br/>
|
||||
</Collapsible>
|
||||
|
||||
The `sources` of this frame contains the following information:
|
||||
* `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`.
|
||||
|
||||
<details className="cml-expansion-panel info">
|
||||
<summary className="cml-expansion-panel-summary">Example 3</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
<Collapsible type="info" title="Example 3">
|
||||
|
||||
```json
|
||||
|
||||
@ -182,9 +173,7 @@ This example demonstrates `sources` for video, `masks`, and `preview`.
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
</details>
|
||||
<br/>
|
||||
</Collapsible>
|
||||
|
||||
This frame shows the `masks` section in `sources`, and the top-level `rois` array.
|
||||
|
||||
|
@ -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.
|
||||
|
||||
<details className="cml-expansion-panel screenshot">
|
||||
<summary className="cml-expansion-panel-summary">Simple filter example</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
<Collapsible type="screenshot" title="Simple filter example">
|
||||
|
||||
* 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
|
||||
|
||||

|
||||
|
||||
</div>
|
||||
</details>
|
||||
</Collapsible>
|
||||
|
||||
### Advanced Frame Filtering
|
||||
|
||||
@ -127,9 +124,7 @@ To clear all filters click <img src="/docs/latest/icons/ico-filter-reset.svg" al
|
||||
|
||||
#### Filtering Examples
|
||||
|
||||
<details className="cml-expansion-panel screenshot">
|
||||
<summary className="cml-expansion-panel-summary">ROI Rules</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
<Collapsible type="screenshot" title="ROI Rules">
|
||||
|
||||
* 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
|
||||
|
||||

|
||||
|
||||
</div>
|
||||
</details>
|
||||
<br/>
|
||||
</Collapsible>
|
||||
|
||||
<details className="cml-expansion-panel screenshot">
|
||||
<summary className="cml-expansion-panel-summary">Frame Rules</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
<Collapsible type="screenshot" title="Frame Rules">
|
||||
|
||||
Filter by metadata using Lucene queries.
|
||||
|
||||
@ -162,13 +153,9 @@ Filter by metadata using Lucene queries.
|
||||
|
||||

|
||||
|
||||
</div>
|
||||
</details>
|
||||
<br/>
|
||||
</Collapsible>
|
||||
|
||||
<details className="cml-expansion-panel screenshot">
|
||||
<summary className="cml-expansion-panel-summary">Source Rules</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
<Collapsible type="screenshot" title="Source Rules">
|
||||
|
||||
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.
|
||||
|
||||
</div>
|
||||
</details>
|
||||
</Collapsible>
|
||||
|
||||
### Exporting Frames
|
||||
|
||||
|
@ -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">
|
||||
|
||||

|
||||
|
||||
</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">
|
||||
|
||||

|
||||
|
||||
</div>
|
||||
</details>
|
||||
<br/>
|
||||
</Collapsible>
|
||||
|
||||
* **CONSOLE** - The dataset version’s 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">
|
||||
|
||||

|
||||
|
||||
</div>
|
||||
</details>
|
||||
</Collapsible>
|
||||
|
||||
<br/>
|
||||
|
||||
|
@ -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">
|
||||
|
||||

|
||||
|
||||
</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">
|
||||
|
||||

|
||||
|
||||
</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">
|
||||
|
||||

|
||||
|
||||
</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">
|
||||
|
||||

|
||||
|
||||
</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">
|
||||
|
||||

|
||||
|
||||
</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.
|
||||
|
41
src/components/Collapsible.js
Normal file
41
src/components/Collapsible.js
Normal 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;
|
@ -666,88 +666,6 @@ html[data-theme="light"] .icon {
|
||||
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 */
|
||||
html[data-theme="light"] .cml-expansion-panel[open] {
|
||||
@ -858,4 +776,128 @@ html[data-theme="dark"] .alert.alert--secondary {
|
||||
|
||||
.markdown .img-swt {
|
||||
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
20
src/theme/MDXComponents.js
Normal 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,
|
||||
};
|
Loading…
Reference in New Issue
Block a user