✨ Show share button at least 1 submitted and show rainbow every 20 su…

…bmitted
argilla-io · Dec 5, 2024 · f9d44ec · f9d44ec
1 parent 5ef4913
commit f9d44ec
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/argilla-frontend/components/features/annotation/progress/AnnotationProgress.vue b/argilla-frontend/components/features/annotation/progress/AnnotationProgress.vue
@@ -23,9 +23,9 @@
       class="my-progress__status--skeleton"
     />
     <div v-else class="my-progress__share">
-      <Share />
+      <Share v-if="canSeeShare" />
       <StatusCounter
-        :rainbow="true"
+        :rainbow="shouldShowSubmittedAnimation"
         class="my-progress__status"
         :color="RecordStatus.submitted.color"
         :name="RecordStatus.submitted.name"
@@ -77,6 +77,7 @@ $statusCounterMinHeight: 30px;
     width: 100%;
     display: flex;
     align-items: center;
+    justify-content: end;
     gap: $base-space;
   }
 }

diff --git a/argilla-frontend/components/features/annotation/progress/share/useShareViewModel.ts b/argilla-frontend/components/features/annotation/progress/share/useShareViewModel.ts
@@ -26,7 +26,9 @@ export const useShareViewModel = () => {
 
     const url = new URL(`${window.location.origin}/share`);
     const params = new URLSearchParams("");
-    params.set("share_image_base64", btoa(createImageLink()));
+    params.set("user_name", user.value.userName);
+    params.set("records_submitted", metrics.submitted.toString());
+    params.set("team_progress", progress.percentage.completed.toString());
     params.set("dataset_name", dataset.name);
     params.set("dataset_id", dataset.id);
 

diff --git a/argilla-frontend/components/features/annotation/progress/useAnnotationProgressViewModel.ts b/argilla-frontend/components/features/annotation/progress/useAnnotationProgressViewModel.ts
@@ -1,4 +1,4 @@
-import { onBeforeMount } from "vue-demi";
+import { computed, onBeforeMount } from "vue-demi";
 import {
   useEvents,
   UpdateMetricsEventHandler,
@@ -7,12 +7,18 @@ import { useMetrics } from "~/v1/infrastructure/storage/MetricsStorage";
 
 export const useAnnotationProgressViewModel = () => {
   const { state: metrics } = useMetrics();
+  const canSeeShare = computed(() => metrics.submitted > 0);
+  const shouldShowSubmittedAnimation = computed(
+    () => metrics.submitted % 20 === 0
+  );
 
   onBeforeMount(() => {
     useEvents(UpdateMetricsEventHandler);
   });
 
   return {
     metrics,
+    canSeeShare,
+    shouldShowSubmittedAnimation,
   };
 };