flare-ui/src/app/dialogs/version-compare-dialog/version-compare-dialog.component.ts

import { Component, Inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import { MatSelectModule } from '@angular/material/select';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatChipsModule } from '@angular/material/chips';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatDividerModule } from '@angular/material/divider';
import { MatListModule } from '@angular/material/list';
import { FormsModule } from '@angular/forms';
import { Version } from '../../services/api.service';

interface Difference {
  field: string;
  label: string;
  v1Value: any;
  v2Value: any;
  type: 'added' | 'removed' | 'modified' | 'unchanged';
}

@Component({
  selector: 'app-version-compare-dialog',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    MatDialogModule,
    MatSelectModule,
    MatButtonModule,
    MatIconModule,
    MatChipsModule,
    MatExpansionModule,
    MatDividerModule,
    MatListModule
  ],
  template: `

    <h2 mat-dialog-title>Compare Versions</h2>



    <mat-dialog-content>

      <div class="compare-container">

        <!-- Version Selectors -->

        <div class="version-selectors">

          <mat-form-field appearance="outline">

            <mat-label>Version 1</mat-label>

            <mat-select [(value)]="version1" (selectionChange)="compareVersions()">

              <mat-option *ngFor="let v of versions" [value]="v">

                Version {{ v.no }} - {{ v.caption }}

                <span class="published-marker" *ngIf="v.published">(Published)</span>

              </mat-option>

            </mat-select>

          </mat-form-field>



          <mat-icon class="compare-icon">compare_arrows</mat-icon>



          <mat-form-field appearance="outline">

            <mat-label>Version 2</mat-label>

            <mat-select [(value)]="version2" (selectionChange)="compareVersions()">

              <mat-option *ngFor="let v of versions" [value]="v">

                Version {{ v.no }} - {{ v.caption }}

                <span class="published-marker" *ngIf="v.published">(Published)</span>

              </mat-option>

            </mat-select>

          </mat-form-field>

        </div>



        <!-- Comparison Results -->

        <div class="comparison-results" *ngIf="differences.length > 0">

          

          <!-- Summary -->

          <div class="summary-chips">

            <mat-chip-listbox>

              <mat-chip-option selected>

                <mat-icon>add_circle</mat-icon>

                {{ addedCount }} Added

              </mat-chip-option>

              <mat-chip-option selected color="warn">

                <mat-icon>remove_circle</mat-icon>

                {{ removedCount }} Removed

              </mat-chip-option>

              <mat-chip-option selected color="accent">

                <mat-icon>edit</mat-icon>

                {{ modifiedCount }} Modified

              </mat-chip-option>

            </mat-chip-listbox>

          </div>



          <!-- General Differences -->

          <mat-expansion-panel [expanded]="hasGeneralDifferences">

            <mat-expansion-panel-header>

              <mat-panel-title>

                General Configuration

              </mat-panel-title>

              <mat-panel-description>

                {{ generalDifferences.length }} differences

              </mat-panel-description>

            </mat-expansion-panel-header>



            <mat-list>

              <mat-list-item *ngFor="let diff of generalDifferences">

                <mat-icon matListItemIcon [class]="'diff-' + diff.type">

                  {{ getDiffIcon(diff.type) }}

                </mat-icon>

                <div matListItemTitle>{{ diff.label }}</div>

                <div matListItemLine class="diff-values">

                  <span class="old-value" *ngIf="diff.type !== 'added'">{{ formatValue(diff.v1Value) }}</span>

                  <mat-icon *ngIf="diff.type === 'modified'">arrow_forward</mat-icon>

                  <span class="new-value" *ngIf="diff.type !== 'removed'">{{ formatValue(diff.v2Value) }}</span>

                </div>

              </mat-list-item>

            </mat-list>

          </mat-expansion-panel>



          <!-- LLM Differences -->

          <mat-expansion-panel [expanded]="hasLLMDifferences">

            <mat-expansion-panel-header>

              <mat-panel-title>

                LLM Configuration

              </mat-panel-title>

              <mat-panel-description>

                {{ llmDifferences.length }} differences

              </mat-panel-description>

            </mat-expansion-panel-header>



            <mat-list>

              <mat-list-item *ngFor="let diff of llmDifferences">

                <mat-icon matListItemIcon [class]="'diff-' + diff.type">

                  {{ getDiffIcon(diff.type) }}

                </mat-icon>

                <div matListItemTitle>{{ diff.label }}</div>

                <div matListItemLine class="diff-values">

                  <span class="old-value" *ngIf="diff.type !== 'added'">{{ formatValue(diff.v1Value) }}</span>

                  <mat-icon *ngIf="diff.type === 'modified'">arrow_forward</mat-icon>

                  <span class="new-value" *ngIf="diff.type !== 'removed'">{{ formatValue(diff.v2Value) }}</span>

                </div>

              </mat-list-item>

            </mat-list>

          </mat-expansion-panel>



          <!-- Intent Differences -->

          <mat-expansion-panel [expanded]="hasIntentDifferences">

            <mat-expansion-panel-header>

              <mat-panel-title>

                Intents

              </mat-panel-title>

              <mat-panel-description>

                {{ intentDifferences.added.length + intentDifferences.removed.length + intentDifferences.modified.length }} differences

              </mat-panel-description>

            </mat-expansion-panel-header>



            <div class="intents-comparison">

              <!-- Added Intents -->

              <div class="intent-group" *ngIf="intentDifferences.added.length > 0">

                <h4><mat-icon>add_circle</mat-icon> Added Intents</h4>

                <mat-list>

                  <mat-list-item *ngFor="let intent of intentDifferences.added">

                    <mat-icon matListItemIcon class="diff-added">add</mat-icon>

                    <div matListItemTitle>{{ intent.name }}</div>

                    <div matListItemLine>{{ intent.caption || 'No description' }}</div>

                  </mat-list-item>

                </mat-list>

              </div>



              <!-- Removed Intents -->

              <div class="intent-group" *ngIf="intentDifferences.removed.length > 0">

                <h4><mat-icon>remove_circle</mat-icon> Removed Intents</h4>

                <mat-list>

                  <mat-list-item *ngFor="let intent of intentDifferences.removed">

                    <mat-icon matListItemIcon class="diff-removed">remove</mat-icon>

                    <div matListItemTitle>{{ intent.name }}</div>

                    <div matListItemLine>{{ intent.caption || 'No description' }}</div>

                  </mat-list-item>

                </mat-list>

              </div>



              <!-- Modified Intents -->

              <div class="intent-group" *ngIf="intentDifferences.modified.length > 0">

                <h4><mat-icon>edit</mat-icon> Modified Intents</h4>

                <mat-expansion-panel *ngFor="let intent of intentDifferences.modified">

                  <mat-expansion-panel-header>

                    <mat-panel-title>{{ intent.name }}</mat-panel-title>

                    <mat-panel-description>{{ intent.changes.length }} changes</mat-panel-description>

                  </mat-expansion-panel-header>

                  

                  <mat-list>

                    <mat-list-item *ngFor="let change of intent.changes">

                      <mat-icon matListItemIcon [class]="'diff-' + change.type">

                        {{ getDiffIcon(change.type) }}

                      </mat-icon>

                      <div matListItemTitle>{{ change.label }}</div>

                      <div matListItemLine class="diff-values">

                        <span class="old-value" *ngIf="change.type !== 'added'">{{ formatValue(change.v1Value) }}</span>

                        <mat-icon *ngIf="change.type === 'modified'">arrow_forward</mat-icon>

                        <span class="new-value" *ngIf="change.type !== 'removed'">{{ formatValue(change.v2Value) }}</span>

                      </div>

                    </mat-list-item>

                  </mat-list>

                </mat-expansion-panel>

              </div>

            </div>

          </mat-expansion-panel>



        </div>



        <!-- No Selection State -->

        <div class="empty-state" *ngIf="!version1 || !version2">

          <mat-icon>compare</mat-icon>

          <p>Select two versions to compare</p>

        </div>



        <!-- Same Version State -->

        <div class="empty-state" *ngIf="version1 && version2 && version1.no === version2.no">

          <mat-icon>info</mat-icon>

          <p>Please select different versions to compare</p>

        </div>



        <!-- No Differences State -->

        <div class="empty-state" *ngIf="version1 && version2 && version1.no !== version2.no && differences.length === 0">

          <mat-icon>check_circle</mat-icon>

          <p>These versions are identical</p>

        </div>

      </div>

    </mat-dialog-content>



    <mat-dialog-actions align="end">

      <button mat-button (click)="close()">Close</button>

    </mat-dialog-actions>

  `,
  styles: [`

    .compare-container {

      min-width: 800px;

      max-width: 1000px;

    }



    .version-selectors {

      display: flex;

      gap: 24px;

      align-items: center;

      justify-content: center;

      margin-bottom: 32px;



      mat-form-field {

        flex: 1;

        max-width: 350px;

      }



      .compare-icon {

        font-size: 32px;

        width: 32px;

        height: 32px;

        color: #666;

      }



      .published-marker {

        color: #4caf50;

        font-weight: 500;

        margin-left: 8px;

      }

    }



    .summary-chips {

      margin-bottom: 24px;

      display: flex;

      justify-content: center;



      mat-chip {

        margin: 0 4px;



        mat-icon {

          margin-right: 4px;

        }

      }

    }



    .comparison-results {

      mat-expansion-panel {

        margin-bottom: 16px;

      }

    }



    .diff-values {

      display: flex;

      align-items: center;

      gap: 8px;

      margin-top: 4px;



      .old-value {

        color: #d32f2f;

        text-decoration: line-through;

      }



      .new-value {

        color: #388e3c;

        font-weight: 500;

      }



      mat-icon {

        font-size: 16px;

        width: 16px;

        height: 16px;

        color: #666;

      }

    }



    .diff-added {

      color: #388e3c;

    }



    .diff-removed {

      color: #d32f2f;

    }



    .diff-modified {

      color: #1976d2;

    }



    .intents-comparison {

      .intent-group {

        margin-bottom: 24px;



        h4 {

          display: flex;

          align-items: center;

          gap: 8px;

          margin-bottom: 12px;

          color: #666;



          mat-icon {

            font-size: 20px;

            width: 20px;

            height: 20px;

          }

        }



        mat-expansion-panel {

          margin-bottom: 8px;

        }

      }

    }



    .empty-state {

      text-align: center;

      padding: 60px 20px;



      mat-icon {

        font-size: 64px;

        width: 64px;

        height: 64px;

        color: #e0e0e0;

        margin-bottom: 16px;

      }



      p {

        color: #666;

        font-size: 16px;

      }

    }

  `]
})
export default class VersionCompareDialogComponent {
  versions: Version[];
  version1: Version | null = null;
  version2: Version | null = null;
  
