The shape filter has been expanded (#325)

* The shape filter has been expanded
* Help has been improved
* Width and height for polyshapes

cvat/apps/engine/static/engine/js/shapeFilter.js

@@ -18,7 +18,7 @@ class FilterModel {
     }
 
     _convertShape(shape) {
-        return {
+        let converted = {
             id: shape.model.id,
             label: shape.model.label,
             type: shape.model.type.split("_")[1],
@@ -28,6 +28,16 @@ class FilterModel {
             lock: shape.model.lock
         };
 
+        if (shape.model.type.split('_')[1] === 'box') {
+            converted.width = shape.interpolation.position.xbr - shape.interpolation.position.xtl;
+            converted.height = shape.interpolation.position.ybr - shape.interpolation.position.ytl;
+        } else {
+            converted.width = shape.interpolation.position.width;
+            converted.height = shape.interpolation.position.height;
+        }
+
+        return converted;
+
         // We replace all dashes due to defiant.js can't work with it
         function convertAttributes(attributes) {
             let converted = {};
@@ -122,13 +132,14 @@ class FilterView {
         let initSubmitList = () => {
             this._filterSubmitList.empty();
             for (let value of predefinedValues) {
-                this._filterSubmitList.append(`<option value=${value}> ${value} </option>`);
+                value = value.replace(/'/g, '"');
+                this._filterSubmitList.append(`<option value='${value}'> ${value} </option>`);
             }
         }
         initSubmitList();
 
         this._filterString.on("change", (e) => {
-            let value = $.trim(e.target.value);
+            let value = $.trim(e.target.value).replace(/'/g, '"');
             if (this._controller.updateFilter(value, false)) {
                 this._filterString.css("color", "green");
                 if (!predefinedValues.includes(value)) {

cvat/apps/engine/static/engine/js/shapes.js

@@ -925,6 +925,7 @@ class PolyShapeModel extends ShapeModel {
         for (let point of points) {
             point.x = Math.clamp(point.x, 0, window.cvat.player.geometry.frameWidth);
             point.y = Math.clamp(point.y, 0, window.cvat.player.geometry.frameHeight);
+
             box.xtl = Math.min(box.xtl, point.x);
             box.ytl = Math.min(box.ytl, point.y);
             box.xbr = Math.max(box.xbr, point.x);
@@ -933,6 +934,8 @@ class PolyShapeModel extends ShapeModel {
         position.points = PolyShapeModel.convertNumberArrayToString(points);
 
         let pos = {
+            height: box.ybr - box.ytl,
+            width: box.xbr - box.xtl,
             occluded: position.occluded,
             points: position.points,
             z_order: position.z_order,
@@ -1055,6 +1058,24 @@ class PolyShapeModel extends ShapeModel {
     }
 
     static importPositions(positions) {
+        function getBBRect(points) {
+            const box = {
+                xtl: Number.MAX_SAFE_INTEGER,
+                ytl: Number.MAX_SAFE_INTEGER,
+                xbr: Number.MIN_SAFE_INTEGER,
+                ybr: Number.MIN_SAFE_INTEGER,
+            };
+
+            for (let point of PolyShapeModel.convertStringToNumberArray(points)) {
+                box.xtl = Math.min(box.xtl, point.x);
+                box.ytl = Math.min(box.ytl, point.y);
+                box.xbr = Math.max(box.xbr, point.x);
+                box.ybr = Math.max(box.ybr, point.y);
+            }
+
+            return [box.xbr - box.xtl, box.ybr - box.ytl];
+        }
+
         let imported = {};
         if (this._type.startsWith('interpolation')) {
             let last_key_in_prev_segm = null;
@@ -1064,7 +1085,10 @@ class PolyShapeModel extends ShapeModel {
             for (let pos of positions) {
                 let frame = pos.frame;
                 if (frame >= segm_start && frame <= segm_stop) {
+                    const [width, height] = getBBRect(pos.points);
                     imported[pos.frame] = {
+                        width: width,
+                        height: height,
                         points: pos.points,
                         occluded: pos.occluded,
                         outside: pos.outside,
@@ -1080,7 +1104,10 @@ class PolyShapeModel extends ShapeModel {
             }
 
             if (last_key_in_prev_segm && !(segm_start in imported)) {
+                const [width, height] = getBBRect(last_key_in_prev_segm.points);
                 imported[segm_start] = {
+                    width: width,
+                    height: height,
                     points: last_key_in_prev_segm.points,
                     occluded: last_key_in_prev_segm.occluded,
                     outside: last_key_in_prev_segm.outside,
@@ -1091,7 +1118,10 @@ class PolyShapeModel extends ShapeModel {
             return imported;
         }
 
+        const [width, height] = getBBRect(positions.points);
         imported[this._frame] = {
+            width: width,
+            height: height,
             points: positions.points,
             occluded: positions.occluded,
             z_order: positions.z_order,

cvat/apps/engine/templates/engine/annotation.html

@@ -196,7 +196,7 @@
     <div id="helpWindow" class="modal hidden">
         <div id="helpWindowContent" class="modal-content">
             <div style="width: 100%; height: 90%; overflow-y: auto;">
-                <div>
+                <div class="selectable">
                     <label class="h1 semiBold"> Shortkeys: </label> <br>
                     <table class="regular" id="shortkeyHelpTable"> </table>
                     <label class="h1 semiBold"> <br> Hints: <br> </label>
@@ -220,6 +220,8 @@
                         person[attr/race="asian"] | car[attr/model="bmw"] - asians and BMW cars <br>
                         face[attr/glass="sunglass" or attr/glass="no"] - faces with sunglass or without glass <br>
                         *[attr/*="__undefined__"] - any tracks with any unlabeled attributes <br>
+                        *[width<300 or height<300] - shapes with height or width less than 300px <br>
+                        person[width>300 and height<200] - person shapes with width > 300px and height < 200px <br>
                      </label>
                 </div>
             </div>