Merge branch 'develop' into docs/update-settings

argilla-io · Jul 19, 2024 · 9256521 · 9256521
2 parents 380b280 + e640924
commit 9256521
Show file tree

Hide file tree

Showing 137 changed files with 3,720 additions and 3,237 deletions.
diff --git a/.github/workflows/argilla.yml b/.github/workflows/argilla.yml
@@ -21,7 +21,7 @@ jobs:
   build:
     services:
       argilla-quickstart:
-        image: argilla/argilla-quickstart:main
+        image: argilladev/argilla-quickstart:develop
         ports:
           - 6900:6900
         env:

diff --git a/argilla-frontend/components/base/base-collpasable-panel/BaseCollapsablePanel.vue b/argilla-frontend/components/base/base-collpasable-panel/BaseCollapsablePanel.vue
@@ -7,13 +7,18 @@
     ]"
   >
     <BaseButton class="panel__header" @click="toggleExpand(isExpanded)">
-      <slot name="panelHeader" />
-      <svgicon
-        class="panel__header__icon"
-        :name="isExpanded ? 'chevron-down' : 'chevron-right'"
-        width="12"
-        height="12"
-      />
+      <div class="panel__header__container">
+        <slot v-if="!isExpanded" name="panelHeader" />
+        <div v-else style="width: 100%; text-align: left">
+          <slot name="panelHeaderExpanded" />
+        </div>
+        <svgicon
+          class="panel__header__icon"
+          :name="isExpanded ? 'chevron-down' : 'chevron-right'"
+          width="12"
+          height="12"
+        />
+      </div>
     </BaseButton>
 
     <div class="panel__content" v-if="isExpanded">
