[eeg_modelling] Accept or reject similar patterns

PiperOrigin-RevId: 244228233

eeg_modelling/eeg_viewer/static/js/dispatcher.js

@@ -38,6 +38,8 @@ const ActionType = {
   SEARCH_SIMILAR_REQUEST: 'searchSimilarRequest',
   SEARCH_SIMILAR_RESPONSE_OK: 'searchSimilarResponseOk',
   SEARCH_SIMILAR_RESPONSE_ERROR: 'searchSimilarResponseError',
+  SIMILAR_PATTERN_ACCEPT: 'similarPatternAccept',
+  SIMILAR_PATTERN_REJECT: 'similarPatternReject',
   TOOL_BAR_GRIDLINES: 'toolBarGridlines',
   TOOL_BAR_HIGH_CUT: 'toolBarHighCut',
   TOOL_BAR_LOW_CUT: 'toolBarLowCut',

eeg_modelling/eeg_viewer/static/js/main.js

@@ -109,6 +109,19 @@ goog.exportSymbol(
 goog.exportSymbol(
     'waveEvents.searchSimilarPatterns',
     goog.bind(waveEvents.searchSimilarPatterns, waveEvents));
+goog.exportSymbol(
+    'waveEvents.acceptSimilarPattern',
+    goog.bind(waveEvents.acceptSimilarPattern, waveEvents));
+goog.exportSymbol(
+    'waveEvents.closeSimilarPatternMenu',
+    goog.bind(waveEvents.closeSimilarPatternMenu, waveEvents));
+goog.exportSymbol(
+    'waveEvents.navigateToPattern',
+    goog.bind(waveEvents.navigateToPattern, waveEvents));
+goog.exportSymbol(
+    'waveEvents.rejectSimilarPattern',
+    goog.bind(waveEvents.rejectSimilarPattern, waveEvents));
+
 
 /**
  * Make a request to the server when the URL changes.

eeg_modelling/eeg_viewer/static/js/store.js

@@ -344,6 +344,10 @@ class Store {
                      this.handleSimilarPatternsResponseOk);
     registerCallback(Dispatcher.ActionType.SEARCH_SIMILAR_RESPONSE_ERROR,
                      this.handleSimilarPatternsResponseError);
+    registerCallback(Dispatcher.ActionType.SIMILAR_PATTERN_ACCEPT,
+                     this.handleSimilarPatternAccept);
+    registerCallback(Dispatcher.ActionType.SIMILAR_PATTERN_REJECT,
+                     this.handleSimilarPatternReject);
     registerCallback(Dispatcher.ActionType.TOOL_BAR_GRIDLINES,
                      this.handleToolBarGridlines);
     registerCallback(Dispatcher.ActionType.TOOL_BAR_HIGH_CUT,
@@ -692,6 +696,52 @@ class Store {
     };
   }
 
+  /**
+   * Removes a similar pattern from the similarPatternResult property.
+   * Returns a copy of the array, does not modify in place.
+   * @param {!SimilarPattern} removePattern Similar pattern to remove.
+   * @return {!Array<!SimilarPattern>} Copy of the similarPatternResult, with
+   *     the pattern removed.
+   * @private
+   */
+  removeSimilarPattern_(removePattern) {
+    return this.storeData.similarPatternResult.filter(
+        (pattern) => pattern.startTime !== removePattern.startTime);
+  }
+
+  /**
+   * Handles data from a SIMILAR_PATTERN_ACCEPT action, which will move the
+   * accepted pattern to the wave events list, and remove it from the similar
+   * patterns list.
+   * @param {!SimilarPattern} data The similar pattern to accept.
+   * @return {!PartialStoreData} store data with changed properties.
+   */
+  handleSimilarPatternAccept(data) {
+    const targetPattern = this.storeData.similarPatternTarget;
+    const similarPatternResult = this.removeSimilarPattern_(data);
+    const waveEvents = this.addWaveEvent_({
+      labelText: targetPattern.labelText,
+      startTime: data.startTime,
+      duration: data.duration,
+    });
+    return {
+      waveEvents,
+      similarPatternResult,
+    };
+  }
+
+  /**
+   * Handles data from a SIMILAR_PATTERN_REJECT action, which will remove the
+   * similar pattern from the list.
+   * @param {!SimilarPattern} data The similar pattern to reject.
+   * @return {!PartialStoreData} store data with changed properties.
+   */
+  handleSimilarPatternReject(data) {
+    return {
+      similarPatternResult: this.removeSimilarPattern_(data),
+    };
+  }
+
   /**
    * Handles data from a TOOL_BAR_GRIDLINES action that will modify the time
    * scale.
@@ -979,6 +1029,7 @@ goog.addSingletonGetter(Store);
 exports = Store;
 exports.StoreData = StoreData;
 exports.Annotation = Annotation;
+exports.SimilarPattern = SimilarPattern;
 exports.ErrorInfo = ErrorInfo;
 exports.Property = Property;
 exports.PredictionMode = PredictionMode;

eeg_modelling/eeg_viewer/static/js/wave_events.js

@@ -60,8 +60,14 @@ class WaveEvents {
     /** @private @const {string} */
     this.actionMenuContainer_ = 'event-actions-container';
 
+    /** @private @const {string} */
+    this.similarPatternActions_ = 'pattern-actions-container';
+
     /** @private {?Store.Annotation} */
     this.clickedWaveEvent_ = null;
+
+    /** @private {?Store.SimilarPattern} */
+    this.clickedSimilarPattern_ = null;
   }
 
   /**
@@ -215,7 +221,7 @@ class WaveEvents {
     document.getElementById(this.similarTableId_).appendChild(tableBody);
 
     store.similarPatternResult.forEach((similarPattern) => {
-      const row = document.createElement('tr');
+      const row = /** @type {!HTMLElement} */ (document.createElement('tr'));
       const addTextElementToRow = (text) => {
         const element = document.createElement('td');
         element.classList.add('mdl-data-table__cell--non-numeric');
@@ -228,9 +234,83 @@ class WaveEvents {
 
       addTextElementToRow(similarPattern.score.toFixed(2));
 
+      row.onclick = (event) => {
+        const top = event.y - event.offsetY + row.offsetHeight;
+        this.handleSimilarPatternClick(similarPattern, top);
+      };
+
       tableBody.appendChild(row);
     });
   }
