Skip to content

Commit

Permalink
fix(#1054): optimize Long records (#1080)
Browse files Browse the repository at this point in the history
  • Loading branch information
@frascuchon
frascuchon committed Feb 2, 2022
1 parent 1c76d81 commit fdd797a
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 87 deletions.
85 changes: 73 additions & 12 deletions frontend/components/text-classifier/results/RecordInputs.vue
View file
Expand Up @@ -16,19 +16,31 @@
-->

<template>
<div>
<span v-for="(text, index) in data" :key="index" class="record">
<span :class="['record__item', isHtml(text) ? 'record--email' : '']">
<span class="record__key">{{ index }}:</span>
<LazyRecordExplain
v-if="explanation"
:predicted="predicted"
:query-text="queryText"
:explain="explanation[index]"
/>
<LazyRecordString v-else :query-text="queryText" :text="text" />
<div
ref="list"
:class="showFullRecord ? 'record__expanded' : 'record__collapsed'"
>
<div class="record__content">
<span v-for="(text, index) in data" :key="index" class="record">
<span :class="['record__item', isHtml(text) ? 'record--email' : '']">
<span class="record__key">{{ index }}:</span>
<LazyRecordExplain
v-if="explanation"
:predicted="predicted"
:query-text="queryText"
:explain="explanation[index]"
/>
<LazyRecordString v-else :query-text="queryText" :text="text" />
</span>
</span>
</span>
</div>
<a
href="#"
v-if="scrollHeight >= visibleRecordHeight"
class="record__button"
@click.prevent="showFullRecord = !showFullRecord"
>{{ !showFullRecord ? "Show full record" : "Show less" }}
</a>
</div>
</template>

Expand All @@ -51,10 +63,31 @@ export default {
default: () => undefined,
},
},
data: () => ({
showFullRecord: false,
scrollHeight: undefined,
}),
computed: {
visibleRecordHeight() {
return this.$mq === "lg" ? 550 : 400;
},
},
updated() {
this.calculateScrollHeight();
},
mounted() {
this.calculateScrollHeight();
},
methods: {
isHtml(record) {
return record.includes("<meta"); // TODO: improve
},
calculateScrollHeight() {
if (this.$refs.list) {
const padding = 2;
this.scrollHeight = this.$refs.list.clientHeight + padding;
}
},
},
};
</script>
Expand All @@ -66,6 +99,15 @@ export default {
.list__item--annotation-mode & {
padding-right: 200px;
}
&__collapsed {
.record__content {
max-height: 400px;
overflow: hidden;
@include media(">xxl") {
max-height: 550px;
}
}
}
&__key {
font-weight: 600;
margin-right: 0.5em;
Expand All @@ -78,6 +120,25 @@ export default {
@include font-size(16px);
line-height: 1.6em;
}
&__button {
display: inline-block;
border-radius: 5px;
padding: 0.5em;
transition: all 0.2s ease;
@include font-size(14px);
font-weight: 400;
background: none;
margin-top: 1.5em;
margin-bottom: 1em;
font-weight: 600;
text-decoration: none;
line-height: 1;
outline: none;
&:hover {
transition: all 0.2s ease;
background: palette(grey, bg);
}
}
&--email {
display: block;
::v-deep table {
Expand Down
120 changes: 45 additions & 75 deletions frontend/components/text2text/results/RecordStringText2Text.vue
View file
Expand Up @@ -16,36 +16,22 @@
-->

<template>
<span class="record__scroll__container">
<span
ref="list"
:class="[
'record__scroll--large',
!allowScroll ? 'record__scroll--prevent' : '',
]"
>
<re-button
v-if="scrollHeight >= 800"
:title="allowScroll ? 'prevent scroll' : 'allow scroll'"
class="record__scroll__button button-icon"
@click="allowScroll = !allowScroll"
>
<svgicon
:name="allowScroll ? 'unlock' : 'lock'"
width="15"
height="14"
></svgicon>
</re-button>

<span class="record__content" v-html="$highlightSearch(queryText, text)">
</span>
<div
ref="list"
:class="showFullRecord ? 'record__expanded' : 'record__collapsed'"
>
<span class="record__content" v-html="$highlightSearch(queryText, text)">
</span>
</span>
<a
href="#"
v-if="scrollHeight >= visibleRecordHeight"
class="record__button"
@click.prevent="showFullRecord = !showFullRecord"
>{{ !showFullRecord ? "Show full record" : "Show less" }}
</a>
</div>
</template>
<script>
import "assets/icons/lock";
import "assets/icons/unlock";
export default {
props: {
text: {
Expand All @@ -58,9 +44,14 @@ export default {
},
},
data: () => ({
allowScroll: false,
showFullRecord: false,
scrollHeight: undefined,
}),
computed: {
visibleRecordHeight() {
return this.$mq === "lg" ? 550 : 400;
},
},
updated() {
this.calculateScrollHeight();
},
Expand All @@ -87,62 +78,41 @@ export default {
</style>
<style lang="scss" scoped>
.record {
&__scroll {
display: block;
max-height: 300px;
overflow: auto;
border: 1px solid $line-smooth-color;
@include font-size(14px);
margin-bottom: 0.5em;
&--large {
display: block;
overflow: auto;
max-height: 800px;
margin-bottom: 0.5em;
::v-deep .record__scroll__button {
right: 0;
top: 0;
.svg-icon {
margin-left: auto !important;
}
}
}
&__container {
position: relative;
display: block;
}
&__button {
position: absolute;
top: 10px;
right: 10px;
display: block;
background: $lighter-color;
border: 1px solid $primary-color;
border-radius: 3px;
height: 25px;
width: 25px;
padding: 0;
display: flex;
align-items: center;
.svg-icon {
margin: auto;
fill: $primary-color;
}
}
&--prevent {
&__collapsed {
.record__content {
max-height: 400px;
overflow: hidden;
@include media(">xxl") {
max-height: 550px;
}
}
}
&__scroll--large {
position: relative;
width: calc(100% - 200px);
}
&__content {
word-break: break-word;
white-space: pre-line;
display: block;
color: palette(grey, medium);
width: calc(100% - 200px);
}
&__button {
display: inline-block;
border-radius: 5px;
padding: 0.5em;
transition: all 0.2s ease;
@include font-size(14px);
font-weight: 400;
background: none;
margin-top: 1.5em;
margin-bottom: 1em;
font-weight: 600;
text-decoration: none;
line-height: 1;
outline: none;
&:hover {
transition: all 0.2s ease;
background: palette(grey, bg);
}
}
}
</style>

0 comments on commit fdd797a

Please sign in to comment.