🛢️ feature/bulk annotation

CHANGELOG.md

@@ -18,9 +18,14 @@ These are the section headers that we use:
 
 ### Added
 
+- Bulk annotation ([#4333](https://github.com/argilla-io/argilla/pull/4333))
 - Restore filters from feedback dataset settings ([#4461])(https://github.com/argilla-io/argilla/pull/4461)
 - Warning on feedback dataset settings when leaving page with unsaved changes ([#4461])(https://github.com/argilla-io/argilla/pull/4461)
 
+### Fixed
+
+- Paginating to a new record, automatically scrolls down to selected form area ([#4333](https://github.com/argilla-io/argilla/pull/4333))
+
 ### Deprecated
 
 - The `missing` response status for filtering records is deprecated and will be removed in the release v1.24.0. Use `pending` instead. ([#4433](https://github.com/argilla-io/argilla/pull/4433))
@@ -43,7 +48,6 @@ These are the section headers that we use:
 - Added `httpx_extra_kwargs` argument to `rg.init` and `Argilla` to allow passing extra arguments to `httpx.Client` used by `Argilla`. ([#4440](https://github.com/argilla-io/argilla/pull/4441))
 - Added `ResponseStatusFilter` enum in `__init__` imports of Argilla ([#4118](https://github.com/argilla-io/argilla/pull/4463)). Contributed by @Piyush-Kumar-Ghosh.
 
-
 ### Changed
 
 - More productive and simpler shortcuts system ([#4215](https://github.com/argilla-io/argilla/pull/4215))

frontend/assets/icons/bulk-mode.js

@@ -0,0 +1,27 @@
+/*
+ * coding=utf-8
+ * Copyright 2021-present, the Recognai S.L. team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable */
+var icon = require("vue-svgicon");
+icon.register({
+  "bulk-mode": {
+    width: 20,
+    height: 16,
+    viewBox: "0 0 20 16",
+    data: '<path pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M0 2.716a.833.833 0 111.667 0v.215a.833.833 0 11-1.667 0v-.215zM4.275 3.765a.941.941 0 110-1.882h14.784a.941.941 0 010 1.882H4.275zM0 6.48a.833.833 0 011.667 0v.216a.833.833 0 01-1.667 0V6.48zM4.275 7.53a.941.941 0 110-1.882h14.784a.941.941 0 010 1.882H4.275zM0 10.245a.833.833 0 011.667 0v.216a.833.833 0 01-1.667 0v-.216zM4.275 11.294a.941.941 0 110-1.882h14.784a.941.941 0 010 1.882H4.275zM0 14.01a.833.833 0 011.667 0v.216a.833.833 0 01-1.667 0v-.216zM4.275 15.059a.941.941 0 110-1.882h14.784a.941.941 0 010 1.882H4.275z"/>',
+  },
+});

frontend/assets/icons/focus-mode.js

@@ -0,0 +1,27 @@
+/*
+ * coding=utf-8
+ * Copyright 2021-present, the Recognai S.L. team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable */
+var icon = require("vue-svgicon");
+icon.register({
+  "focus-mode": {
+    width: 20,
+    height: 16,
+    viewBox: "0 0 20 16",
+    data: '<path pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M0 .889C0 .398.373 0 .833 0h18.334c.46 0 .833.398.833.889V15.11c0 .491-.373.889-.833.889H.833C.373 16 0 15.602 0 15.111V.89zm1.667.889v12.444h16.666V1.778H1.667z" />',
+  },
+});

frontend/assets/icons/index.js

@@ -1,6 +1,7 @@
 /* eslint-disable */
 require('./arrow-down')
 require('./arrow-up')
+require('./bulk-mode')
 require('./check')
 require('./chevron-down')
 require('./chevron-left')
@@ -18,6 +19,7 @@ require('./exploration')
 require('./external-link')
 require('./external')
 require('./filter')
+require('./focus-mode')
 require('./hand-labeling')
 require('./info')
 require('./link')

frontend/assets/scss/abstract/placeholders/_tooltip.scss

@@ -1,5 +1,6 @@
 // tooltip
 $tooltip-bg: palette(grey, 100);
+$tooltip-mini-bg: palette(grey, 150);
 $tooltip-color: palette(white);
 $tooltip-font-size: 13px;
 $tooltip-triangle-size: 7px;
@@ -145,3 +146,36 @@ $tooltip-border-radius: $border-radius-s;
     $tooltip-bg
   );
 }
+
+@mixin tooltip-mini($position, $offset: 4px) {
+  @if $position == "left" {
+    @extend %has-tooltip--left;
+    &:after {
+      right: calc(100% + $offset);
+    }
+  } @else if $position == "bottom" {
+    @extend %has-tooltip--bottom;
+    &:after {
+      top: calc(100% + $offset);
+    }
+  } @else if $position == "top" {
+    @extend %has-tooltip--top;
+    &:after {
+      bottom: calc(100% + $offset);
+    }
+  } @else if $position == "right" {
+    @extend %has-tooltip--right;
+    &:after {
+      left: calc(100% + $offset);
+    }
+  }
+  &:before {
+    content: none !important;
+  }
+  &:after {
+    padding: calc($base-space / 2);
+    background: $tooltip-mini-bg;
+    @include font-size(13px);
+    line-height: 1.2;
+  }
+}

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

@@ -26,6 +26,7 @@ $palettes: (
   ),
   grey: (
     100: #212121,
+    150: #2d3236,
     200: #4d4d4d,
     300: #686a6d,
     400: #838589,
@@ -46,7 +47,7 @@ $palettes: (
     800: #f0f0fe,
   ),
   pink: (
-    base: #73bfbd,
+    base: #f2067a,
   ),
   yellow: (
     400: #fee075,

frontend/components/base/base-button/BaseButton.vue

@@ -49,7 +49,7 @@
     :disabled="disabled"
     @click="onClick"
   >
-    <slot />
+    <BaseSpinner class="spinner" v-if="loading" /><slot v-else />
   </button>
 </template>
 
@@ -155,6 +155,9 @@ export default {
   .svg-icon {
     fill: palette(white);
   }
+  .spinner {
+    border-color: palette(white);
+  }
   &:hover,
   &:active,
   &.active {
@@ -209,6 +212,9 @@ export default {
   .svg-icon {
     fill: palette(grey, 200);
   }
+  .spinner {
+    border-color: palette(grey, 200);
+  }
   &:hover,
   &:active,
   &.active {

frontend/components/base/base-checkbox/BaseCheckbox.vue

@@ -120,7 +120,7 @@ $checkbox-color-dark: $primary-color;
     min-width: $checkbox-size;
     height: $checkbox-size;
     position: relative;
-    border-radius: 1px;
+    border-radius: 3px;
     border: 1px solid $checkbox-color;
     text-align: center;
     vertical-align: middle;

frontend/components/base/base-dropdown/BaseDropdown.vue

@@ -21,15 +21,15 @@
     class="dropdown"
     v-click-outside="{
       events: ['mousedown'],
-      handler: onClickOutside,
+      handler: onClose,
     }"
   >
     <div class="dropdown__header" @click="onClick">
       <slot name="dropdown-header" />
     </div>
     <transition appear name="fade">
       <div
-        v-if="visible"
+        v-if="visible && inViewport"
         class="dropdown__content"
         :style="
           isViewportBoundary && {
@@ -67,36 +67,46 @@ export default {
   },
   data() {
     return {
-      dropdownTop: null,
-      dropdownLeft: null,
+      dropdownTop: 0,
+      dropdownLeft: 0,
+      inViewport: true,
     };
   },
   computed: {
     isViewportBoundary() {
       return this.boundary === "viewport";
     },
   },
+  watch: {
+    visible() {
+      this.$nextTick(() => {
+        this.setViewportPosition();
+      });
+    },
+  },
   methods: {
-    onClickOutside() {
+    onClose() {
       this.$emit("visibility", false);
     },
-    onClick() {
+    onToggle() {
       this.$emit("visibility", !this.visible);
-      if (this.isViewportBoundary) {
-        this.setViewportPosition();
-        this.getScrollableParent(this.$refs.dropdown).addEventListener(
-          "scroll",
-          this.setViewportPosition
-        );
-      }
+    },
+    onClick() {
+      this.onToggle();
     },
     setViewportPosition() {
-      return this.$nextTick(() => {
-        const { top, left, height } =
-          this.$refs.dropdown.getBoundingClientRect();
-        this.dropdownTop = top + height + this.gap;
-        this.dropdownLeft = left;
-      });
+      if (!this.isViewportBoundary) return;
+      if (!this.visible) return;
+
+      this.inViewport = this.isInViewport(this.$refs.dropdown);
+
+      if (!this.inViewport) return;
+
+      const { top, left, height } = this.$refs.dropdown.getBoundingClientRect();
+
+      this.dropdownTop = top + height + this.gap;
+
+      this.dropdownLeft = left;
     },
     isScrollable(el) {
       const hasScrollableContent =
@@ -105,18 +115,37 @@ export default {
       const isOverflowHidden = overflowYStyle.indexOf("hidden") !== -1;
       return hasScrollableContent && !isOverflowHidden;
     },
-    getScrollableParent(el) {
-      return !el || el === document.body
-        ? document.body
-        : this.isScrollable(el)
-        ? el
-        : this.getScrollableParent(el.parentNode);
+    getScrollableParent(element) {
+      const isBody = !element || element === document.body;
+
+      if (isBody) return document.body;
+
+      if (this.isScrollable(element)) return element;
+
+      return this.getScrollableParent(element.parentNode);
+    },
+    isInViewport(element) {
+      const rect = element.getBoundingClientRect();
+      const parentHeight = element.offsetHeight;
+
+      const html = document.documentElement;
+      return (
+        rect.top >= parentHeight &&
+        rect.left >= 0 &&
+        rect.bottom <= (window.innerHeight || html.clientHeight) &&
+        rect.right <= (window.innerWidth || html.clientWidth)
+      );
     },
   },
   mounted() {
     if (this.isViewportBoundary) {
-      this.setViewportPosition();
       window.addEventListener("resize", this.setViewportPosition);
+      this.getScrollableParent(this.$refs.dropdown).addEventListener(
+        "scroll",
+        this.setViewportPosition
+      );
+
+      this.setViewportPosition();
     }
   },
   beforeDestroy() {

frontend/components/commons/header/header-feedback-task/HeaderFeedbackTask.component.vue

@@ -3,7 +3,7 @@
     <BaseBreadcrumbs
       v-if="breadcrumbs.length"
       :breadcrumbs="breadcrumbs"
-      :copy-button="true"
+      :copy-button="showCopyButton"
       @breadcrumb-action="$emit('breadcrumb-action', $event)"
     />
     <template v-if="datasetId">
@@ -19,10 +19,7 @@
         v-if="showSettingButton"
         :to="{ name: 'dataset-id-settings', params: { id: this.datasetId } }"
       >
-        <DatasetSettingsIconFeedbackTaskComponent
-          v-if="datasetId"
-          :datasetId="datasetId"
-        />
+        <DatasetSettingsIconFeedbackTaskComponent v-if="datasetId" />
       </NuxtLink>
     </template>
     <user-avatar-tooltip />
@@ -37,7 +34,6 @@ export default {
   props: {
     datasetId: {
       type: String,
-      required: true,
     },
     breadcrumbs: {
       type: Array,
@@ -51,6 +47,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    showCopyButton: {
+      type: Boolean,
+      default: false,
+    },
   },
   methods: {
     onClickTrain() {

frontend/components/commons/user/user-settings/TopUserSettings.content.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="top-content">
-    <h1>My settings</h1>
+    <h1 v-text="$t('userSettings.title')" />
     <BaseButton :to="datasetsURL" class="secondary text">
       <svgicon name="chevron-left" width="10" height="10" color="#4C4EA3" />
-      Home
+      {{ $t("breadcrumbs.home") }}
     </BaseButton>
   </div>
 </template>