feat: Update collapse/expand record text for Text Classifier and Text2Text

CHANGELOG.md

@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - The shortcuts improvement for labels [#2339](https://github.com/argilla-io/argilla/pull/2339) have been moved to the vuex ORM in dataset settings feature [#2444](https://github.com/argilla-io/argilla/commit/eb37c3bcff3ad253481d6a10f8abb093384f2dcb)
 - Update "Define a labeling schema" section in docs.
 - The record inputs are sorted alphabetically in UI by default. [#2581](https://github.com/argilla-io/argilla/pull/2581)
+- The record inputs are fully visible when pagination size is one and the height of collapsed area size is bigger for laptop screen. [#2587](https://github.com/argilla-io/argilla/pull/2587/files)
 
 ### Fixes
 

frontend/components/text-classifier/results/RecordInputs.vue

@@ -18,7 +18,7 @@
 <template>
   <div
     ref="list"
-    :class="showFullRecord ? 'record__expanded' : 'record__collapsed'"
+    :class="isRecordTextExpanded ? 'record__expanded' : 'record__collapsed'"
   >
     <div :class="!explanation ? 'record__content' : ''">
       <span v-for="(text, index) in data" :key="index" class="record">
@@ -34,7 +34,7 @@
       </span>
     </div>
     <base-button
-      v-if="scrollHeight >= visibleRecordHeight"
+      v-if="toggleCollapseRecordText"
       class="secondary text record__show-more"
       @click.prevent="showFullRecord = !showFullRecord"
       >{{ !showFullRecord ? "Full record" : "Show less" }}
@@ -49,6 +49,10 @@ export default {
       type: Object,
       required: true,
     },
+    disabledCollapsableText: {
+      type: Boolean,
+      required: true,
+    },
   },
   data: () => ({
     showFullRecord: false,
@@ -65,7 +69,16 @@ export default {
       return this.record.explanation;
     },
     visibleRecordHeight() {
-      return this.$mq === "lg" ? 468 : 174;
+      return this.$mq === "lg" ? 468 : 360;
+    },
+    toggleCollapseRecordText() {
+      return (
+        !this.disabledCollapsableText &&
+        this.scrollHeight >= this.visibleRecordHeight
+      );
+    },
+    isRecordTextExpanded() {
+      return this.showFullRecord || this.disabledCollapsableText;
     },
   },
   updated() {
@@ -80,8 +93,7 @@ export default {
     },
     calculateScrollHeight() {
       if (this.$refs.list) {
-        const padding = 2;
-        this.scrollHeight = this.$refs.list.clientHeight + padding;
+        this.scrollHeight = this.$refs.list.clientHeight;
       }
     },
   },
@@ -94,7 +106,7 @@ export default {
   display: block;
   &__collapsed {
     .record__content {
-      max-height: 174px;
+      max-height: 360px;
       overflow: hidden;
       @include media(">xxl") {
         max-height: 468px;

frontend/components/text-classifier/results/RecordTextClassification.vue

@@ -21,7 +21,10 @@
       <div class="record--image-area" v-if="isRecordContainsImage">
         <img :src="metadata._image_url" alt="image of the record" />
       </div>
-      <record-inputs :record="record" />
+      <record-inputs
+        :record="record"
+        :disabled-collapsable-text="paginationSizeIsOne"
+      />
       <classifier-annotation-area
         v-if="interactionsEnabled"
         :inputLabels="listOfTexts"
@@ -121,6 +124,9 @@ export default {
           this.isMultiLabel)
       );
     },
+    paginationSizeIsOne() {
+      return this.viewSettings?.pagination?.size === 1;
+    },
     paginationSize() {
       return this.viewSettings?.pagination?.size;
     },

frontend/components/text2text/results/RecordStringText2Text.vue

@@ -18,12 +18,12 @@
 <template>
   <div
     ref="list"
-    :class="showFullRecord ? 'record__expanded' : 'record__collapsed'"
+    :class="isRecordTextExpanded ? 'record__expanded' : 'record__collapsed'"
   >
     <span class="record__content" v-html="$highlightKeywords(text, keywords)">
     </span>
     <base-button
-      v-if="scrollHeight >= visibleRecordHeight"
+      v-if="toggleCollapseRecordText"
       class="secondary text record__show-more"
       @click.prevent="showFullRecord = !showFullRecord"
       >{{ !showFullRecord ? "Full record" : "Show less" }}
@@ -37,6 +37,10 @@ export default {
       type: Object,
       required: true,
     },
+    disabledCollapsableText: {
+      type: Boolean,
+      required: true,
+    },
   },
   data: () => ({
     showFullRecord: false,
@@ -50,7 +54,16 @@ export default {
       return this.record.search_keywords;
     },
     visibleRecordHeight() {
-      return this.$mq === "lg" ? 570 : 260;
+      return this.$mq === "lg" ? 570 : 310;
+    },
+    isRecordTextExpanded() {
+      return this.showFullRecord || this.disabledCollapsableText;
+    },
+    toggleCollapseRecordText() {
+      return (
+        !this.disabledCollapsableText &&
+        this.scrollHeight >= this.visibleRecordHeight
+      );
     },
   },
   updated() {
@@ -62,8 +75,7 @@ export default {
   methods: {
     calculateScrollHeight() {
       if (this.$refs.list) {
-        const padding = 2;
-        this.scrollHeight = this.$refs.list.clientHeight + padding;
+        this.scrollHeight = this.$refs.list.clientHeight;
       }
     },
   },
@@ -73,7 +85,7 @@ export default {
 .record {
   &__collapsed {
     .record__content {
-      max-height: 260px;
+      max-height: 310px;
       overflow: hidden;
       @include media(">xxl") {
         max-height: 570px;

frontend/components/text2text/results/RecordText2Text.vue

@@ -17,7 +17,10 @@
 
 <template>
   <div class="record">
-    <record-string-text-2-text :record="record" />
+    <record-string-text-2-text
+      :record="record"
+      :disabled-collapsable-text="paginationSizeIsOne"
+    />
     <div>
       <Text2TextList
         ref="list"
@@ -68,6 +71,12 @@ export default {
     annotationEnabled() {
       return this.viewSettings.viewMode === "annotate";
     },
+    paginationSizeIsOne() {
+      return this.viewSettings?.pagination?.size === 1;
+    },
+    paginationSize() {
+      return this.viewSettings?.pagination?.size;
+    },
     predictionSentences() {
       return this.record.prediction?.sentences ?? [];
     },

frontend/database/modules/datasets.js

@@ -791,7 +791,7 @@ const actions = {
       await ObservationDataset.api().delete(url, {
         delete: [workspace, datasetName],
       });
-      message = `${datasetName} have been deleted`;
+      message = `${datasetName} has been deleted`;
       typeOfNotification = "success";
     } catch ({ response }) {
       let { status } = response;