You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pinot.apache.org by ap...@apache.org on 2018/11/20 22:03:31 UTC

[incubator-pinot] branch master updated: [TE] rootcause - primary metric selection from legend label (#3529)

This is an automated email from the ASF dual-hosted git repository.

apucher pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-pinot.git


The following commit(s) were added to refs/heads/master by this push:
     new 4741882  [TE] rootcause - primary metric selection from legend label (#3529)
4741882 is described below

commit 47418820aaeeb006908eb572c13b1c534dc9e419
Author: Alexander Pucher <ap...@linkedin.com>
AuthorDate: Tue Nov 20 14:03:27 2018 -0800

    [TE] rootcause - primary metric selection from legend label (#3529)
    
    Similar to #3526, this PR enables primary metric selection from the legend label. It also removes the unused batch toggle links in the legend
---
 .../pods/components/rootcause-legend/component.js  | 42 ++++++----------------
 .../pods/components/rootcause-legend/template.hbs  | 22 +++++-------
 .../app/pods/rootcause/template.hbs                |  1 +
 .../app/styles/components/rootcause-legend.scss    |  4 +++
 4 files changed, 24 insertions(+), 45 deletions(-)

diff --git a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-legend/component.js b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-legend/component.js
index 6f3bb19..ac7ee84 100644
--- a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-legend/component.js
+++ b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-legend/component.js
@@ -3,13 +3,13 @@ import Component from '@ember/component';
 import {
   toCurrentUrn,
   toBaselineUrn,
+  toMetricUrn,
   filterPrefix,
   hasPrefix,
   toMetricLabel,
   toEventLabel,
   isExclusionWarning
 } from 'thirdeye-frontend/utils/rca-utils';
-import _ from 'lodash';
 
 export default Component.extend({
   entities: null, // {}
@@ -18,9 +18,11 @@ export default Component.extend({
 
   invisibleUrns: null, // Set
 
-  onVisibility: null, // function (Set, bool)
+  onVisibility: null, // function (updates)
 
-  onSelection: null, // function (Set, bool)
+  onSelection: null, // function (updates)
+
+  onPrimaryChange: null, // function (updates)
 
   classNames: ['rootcause-legend'],
 
@@ -154,35 +156,11 @@ export default Component.extend({
       }
     },
 
-    visibleMetrics() {
-      const { selectedUrns } = getProperties(this, 'selectedUrns');
-      const visible = new Set(filterPrefix(selectedUrns, ['thirdeye:metric:', 'frontend:metric:', 'frontend:anomalyfunction:']));
-      const other = new Set([...selectedUrns].filter(urn => !visible.has(urn)));
-      this._bulkVisibility(visible, other);
-    },
-
-    visibleEvents() {
-      const { selectedUrns } = getProperties(this, 'selectedUrns');
-      const visible = new Set(filterPrefix(selectedUrns, 'thirdeye:event:'));
-      const other = new Set([...selectedUrns].filter(urn => !visible.has(urn)));
-      this._bulkVisibility(visible, other);
-    },
-
-    visibleAll() {
-      const { selectedUrns } = getProperties(this, 'selectedUrns');
-      this._bulkVisibility(selectedUrns, new Set());
-    },
-
-    visibleNone() {
-      const { selectedUrns } = getProperties(this, 'selectedUrns');
-      this._bulkVisibility(new Set(), selectedUrns);
-    },
-
-    visibleInvert() {
-      const { selectedUrns, invisibleUrns } = getProperties(this, 'selectedUrns', 'invisibleUrns');
-      const visible = new Set(invisibleUrns);
-      const other = new Set([...selectedUrns].filter(urn => !visible.has(urn)));
-      this._bulkVisibility(visible, other);
+    onSelect(urn) {
+      const { onPrimaryChange } = getProperties(this, 'onPrimaryChange');
+      if (onPrimaryChange) {
+        onPrimaryChange({ [toMetricUrn(urn)]: true, [toBaselineUrn(urn)]: true, [toCurrentUrn(urn)]: true });
+      }
     }
   }
 });
diff --git a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-legend/template.hbs b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-legend/template.hbs
index bbbd30e..4b1e973 100644
--- a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-legend/template.hbs
+++ b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-legend/template.hbs
@@ -1,25 +1,21 @@
 <div class="rootcause-legend__wrapper">
-  <div class="rootcause-legend__buttons">
-    <a class="thirdeye-link" {{action "visibleAll"}}>all</a>
-    | <a class="thirdeye-link" {{action "visibleNone"}}>none</a>
-    | <a class="thirdeye-link" {{action "visibleInvert"}}>invert</a>
-    | <a class="thirdeye-link" {{action "visibleMetrics"}}>metrics</a>
-  </div>
-
   {{#if hasMetrics}}
     <ul class="rootcause-legend__list" onMouseLeave={{action "onMouseLeave"}}>
       {{#each-in metrics as |urn label|}}
         <li class="rootcause-legend__item" onMouseEnter={{action "onMouseEnter" urn}}>
-          <div class="rootcause-legend__label-group {{if (set-has invisibleUrns urn) 'rootcause-legend__label-group--inactive'}}" {{action "toggleVisibility" urn}}>
-            <div class="rootcause-legend__indicator">
+          <div class="rootcause-legend__label-group {{if (set-has invisibleUrns urn) 'rootcause-legend__label-group--inactive'}}">
+            <div class="rootcause-legend__indicator" {{action "toggleVisibility" urn}}>
               <span class="entity-indicator entity-indicator--{{get-safe colors urn}} entity-indicator--square {{if (set-has invisibleUrns urn) 'entity-indicator--inactive'}}">
                 {{tooltip-on-element text="Toggle view"}}
               </span>
             </div>
-            <span class="rootcause-legend__label">{{label}}
-              {{#if (get-safe isExclusionWarning urn)}}
-                {{partial 'partials/rootcause/exclusion-warning'}}
-              {{/if}}
+            <span class="rootcause-legend__label rootcause-legend__metric">
+              <a {{action "onSelect" urn}}>
+                {{label}}
+                {{#if (get-safe isExclusionWarning urn)}}
+                  {{partial 'partials/rootcause/exclusion-warning'}}
+                {{/if}}
+              </a>
             </span>
           </div>
           <a class="rootcause-legend__remove-icon" {{action "removeUrn" urn}}>
diff --git a/thirdeye/thirdeye-frontend/app/pods/rootcause/template.hbs b/thirdeye/thirdeye-frontend/app/pods/rootcause/template.hbs
index c4d3142..ba42d4e 100644
--- a/thirdeye/thirdeye-frontend/app/pods/rootcause/template.hbs
+++ b/thirdeye/thirdeye-frontend/app/pods/rootcause/template.hbs
@@ -49,6 +49,7 @@
             onSelection=(action "onSelection")
             onMouseEnter=(action "onLegendHover")
             onMouseLeave=(action "onLegendHover")
+            onPrimaryChange=(action "onPrimaryChange")
           }}
           <div class="rootcause-wrapper__chart">
             <div class="row rootcause-wrapper__toolbar">
diff --git a/thirdeye/thirdeye-frontend/app/styles/components/rootcause-legend.scss b/thirdeye/thirdeye-frontend/app/styles/components/rootcause-legend.scss
index 9a8dee1..6e8d12a 100644
--- a/thirdeye/thirdeye-frontend/app/styles/components/rootcause-legend.scss
+++ b/thirdeye/thirdeye-frontend/app/styles/components/rootcause-legend.scss
@@ -94,4 +94,8 @@
       text-decoration: none;
     }
   }
+
+  &__metric {
+    cursor: pointer;
+  }
 }


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@pinot.apache.org
For additional commands, e-mail: commits-help@pinot.apache.org