diff --git a/frontend/components/commons/header/filters/FilterScore.vue b/frontend/components/commons/header/filters/FilterScore.vue
index e86ed5e403..0ba05b10b6 100644
--- a/frontend/components/commons/header/filters/FilterScore.vue
+++ b/frontend/components/commons/header/filters/FilterScore.vue
@@ -112,7 +112,7 @@ export default {
mark: "area",
config: {
mark: {
- color: "#D9D7E4",
+ color: "#0508d9",
binSpacing: 0,
},
@@ -197,15 +197,16 @@ export default {
background: $lighter-color;
width: auto;
height: 45px;
- border: 1px solid $line-smooth-color;
align-items: center;
padding: 0 1em;
transition: all 0.2s ease;
border-radius: $border-radius;
- &:hover,
- &:focus {
+ &:not(.expanded) {
+ border: 1px solid $line-smooth-color;
+ }
+ &:not(.expanded):hover,
+ &:not(.expanded):focus {
border: 1px solid $primary-color;
- background: $lighter-color;
transition: border 0.2s ease, background 0.2s ease;
}
&:after {
@@ -219,7 +220,7 @@ export default {
transform: translateY(-50%) rotate(133deg);
transition: all 1.5s ease;
position: absolute;
- right: 2.1em;
+ right: 1.5em;
top: 50%;
pointer-events: none;
}
@@ -229,8 +230,6 @@ export default {
}
.score-content {
width: 100%;
- padding-right: 0.8em;
- padding-left: 0.8em;
text-align: center;
}
.range__container {
@@ -258,20 +257,16 @@ export default {
&.expanded {
margin-top: 10px;
position: absolute;
- top: 0;
- background: $lighter-color;
+ top: 40px;
+ right: 0;
+ background: $bg;
padding: 20px 20px 10px 20px;
- min-height: auto;
- height: auto;
- min-height: auto;
- transition: height 0.1s ease-in-out;
+ width: 270px;
overflow: visible;
border-radius: $border-radius;
z-index: 4;
- width: 400px;
- max-width: 100vw;
- min-height: 210px;
- border: 1px solid $primary-color;
+ box-shadow: $shadow;
+ min-height: 270px;
pointer-events: all;
&:after {
content: none;
@@ -313,9 +308,16 @@ export default {
margin-right: 1em;
cursor: pointer;
}
+ &__item {
+ &--open {
+ background: $bg;
+ border-color: $bg !important;
+ }
+ }
&__row {
display: flex;
align-items: center;
+ position: relative;
.filter__item--score:not(.expanded) {
margin-right: 0;
margin-left: auto;
diff --git a/frontend/components/core/ReRange.vue b/frontend/components/core/ReRange.vue
index e7d3a49220..20dcee11b1 100644
--- a/frontend/components/core/ReRange.vue
+++ b/frontend/components/core/ReRange.vue
@@ -1400,7 +1400,7 @@ export default {
.vue-slider-process {
.filter & {
- background: $line-smooth-color;
+ background: $secondary-color;
border-radius: 3px;
}
}
diff --git a/frontend/components/token-classifier/results/TextSpanStatic.vue b/frontend/components/token-classifier/results/TextSpanStatic.vue
index 9e2aa9a777..1f857d3bde 100755
--- a/frontend/components/token-classifier/results/TextSpanStatic.vue
+++ b/frontend/components/token-classifier/results/TextSpanStatic.vue
@@ -170,6 +170,15 @@ $hue: 360;
&.prediction ::v-deep .highlight__content {
padding-bottom: 3px;
border-bottom: 5px solid $rcolor;
+ position: relative;
+ &:after {
+ content: "";
+ border-top: 1px solid darken($rcolor, 50%);
+ position: absolute;
+ top: 26px;
+ left: 0;
+ right: 0;
+ }
}
&.annotation ::v-deep .highlight__tooltip:after {
border-color: $rcolor transparent transparent transparent;
diff --git a/frontend/components/token-classifier/results/TextSpanTooltip.vue b/frontend/components/token-classifier/results/TextSpanTooltip.vue
index dbd99d1798..ebb4116619 100644
--- a/frontend/components/token-classifier/results/TextSpanTooltip.vue
+++ b/frontend/components/token-classifier/results/TextSpanTooltip.vue
@@ -5,7 +5,14 @@
{{
span.origin === "prediction" ? "pred." : "annot."
}}
- {{ span.entity.label }}
+ {{ span.entity.label }}
+ {{ score | percent(0, 0) }}
@@ -19,6 +26,11 @@ export default {
required: true,
},
},
+ computed: {
+ score() {
+ return this.span.entity.score;
+ },
+ },
};
@@ -45,7 +57,8 @@ export default {
margin-top: 0.5em;
}
& > span {
- display: block;
+ display: flex;
+ align-items: center;
}
&__container {
position: absolute;
@@ -65,6 +78,11 @@ export default {
@include font-size(12px);
font-weight: normal;
}
+ &__score {
+ @include font-size(14px);
+ font-weight: 400;
+ margin-left: 0.5em;
+ }
}
&__tooltip:after {
margin: auto;
diff --git a/frontend/plugins/filters.js b/frontend/plugins/filters.js
index 9e2693f952..e7001b7922 100644
--- a/frontend/plugins/filters.js
+++ b/frontend/plugins/filters.js
@@ -12,11 +12,11 @@ Vue.filter("formatNumber", function (value) {
return new Intl.NumberFormat(locale.length ? locale[0] : "en").format(value);
});
-Vue.filter("percent", function (value) {
+Vue.filter("percent", function (value, min, max) {
const formatter = new Intl.NumberFormat(locale.length ? locale[0] : "en", {
style: "percent",
- minimumFractionDigits: 2,
- maximumFractionDigits: 3,
+ minimumFractionDigits: min !== undefined ? min : 2,
+ maximumFractionDigits: max !== undefined ? max : 3,
});
return formatter.format(value);
});
diff --git a/frontend/specs/components/token-classification/results/__snapshots__/TextSpanTooltip.spec.js.snap b/frontend/specs/components/token-classification/results/__snapshots__/TextSpanTooltip.spec.js.snap
index bb722e74ae..9d54edf477 100644
--- a/frontend/specs/components/token-classification/results/__snapshots__/TextSpanTooltip.spec.js.snap
+++ b/frontend/specs/components/token-classification/results/__snapshots__/TextSpanTooltip.spec.js.snap
@@ -1,3 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`TextSpanTooltip renders properly 1`] = `annot. Arreglo `;
+exports[`TextSpanTooltip renders properly 1`] = `
+annot. Arreglo
+
+`;