labeled / deleted segments -> positive / negative #196 (#197)

- rename labeled / deleted segments to positive / negative
- fix to show Grafana version in Hastic Info tab
- minor UI fixes

src/panel/graph_panel/controllers/analytic_controller.ts

@@ -140,6 +140,7 @@ export class AnalyticController {
     await this.disableLabeling();
     this._selectedAnalyticUnitId = id;
     this.labelingUnit.selected = true;
+    this.toggleLabelingMode(LabelingMode.LABELING);
     this.toggleVisibility(id, true);
   }
 
@@ -189,6 +190,10 @@ export class AnalyticController {
     return this.labelingUnit.labelingMode;
   }
 
+  set labelingMode(labelingMode: LabelingMode) {
+    this.labelingUnit.labelingMode = labelingMode;
+  }
+
   addLabelSegment(segment: Segment, deleted = false) {
     const asegment = this.labelingUnit.addLabeledSegment(segment, deleted);
     this._labelingDataAddedSegments.addSegment(asegment);
@@ -337,14 +342,14 @@ export class AnalyticController {
     this._labelingDataAddedSegments.removeInRange(from, to);
   }
 
-  toggleLabelingMode(mode: LabelingMode) {
+  toggleLabelingMode(labelingMode: LabelingMode) {
     if(!this.inLabelingMode) {
-      throw new Error(`Can't enter ${mode} mode when labeling mode is disabled`);
+      throw new Error(`Can't enter ${labelingMode} mode when labeling mode is disabled`);
     }
-    if(this.labelingUnit.labelingMode === mode) {
+    if(this.labelingUnit.labelingMode === labelingMode) {
       this.labelingUnit.labelingMode = LabelingMode.LABELING;
     } else {
-      this.labelingUnit.labelingMode = mode;
+      this.labelingUnit.labelingMode = labelingMode;
     }
   }
 

src/panel/graph_panel/graph_ctrl.ts

@@ -659,8 +659,12 @@ class GraphCtrl extends MetricsPanelCtrl {
     const datasource = await this._getDatasourceByName(this.panel.datasource);
     const backendUrl = await this.getBackendURL();
 
+    let grafanaVersion = 'unknown';
+    if(_.has(window, 'grafanaBootData.settings.buildInfo.version')) {
+      grafanaVersion = window.grafanaBootData.settings.buildInfo.version;
+    }
     this._panelInfo = {
-      grafanaVersion: this.contextSrv.version,
+      grafanaVersion,
       grafanaUrl: window.location.host,
       datasourceType: datasource.type,
       hasticServerUrl: backendUrl

src/panel/graph_panel/partials/help_section.html

@@ -1,6 +1,5 @@
 <pre>
-  <b>For usage instructions:</b>
+  <b>For usage instructions:</b> <a class="text-link" href="https://github.com/hastic/hastic-grafana-app/wiki/Analytic-units">Visit our <b>Wiki</b> page</a>.
-  Visit our <a href="https://github.com/hastic/hastic-grafana-app/wiki/Analytic-units"><b>Wiki</b></a> page.
   
   <b>If you encounter any problems:</b>
   Look for solution or create a new Issue <a href="https://github.com/hastic/hastic-grafana-app/issues"><b>here</b></a>.

src/panel/graph_panel/partials/tab_analytics.html

@@ -23,7 +23,7 @@
 
       <label class="gf-form-label width-4"> Type </label>
       <div class="gf-form-select-wrapper">
-        <select class="gf-form-input width-12"
+        <select class="gf-form-input width-10"
           ng-model="analyticUnit.type"
           ng-options="type.value as type.name for type in ctrl.analyticUnitTypes[analyticUnit.detectorType]"
           ng-disabled="true"
@@ -39,7 +39,7 @@
       />
       -->
 
-      <label class="gf-form-label width-8"> Labeled Color </label>
+      <label class="gf-form-label width-8"> Positive Color </label>
       <span class="gf-form-label">
         <color-picker
           color="analyticUnit.labeledColor"
@@ -50,7 +50,7 @@
       <!-- Hack to avoid Grafana's .gf-form-label + .gf-form-label css. Fix for https://github.com/hastic/hastic-grafana-app/issues/192 -->
       <div></div>
 
-      <label class="gf-form-label width-8"> Deleted Color </label>
+      <label class="gf-form-label width-8"> Negative Color </label>
       <span class="gf-form-label">
         <color-picker
           color="analyticUnit.deletedColor"
@@ -69,13 +69,21 @@
         >
           <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.selected && analyticUnit.labelingMode === 'LABELING' && !analyticUnit.saving"> labeling </b>
-          <b ng-if="analyticUnit.selected && analyticUnit.labelingMode === 'DELETING' && !analyticUnit.saving"> deleting </b>
-          <b ng-if="analyticUnit.selected && analyticUnit.labelingMode === 'UNLABELING' && !analyticUnit.saving"> unlabeling </b>
           <b ng-if="analyticUnit.saving" ng-disabled="true"> saving... </b>
         </a>
       </label>
 
+      <select class="gf-form-input width-10"
+        ng-model="ctrl.analyticsController.labelingMode"
+        ng-options="type.value as type.name for type in [
+          { name:'Label Positive', value: 'LABELING' }, 
+          { name:'Label Negative', value: 'DELETING' },
+          { name:'Unlabel', value: 'UNLABELING' }
+        ]"
+        ng-if="analyticUnit.selected && !analyticUnit.saving"
+        ng-disabled="analyticUnit.status === 'LEARNING'"
+      />
+
       <select class="gf-form-input width-7"
         ng-model="ctrl.analyticsController.getThreshold(analyticUnit.id).condition"
         ng-options="type for type in ctrl.analyticsController.conditions"
@@ -100,10 +108,9 @@
         Apply
       </button>
 
-      <label class="gf-form-label">
+      <label class="gf-form-label" ng-hide="analyticUnit.selected">
         <a
           ng-if="analyticUnit.visible"
-          ng-disabled="analyticUnit.selected"
           bs-tooltip="'Hide. It`s visible now.'"
           ng-click="ctrl.onToggleVisibility(analyticUnit.id)"
           class="pointer"
@@ -113,7 +120,6 @@
 
         <a
           ng-if="!analyticUnit.visible"
-          ng-disabled="analyticUnit.selected"
           bs-tooltip="'Show. It`s hidden now.'"
           ng-click="ctrl.onToggleVisibility(analyticUnit.id)"
           class="pointer"
@@ -159,7 +165,7 @@
 
       <label class="gf-form-label width-8"> Detector Type </label>
       <div class="gf-form-select-wrapper">
-        <select class="gf-form-input width-12"
+        <select class="gf-form-input width-10"
           ng-model="ctrl.analyticsController.newAnalyticUnit.detectorType"
           ng-options="analyticUnitDetectorType for analyticUnitDetectorType in ctrl.analyticUnitDetectorTypes"
           ng-change="ctrl.analyticsController.onAnalyticUnitDetectorChange(ctrl.analyticUnitTypes);"
@@ -168,7 +174,7 @@
 
       <label class="gf-form-label width-8"> Type </label>
       <div class="gf-form-select-wrapper">
-        <select class="gf-form-input width-12"
+        <select class="gf-form-input width-10"
           ng-model="ctrl.analyticsController.newAnalyticUnit.type"
           ng-options="
             type.value as type.name