Group anomalies into groups based on revision overlap.

Also fix issue where buttons were not hidden when displaying an anomaly group.

Bug: b/374810973
Change-Id: Ic5406c3fffc73dc6bdfc6fd594fa114fc2bd92ce
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/917319
Commit-Queue: Eduardo Yap <[email protected]>
Reviewed-by: Wenbin Zhang <[email protected]>

Author: Eduardo Yap

perf/modules/anomalies-table-sk/anomalies-table-sk-demo.ts

@@ -125,10 +125,6 @@ const anomaly_table = [
   },
 ];
 
-window.customElements.whenDefined('anomalies-table-sk').then(async () => {
-  // await load({ packages: ['table'] });
-});
-
 $$('#populate-tables')?.addEventListener('click', () => {
   document.querySelectorAll<AnomaliesTableSk>('anomalies-table-sk').forEach((ele) => {
     ele.populateTable(anomaly_table);

perf/modules/anomalies-table-sk/anomalies-table-sk.scss

@@ -6,6 +6,10 @@ anomalies-table-sk {
   display: block;
   padding: 16px;
 
+  .expand-button[hidden] {
+    display: none;
+  }
+
   > dialog {
     z-index: 2;
     background: var(--background);

perf/modules/anomalies-table-sk/anomalies-table-sk.ts

@@ -38,17 +38,49 @@ export class AnomaliesTableSk extends ElementSk {
 
   private static template = (ele: AnomaliesTableSk) => html` ${ele.generateTable()} `;
 
+  private rangeIntersects(aMin: number, aMax: number, bMin: number, bMax: number) {
+    return aMin <= bMax && bMin <= aMax;
+  }
+
+  private shouldMerge(a: Anomaly, b: Anomaly) {
+    return this.rangeIntersects(a.start_revision, a.end_revision, b.start_revision, b.end_revision);
+  }
+
+  /**
+   * Merge anomalies into groups.
+   *
+   * The criteria for merging two anomalies A and B is if A.start_revision and A.end_revision
+   * intersect with B.start_revision and B.end_revision.
+   */
   private groupAnomalies() {
-    this.anomalyGroups = [];
+    const groups = [];
 
-    // TODO(eduardoyap): Modify logic to group anomalies correctly.
     for (let i = 0; i < this.anomalyList.length; i++) {
+      let merged = false;
       const anomaly = this.anomalyList[i];
-      this.anomalyGroups.push({
-        anomalies: [anomaly, anomaly],
-        expanded: false,
-      });
+      for (const group of groups) {
+        let doMerge = true;
+        for (const other of group.anomalies) {
+          const should = this.shouldMerge(anomaly, other);
+          if (!should) {
+            doMerge = false;
+            break;
+          }
+        }
+        if (doMerge) {
+          group.anomalies.push(anomaly);
+          merged = true;
+          break;
+        }
+      }
+      if (!merged) {
+        groups.push({
+          anomalies: [anomaly],
+          expanded: false,
+        });
+      }
     }
+    this.anomalyGroups = groups;
   }
 
   private generateTable() {
@@ -92,7 +124,10 @@ export class AnomaliesTableSk extends ElementSk {
       rows.push(html`
         <tr ?hidden=${!anomalyGroup.expanded && i !== 0}>
           <td>
-            <button @click=${() => this.expandGroup(anomalyGroup)} ?hidden=${length === 1 || i > 0}>
+            <button
+              class="expand-button"
+              @click=${() => this.expandGroup(anomalyGroup)}
+              ?hidden=${length === 1 || i > 0}>
               ${length}
             </button>
           </td>