Compare scale events by their UID instead of reference equality

Author: DingoEatingFuzz

ui/app/components/scale-events-chart.js

@@ -1,5 +1,6 @@
 import Component from '@ember/component';
-import { computed } from '@ember/object';
+import { copy } from 'ember-copy';
+import { computed, get } from '@ember/object';
 import { tagName } from '@ember-decorators/component';
 import classic from 'ember-classic-decorator';
 
@@ -37,12 +38,12 @@ export default class ScaleEventsChart extends Component {
     return this.events.rejectBy('hasCount').map(ev => ({
       type: ev.error ? 'error' : 'info',
       time: ev.time,
-      event: ev,
+      event: copy(ev),
     }));
   }
 
   toggleEvent(ev) {
-    if (this.activeEvent === ev) {
+    if (this.activeEvent && get(this.activeEvent, 'event.uid') === get(ev, 'event.uid')) {
       this.closeEventDetails();
     } else {
       this.set('activeEvent', ev);

ui/app/helpers/eq-by.js

@@ -0,0 +1,16 @@
+import { get } from '@ember/object';
+import { helper } from '@ember/component/helper';
+
+/**
+ * Eq By
+ *
+ * Usage: {{eq-by "prop" obj1 obj2}}
+ *
+ * Returns true when obj1 and obj2 have the same value for property "prop"
+ */
+export function eqBy([prop, obj1, obj2]) {
+  if (!obj1 || !obj2) return false;
+  return get(obj1, prop) === get(obj2, prop);
+}
+
+export default helper(eqBy);

ui/app/models/scale-event.js

@@ -31,4 +31,10 @@ export default class ScaleEvent extends Fragment {
     return Object.keys(this.meta).length > 0;
   })
   hasMeta;
+
+  // Since scale events don't have proper IDs, this UID is a compromise
+  @computed('time', 'timeNanos', 'message', function() {
+    return `${+this.time}${this.timeNanos}_${this.message}`;
+  })
+  uid;
 }

ui/app/templates/components/line-chart.hbs

@@ -31,7 +31,10 @@
   <div data-test-annotation class="chart-annotation {{annotation.iconClass}} {{annotation.staggerClass}}" style={{annotation.style}}>
       <button
         type="button"
-        class="indicator {{if (eq annotation.annotation this.activeAnnotation) "is-active"}}"
+        class="indicator {{if (or
+          (and this.annotationKey (eq-by this.annotationKey annotation.annotation this.activeAnnotation))
+          (and (not this.annotationKey) (eq annotation.annotation this.activeAnnotation))
+        ) "is-active"}}"
         title={{annotation.label}}
         onclick={{action this.annotationClick annotation.annotation}}>
         {{x-icon annotation.icon}}

ui/app/templates/components/scale-events-chart.hbs

@@ -6,6 +6,7 @@
   @data={{this.data}}
   @annotations={{this.annotations}}
   @activeAnnotation={{this.activeEvent}}
+  @annotationKey="event.uid"
   @onAnnotationClick={{action this.toggleEvent}} />
 {{#if this.activeEvent}}
   <div data-test-event-details>