Merge pull request #3641 from ProjectSidewalk/3580-new-validate-tooltips

3580 new validate tooltips

public/javascripts/SVLabel/src/SVLabel/canvas/ContextMenu.js

@@ -409,7 +409,7 @@ function ContextMenu (uiContextMenu) {
                         $tagHolder.find("button[id=" + buttonIndex + "]").tooltip("destroy");
 
                         // Add tooltip with tag example if we have an example image to show.
-                        var imageUrl = `/assets/javascripts/SVLabel/img/label_tag_popups/${tag.tag_id}.png`;
+                        var imageUrl = `/assets/images/examples/tags/${tag.tag_id}.png`;
                         util.getImage(imageUrl).then(img => {
                             // Convert the first letter of tag text to uppercase and get keyboard shortcut character.
                             const underlineClassOffset = 15;
@@ -463,45 +463,48 @@ function ContextMenu (uiContextMenu) {
      * @private
      */
     function _setSeverityTooltips(labelType) {
-        var sevTooltipOne = $('#severity-one');
-        var sevTooltipThree = $('#severity-three');
-        var sevTooltipFive = $('#severity-five');
-        var sevImgUrlOne = `/assets/javascripts/SVLabel/img/severity_popups/${labelType}_Severity1.png`
-        var sevImgUrlThree = `/assets/javascripts/SVLabel/img/severity_popups/${labelType}_Severity3.png`
-        var sevImgUrlFive = `/assets/javascripts/SVLabel/img/severity_popups/${labelType}_Severity5.png`
-
-        // Remove old tooltips.
-        sevTooltipOne.tooltip('destroy');
-        sevTooltipThree.tooltip('destroy');
-        sevTooltipFive.tooltip('destroy');
+        // Files are named as severity 1/2/3 because we have begun transitioning to a 3-point scale.
+        var sevImgUrlOne = `/assets/images/examples/severity/${labelType}_Severity1.png`
+        var sevImgUrlThree = `/assets/images/examples/severity/${labelType}_Severity2.png`
+        var sevImgUrlFive = `/assets/images/examples/severity/${labelType}_Severity3.png`
 
         // Add severity tooltips for the current label type if we have images for them.
         util.getImage(sevImgUrlOne).then(img => {
-            var tooltipHeader = i18next.t('center-ui.context-menu.severity-example', { n: 1 });
+            var tooltipHeader = i18next.t('common:severity-example-tooltip-1');
             var tooltipFooter = `<i>${i18next.t('center-ui.context-menu.severity-shortcuts')}</i>`
-            sevTooltipOne.tooltip({
+            $('#severity-one').tooltip({
                 placement: "top", html: true, delay: {"show": 300, "hide": 10},
                 title: `${tooltipHeader}<br/><img src=${img} height="110"/><br/>${tooltipFooter}`
             });
         });
         util.getImage(sevImgUrlThree).then(img => {
-            var tooltipHeader = i18next.t('center-ui.context-menu.severity-example', { n: 3 });
+            var tooltipHeader = i18next.t('common:severity-example-tooltip-2');
             var tooltipFooter = `<i>${i18next.t('center-ui.context-menu.severity-shortcuts')}</i>`
-            sevTooltipThree.tooltip({
+            $('#severity-three').tooltip({
                 placement: "top", html: true, delay: {"show": 300, "hide": 10},
                 title: `${tooltipHeader}<br/><img src=${img} height="110"/><br/>${tooltipFooter}`
             });
         });
         util.getImage(sevImgUrlFive).then(img => {
-            var tooltipHeader = i18next.t('center-ui.context-menu.severity-example', { n: 5 });
+            var tooltipHeader = i18next.t('common:severity-example-tooltip-3');
             var tooltipFooter = `<i>${i18next.t('center-ui.context-menu.severity-shortcuts')}</i>`
-            sevTooltipFive.tooltip({
+            $('#severity-five').tooltip({
                 placement: "top", html: true, delay: {"show": 300, "hide": 10},
                 title: `${tooltipHeader}<br/><img src=${img} height="110"/><br/>${tooltipFooter}`
             });
         });
     }
 
+    /**
+     * Remove severity tooltips from the context menu, preparing to replace them for a new label type.
+     * @private
+     */
+    function _removePrevSeverityTooltips() {
+        $('#severity-one').tooltip('destroy');
+        $('#severity-three').tooltip('destroy');
+        $('#severity-five').tooltip('destroy');
+    }
+
     /**
      * Show the context menu.
      * @param targetLabel the label whose context menu should be shown.
@@ -592,7 +595,10 @@ function ContextMenu (uiContextMenu) {
         }
         if (labelType !== 'Occlusion' && labelType !== 'Signal') {
             self.updateRadioButtonImages();
-            _setSeverityTooltips(labelType);
+            _removePrevSeverityTooltips();
+            if (labelType !== 'Other') {
+                _setSeverityTooltips(labelType);
+            }
         }
     }
 

public/javascripts/SVValidate/src/Main.js

@@ -21,30 +21,6 @@ function Main (param) {
     svv.cityName = param.cityName;
 
     function _initUI() {
-        // Maps label types to label names.
-        svv.labelTypeNames = {
-            1: i18next.t('common:curb-ramp'),
-            2: i18next.t('common:no-curb-ramp'),
-            3: i18next.t('common:obstacle'),
-            4: i18next.t('common:surface-problem'),
-            7: i18next.t('common:no-sidewalk'),
-            9: i18next.t('common:crosswalk'),
-            10: i18next.t('common:signal')
-        };
-        svv.labelTypes = {
-            1: 'CurbRamp',
-            2: 'NoCurbRamp',
-            3: 'Obstacle',
-            4: 'SurfaceProblem',
-            7: 'NoSidewalk',
-            9: 'Crosswalk',
-            10: 'Signal'
-        };
-        svv.validationOptions = {
-            1: 'Agree',
-            2: 'Disagree',
-            3: 'Unsure'
-        };
         if (svv.newValidateBeta) {
             svv.tagsByLabelType = {
                 'CurbRamp': param.tagList.filter(t => t.label_type_id === 1),
@@ -286,6 +262,7 @@ function Main (param) {
         debug: false
     }, function(err, t) {
         if(param.init !== "noInit") {
+            defineValidateConstants();
             _initUI();
 
             if (param.hasNextMission) {

public/javascripts/SVValidate/src/menu/RightMenu.js

@@ -57,6 +57,16 @@ function RightMenu(menuUI) {
                 $tagSelect[0].selectize.clear();
                 $tagSelect[0].selectize.removeOption(value);
                 _renderTags();
+            },
+            render: {
+                option: function(item, escape) {
+                    // Add an example image tooltip to the tag.
+                    const translatedTagName = i18next.t('common:tag.' + item.tag_name);
+                    let $tagDiv = $(`<div class="option">${escape(translatedTagName)}</div>`);
+                    const tooltipText = `"${translatedTagName}" example`
+                    _addTooltip($tagDiv, tooltipText, `/assets/images/examples/tags/${item.tag_id}.png`);
+                    return $tagDiv[0];
+                }
             }
         });
 
@@ -116,47 +126,37 @@ function RightMenu(menuUI) {
             menuUI.severityMenu.css('display', 'none');
             menuUI.optionalCommentSection.css('display', 'none');
             menuUI.optionalCommentTextBox.val('');
-
-            // Update the text on each disagree button.
             menuUI.noMenu.css('display', 'none');
+            menuUI.unsureMenu.css('display', 'none');
             $disagreeReasonButtons.removeClass('chosen');
-            const labelType = util.camelToKebab(label.getAuditProperty('labelType'));
-            for (const reasonButton of $disagreeReasonButtons) {
-                const reasonText = i18next.t(`right-ui.disagree-reason.${labelType}.${$(reasonButton).attr('id')}`, { defaultValue: null });
-                if (reasonText) {
-                    $(reasonButton).text(reasonText);
-                    $(reasonButton).css('display', 'flex');
-                } else {
-                    $(reasonButton).css('display', 'none');
-                }
-            }
+            $unsureReasonButtons.removeClass('chosen');
             menuUI.disagreeReasonTextBox.removeClass('chosen');
+            menuUI.unsureReasonTextBox.removeClass('chosen');
             menuUI.disagreeReasonTextBox.val('');
+            menuUI.unsureReasonTextBox.val('');
 
-            // Update the text on each unsure button.
-            menuUI.unsureMenu.css('display', 'none');
-            $unsureReasonButtons.removeClass('chosen');
-            for (const reasonButton of $unsureReasonButtons) {
-                const reasonText = i18next.t(`right-ui.unsure-reason.${labelType}.${$(reasonButton).attr('id')}`, { defaultValue: null });
-                if (reasonText) {
-                    $(reasonButton).text(reasonText);
-                    $(reasonButton).css('display', 'flex');
+            // Update the text and tooltips on each disagree and unsure reason buttons.
+            const labelType = util.camelToKebab(label.getAuditProperty('labelType'));
+            for (const reasonButton of $disagreeReasonButtons.add($unsureReasonButtons)) {
+                const $reasonButton = $(reasonButton);
+                const buttonInfo = svv.reasonButtonInfo[labelType][$reasonButton.attr('id')];
+                if (buttonInfo) {
+                    $reasonButton.text(buttonInfo.buttonText);
+
+                    // Remove any old tooltip (from a previous label type) and add a new tooltip.
+                    $reasonButton.tooltip('destroy');
+                    if (buttonInfo.tooltipImage) {
+                        util.getImage(buttonInfo.tooltipImage).then(img => {
+                            _addTooltip($reasonButton, buttonInfo.tooltipText, img);
+                        });
+                    } else {
+                        _addTooltip($reasonButton, buttonInfo.tooltipText);
+                    }
+                    $reasonButton.css('display', 'flex');
                 } else {
-                    $(reasonButton).css('display', 'none');
-                }
-
-                // Add tooltip if one exists.
-                const tooltipText = i18next.t(`right-ui.unsure-reason.${labelType}.${$(reasonButton).attr('id')}-tooltip`, { defaultValue: null });
-                if (tooltipText) {
-                    $(reasonButton).tooltip(({
-                        placement: 'top',
-                        delay: {"show": 500, "hide": 10},
-                        title: tooltipText
-                    })).tooltip("show").tooltip("hide");
+                    $reasonButton.css('display', 'none');
                 }
             }
-            menuUI.unsureReasonTextBox.removeClass('chosen');
-            menuUI.unsureReasonTextBox.val('');
             menuUI.submitButton.prop('disabled', true);
         } else {
             // This is a validation that they are going back to, so update all the views to match what they had before.
@@ -196,10 +196,10 @@ function RightMenu(menuUI) {
         menuUI.unsureButton.removeClass('chosen');
         _renderTags();
         menuUI.tagsMenu.css('display', 'block');
-        _renderSeverity();
         let currLabelType = svv.panorama.getCurrentLabel().getAuditProperty('labelType');
         if (currLabelType !== 'Signal') {
             // Pedestrian Signal label type doesn't have severity ratings.
+            _renderSeverity();
             menuUI.severityMenu.css('display', 'block');
         }
         menuUI.optionalCommentSection.css('display', 'block');
@@ -214,6 +214,7 @@ function RightMenu(menuUI) {
         menuUI.unsureButton.removeClass('chosen');
         menuUI.tagsMenu.css('display', 'none');
         menuUI.severityMenu.css('display', 'none');
+        menuUI.optionalCommentSection.css('display', 'none');
         menuUI.noMenu.css('display', 'block');
         menuUI.unsureMenu.css('display', 'none');
         menuUI.submitButton.prop('disabled', false);
@@ -225,11 +226,29 @@ function RightMenu(menuUI) {
         menuUI.unsureButton.addClass('chosen');
         menuUI.tagsMenu.css('display', 'none');
         menuUI.severityMenu.css('display', 'none');
+        menuUI.optionalCommentSection.css('display', 'none');
         menuUI.noMenu.css('display', 'none');
         menuUI.unsureMenu.css('display', 'block');
         menuUI.submitButton.prop('disabled', false);
     }
 
+    /**
+     * Adds a jquery tooltip to the given element with the given text and image (if given).
+     * @param $elem Element to add the tooltip to, as jquery wrapped object.
+     * @param tooltipText Text to display in the tooltip.
+     * @param img Optional image to display in the tooltip.
+     * @private
+     */
+    function _addTooltip($elem, tooltipText, img) {
+        const tooltipHtml = img ? `${tooltipText}<br/><img src="${img}" height="140"/>` : tooltipText;
+        $elem.tooltip(({
+            placement: 'top',
+            html: true,
+            delay: { show: 500, hide: 10 },
+            title: tooltipHtml
+        })).tooltip('show').tooltip('hide');
+    }
+
 
     // TAG SECTION.
     function _removeTag(e, label) {
@@ -250,11 +269,17 @@ function RightMenu(menuUI) {
             let $tagDiv = $('.current-tag.template').clone().removeClass('template');
 
             // Update the tag name.
-            $tagDiv.children('.tag-name').text(i18next.t('common:tag.' + tag));
+            const translatedTagName = i18next.t('common:tag.' + tag);
+            $tagDiv.children('.tag-name').text(translatedTagName);
 
             // Add the removal onclick function.
             $tagDiv.children('.remove-tag-x').click(e => _removeTag(e, label));
 
+            // Add an example image tooltip to the tag.
+            const tagId = allTagOptions.find(t => t.tag_name === tag).tag_id;
+            const tooltipText = `"${translatedTagName}" example`
+            _addTooltip($tagDiv, tooltipText, `/assets/images/examples/tags/${tagId}.png`);
+
             // Add to current list of tags, and remove from options for new tags to add.
             menuUI.currentTags.append($tagDiv);
             allTagOptions = allTagOptions.filter(t => t.tag_name !== tag);
@@ -275,7 +300,18 @@ function RightMenu(menuUI) {
     // SEVERITY SECTION.
     function _renderSeverity() {
         let label = svv.panorama.getCurrentLabel();
-        let severity = label.getProperty('newSeverity');
+        const severity = label.getProperty('newSeverity');
+        const labelType = svv.panorama.getCurrentLabel().getAuditProperty('labelType');
+
+        // Add example image tooltips to the severity buttons after removing old ones (in case label type changed).
+        for (const severityButton of menuUI.severityMenu.find('.severity-level')) {
+            const severityIcon = $(severityButton.querySelector('.severity-icon'));
+            const severity = severityButton.dataset.severity;
+            const tooltipText = i18next.t(`common:severity-example-tooltip-${severity}`);
+            const tooltipImage = `/assets/images/examples/severity/${labelType}_Severity${severity}.png`;
+            severityIcon.tooltip('destroy');
+            _addTooltip(severityIcon, tooltipText, tooltipImage);
+        }
 
         // Set the correct severity button as selected.
         menuUI.severityMenu.find('.severity-level').removeClass('selected');