💈 feat: dataset overall progress component

CHANGELOG.md

@@ -18,6 +18,7 @@ These are the section headers that we use:
 
 ### Added
 
+- Added overall progress bar on `Datasets` table ([#4696](https://github.com/argilla-io/argilla/pull/4696))
 - Added German language translation ([#4688](https://github.com/argilla-io/argilla/pull/4688))
 
 ### Changed

frontend/components/base/base-progress/BaseLinearProgress.vue

@@ -0,0 +1,179 @@
+<template>
+  <transition appear :duration="500" name="animate-progress">
+    <div class="progress__wrapper">
+      <div class="progress__container">
+        <div
+          v-for="(range, index) in filteredProgressRanges"
+          :key="range.name"
+          role="progressbar"
+          :class="[
+            'progress__range',
+            showTooltip ? 'progress__range--with-tooltip' : null,
+          ]"
+          :style="{
+            width: `${getPercentage(range.value)}%`,
+            zIndex: filteredProgressRanges.length - index,
+          }"
+          @mouseenter="hoveredRange = range"
+          @mouseleave="hoveredRange = null"
+        >
+          <div
+            class="progress__bar"
+            :style="{ backgroundColor: range.color }"
+          ></div>
+        </div>
+      </div>
+      <template v-if="showTooltip && !!hoveredRange">
+        <span
+          class="progress__tooltip__triangle"
+          :style="{ left: `${getTrianglePosition(hoveredRange)}%` }"
+        />
+        <div class="progress__tooltip">
+          <span
+            class="progress__tooltip__percent-info"
+            v-text="
+              `${hoveredRange.name}: ${getPercentage(hoveredRange.value)}%`
+            "
+          />
+          {{ hoveredRange.tooltip }}
+        </div>
+      </template>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  props: {
+    showTooltip: {
+      type: Boolean,
+      default: false,
+    },
+    progressMax: {
+      type: Number,
+      default: 100,
+    },
+    progressRanges: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      hoveredRange: null,
+    };
+  },
+  computed: {
+    filteredProgressRanges() {
+      return this.progressRanges.filter((range) => range.value > 0);
+    },
+  },
+  methods: {
+    getPercentage(value) {
+      return ((value / this.progressMax) * 100).toFixed();
+    },
+    getTrianglePosition(range) {
+      if (!range) return;
+
+      return this.getPercentage(
+        range.value / 2 + this.getPreviousRangesPercent(range)
+      );
+    },
+    getPreviousRangesPercent(range) {
+      return this.filteredProgressRanges
+        .slice(0, this.filteredProgressRanges.indexOf(range))
+        .reduce((acc, r) => acc + r.value, 0);
+    },
+  },
+};
+</script>
+
+<styles lang="scss" scoped>
+$progressHeight: 12px;
+$tooltipBackgroundColor: palette(grey, 600);
+$tooltipTriangleSize: 5px;
+$borderRadius: 10px;
+
+.progress {
+  $this: &;
+  &__wrapper {
+    position: relative;
+  }
+  &__container {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: $progressHeight;
+    border-radius: $borderRadius;
+    overflow: hidden;
+  }
+  &__bar {
+    position: relative;
+    height: 100%;
+    border-radius: $borderRadius;
+    margin: 0 -4px;
+    box-shadow: 0 0 0 1px palette(white);
+    z-index: 1;
+    &:after {
+      content: "";
+      opacity: 0;
+    }
+  }
+  &__tooltip {
+    position: absolute;
+    display: flex;
+    justify-content: space-between;
+    gap: $base-space;
+    white-space: nowrap;
+    min-width: 180px;
+    bottom: calc(100% + #{$tooltipTriangleSize} + 2px);
+    left: 50%;
+    transform: translateX(-50%);
+    padding: calc($base-space / 2);
+    background: $tooltipBackgroundColor;
+    color: $black-54;
+    border-radius: $border-radius;
+    transition: opacity 0.2s 0.2s;
+    @include font-size(12px);
+    &__percent-info {
+      font-weight: 600;
+      text-transform: capitalize;
+    }
+    &__triangle {
+      opacity: 1;
+      position: absolute;
+      bottom: calc(100% - #{$tooltipTriangleSize} + 2px);
+      left: 50%;
+      transform: translateX(-50%);
+      border-width: $tooltipTriangleSize;
+      border-style: solid;
+      border-color: $tooltipBackgroundColor transparent transparent transparent;
+      transition: opacity 0.2s 0.2s;
+    }
+  }
+  &__range {
+    &:last-of-type:not(:first-of-type) {
+      #{$this}__bar {
+        margin: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        box-shadow: none;
+        z-index: 0;
+      }
+    }
+  }
+}
+.animate-progress-enter-active,
+.animate-progress-leave-active {
+  .progress__range {
+    max-width: 0;
+  }
+}
+.animate-progress-enter-to,
+.animate-progress-leave-to {
+  .progress__range {
+    max-width: 100%;
+    transition: all 0.5s $cb-slow;
+  }
+}
+</styles>

frontend/components/base/base-progress/BaseLinearProgressSkeleton.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="progress__wrapper">
+    <div class="progress__skeleton"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<styles lang="scss" scoped>
+$progressHeight: 12px;
+$progressBackgroundColor: #f2f2f2;
+$borderRadius: 10px;
+
+.progress__wrapper {
+  height: $progressHeight;
+  border-radius: $borderRadius;
+}
+.progress__skeleton {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: $progressHeight;
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: skeletonBg;
+  animation-timing-function: cubic-bezier(0.2, 0.7, 0.8, 0.7);
+  background: $progressBackgroundColor;
+  background: linear-gradient(
+    to right,
+    $progressBackgroundColor 0%,
+    darken($progressBackgroundColor, 10%) 50%,
+    $progressBackgroundColor 100%
+  );
+  background-size: 200% 100%;
+  border-radius: $borderRadius;
+}
+
+@keyframes skeletonBg {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
+</styles>

frontend/components/base/base-table/BaseTableInfo.vue

@@ -24,7 +24,7 @@
             <div
               v-for="(column, key) in columns"
               :key="key"
-              class="table-info__item__col"
+              :class="[`table-info__item__col`, column.class]"
             >
               <lazy-table-filtrable-column
                 :column="column"
@@ -65,7 +65,7 @@
                 <span
                   v-for="(column, idx) in columns"
                   :key="idx"
-                  class="table-info__item__col"
+                  :class="[`table-info__item__col`, column.class]"
                 >
                   <span :class="column.class">
                     <a
@@ -89,6 +89,9 @@
                         </base-button>
                       </base-action-tooltip>
                     </span>
+                    <span v-else-if="column.type === 'progress'">
+                      <DatasetProgress :dataset="item" />
+                    </span>
                     <base-date
                       format="date-relative-now"
                       v-else-if="column.type === 'date'"
@@ -453,13 +456,14 @@ export default {
     }
   }
   &__item {
-    background: palette(white);
     position: relative;
-    list-style: none;
-    padding: 2em 5em 2em 2em;
     display: flex;
+    align-items: center;
+    background: palette(white);
+    list-style: none;
+    padding-inline: $base-space * 3 $base-space * 8;
     width: 100%;
-    align-items: flex-start;
+    min-height: $base-space * 10;
     text-decoration: none;
     outline: none;
     border: 1px solid palette(grey, 700);
@@ -475,6 +479,9 @@ export default {
         min-width: auto;
         flex-grow: 1.5;
       }
+      &.progress {
+        min-width: 160px;
+      }
     }
     .svg-icon {
       margin-right: $base-space;

frontend/components/features/datasets/datasets-table/DatasetsTable.vue

@@ -67,11 +67,10 @@ export default {
           filtrable: "true",
         },
         {
-          name: this.$t("datasetTable.tags"),
-          field: "tags",
-          class: "text",
-          type: "object",
-          filtrable: "true",
+          name: "Global progress",
+          field: "progress",
+          class: "progress",
+          type: "progress",
         },
         {
           name: this.$t("datasetTable.createdAt"),

frontend/components/features/datasets/datasets-table/dataset-progress/DatasetProgress.vue

@@ -0,0 +1,53 @@
+<template>
+  <BaseLinearProgressSkeleton
+    v-if="$fetchState.pending"
+    class="dataset-progress__bar"
+  />
+  <transition v-else-if="!!progress" name="fade" appear>
+    <div class="dataset-progress">
+      <p class="dataset-progress__pending-info">
+        {{ progress.pending }} {{ $t("datasets.left") }}
+      </p>
+      <BaseLinearProgress
+        class="dataset-progress__bar"
+        :progress-ranges="progressRanges"
+        :progress-max="progress.total"
+        :show-tooltip="true"
+      />
+    </div>
+  </transition>
+</template>
+
+<script>
+import { useDatasetProgressViewModel } from "./useDatasetProgressViewModel";
+
+export default {
+  props: {
+    dataset: {
+      type: Object,
+    },
+  },
+  setup(props) {
+    return useDatasetProgressViewModel(props);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dataset-progress {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: calc($base-space / 2);
+  max-width: 160px;
+  &__bar {
+    width: 100%;
+    max-width: 160px;
+  }
+  &__pending-info {
+    color: $black-37;
+    @include font-size(12px);
+    margin: 0 0 0 auto;
+  }
+}
+</style>