Add a setting that hides node data entries with empty values.

Fixes #213 PiperOrigin-RevId: 696903249
google-ai-edge · Nov 15, 2024 · 9098698 · 9098698
1 parent ddb4197
commit 9098698
Show file tree

Hide file tree

Showing 13 changed files with 127 additions and 36 deletions.
diff --git a/src/ui/src/components/home_page/home_page.ts b/src/ui/src/components/home_page/home_page.ts
@@ -46,6 +46,7 @@ import {
   SETTING_DISALLOW_VERTICAL_EDGE_LABELS,
   SETTING_EDGE_COLOR,
   SETTING_EDGE_LABEL_FONT_SIZE,
+  SETTING_HIDE_EMPTY_NODE_DATA_ENTRIES,
   SETTING_HIDE_OP_NODES_WITH_LABELS,
   SETTING_HIGHLIGHT_LAYER_NODE_INPUTS_OUTPUTS,
   SETTING_KEEP_LAYERS_WITH_A_SINGLE_CHILD,
@@ -355,6 +356,9 @@ export class HomePage implements AfterViewInit {
       highlightLayerNodeInputsOutputs: this.settingsService.getBooleanValue(
         SETTING_HIGHLIGHT_LAYER_NODE_INPUTS_OUTPUTS,
       ),
+      hideEmptyNodeDataEntries: this.settingsService.getBooleanValue(
+        SETTING_HIDE_EMPTY_NODE_DATA_ENTRIES,
+      ),
     };
   }
 

diff --git a/src/ui/src/components/visualizer/common/utils.ts b/src/ui/src/components/visualizer/common/utils.ts
@@ -55,6 +55,7 @@ import {
   ShowOnNodeItemData,
   ShowOnNodeItemType,
 } from './types';
+import {VisualizerConfig} from './visualizer_config';
 
 const CANVAS = new OffscreenCanvas(300, 300);
 
