{"id":314,"date":"2020-08-05T14:50:17","date_gmt":"2020-08-05T22:50:17","guid":{"rendered":"https:\/\/live-cometml.pantheonsite.io\/?p=314"},"modified":"2025-05-09T09:54:12","modified_gmt":"2025-05-09T09:54:12","slug":"introducing-panels-custom-visualizations-for-machine-learning","status":"publish","type":"post","link":"https:\/\/www.comet.com\/site\/blog\/introducing-panels-custom-visualizations-for-machine-learning\/","title":{"rendered":"Introducing Panels: Custom Visualizations for Machine Learning"},"content":{"rendered":"\n

In the last three years since Comet was founded, our users and customers trained millions of models on anything from self-driving cars to speech recognition, and from Covid-19 protein prediction to satellite image object detection. Based on your requests we added more and more visualization capabilities including chart builders<\/a>, confusion matrices<\/a>, audio players<\/a> and many more. But as the complexity of the use cases, requirements and customization grew, we realized that we needed a more scalable way to grow Comet\u2019s functionality and provide users the ability to build anything they want!<\/b><\/p>\n\n\n\n

Today, we are excited to announce Comet Panels, <\/i>which has been under development and testing for the past year. Starting today, you can tap into the ecosystems of JS\/HTML\/CSS and create new widgets with custom styles and behaviors, or add new visualizations and charting types. Unlimited possibilities!<\/b><\/p>\n\n\n\n

The key principles in designing Comet Panels were the following:
\n1. Dynamic<\/strong> \u2013 <\/b>Panels should be dynamic and update on new experiments and results when they arrive. There\u2019s nothing worse than a stale and misleading visualization.<\/i>
\n2. Flexible<\/strong>  \u2013 <\/b>Users should be able to build and customize anything<\/i> they want without the limitations of a GUI or a specific dependency
\n3. Reusable<\/strong> <\/b>\u2013 teammates and community members should be able to share and reuse each other\u2019s panels.<\/p>\n\n\n\n

The Comet Panel Gallery<\/b><\/h1>\n\n\n\n


\n<\/b>The heart of Panels lies in the Comet Panel Gallery<\/a>. Check it out to see what others have built and shared with the community.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

<\/figure>\n\n\n\n

Build your own Panel<\/b><\/h1>\n\n\n\n

Comet experiments already store your hyper-parameters, metrics, model definition, trained models, dataset samples and much more. Panels build on top of that data to visualize and process anything you\u2019d like.<\/p>\n\n\n\n

You can create a new panel by going to the Panels Gallery<\/a> and clicking on \u201cCreate New\u201d on the top right corner. You should see a similar code editor:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

The code editor is divided into three main panes. On the left we have a full code editor with code completion, syntax highlighting etc. On the right we have a live preview of our panel. On the bottom right we see our Console pane which shows errors and exceptions. You\u2019ll also notice the tabs on the top that allow you to switch from code to description, HTML, CSS, resources and query.<\/p>\n\n\n\n

To make a snappy user experience in the browser, we will write our Panel in JavaScript.<\/p>\n\n\n\n

You can create a new Panel from the Panels Gallery as described in Comet\u2019s User Interface<\/a>. You\u2019ll need to go to the Panels Gallery on the Project View and click on \u201cCreate New.\u201d You should then see a screen similar to the following:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

<\/div>\n\n\n\n

Once you are on this screen, you are now ready to write the code (there is some default code provided on the creation of a new Panel, but you can simply select it all with CONTROL+A<\/code> and press Delete<\/code>). Your new Panel code only needs these two things:<\/p>\n\n\n\n

    \n
  1. A JavaScript class named MyPanel<\/code><\/li>\n\n\n\n
  2. A draw(experimentKeys, projectId){}<\/code> method that takes an array of experiment keys and project ID<\/li>\n<\/ol>\n\n\n\n

    That\u2019s it! We have also defined a Comet.Panel<\/code> to extend that contains additional functionality. You use it like this:<\/p>\n\n\n\n

    class MyPanel extends Comet.Panel {\n  draw(experimentKeys, projectId) {\n    \/\/ Your code here\n  }\n}<\/code><\/pre>\n\n\n\n
    In the tradition of introductory programming exercises, let\u2019s explore a \u201cHello world\u201d Panel. We take the basic template from above, and add our instructions to print \u201cHello, world!\u201d in our panel. We will use this.print()<\/code> to display the message.<\/p>\n\n\n\n
    We\u2019ll also use the HTML <h1><\/code> tag to make our message large and bold.<\/p>\n\n\n\n
    class MyPanel extends Comet.Panel {\n  draw(experimentKeys, projectId) {\n    this.print(\"<h1>Hello, world!<\/h1>\");\n  }\n}\n<\/code><\/pre>\n\n\n\n
    If you write (or copy and paste) the above code into the Panel Code section, and click on the green arrow button (or press CONTROL+ENTER<\/code>) you should see the following:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    <\/p>\n\n\n\n
    <\/figure>\n\n\n\n
    Now, you can save your Panel by clicking on the save button (or pressing CONTROL+S<\/code>), which will prompt you for a name:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    <\/p>\n\n\n\n
    <\/figure>\n\n\n\n
    Name your Panel something like \u201cHello World\u201d, and click \u201cSave\u201d. The first time you save a new Panel, you\u2019ll be asked to capture a thumbnail of your Panel. You can either select a portion of the screen, or upload your own image:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    <\/p>\n\n\n\n
    If you press \u201cDone\u201d then you will go back to the Panels Gallery. Now you can add a \u201cHello World\u201d Panel to your project by clicking the \u201c+ Add\u201d button in the Panels Gallery. A window will appear giving you the chance to set some options (discussed in the next section). For now, just press \u201cDone\u201d.<\/p>\n\n\n\n
     <\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    <\/p>\n\n\n\n
    <\/figure>\n\n\n\n
    Your Project View should now include your \u201cHello World\u201d Panel:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    <\/p>\n\n\n\n
     <\/p>\n\n\n\n
    In the next section, we\u2019ll explore the idea of an \u201coption.\u201d<\/p>\n\n\n\n
    Options<\/h2>\n\n\n\n
    It would be very painful if you had to edit code to have slight variations of a Panel. For example, imagine that you wanted to plot the metric \u201cacc\u201d in one chart, but the metric \u201closs\u201d in another. To allow the Panels to be more abstract, we have provided the Panels with the idea of options<\/em>.<\/p>\n\n\n\n
    To provide these options that can be changed when creating a Panel and without changing code, you only need to define a JavaScript object in the MyPanel<\/code> instance named options<\/code>. Typically, you will define your options in the setup method, as shown below. These are default values that can be overridden by the user when creating a new instance of the Panel.<\/p>\n\n\n\n
    class MyPanel extends Comet.Panel {\n  setup() {\n    \/\/ Your setup code here\n    this.options = {\n      \/\/ Your default options here\n    }\n  }\n\n  draw(experimentKeys, projectId) {\n    \/\/ Your code here\n  }\n}\n<\/code><\/pre>\n\n\n\n
    As a concrete example, let\u2019s change the \u201cHello World\u201d Panel to include a setup() method with the option \u201cmessage\u201d:<\/p>\n\n\n\n
    class MyPanel extends Comet.Panel {\n  setup() {\n    this.options = {\n      message: \"Hello, world!\"\n    }\n  }\n\n  draw(experimentKeys, projectId) {\n    this.print(`<h1>${this.options.message}<\/h1>`);\n  }\n}\n<\/code><\/pre>\n\n\n\n
    If you try this Panel, you\u2019ll see exactly the same result as before. However, there is a big difference: you can now add two instances of the \u201cHello World\u201d Panel to your Project View, and make each one say something different by merely changing the options when you add the Panel to your Project:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    <\/p>\n\n\n\n
    Specifically, the steps are:<\/p>\n\n\n\n
      \n
    1. Create the Hellow World Panel, using the option \u201cmessage\u201d<\/li>\n\n\n\n
    2. Add one of these Panels to your Project<\/li>\n\n\n\n
    3. Add another of these Panels to your Project, this time changing the message to something else<\/li>\n<\/ol>\n\n\n\n
      The Comet.Panel Class<\/h2>\n\n\n\n
      When you extend from Comet.Panel<\/code> you get additional functions, including:<\/p>\n\n\n\n