JavaScript Panels

Overview

Comet Panels allow you to design, create, and use your own methods to explore, visualize, and analyze your data. These Panels can be private, or you can share them with your collaborators, or with the entire Comet community.

For more information on writing your own Panel, see also:

Note that Panels currently are for the Project View only. That is, you cannot yet write a Panel for the Experiment View. However, there is a workaround.

From the Panel editor, there are three panes:

  • Editor: edit Code, Description, HTML, CSS, Resources, and Query
  • Preview: see an example of the Panel running in the current project
  • Console: to see errors, and output from JavaScript's console.log()

In addition on this screen, you can set the visibility of these Panel sources to either Public or Private (bottom, left hand side).

Editor Pane

The Editor pane allows editing the following tabs:

  • Code: the JavaScript source code for the Panel
  • Description: a textual description and thumbnail of the Panel
  • HTML: the HTML for the Panel
  • CSS: the CSS for the Panel
  • Resources: JavaScript libraries for the Panel
  • Query: a specific Comet query to use with the Panel

Each of these sections is described below.

Code Tab

The Code section allows you to write a JavaScript program to create a Panel. These can be visualizations, analyses, or reports. Please see Comet's JavaScript SDK for more details on writing JavaScript for Comet Panels.

Click on the Run button to execute your Panel code. Click on the Save button to save all of your Panel data. In addition to the Run and Save buttons, there are keyboard shortcuts in the Editor.

Info

Depending on your browser, not all keyboard shortcuts may be available.

Panel keystroke shortcuts:

Function MacOS PC/Linux
run the code CONTROL+ENTER CONTROL+ENTER
toggle code-folding on/off on this line CONTROL+Q CONTROL+Q
autocomplete code CONTROL+SPACE CONTROL+SPACE

Most useful editor keystroke shortcuts:

Function MacOS PC/Linux
indent TAB TAB
find COMMAND-F CONTROL-F
find next COMMAND-G CONTROL-G
find prev SHIFT-COMMAND-G SHIFT-CONTROL-G
indent selection less COMMAND-[ CONTROL-[
indent selection more COMMAND-] CONTROL-]
redo SHIFT-COMMAND-Z or COMMAND-Y SHIFT-CONTROL-Z or CONTROL-Y
redo selection SHIFT-COMMAND-U SHIFT-CONTROL-U or ALT-U
reformat all code SHIFT-TAB SHIFT-TAB
replace COMMAND-ALT-F SHIFT-CONTROL-F
replace all SHIFT-COMMAND-ALT-F SHIFT-CONTROL-R
save COMMAND-S CONTROL-S
undo COMMAND-Z CONTROL-Z
undo selection COMMAND-U CONTROL-U

Here is the complete list of editor keyboard shortcuts:

Function MacOS PC/Linux
indent TAB TAB
delete character after CONTROL-D or DELETE CONTROL-D or DELETE
delete character before BACKSPACE or CONTROL-H or SHIFT-BACKSPACE BACKSPACE or CONTROL-H or SHIFT-BACKSPACE
delete group after CONTROL-ALT-BACKSPACE or ALT-DELETE CONTROL-DELETE
delete group before ALT-BACKSPACE CONTROL-BACKSPACE
delete word after ALT-D ALT-D
delete word before ALT-BACKSPACE ALT-BACKSPACE
delete wrapped line left COMMAND-BACKSPACE
delete wrapped line right COMMAND-DELETE
delete line COMMAND-D or CONTROL-K CONTROL-D or CONTROL-K
find COMMAND-F CONTROL-F
find next COMMAND-G CONTROL-G
find prev SHIFT-COMMAND-G SHIFT-CONTROL-G
go character left CONTROL-B LEFT
go character right CONTROL-F or RIGHT CONTROL-F or RIGHT
go to code end COMMAND-DOWN or COMMAND-END or CONTROL-DOWN CONTROL-END
go to code start COMMAND-HOME or COMMAND-UP or CONTROL-HOME CONTROL-UP
go group left ALT-LEFT CONTROL-LEFT
go group right ALT-RIGHT CONTROL-RIGHT
go line down DOWN or CONTROL-N DOWN or CONTROL-N or CONTROL-DOWN
go line end END or CONTROL-E END or CONTROL-E or ALT-RIGHT
go line left COMMAND-LEFT
go line right COMMAND-RIGHT
go line start CONTROL-A ALT-LEFT or CONTROL-A
go line start, smart HOME HOME
go line up UP or CONTROL-P UP or CONTROL-P or CONTROL-UP
go page down PAGEDOWN or CONTROL-V PAGEDOWN or CONTROL-V
go page up PAGEUP or SHIFT-CONTROL-V PAGEUP or SHIFT-CONTROL-V
go word left ALT-B ALT-B
go word right ALT-F ALT-F
indent less COMMAND-[ CONTROL-[
indent more COMMAND-] CONTROL-]
newline and indent ENTER ENTER
open line CONTROL-O CONTROL-O
redo SHIFT-COMMAND-Z or COMMAND-Y SHIFT-CONTROL-Z or CONTROL-Y
redo selection SHIFT-COMMAND-U SHIFT-CONTROL-U or ALT-U
reformat all code SHIFT-TAB SHIFT-TAB
replace COMMAND-ALT-F SHIFT-CONTROL-F
replace all SHIFT-COMMAND-ALT-F SHIFT-CONTROL-R
save COMMAND-S CONTROL-S
select all COMMAND-A CONTROL-A
single selection ESCAPE ESCAPE
toggle overwrite INSERT INSERT
transpose (swap) characters CONTROL-T CONTROL-T
undo COMMAND-Z CONTROL-Z
undo selection COMMAND-U CONTROL-U

