Confusing save/label/apply/detect buttons #280 (#288)

src/panel/graph_panel/partials/tab_analytics.html

@@ -148,7 +148,7 @@
 
         <label
           class="gf-form-label"
-          ng-if="analyticUnit.detectorType === 'pattern'"
+          ng-if="analyticUnit.detectorType === 'pattern' && !analyticUnit.selected"
           ng-style="analyticUnit.status === 'LEARNING' && { 'cursor': 'not-allowed' }"
         >
           <a class="pointer" tabindex="1"
@@ -157,8 +157,8 @@
           >
             <i class="fa fa-bar-chart" ng-if="!analyticUnit.saving"></i>
             <i class="fa fa-spinner fa-spin" ng-if="analyticUnit.saving"></i>
-            <b ng-if="analyticUnit.saving" ng-disabled="true"> saving... </b>
           </a>
+          Label
         </label>
 
         <select class="gf-form-input width-12"
@@ -172,6 +172,23 @@
           ng-disabled="analyticUnit.status === 'LEARNING'"
         />
 
+        <!-- Standard way to add conditions to ng-style: https://stackoverflow.com/a/29470439 -->
+        <label
+          class="gf-form-label"
+          ng-style="analyticUnit.status === 'LEARNING' && { 'cursor': 'not-allowed' }"
+          ng-if="analyticUnit.selected && !analyticUnit.saving"
+          ng-disabled="analyticUnit.status === 'LEARNING'"
+        >
+          <a class="pointer"
+            ng-click="ctrl.onToggleLabelingMode(analyticUnit.id)"
+            ng-disabled="analyticUnit.status === 'LEARNING'"
+          >
+            <i class="fa fa-spinner fa-spin" ng-if="analyticUnit.saving"></i>
+            <b ng-if="!analyticUnit.saving"> Detect </b>
+            <b ng-if="analyticUnit.saving" ng-disabled="true"> saving... </b>
+            </a>
+        </label>
+
         <label class="gf-form-label">
           <a
             ng-if="!analyticUnit.selected"