From f1053eb7e51e6ad058cc8b9da9b976e633a07acf Mon Sep 17 00:00:00 2001 From: LeireA Date: Thu, 7 Apr 2022 10:53:42 +0200 Subject: [PATCH] feat(#1379): show prediction score in NER closes #1379 This PR includes score in prediction tooltip, improves score filter styles and prediction highlighting in text --- .../commons/header/filters/FilterScore.vue | 38 ++++++++++--------- frontend/components/core/ReRange.vue | 2 +- .../results/TextSpanStatic.vue | 9 +++++ .../results/TextSpanTooltip.vue | 22 ++++++++++- frontend/plugins/filters.js | 6 +-- .../TextSpanTooltip.spec.js.snap | 5 ++- 6 files changed, 57 insertions(+), 25 deletions(-) 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 + +`;