🛢️ feature/bulk annotation (#4333)

- [x] bulk/focus switch - [x] BulkAnnotation component - [x] FocusAnnotation component - [x] Make the header of record fixed - [x] Include checkbox for each record - [x] Include global checkbox - [x] Include page size selector - [x] Pagination with more than 10 options - [x] Show selected records number in the form - [x] Bulk action: Submit / Discard / Save as draft --------- Co-authored-by: leire <[email protected]> Co-authored-by: leiyre <[email protected]> Co-authored-by: Paco Aranda <[email protected]> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
argilla-io · Jan 15, 2024 · 0b8bc2b · 0b8bc2b
1 parent 27e3f09
commit 0b8bc2b
Show file tree

Hide file tree

Showing 106 changed files with 3,554 additions and 1,026 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,7 @@ 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))
 - Added pydantic v2 support using the python SDK. ([#4459](https://github.com/argilla-io/argilla/pull/4459))
@@ -31,6 +32,10 @@ These are the section headers that we use:
 - `nan` values in metadata properties will raise a 422 error when creating/updating records. ([#4300](https://github.com/argilla-io/argilla/issues/4300))
 - `None` values are now allowed in metadata properties. ([#4300](https://github.com/argilla-io/argilla/issues/4300))
 
+### 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))

diff --git a/frontend/assets/icons/bulk-mode.js b/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: 24,
+    height: 17,
+    viewBox: '0 0 24 17',
+    data: '<path pid="0" clip-rule="evenodd" d="M0 3a1 1 0 012 0 1 1 0 01-2 0zM5 4a1 1 0 010-2h18a1 1 0 110 2H5zM0 9a1 1 0 012 0 1 1 0 01-2 0zM5 10a1 1 0 010-2h18a1 1 0 110 2H5zM0 15a1 1 0 112 0 1 1 0 11-2 0zM5 16a1 1 0 110-2h18a1 1 0 110 2H5z"/>'
+  }
+})
diff --git a/frontend/assets/icons/change-height.js b/frontend/assets/icons/change-height.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({
+  'change-height': {
+    width: 30,
+    height: 18,
+    viewBox: '0 0 30 18',
+    data: '<path pid="0" clip-rule="evenodd" d="M12.5 4c-.69 0-1.25-.448-1.25-1s.56-1 1.25-1h16.25c.69 0 1.25.448 1.25 1s-.56 1-1.25 1H12.5zM12.5 10c-.69 0-1.25-.448-1.25-1s.56-1 1.25-1h16.25c.69 0 1.25.448 1.25 1s-.56 1-1.25 1H12.5zM12.5 16c-.69 0-1.25-.448-1.25-1s.56-1 1.25-1h16.25c.69 0 1.25.448 1.25 1s-.56 1-1.25 1H12.5zM4.385 0h-.02a.921.921 0 00-.4.096L3.953.1a.872.872 0 00-.103.063L.35 2.618a.784.784 0 00-.175 1.146.916.916 0 001.225.163l2.1-1.472v13.09l-2.1-1.472a.916.916 0 00-1.225.163.784.784 0 00.175 1.146l3.5 2.454a.872.872 0 00.103.063l.012.005c.12.06.256.094.4.096h.02a.921.921 0 00.4-.096l.012-.006a.872.872 0 00.103-.062l3.5-2.454a.784.784 0 00.175-1.146.916.916 0 00-1.225-.163l-2.1 1.473V2.455l2.1 1.472a.916.916 0 001.225-.163.784.784 0 00-.175-1.146L4.9.164A.872.872 0 004.797.1L4.785.096a.921.921 0 00-.4-.096z"/>'
+  }
+})
diff --git a/frontend/assets/icons/focus-mode.js b/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" 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"/>'
+  }
+})
diff --git a/frontend/assets/icons/index.js b/frontend/assets/icons/index.js
@@ -1,6 +1,8 @@
 /* eslint-disable */
 require('./arrow-down')
 require('./arrow-up')
+require('./bulk-mode')
+require('./change-height')
 require('./check')
 require('./chevron-down')
 require('./chevron-left')
@@ -18,6 +20,7 @@ require('./exploration')
 require('./external-link')
 require('./external')
 require('./filter')
+require('./focus-mode')
 require('./hand-labeling')
 require('./info')
 require('./link')

diff --git a/frontend/assets/scss/abstract/placeholders/_tooltip.scss b/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,45 @@ $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);
+    }
+  } @else if $position == "top-right" {
+    @extend %has-tooltip--right;
+    &:after {
+      left: -$offset;
+      bottom: calc(100% + $offset);
+      top: auto;
+      transform: none;
+    }
+  }
+  &:before {
+    content: none !important;
+  }
+  &:after {
+    padding: calc($base-space / 2);
+    background: $tooltip-mini-bg;
+    @include font-size(12px);
+    line-height: 1.2;
+    white-space: pre;
+  }
+}
diff --git a/frontend/assets/scss/abstract/variables/_variables.scss b/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,

diff --git a/frontend/components/base/base-button/BaseButton.vue b/frontend/components/base/base-button/BaseButton.vue
@@ -49,6 +49,7 @@
     :disabled="disabled"
     @click="onClick"
   >
+    <BaseSpinner class="spinner" v-if="loading" />
     <slot />
   </button>
 </template>
@@ -139,6 +140,12 @@ export default {
 }
 .button {
   @extend %button;
+  .spinner {
+    height: 20px;
+    width: 20px;
+    border: 3px solid #242323d8;
+    border-top-color: #00000021;
+  }
 }
 .small {
   @include font-size(13px);
@@ -155,6 +162,9 @@ export default {
   .svg-icon {
     fill: palette(white);
   }
+  .spinner {
+    border-color: palette(white);
+  }
   &:hover,
   &:active,
   &.active {
@@ -209,6 +219,9 @@ export default {
   .svg-icon {
     fill: palette(grey, 200);
   }
+  .spinner {
+    border-color: palette(grey, 200);
+  }
   &:hover,
   &:active,
   &.active {