@@ -53,6 +58,13 @@ export default {
   border-top: 1px solid $black-10;
 
   &__header {
+    &__container {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
     width: 100%;
     display: flex;
     justify-content: space-between;

diff --git a/argilla-frontend/components/base/base-progress/BaseLinearProgress.vue b/argilla-frontend/components/base/base-progress/BaseLinearProgress.vue
@@ -67,7 +67,7 @@ export default {
   },
   methods: {
     getPercentage(value) {
-      return ((value / this.progressMax) * 100).toFixed();
+      return ((value / this.progressMax) * 100).toFixed(2);
     },
     getTrianglePosition(range) {
       if (!range) return;
@@ -86,10 +86,10 @@ export default {
 </script>
 
 <styles lang="scss" scoped>
-$progressHeight: 12px;
+$progressHeight: 14px;
 $tooltipBackgroundColor: palette(grey, 600);
 $tooltipTriangleSize: 5px;
-$borderRadius: 10px;
+$borderRadius: 3px;
 
 .progress {
   $this: &;
@@ -103,12 +103,14 @@ $borderRadius: 10px;
     height: $progressHeight;
     border-radius: $borderRadius;
     overflow: hidden;
+    background: palette(grey, 600);
+    box-shadow: 0 0 0 1px palette(white);
   }
   &__bar {
     position: relative;
     height: 100%;
     border-radius: $borderRadius;
-    margin: 0 -4px;
+    margin: 0 -1px;
     box-shadow: 0 0 0 1px palette(white);
     z-index: 1;
     &:after {

diff --git a/argilla-frontend/components/base/base-progress/BaseLinearProgressSkeleton.vue b/argilla-frontend/components/base/base-progress/BaseLinearProgressSkeleton.vue
@@ -9,9 +9,9 @@ export default {};
 </script>
 
 <styles lang="scss" scoped>
-$progressHeight: 12px;
+$progressHeight: 14px;
 $progressBackgroundColor: #f2f2f2;
-$borderRadius: 10px;
+$borderRadius: 3px;
 
 .progress__wrapper {
   height: $progressHeight;

diff --git a/argilla-frontend/components/base/base-resizable/HorizontalResizable.vue b/argilla-frontend/components/base/base-resizable/HorizontalResizable.vue
@@ -15,6 +15,7 @@
       @toggle-expand="toggleExpand"
     >
       <slot name="downHeader" slot="panelHeader" />
+      <slot name="downHeaderExpanded" slot="panelHeaderExpanded" />
       <slot name="downContent" slot="panelContent" />
     </BaseCollapsablePanel>
   </div>

diff --git a/argilla-frontend/components/base/base-resizable/VerticalResizable.vue b/argilla-frontend/components/base/base-resizable/VerticalResizable.vue
@@ -59,8 +59,8 @@ export default {
   },
   methods: {
     limitElementWidth(element) {
-      element.style["max-width"] = "65%";
-      element.style["min-width"] = "35%";
+      element.style["max-width"] = "62%";
+      element.style["min-width"] = "38%";
     },
     savePositionOnStartResizing(e) {
       this.leftSidePrevPosition = {

diff --git a/argilla-frontend/components/base/base-tabs/BaseTabsAndContent.vue b/argilla-frontend/components/base/base-tabs/BaseTabsAndContent.vue
@@ -49,11 +49,20 @@ export default {
       return this.currentTab.component;
     },
   },
+  watch: {
+    currentTab() {
+      this.$emit("onChanged", this.currentTab.id);
+    },
+  },
   methods: {
     getSelectedTab(id) {
       this.currentTab = this.tabs.find((tab) => tab.id === id);
     },
   },
+  mounted() {
+    this.$emit("onChanged", this.currentTab.id);
+
+    this.$emit("onLoaded");
+  },
 };
 </script>
-<style lang="scss" scoped></style>
diff --git a/argilla-frontend/components/features/annotation/container/fields/RecordFieldsHeader.vue b/argilla-frontend/components/features/annotation/container/fields/RecordFieldsHeader.vue
@@ -24,7 +24,7 @@
         :recordCriteria="recordCriteria"
         :recordId="record.id"
       />
-      <RecordStatus :recordStatus="record.status" />
+      <RecordStatus :record="record" />
       <RecordMenu :record="record" />
     </div>
   </div>

diff --git a/argilla-frontend/components/features/annotation/container/fields/RecordStatus.vue b/argilla-frontend/components/features/annotation/container/fields/RecordStatus.vue
@@ -1,47 +1,52 @@
 <template>
   <span
-    :key="recordStatus"
+    :key="record.status"
     :class="['status-tag', getStatusInfo.class]"
     :title="getStatusInfo.name"
     ><span class="bullet"></span>
+
     <span>{{ getStatusInfo.name }}</span>
+    <span
+      v-if="record.isDraft && record.taskDistribution.isCompleted"
+      class="circle"
+      :data-title="$t('recordStatus.completedTooltip')"
+    >
+      <svgicon class="check" name="check" width="14" height="14"></svgicon>
+    </span>
   </span>
 </template>
 
 <script>
 export default {
   props: {
-    recordStatus: {
-      type: String,
+    record: {
+      type: Object,
+      required: true,
     },
   },
   computed: {
     getStatusInfo() {
-      switch (this.recordStatus) {
+      switch (this.record.status) {
         case "pending":
           return {
             name: this.$t("recordStatus.pending"),
-            icon: null,
             class: "--pending",
           };
         case "draft":
           return {
             name: this.$t("recordStatus.draft"),
-            icon: null,
             class: "--draft",
           };
 
         case "discarded":
           return {
             name: this.$t("recordStatus.discarded"),
-            icon: "discard",
             class: "--discarded",
           };
 
         case "submitted":
           return {
             name: this.$t("recordStatus.submitted"),
-            icon: "validate",
             class: "--submitted",
           };
       }
@@ -94,4 +99,20 @@ export default {
     }
   }
 }
+.check {
+  color: $black-87;
+  flex-shrink: 0;
+}
+.circle {
+  z-index: 99;
+  display: flex;
+  align-items: center;
+  border-radius: 50%;
+  border: 2px solid $black-87;
+}
+[data-title] {
+  position: relative;
+  overflow: visible;
+  @include tooltip-mini("top", 8px);
+}
 </style>
diff --git a/argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue b/argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue
@@ -150,15 +150,15 @@
             />
           </template>
           <template #downHeader>
-            <p v-text="$t('metrics.progress')" />
             <AnnotationProgress
               class="annotation-progress"
               :datasetId="recordCriteria.datasetId"
-              enableFetch
             />
           </template>
+          <template #downHeaderExpanded>
+            <p v-text="$t('metrics.progress.my')" />
+          </template>
           <template #downContent>
-            <AnnotationProgress :datasetId="recordCriteria.datasetId" />
             <AnnotationProgressDetailed :datasetId="recordCriteria.datasetId" />
           </template>
         </HorizontalResizable>
@@ -549,6 +549,12 @@ export default {
     display: none;
   }
 }
+.annotation-progress__title {
+  display: none;
+  .--expanded & {
+    display: block;
+  }
+}
 [data-title] {
   @include tooltip-mini("right", 12px);
 }

diff --git a/argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue b/argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue
@@ -70,15 +70,15 @@
           />
         </template>
         <template #downHeader>
-          <p v-text="$t('metrics.progress')" />
           <AnnotationProgress
             class="annotation-progress"
             :datasetId="recordCriteria.datasetId"
-            enableFetch
           />
         </template>
+        <template #downHeaderExpanded>
+          <p v-text="$t('metrics.progress.my')" />
+        </template>
         <template #downContent>
-          <AnnotationProgress :datasetId="recordCriteria.datasetId" />
           <AnnotationProgressDetailed :datasetId="recordCriteria.datasetId" />
         </template>
       </HorizontalResizable>
@@ -217,4 +217,10 @@ export default {
     display: none;
   }
 }
+.annotation-progress__title {
+  display: none;
+  .--expanded & {
+    display: block;
+  }
+}
 </style>
diff --git a/argilla-frontend/components/features/annotation/container/questions/QuestionsForm.vue b/argilla-frontend/components/features/annotation/container/questions/QuestionsForm.vue
@@ -410,9 +410,6 @@ export default {
     min-height: $base-space * 6;
     border-radius: $border-radius-m - 1;
     padding: $base-space;
-    &:hover {
-      color: $black-87;
-    }
     &:disabled {
       pointer-events: visible;
       cursor: not-allowed;