  differences: Difference[] = [];
  generalDifferences: Difference[] = [];
  llmDifferences: Difference[] = [];
  intentDifferences = {
    added: [] as any[],
    removed: [] as any[],
    modified: [] as any[]
  };

  constructor(

    public dialogRef: MatDialogRef<VersionCompareDialogComponent>,

    @Inject(MAT_DIALOG_DATA) public data: { versions: Version[], selectedVersion?: Version }

  ) {
    this.versions = data.versions;
    
    // Pre-select versions
    if (data.selectedVersion) {
      this.version1 = data.selectedVersion;
      // Select the next most recent version as version2
      const otherVersions = this.versions.filter(v => v.no !== data.selectedVersion!.no);
      if (otherVersions.length > 0) {
        this.version2 = otherVersions[0];
        this.compareVersions();
      }
    }
  }

  get addedCount(): number {
    return this.differences.filter(d => d.type === 'added').length + this.intentDifferences.added.length;
  }

  get removedCount(): number {
    return this.differences.filter(d => d.type === 'removed').length + this.intentDifferences.removed.length;
  }

  get modifiedCount(): number {
    return this.differences.filter(d => d.type === 'modified').length + this.intentDifferences.modified.length;
  }

  get hasGeneralDifferences(): boolean {
    return this.generalDifferences.length > 0;
  }

