Method configure

lit_nlp/client/modules/dive_module.ts:262–428

* Configures the Megaplot Selections for each facet in `this.groupedExamples` * using the grouped facets method, which produces a 2D matrix of dot groups, * similar to small multiples visualizations. * * The GroupService returns groups of examples at the intersections of facet * param

()

   * size and the cell's size.
   */
  private configure() {
    const colFeature = this.groupService.denseFeatureNames[this.colsFeatureIdx];
    const rowFeature = this.groupService.denseFeatureNames[this.rowsFeatureIdx];
    if (colFeature == null || rowFeature == null) return;

    const bindDot = (sprite: SpriteView, dot: Dot) => {
      const isHovered =
          this.focusService.focusData?.datapointId === dot.id;
      const isPinned =
          this.pinnedSelectionService.primarySelectedId === dot.id;
      const isPrimary =
          this.selectionService.primarySelectedId === dot.id;
      const isSelected =
          this.selectionService.selectedIds.includes(dot.id) &&
          !(isHovered || isPinned || isPrimary);
      const isSpecial = isHovered || isPinned || isPrimary || isSelected;
      const noSelections = this.selectionService.selectedIds.length === 0;

      const input = this.appState.getCurrentInputDataById(dot.id);
      const colorString = this.colorService.getDatapointColor(input);
      const color = colorToRGB(colorString);

      sprite.BorderColor = isPinned  ? COLOR_PINNED_BORDER :
                           isPrimary ? COLOR_PRIMARY_BORDER : color;
      sprite.BorderColorOpacity = isSpecial ? 1 : 0.25;
      sprite.BorderRadiusPixel = (isPinned || isPrimary) ? 2 : 0;
      sprite.BorderPlacement = 1;
      sprite.FillColor = (isHovered || isPinned) ? COLOR_HOVER_FILL : color;
      sprite.FillColorOpacity = (noSelections || isSpecial) ? 1 : 0.25;
      sprite.PositionWorld = dot.world;
      sprite.PositionPixel = dot.pixel;
      sprite.Sides = 2;
      sprite.SizeWorld = stepSize * .9;
      sprite.SizePixel = 0;
    };

    // TODO(b/202181874): Explore alternative sorting based on bucketing.
    const sortInputs = (a: IndexedInput, b: IndexedInput): number => {
      const aVal = this.colorValueMap.get(a.id)!;
      const bVal = this.colorValueMap.get(b.id)!;
      if (aVal > bVal) {
        return 1;
      } else if (aVal < bVal) {
        return -1;
      } else {
        return 0;
      }
    };

    const groupedExamples = this.groupExamples([rowFeature, colFeature]);
    const sizes = this.matrixSizes(groupedExamples, colFeature, rowFeature);
    const colSizes = sizes.columns;
    const colFeatureVals = Object.keys(colSizes).sort(keySorter);
    const rowSizes = sizes.rows;
    const rowFeatureVals = Object.keys(rowSizes).sort(keySorter);
    /**
     * The step size used to position dots in the grid.
     *