♟️ Create dataset from UI

argilla-frontend/assets/icons/assign.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({
+  'assign': {
+    width: 10,
+    height: 10,
+    viewBox: '0 0 10 10',
+    data: '<path pid="0" d="M1.625 2.75c.416 0 .78-.226.974-.563h3.526a1.125 1.125 0 010 2.25h-2.25a2.25 2.25 0 000 4.5h3.526a1.125 1.125 0 100-1.124H3.875a1.125 1.125 0 010-2.25h2.25a2.25 2.25 0 000-4.5H2.599a1.125 1.125 0 10-.974 1.687z"/>'
+  }
+})

argilla-frontend/assets/icons/index.js

@@ -1,6 +1,7 @@
 /* eslint-disable */
 require('./arrow-down')
 require('./arrow-up')
+require('./assign')
 require('./bulk-mode')
 require('./change-height')
 require('./check')
@@ -34,6 +35,7 @@ require('./meatballs')
 require('./minimize-arrows')
 require('./no-matching')
 require('./pen')
+require('./plus')
 require('./progress')
 require('./refresh')
 require('./reset')

argilla-frontend/assets/icons/plus.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({
+  'plus': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 16 16',
+    data: '<path pid="0" d="M8 2a.75.75 0 00-.75.75v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5A.75.75 0 008 2z" _fill="#000" fill-opacity=".87"/>'
+  }
+})

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

@@ -76,6 +76,8 @@
   --bg-banner-warning: hsl(47, 83%, 91%);
   --bg-banner-error: hsl(3, 100%, 92%);
   --bg-tooltip: var(--color-dark-grey);
+  --bg-config-card: hsl(227, 100%, 90%);
+  --bg-congig-alert: hsl(41, 100%, 82%, 0.8);
   --fg-chat-1: #488d81;
   --fg-chat-2: #e07be0;
   --fg-chat-3: #fd926a;
@@ -146,6 +148,8 @@
   --bg-banner-warning: hsl(47, 83%, 16%);
   --bg-banner-error: hsl(3, 100%, 20%);
   --bg-tooltip: hsl(207, 9%, 32%);
+  --bg-config-card: hsla(227, 100%, 82%, 30%);
+  --bg-congig-alert: hsl(41, 100%, 82%, 0.4);
   --fg-chat-1: #628e87;
   --fg-chat-2: #af6daf;
   --fg-chat-3: #cd8065;

argilla-frontend/assets/scss/base/base.scss

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
 html {
   box-sizing: border-box;
   -webkit-text-size-adjust: 100%;

argilla-frontend/components/base/base-card/BaseCard.vue

@@ -61,7 +61,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .card {
   display: flex;
   align-items: flex-end;

argilla-frontend/components/base/base-resizable/HorizontalResizable.vue

@@ -1,15 +1,18 @@
 <template>
-  <div class="resizable" :class="resizing ? '--h-resizing' : null">
-    <div class="resizable__up">
+  <div class="resizable-h" :class="resizing ? '--h-resizing' : null">
+    <div class="resizable-h__up">
       <slot name="up" />
     </div>
 
-    <div class="resizable__bar" ref="resizableBar">
-      <div class="resizable__bar__inner" />
+    <div class="resizable-h__bar" ref="resizableBar">
+      <div class="resizable-h__bar__inner" />
+    </div>
+    <div class="resizable-h__down" v-if="!collapsable">
+      <slot name="down" />
     </div>
-
     <BaseCollapsablePanel
-      class="resizable__down"
+      v-else
+      class="resizable-h__down"
       :class="isExpanded ? '--expanded' : null"
       :is-expanded="isExpanded"
       @toggle-expand="toggleExpand"
@@ -38,6 +41,17 @@ export default {
       type: String,
       default: "h-rz",
     },
+    collapsable: {
+      type: Boolean,
+      default: false,
+    },
+    minHeightPercent: {
+      type: Number,
+      default: 50,
+    },
+    topPercentHeight: {
+      type: Number,
+    },
   },
   data() {
     return {
@@ -80,20 +94,35 @@ export default {
       });
     },
   },
