Merge branch 'develop' into feat/span-questions-support

CHANGELOG.md

@@ -18,13 +18,15 @@ These are the section headers that we use:
 
 ### Added
 
+- If you expand the labels of a `single or multi` label Question, the state is maintained during the entire annotation process. ([#4630](https://github.com/argilla-io/argilla/pull/4630))
 - Added support for span questions in the Python SDK. ([#4617](https://github.com/argilla-io/argilla/pull/4617))
 - Added support for spans values in suggestions and responses. ([#4623](https://github.com/argilla-io/argilla/pull/4623))
 
 ### Fixed
 
 - Fixed prepare for training when passing `RankingValueSchema` instances to suggestions. ([#4628](https://github.com/argilla-io/argilla/pull/4628))
 - Fixed parsing ranking values in suggestions from HF datasets. ([#4629](https://github.com/argilla-io/argilla/pull/4629))
+- Fixed reading description from API response payload. ([#4632](https://github.com/argilla-io/argilla/pull/4632))
 
 ## [1.25.0](https://github.com/argilla-io/argilla/compare/v1.24.0...v1.25.0)
 
@@ -43,7 +45,7 @@ These are the section headers that we use:
 ### Fixed
 
 - Fixed FloatMetadataProperty: value is not a valid float ([#4570](https://github.com/argilla-io/argilla/pull/4605))
-- Fixed redirect to `user-settings` instead of 404 `user_settings`  ([#4609](https://github.com/argilla-io/argilla/pull/4609))
+- Fixed redirect to `user-settings` instead of 404 `user_settings` ([#4609](https://github.com/argilla-io/argilla/pull/4609))
 
 ## [1.24.0](https://github.com/argilla-io/argilla/compare/v1.23.0...v1.24.0)
 

docs/_source/getting_started/installation/deployments/docker_compose.md

@@ -14,7 +14,7 @@ Then, create a folder:
 mkdir argilla && cd argilla
 ```
 
-and launch the docker-contained web app with the following command:
+and launch the docker-contained web app with the following command, after having set a value for the environment variable `ARGILLA_AUTH_SECRET_KEY`, which can be generated with `openssl rand -hex 32`:
 
 ```bash
 wget -O docker-compose.yaml https://raw.githubusercontent.com/argilla-io/argilla/main/docker/docker-compose.yaml && docker-compose up -d

frontend/components/feedback-task/container/questions/form/multi-label/MultiLabel.component.vue

@@ -5,11 +5,11 @@
     <LabelSelectionComponent
       :componentId="question.id"
       :suggestions="question.suggestion?.suggestedAnswer"
-      v-model="question.answer.values"
       :maxOptionsToShowBeforeCollapse="maxOptionsToShowBeforeCollapse"
       :multiple="true"
       :isFocused="isFocused"
       :showShortcutsHelper="showShortcutsHelper"
+      v-model="question.answer.values"
       @on-focus="onFocus"
     />
   </div>

frontend/components/feedback-task/container/questions/form/shared-components/label-selection/LabelSelection.component.vue

@@ -94,6 +94,9 @@ const OPTIONS_THRESHOLD_TO_ENABLE_SEARCH = 3;
 import suggestionIcon from "@/static/icons/suggestion.svg";
 import "assets/icons/chevron-down";
 import "assets/icons/chevron-up";
+
+import { useLabelSelectionViewModel } from "./useLabelSelectionViewModel";
+
 export default {
   name: "LabelSelectionComponent",
   props: {
@@ -136,7 +139,6 @@ export default {
   data() {
     return {
       searchInput: "",
-      isExpanded: false,
       timer: null,
       keyCode: "",
       suggestionIcon,
@@ -314,6 +316,9 @@ export default {
       return this.suggestions?.includes(value) || false;
     },
   },
+  setup(props) {
+    return useLabelSelectionViewModel(props);
+  },
 };
 </script>
 

frontend/components/feedback-task/container/questions/form/shared-components/label-selection/labelSelection.component.spec.js

@@ -15,6 +15,7 @@ beforeEach(() => {
 
 afterEach(() => {
   wrapper.destroy();
+  window.questionSettings["componentId"].isExpandedLabelQuestions = false;
 });
 
 describe("LabelSelectionComponent in Single Selection mode", () => {

frontend/components/feedback-task/container/questions/form/shared-components/label-selection/useLabelSelectionViewModel.ts

@@ -0,0 +1,41 @@
+import { watch, ref } from "vue-demi";
+
+declare global {
+  interface Window {
+    questionSettings: Record<string, { isExpandedLabelQuestions: boolean }>;
+  }
+}
+
+const getQuestionSetting = (id: string) => {
+  if (!window.questionSettings) {
+    window.questionSettings = {};
+  }
+
+  if (!window.questionSettings[id]) {
+    window.questionSettings[id] = {
+      isExpandedLabelQuestions: false,
+    };
+  }
+
+  return window.questionSettings[id].isExpandedLabelQuestions;
+};
+
+const setQuestionSetting = (id: string, value: boolean) => {
+  window.questionSettings[id].isExpandedLabelQuestions = value;
+};
+
+export const useLabelSelectionViewModel = ({
+  componentId,
+}: {
+  componentId: string;
+}) => {
+  const isExpanded = ref(getQuestionSetting(componentId));
+
+  watch(isExpanded, (value) => {
+    setQuestionSetting(componentId, value);
+  });
+
+  return {
+    isExpanded,
+  };
+};

frontend/components/feedback-task/container/questions/form/single-label/SingleLabel.component.vue

@@ -3,13 +3,13 @@
     <QuestionHeaderComponent :question="question" />
 
     <LabelSelectionComponent
-      v-model="question.answer.values"
       :componentId="question.id"
       :suggestions="question.suggestion?.suggestedAnswer"
       :maxOptionsToShowBeforeCollapse="maxOptionsToShowBeforeCollapse"
       :multiple="false"
       :isFocused="isFocused"
       :showShortcutsHelper="showShortcutsHelper"
+      v-model="question.answer.values"
       @on-focus="onFocus"
       @on-selected="onSelected"
     />

frontend/components/feedback-task/container/useRecordFeedbackTaskViewModel.ts

@@ -12,14 +12,14 @@ export const useRecordFeedbackTaskViewModel = ({
   recordCriteria: RecordCriteria;
 }) => {
   const getDatasetVectorsUseCase = useResolve(GetDatasetVectorsUseCase);
-  const getRecords = useResolve(LoadRecordsToAnnotateUseCase);
+  const loadRecordsUseCase = useResolve(LoadRecordsToAnnotateUseCase);
 
   const datasetVectors = ref<DatasetVector[]>([]);
   const { state: records } = useRecords();
 
   const loadRecords = async (criteria: RecordCriteria) => {
     try {
-      await getRecords.load(criteria);
+      await loadRecordsUseCase.load(criteria);
     } catch (err) {
       criteria.reset();
     }
@@ -29,7 +29,7 @@ export const useRecordFeedbackTaskViewModel = ({
     let isNextRecordExist = false;
 
     try {
-      isNextRecordExist = await getRecords.paginate(criteria);
+      isNextRecordExist = await loadRecordsUseCase.paginate(criteria);
     } catch (err) {
       criteria.reset();
     }

frontend/v1/domain/entities/page/PageCriteria.ts

@@ -14,9 +14,11 @@ interface ServerPagination {
 
 export class PageCriteria extends Criteria {
   public readonly options = [10, 25, 50, 100];
+
   public mode: "focus" | "bulk" = "focus";
   public client: BrowserPagination;
   private _server: ServerPagination;
+
   constructor() {
     super();
 
@@ -56,6 +58,12 @@ export class PageCriteria extends Criteria {
     return `${this.client.page}~${this.client.many}`;
   }
 
+  get buffer(): number {
+    if (this.isBulkMode) return this.client.many;
+
+    return this.client.many / 2;
+  }
+
   withValue({ client, mode }: PageCriteria) {
     this.client = {
       page: client.page,

frontend/v1/domain/entities/record/RecordCriteria.ts

@@ -171,6 +171,14 @@ export class RecordCriteria implements IRecordCriteria {
     return this.areDifferent(this, this.committed);
   }
 
+  get isPaginatingForward() {
+    return this.page.client.page > this.previous?.page.client.page;
+  }
+
+  get isPaginatingBackward() {
+    return this.page.client.page < this.previous?.page.client.page;
+  }
+
   complete(
     page: string,
     status: RecordStatus,

frontend/v1/domain/entities/record/Records.ts

@@ -23,6 +23,14 @@ export class Records {
     return this.records.find((record) => record.page === criteria.client.page);
   }
 
+  hasNecessaryBuffering(criteria: PageCriteria) {
+    const bufferedRecords = this.records.filter(
+      (record) => record.page > criteria.client.page
+    );
+
+    return bufferedRecords.length > criteria.buffer;
+  }
+
   getRecordsOn(criteria: PageCriteria): Record[] {
     return this.records
       .filter((record) => record.page >= criteria.client.page)
@@ -106,11 +114,11 @@ export class Records {
     this.records = this.records.sort((r1, r2) => (r1.page < r2.page ? -1 : 1));
   }
 
-  private get lastRecord() {
+  get lastRecord() {
     return this.records[this.records.length - 1];
   }
 
-  private get firstRecord() {
+  get firstRecord() {
     return this.records[0];
   }
 

frontend/v1/domain/usecases/get-records-by-criteria-use-case.ts

@@ -21,7 +21,7 @@ export class GetRecordsByCriteriaUseCase {
   ) {}
 
   public async execute(criteria: RecordCriteria): Promise<Records> {
-    const { datasetId } = criteria;
+    const { datasetId, queuePage } = criteria;
     const savedRecords = this.recordsStorage.get();
     savedRecords.synchronizeQueuePagination(criteria);
 
@@ -34,7 +34,7 @@ export class GetRecordsByCriteriaUseCase {
 
     const recordsToAnnotate = recordsFromBackend.records.map(
       (record, index) => {
-        const recordPage = index + criteria.queuePage;
+        const recordPage = index + queuePage;
 
         const fields = fieldsFromBackend
           .filter((f) => record.fields[f.name])

frontend/v1/domain/usecases/load-records-to-annotate-use-case.ts

@@ -3,6 +3,8 @@ import { IRecordStorage } from "../services/IRecordStorage";
 import { GetRecordsByCriteriaUseCase } from "./get-records-by-criteria-use-case";
 
 export class LoadRecordsToAnnotateUseCase {
+  private isBuffering = false;
+
   constructor(
     private readonly getRecords: GetRecordsByCriteriaUseCase,
     private readonly recordsStorage: IRecordStorage
@@ -33,19 +35,20 @@ export class LoadRecordsToAnnotateUseCase {
     this.recordsStorage.save(newRecords);
   }
 
-  async paginate(criteria: RecordCriteria): Promise<boolean> {
-    const { page } = criteria;
+  async paginate(criteria: RecordCriteria) {
+    const { page, isFilteringBySimilarity } = criteria;
+
     const records = this.recordsStorage.get();
     let isNextRecordExist = records.existsRecordOn(page);
 
-    if (!criteria.isFilteringBySimilarity) {
-      if (!isNextRecordExist) {
-        const newRecords = await this.getRecords.execute(criteria);
+    if (!isFilteringBySimilarity && !isNextRecordExist) {
+      const newRecords = await this.getRecords.execute(criteria);
 
-        records.append(newRecords);
+      records.append(newRecords);
 
-        isNextRecordExist = records.existsRecordOn(page);
-      }
+      isNextRecordExist = records.existsRecordOn(page);
+
+      this.recordsStorage.save(records);
     }
 
     if (isNextRecordExist) {
@@ -56,8 +59,46 @@ export class LoadRecordsToAnnotateUseCase {
       criteria.commit();
     }
 
-    this.recordsStorage.save(records);
+    this.loadBuffer(criteria);
 
     return isNextRecordExist;
   }
+
+  private loadBuffer(criteria: RecordCriteria) {
+    const { page, isFilteringBySimilarity, isPaginatingBackward } = criteria;
+
+    if (isFilteringBySimilarity || isPaginatingBackward) return;
+
+    const records = this.recordsStorage.get();
+
+    if (!records.hasNecessaryBuffering(page)) {
+      this.loadBufferedRecords(criteria);
+    }
+  }
+
+  private async loadBufferedRecords(criteria: RecordCriteria) {
+    if (this.isBuffering) return;
+
+    const { isPaginatingForward } = criteria;
+
+    const records = this.recordsStorage.get();
+    const newCriteria = criteria.clone();
+
+    try {
+      this.isBuffering = true;
+
+      if (isPaginatingForward) {
+        newCriteria.page.goTo(records.lastRecord.page + 1);
+      }
+
+      const newRecords = await this.getRecords.execute(newCriteria);
+
+      records.append(newRecords);
+
+      this.recordsStorage.save(records);
+    } catch {
+    } finally {
+      this.isBuffering = false;
+    }
+  }
 }

src/argilla/client/feedback/schemas/remote/questions.py

@@ -46,6 +46,7 @@ def from_api(cls, payload: "FeedbackQuestionModel") -> "RemoteTextQuestion":
             id=payload.id,
             name=payload.name,
             title=payload.title,
+            description=payload.description,
             required=payload.required,
             use_markdown=payload.settings["use_markdown"],
         )
@@ -67,6 +68,7 @@ def from_api(cls, payload: "FeedbackQuestionModel") -> "RemoteRatingQuestion":
             id=payload.id,
             name=payload.name,
             title=payload.title,
+            description=payload.description,
             required=payload.required,
             values=[option["value"] for option in payload.settings["options"]],
         )
@@ -96,6 +98,7 @@ def from_api(cls, payload: "FeedbackQuestionModel") -> "RemoteLabelQuestion":
             id=payload.id,
             name=payload.name,
             title=payload.title,
+            description=payload.description,
             required=payload.required,
             labels=_parse_options_from_api(payload),
             visible_labels=payload.settings["visible_options"],
@@ -119,6 +122,7 @@ def from_api(cls, payload: "FeedbackQuestionModel") -> "RemoteMultiLabelQuestion
             id=payload.id,
             name=payload.name,
             title=payload.title,
+            description=payload.description,
             required=payload.required,
             labels=_parse_options_from_api(payload),
             visible_labels=payload.settings["visible_options"],
@@ -141,6 +145,7 @@ def from_api(cls, payload: "FeedbackQuestionModel") -> "RemoteRankingQuestion":
             id=payload.id,
             name=payload.name,
             title=payload.title,
+            description=payload.description,
             required=payload.required,
             values=_parse_options_from_api(payload),
         )