Minimap: show elements inside groups

PiperOrigin-RevId: 588791957
google · Dec 11, 2023 · 1e2a96c · 1e2a96c
1 parent e2d43eb
commit 1e2a96c
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 52 deletions.
diff --git a/src/app/directed_acyclic_graph_raw.ts b/src/app/directed_acyclic_graph_raw.ts
@@ -546,6 +546,7 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {
           group.id,
           setGroupSizeProps(
               group, this.dims, this.nodePad, this.expandedGroups));
+      Object.assign(group, {expanded: this.expandedGroups.has(group.id)});
     }
     for (const e of this.edges) {
       g.setEdge(e.from, e.to, e);

diff --git a/src/app/group_iteration_select.ng.html b/src/app/group_iteration_select.ng.html
@@ -1,6 +1,6 @@
 <mat-select
   [aria-label]="getA11yLabelFor('button')"
-  [value]="softIteration"
+  [value]="iteration"
   (selectionChange)="updateValue($event)"
   [tabIndex]="unTabbable ? -1 : 0"
   (click)="$event.stopPropagation()"
@@ -10,7 +10,7 @@
   <mat-select-trigger>
     <span class="focus-animator"></span>
     <div class="content-wrap">
-      <ng-container *ngIf="!!softIteration">
+      <ng-container *ngIf="!!iteration">
         <div *ngIf="getStateIcon(selectedIteration!) as icon" class="icon-wrap">
           <workflow-graph-icon
             [title]="'State: ' + selectedIteration?.state?.toLowerCase()"
@@ -24,7 +24,7 @@
           {{ selectedIteration?.getNodeDisplayName() }}
         </div>
       </ng-container>
-      <span *ngIf="!softIteration" class="empty-state"> Please select an iteration </span>
+      <span *ngIf="!iteration" class="empty-state"> Please select an iteration </span>
     </div>
   </mat-select-trigger>
   <ai-dag-iteration-selector-filter (onSearch)="filterIterations($event)" />

diff --git a/src/app/group_iteration_select.ts b/src/app/group_iteration_select.ts
@@ -131,7 +131,6 @@ export class GroupIterationSelector implements OnInit, OnDestroy {
   set iteration(id: string) {
     const oldIter = this.$iteration;
     this.$iteration = id;
-    this.calculateIteration();
     if (id !== oldIter) this.iterationChange.emit(id);
   }
   get iteration() {
@@ -173,7 +172,7 @@ export class GroupIterationSelector implements OnInit, OnDestroy {
         this.iterMap[this.iteration] || this.badIters[0] || this.goodIters[0];
     if (this.selectedIteration === newIter) return;
     this.selectedIteration = newIter;
-    this.softIteration = this.selectedIteration?.id ?? '';
+    this.iteration = this.selectedIteration?.id ?? '';
     this.onIterSelect.emit(this.selectedIteration);
   }
 

diff --git a/src/app/minimap/minimap.ng.html b/src/app/minimap/minimap.ng.html
@@ -11,48 +11,7 @@
     <section style.transform="scale({{ scale }})" class="dag-preview">
       <!-- This element will scale smaller than the parent container when zoom is above 1 -->
       <section style.transform="scale({{ contentScale }})" class="dag">
-        <ng-container *ngFor="let node of nodes; trackBy: nodeOrGroupTrack">
-          <ng-container *ngIf="!hasCustomMinimapNodeTemplateForNode(node)">
-            <article
-              [ngClass]="[
-                'node',
-                node.type,
-                classNameState(node),
-                convertStateToRuntime(node.state).toLowerCase()
-              ]"
-              [class.selected-node] = "selectedNode?.node == node"
-              [style.transform]="node.cssTransform"
-              [style.width.px]="node.width"
-              [style.height.px]="node.height"
-            ></article>
-          </ng-container>
-          <ng-container *ngIf="hasCustomMinimapNodeTemplateForNode(node)">
-            <ng-container *ngTemplateOutlet="getCustomMinimapNodeTemplateForNode(node); context: {
-              node
-            }"></ng-container>
-            <ng-container *ngIf="!getCustomMinimapNodeTemplateForNode(node)">
-              <div class="custom-node-error" role="alert" tabindex="0">
-                <span>
-                  Could not find the
-                  <code>minimapTemplateRef = node['minimapTemplateRef']</code>
-                  for node <code>{{node.id}}</code>.
-                </span>
-              </div>
-            </ng-container>
-          </ng-container>
-        </ng-container>
-        <article
-          *ngFor="let group of groups; trackBy: nodeOrGroupTrack"
-          [ngClass]="[
-            'node',
-            getNodeType(group),
-            classNameState(group),
-            convertStateToRuntime(group.state).toLowerCase()
-          ]"
-          [style.transform]="group.cssTransform"
-          [style.width.px]="group.width"
-          [style.height.px]="group.height"
-        ></article>
+        <ng-container *ngTemplateOutlet="renderElements; context: {$implicit: {nodes, groups}}" />
       </section>
     </section>
     <!-- Empty Click handler is needed on this element to support role="button" -->
