Class EmbeddingsModule

lit_nlp/client/modules/embeddings_module.ts:82–775

 */
@customElement('embeddings-module')
export class EmbeddingsModule extends LitModule {
  static override title = 'Embeddings';
  static override infoMarkdown =
      `Pan, zoom, rotate, and click to visualize datapoints in the latent space
      of your model, in order to find clusters or patterns in the data.<br>
      [Learn more.](https://pair-code.github.io/lit/documentation/components.md#embedding-projector)`;
  static override template =
      (model: string, selectionServiceIndex: number, shouldReact: number) => {
        return html`
      <embeddings-module model=${model} .shouldReact=${shouldReact}
        selectionServiceIndex=${selectionServiceIndex}>
      </embeddings-module>`;
      };

  static override get styles() {
    return [sharedStyles, styles];
  }

  static override duplicateForModelComparison = false;

  private readonly projectorChoices: {[key: string]: ProjectorOptions} = {};

  static override numCols = 3;

  @observable private isLoading = false;

  // Selection of one of the above configs.
  @observable private projectorName = '';
  @computed get projector(): ProjectorOptions {
    return this.projectorChoices[this.projectorName];
  }

  // Actual projected points.
  @observable.ref private projectedPoints: Point3D[] = [];

  @observable private spriteImage?: HTMLImageElement|string = undefined;

  private readonly colorService = app.getService(ColorService);
  private readonly focusService = app.getService(FocusService);
  private readonly dataService = app.getService(DataService);
  private readonly pinnedSelectionService =
      app.getService(SelectionService, 'pinned');
  private readonly resizeObserver = new ResizeObserver(() => {
    // Protect against resize when container isn't rendered, which can happen
    // during model switching.
    const resultsArea = this.shadowRoot!.querySelector('.module-results-area');
    const container = this.shadowRoot!.getElementById('scatter-gl-container');
    if (resultsArea == null || container == null) {return;}

    /**
     * While investigating the jitter, we found that this callback function was
     * being called twice for every selection change. After the first call, the
     * `container.offsetHeight` would always be less than
     * `resultsArea.offsetHeight`, and after the second they would be the same.
     * We were unable to figure out why this is happening because of the
     * opqueness of the ResizeObserver API's triggers.
     *
     * Thus we added this guard to only resize ScatterGL when the heights are