Merge branch 'develop' into ci/configure-mono-repo

argilla-io · May 10, 2024 · d2f9e51 · d2f9e51
2 parents 1724491 + a88c818
commit d2f9e51
Show file tree

Hide file tree

Showing 18 changed files with 90 additions and 64 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,8 @@ These are the section headers that we use:
 
 ## [Unreleased]()
 
+## [1.28.0](https://github.com/argilla-io/argilla/compare/v1.27.0...v1.28.0)
+
 ### Added
 
 - Added suggestion multi score attribute. ([#4730](https://github.com/argilla-io/argilla/pull/4730))

diff --git a/docs/_source/getting_started/installation/configurations/server_configuration.md b/docs/_source/getting_started/installation/configurations/server_configuration.md
@@ -93,7 +93,7 @@ You can set the following environment variables to further configure your server
 
 ### Hugging Face
 
-- `ARGILLA_SHOW_HUGGINGFACE_SPACE_PERSISTANT_STORAGE_WARNING`: When Argilla is running on Hugging Face Spaces you can use this environment variable to disable the warning message showed when persistant storage is disabled for the space (Default: `true`).
+- `ARGILLA_SHOW_HUGGINGFACE_SPACE_PERSISTENT_STORAGE_WARNING`: When Argilla is running on Hugging Face Spaces you can use this environment variable to disable the warning message showed when persistent storage is disabled for the space (Default: `true`).
 
 ### Client
 

diff --git a/docs/_source/getting_started/installation/deployments/huggingface-spaces.md b/docs/_source/getting_started/installation/deployments/huggingface-spaces.md
@@ -142,14 +142,18 @@ If you have improvement suggestions or need specific support, please join [Argil
 
 ## Setting up persistent storage
 
-Hugging Face Spaces recently introduced a feature for persistent storage, which must be enabled manually through the Hugging Face Spaces settings. Without this activation, and if you're not subscribed to a paid space upgrade, the space will automatically shut down after 48 hours of inactivity and do a factory reset when it is restarted, meaning that all the data of the space will be lost, including all created users, workspaces and datasets. To prevent this, we highly recommend using the persistent storage layer offered by Hugging Face.
+Hugging Face Spaces recently introduced a feature for persistent storage, which must be enabled manually through the Hugging Face Spaces settings. Without this activation, and if you're not subscribed to a paid space upgrade, the space will automatically shut down after 48 hours of inactivity and do a factory reset when it is restarted, meaning that all the data in the space will be lost, including all created users, workspaces and datasets. To prevent this, we highly recommend using the persistent storage layer offered by Hugging Face.
 
 To enable [persistent storage](https://huggingface.co/docs/hub/spaces-storage#persistent-storage), go to the "Settings" tab on your created Space and click on the desired plan on the "Persistent Storage" section. This will enable persistent storage for your Space and you will be able to use it for data labeling and feedback collection.
 
 ![Alt text](../../../_static/images/installation/huggingface-spaces/persistent-storage.PNG)
 
+```{warning}
+The moment you enable persistent storage, the space will restart and all data in the space will be lost. Make sure that you enable the storage before creating any assets or save the datasets you wish to keep and re-create your assets once the space has restarted.
+```
+
 ```{note}
-If you haven't enabled persistent storage, Argilla will show a warning message by default. If you don't require persistent storage for your space and want to prevent the warning message from appearing, you can set the environment variable `ARGILLA_SHOW_HUGGINGFACE_SPACE_PERSISTANT_STORAGE_WARNING` to `false`. This will suppress the warning message, even if persistent storage is not enabled for the space.
+If you haven't enabled persistent storage, Argilla will show a warning message by default. If you don't require persistent storage for your space and want to prevent the warning message from appearing, you can set the environment variable `ARGILLA_SHOW_HUGGINGFACE_SPACE_PERSISTENT_STORAGE_WARNING` to `false`. This will suppress the warning message, even if persistent storage is not enabled for the space.
 ```
 
 ## Setting up secret environment variables

diff --git a/docs/_source/practical_guides/create_update_dataset/suggestions_and_responses.md b/docs/_source/practical_guides/create_update_dataset/suggestions_and_responses.md
@@ -24,6 +24,7 @@ record = rg.FeedbackRecord(
         {
             "question_name": "relevant",
             "value": "YES",
+            "score": 0.7,
             "agent": model_name,
         }
     ]
@@ -41,6 +42,7 @@ record = rg.FeedbackRecord(
         {
             "question_name": "content_class",
             "value": ["hate", "violent"],
+            "score": [0.3, 0.2],
             "agent": model_name,
         }
     ]
@@ -62,6 +64,7 @@ record = rg.FeedbackRecord(
                 {"rank": 2, "value": "reply-1"},
                 {"rank": 3, "value": "reply-3"},
             ],
+            "score": [0.20, 0.10, 0.01],
             "agent": model_name,
         }
     ]
@@ -79,6 +82,7 @@ record = rg.FeedbackRecord(
         {
             "question_name": "quality",
             "value": 5,
+            "score": 0.7,
             "agent": model_name,
         }
     ]
@@ -122,6 +126,7 @@ record = rg.FeedbackRecord(
         {
             "question_name": "corrected-text",
             "value": "This is a *suggestion*.",
+            "score": 0.7,
             "agent": model_name,
         }
     ]

diff --git a/frontend/components/base/base-range/BaseRangeSlider.vue b/frontend/components/base/base-range/BaseRangeSlider.vue
@@ -2,7 +2,6 @@
   <div>
     <label :for="id"><slot /></label>
     <div class="range__wrapper">
-      <span class="range__legend" v-text="min" />
       <div class="range">
         <span class="range__progress-value" ref="progress" v-text="range" />
         <input
@@ -15,7 +14,10 @@
           v-model.number="range"
         />
       </div>
-      <span class="range__legend" v-text="max" />
+      <div class="range__legends">
+        <span v-text="min" />
+        <span v-text="max" />
+      </div>
     </div>
   </div>
 </template>
@@ -65,7 +67,7 @@ export default {
       this.$refs.progress.style.left = `calc(${this.progress}% + (${
         8 - this.progress * 0.15
       }px))`;
-      this.$refs.slider.style.background = `linear-gradient(to right, #3e5cc9 ${this.progress}%, #ccc ${this.progress}%)`;
+      this.$refs.slider.style.background = `linear-gradient(to right, #3e5cc9 ${this.progress}%, rgba(0, 0, 0, 0.2) ${this.progress}%)`;
     },
   },
   created() {
@@ -78,6 +80,7 @@ export default {
 <style lang="scss" scoped>
 $slider-color: $primary-color;
 $slider-light-color: rgba(0, 26, 255, 0.1);
+$slider-thumb-size: 16px;
 label {
   width: fit-content;
   height: 14px;
@@ -90,11 +93,14 @@ label {
   min-width: 240px;
   &__wrapper {
     display: flex;
-    gap: $base-space;
+    flex-direction: column;
     align-items: center;
     margin-top: $base-space;
   }
-  &__legend {
+  &__legends {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
     color: $black-37;
     @include font-size(12px);
   }
@@ -135,17 +141,17 @@ label {
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  height: 15px;
-  width: 15px;
+  height: $slider-thumb-size;
+  width: $slider-thumb-size;
   background-color: $slider-color;
   border-radius: 50%;
   border: none;
   transition: 0.2s ease-in-out;
 }
 
 input[type="range"]::-moz-range-thumb {
-  height: 15px;
-  width: 15px;
+  height: $slider-thumb-size;
+  width: $slider-thumb-size;
   background-color: $slider-color;
   border-radius: 50%;
   border: none;

diff --git a/frontend/components/base/base-switch/BaseSwitch.vue b/frontend/components/base/base-switch/BaseSwitch.vue
@@ -34,15 +34,15 @@
           tabindex="-1"
         />
         <button :type="type" class="re-switch-holder">
-          <svgicon width="12" height="12" name="check" color="white"></svgicon>
+          <svgicon width="10" height="10" name="check" color="white"></svgicon>
         </button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-const checkedPosition = 50;
+const checkedPosition = 70;
 const initialPosition = "-1px";
 
 import "assets/icons/check";
@@ -117,10 +117,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$switch-width: 36px;
+$switch-width: 28px;
 $switch-height: 11px;
-$switch-thumb-size: 24px;
-$switch-ripple-size: 44px;
+$switch-thumb-size: 18px;
 .re-switch {
   display: flex;
   align-items: center;
@@ -130,11 +129,13 @@ $switch-ripple-size: 44px;
       display: none;
     }
     .re-switch-thumb {
-      background-color: palette(white) !important;
+      background-color: #f0f0f0 !important;
     }
   }
   &.disable-action {
     opacity: 0.5;
+    pointer-events: none;
+    cursor: default;
     .re-switch-thumb {
       background-color: palette(white) !important;
       transform: translate3d(-1px, -50%, 0px) !important;
@@ -151,9 +152,9 @@ $switch-ripple-size: 44px;
     position: relative;
     border-radius: $switch-height;
     transition: $swift-ease-out;
-    background-color: palette(grey, 600);
+    background-color: $black-20;
+    cursor: pointer;
     .re-switch-thumb {
-      box-shadow: $shadow;
       width: $switch-thumb-size;
       height: $switch-thumb-size;
       position: absolute;
@@ -169,13 +170,14 @@ $switch-ripple-size: 44px;
     }
     .re-switch-holder {
       @include absoluteCenter;
-      width: 40px;
-      height: 40px;
+      width: $switch-thumb-size;
+      height: $switch-thumb-size;
       margin: 0;
       padding: 0;
       z-index: 2;
       background: none;
       border: none;
+      cursor: pointer;
       &:focus {
         outline: none;
       }
@@ -186,16 +188,4 @@ $switch-ripple-size: 44px;
     color: $black-54;
   }
 }
-
-.re-switch.re-dragging {
-  .re-switch-thumb {
-    cursor: grabbing;
-  }
-}
-
-.re-switch.re-disabled {
-  .re-switch-thumb {
-    cursor: default;
-  }
-}
 </style>
diff --git a/frontend/components/base/base-table/BaseTableInfo.vue b/frontend/components/base/base-table/BaseTableInfo.vue
@@ -447,6 +447,7 @@ export default {
   &__body {
     overflow: auto;
     padding-bottom: 0.5em;
+    min-height: 250px;
     @extend %hide-scrollbar;
     #{$this}__item {
       margin-bottom: -1px;

diff --git a/frontend/components/features/datasets/datasets-table/dataset-progress/DatasetProgress.vue b/frontend/components/features/datasets/datasets-table/dataset-progress/DatasetProgress.vue
@@ -35,11 +35,13 @@ export default {
 
 <style lang="scss" scoped>
 .dataset-progress {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: calc($base-space / 2);
   max-width: 160px;
+  z-index: 0;
   &__bar {
     width: 100%;
     max-width: 160px;

diff --git a/.../components/feedback-task/container/fields/span-annotation/components/EntityComponent.vue b/.../components/feedback-task/container/fields/span-annotation/components/EntityComponent.vue
@@ -129,7 +129,7 @@ export default {
       return this.options.length === 1;
     },
     suggestedScore() {
-      return this.suggestion?.value.score.fixed;
+      return this.suggestion?.value.score?.fixed;
     },
     entityColor() {
       return this.entity.color;
@@ -313,6 +313,7 @@ export default {
   }
   &__suggestion {
     margin-right: calc($base-space / 2);
+    flex-shrink: 0;
     &--score {
       display: none;
       margin-right: calc($base-space / 2);

diff --git a/...-task/container/questions/form/ranking/drag-and-drop-selection/DndSelection.component.vue b/...-task/container/questions/form/ranking/drag-and-drop-selection/DndSelection.component.vue
@@ -17,9 +17,8 @@
         @focus="onFocus"
       >
         <BaseTooltip
-          v-if="isSuggested(item)"
           class="draggable__rank-card--unranked"
-          :title="$t('suggestion.name')"
+          :title="isSuggested(item) ? $t('suggestion.name') : null"
           :text="getSuggestedAgent(item)"
           minimalist
         >
@@ -69,8 +68,7 @@
             @focus="onFocus"
           >
             <BaseTooltip
-              v-if="isSuggested(item)"
-              :title="$t('suggestion.name')"
+              :title="isSuggested(item) ? $t('suggestion.name') : null"
               :text="getSuggestedAgent(item)"
               minimalist
               class="draggable__rank-card--ranked"

diff --git a/frontend/components/feedback-task/settings/SettingsQuestions.vue b/frontend/components/feedback-task/settings/SettingsQuestions.vue
@@ -40,7 +40,7 @@
             </Validation>
 
             <div
-              class="settings__edition-form__group"
+              class="settings__edition-form__group --subcategories"
               v-if="
                 question.isMultiLabelType ||
                 question.isSingleLabelType ||
@@ -213,23 +213,24 @@ export default {
       }
       @include media(">desktop") {
         :deep(label) {
-          min-width: 140px;
+          min-width: 180px;
         }
       }
       &.--subcategory {
-        margin-top: $base-space * 2;
         @include font-size(13px);
       }
     }
 
     &__slider {
       :deep(label) {
         color: $black-87;
+        line-height: 1;
+        margin-right: 1em;
       }
       @include media(">desktop") {
         :deep(label) {
-          min-width: 140px;
-          margin-right: 1.5em;
+          min-width: 180px;
+          margin-right: 1em;
         }
       }
       &.--subcategory {
@@ -247,6 +248,25 @@ export default {
       width: 100%;
       gap: 12px;
 
+      &.--subcategories {
+        & > label:first-child {
+          margin-bottom: $base-space * 2;
+        }
+        @include media(">desktop") {
+          gap: 0;
+        }
+      }
+
+      .--subcategory {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        @include media(">desktop") {
+          flex-wrap: nowrap;
+          height: 32px;
+        }
+      }
+
       & > label {
         width: fit-content;
         height: 14px;

diff --git a/frontend/v1/domain/entities/environment/Environment.ts b/frontend/v1/domain/entities/environment/Environment.ts
@@ -1,7 +1,7 @@
 export class Environment {
   constructor(
     private readonly argilla: {
-      showHuggingfaceSpacePersistantStorageWarning: boolean;
+      showHuggingfaceSpacePersistentStorageWarning: boolean;
     },
     private readonly huggingface: {
       spaceId: string;
@@ -10,14 +10,14 @@ export class Environment {
       spaceHost: string;
       spaceRepoName: string;
       spaceAuthorName: string;
-      spacePersistantStorageEnabled: boolean;
+      spacePersistentStorageEnabled: boolean;
     }
   ) {}
 
-  get shouldShowHuggingfaceSpacePersistantStorageWarning(): boolean {
+  get shouldShowHuggingfaceSpacePersistentStorageWarning(): boolean {
     return (
-      this.argilla.showHuggingfaceSpacePersistantStorageWarning &&
-      !this.huggingface.spacePersistantStorageEnabled
+      this.argilla.showHuggingfaceSpacePersistentStorageWarning &&
+      !this.huggingface.spacePersistentStorageEnabled
     );
   }