<div *ngFor="let configurationGroup of changes">
  <material-chips>
    <template
        ngFor
        let-configuration
        [ngForOf]="configurationGroup.configurations.summaries.keys">
      <material-chip
          tooltipTarget
          #chip="tooltipTarget"
          [removable]="false"
          displayNameRenderer>
        {{configuration}}
      </material-chip>
      <material-tooltip-card [for]="chip">
        <div *deferredContent>
              <span *ngFor="let singleConfiguration of configurationGroup.configurations.summaries[configuration]">
                {{singleConfiguration}}<br>
              </span>
        </div>
      </material-tooltip-card>
    </template>
  </material-chips>
  <div
      *ngFor="let resultGroup of configurationGroup"
      style="margin-left: 16px">
        <span [class]="resultGroup.first.resultStyle">
          {{resultGroup.changesText}}
        </span><br>
    <span *ngFor="let change of resultGroup.take(resultLimit)"
          tooltipTarget #logs="tooltipTarget"
          style="cursor: pointer">
          {{change.name}}<br>
          <material-tooltip-card
              [for]="logs"
              [preferredPositions]="preferredTooltipPositions">
            <div *deferredContent>
              <h4>Logs</h4>
              <dart-log
                  *ngFor="let configuration of change.configurations.configurations"
                  [configuration]="configuration"
                  [index]="range.end"
                  [test]="change.name">
              </dart-log>
            </div>
          </material-tooltip-card>
        </span>
    <div
        *ngIf="resultGroup.length > resultLimit"
        (click)="resultLimit = resultGroup.length"
        style="cursor: pointer">
      &vellip; {{resultGroup.length - resultLimit}} more changed results
    </div>
  </div>
</div>