Merge pull request #2954 from ProjectSidewalk/2840-gray-severity-levels

#2840: Updated gallery cards for label types that do not support severity ratings

conf/evolutions/default/158.sql

@@ -0,0 +1,6 @@
+# --- !Ups
+-- Remove severity for Pedestrian Signal labels.
+UPDATE label SET severity = NULL WHERE label_type_id = 10;
+
+# --- !Downs
+

public/javascripts/Gallery/css/cards.css

@@ -120,6 +120,10 @@ with respect to the image holder. This allows the validation menu to be placed o
     padding-right: .25vw;
 }
 
+.no-severity-header {
+    opacity: 60%;
+}
+
 .label-severity-content {
     display: flex;
     flex-direction: row;
@@ -181,6 +185,14 @@ with respect to the image holder. This allows the validation menu to be placed o
     opacity: 50%;
 }
 
+.modal-no-severity {
+    filter: opacity(0.2);
+}
+
+.modal-severity-content {
+    width: 50%;
+}
+
 .severity-circle {
     color: white;
     border: 1px solid #2d2a3f;
@@ -192,6 +204,10 @@ with respect to the image holder. This allows the validation menu to be placed o
     font-size: 0.9vw;
 }
 
+.no-severity-circle {
+    opacity: 40%;
+}
+
 #current-severity {
     border: 2px solid #2d2a3f;
     background-color: #2d2a3f;

public/javascripts/Gallery/src/cards/Card.js

