Work on bugs in the annotation editor.

- jquery-ui resources correctly included in build configuration - added hover states and correct alignment for the box/tag link line in the annotation editor - changed remove icon to bootstrap icon on boxes - corrected bindings in tag preview above spectrogram - new version of angular prevents binding to "_private" properties. the selected property on annotations was subsequently updated. - fixed a bug in drawabox, the currentMouseDragBoxId was not validly ignored when boxes where created via the api - fixed a unit conversion bug in the bawAnnotatonViewer directive - adjusted the annotation model to use the resource id as the __temporaryId__ if present (rather than using negative unique numbers
QutEcoacoustics · Nov 11, 2013 · 49abcce · 49abcce
1 parent b71d612
commit 49abcce
Show file tree

Hide file tree

Showing 13 changed files with 191 additions and 113 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -1,5 +1,6 @@
 var modRewrite = require('connect-modrewrite'),
-    path = require('path');
+    path = require('path'),
+    _ = require('lodash');
 
 
 module.exports = function (grunt) {
@@ -168,20 +169,47 @@ module.exports = function (grunt) {
                         src: [ '**' ],
                         dest: '<%= build_dir %>/assets/',
                         cwd: 'src/assets',
-                        expand: true
+                        expand: true,
+                        nonull: true
                     }
                 ]
             },
             build_vendor_assets: {
-                files: [
-                    {
-                        src: [ '<%= vendor_files.assets %>' ],
+                files: (function () {
+                    var result = [];
+
+                    var template = {
+                        //src: [ '<%= vendor_files.assets %>' ],
                         dest: '<%= build_dir %>/assets/',
                         cwd: '.',
                         expand: true,
-                        flatten: true
-                    }
-                ]
+                        flatten: true,
+                        nonull: true
+                    };
+
+                    userConfig.vendor_files.assets.forEach(function (value, index, source) {
+                        var kind = grunt.util.kindOf(value);
+                        var templateCopy = _.clone(template);
+                        if (kind === "string") {
+                            templateCopy.src = value;
+                            result.push(_.extend(template, base));
+                        }
+                        else {
+                            // here we assume it is a special specification func
+                            var transformedTemplate = value.call(null, templateCopy);
+
+                            if (!transformedTemplate) {
+                                throw "Copy:build_vendor_assets:transformTemplate: expected object, got " + transformedTemplate + " instead";
+                            }
+
+                            result.push(transformedTemplate);
+                        }
+                    });
+
+                    grunt.log.debug("Vendor assets compilation result:\n" + JSON.stringify(result, undefined, 2));
+
+                    return result;
+                })()
             },
             build_appjs: {
                 options: {
@@ -239,9 +267,12 @@ module.exports = function (grunt) {
              * together.
              */
             build_css: {
+                options: {
+                    banner: '<%= meta.banner %>'
+                },
+                nonull: true,
                 src: [
                     '<%= vendor_files.css %>',
-                    /*'<%= recess.build.dest %>',*/
                     '<%= build_dir %>/assets/styles/*.css'
                 ],
                 dest: '<%= sassDest %>'
@@ -254,6 +285,7 @@ module.exports = function (grunt) {
                 options: {
                     banner: '<%= meta.banner %>'
                 },
+                nonull: true,
                 src: [
                     '<%= vendor_files.js %>',
                     'module.prefix',

diff --git a/build.config.js b/build.config.js
@@ -105,9 +105,18 @@ module.exports = {
             'vendor/underscore/underscore.js'
         ],
         css: [
-            'vendor/hint.css/hint.css'
+            'vendor/hint.css/hint.css',
+            // TODO: remove bloat
+            'vendor/jquery-ui/themes/redmond/jquery-ui.css'
         ],
         assets: [
+            // jquery-ui is stoopid, special case
+            function(template) {
+                template.src = 'vendor/jquery-ui/themes/redmond/images/**';
+                template.dest += "styles/images/";
+
+                return template;
+            }
         ]
     }
 };
diff --git a/package.json b/package.json
@@ -29,7 +29,8 @@
         "grunt-bump": "0.0.6",
         "grunt-contrib-connect": "~0.5.0",
         "connect-modrewrite": "~0.5.7",
-        "grunt-sass": "~0.7.0"
+        "grunt-sass": "~0.7.0",
+        "lodash": "~2.2.1"
     },
     "private": true
 }
diff --git a/src/app/annotationViewer/_annotation_viewer.scss b/src/app/annotationViewer/_annotation_viewer.scss
@@ -33,7 +33,7 @@ baw-annotation-viewer {
       line-height: $standard-line-height;
 
       li {
-        border-bottom: red solid 1px;
+        border-bottom: $tagAlignmentLine solid 1px;
         margin-left: -4px;
         position: absolute;
         bottom:  -1px;
@@ -91,7 +91,7 @@ baw-annotation-viewer {
       position: absolute;
       top:  0;
       left: 0;
-      -webkit-transform: translatex(0px);
+      @include vendor-prefix(transform, translatex(0 px));
     }
   }
 
@@ -111,16 +111,18 @@ baw-annotation-viewer {
     overflow: visible;
 
     &:before {
-      @if $DEBUG == false {
-        visibility: collapse;
-      }
+//      @if $DEBUG == false {
+//        visibility: collapse;
+//      }
       border-left: $tagAlignmentLine solid 1px;
       height: 256px;
       position: relative;
       top: -257px;
       left: -1px;
       display: inline-block;
       content: "";
+      width: 100%;
+      visibility: hidden;
     }
 
     &[data-selected="true"] {
@@ -137,23 +139,22 @@ baw-annotation-viewer {
       & .close-icon {
         visibility: visible;
       }
+
+      &:before {
+        visibility: visible;
+      }
     }
   }
 
   & .close-icon {
     position: absolute;
     left: 3px;
-    top: 6px;
-    color: black;
-    font-weight: bold;
-    font-size: 12px;
-    font-family: sans-serif;
-    vertical-align: top;
+    top: 2px;
+
     cursor: pointer;
+    font-size: 8px;
 
-    &:before{
-      content: "x";
-    }
+    // icon glyph used from bootstrap
 
     visibility: hidden;
   }

diff --git a/src/app/annotationViewer/annotationViewer.js b/src/app/annotationViewer/annotationViewer.js
@@ -11,7 +11,19 @@ avModule.controller('AnnotationViewerCtrl', ['$scope', '$element', '$attrs', '$t
      * @param Tag
      */
         function AnnotationViewerCtrl($scope, $element, $attrs, $transclude, Tag) {
-        $scope.getTag = function getTag(id) {
+        $scope.getTag = function getTag(annotation) {
+
+            // which tag to show
+            // HACK: show first only
+            var taggings = annotation.taggings;
+
+            if (!taggings || taggings.length === 0) {
+                return "<no tags>";
+            }
+
+            var tag = taggings ? taggings[0] : undefined;
+            var id = tag ? tag.id : undefined;
+
             var tagObject = Tag.resolve(id);
             if (tagObject) {
                 return tagObject.text;

diff --git a/src/app/annotationViewer/annotationViewer.tpl.html b/src/app/annotationViewer/annotationViewer.tpl.html
@@ -5,9 +5,9 @@
         <div class="tag-preview">
             <ul>
                 <li ng-repeat="annotation in model.audioEvents" ng-style="{left: (positionLabel(annotation)) + 'px' }" >
-                <span ng-repeat="tag in annotation.audioEventTags">
-                    {{getTag(tag.tagId)}}{{!$last && ',' || ''}}
-                </span>
+                    <span>
+                      {{getTag(annotation)}}
+                    </span>
                 </li>
             </ul>
         </div>

diff --git a/src/app/listen/_listen.scss b/src/app/listen/_listen.scss
@@ -29,40 +29,56 @@
 }
 
 #timeline {
+  line-height: normal;
+  font-size: smaller;
 
   & * {
     border: solid black 1px;
 
   }
 
-  div {
-    clear: both;
-  }
-
-  > div:nth-child(1) {
-    float: left;
+  & div {
     clear: none;
-
-    div {
-      height: 25%;
-    }
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    text-align: center;
   }
 
-  > div:nth-child(2) {
-    overflow: hidden;
-    clear: none;
+  > div {
+    width: 100%;
+
+    > div {
+      width: 100%;
 
-    div {
-      text-align: center;
-      span {
-        display: inline-block;
-        width: 33.1%;
+      > div {
+        width: 33%;
 
-        margin:0;
+        > div {
+          width: 32%;
 
+          > div {
+            width: 32%;
+          }
+        }
       }
     }
   }
 
+  #audioRecording {
+    display: block;
+
+    & div:nth-child(1) {
+      width: 44%;
+    }
+    & div:nth-child(2) {
+      width: 11%;
+    }
+    & div:nth-child(3) {
+      width: 44%;
+    }
+  }
+
+
 
 }
diff --git a/src/app/listen/listen.js b/src/app/listen/listen.js
@@ -40,8 +40,8 @@ angular.module('bawApp.listen', [])
             }
 
             $scope.errorState =
-                !(baw.isNumber($routeParams.recordingId)
-                    && baw.parseInt($routeParams.recordingId) >= 0);
+                !(baw.isNumber($routeParams.recordingId) &&
+                    baw.parseInt($routeParams.recordingId) >= 0);
 
             if ($scope.errorState) {
                 console.warn("Invalid (or no) audio recording id specified in route... page rendering disabled");
@@ -160,7 +160,7 @@ angular.module('bawApp.listen', [])
                         // TODO : map tag's
 
                         $scope.model.audioEvents =
-                            tempEvents.map(baw.Annotation.new);
+                            tempEvents.map(baw.Annotation.create);
                     },
                     function audioEventQueryFailure() {
                         console.error("retrieval of audio events failed");
@@ -281,12 +281,12 @@ angular.module('bawApp.listen', [])
                     //$scope.model.selectedAudioEvents.length = 0;
 
                     angular.forEach($scope.model.audioEvents, function (value, key) {
-                        value._selected = false;
+                        value.selected = false;
                     });
                 };
 
                 $scope.selectedFilter = function (audioEvent) {
-                    return audioEvent._selected;
+                    return audioEvent.selected;
                 };
 
                 $scope.select2Settings = {
@@ -339,7 +339,7 @@ angular.module('bawApp.listen', [])
                     //var a = $scope.model.selectedAudioEvents[0];
                     //TODO: BROKEN!
                     var a = $scope.model.audioEvents.filter(function (value) {
-                        return value._selected === true;
+                        return value.selected === true;
                     })[0];
 
                     // prep tags