Faster Retrieval of Images in Custom UI Panel

[tristanryerparke]

I'm just getting into creating custom panels (I'm usually a python programmer as opposed to JS) with comet UI and was looking for a way to display the most recent image generated by my experiment in a window that utilized the whole panel. I came up with this code which works, but it is much slower than the built in image component with sliders/comparison. It also fails to update sometimes. Any suggestions on how I could make it as performant as the default image viewer?

class MyPanel extends Comet.Panel {
  setup() {

  }
  async draw(experimentKeys, projectId) {
    const element = document.getElementById(this.id);
    const img = document.createElement('img');
    const caption = document.createElement('div');

    // Retrieve the images
    this.api.experimentImages(experimentKeys[0]).then(result => {
      // Filter and sort the results
      const largestStepImage = result
        .filter(item => item.fileName.includes('canvas'))
        .sort((a, b) => b.step - a.step)[0];

      // Set the source of the image and the text of the caption
      img.src = largestStepImage.link;
      caption.textContent = `Step: ${largestStepImage.step}`;

      img.className = 'img';
      caption.className = 'caption';

      // Append the elements to the DOM
      element.appendChild(img);
      element.appendChild(caption);

      img.onload = function() {
        img.style.height = `${element.offsetHeight * 0.95}px`;
      };
    });
  }
}

[dsblank]

@tristanryerparke , thanks for the question! I suspect that your code is spending some extra time sorting the data (how many images have you logged? have you logged a lot of other items logged too?). Perhaps a faster method is to simply grab the last image logged (I believe that they are in logged order). See if that helps. If not, the bottle neck is probably in the experimentImages() call.

[tristanryerparke]

I tried making this change:

      const largestStepImage = result.slice(-1)[0];
      //console.log(largestStepImage);
        //.filter(item => item.fileName.includes('canvas'))
        //.sort((a, b) => b.step - a.step)[0];

Which may have sped things up a little bit, but it still takes much longer to load than the default image component (around 3s). Unfortunately I am logging several images with each epoch, and the most recent image isn't the one I want to observe with this component. I am logging many images and metrics in the project. I'm wondering how the code I've got differs from the code that powers the default panel, because it is so much more responsive! Thanks, T

[dsblank]

Let me check with the engineering team next week to see if there is a way to speed up that.

[dsblank]

If on Comet cloud (comet.com), can you share the URL to an experiment that has the images logged?

[dsblank]

You can also email me that if you wish to keep private ([email protected]).

[tristanryerparke]

Thanks doug, just emailed you the link. Have you guys already changed something? It seems like when I went on to share the URL, there was significant speed improvement from when I was using comet last week. Still slightly slower than the default image, but now potentially under 1s. If there haven't been any internal changes I wonder if it is possible that I've only had this speed issue while viewing projects that are in progress, and maybe that is what makes it hang? I'll test that now.

Edit: Checked an in-progress experiment and my custom panel seems snappy like the other finished experiments.

Thanks, T

[dsblank]

@tristanryerparke , thanks for the update. Well, we make refinements every week at all levels of the stack (SDK, backend, database, web endpoints, and frontend) so it could have been any number of things. I will pass on your praises to the engineering team!

[dsblank]

The latest version of comet.com has many updates. Please try it out and let us know if this works well for you.