Merge branch 'develop' into docs/5260-docs-add-server-configuration-a…

…nd-database-migration-docs-to-v2

.github/workflows/argilla.yml

@@ -53,6 +53,10 @@ jobs:
       - name: Wait for argilla-quickstart to start
         run: |
           while ! curl -XGET http://localhost:6900/api/_status; do sleep 5; done
+      - name: Set huggingface hub credentials
+        run: |
+          echo "HF_TOKEN_ARGILLA_INTERNAL_TESTING=${{ secrets.HF_TOKEN_ARGILLA_INTERNAL_TESTING }}" >> "$GITHUB_ENV"
+          echo "Enable HF access token"
       - name: Run unit tests
         run: |
           pdm run test tests/unit

README.md

@@ -34,9 +34,6 @@
 
 Argilla is a **collaboration platform for AI engineers and domain experts** that require **high-quality outputs, full data ownership, and overall efficiency**.
 
-> [!NOTE]
-> This README represents the release candidate for the 2.0.0 SDK version. The README for the last stable version of the 1x SDK can be found [1.x](./argilla-v1/README.md)
-
 If you just want to get started, we recommend our [UI demo](https://demo.argilla.io/sign-in?auth=ZGVtbzoxMjM0NTY3OA%3D%3D) or our [free Hugging Face Spaces deployment integration](https://huggingface.co/new-space?template=argilla/argilla-template-space). Curious, and want to know more? Read our [documentation](https://argilla-io.github.io/argilla/latest/).
 
 ## Why use Argilla?
@@ -89,7 +86,7 @@ AI teams from companies like [the Red Cross](https://510.global/), [Loris.ai](ht
 First things first! You can install the SDK with pip as follows:
 
 ```console
-pip install argilla --pre
+pip install argilla
 ```
 
 After that, you will need to deploy Argilla Server. The easiest way to do this is through our [free Hugging Face Spaces deployment integration](https://huggingface.co/new-space?template=argilla/argilla-template-space).

argilla-frontend/assets/scss/abstract/variables/_variables.scss

@@ -101,6 +101,7 @@ $black-20: rgba(0, 0, 0, 0.2);
 $black-10: rgba(0, 0, 0, 0.1);
 $black-6: rgba(0, 0, 0, 0.06);
 $black-4: rgba(0, 0, 0, 0.04);
+$black-3: rgba(0, 0, 0, 0.03);
 
 // States
 //-----------

argilla-frontend/components/base/base-collpasable-panel/BaseCollapsablePanel.vue

@@ -58,6 +58,7 @@ export default {
   border-top: 1px solid $black-10;
 
   &__header {
+    overflow: visible;
     &__container {
       width: 100%;
       display: flex;

argilla-frontend/components/base/base-progress/BaseLinearProgress.vue

@@ -25,13 +25,20 @@
           class="progress__tooltip__triangle"
           :style="{ left: `${getTrianglePosition(hoveredRange)}%` }"
         />
-        <div class="progress__tooltip">
-          <span
-            class="progress__tooltip__percent-info"
-            v-text="
-              `${hoveredRange.name}: ${getPercentage(hoveredRange.value)}%`
-            "
-          />
+        <div
+          class="progress__tooltip"
+          :style="{
+            left: tooltipPositionFixed
+              ? '50%'
+              : `${getTrianglePosition(hoveredRange)}%`,
+          }"
+        >
+          <span class="progress__tooltip__percent-info"
+            >{{ hoveredRange.name }}:
+            <span v-if="showPercentInTooltip"
+              >{{ getPercentage(hoveredRange.value) }}%</span
+            >
+          </span>
           {{ hoveredRange.tooltip }}
         </div>
       </template>
@@ -46,6 +53,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    showPercentInTooltip: {
+      type: Boolean,
+      default: true,
+    },
+    tooltipPositionFixed: {
+      type: Boolean,
+      default: true,
+    },
     progressMax: {
       type: Number,
       default: 100,
@@ -126,7 +141,6 @@ $borderRadius: 3px;
     white-space: nowrap;
     min-width: 180px;
     bottom: calc(100% + #{$tooltipTriangleSize} + 2px);
-    left: 50%;
     transform: translateX(-50%);
     padding: calc($base-space / 2);
     background: $tooltipBackgroundColor;

argilla-frontend/components/features/annotation/container/fields/RecordStatus.vue

@@ -11,7 +11,7 @@
       class="circle"
       :data-title="$t('recordStatus.completedTooltip')"
     >
-      <svgicon class="check" name="check" width="14" height="14"></svgicon>
+      <svgicon class="check" name="check" width="12" height="12"></svgicon>
     </span>
   </span>
 </template>
@@ -97,18 +97,20 @@ export default {
       @extend %bullet;
       background: $draft-color;
     }
+    .check {
+      color: $draft-color;
+      flex-shrink: 0;
+    }
+    .circle {
+      border: 2px solid $draft-color;
+    }
   }
 }
-.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;

argilla-frontend/components/features/annotation/progress/AnnotationProgress.vue

@@ -69,14 +69,16 @@ $bullet-size: 8px;
     width: 100%;
     display: flex;
     align-items: center;
+    justify-content: space-between;
+    margin-right: $base-space * 2;
   }
   &__item {
-    background: palette(grey, 700);
     display: flex;
     flex-direction: row;
     gap: $base-space;
     padding: $base-space;
     width: auto;
+    background: $black-3;
     border-radius: $border-radius;
   }
   &__name {

argilla-frontend/components/features/annotation/progress/AnnotationProgressDetailed.vue

@@ -34,7 +34,11 @@
       </li>
     </ul>
     <p class="team-progress__title" v-text="$t('metrics.progress.team')" />
-    <TeamProgress :datasetId="datasetId" />
+    <TeamProgress
+      visibleProgressValues
+      :datasetId="datasetId"
+      :show-tooltip="false"
+    />
   </div>
 </template>
 
@@ -124,7 +128,7 @@ $bullet-size: 8px;
   margin-top: 0;
   margin-bottom: $base-space * 3;
   &__item {
-    background: palette(grey, 700);
+    background: $black-3;
     display: flex;
     flex-direction: column;
     gap: $base-space;

argilla-frontend/components/features/annotation/progress/TeamProgress.vue

@@ -4,10 +4,16 @@
       class="team-progress__bar"
       :progress-ranges="progressRanges"
       :progress-max="progress.total"
+      :show-tooltip="showTooltip"
+      :tooltip-position-fixed="false"
+      :show-percent-in-tooltip="false"
     />
     <span class="team-progress__percent"
       >{{ progress.percentage.completed }}%</span
     >
+    <span v-if="visibleProgressValues" class="team-progress__info">
+      {{ progress.completed }} of {{ progress.total }}
+    </span>
   </div>
 </template>
 
@@ -20,21 +26,30 @@ export default {
       type: String,
       required: true,
     },
+    visibleProgressValues: {
+      type: Boolean,
+    },
+    showTooltip: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     progressRanges() {
       return [
         {
           id: "completed",
-          name: "completed",
+          name: this.$t("datasets.completed"),
           color: "linear-gradient(90deg, #6A6A6C 0%, #252626 100%)",
           value: this.progress.completed,
+          tooltip: `${this.progress.completed}`,
         },
         {
           id: "pending",
-          name: "progress",
+          name: this.$t("datasets.left"),
           color: "linear-gradient(white)",
           value: this.progress.pending,
+          tooltip: `${this.progress.pending}`,
         },
       ];
     },
@@ -52,9 +67,9 @@ export default {
   align-items: center;
   gap: $base-space * 2;
   width: 100%;
-  max-width: 250px;
   color: $black-54;
   @include font-size(12px);
+  z-index: 1;
   &__bar {
     width: 100%;
     max-width: 160px;
@@ -65,5 +80,13 @@ export default {
   &__percent {
     font-weight: lighter;
   }
+  :deep(.progress__tooltip) {
+    gap: calc($base-space / 2);
+    min-width: auto;
+    justify-content: left;
+  }
+  :deep(.progress__tooltip__percent-info) {
+    font-weight: 500;
+  }
 }
 </style>