[FEATURE-BRANCH] feat: dataset export to the Hub (#5730)

# Description This is the feature branch with the joining efforts (UI + Backend) for the new feature allowing users to export datasets from Argilla to the HF Hub. --------- Co-authored-by: Damián Pumar <[email protected]> Co-authored-by: Leire Aguirre <[email protected]>
argilla-io · Dec 17, 2024 · 9f839ce · 9f839ce
1 parent e3938e8
commit 9f839ce
Show file tree

Hide file tree

Showing 60 changed files with 3,349 additions and 508 deletions.
diff --git a/.github/workflows/argilla-frontend.yml b/.github/workflows/argilla-frontend.yml
@@ -48,7 +48,6 @@ jobs:
       - name: Build package 📦
         env:
           # BASE_URL is used in the server to support parameterizable base root path
-          # See scripts/build_frontend.sh
           BASE_URL: "@@baseUrl@@"
           DIST_FOLDER: ./dist
         run: |

diff --git a/.github/workflows/argilla-server.yml b/.github/workflows/argilla-server.yml
@@ -82,6 +82,8 @@ jobs:
         run: pdm install
 
       - name: Run tests 📈
+        env:
+          HF_TOKEN_ARGILLA_INTERNAL_TESTING: ${{ secrets.HF_TOKEN_ARGILLA_INTERNAL_TESTING }}
         run: |
           ARGILLA_DATABASE_URL=postgresql://postgres:postgres@localhost:5432/argilla
           ARGILLA_ELASTICSEARCH=http://localhost:9200

diff --git a/argilla-frontend/assets/css/fonts.css b/argilla-frontend/assets/css/fonts.css
@@ -1,7 +1,7 @@
 @font-face {
   font-family: "raptor_v2_premiumbold";
-  src: url("@/assets/fonts/raptorv2premium-bold-webfont.woff2") format("woff2"),
-    url("@/assets/fonts/raptorv2premium-bold-webfont.woff") format("woff");
+  src: url("/fonts/raptorv2premium-bold-webfont.woff2") format("woff2"),
+    url("/fonts/raptorv2premium-bold-webfont.woff") format("woff");
   font-weight: normal;
   font-style: normal;
 }
diff --git a/argilla-frontend/assets/icons/export.js b/argilla-frontend/assets/icons/export.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({
+  'export': {
+    width: 26,
+    height: 31,
+    viewBox: '0 0 26 31',
+    data: '<path pid="0" d="M19.852 7.734L17.92 9.666l-3.463-3.463V22.86h-2.732V6.203L8.262 9.666 6.33 7.734l6.761-6.76 6.76 6.76z" _fill="#000" fill-opacity=".87"/><path pid="1" d="M3.53 28.242V14.583h5.463v-2.732H.798v19.123h24.586V11.85h-8.195v2.732h5.463v13.659H3.53z" _fill="#000" fill-opacity=".87"/>'
+  }
+})
diff --git a/argilla-frontend/assets/icons/index.js b/argilla-frontend/assets/icons/index.js
@@ -19,6 +19,7 @@ require('./discard')
 require('./draggable')
 require('./expand-arrows')
 require('./exploration')
+require('./export')
 require('./external-link')
 require('./external')
 require('./filter')

diff --git a/argilla-frontend/assets/scss/abstract/placeholders/_tooltip.scss b/argilla-frontend/assets/scss/abstract/placeholders/_tooltip.scss
@@ -115,7 +115,7 @@ $tooltip-border-radius: $border-radius-s;
       height: auto;
       opacity: 1;
       transition: opacity 0.3s ease 0.2s;
-      z-index: 2;
+      z-index: 3;
     }
     &:before {
       opacity: 1;
@@ -177,6 +177,10 @@ $tooltip-border-radius: $border-radius-s;
       top: auto;
       transform: none;
     }
