diff --git a/argilla-frontend/CHANGELOG.md b/argilla-frontend/CHANGELOG.md index 3bc635ca4e..88a0456446 100644 --- a/argilla-frontend/CHANGELOG.md +++ b/argilla-frontend/CHANGELOG.md @@ -16,6 +16,13 @@ These are the section headers that we use: ## [Unreleased]() +## [2.6.0](https://github.com/argilla-io/argilla/compare/v2.5.0...v2.6.0) + +### Added + +- Add share progress feature ([#5727](https://github.com/argilla-io/argilla/pull/5727)) +- Added feature to export datasets from Argilla to Hugging Face hub from the UI ([#5730](https://github.com/argilla-io/argilla/pull/5730)) + ### Fixed - Improved performance and accessibility ([#5724](https://github.com/argilla-io/argilla/pull/5724)) diff --git a/argilla-frontend/components/base/base-button/BaseButton.vue b/argilla-frontend/components/base/base-button/BaseButton.vue index 41704556d5..ee7a13a30e 100644 --- a/argilla-frontend/components/base/base-button/BaseButton.vue +++ b/argilla-frontend/components/base/base-button/BaseButton.vue @@ -25,6 +25,8 @@ :target="target" :rel="newRel" @click="onClick" + @mouseover="$emit('mouseover')" + @mouseleave="$emit('mouseleave')" > @@ -36,6 +38,8 @@ :loading="loading" :disabled="disabled" @click="onClick" + @mouseover="$emit('mouseover')" + @mouseleave="$emit('mouseleave')" > @@ -48,6 +52,8 @@ :type="type" :disabled="disabled" @click="onClick" + @mouseover="$emit('mouseover')" + @mouseleave="$emit('mouseleave')" > @@ -13,7 +15,7 @@ - - - {{ exportToHubForm.orgOrUsername }}/{{ - exportToHubForm.datasetName - }} - - + + + tablet") { diff --git a/argilla-frontend/components/features/annotation/header/header-bar/useExportToHubViewModel.ts b/argilla-frontend/components/features/annotation/header/header-bar/useExportToHubViewModel.ts index 98917787bd..2757ef8741 100644 --- a/argilla-frontend/components/features/annotation/header/header-bar/useExportToHubViewModel.ts +++ b/argilla-frontend/components/features/annotation/header/header-bar/useExportToHubViewModel.ts @@ -1,5 +1,5 @@ import { useResolve } from "ts-injecty"; -import { onBeforeMount, ref, computed } from "vue"; +import { onBeforeMount, ref, computed, watch } from "vue"; import { Dataset } from "~/v1/domain/entities/dataset/Dataset"; import { ExportDatasetToHubUseCase } from "~/v1/domain/usecases/export-dataset-to-hub-use-case"; import { JobRepository } from "~/v1/infrastructure/repositories"; @@ -20,6 +20,7 @@ export const useExportToHubViewModel = (props: ExportToHubProps) => { const { get, set } = useLocalStorage(); const isDialogOpen = ref(false); + const isDialogHovered = ref(false); const errors = ref({ orgOrUsername: [], datasetName: [], @@ -162,16 +163,41 @@ export const useExportToHubViewModel = (props: ExportToHubProps) => { const closeDialog = () => { isDialogOpen.value = false; + isDialogHovered.value = false; }; + const openDialogOnHover = () => { + if (isExporting.value) { + isDialogHovered.value = true; + } + }; + + const closeDialogOnLeave = () => { + if (isExporting.value && !isDialogOpen.value) { + isDialogHovered.value = false; + } + }; + + const isDialogVisible = computed( + () => isDialogOpen.value || isDialogHovered.value + ); + + watch(isExporting, (newValue) => { + if (!newValue) { + closeDialog(); + } + }); + onBeforeMount(() => { watchExportStatus(); }); return { - isDialogOpen, + isDialogVisible, closeDialog, openDialog, + openDialogOnHover, + closeDialogOnLeave, isExporting, exportToHub, exportToHubForm, diff --git a/argilla-frontend/components/features/annotation/progress/AnnotationProgress.vue b/argilla-frontend/components/features/annotation/progress/AnnotationProgress.vue index d6c1cab57b..e101f93583 100644 --- a/argilla-frontend/components/features/annotation/progress/AnnotationProgress.vue +++ b/argilla-frontend/components/features/annotation/progress/AnnotationProgress.vue @@ -22,16 +22,19 @@ v-if="!metrics.hasMetrics" class="my-progress__status--skeleton" /> - + + + + - + + diff --git a/argilla-frontend/components/features/annotation/progress/share/useShareViewModel.ts b/argilla-frontend/components/features/annotation/progress/share/useShareViewModel.ts new file mode 100644 index 0000000000..f022a34e06 --- /dev/null +++ b/argilla-frontend/components/features/annotation/progress/share/useShareViewModel.ts @@ -0,0 +1,106 @@ +import { onBeforeMount, ref } from "vue"; +import { useUser } from "~/v1/infrastructure/services"; +import { useClipboard } from "~/v1/infrastructure/services/useClipboard"; +import { useDataset } from "~/v1/infrastructure/storage/DatasetStorage"; +import { useMetrics } from "~/v1/infrastructure/storage/MetricsStorage"; +import { useTeamProgress } from "~/v1/infrastructure/storage/TeamProgressStorage"; + +export const useShareViewModel = () => { + const { copy } = useClipboard(); + const { user } = useUser(); + const { state: metrics } = useMetrics(); + const { state: dataset } = useDataset(); + const { state: progress } = useTeamProgress(); + + const isDialogOpen = ref(false); + const sharingImage = ref<{ + src: string; + loaded: boolean; + }>({ + src: "", + loaded: false, + }); + + const copyOnClipboard = () => { + closeDialog(); + + const url = new URL(`${window.location.origin}/share-your-progress`); + const params = new URLSearchParams(""); + 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); + + url.search = params.toString(); + + const textToCopy = `I've just contributed ${ + metrics.submitted + } examples to this dataset: + +${url.toString()}`; + + copy(textToCopy); + }; + + const createImageLink = () => { + const url = new URL("https://argilla.imglab-cdn.net/dibt/dibt_v2.png"); + const params = new URLSearchParams(url.search); + params.set("width", "1200"); + params.set("text-width", "700"); + params.set("text-height", "590"); + params.set("text-padding", "60"); + params.set("text-color", "39,71,111"); + params.set("text-x", "460"); + params.set("text-y", "40"); + + params.set( + "text", + `@${user.value.userName} +I've just contributed ${metrics.submitted} examples to this dataset: +${dataset.name} + +Team progress +${progress.percentage.completed}%` + ); + + return `${url.origin}${url.pathname}?${params.toString()}`; + }; + + const openDialog = () => { + setPreloadedImage(); + + isDialogOpen.value = true; + }; + + const closeDialog = () => { + isDialogOpen.value = false; + }; + + const setPreloadedImage = () => { + sharingImage.value.loaded = false; + + const image = createImageLink(); + + const preFetchImage = new Image(); + preFetchImage.src = image; + preFetchImage.onload = () => { + sharingImage.value = { + src: image, + loaded: true, + }; + }; + }; + + onBeforeMount(() => { + setPreloadedImage(); + }); + + return { + sharingImage, + isDialogOpen, + openDialog, + closeDialog, + copyOnClipboard, + }; +}; diff --git a/argilla-frontend/components/features/annotation/progress/status-counter/StatusCounter.vue b/argilla-frontend/components/features/annotation/progress/status-counter/StatusCounter.vue index 8215ec5f65..258c04fe6a 100644 --- a/argilla-frontend/components/features/annotation/progress/status-counter/StatusCounter.vue +++ b/argilla-frontend/components/features/annotation/progress/status-counter/StatusCounter.vue @@ -1,5 +1,5 @@ - + @@ -7,7 +7,6 @@ - +
- - {{ exportToHubForm.orgOrUsername }}/{{ - exportToHubForm.datasetName - }} - -