<commit_before>import {Component, EventEmitter, Input, Output} from "@angular/core";
import {KafkaTopic} from "../domain/KafkaTopic";
import {ApiService} from "./api.service";
import {TopicMessage} from "../domain/TopicMessage";
import {TopicPartition} from "../domain/TopicPartition";

@Component({
  selector: "topic-data",
  template: `
    <div class="card">
      <div *ngIf="selectedTopic" class="card-header"
           style="display: flex; align-items: center; justify-content: space-between; flex-direction: row">
        <h6 style="margin-bottom: 0;">
          Showing messages for <span class="text-primary">{{selectedTopic.name}}</span>
        </h6>
        <div style="align-self: flex-end">
          <div style="padding-right: 10px; display: inline;">Partition:</div>
          <select (change)="selectedPartition = $event.target.value" style="display: inline; width: 100px;" class="form-control">
            <option *ngFor="let partition of getPartitionsList()">{{partition}}</option>
          </select>
        </div>
      </div>

      <h6 *ngIf="!selectedTopic" class="card-header">No Topic Selected</h6>

      <ul *ngIf="topicMessages.length > 0" class="list-group list-group-flush">
        <collapsible-item *ngFor="let message of topicMessages">
          <div item-header>
            <span class="text-primary" style="font-weight: bold">[{{message.offset}}]</span> - <span
            class="text-success">{{message.timestamp | date:'dd MMM yyyy HH:mm'}}</span>
            <div>{{message.value}}</div>
          </div>
          <div item-body>
            <pre [innerHtml]="tryParseJson(message.value) | prettyjson:3"></pre>
          </div>
        </collapsible-item>
      </ul>

      <div *ngIf="selectedTopic && topicMessages.length == 0 && !isLoading" class="card-body">
        <div>No messages found</div>
      </div>

      <div *ngIf="isLoading" class="card-body">
        <div>Loading...</div>
      </div>
    </div>
  `,
  styles: [`

  `]
})
export class TopicsDataComponent {

  public topicMessages: Array<TopicMessage> = [];
  public isLoading: boolean;
  @Output() public onTopicPartitionSelected = new EventEmitter();

  private _selectedTopic: KafkaTopic;
  private _selectedPartition: number;

  public constructor(private apiService: ApiService) {
  }

  @Input()
  public set selectedTopic(topic: KafkaTopic) {
    this._selectedTopic = topic;
    this.selectedPartition = 0;
    this.topicMessages.length = 0;

    this.onTopicOrPartitionChanged();
  }

  private onTopicOrPartitionChanged() {
    this.isLoading = true;

    this.onTopicPartitionSelected.emit(new TopicPartition(this.selectedTopic, this.selectedPartition));

    this.apiService.getTopicData(this.selectedTopic, this.selectedPartition).subscribe(topicMessages => {
      topicMessages.forEach(message => this.topicMessages.push(message));
      this.isLoading = false;
    });
  }

  public get selectedTopic() {
    return this._selectedTopic;
  }

  public set selectedPartition(partition: number) {
    this._selectedPartition = partition;

    this.onTopicOrPartitionChanged();
  }

  public get selectedPartition() {
    return this._selectedPartition;
  }

  public tryParseJson(content: string) {
    try {
      return JSON.parse(content);
    } catch (e) {
      return content;
    }
  }

  public getPartitionsList(): Array<number> {
    const partitions = [];
    for (let i = 0; i < this.selectedTopic.numPartitions; i++) {
      partitions.push(i);
    }

    return partitions;
  }

}<commit_msg>Fixed bug due to which messages weren't reset when selecting partition. Also, two requests were being made on topic/partition selection.<commit_after>import {Component, EventEmitter, Input, Output} from "@angular/core";
import {KafkaTopic} from "../domain/KafkaTopic";
import {ApiService} from "./api.service";
import {TopicMessage} from "../domain/TopicMessage";
import {TopicPartition} from "../domain/TopicPartition";

@Component({
  selector: "topic-data",
  template: `
    <div class="card">
      <div *ngIf="selectedTopic" class="card-header"
           style="display: flex; align-items: center; justify-content: space-between; flex-direction: row">
        <h6 style="margin-bottom: 0;">
          Showing messages for <span class="text-primary">{{selectedTopic.name}}</span>
        </h6>
        <div style="align-self: flex-end">
          <div style="padding-right: 10px; display: inline;">Partition:</div>
          <select (change)="selectedPartition = $event.target.value" style="display: inline; width: 100px;" class="form-control">
            <option *ngFor="let partition of getPartitionsList()">{{partition}}</option>
          </select>
        </div>
      </div>

      <h6 *ngIf="!selectedTopic" class="card-header">No Topic Selected</h6>

      <ul *ngIf="topicMessages.length > 0" class="list-group list-group-flush">
        <collapsible-item *ngFor="let message of topicMessages">
          <div item-header>
            <span class="text-primary" style="font-weight: bold">[{{message.offset}}]</span> - <span
            class="text-success">{{message.timestamp | date:'dd MMM yyyy HH:mm'}}</span>
            <div>{{message.value}}</div>
          </div>
          <div item-body>
            <pre [innerHtml]="tryParseJson(message.value) | prettyjson:3"></pre>
          </div>
        </collapsible-item>
      </ul>

      <div *ngIf="selectedTopic && topicMessages.length == 0 && !isLoading" class="card-body">
        <div>No messages found</div>
      </div>

      <div *ngIf="isLoading" class="card-body">
        <div>Loading...</div>
      </div>
    </div>
  `,
  styles: [`

  `]
})
export class TopicsDataComponent {

  public topicMessages: Array<TopicMessage> = [];
  public isLoading: boolean;
  @Output() public onTopicPartitionSelected = new EventEmitter();

  private _selectedTopic: KafkaTopic;
  private _selectedPartition: number;

  public constructor(private apiService: ApiService) {
  }

  @Input()
  public set selectedTopic(topic: KafkaTopic) {
    this._selectedTopic = topic;
    this._selectedPartition = 0;
    this.topicMessages.length = 0;

    this.onTopicOrPartitionChanged();
  }

  private onTopicOrPartitionChanged() {
    this.isLoading = true;

    this.onTopicPartitionSelected.emit(new TopicPartition(this.selectedTopic, this.selectedPartition));

    this.apiService.getTopicData(this.selectedTopic, this.selectedPartition).subscribe(topicMessages => {
      topicMessages.forEach(message => this.topicMessages.push(message));
      this.isLoading = false;
    });
  }

  public get selectedTopic() {
    return this._selectedTopic;
  }

  public set selectedPartition(partition: number) {
    this._selectedPartition = partition;
    this.topicMessages.length = 0;

    this.onTopicOrPartitionChanged();
  }

  public get selectedPartition() {
    return this._selectedPartition;
  }

  public tryParseJson(content: string) {
    try {
      return JSON.parse(content);
    } catch (e) {
      return content;
    }
  }

  public getPartitionsList(): Array<number> {
    const partitions = [];
    for (let i = 0; i < this.selectedTopic.numPartitions; i++) {
      partitions.push(i);
    }

    return partitions;
  }

}
{'fraction_non_alphanumeric': 0.1452259223435125, 'fraction_numerical': 0.0045599005112615726, 'mean_word_length': 3.267688679245283, 'pattern_counts': {'":': 0, '<': 93, '<?xml version=': 0, '>': 97, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1780974', 'n_tokens_mistral': 2174, 'n_tokens_neox': 2090, 'n_words': 457}