+  } @else if $position == "none" {
+    &:after {
+      display: none;
+    }
   }
   &:before {
     content: none !important;

diff --git a/argilla-frontend/assets/scss/base/base.scss b/argilla-frontend/assets/scss/base/base.scss
@@ -54,7 +54,7 @@ body {
 
 a,
 button {
-  color: var(--fg-secondary);
+  color: var(--fg-primary);
 }
 
 audio,

diff --git a/argilla-frontend/assets/styles.scss b/argilla-frontend/assets/styles.scss
@@ -0,0 +1,3 @@
+@import "./css/fonts.css";
+@import "./css/themes.css";
+@import "./scss/base/base.scss";
diff --git a/argilla-frontend/components/base/base-resizable/useResizable.ts b/argilla-frontend/components/base/base-resizable/useResizable.ts
@@ -17,7 +17,7 @@ export const useResizable = ({ id }: { id: string }) => {
 
     await debounce.wait();
 
-    const layout = get("layout");
+    const layout = get<Record<string, unknown>>("layout");
 
     set("layout", {
       ...layout,

diff --git a/argilla-frontend/components/base/base-switch/BaseSwitch.vue b/argilla-frontend/components/base/base-switch/BaseSwitch.vue
@@ -18,13 +18,13 @@
 <template>
   <div
     :class="{ disabled: !checked, 'disable-action': disableAction }"
-    class="re-switch"
+    class="switch"
   >
-    <label v-if="$slots.default" :for="id || name" class="re-switch-label">
+    <label v-if="$slots.default" :for="id || name" class="switch-label">
       <slot />
     </label>
-    <div class="re-switch-container" @click="toggle($event)">
-      <div class="re-switch-thumb" :style="styles">
+    <div class="switch-container" @click="toggle($event)">
+      <div class="switch-thumb" :style="styles">
         <input
           :id="id"
           type="checkbox"
@@ -33,7 +33,7 @@
           :value="value"
           tabindex="-1"
         />
-        <button :type="type" class="re-switch-holder">
+        <button :type="type" class="switch-holder">
           <svgicon width="10" height="10" name="check" color="white"></svgicon>
         </button>
       </div>
@@ -120,41 +120,41 @@ export default {
 $switch-width: 28px;
 $switch-height: 11px;
 $switch-thumb-size: 18px;
-.re-switch {
+.switch {
   display: flex;
   align-items: center;
   position: relative;
   &.disabled {
     svg {
       display: none;
     }
-    .re-switch-thumb {
+    .switch-thumb {
       background-color: #f0f0f0 !important;
     }
   }
   &.disable-action {
     opacity: 0.5;
     pointer-events: none;
     cursor: default;
-    .re-switch-thumb {
+    .switch-thumb {
       background-color: var(--color-white) !important;
       transform: translate3d(-1px, -50%, 0px) !important;
     }
     &:active {
-      .re-switch-thumb {
+      .switch-thumb {
         transform: translate3d(50%, -50%, 0px) !important;
       }
     }
   }
-  .re-switch-container {
+  .switch-container {
     width: $switch-width;
     height: $switch-height;
     position: relative;
     border-radius: $switch-height;
     transition: $swift-ease-out;
     background-color: var(--bg-opacity-20);
     cursor: pointer;
-    .re-switch-thumb {
+    .switch-thumb {
       width: $switch-thumb-size;
       height: $switch-thumb-size;
       position: absolute;
@@ -168,7 +168,7 @@ $switch-thumb-size: 18px;
       position: absolute;
       left: -999em;
     }
-    .re-switch-holder {
+    .switch-holder {
       @include absoluteCenter;
       width: $switch-thumb-size;
       height: $switch-thumb-size;
@@ -183,9 +183,9 @@ $switch-thumb-size: 18px;
       }
     }
   }
-  .re-switch-label {
+  .switch-label {
     margin-right: 1em;
-    color: var(--fg-secondary);
+    color: var(--fg-primary);
   }
 }
 </style>
diff --git a/argilla-frontend/components/base/base-toast/api.ts b/argilla-frontend/components/base/base-toast/api.ts
@@ -22,87 +22,18 @@ import eventBus from "./bus";
 export const toast = (globalOptions = {}) => {
   return {
     open(options) {
-      let message;
-      if (typeof options === "string") message = options;
-
-      const defaultOptions = {
-        message,
+      const props = {
+        ...globalOptions,
+        ...options,
       };
 
-      const propsData = Object.assign(
-        {},
-        defaultOptions,
-        globalOptions,
-        options
-      );
-
       return new (Vue.extend(Toast))({
         el: document.createElement("div"),
-        propsData,
+        propsData: props,
       });
     },
     clear() {
       eventBus.$emit("toast.clear");
     },
-    success(message, options = {}) {
-      return this.open(
-        Object.assign(
-          {},
-          {
-            message,
-            type: "success",
-          },
-          options
-        )
-      );
-    },
-    danger(message, options = {}) {
-      return this.open(
-        Object.assign(
-          {},
-          {
-            message,
-            type: "danger",
-          },
-          options
-        )
-      );
-    },
-    info(message, options = {}) {
-      return this.open(
-        Object.assign(
-          {},
-          {
-            message,
-            type: "info",
-          },
-          options
-        )
-      );
-    },
-    warning(message, options = {}) {
-      return this.open(
-        Object.assign(
-          {},
-          {
-            message,
-            type: "warning",
-          },
-          options
-        )
-      );
-    },
-    default(message, options = {}) {
-      return this.open(
-        Object.assign(
-          {},
-          {
-            message,
-            type: "default",
-          },
-          options
-        )
-      );
-    },
   };
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -54,7 +54,7 @@ body { @@
     a,
     button {
-      color: var(--fg-secondary);
+      color: var(--fg-primary);
     }
     audio,
@@ Expand Down @@