Skip to content

About custom Panels

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

Before you create a custom Panel, first check out Comet's built-in Panels. These provide a wide range of standard visualizations for you to view and compare performance across multiple experiments. For more information, see Visualize Project data with Panels.

This page presents general information about working with JavaScript and Python Panels.

Create a custom Panel

This is how you create your own Panel, either in Python or JavaScript:

  1. Go to a Project or Experiment View.
  2. Click Add > New Panel (either in the panel area on the Project view, or on the Panel tab of the Experiment view).
  3. Click Create New.
  4. In the Language list, select Python or JavaScript.

The following screen is displayed:

Python Panels

In 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: See errors and output from JavaScript's console.log().

In addition, at the top right area of this screen, you can set the visibility of these Panel sources to either Public or Private.

Editor pane

The Editor pane provides the following tabs:

TabFunctionPanel type
CodeSource code for the PanelPython/JS
DescriptionA textual description and thumbnail of the PanelPython/JS
OptionsOptions that you can set for each instance of a PanelPython
HTMLHTML for the PanelJS
CSSCSS for the PanelJS
ResourcesJavaScript libraries for the PanelJS
FiltersA specific Comet filter to use with the PanelPython/JS

Each of these is described below.

Code tab

Here you enter the Python or JavaScript code for this Panel.

These can be visualizations, analyses, or reports. For more details, see:

Code tab

The Editor provides Run and Save buttons:

Run and save buttons

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

Every saved change creates a new version that you can always revert to at any time. You can pick which version of a particular Panel you would like to use. Click the three vertical dots to open the Version History.

There are also keyboard shortcuts available in the Editors. Here are the most frequently used:

PC shortcutMac shortcutFunctionality
Ctrl-SCmd-SSave
Ctrl-FCmd-FStart searching
Shift-Ctrl-FCmd-Option-FReplace
Shift-Ctrl-RShift-Cmd-Option-FReplace all
Ctrl-EnterCtrl-EnterRun the code

Description tab

A description of the Panel and a 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.

Python Panels Description tab

Options tab (Python only)

These are options that you can set for each instance of a Panel. They are useful for having items that can be varied without having to edit the code. For example, you could have an option for a title of a chart.

Python Panels Description tab

HTML tab (JavaScript only)

HTML code to be added to the Panel.

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

CSS tab (JavaScript only)

CSS to be added to the Panel. For example:

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

Panels CSS Tab

Resources tab (JavaScript only)

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.

Panels Resources Tab

Comet open source JavaScript libraries can be included here.

Filters 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 filter here. Of course, many Panels will work without setting a specific filter.

Python Panels Query Tab

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 be displayed here.

Import and 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.

Similarly, if you are running Comet in an on-prem version and you would like to use a Panel in Comet, then you can export the Panel, and import it into your on-prem version.

You'll find the option to export each Panel when you edit or view it under the three vertical dots.

Panels Export

Simply select Export, and the complete Panel will download as a zip file. In 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:

Panels Import

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.

Jul. 19, 2022