  get hasLLMDifferences(): boolean {
    return this.llmDifferences.length > 0;
  }

  get hasIntentDifferences(): boolean {
    return this.intentDifferences.added.length > 0 || 
           this.intentDifferences.removed.length > 0 || 
           this.intentDifferences.modified.length > 0;
  }

  compareVersions() {
    if (!this.version1 || !this.version2 || this.version1.no === this.version2.no) {
      this.differences = [];
      this.generalDifferences = [];
      this.llmDifferences = [];
      this.intentDifferences = { added: [], removed: [], modified: [] };
      return;
    }

    this.differences = [];
    
    // Compare general fields
    this.compareField('caption', 'Caption', this.version1.caption, this.version2.caption);
    this.compareField('general_prompt', 'General Prompt', 
                     (this.version1 as any).general_prompt, 
                     (this.version2 as any).general_prompt);
    this.compareField('published', 'Published Status', this.version1.published, this.version2.published);

    // Compare LLM configuration
    if (this.version1.llm && this.version2.llm) {
      this.compareField('llm.repo_id', 'Model Repository', 
                       this.version1.llm.repo_id, 
                       this.version2.llm.repo_id);
      this.compareField('llm.use_fine_tune', 'Use Fine-Tune', 
                       this.version1.llm.use_fine_tune, 
                       this.version2.llm.use_fine_tune);
      
      if (this.version1.llm.use_fine_tune || this.version2.llm.use_fine_tune) {
        this.compareField('llm.fine_tune_zip', 'Fine-Tune ZIP', 
                         this.version1.llm.fine_tune_zip, 
                         this.version2.llm.fine_tune_zip);
      }

      // Compare generation config
      const gc1 = this.version1.llm.generation_config;
      const gc2 = this.version2.llm.generation_config;
      if (gc1 && gc2) {
        this.compareField('llm.generation_config.max_new_tokens', 'Max Tokens', 
                         gc1.max_new_tokens, gc2.max_new_tokens);
        this.compareField('llm.generation_config.temperature', 'Temperature', 
                         gc1.temperature, gc2.temperature);
        this.compareField('llm.generation_config.top_p', 'Top P', 
                         gc1.top_p, gc2.top_p);
        this.compareField('llm.generation_config.repetition_penalty', 'Repetition Penalty', 
                         gc1.repetition_penalty, gc2.repetition_penalty);
      }
    }

    // Compare intents
    this.compareIntents();

    // Categorize differences
    this.generalDifferences = this.differences.filter(d => 
      !d.field.startsWith('llm.') && !d.field.startsWith('intent.'));
    this.llmDifferences = this.differences.filter(d => d.field.startsWith('llm.'));
  }

