Add a "diff" view to the release tracks

src/app/classes/release-tracks/tiers.ts

@@ -2,7 +2,8 @@
 import { SnapshotTier } from './enums';
 
 export type ReleaseTrackObjectTier =
-  SnapshotTier.Candidate | SnapshotTier.Staged;
+  | SnapshotTier.Candidate
+  | SnapshotTier.Staged;
 
 export interface TierEntryModifiedByUser {
   id?: string;

src/app/classes/stix/relationship.ts

@@ -1,5 +1,5 @@
-import { Observable, of } from 'rxjs';
-import { map, switchMap } from 'rxjs/operators';
+import { concat, defer, Observable, of } from 'rxjs';
+import { last, map, switchMap } from 'rxjs/operators';
 import {
   Asset,
   Campaign,
@@ -14,6 +14,7 @@
   Technique,
 } from 'src/app/classes/stix';
 import { RestApiConnectorService } from 'src/app/services/connectors/rest-api/rest-api-connector.service';
+import { ReleaseTracksConnectorService } from 'src/app/services/connectors/rest-api/release-tracks.service';
 import { logger } from '../../utils/logger';
 import { ValidationData } from '../serializable';
 import { StixObject } from './stix-object';
@@ -486,7 +487,7 @@
    */
   public validate(
     restAPIService: RestApiConnectorService,
     tempWorkflowState?: WorkflowStatusType
   ): Observable<ValidationData> {
     return this.base_validate(restAPIService).pipe(
       map(result => {
@@ -619,33 +620,38 @@
    * @returns {Observable} of the post
    */
   public save(
-    restAPIService: RestApiConnectorService
+    restAPIService: RestApiConnectorService,
+    _releaseTracksService?: ReleaseTracksConnectorService
   ): Observable<Relationship> {
     if (!this.workflow) {
       // Initialize the workflow object if it doesn't exist
       this.workflow = { state: WorkflowStatus.WorkInProgress };
     }
     this.workflow.state = WorkflowStatus.WorkInProgress;
-    const postObservable = restAPIService.postRelationship(this);
-    const subscription = postObservable.subscribe({
-      next: result => {
+    return restAPIService.postRelationship(this).pipe(
+      switchMap(result => {
         this.deserialize(result.serialize());
         const source_object = this.getObject(
           this.source_object.stix.type,
           this.source_object
         );
-        this.updateSourceTargetObject(restAPIService, source_object);
         const target_object = this.getObject(
           this.target_object.stix.type,
           this.target_object
         );
-        this.updateSourceTargetObject(restAPIService, target_object);
-      },
-      complete: () => {
-        subscription.unsubscribe();
-      },
-    });
-    return postObservable;
+        return concat(
+          defer(() =>
+            this.updateSourceTargetObject(restAPIService, source_object)
+          ),
+          defer(() =>
+            this.updateSourceTargetObject(restAPIService, target_object)
+          )
+        ).pipe(
+          last(),
+          map(() => result)
+        );
+      })
+    );
   }
 
   /**
@@ -683,7 +689,8 @@
   }
 
   /**
-   * Helper function to update the workflow status of the source object of the relationship,
+   * Updates a related object in place as WIP. The backend release-track
+   * change-capture service updates its track entry in response to this PUT.
    * @param restAPIService the rest api service
    * @param object the relationship source object
    */
@@ -697,17 +704,6 @@
       object.workflow = { state: WorkflowStatus.WorkInProgress };
     }
     object.workflow.state = WorkflowStatus.WorkInProgress;
-    object.update(restAPIService).subscribe({
-      next: response => {
-        console.log('Object updated successfully:', response);
-        window.location.reload();
-      },
-      error: error => {
-        console.error('Error updating object:', error);
-      },
-      complete: () => {
-        console.log('Complete');
-      },
-    });
+    return object.update(restAPIService);
   }
 }

src/app/components/release-track-object-card/release-track-object-card.component.html

@@ -54,14 +54,24 @@
 
         <ng-content select="[card-footer-action]"></ng-content>
 
-        <button
-          *ngIf="showDiff"
-          mat-stroked-button
-          type="button"
-          (click)="onDiff()">
-          <mat-icon>difference</mat-icon>
-          Diff
-        </button>
+        <ng-container *ngIf="showDiff">
+          <button
+            *ngIf="!diffDisabled; else disabledDiff"
+            mat-stroked-button
+            type="button"
+            (click)="onDiff()">
+            <mat-icon>difference</mat-icon>
+            Diff
+          </button>
+          <ng-template #disabledDiff>
+            <span [matTooltip]="diffDisabledMessage" tabindex="0">
+              <button mat-stroked-button type="button" disabled>
+                <mat-icon>difference</mat-icon>
+                Diff
+              </button>
+            </span>
+          </ng-template>
+        </ng-container>
       </div>
     </div>
   </mat-card-actions>

src/app/components/release-track-object-card/release-track-object-card.component.ts

@@ -47,6 +47,8 @@ export class ReleaseTrackObjectCardComponent {
   @Input() laneStatus: WorkflowStatusType | null = null;
   @Input() showDescription = true;
   @Input() showDiff = true;
+  @Input() diffDisabled = false;
+  @Input() diffDisabledMessage = '';
   @Input() showModifiedMeta = true;
 
   @Output() viewObject = new EventEmitter<ReleaseTrackObjectItem>();

src/app/components/stix/stix-list/stix-list.component.html

@@ -369,6 +369,8 @@
           mat-row
           *matRowDef="let element; columns: tableColumns_controls"
           class="element-row"
+          [class.relationship-added]="isNewRelationship(element)"
+          [class.relationship-changed]="isChangedRelationship(element)"
           [class.expanded]="
             isCollectionType() && expandedElement === element
           "></tr>

src/app/components/stix/stix-list/stix-list.component.scss

@@ -128,6 +128,16 @@
           }
         }
 
+        tr.element-row.relationship-added,
+        tr.element-row.relationship-changed {
+          .light & td {
+            background-color: #c0f8c0 !important;
+          }
+          .dark & td {
+            background-color: #3abc4c56 !important;
+          }
+        }
+
         .mat-mdc-cell + .mat-cell,
         .mat-mdc-header-cell + .mat-header-cell {
           padding-left: 12px;

src/app/components/stix/stix-list/stix-list.component.spec.ts

@@ -136,4 +136,24 @@ describe('StixListComponent', () => {
 
     expect(result).toEqual([domainObject]);
   });
+
+  it('identifies an existing relationship modified after the candidate baseline', () => {
+    component.config = {
+      type: 'relationship',
+      relationshipAddedAfter: '2026-07-02T00:00:00.000Z',
+    } as any;
+
+    expect(
+      (component as any).isChangedRelationship({
+        created: new Date('2026-07-01T00:00:00.000Z'),
+        modified: new Date('2026-07-03T00:00:00.000Z'),
+      })
+    ).toBe(true);
+    expect(
+      (component as any).isChangedRelationship({
+        created: new Date('2026-07-03T00:00:00.000Z'),
+        modified: new Date('2026-07-03T00:00:00.000Z'),
+      })
+    ).toBe(false);
+  });
 });