Note that reformatting can work on the current line, a region, or the entire Panel JavaScript.

You can pick which version of a particular Panel that you would like to use. Click on the three vertical dots to open the Version History.

Description Tab

A description of the Panel and thumbnail of the Panel. Click the image to create or edit the thumbnail. We suggest putting author, and details about how the Panel works in the description. This is searchable text on the Panel Gallery.

HTML Tab

HTML code to be added to the Panel.

JavaScript and CSS resource URLs can be included in the Resources section.

CSS Tab

CSS to be added to the Panel. For example:

css .data-table { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%; }

Resources Tab

This is a list of JavaScript and Stylesheet Resources to be included in the Panel. Note that resources are loaded from top to bottom. So, if you wish to include a library that works with jquery, make sure that the jquery library is loaded before any library that is dependent on it.

There are a number of Comet open source JavaScript libraries that can be included here:

  • https://comet-ml.github.io/min/js/math.js
  • https://comet-ml.github.io/min/js/table.js
  • https://comet-ml.github.io/min/js/utils.js
  • https://comet-ml.github.io/min/css/table.css

See below for more information on these libraries.

Comet Open Source JavaScript Libraries

We have begun to collect additional useful JavaScript functions into an open source collection here: github.com/comet-ml/comet-ml.github.io. Currently, we have the following collections:

You can include minimized versions of any of the JavaScript libraries via the Resource section using these URLs:

URL Type of Resource Documentation Overview
https://comet-ml.github.io/min/js/math.js JavaScript math.md a set of functions that Python programmers would find useful (such as avg, sum) and statistical functions (such as standard deviation)
https://comet-ml.github.io/min/js/table.js JavaScript table.md utilities for converting an array of dictionaries into an HTML table
https://comet-ml.github.io/min/js/utils.js JavaScript utils.md miscellaneous convenience functions
https://comet-ml.github.io/min/css/table.css CSS N/A Stylesheet for above table.js Tables

The source code for each resource can be found here:

You can include any resource in a Panel (including those above) by pasting the URL into the Resource URL field and selecting the proper Resource Type.

If you develop useful JavaScript libraries or CSS not found elsewhere (or would like to contribute to the above), please feel free to make a Pull Request to include them in the collection. We are especially interested in including JavaScript libraries that make Panel-writing easier for Python programmers, or for specific functions that interact with Comet's JavaScript SDK.

Query Tab

You can provide a default query for your Panel. For example, perhaps your Panel only works for experiments with a particular hyperparameter value. You can define the query here. Of course, many Panels will work without setting a specific filter.

You can override this when you add an instance of the Panel to a Project View.

Preview Pane

This is a preview of what the Panel looks like on the experiments in the current Project.

Console Pane

When you execute a console.log() command, the output will appear here. Also, any errors will show here.

Import/Export

As mentioned, Panels belong to a Workspace, and are available to you and your team for all of the Projects in the Workspace. If you would like to use a Panel in a different Workspace, you can either make it Public, or you can Export the Panel, and Import it into another Workpsace.

Likewise, if you are running Comet via an on-premises version and you would like to use a Panel on comet.ml, then you can also Export the Panel, and Import it into your onprem version.

You'll find the option to Export each Panel when you edit/view it under the three vertical dots:

Simply select Export, and the complete Panel will download as a ZIP file. From this menu you will also find an option to Import a Panel. In that case, simply select the Panel ZIP file that you would like to Import. It will then appear in the list of available Panels in this Workspace.

You can also find an Import icon next to the Create New button on the Panels Gallery:

Simply click the Import icon, and select the Panel ZIP file that you would like to Import. It will then appear in the list of available Panels in this Workspace.

Troubleshooting

Some hints: