-
+
### Pipeline Start, Wait, and Cleanup
@@ -238,9 +229,7 @@ pipe.wait()
pipe.stop()
```
-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**.
-
-
-
+
## Running the Pipeline
diff --git a/docs/hyperdatasets/masks.md b/docs/hyperdatasets/masks.md
index 17a96069..809733e3 100644
--- a/docs/hyperdatasets/masks.md
+++ b/docs/hyperdatasets/masks.md
@@ -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.
-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
-
-
-
-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.
}
```
-
-+ * In `sources`: @@ -153,10 +148,7 @@ and the `rois` array, as well as several top-level key-value pairs. -
-
-Example image and masks
-
-
+
Original Image
@@ -165,19 +157,13 @@ Mask image
-
-- + ### Example 2 This example shows two masks for video from a camera. The masks label cars and the road. -
-
-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
}
```
-
-+ * In `sources`: * The source ID is `front`. diff --git a/docs/hyperdatasets/previews.md b/docs/hyperdatasets/previews.md index b135a664..b1b1b44a 100644 --- a/docs/hyperdatasets/previews.md +++ b/docs/hyperdatasets/previews.md @@ -19,9 +19,8 @@ The following is an example of preview metadata. "timestamp": 0 } ``` -
-
-View an entire frame containing a preview
-
+
+
```json
{
@@ -95,9 +94,7 @@ The following is an example of preview metadata.
}
```
-
-+ Here's an example of Previews in the ClearML Enterprise WebApp (UI). Each thumbnail is a Preview. diff --git a/docs/hyperdatasets/single_frames.md b/docs/hyperdatasets/single_frames.md index a2b8b9ba..f905fd98 100644 --- a/docs/hyperdatasets/single_frames.md +++ b/docs/hyperdatasets/single_frames.md @@ -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`: -
-
-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).
-
-+ ## 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. -
-
-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).
-
-+ -
-
-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
-
-+ For more information about using Frames in the WebApp, see [Working with Frames](webapp/webapp_datasets_frames.md). diff --git a/docs/hyperdatasets/sources.md b/docs/hyperdatasets/sources.md index 56e6f9a4..93192e9e 100644 --- a/docs/hyperdatasets/sources.md +++ b/docs/hyperdatasets/sources.md @@ -23,9 +23,7 @@ The examples below demonstrate the `sources` section of a Frame for different ty This example demonstrates `sources` for video. -
-
-Example 1
-
+
```json
/* video from one of four cameras on car */
@@ -51,9 +49,7 @@ This example demonstrates `sources` for video.
```
-
-+ 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. -
-
-Example 2
-
+
+
```json
/* camera images */
@@ -90,9 +85,7 @@ This example demonstrates `sources` images.
}
```
-
-+ 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`. -
-
-Example 3
-
+
```json
@@ -182,9 +173,7 @@ This example demonstrates `sources` for video, `masks`, and `preview`.
}
```
-
-+ This frame shows the `masks` section in `sources`, and the top-level `rois` array. diff --git a/docs/hyperdatasets/webapp/webapp_datasets_versioning.md b/docs/hyperdatasets/webapp/webapp_datasets_versioning.md index 9ac981a9..437fab36 100644 --- a/docs/hyperdatasets/webapp/webapp_datasets_versioning.md +++ b/docs/hyperdatasets/webapp/webapp_datasets_versioning.md @@ -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. -
-
+
### Advanced Frame Filtering
@@ -127,9 +124,7 @@ To clear all filters click 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
-
-
-
+
* 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
-
-
+
-
+ -
+ * **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. -
+ * **CONSOLE** - The dataset version’s console output -
diff --git a/docs/webapp/webapp_exp_track_visual.md b/docs/webapp/webapp_exp_track_visual.md index a1d0b2ec..892b0262 100644 --- a/docs/webapp/webapp_exp_track_visual.md +++ b/docs/webapp/webapp_exp_track_visual.md @@ -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). -
+ * **None** - Group by metric and variant (individual metric-variant plots). -
on those you want to see.
diff --git a/src/components/Collapsible.js b/src/components/Collapsible.js
new file mode 100644
index 00000000..21ab7279
--- /dev/null
+++ b/src/components/Collapsible.js
@@ -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 (
+
-
-+
-
-Frame Rules
-
+
Filter by metadata using Lucene queries.
@@ -162,13 +153,9 @@ Filter by metadata using Lucene queries.
-
-+ -
-
+
### Exporting Frames
diff --git a/docs/webapp/datasets/webapp_dataset_viewing.md b/docs/webapp/datasets/webapp_dataset_viewing.md
index f2925d48..5619fba1 100644
--- a/docs/webapp/datasets/webapp_dataset_viewing.md
+++ b/docs/webapp/datasets/webapp_dataset_viewing.md
@@ -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
-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.
-
-
-
-Version Content
-
+
-
-+ * **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. -
-
-Version Preview
-
+
-
-+ * **CONSOLE** - The dataset version’s console output -
-
+
Version Console
-
+
-
-diff --git a/docs/webapp/webapp_exp_track_visual.md b/docs/webapp/webapp_exp_track_visual.md index a1d0b2ec..892b0262 100644 --- a/docs/webapp/webapp_exp_track_visual.md +++ b/docs/webapp/webapp_exp_track_visual.md @@ -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). -
-
+
### 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.
-View a screenshot
-
+
-
-
-
+
## 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**.
-View a screenshot
-
+
-
-
-
+
@@ -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
- View a screenshot
-
+
-
-
-
- View a screenshot
-
+
-
- + * **None** - Group by metric and variant (individual metric-variant plots). -
-
+
* Show / hide plots - Click **HIDE ALL**, and then click View a screenshot
-
+
-
-
on those you want to see.
diff --git a/src/components/Collapsible.js b/src/components/Collapsible.js
new file mode 100644
index 00000000..21ab7279
--- /dev/null
+++ b/src/components/Collapsible.js
@@ -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 (
+
+
+
+ );
+ }
+ }
+
+ export default Collapsible;
\ No newline at end of file
diff --git a/src/css/custom.css b/src/css/custom.css
index b51aa7d9..a74953f8 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -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;
}
\ No newline at end of file
diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js
new file mode 100644
index 00000000..03b05e8b
--- /dev/null
+++ b/src/theme/MDXComponents.js
@@ -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
+ {children}
+
+