+
+  /**
+   * Handles a click in a similar pattern, which will display the similar
+   * pattern actions menu.
+   * @param {!Store.SimilarPattern} similarPattern Similar pattern clicked.
+   * @param {number} top Top coordinate to position the menu.
+   */
+  handleSimilarPatternClick(similarPattern, top) {
+    if (this.clickedSimilarPattern_ &&
+        this.clickedSimilarPattern_.startTime === similarPattern.startTime) {
+      this.closeSimilarPatternMenu();
+      return;
+    }
+
+    this.clickedSimilarPattern_ = similarPattern;
+
+    const menuContainer = document.getElementById(this.similarPatternActions_);
+    menuContainer.style.top = `${top}px`;
+    menuContainer.classList.remove('hidden');
+  }
+
+  /**
+   * Navigates to the previously selected similar pattern, and closes the
+   * similar pattern actions menu.
+   */
+  navigateToPattern() {
+    const { startTime, duration } = this.clickedSimilarPattern_;
+    this.closeSimilarPatternMenu();
+    Dispatcher.getInstance().sendAction({
+      actionType: Dispatcher.ActionType.NAVIGATE_TO_SPAN,
+      data: {
+        startTime,
+        duration,
+      },
+    });
+  }
+
+  /**
+   * Accepts a similar pattern, and closes the similar pattern actions menu.
+   */
+  acceptSimilarPattern() {
+    const selectedPattern = Object.assign({}, this.clickedSimilarPattern_);
+    this.closeSimilarPatternMenu();
+    Dispatcher.getInstance().sendAction({
+      actionType: Dispatcher.ActionType.SIMILAR_PATTERN_ACCEPT,
+      data: selectedPattern,
+    });
+  }
+
+  /**
+   * Rejects a similar pattern, and closes the similar pattern actions menu.
+   */
+  rejectSimilarPattern() {
+    const selectedPattern = Object.assign({}, this.clickedSimilarPattern_);
+    this.closeSimilarPatternMenu();
+    Dispatcher.getInstance().sendAction({
+      actionType: Dispatcher.ActionType.SIMILAR_PATTERN_REJECT,
+      data: selectedPattern,
+    });
+  }
+
+  /**
+   * Closes the similar pattern actions menu, and clears the selection.
+   */
+  closeSimilarPatternMenu() {
+    utils.hideElement(this.similarPatternActions_);
+    this.clickedSimilarPattern_ = null;
+  }
+
 }
 
 goog.addSingletonGetter(WaveEvents);

eeg_modelling/eeg_viewer/templates/index.html

@@ -416,6 +416,24 @@ <h3 class="mdl-card__title-text">Similar Patterns</h3>
             </button>
           </div>
         </div>
+        <div id="pattern-actions-container" class="event-actions-container hidden mdl-shadow--2dp">
+          <div class="mdl-card__menu">
+            <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" onclick="waveEvents.closeSimilarPatternMenu()">
+              <i class="material-icons">close</i>
+            </button>
+          </div>
+          <div class="mdl-card__actions mdl-card--border">
+            <button class="block mdl-button mdl-button--accent mdl-js-button mdl-js-ripple-effect" onclick="waveEvents.navigateToPattern()">
+              Navigate to
+            </button>
+            <button class="block mdl-button mdl-button--accent mdl-js-button mdl-js-ripple-effect" onclick="waveEvents.acceptSimilarPattern()">
+              Accept
+            </button>
+            <button class="block mdl-button mdl-button--accent mdl-js-button mdl-js-ripple-effect" onclick="waveEvents.rejectSimilarPattern()">
+              Reject
+            </button>
+          </div>
+        </div>
       </div>
       <div id="file-menu-modal">
         <div id="file-menu" class="mdl-card mdl-shadow--2dp">