+
   mounted() {
     this.resizer = this.$refs.resizableBar;
     this.upSide = this.resizer.previousElementSibling;
     this.downSide = this.resizer.nextElementSibling;
 
     this.limitElementHeight(this.upSide);
+    if (!this.collapsable) {
+      this.limitElementHeight(this.downSide);
+    }
 
     this.resizer.addEventListener(EVENT.MOUSE_DOWN, this.mouseDownHandler);
 
     const savedPosition = this.getPosition();
-    this.isExpanded = savedPosition?.isExpanded ?? false;
-    this.upSide.style.height = savedPosition?.isExpanded
-      ? savedPosition?.position
-      : "100%";
+    if (savedPosition) {
+      if (savedPosition.isExpanded) {
+        this.isExpanded = savedPosition.isExpanded;
+        this.upSide.style.height = savedPosition.position;
+      } else {
+        this.isExpanded = false;
+        this.upSide.style.height = "100%";
+      }
+    } else if (this.topPercentHeight) {
+      this.isExpanded = false;
+      this.upSide.style.height = `${this.topPercentHeight}%`;
+    } else {
+      this.isExpanded = false;
+      this.upSide.style.height = "100%";
+    }
   },
   destroyed() {
     this.resizer.removeEventListener(EVENT.MOUSE_DOWN, this.mouseDownHandler);
@@ -102,7 +131,7 @@ export default {
     savePosition() {},
     limitElementHeight(element) {
       element.style["max-height"] = "100%";
-      element.style["min-height"] = "50%";
+      element.style["min-height"] = `${this.minHeightPercent}%`;
     },
     savePositionOnStartResizing(e) {
       this.upSidePrevPosition = {
@@ -169,11 +198,11 @@ export default {
 $resizabla-bar-color: #6794fe;
 $collapsed-panel-height: 50px;
 $resizable-bar-width: $base-space;
-.resizable {
+.resizable-h {
   $this: &;
   display: flex;
-  justify-content: space-between;
   flex-direction: column;
+  justify-content: space-between;
   height: 100%;
   min-height: 0;
   width: 100%;
@@ -190,6 +219,8 @@ $resizable-bar-width: $base-space;
     margin-bottom: calc(-#{$resizable-bar-width} / 2);
     @include media("<desktop") {
       height: auto !important;
+      max-height: none !important;
+      min-height: auto !important;
     }
     .--h-resizing & {
       transition: none;
@@ -203,11 +234,17 @@ $resizable-bar-width: $base-space;
     flex-direction: column;
     justify-content: center;
     min-height: $collapsed-panel-height;
+    margin-top: calc(-#{$resizable-bar-width} / 2);
     &.panel {
       @include media(">=desktop") {
         border: none;
       }
     }
+    @include media("<desktop") {
+      height: auto !important;
+      max-height: none !important;
+      min-height: auto !important;
+    }
   }
 
   &__bar {

argilla-frontend/components/base/base-resizable/VerticalResizable.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="resizable" :class="resizing ? '--v-resizing' : ''">
-    <div class="resizable__left"><slot name="left" /></div>
+  <div class="resizable-v" :class="resizing ? '--v-resizing' : ''">
+    <div class="resizable-v__left"><slot name="left" /></div>
 
-    <div class="resizable__bar" ref="resizableBar">
-      <div class="resizable__bar__inner" />
+    <div class="resizable-v__bar" ref="resizableBar">
+      <div class="resizable-v__bar__inner" />
     </div>
 
-    <div class="resizable__right"><slot name="right" /></div>
+    <div class="resizable-v__right"><slot name="right" /></div>
     <slot></slot>
   </div>
 </template>
@@ -26,6 +26,13 @@ export default {
       type: String,
       default: "v-rz",
     },
+    minWidthPercent: {
+      type: Number,
+      default: 38,
+    },
+    leftPercentWidth: {
+      type: Number,
+    },
   },
   data() {
     return {
@@ -52,15 +59,17 @@ export default {
     const savedPosition = this.getPosition();
     if (savedPosition) {
       this.leftSide.style.width = savedPosition;
+    } else if (this.leftPercentWidth) {
+      this.leftSide.style.width = `${this.leftPercentWidth}%`;
     }
   },
   destroyed() {
     this.resizer.removeEventListener(EVENT.MOUSE_DOWN, this.mouseDownHandler);
   },
   methods: {
     limitElementWidth(element) {
-      element.style["max-width"] = "62%";
-      element.style["min-width"] = "38%";
+      element.style["max-width"] = `${100 - this.minWidthPercent}%`;
+      element.style["min-width"] = `${this.minWidthPercent}%`;
     },
     savePositionOnStartResizing(e) {
       this.leftSidePrevPosition = {
@@ -107,13 +116,17 @@ export default {
 $resizabla-bar-color: #6794fe;
 $resizable-bar-width: $base-space;
 
-.resizable {
+.resizable-v {
   $this: &;
   display: flex;
+  flex-direction: row;
   justify-content: space-between;
   height: 100%;
   min-height: 0;
   width: 100%;
+  @include media("<desktop") {
+    flex-direction: column;
+  }
   &.--v-resizing {
     user-select: none;
   }

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

@@ -11,7 +11,10 @@
         :datasetVectors="datasetVectors"
         :selectedRecords="selectedRecords"
         @on-select-record="onSelectedRecord"
-      />
+        ><template slot="intro">
+          <slot name="intro" />
+        </template>
+      </RecordFieldsHeader>
       <div class="record__content">
         <RecordFields
           :record="record"
@@ -48,7 +51,7 @@ export default {
   computed: {
     spanQuestionsAnswers() {
       return this.record?.questions
-        .filter((q) => q.isSpanType)
+        ?.filter((q) => q.isSpanType)
         .map((q) => ({
           id: q.id,
           answer: q.answer.values,
@@ -61,7 +64,7 @@ export default {
       handler() {
         if (
           this.record?.questions
-            .filter((q) => q.isSpanType)
+            ?.filter((q) => q.isSpanType)
             .some((q) => q.isAnswerModified)
         ) {
           this.onSelectedRecord(true);

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

@@ -83,7 +83,7 @@ export default {
   },
   computed: {
     spanQuestions() {
-      return this.record?.questions.filter((q) => q.isSpanType);
+      return this.record?.questions?.filter((q) => q.isSpanType);
     },
   },
 };
@@ -95,7 +95,5 @@ export default {
   flex-direction: column;
   gap: $base-space;
   min-width: 0;
-  height: 100%;
-  min-height: 0;
 }
 </style>

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

@@ -1,5 +1,6 @@
 <template>
   <div class="fields__header">
+    <slot name="intro"></slot>
     <div class="fields__header--left">
       <BaseCheckbox
         v-if="Array.isArray(selectedRecords)"

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

@@ -1,5 +1,6 @@
 <template>
   <span
+    v-if="record.status"
     :key="record.status"
     :class="['status-tag', getStatusInfo.class]"
     :title="getStatusInfo.name"

argilla-frontend/components/features/annotation/container/fields/custom-field/CustomField.vue

@@ -52,7 +52,7 @@ export default {
     },
     sdkRecord: {
       type: Object,
-      required: true,
+      default: () => ({}),
     },
   },
   computed: {