@@ -118,12 +118,10 @@ function Card (params, imageUrl, modal) {
         cardInfo.appendChild(cardData);
 
         // Create the div to store the severity of the label.
-        if (getLabelType() !== 'Occlusion' && getLabelType() !== 'Signal') {
-            let cardSeverity = document.createElement('div');
-            cardSeverity.className = 'card-severity';
-            let severityHolder = new SeverityDisplay(cardSeverity, properties.severity);
-            cardData.appendChild(cardSeverity);
-        }
+        let cardSeverity = document.createElement('div');
+        cardSeverity.className = 'card-severity';
+        new SeverityDisplay(cardSeverity, properties.severity, getLabelType());
+        cardData.appendChild(cardSeverity);
 
         // Create the div to store the tags related to a card. Tags won't be populated until card is added to the DOM.
         let cardTags = document.createElement('div');

public/javascripts/Gallery/src/displays/SeverityDisplay.js

@@ -7,11 +7,17 @@
  * @param {Boolean} isModal a toggle to determine if this SeverityDisplay is in a modal, or in a card
  * @returns {SeverityDisplay} the generated object
  */
-function SeverityDisplay(container, severity, isModal=false) {
+function SeverityDisplay(container, severity, labelType, isModal=false) {
     let self = this;
     self.severity = severity;
     self.severityContainer = container;
 
+    // List of label types where severity ratings are not supported.
+    // If more unsupported label types are made, add them here!
+    const unsupportedLabels = ['Occlusion', 'Signal'];
+
+    let unsupported = unsupportedLabels.includes(labelType);
+
     let circles = [];
     function _init() {
         // Set the different classes and ids depending on whether the severity display is in a Modal or in a card.
@@ -26,36 +32,62 @@ function SeverityDisplay(container, severity, isModal=false) {
         if (isModal) {
             // Add bold weight. Find better way to do this.
             title.classList.add('modal-severity-header');
+            // Centers tooltip.
+            holder.classList.add('modal-severity-content')
         }
 
         title.innerText = `${i18next.t("severity")}`;
+        // If no severity rating, gray out title.
+        if (unsupported || severity == null) {
+            title.classList.add('no-severity-header')
+        }
         container.append(title);
 
-        // Creates all of the circles for the severities.
+        // Highlight the correct severity.
+        // We do so by darkening a number of circles from the left equal to the severity. For example, if the severity
+        // is 3, we will darken the left 3 circles.
         for (let i = 1; i <= 5; i++) {
             let severityCircle = isModal ? new Image() : document.createElement('div');
             severityCircle.className = severityCircleClass;
-            if (isModal) {
-                // Set the src of our smiley icon to default black-outlined, white-filled smileys.
-                severityCircle.src = `/assets/javascripts/SVLabel/img/misc/SmileyRating_${i}_gallery.png`;
-            }
 
-            circles.push(severityCircle);
-        }
-
-        // Highlight the correct severity.
-        // We do so by darkening a number of circles from the left equal to the severity. For example, if the severity
-        // is 3, we will darken the left 3 circles.
-        // TODO: rename these once confirmed. also, we can probably move this to the upper loop.
-        if (severity) {
-            for (let i = 0; i < severity; i++) {
+            if (unsupported || severity == null) {
+                // Create grayed out empty circles/smileys.
+                if (isModal) {
+                    severityCircle.src = `/assets/javascripts/SVLabel/img/misc/SmileyRating_${i}_gallery.png`;
+                    severityCircle.classList.add('modal-no-severity');
+                } else {
+                    severityCircle.classList.add(severityCircleClass, 'no-severity-circle');
+                }
+                circles.push(severityCircle);
+            } else {
+                // Create severity circle elements.
                 if (isModal) {
-                    // If we are dealing with the modal, we want to change the png to the inverted smiley.
-                    $(circles[i]).attr('src', `/assets/javascripts/SVLabel/img/misc/SmileyRating_${i + 1}_inverted.png`)
+                    if (i <= severity) { // Filled in smileys.
+                        severityCircle.src = `/assets/javascripts/SVLabel/img/misc/SmileyRating_${i}_inverted.png`;
+                    } else { // Empty smileys.
+                        severityCircle.src = `/assets/javascripts/SVLabel/img/misc/SmileyRating_${i}_gallery.png`;
+                    }
                 } else {
-                    $(circles[i]).attr('id', selectedCircleID);
+                    if (i <= severity) { // Fills in circles.
+                        severityCircle.id = selectedCircleID
+                    }
                 }
             }
+            circles.push(severityCircle);
+        }
+
+        if (severity == null) {
+            // Add tooltip if no severity level.
+            holder.setAttribute('data-toggle', 'tooltip');
+            holder.setAttribute('data-placement', 'top');
+
+            // Change tooltip message depending on if the label is unsupported or user did not add severity rating.
+            if (unsupported) {
+                holder.setAttribute('title', `${i18next.t("unsupported")}`);
+            } else {
+                holder.setAttribute('title', `${i18next.t("no-severity")}`);
+            }
+            $(holder).tooltip('hide');
         }
 
         // Add all of the severity circles to the DOM.

public/javascripts/Gallery/src/modal/Modal.js

@@ -138,7 +138,7 @@ function Modal(uiModal) {
         self.timestamps.append(panoTimestampData);
 
         // Add severity and tag display to the modal.
-        new SeverityDisplay(self.severity, properties.severity, true);
+        new SeverityDisplay(self.severity, properties.severity, properties.label_type, true);
         new TagDisplay(self.tags, properties.tags, true);
 
         // Add the information about the temporary property to the Modal.

public/locales/en/common.json

@@ -28,6 +28,8 @@
     "submit": "Submit comment"
   },
   "severity": "Severity",
+  "no-severity": "A severity rating was not provided for this label",
+  "unsupported": "This label type does not have meaningful severity levels",
   "tags": "Tags",
   "temporary": "Temporary",
   "description": "Description",

public/locales/es/common.json

@@ -28,6 +28,8 @@
     "submit": "Enviar comentario"
   },
   "severity": "Calificación ",
+  "no-severity": "No se proporcionó una calificación de gravedad para esta etiqueta",
+  "unsupported": "Este tipo de etiqueta no tiene niveles de gravedad significativos",
   "tags": "Etiquitas ",
   "temporary": "Temporal",
   "description": "Descripción",

public/locales/nl/common.json

@@ -28,6 +28,8 @@
     "submit": "Voeg opmerking toe"
   },
   "severity": "Ernst",
+  "no-severity": "Er is geen ernstclassificatie opgegeven voor dit label",
+  "unsupported": "Dit labeltype heeft geen betekenisvolle ernstniveaus",
   "tags": "Tags",
   "temporary": "Tijdelijk",
   "description": "Beschrijving",