@@ -79,3 +38,58 @@
     </div>
   </div>
 </div>
+
+<ng-template #renderElements let-context>
+  @for (node of context.nodes; track node.id) 
+  {
+    <ng-container *ngIf="!hasCustomMinimapNodeTemplateForNode(node)">
+      <article
+        [ngClass]="[
+          'node',
+          node.type,
+          classNameState(node),
+          convertStateToRuntime(node.state).toLowerCase()
+        ]"
+        [class.selected-node] = "selectedNode?.node == node"
+        [style.transform]="node.cssTransform"
+        [style.width.px]="node.width"
+        [style.height.px]="node.height"
+      ></article>
+    </ng-container>
+    <ng-container *ngIf="hasCustomMinimapNodeTemplateForNode(node)">
+      <ng-container *ngTemplateOutlet="getCustomMinimapNodeTemplateForNode(node); context: {
+        node
+      }"></ng-container>
+      <ng-container *ngIf="!getCustomMinimapNodeTemplateForNode(node)">
+        <div class="custom-node-error" role="alert" tabindex="0">
+          <span>
+            Could not find the
+            <code>minimapTemplateRef = node['minimapTemplateRef']</code>
+            for node <code>{{node.id}}</code>.
+          </span>
+        </div>
+      </ng-container>
+    </ng-container>
+  }
+  @for (group of context.groups; track group.id) 
+  {
+    <article
+      [ngClass]="[
+        'node',
+        getNodeType(group),
+        classNameState(group),
+        convertStateToRuntime(group.state).toLowerCase()
+      ]"
+      [class.iteration]="context.treatAsLoop"
+      [style.transform]="group.cssTransform"
+      [style.width.px]="group.width"
+      [style.height.px]="group.height"
+    >
+      <ng-container *ngIf="(group.expanded || (context.treatAsLoop && group.id === context.selectedLoopId))">
+        <ng-container 
+          *ngTemplateOutlet="renderElements; context: {$implicit: group}"
+        />
+      </ng-container>
+    </article>
+  }
+</ng-template>
diff --git a/src/app/minimap/minimap.scss b/src/app/minimap/minimap.scss
@@ -73,8 +73,11 @@
                 background: transparent;
               }
               &.group {
-                border: 40px double #607d8b;
+                border: 10px double #607d8b;
                 background: transparent;
+                &.iteration {
+                  border: 0;
+                }
               }
               &.query-minimap-node.time-critical {
                 border: #607d8b 10px solid;

diff --git a/src/app/minimap/minimap.ts b/src/app/minimap/minimap.ts
@@ -116,10 +116,6 @@ export class Minimap implements OnChanges {
     return node instanceof DagNode ? node.type : 'group';
   }
 
-  nodeOrGroupTrack(index: number, n: DagNode|DagGroup) {
-    return n.id;
-  }
-
   getCustomMinimapNodeTemplateForNode(node: DagNode): TemplateRef<any>|null {
     if (node instanceof CustomNode) {
       const templateRefName = node.minimapTemplateRef;