Merge pull request #362 from jdi-testing/issue-281

Протестировать отображение имени #281

Author: MariiaNebesnova

manifest.json

@@ -3,7 +3,7 @@
   "name": "JDN",
   "description": "",
   "devtools_page": "index.html",
-  "version": "3.0.53",
+  "version": "3.0.54",
   "permissions": [
     "activeTab",
     "tabs",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jdi-react-extension",
-  "version": "3.0.53",
+  "version": "3.0.54",
   "description": "jdi react extension",
   "scripts": {
     "start": "npm run webpack",

src/js/blocks/autoFind/contentScripts/highlight.css

@@ -40,11 +40,11 @@
 
 .cm_container li:hover {
   background-color: #212228;
-  color: #1582D8;
+  color: #1582d8;
 }
 
 .cm_container li .cm_container_warning-option {
-  color: #D82C15;
+  color: #d82c15;
 }
 
 .cm_container li .cm_icon_span {
@@ -157,6 +157,33 @@
   white-space: nowrap;
 }
 
+.jdn-tooltip {
+  position: absolute;
+  display: inline-block;
+  background-color: rgba(0, 0, 0, 0.8);
+  border-radius: 4px;
+  color: #fff;
+  z-index: 5500;
+  font-size: 10px;
+  font-family: "Noto Sans", sans-serif;
+  line-height: 16px;
+  padding: 10px 8px 15px 10px;
+  margin-top: 15px;
+}
+
+.jdn-tooltip b {
+  font-weight: bold;
+}
+
+.jdn-tooltip::after {
+  content: "";
+  position: absolute;
+  right: 10px;
+  top: -18px;
+  border: 9px solid transparent;
+  border-bottom: 10px solid rgba(0, 0, 0, 0.8);
+}
+
 .jdn-primary {
   background-color: rgba(21, 130, 216, 0.4);
   border: 1px solid rgba(21, 130, 216, 1);
@@ -216,7 +243,7 @@
 }
 
 .jdn-change-element-name-modal__close-link:hover {
-  color: #1582D8;
+  color: #1582d8;
 }
 
 .jdn-change-element-name-modal__title {
@@ -238,7 +265,7 @@
   right: 66px;
   transform: rotate(-45deg);
   animation-name: appearance;
-  animation-duration: 0.25s; 
+  animation-duration: 0.25s;
   animation-delay: 0.5s;
   animation-iteration-count: 1;
   animation-fill-mode: forwards;
@@ -253,8 +280,8 @@
   100% {
     width: 15px;
     height: 8px;
-    border-bottom: 1px solid #1582D8;
-    border-left: 1px solid #1582D8;
+    border-bottom: 1px solid #1582d8;
+    border-left: 1px solid #1582d8;
   }
 }
 
@@ -266,33 +293,37 @@
   width: 30px;
   height: 30px;
   border-radius: 50%;
-  border: 1px solid #1582D8;
+  border: 1px solid #1582d8;
   opacity: 0;
   animation-name: cirlce;
-  animation-duration: 0.25s; 
+  animation-duration: 0.25s;
   animation-delay: 1s;
   animation-iteration-count: 1;
   animation-fill-mode: forwards;
   animation-play-state: running;
 }
 
 @keyframes cirlce {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 .jdn-change-element-name-modal__form-input {
   width: 180px;
   padding: 3px 5px 4px;
   margin: 0 5px 0 0;
   color: #000;
-  border: 1px solid #1582D8;
+  border: 1px solid #1582d8;
   border-radius: 3px;
 }
 
 .jdn-change-element-name-modal__form-button {
   padding: 5px 10px;
-  background: #1582D8;
+  background: #1582d8;
   color: #fff;
   border: none;
   border-radius: 3px;

src/js/blocks/autoFind/contentScripts/highlight.js

@@ -34,19 +34,24 @@ export const highlightOnPage = () => {
     if (div) div.remove();
   };
 
+  const createLabelText = (element) => {
+    const predictedProbabilityPercent = Math.round(element.predicted_probability * 100);
+    return `${predictedProbabilityPercent}%, ${element.jdi_class_name}`;
+  };
+
   const assignType = (element) => {
     const div = document.getElementById(element.element_id);
-    div.querySelector(".jdn-class").textContent = element.jdi_class_name;
+    div.querySelector(".jdn-class").textContent = createLabelText(element);
   };
 
   const changeElementName = (element) => {
     const div = document.getElementById(element.element_id);
-    div.querySelector(".jdn-class").textContent = element.jdi_class_name;
+    div.querySelector(".jdn-class").textContent = createLabelText(element);
   };
 
   const drawRectangle = (
     element,
-    { element_id, jdi_class_name, predicted_probability }
+    { element_id, jdi_class_name, predicted_probability, predicted_label }
   ) => {
     const divDefaultStyle = (rect) => {
       const { top, left, height, width } = rect || {};
@@ -59,14 +64,39 @@ export const highlightOnPage = () => {
         }
         : {};
     };
-
+    const tooltipDefaultStyle = (rect) => {
+      const {right, top, height, width} = rect;
+      return rect ? {
+        right: `calc(100% - ${right + window.pageXOffset - width/2}px)`,
+        top: `${top + window.pageYOffset + height}px`,
+      } : {};
+    };
+    const predictedProbabilityPercent = Math.round(predicted_probability * 100);
     const div = document.createElement("div");
     div.id = element_id;
-    div.className = "jdn-highlight jdn-primary"
+    div.className = "jdn-highlight jdn-primary";
     div.setAttribute("jdn-highlight", true);
-    div.innerHTML = `<div><span class="jdn-label"><span class="jdn-class">${jdi_class_name}</span> ${predicted_probability}</span></div>`;
-    Object.assign(div.style, divDefaultStyle(element.getBoundingClientRect()));
+    const tooltip = document.createElement('div');
+    tooltip.className = 'jdn-tooltip';
+    tooltip.innerHTML = `
+      <p><b>Name:</b> ${predicted_label}</p>
+      <p><b>Type:</b> ${jdi_class_name}</p>
+      <p><b>Prediction accuracy:</b> ${predictedProbabilityPercent}%</p>`;
+    const labelContainer = document.createElement('div');
+    const label = document.createElement('span');
+    label.className = 'jdn-label';
+    label.innerHTML = `<span class="jdn-class">${predictedProbabilityPercent}%, ${jdi_class_name}</span>`;
+    label.addEventListener('mouseover', () => {
+      Object.assign(tooltip.style, tooltipDefaultStyle(label.getBoundingClientRect()));
+      document.body.appendChild(tooltip);
+    });
+    label.addEventListener('mouseout', () => {
+      document.body.removeChild(tooltip);
+    });
 
+    Object.assign(div.style, divDefaultStyle(element.getBoundingClientRect()));
+    labelContainer.appendChild(label);
+    div.insertAdjacentElement('afterBegin', labelContainer);
     div.onclick = () => {
       chrome.runtime.sendMessage({
         message: "TOGGLE_ELEMENT",