feat(bam): allow tab, add examples

- copy tweaks
- add cancel button
- show invalid format error for all errors
- update canBamSlice conditions for new ES index
Closes #163

app/scripts/components/ui/search/styles.less

@@ -35,5 +35,8 @@
 
   textarea {
     resize: none;
+    -moz-tab-size : 4;
+    -o-tab-size : 4;
+    tab-size : 4;
   }
-}
+}

app/scripts/files/files.controllers.ts

@@ -4,6 +4,7 @@ module ngApp.files.controllers {
   import ICoreService = ngApp.core.services.ICoreService;
   import ICartService = ngApp.cart.services.ICartService;
   import IFilesService = ngApp.files.services.IFilesService;
+  import IGqlService = ngApp.components.gql.IGqlService;
 
   export interface IFileController {
     file: IFile;
@@ -68,46 +69,61 @@ module ngApp.files.controllers {
     }
 
     canBAMSlice(): boolean {
-      return (this.file.data_type || '').toLowerCase() === "raw sequencing data" &&
-             (this.file.data_subtype || '').toLowerCase() === "aligned reads" &&
-             _.indexOf(_.pluck(this.file.related_files, 'type'), "bai") !== -1;
+      return (this.file.data_type || '').toLowerCase() === 'aligned reads' &&
+             (this.file.data_format || '').toLowerCase() === 'bam';
     }
 
   }
 
   class BAMSlicingController {
 
+    exampleShowing: boolean = false;
     /* @ngInject */
     constructor (private $uibModalInstance,
                  private $scope: ng.IScope,
                  private FilesService: IFilesService,
-                 public fileID: string,
-                 public completeCallback: any) {}
+                 public file: any,
+                 private GqlService: IGqlService,
+                 public completeCallback: any) {
+       this.$scope.bedModel = "";
+     }
 
     submit(): void {
-      this.FilesService.sliceBAM(this.fileID, this.$scope.bedModel, this.completeCallback);
+      this.FilesService.sliceBAM(this.file.file_id, this.$scope.bedModel, this.completeCallback);
       this.$uibModalInstance.dismiss('slicing');
     }
 
+    allowTab($event: any): void {
+      if (event.keyCode === 9) {
+        event.preventDefault();
+
+        // current caret pos
+        var start = $event.target.selectionStart;
+        var end = $event.target.selectionEnd;
+
+        var oldValue = this.$scope.bedModel;
+        this.$scope.bedModel = oldValue.substring(0, start) + '\t' + oldValue.substring(end);
+        // put caret in correct place
+        this.GqlService.setPos($event.target, start+1);
+      }
+    }
+
+    toggleExample() {
+      this.exampleShowing = !this.exampleShowing;
+    }
+
     closeModal(): void {
       this.$uibModalInstance.dismiss('cancelled');
     }
   }
 
   class BAMFailedModalController {
-    public errorBlobString: string;
+    msg: string = "Invalid BED Format. Please refer to the examples described in the BAM Slicing pop-up.";
     /* @ngInject */
     constructor(private $uibModalInstance,
                 public errorStatus: string,
                 public errorMsg: string,
-                private errorBlob: any) {
-      this.errorBlobString = "";
-      var reader = new FileReader();
-      reader.addEventListener("loadend", () => {
-        this.errorBlobString = _.get(JSON.parse(reader.result), "error", "Error slicing");
-      });
-      reader.readAsText(errorBlob);
-    }
+                private errorBlob: any) {}
   }
 
 

app/scripts/files/files.directives.ts

@@ -95,8 +95,8 @@ module ngApp.files.directives {
               animation: false,
               size: "lg",
               resolve: {
-                fileID: function () {
-                  return _.first(_.pluck(files, "file_id"));
+                file: function() {
+                  return _.first(files);
                 },
                 completeCallback: function() {
                   return turnSpinnerOff;

app/scripts/files/templates/bam-slicing-failed.html

@@ -2,9 +2,8 @@
   <h4 data-translate>BAM Slicing Failed</h4>
 </div>
 <div class="modal-body text-danger">
-  <h5>{{bamfc.errorStatus}}: {{ bamfc.errorMsg }}</h5>
   <p data-translate>
-    {{ bamfc.errorBlobString }}
+    {{ bamfc.msg }}
   </p>
 </div>
 <div class="modal-footer">

app/scripts/files/templates/bam-slicing.html

@@ -1,13 +1,31 @@
 <div class="modal-header">
-  <h4 data-translate>BAM Slicing {{bamc.fileID}}</h4>
+  <h2 data-translate style="margin-top: 0px; margin-bottom: 0px">BAM Slicing</h2>
+  <h3 data-translate>File name: {{bamc.file.file_name}}</h3>
 </div>
 <div class="modal-body">
-  Please enter a genome coordinate below (in <a href="https://genome.ucsc.edu/FAQ/FAQformat.html#format1">BED</a> format).
-  <textarea id="bed" class="form-control" data-ng-model="bedModel"></textarea>
+  <label for="bed">
+    Please enter one or more slices' genome coordinates below in <a href="https://genome.ucsc.edu/FAQ/FAQformat.html#format1" target="_blank">BED</a> format. 
+    (<a data-ng-click="bamc.toggleExample()">{{bamc.exampleShowing ? 'Hide Example' : 'Show Example'}}</a>)
+  </label>
+  <div data-ng-if="bamc.exampleShowing">
+    <pre>7:140505783-140511649
+chr7:140505783-140511649
+1	150505782	150511648
+chr1	150505782	150511648</pre>
+  </div>
+  <textarea id="bed"
+            class="form-control"
+            data-ng-model="bedModel"
+            data-ng-keydown="bamc.allowTab($event)"
+            style="min-height: 200px; font-family:'Courier New', Courier, monospace"></textarea>
 </div>
 <div class="modal-footer">
   <span style="float: left">
     <!--or <button class="btn btn-warning" ng-click="bamc.cancel()" data-translate>Upload a BED file</button>-->
    </span>
- <button class="btn btn-warning" ng-click="bamc.submit()" data-translate>Submit</button>
+ <button class="btn" ng-click="bamc.closeModal()" data-translate>Cancel</button>
+ <button class="btn btn-primary"
+         data-ng-disabled="placeholderShowing"
+         data-ng-click="bamc.submit()"
+         data-translate>Download</button>
 </div>