From 5701b4073442050f62c32d03118ec992f7a5b7a7 Mon Sep 17 00:00:00 2001 From: Mariia Ganza Date: Tue, 28 Sep 2021 12:39:51 +0300 Subject: [PATCH 1/2] change label text and add a tooltip --- .../autoFind/contentScripts/highlight.css | 55 +++++++++++++++---- .../autoFind/contentScripts/highlight.js | 44 ++++++++++++--- 2 files changed, 80 insertions(+), 19 deletions(-) diff --git a/src/js/blocks/autoFind/contentScripts/highlight.css b/src/js/blocks/autoFind/contentScripts/highlight.css index 7b5290f..a5c65d4 100644 --- a/src/js/blocks/autoFind/contentScripts/highlight.css +++ b/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,10 +293,10 @@ 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; @@ -277,8 +304,12 @@ } @keyframes cirlce { - 0% { opacity: 0; } - 100% { opacity: 1; } + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } .jdn-change-element-name-modal__form-input { @@ -286,13 +317,13 @@ 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; diff --git a/src/js/blocks/autoFind/contentScripts/highlight.js b/src/js/blocks/autoFind/contentScripts/highlight.js index af5467f..2af157e 100644 --- a/src/js/blocks/autoFind/contentScripts/highlight.js +++ b/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 = `
${jdi_class_name} ${predicted_probability}
`; - Object.assign(div.style, divDefaultStyle(element.getBoundingClientRect())); + const tooltip = document.createElement('div'); + tooltip.className = 'jdn-tooltip'; + tooltip.innerHTML = ` +

Name: ${predicted_label}

+

Type: ${jdi_class_name}

+

Prediction accuracy: ${predictedProbabilityPercent}%

`; + const labelContainer = document.createElement('div'); + const label = document.createElement('span'); + label.className = 'jdn-label'; + label.innerHTML = `${predictedProbabilityPercent}%, ${jdi_class_name}`; + 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", From 3038d23a7f8f939b4cc729c0630ed2d81366da30 Mon Sep 17 00:00:00 2001 From: Mariia Ganza Date: Tue, 28 Sep 2021 12:46:21 +0300 Subject: [PATCH 2/2] update version --- manifest.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/manifest.json b/manifest.json index 48447a1..64ab76e 100644 --- a/manifest.json +++ b/manifest.json @@ -3,7 +3,7 @@ "name": "JDN", "description": "", "devtools_page": "index.html", - "version": "3.0.53", + "version": "3.0.54", "permissions": [ "activeTab", "tabs", diff --git a/package.json b/package.json index 0c12c72..8dcfd0c 100644 --- a/package.json +++ b/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",