Upload version-compare-dialog.component.ts

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

@@ -0,0 +1,611 @@
+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.id }} - {{ 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.id }} - {{ 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.id === version2.id">
+          <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.id !== version2.id && 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.id !== data.selectedVersion!.id);
+      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.id === this.version2.id) {
+      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();
+  }
+}