Internal changes

src/ui/src/components/home_page/home_page.ts

@@ -346,6 +346,8 @@ export class HomePage implements AfterViewInit {
       ),
       enableSubgraphSelection: this.urlService.enableSubgraphSelection,
       enableExportToResource: this.urlService.enableExportToResource,
+      enableExcludeFromQuantization:
+        this.urlService.enableExcludeFromQuantization,
       keepLayersWithASingleChild: this.settingsService.getBooleanValue(
         SETTING_KEEP_LAYERS_WITH_A_SINGLE_CHILD,
       ),

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

@@ -254,5 +254,9 @@ export const EXTERNAL_LOCAL_DEV_PORT = 8081;
 /** The command to export to resource. */
 export const EXPORT_TO_RESOURCE_CMD = 'model-explorer-export-to-resource';
 
+/** The command to exclude from quantization. */
+export const EXCLUDE_FROM_QUANTIZATION_CMD =
+  'model-explorer-exclude-from-quantization';
+
 /** The line height of node label. */
 export const NODE_LABEL_LINE_HEIGHT = 14;

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

@@ -49,6 +49,9 @@ export declare interface VisualizerConfig {
   /** Whether to enable export to resource. */
   enableExportToResource?: boolean;
 
+  /** Whether to enable exclude from quantization. */
+  enableExcludeFromQuantization?: boolean;
+
   /** Whether to keep layers with a single child. */
   keepLayersWithASingleChild?: boolean;
 

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

@@ -39,6 +39,12 @@
           Export to resource
         </button>
       }
+      @if (enableExcludeFromQuantization) {
+        <button mat-flat-button color="primary" (click)="handleClickExcludeFromQuantization()">
+          <mat-icon>block</mat-icon>
+          Exclude from quantization
+        </button>
+      }
     </div>
   </div>
 }

src/ui/src/components/visualizer/selection_panel.ts

@@ -28,10 +28,11 @@ import {MatIconModule} from '@angular/material/icon';
 import {setAnchorHref} from 'safevalues/dom';
 
 import {AppService} from './app_service';
+import {EXCLUDE_FROM_QUANTIZATION_CMD} from './common/consts';
 import {exportToResource} from './common/utils';
 import {SubgraphSelectionService} from './subgraph_selection_service';
 
-/** A component to handle drag events. */
+/** A component to show actions for selected nodes. */
 @Component({
   standalone: true,
   selector: 'selection-panel',
@@ -88,7 +89,27 @@ export class SelectionPanel {
     ]);
   }
 
+  handleClickExcludeFromQuantization() {
+    // Send the selected nodes and the model graph info to the parent window
+    // through postMessage.
+    const selectedNodes = this.subgraphSelectionService.selectedNodes();
+    const modelGraph = this.appService.getModelGraphFromPane(this.paneId);
+    window.parent.postMessage(
+      {
+        'cmd': EXCLUDE_FROM_QUANTIZATION_CMD,
+        'nodes': selectedNodes,
+        'graph_collection_label': modelGraph?.collectionLabel ?? '',
+        'graph_id': modelGraph?.id ?? '',
+      },
+      '*',
+    );
+  }
+
   get enableExportToResource(): boolean {
     return this.appService.config()?.enableExportToResource === true;
   }
+
+  get enableExcludeFromQuantization(): boolean {
+    return this.appService.config()?.enableExcludeFromQuantization === true;
+  }
 }

src/ui/src/components/visualizer/subgraph_selection_service.ts

@@ -16,10 +16,10 @@
  * ==============================================================================
  */
 
-import {Injectable, computed, signal} from '@angular/core';
+import {Injectable, Signal, computed, signal} from '@angular/core';
 import {AppService} from './app_service';
 import {Graph, GraphNode} from './common/input_graph';
-import {ModelGraph} from './common/model_graph';
+import {ModelGraph, OpNode} from './common/model_graph';
 import {IncomingEdge} from './common/types';
 import {isGroupNode, isOpNode} from './common/utils';
 
@@ -36,6 +36,18 @@ export class SubgraphSelectionService {
     () => Object.keys(this.selectedNodeIds()).length,
   );
 
+  readonly selectedNodes: Signal<OpNode[]> = computed(() => {
+    if (!this.modelGraph) {
+      return [];
+    }
+    const selectedNodeIds = Object.keys(this.selectedNodeIds()).filter(
+      (nodeId) => this.selectedNodeIds()[nodeId],
+    );
+    return selectedNodeIds.map(
+      (nodeId) => this.modelGraph!.nodesById[nodeId] as OpNode,
+    );
+  });
+
   paneId = '';
 
   constructor(private readonly appService: AppService) {}

src/ui/src/services/url_service.ts

@@ -30,6 +30,7 @@ enum QueryParamKey {
   BENCHMARK = 'benchmark',
   ENABLE_SUBGRAPH_SELECTION = 'ess',
   ENABLE_EXPORT_TO_RESOURCE = 'eetr',
+  ENABLE_EXCLUDE_FROM_QUANTIZATION = 'eefq',
   INTERNAL_COLAB = 'internal_colab',
 }
 
@@ -78,6 +79,7 @@ export class UrlService {
   benchmark = false;
   enableSubgraphSelection = false;
   enableExportToResource = false;
+  enableExcludeFromQuantization = false;
 
   constructor(private readonly router: Router) {
     this.decodeUrl();
@@ -155,6 +157,10 @@ export class UrlService {
         .enableExportToResource
         ? '1'
         : '0';
+      queryParams[QueryParamKey.ENABLE_EXCLUDE_FROM_QUANTIZATION] = this
+        .enableExcludeFromQuantization
+        ? '1'
+        : '0';
     } else {
       queryParams[QueryParamKey.BENCHMARK] = '1';
     }
@@ -220,6 +226,8 @@ export class UrlService {
       params.get(QueryParamKey.ENABLE_SUBGRAPH_SELECTION) === '1';
     this.enableExportToResource =
       params.get(QueryParamKey.ENABLE_EXPORT_TO_RESOURCE) === '1';
+    this.enableExcludeFromQuantization =
+      params.get(QueryParamKey.ENABLE_EXCLUDE_FROM_QUANTIZATION) === '1';
     this.benchmark = params.get(QueryParamKey.BENCHMARK) === '1';
   }
 }