  private compareField(field: string, label: string, v1Value: any, v2Value: any) {
    if (v1Value === v2Value) {
      return;
    }

    let type: 'added' | 'removed' | 'modified';
    if (v1Value === undefined || v1Value === null || v1Value === '') {
      type = 'added';
    } else if (v2Value === undefined || v2Value === null || v2Value === '') {
      type = 'removed';
    } else {
      type = 'modified';
    }

    this.differences.push({
      field,
      label,
      v1Value,
      v2Value,
      type
    });
  }

  private compareIntents() {
    const intents1 = this.version1?.intents || [];
    const intents2 = this.version2?.intents || [];

    const intents1Map = new Map(intents1.map(i => [i.name, i]));
    const intents2Map = new Map(intents2.map(i => [i.name, i]));

    // Find added intents
    this.intentDifferences.added = intents2.filter(i => !intents1Map.has(i.name));

    // Find removed intents
    this.intentDifferences.removed = intents1.filter(i => !intents2Map.has(i.name));

    // Find modified intents
    this.intentDifferences.modified = [];
    for (const [name, intent1] of intents1Map) {
      const intent2 = intents2Map.get(name);
      if (intent2) {
        const changes = this.compareIntentDetails(intent1, intent2);
        if (changes.length > 0) {
          this.intentDifferences.modified.push({
            name,
            changes
          });
        }
      }
    }
  }

  private compareIntentDetails(intent1: any, intent2: any): Difference[] {
    const changes: Difference[] = [];

    // Compare basic fields
    if (intent1.caption !== intent2.caption) {
      changes.push({
        field: `intent.${intent1.name}.caption`,
        label: 'Caption',
        v1Value: intent1.caption,
        v2Value: intent2.caption,
        type: 'modified'
      });
    }

    if (intent1.detection_prompt !== intent2.detection_prompt) {
      changes.push({
        field: `intent.${intent1.name}.detection_prompt`,
        label: 'Detection Prompt',
        v1Value: intent1.detection_prompt,
        v2Value: intent2.detection_prompt,
        type: 'modified'
      });
    }

    if (intent1.action !== intent2.action) {
      changes.push({
        field: `intent.${intent1.name}.action`,
        label: 'API Action',
        v1Value: intent1.action,
        v2Value: intent2.action,
        type: 'modified'
      });
    }

    // Compare examples
    const examples1 = intent1.examples || [];
    const examples2 = intent2.examples || [];
    if (JSON.stringify(examples1) !== JSON.stringify(examples2)) {
      changes.push({
        field: `intent.${intent1.name}.examples`,
        label: 'Examples',
        v1Value: `${examples1.length} examples`,
        v2Value: `${examples2.length} examples`,
        type: 'modified'
      });
    }

    // Compare parameters
    const params1 = intent1.parameters || [];
    const params2 = intent2.parameters || [];
    if (JSON.stringify(params1) !== JSON.stringify(params2)) {
      changes.push({
        field: `intent.${intent1.name}.parameters`,
        label: 'Parameters',
        v1Value: `${params1.length} parameters`,
        v2Value: `${params2.length} parameters`,
        type: 'modified'
      });
    }

    return changes;
  }

  getDiffIcon(type: string): string {
    switch (type) {
      case 'added': return 'add_circle';
      case 'removed': return 'remove_circle';
      case 'modified': return 'edit';
      default: return 'circle';
    }
  }

  formatValue(value: any): string {
    if (value === null || value === undefined) return 'Not set';
    if (typeof value === 'boolean') return value ? 'Yes' : 'No';
    if (typeof value === 'string' && value.length > 100) {
      return value.substring(0, 100) + '...';
    }
    return String(value);
  }

  close() {
    this.dialogRef.close();
  }
}