src/app/components/stix/stix-list/stix-list.component.ts

@@ -387,10 +387,12 @@ export class StixListComponent implements OnInit, AfterViewInit, OnDestroy {
               this.config.sourceRef ? sticky_allowed : false,
               ['relationship-name']
             );
-            if (!(
-              this.config.relationshipType &&
-              this.config.relationshipType == 'subtechnique-of'
-            ))
+            if (
+              !(
+                this.config.relationshipType &&
+                this.config.relationshipType == 'subtechnique-of'
+              )
+            )
               this.addColumn(
                 'description',
                 'description',
@@ -986,6 +988,20 @@ export class StixListComponent implements OnInit, AfterViewInit, OnDestroy {
     let subscription: Subscription | undefined;
     subscription = this.data$.subscribe({
       next: data => {
+        if (
+          this.config.type === 'relationship' &&
+          this.config.relationshipCreatedBefore
+        ) {
+          // For a staged diff, hide relationships created after that timestamp so they do not
+          // appear in the staged view. Keep the pagination count in sync with
+          // the rows hidden client-side.
+          const relationshipCount = data.data.length;
+          data.data = this.filterRelationshipsCreatedBefore(
+            data.data,
+            this.config.relationshipCreatedBefore
+          );
+          data.pagination.total -= relationshipCount - data.data.length;
+        }
         data.data = this.filterExcludedAttackTypes(data.data);
         this.totalObjectCount = data.pagination.total;
         this.emitDetectsHasData(data.data.length > 0);
@@ -996,6 +1012,75 @@ export class StixListComponent implements OnInit, AfterViewInit, OnDestroy {
     });
   }
 
+  /**
+   * Relationships created after `createdBefore` did not exist at
+   * the staged object's timestamp, so they are hidden. An invalid cutoff, or
+   * an unreadable relationship creation date, leaves that relationship visible
+   * to avoid treating missing date data as proof that it is new.
+   */
+  private filterRelationshipsCreatedBefore(
+    relationships: StixObject[],
+    createdBefore: Date | string
+  ): StixObject[] {
+    const cutoff = new Date(createdBefore).getTime();
+    if (!Number.isFinite(cutoff)) return relationships;
+
+    return relationships.filter(relationship => {
+      const created = new Date(relationship.created).getTime();
+      return !Number.isFinite(created) || created <= cutoff;
+    });
+  }
+
+  /**
+   * Determines whether a relationship should receive the candidate-diff
+   * styling. The candidate table remains the current relationship list;
+   * a row is new only when its creation time is later than the staged object's
+   * `relationshipAddedAfter` baseline. Non-relationship tables and invalid or
+   * missing timestamps are never marked as new.
+   */
+  public isNewRelationship(relationship: StixObject): boolean {
+    if (
+      this.config.type !== 'relationship' ||
+      !this.config.relationshipAddedAfter
+    ) {
+      return false;
+    }
+
+    const baseline = new Date(this.config.relationshipAddedAfter).getTime();
+    const created = new Date(relationship.created).getTime();
+    return (
+      Number.isFinite(baseline) &&
+      Number.isFinite(created) &&
+      created > baseline
+    );
+  }
+
+  /**
+   * Determines whether an existing relationship changed after the staged
+   * baseline. Candidate relationships are fetched at their current version,
+   * so this highlights changes that cannot be represented accurately in the
+   * staged table without relationship version history.
+   */
+  public isChangedRelationship(relationship: StixObject): boolean {
+    if (
+      this.config.type !== 'relationship' ||
+      !this.config.relationshipAddedAfter
+    ) {
+      return false;
+    }
+
+    const baseline = new Date(this.config.relationshipAddedAfter).getTime();
+    const created = new Date(relationship.created).getTime();
+    const modified = new Date(relationship.modified).getTime();
+    return (
+      Number.isFinite(baseline) &&
+      Number.isFinite(created) &&
+      Number.isFinite(modified) &&
+      created <= baseline &&
+      modified > baseline
+    );
+  }
+
   private filterLocalObjects(
     objects: StixObject[],
     {
@@ -1238,6 +1323,10 @@ export interface StixListConfig {
   targetType?: AttackType;
   /** relationship type to get, use with type=='relationship' */
   relationshipType?: string;
+  /** Hide relationships created after this timestamp. */
+  relationshipCreatedBefore?: Date | string;
+  /** Mark relationships created after this timestamp as new. */
+  relationshipAddedAfter?: Date | string;
 
   /** force the list to show only this type */
   type?: AttackType | 'collection-created' | 'collection-imported';

src/app/services/connectors/rest-api/release-tracks.integration.spec.ts

@@ -95,7 +95,7 @@ describe('Release Tracks API integration (real server)', () => {
     }
   });
 
-  it('GET /release-tracks/:id -> getLatestSnapshot should return snapshot when tracks exist', async () => {
+  it('GET /release-tracks/:id/snapshots/latest should return a snapshot when tracks exist', async () => {
     if (!serverAvailable) {
       console.warn(
         'Skipping getLatestSnapshot test because server is unreachable'
@@ -109,7 +109,7 @@ describe('Release Tracks API integration (real server)', () => {
       return;
     }
     const res = await fetch(
-      `${apiUrl}/release-tracks/${encodeURIComponent(discoveredTrackId)}`,
+      `${apiUrl}/release-tracks/${encodeURIComponent(discoveredTrackId)}/snapshots/latest`,
       { headers: commonHeaders }
     );
     expect(res.ok).toBe(true);

src/app/services/connectors/rest-api/release-tracks.service.ts

@@ -258,6 +258,7 @@ export class ReleaseTracksConnectorService extends ApiConnector {
   }
 
   /**
+   * GET /api/release-tracks/:id/snapshots/latest?format=:format
    * GET /api/release-tracks/:id/snapshots/latest?format=:format
    * Retrieve the latest snapshot in an export format without deserializing it.
    * @param id Release track id

src/app/utils/types.ts

@@ -101,7 +101,11 @@ export const WORKFLOW_STATUS_RANK: Record<WorkflowStatusType, number> = {
  * Collection/release changelog categories
  */
 export type ChangelogCategory =
-  'additions' | 'changes' | 'minor_changes' | 'revocations' | 'deprecations';
+  | 'additions'
+  | 'changes'
+  | 'minor_changes'
+  | 'revocations'
+  | 'deprecations';
 
 export interface ReleaseTrackStatus {
   trackId: string;

src/app/views/dashboard-page/release-management/release-track-page/release-track-page.component.html

@@ -560,6 +560,8 @@ <h4>{{ getVirtualObjectTitle(item) }}</h4>
       [laneStatus]="getLaneStatus(item, lane)"
       [showDescription]="shouldShowLaneDescription(lane)"
       [showDiff]="!canReviewAndApprove(item, lane)"
+      [diffDisabled]="!shouldShowDiff(item)"
+      [diffDisabledMessage]="getDiffUnavailableMessage(item) || ''"
       [showModifiedMeta]="true"
       (viewObject)="onView($event.object_ref)"
       (diffObject)="onDiff($event)">