@@ -530,6 +531,7 @@ export function getOpNodeDataProviderKeyValuePairsForAttrsTable(
   modelGraphId: string,
   showOnNodeItemTypes: Record<string, ShowOnNodeItemData>,
   curNodeDataProviderRuns: Record<string, NodeDataProviderRunData>,
+  config?: VisualizerConfig,
 ): KeyValueList {
   const keyValuePairs: KeyValueList = [];
   const runNames = Object.keys(showOnNodeItemTypes)
@@ -544,7 +546,11 @@ export function getOpNodeDataProviderKeyValuePairsForAttrsTable(
     runNames.includes(getRunName(run, {id: modelGraphId})),
   );
   for (const run of runs) {
-    const value = (run.results || {})?.[modelGraphId][node.id]?.strValue || '-';
+    const result = (run.results || {})?.[modelGraphId]?.[node.id];
+    if (config?.hideEmptyNodeDataEntries && !result) {
+      continue;
+    }
+    const value = result?.strValue || '-';
     keyValuePairs.push({
       key: getRunName(run, {id: modelGraphId}),
       value,

diff --git a/src/ui/src/components/visualizer/common/visualizer_config.ts b/src/ui/src/components/visualizer/common/visualizer_config.ts
@@ -61,6 +61,9 @@ export declare interface VisualizerConfig {
   /** Whether to highlight layer node inputs and outputs. */
   highlightLayerNodeInputsOutputs?: boolean;
 
+  /** Whether to hide empty node data entries. */
+  hideEmptyNodeDataEntries?: boolean;
+
   /** The default node styler rules. */
   nodeStylerRules?: NodeStylerRule[];
 

diff --git a/src/ui/src/components/visualizer/common/worker_events.ts b/src/ui/src/components/visualizer/common/worker_events.ts
@@ -85,6 +85,7 @@ export declare interface ExpandOrCollapseGroupNodeRequest
   all?: boolean;
   // Timestamp of when the request is sent.
   ts?: number;
+  config?: VisualizerConfig;
 }
 
 /** The response for expanding/collapsing a group node. */
@@ -119,6 +120,7 @@ export declare interface RelayoutGraphRequest extends WorkerEventBase {
   forRestoringSnapshotAfterTogglingFlattenLayers?: boolean;
   nodeStylerQueries?: NodeStylerRule[];
   triggerNavigationSync?: boolean;
+  config?: VisualizerConfig;
 }
 
 /** The response for re-laying out the whole graph. */
@@ -144,6 +146,7 @@ export declare interface LocateNodeRequest extends WorkerEventBase {
   rendererId: string;
   noNodeShake?: boolean;
   select?: boolean;
+  config?: VisualizerConfig;
 }
 
 /** The response for locating a node. */

diff --git a/src/ui/src/components/visualizer/info_panel.ng.html b/src/ui/src/components/visualizer/info_panel.ng.html
@@ -17,33 +17,36 @@
 -->
 
 <div class="container" [class.graph-info]="showNodeDataProviderSummary">
-  <div class="section" #sectionEle
-       [class.collapsed]="isSectionCollapsed(section.label)"
-       *ngFor="let section of sections; trackBy: trackBySectionLabel">
-    <div class="header">
-      <button mat-icon-button class="toggle"
-          (click)="handleToggleSection(section.label, sectionEle)">
-        <mat-icon>{{getSectionToggleIcon(section.label)}}</mat-icon>
-      </button>
-      {{section.label}}
-    </div>
-    <div class="items-container">
-      <table class="metadata-table info-attrs">
-        @for (item of section.items; track item.id || item.label) {
-          <tr [class.search-match]="isSearchMatchedAttrId(item.label)">
-            <td class="key"><hoverable-label [label]="item.label"></hoverable-label></td>
-            <td class="value">
-              <expandable-info-text
-                  [text]="item.value" [type]="item.label"
-                  [bgColor]="item.bgColor || 'transparent'"
-                  [textColor]="item.textColor || 'black'">
-              </expandable-info-text>
-            </td>
-          </tr>
-        }
-      </table>
-    </div>
-  </div>
+  @for (section of sections; track section.label) {
+    @if (section.items.length > 0) {
+      <div class="section" #sectionEle
+          [class.collapsed]="isSectionCollapsed(section.label)">
+        <div class="header">
+          <button mat-icon-button class="toggle"
+              (click)="handleToggleSection(section.label, sectionEle)">
+            <mat-icon>{{getSectionToggleIcon(section.label)}}</mat-icon>
+          </button>
+          {{section.label}}
+        </div>
+        <div class="items-container">
+          <table class="metadata-table info-attrs">
+            @for (item of section.items; track item.id || item.label) {
+              <tr [class.search-match]="isSearchMatchedAttrId(item.label)">
+                <td class="key"><hoverable-label [label]="item.label"></hoverable-label></td>
+                <td class="value">
+                  <expandable-info-text
+                      [text]="item.value" [type]="item.label"
+                      [bgColor]="item.bgColor || 'transparent'"
+                      [textColor]="item.textColor || 'black'">
+                  </expandable-info-text>
+                </td>
+              </tr>
+            }
+          </table>
+        </div>
+      </div>
+    }
+  }
 
   <!-- Summary for node data provider extensions -->
   <div class="section" *ngIf="showNodeDataProviderSummary" #ndpSectionEle

diff --git a/src/ui/src/components/visualizer/info_panel.ts b/src/ui/src/components/visualizer/info_panel.ts
@@ -559,10 +559,6 @@ export class InfoPanel {
     return (connectedNodesMetadataItem?.connectedNodes || []).length > 0;
   }
 
-  trackBySectionLabel(index: number, section: InfoSection): string {
-    return section.label;
-  }
-
   trackByItemIdOrLabel(index: number, item: InfoItem): string {
     return item.id || item.label;
   }
@@ -798,6 +794,9 @@ export class InfoPanel {
         const nodeResult = ((run.results || {})[this.curModelGraph.id] || {})[
           opNode.id
         ];
+        if (this.appService.config()?.hideEmptyNodeDataEntries && !nodeResult) {
+          continue;
+        }
         const strValue = nodeResult?.strValue || '-';
         const bgColor = nodeResult?.bgColor || 'transparent';
         const textColor = nodeResult?.textColor || 'black';

diff --git a/src/ui/src/components/visualizer/webgl_renderer.ts b/src/ui/src/components/visualizer/webgl_renderer.ts
@@ -1393,6 +1393,7 @@ export class WebglRenderer implements OnInit, OnDestroy {
         rendererId,
         noNodeShake,
         select,
+        config: this.appService.config(),
       };
       this.workerService.worker.postMessage(req);
     }
@@ -1423,6 +1424,7 @@ export class WebglRenderer implements OnInit, OnDestroy {
       clearAllExpandStates,
       forRestoringSnapshotAfterTogglingFlattenLayers,
       triggerNavigationSync,
+      config: this.appService.config(),
     };
     this.workerService.worker.postMessage(req);
   }
@@ -1886,6 +1888,7 @@ export class WebglRenderer implements OnInit, OnDestroy {
       paneId: this.paneId,
       all,
       ts: Date.now(),
+      config: this.appService.config(),
     };
     this.workerService.worker.postMessage(req);
   }

diff --git a/src/ui/src/components/visualizer/webgl_renderer_attrs_table_service.ts b/src/ui/src/components/visualizer/webgl_renderer_attrs_table_service.ts
@@ -164,6 +164,7 @@ export class WebglRendererAttrsTableService {
             this.webglRenderer.curModelGraph.id,
             this.webglRenderer.curShowOnNodeItemTypes,
             this.webglRenderer.curNodeDataProviderRuns,
+            this.webglRenderer.appService.config(),
           ),
         );
       } else if (isGroupNode(node)) {

diff --git a/src/ui/src/components/visualizer/worker/graph_expander.ts b/src/ui/src/components/visualizer/worker/graph_expander.ts
@@ -29,6 +29,7 @@ import {
   isGroupNode,
   splitLabel,
 } from '../common/utils';
+import {VisualizerConfig} from '../common/visualizer_config';
 
 import {Dagre, DagreGraphInstance} from './dagre_types';
 import {
@@ -55,6 +56,7 @@ export class GraphExpander {
       NodeDataProviderRunData
     >,
     private readonly testMode = false,
+    private readonly config?: VisualizerConfig,
   ) {}
 
   /** Expands the given group node to show its child nodes. */
@@ -85,6 +87,8 @@ export class GraphExpander {
         this.dagre,
         this.showOnNodeItemTypes,
         this.nodeDataProviderRuns,
+        this.testMode,
+        this.config,
       );
       const rect = layout.layout(curGroupNodeId);
       if (this.testMode) {
@@ -107,6 +111,8 @@ export class GraphExpander {
       this.dagre,
       this.showOnNodeItemTypes,
       this.nodeDataProviderRuns,
+      this.testMode,
+      this.config,
     );
     layout.layout();
     if (this.testMode) {
@@ -161,6 +167,8 @@ export class GraphExpander {
         this.dagre,
         this.showOnNodeItemTypes,
         this.nodeDataProviderRuns,
+        this.testMode,
+        this.config,
       );
       const rect = layout.layout(groupNodeId);
       if (this.testMode) {
@@ -180,6 +188,8 @@ export class GraphExpander {
       this.dagre,
       this.showOnNodeItemTypes,
       this.nodeDataProviderRuns,
+      this.testMode,
+      this.config,
     );
     layout.layout();
     if (this.testMode) {
@@ -246,6 +256,7 @@ export class GraphExpander {
       this.nodeDataProviderRuns,
       this.testMode,
       true,
+      this.config,
     );
 
     // From the given group node's parent, layout, update size, and continue to
@@ -265,6 +276,8 @@ export class GraphExpander {
         this.dagre,
         this.showOnNodeItemTypes,
         this.nodeDataProviderRuns,
+        this.testMode,
+        this.config,
       );
       const rect = layout.layout(curGroupNodeId);
       if (this.testMode) {
@@ -287,6 +300,8 @@ export class GraphExpander {
       this.dagre,
       this.showOnNodeItemTypes,
       this.nodeDataProviderRuns,
+      this.testMode,
+      this.config,
     );
     layout.layout();
     if (this.testMode) {
@@ -346,6 +361,8 @@ export class GraphExpander {
         this.dagre,
         this.showOnNodeItemTypes,
         this.nodeDataProviderRuns,
+        this.testMode,
+        this.config,
       );
       layout.layout();
     }
@@ -384,6 +401,8 @@ export class GraphExpander {
       this.dagre,
       this.showOnNodeItemTypes,
       this.nodeDataProviderRuns,
+      this.testMode,
+      this.config,
     );
     layout.layout();