🐛 Fix progress and metrics (#5391)

Co-authored-by: Leire Aguirre <[email protected]>

argilla-frontend/components/features/annotation/progress/AnnotationProgress.vue

@@ -18,17 +18,17 @@
 <template>
   <div class="my-progress__container">
     <TeamProgress :datasetId="datasetId" />
-
-    <li class="my-progress__item">
-      <span>
-        <span
-          class="color-bullet"
-          :style="{ backgroundColor: RecordStatus.submitted.color }"
-        ></span>
-        <label class="my-progress__name" v-text="RecordStatus.submitted.name" />
-      </span>
-      <span class="my-progress__counter" v-text="metrics.submitted" />
-    </li>
+    <StatusCounterSkeleton
+      v-if="!metrics.hasMetrics"
+      class="my-progress__status--skeleton"
+    />
+    <StatusCounter
+      v-else
+      class="my-progress__status"
+      :color="RecordStatus.submitted.color"
+      :name="RecordStatus.submitted.name"
+      :value="metrics.submitted"
+    />
   </div>
 </template>
 
@@ -55,15 +55,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$bullet-size: 8px;
-.color-bullet {
-  display: inline-flex;
-  height: $bullet-size;
-  width: $bullet-size;
-  margin-right: 4px;
-  border-radius: $border-radius-rounded;
-}
-
+$statusCounterMinWidth: 110px;
+$statusCounterMinHeight: 30px;
 .my-progress {
   &__container {
     width: 100%;
@@ -72,24 +65,11 @@ $bullet-size: 8px;
     justify-content: space-between;
     margin-right: $base-space * 2;
   }
-  &__item {
-    display: flex;
-    flex-direction: row;
-    gap: $base-space;
-    padding: $base-space;
-    width: auto;
-    background: $black-3;
-    border-radius: $border-radius;
-  }
-  &__name {
-    text-transform: capitalize;
-    color: $black-54;
-    @include font-size(12px);
-  }
-  &__counter {
-    font-weight: 600;
-    color: $black-87;
-    @include font-size(14px);
+  &__status {
+    &--skeleton {
+      min-width: $statusCounterMinWidth;
+      min-height: $statusCounterMinHeight;
+    }
   }
 }
 </style>

argilla-frontend/components/features/annotation/progress/AnnotationProgressDetailed.vue

@@ -16,22 +16,25 @@
   -->
 
 <template>
-  <div v-if="metrics.hasMetrics">
+  <div>
     <ul class="my-progress__list">
-      <li
-        v-for="(status, index) in progressItems"
-        :key="index"
-        class="my-progress__list__item"
-      >
-        <span>
-          <span
-            class="color-bullet"
-            :style="{ backgroundColor: status.color }"
-          ></span>
-          <label class="my-progress__list__name" v-text="status.name" />
-        </span>
-        <span class="my-progress__list__counter" v-text="status.value" />
-      </li>
+      <template v-if="!metrics.hasMetrics">
+        <StatusCounterSkeleton
+          v-for="(status, index) in progressItems"
+          :key="index"
+          class="my-progress__status--skeleton"
+        />
+      </template>
+      <template v-else>
+        <StatusCounter
+          v-for="(status, index) in progressItems"
+          :key="index"
+          class="my-progress__status"
+          :color="status.color"
+          :name="status.name"
+          :value="status.value"
+        />
+      </template>
     </ul>
     <p class="team-progress__title" v-text="$t('metrics.progress.team')" />
     <TeamProgress
@@ -94,7 +97,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$bullet-size: 8px;
+$statusCounterMinHeight: 60px;
 .my-progress {
   display: flex;
   align-items: center;
@@ -112,39 +115,23 @@ $bullet-size: 8px;
     font-weight: 500;
   }
 }
-.color-bullet {
-  display: inline-flex;
-  height: $bullet-size;
-  width: $bullet-size;
-  margin-right: 4px;
-  border-radius: $border-radius-rounded;
-}
 
-.my-progress__list {
-  display: flex;
-  list-style: none;
-  gap: $base-space;
-  padding-left: 0;
-  margin-top: 0;
-  margin-bottom: $base-space * 3;
-  &__item {
-    background: $black-3;
+.my-progress {
+  &__list {
     display: flex;
-    flex-direction: column;
+    list-style: none;
     gap: $base-space;
-    padding: $base-space;
-    width: 100%;
-    border-radius: $border-radius;
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: $base-space * 3;
   }
-  &__name {
-    text-transform: capitalize;
-    color: $black-54;
-    @include font-size(12px);
+  &__status.status-counter {
+    flex-direction: column;
+    width: 100%;
   }
-  &__counter {
-    font-weight: 600;
-    color: $black-87;
-    @include font-size(14px);
+  &__status--skeleton {
+    @extend .my-progress__status;
+    height: $statusCounterMinHeight;
   }
 }
 </style>

argilla-frontend/components/features/annotation/progress/TeamProgress.vue

@@ -1,19 +1,25 @@
 <template>
   <div class="team-progress">
-    <BaseLinearProgress
+    <BaseLinearProgressSkeleton
+      v-if="!progress.hasMetrics"
       class="team-progress__bar"
-      :progress-ranges="progressRanges"
-      :progress-max="progress.total"
-      :show-tooltip="showTooltip"
-      :tooltip-position-fixed="false"
-      :show-percent-in-tooltip="false"
     />
-    <span class="team-progress__percent"
-      >{{ progress.percentage.completed }}%</span
-    >
-    <span v-if="visibleProgressValues" class="team-progress__info">
-      {{ progress.completed }} of {{ progress.total }}
-    </span>
+    <template v-else>
+      <BaseLinearProgress
+        class="team-progress__bar"
+        :progress-ranges="progressRanges"
+        :progress-max="progress.total"
+        :show-tooltip="showTooltip"
+        :tooltip-position-fixed="false"
+        :show-percent-in-tooltip="false"
+      />
+      <span class="team-progress__percent"
+        >{{ progress.percentage.completed }}%</span
+      >
+      <span v-if="visibleProgressValues" class="team-progress__info">
+        {{ progress.completed }} of {{ progress.total }}
+      </span>
+    </template>
   </div>
 </template>
 

argilla-frontend/components/features/annotation/progress/status-counter/StatusCounter.vue

@@ -0,0 +1,58 @@
+<template>
+  <li class="status-counter">
+    <span>
+      <span class="color-bullet" :style="{ backgroundColor: color }"></span>
+      <label class="status-counter__name" v-text="name" />
+    </span>
+    <span class="status-counter__counter" v-text="value" />
+  </li>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: Number,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+$bullet-size: 8px;
+.color-bullet {
+  display: inline-flex;
+  height: $bullet-size;
+  width: $bullet-size;
+  margin-right: 4px;
+  border-radius: $border-radius-rounded;
+}
+.status-counter {
+  display: flex;
+  flex-direction: row;
+  gap: $base-space;
+  padding: $base-space;
+  background: $black-3;
+  border-radius: $border-radius;
+
+  &__name {
+    text-transform: capitalize;
+    color: $black-54;
+    @include font-size(12px);
+  }
+  &__counter {
+    font-weight: 600;
+    color: $black-87;
+    @include font-size(14px);
+  }
+}
+</style>

argilla-frontend/components/features/annotation/progress/status-counter/StatusCounterSkeleton.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="status-counter"></div>
+</template>
+
+<style scoped lang="scss">
+$progressBackgroundColor: #f2f2f2;
+.status-counter {
+  background: $black-3;
+  border-radius: $border-radius;
+  animation-duration: 0.5s;
+  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: linear-gradient(
+    to right,
+    $progressBackgroundColor 0%,
+    darken($progressBackgroundColor, 3%) 50%,
+    $progressBackgroundColor 100%
+  );
+  background-size: 200% 100%;
+
+  @keyframes skeletonBg {
+    0% {
+      background-position: 100% 0;
+    }
+    100% {
+      background-position: -100% 0;
+    }
+  }
+}
+</style>

argilla-frontend/v1/domain/entities/dataset/Metrics.test.ts

@@ -10,7 +10,13 @@ describe("Metrics", () => {
       expect(result).toBeTruthy();
     });
     it("should return false when there are no records", () => {
-      const metrics = new Metrics(0, 0, 0, 0, 0);
+      const metrics = new Metrics(
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined
+      );
 
       const result = metrics.hasMetrics;
 

argilla-frontend/v1/domain/entities/dataset/Metrics.ts

@@ -6,13 +6,17 @@ export class Metrics {
     discarded: number;
   };
 
+  public readonly hasMetrics: boolean;
+
   constructor(
     public readonly total: number,
     public readonly submitted: number,
     public readonly discarded: number,
     public readonly draft: number,
     public readonly pending: number
   ) {
+    this.hasMetrics = total >= 0;
+
     this.percentage = {
       pending: (this.pending * 100) / this.total,
       draft: (this.draft * 100) / this.total,
@@ -21,10 +25,6 @@ export class Metrics {
     };
   }
 
-  get hasMetrics() {
-    return this.total > 0;
-  }
-
   get responded() {
     return this.submitted + this.discarded + this.draft;
   }

argilla-frontend/v1/domain/entities/dataset/Progress.ts

@@ -4,11 +4,15 @@ export class Progress {
     completed: string;
   };
 
+  public readonly hasMetrics: boolean;
+
   constructor(
     public readonly total: number,
     public readonly completed: number,
     public readonly pending: number
   ) {
+    this.hasMetrics = total >= 0;
+
     this.percentage = {
       pending: ((this.pending * 100) / this.total).toFixed(2),
       completed: ((this.completed * 100) / this.total).toFixed(2),