Fix: send override fields

src/ui/src/common/extension_command.ts

@@ -17,8 +17,7 @@
  */
 
 import {Graph, GraphCollection,} from '../components/visualizer/common/input_graph';
-import type { NodeDataProviderData } from '../components/visualizer/common/types';
-import type { ChangesPerNode } from './model_loader_service_interface';
+import type { OverridesPerNode } from './model_loader_service_interface';
 
 /** A command sent to extension. */
 export declare interface ExtensionCommand {
@@ -58,8 +57,6 @@ export declare interface AdapterConvertCommand extends ExtensionCommand {
   settings: Record<string, any>;
   // Whether to delete the model file at `modelPath` after conversion is done.
   deleteAfterConversion: boolean;
-  perf_trace?: string;
-  perf_data?: NodeDataProviderData;
 }
 
 /** Adapter's "convert" command response. */
@@ -70,7 +67,7 @@ export declare interface AdapterOverrideCommand extends ExtensionCommand {
   cmdId: 'override';
   settings: {
     graphs: Graph[];
-    changes: ChangesPerNode;
+    overrides: OverridesPerNode;
   };
 }
 

src/ui/src/common/model_loader_service_interface.ts

@@ -24,21 +24,21 @@ import type { KeyValue } from '../components/visualizer/common/types';
 import {ModelItem} from './types';
 import type { AdapterStatusCheckResults } from './extension_command';
 
-export type ChangesPerNode = Record<string, KeyValue[]>;
-export type ChangesPerGraphAndNode = Record<string, ChangesPerNode>;
+export type OverridesPerNode = Record<string, { named_location: string, attributes: KeyValue[] }>;
+export type OverridesPerGraphAndNode = Record<string, OverridesPerNode>;
 
 /** The interface of model load service. */
 export interface ModelLoaderServiceInterface {
   loadModels(modelItems: ModelItem[]): Promise<void>;
   loadModel(modelItems: ModelItem): Promise<GraphCollection[]>;
-  executeModel(modelItem: ModelItem): Promise<boolean>;
+  executeModel(modelItem: ModelItem, overrides?: OverridesPerNode): Promise<boolean>;
   checkExecutionStatus(modelItem: ModelItem, modelPath: string): Promise<AdapterStatusCheckResults>;
-  overrideModel(modelItem: ModelItem, graphCollection: GraphCollection, fieldsToUpdate: ChangesPerNode): Promise<boolean>;
+  overrideModel(modelItem: ModelItem, graphCollection: GraphCollection, fieldsToUpdate: OverridesPerNode): Promise<boolean>;
   get loadedGraphCollections(): WritableSignal<GraphCollection[] | undefined>;
   get models(): WritableSignal<ModelItem[]>;
-  get changesToUpload(): WritableSignal<ChangesPerGraphAndNode>;
+  get overrides(): WritableSignal<OverridesPerGraphAndNode>;
   getOptimizationPolicies(extensionId: string): string[];
   get selectedOptimizationPolicy(): WritableSignal<string>;
   get graphErrors(): WritableSignal<string[] | undefined>;
-  get hasChangesToUpload(): boolean;
+  get hasOverrides(): boolean;
 }

src/ui/src/components/visualizer/common/input_graph.ts

@@ -16,6 +16,7 @@
  * ==============================================================================
  */
 
+import type { OverridesPerNode } from '../../../common/model_loader_service_interface.js';
 import {
   GraphNodeConfig,
   GraphNodeStyle,
@@ -90,7 +91,11 @@ export declare interface Graph {
 
   // The level in the graph tree.
   level?: number;
+  /** @deprecated Remove after we merge the changes that use only `overlays` */
   perf_data?: NodeDataProviderData;
+  overlays?: Record<string, NodeDataProviderData>;
+  overrides?: OverridesPerNode;
+
 }
 
 /** A single node in the graph. */
@@ -170,7 +175,7 @@ export interface EditableValueListAttribute {
 
 export interface EditableGridAttribute {
   input_type: 'grid';
-  separator?: string;
+  visual_separator?: string;
   min_value: number;
   max_value: number;
   step: number;

src/ui/src/components/visualizer/expandable_info_text.ng.html

@@ -93,7 +93,7 @@
               [max]="$any(editable)?.max_value ?? 100"
               (change)="handleTextChange($event)"
             />
-            <span class="text-separator">&nbsp;{{$any(editable)?.separator ?? 'x'}}&nbsp;</span>
+            <span class="text-separator">&nbsp;{{$any(editable)?.visual_separator ?? 'x'}}&nbsp;</span>
           }
         } @else {
           {{text}}
@@ -131,7 +131,7 @@
           [max]="$any(editable)?.max_value ?? 100"
           (change)="handleTextChange($event)"
         />
-        <span class="text-separator">&nbsp;{{$any(editable)?.separator ?? 'x'}}&nbsp;</span>
+        <span class="text-separator">&nbsp;{{$any(editable)?.visual_separator ?? 'x'}}&nbsp;</span>
       }
     } @else {
       {{text}}

src/ui/src/components/visualizer/expandable_info_text.ts

@@ -35,6 +35,7 @@ import {MatTooltipModule} from '@angular/material/tooltip';
 import {AppService} from './app_service';
 import { ModelLoaderServiceInterface } from '../../common/model_loader_service_interface';
 import type { EditableAttributeTypes, EditableValueListAttribute } from './common/input_graph';
+import type { OpNode } from './common/model_graph.js';
 
 /** Expandable info text component. */
 @Component({
@@ -87,8 +88,9 @@ export class ExpandableInfoText implements AfterViewInit, OnDestroy, OnChanges {
     }
 
     this.text = this.modelLoaderService
-      .changesToUpload()[this.collectionLabel ?? '']
+      .overrides()[this.collectionLabel ?? '']
       ?.[this.nodeId]
+      ?.attributes
       ?.find(({ key }) => key === this.type)
       ?.value ?? this.text;
   }
@@ -145,29 +147,38 @@ export class ExpandableInfoText implements AfterViewInit, OnDestroy, OnChanges {
       }).join(', ')}]`;
     }
 
-    const collectionLabel = this.appService.getSelectedPane()?.modelGraph?.collectionLabel;
-    const nodeId = this.appService.getSelectedPane()?.selectedNodeInfo?.nodeId;
+    const modelGraph = this.appService.getSelectedPane()?.modelGraph;
+    const nodeId = this.appService.getSelectedPane()?.selectedNodeInfo?.nodeId ?? '';
+    const [, namedLocation] = Object.entries((modelGraph?.nodesById?.[nodeId] as OpNode | undefined)?.attrs ?? {}).find(([key]) => key === 'named_location') ?? [];
 
-    this.modelLoaderService.changesToUpload.update((changesToUpload) => {
-      if (collectionLabel && nodeId) {
-        changesToUpload[collectionLabel] = {...changesToUpload[collectionLabel] };
+    this.modelLoaderService.overrides.update((overrides) => {
+      if (modelGraph?.collectionLabel && nodeId) {
+        overrides[modelGraph.collectionLabel] = {...overrides[modelGraph.collectionLabel] };
 
-        const existingChanges = changesToUpload[collectionLabel][nodeId]?.findIndex(({ key }) => key === this.type) ?? -1;
 
-        if (existingChanges !== -1) {
-          changesToUpload[collectionLabel][nodeId].splice(existingChanges, 1);
+        if (!overrides[modelGraph.collectionLabel][nodeId]) {
+          overrides[modelGraph.collectionLabel][nodeId] = {
+            named_location: namedLocation ?? nodeId,
+            attributes: []
+          };
         }
 
-        changesToUpload[collectionLabel][nodeId] = [
-          ...(changesToUpload[collectionLabel][nodeId] ?? []),
+        const existingOverrides = overrides[modelGraph.collectionLabel][nodeId].attributes.findIndex(({ key }) => key === this.type) ?? -1;
+
+        if (existingOverrides !== -1) {
+          overrides[modelGraph.collectionLabel][nodeId].attributes.splice(existingOverrides, 1);
+        }
+
+        overrides[modelGraph.collectionLabel][nodeId].attributes = [
+          ...(overrides[modelGraph.collectionLabel][nodeId].attributes ?? []),
           {
             key: this.type,
             value: updatedValue
           }
         ];
       }
 
-      return changesToUpload;
+      return overrides;
     });
   }
 

src/ui/src/components/visualizer/graph_edit.ng.html

@@ -12,7 +12,7 @@
 
   @if (hasCurModel) {
     <div class="mat-icon-container">
-      <button mat-icon-button matTooltip="Upload processed graphs json to server" (click)="handleClickUploadGraph()" [disabled]="!hasChangesToUpload || isProcessingExecuteRequest">
+      <button mat-icon-button matTooltip="Upload processed graphs json to server" (click)="handleClickUploadGraph()" [disabled]="!hasOverrides || isProcessingExecuteRequest">
         <mat-icon>upload</mat-icon>
       </button>
     </div>
@@ -24,7 +24,7 @@
         mat-icon-button
         matTooltip="Execute graph"
         (click)="handleClickExecuteGraph()"
-        [disabled]="isProcessingExecuteRequest && !hasChangesToUpload && !graphHasErrors"
+        [disabled]="isProcessingExecuteRequest && !hasOverrides && !graphHasErrors"
         [ngStyle]="{ display: !isProcessingExecuteRequest ? 'block' : 'none' }"
       >
         <mat-icon>play_arrow</mat-icon>