Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

app-project: Redesign how your stats are displayed on the classify page #6472

Open
wants to merge 18 commits into
base: master
Choose a base branch
from
Open

app-project: Redesign how your stats are displayed on the classify page #6472

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
4e1f716
create new YourProjectStats component with useSWR for data
goplayoutside3 Nov 15, 2024
015eaa1
create a stats container component and a RequireUser component
goplayoutside3 Nov 15, 2024
0a67bde
create ClassificationsChart component with VisX
goplayoutside3 Nov 15, 2024
d669f06
fix styling of ClassificationChart
goplayoutside3 Nov 15, 2024
abe26aa
remove all the legacy YourStats code
goplayoutside3 Nov 15, 2024
9468468
Delete FinishedForTheDay component per designer request
goplayoutside3 Nov 15, 2024
6db35bd
fix consistent returns warning
goplayoutside3 Nov 15, 2024
465891f
Merge branch 'master'
goplayoutside3 Nov 19, 2024
10a9912
add a mutate function for incrementing stats on classification
goplayoutside3 Nov 19, 2024
be27129
match Figma design and edit translation dictionaries
goplayoutside3 Nov 20, 2024
b8720b7
write unit tests for YourProjectStats
goplayoutside3 Nov 20, 2024
7705b3f
include mutate in the ClassifierWrapper useCallback
goplayoutside3 Nov 20, 2024
89251aa
be sure to increment session count on each classification
goplayoutside3 Nov 20, 2024
66ff700
add auth.checkCurrent() to usePanoptesAuth() hook
goplayoutside3 Nov 20, 2024
d7ec5b0
adjust layout of ClassifyPage
goplayoutside3 Nov 21, 2024
5624eb5
clean up translation keys
goplayoutside3 Nov 21, 2024
c59c58b
Merge branch 'master' into your-project-stats-refactor
goplayoutside3 Nov 21, 2024
89d5e36
Merge branch 'master' into your-project-stats-refactor
goplayoutside3 Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/app-project/public/locales/cs/screens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
"dismiss": "Tyto zprávy již nezobrazovat."
},
"YourStats": {
"title": "Statistiky projektu {{projectName}}"
"title": "Statistiky"
}
}
}
}
4 changes: 2 additions & 2 deletions packages/app-project/public/locales/de/screens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
"content": "Glückwunsch! Du hast den nächsten Workflow freigeschalten. Wenn Du lieber in diesem Workflow bleiben möchtest, kannst Du auswählen hier zu bleiben."
},
"YourStats": {
"title": "{{projectName}} Statistik"
"title": "Statistik"
}
}
}
}
22 changes: 4 additions & 18 deletions packages/app-project/public/locales/en/screens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,18 +55,7 @@
"title": "There was an error in the classifier :("
}
},
"FinishedForTheDay": {
"buttons": {
"stats": "See the stats"
},
"text": "Your answers are saved for the research team while you're working. See the project stats and return to the {{projectName}} home page.",
"title": "Finished for the day?",
"ProjectImage": {
"alt": "Image for {{projectName}}"
}
},
Comment on lines -58 to -67
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This component is deleted for good, so its translation keys are deleted throughout.

"RecentSubjects": {
"text": "Discuss a subject on Talk, or add it to your Favourites or a collection.",
"title": "Your recent classifications"
},
"WorkflowAssignmentModal": {
Expand All @@ -77,13 +66,10 @@
"title": "New Workflow Available"
},
"YourStats": {
"todaysCount": "Classifications today",
"totalCount": "Classifications total",
"text": "Keep up the great work!",
"title": "Your {{projectName}} statistics",
"DailyClassificationsChart": {
"title": "{{projectName}} daily classification counts"
}
"allTime": "All Time",
"lastSeven": "Last 7 Days",
"link": "See more",
"title": "Your Stats"
Comment on lines -80 to +72
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm able to reuse "title" in all languages, but the rest of the translation keys will be modified and/or deleted in Lokalise post-merge.

}
}
}
19 changes: 1 addition & 18 deletions packages/app-project/public/locales/es/screens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,18 +30,7 @@
"title": "Se ha producido un error en el clasificador :("
}
},
"FinishedForTheDay": {
"ProjectImage": {
"alt": "Imagen para {{projectName}}"
},
"buttons": {
"stats": "Ver las estadísticas"
},
"text": "Mientras estás trabajando, tus respuestas se guardan para el equipo de investigación. Mira las estadísticas del proyecto y vuelve a la página de inicio de {{projectName}}.",
"title": "¿Has terminado por hoy?"
},
"RecentSubjects": {
"text": "Comenta un objeto en Hablemos o añádelo a tus Favoritos o a una colección.",
"title": "Tus clasificaciones recientes"
},
"WorkflowAssignmentModal": {
Expand All @@ -52,13 +41,7 @@
"title": "Nuevo flujo de trabajo disponible"
},
"YourStats": {
"DailyClassificationsChart": {
"title": "Recuentos diarios de la clasificación de {{projectName}}"
},
"text": "¡Sigue con ese gran trabajo!",
"title": "Estadística de {{projectName}}",
"todaysCount": "Las clasificaciones de hoy",
"totalCount": "Total de clasificaciones"
"title": "Estadística"
}
},
"Home": {
Expand Down
22 changes: 2 additions & 20 deletions packages/app-project/public/locales/fr/screens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,19 +30,7 @@
"title": "Il y a eu une erreur avec le classificateur :("
}
},
"FinishedForTheDay": {
"ProjectImage": {
"alt": "Image pour {{projectName}}"
},
"buttons": {
"anotherProject": "Trouver un autre projet",
"stats": "Afficher les statistiques"
},
"text": "Vos réponses sont enregistrées pour l'équipe de recherche pendant que vous travaillez. Consultez les statistiques du projet et revenez à la page d'accueil de {{projectName}}.",
"title": "Terminé pour aujourd'hui?"
},
"RecentSubjects": {
"text": "Discutez d'un sujet sur Talk ou ajoutez-le à vos favoris ou à une collection.",
"title": "Vos classifications récentes"
},
"WorkflowAssignmentModal": {
Expand All @@ -53,13 +41,7 @@
"title": "Nouveau module disponible"
},
"YourStats": {
"DailyClassificationsChart": {
"title": "Nombre de classifications quotidiennes de {{projectName}}"
},
"text": "Continuez votre excellent travail !",
"title": "Statistiques de {{projectName}}",
"todaysCount": "Classifications d'aujourd'hui",
"totalCount": "Total des classifications"
"title": "Statistiques"
}
},
"Home": {
Expand Down Expand Up @@ -87,4 +69,4 @@
"title": "Discussions"
}
}
}
}
4 changes: 2 additions & 2 deletions packages/app-project/public/locales/hi/screens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
"dismiss": "मुझे आगे से संदेश ना दिखाएं"
},
"YourStats": {
"title": "{{projectName}} के आँकड़े"
"title": "आँकड़े"
}
}
}
}
4 changes: 2 additions & 2 deletions packages/app-project/public/locales/hr/screens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
"dismiss": "Ne pokazuj mi ove poruke u budućnosti."
},
"YourStats": {
"title": "{{projectName}} statistika"
"title": "statistika"
}
}
}
}
4 changes: 2 additions & 2 deletions packages/app-project/public/locales/it/screens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"dismiss": "Non mostrare più questi messaggi."
},
"YourStats": {
"title": "Statistiche {{projectName}}"
"title": "Statistiche"
}
}
}
}
4 changes: 2 additions & 2 deletions packages/app-project/public/locales/ja/screens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
"dismiss": "今後メッセージを表示しない"
},
"YourStats": {
"title": "{{projectName}} 統計"
"title": "統計"
}
}
}
}
4 changes: 2 additions & 2 deletions packages/app-project/public/locales/nl/screens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"title": "Je recente waarnemingen"
},
"YourStats": {
"title": "{{projectName}} statistieken"
"title": "statistieken"
}
}
}
}
4 changes: 2 additions & 2 deletions packages/app-project/public/locales/pl/screens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
},
"Classify": {
"YourStats": {
"title": "{{projectName}} statystyka"
"title": "statystyka"
}
}
}
}
22 changes: 2 additions & 20 deletions packages/app-project/public/locales/pt/screens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,19 +30,7 @@
"title": "Ocorreu um erro no classificador :("
}
},
"FinishedForTheDay": {
"ProjectImage": {
"alt": "Imagem para {{projectName}}"
},
"buttons": {
"anotherProject": "Encontrar outro projeto",
"stats": "Ver as estatísticas"
},
"text": "As suas respostas serão guardadas para a equipa de investigação enquanto não estiver a trabalhar. Veja as estatísticas do projeto e volte à página inicial de {{projectName}}.",
"title": "Terminou por hoje?"
},
"RecentSubjects": {
"text": "Fale sobre qualquer objeto em Conversar ou adicione-o aos favoritos ou a uma coleção.",
"title": "As suas classificações recentes"
},
"WorkflowAssignmentModal": {
Expand All @@ -53,13 +41,7 @@
"title": "Novo fluxo de trabalho disponível"
},
"YourStats": {
"DailyClassificationsChart": {
"title": "Número de classificações diárias de {{projectName}}"
},
"text": "Continue o bom trabalho!",
"title": "Estatísticas {{projectName}}",
"todaysCount": "Classificações de hoje",
"totalCount": "Total de classificações"
"title": "Estatísticas"
}
},
"Home": {
Expand Down Expand Up @@ -87,4 +69,4 @@
"title": "Debater"
}
}
}
}
4 changes: 2 additions & 2 deletions packages/app-project/public/locales/ru/screens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
"dismiss": "Не показывать больше"
},
"YourStats": {
"title": "{{projectName}} Статистика"
"title": "Статистика"
}
}
}
}
4 changes: 2 additions & 2 deletions packages/app-project/public/locales/sv/screens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
"dismiss": "Visa inte fler meddelanden."
},
"YourStats": {
"title": "{{projectName}} statistik"
"title": "statistik"
}
}
}
}
22 changes: 2 additions & 20 deletions packages/app-project/public/locales/test/screens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,19 +30,7 @@
"title": "Translated"
}
},
"FinishedForTheDay": {
"ProjectImage": {
"alt": "Translated {{projectName}}"
},
"buttons": {
"anotherProject": "Translated",
"stats": "Translated"
},
"text": "Translated {{projectName}} Translated",
"title": "Translated"
},
"RecentSubjects": {
"text": "Translated",
"title": "Translated"
},
"WorkflowAssignmentModal": {
Expand All @@ -53,13 +41,7 @@
"title": "Translated"
},
"YourStats": {
"DailyClassificationsChart": {
"title": "{{projectName}} Translated"
},
"text": "Translated",
"title": "Translated {{projectName}} Translated",
"todaysCount": "Translated",
"totalCount": "Translated"
"title": "Translated"
}
},
"Home": {
Expand Down Expand Up @@ -87,4 +69,4 @@
"title": "Translated"
}
}
}
}
19 changes: 1 addition & 18 deletions packages/app-project/public/locales/tr/screens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,18 +30,7 @@
"title": "Sınıflandırıcıda bir hata oluştu :("
}
},
"FinishedForTheDay": {
"ProjectImage": {
"alt": "{{projectName}} için resim"
},
"buttons": {
"stats": "İstatistikleri görün"
},
"text": "Siz çalışırken yanıtlarınız araştırma ekibi için kaydedilir. Proje istatistiklerini görün ve {{projectName}} ana sayfasına dönün.",
"title": "Bugünlük işiniz bitti mi?"
},
"RecentSubjects": {
"text": "Sohbet'te bir konuyu tartışın veya Favorilerinize ya da bir koleksiyona ekleyin.",
"title": "En son çalışmalarınız"
},
"WorkflowAssignmentModal": {
Expand All @@ -52,13 +41,7 @@
"title": "Yeni İş Akışı Mevcut"
},
"YourStats": {
"DailyClassificationsChart": {
"title": "{{projectName}} günlük sınıflandırma sayıları"
},
"text": "Böyle harika çalışmaya devam edin!",
"title": "{{projectName}} İstatistiğiniz",
"todaysCount": "Bugünün sınıflandırmaları",
"totalCount": "Toplam sınıflandırma"
"title": "İstatistiğiniz"
}
},
"Home": {
Expand Down
4 changes: 2 additions & 2 deletions packages/app-project/public/locales/zh-CN/screens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
},
"Classify": {
"YourStats": {
"title": "{{projectName}} 数据"
"title": "数据"
}
}
}
}
4 changes: 2 additions & 2 deletions packages/app-project/public/locales/zh-TW/screens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"title": "這些是你最近完成的分類"
},
"YourStats": {
"title": "{{projectName}} 數據"
"title": "數據"
}
}
}
}
3 changes: 2 additions & 1 deletion packages/app-project/src/hooks/usePanoptesAuth.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export default function usePanoptesAuth(userID) {
const [authorization, setAuthorization] = useState()

async function checkAuth() {
auth.checkCurrent()
const token = await auth.checkBearerToken()
Comment on lines +8 to 9
Copy link
Contributor Author

@goplayoutside3 goplayoutside3 Nov 21, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change is inspired by #6345. auth.checkCurrent() is required to resolve before auth.checkBearerToken() can be called. Without this pattern, there was sometimes a race condition where a user's stats displayed as 0 : 0.

Copy link
Contributor

@eatyourgreens eatyourgreens Nov 21, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You’ll need await auth.checkCurrent() here, otherwise the token can be empty for a signed-in user account.

front-end-monorepo/packages/lib-react-components/src/hooks/useUnreadMessages.js

Lines 20 to 21 in cb221b9

await auth.checkCurrent()
const token = await auth.checkBearerToken()

Copy link
Contributor

@eatyourgreens eatyourgreens Nov 22, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that I look at this hook again, it's broken. It saves the bearer token in component state, so that it gets reused even after it has expired. This hook won't refresh expired auth tokens. Panoptes refresh tokens are valid for something like 2 weeks, but auth tokens only last for two hours. Your code will work for the first two hours of any browser session, then stop fetching after that.

That's my fault. I think I wrote this before I properly understood how OAuth works.

Copy link
Contributor

@eatyourgreens eatyourgreens Nov 22, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useAuthToken, in the user library, will refresh tokens when they expire, or are about to expire. It's a variation on the usePrevious pattern. It returns the current, valid auth token, while silently refreshing a stale value in the background.

front-end-monorepo/packages/lib-user/src/hooks/usePanoptesAuthToken.js

Lines 1 to 36 in 1d48e37

import auth from "panoptes-client/lib/auth"
import { useState } from "react"
const isBrowser = typeof window !== "undefined"
let defaultToken
/*
See comments in https://github.com/zooniverse/front-end-monorepo/pull/6345
Top-level await in modules has been supported in Node
and in all browsers since 2021. However, ES modules are still
not supported in the monorepo. An immediately-invoked async
function is a workaround when top-level await is not supported.
https://v8.dev/features/top-level-await
*/
(async function getDefaultToken() {
defaultToken = null
if (isBrowser) {
await auth.checkCurrent()
defaultToken = await auth.checkBearerToken()
}
})()
export default function usePanoptesAuthToken() {
const [token, setToken] = useState(defaultToken)
async function fetchPanoptesAuthToken() {
await auth.checkCurrent()
const newToken = await auth.checkBearerToken()
if (newToken !== token) {
setToken(newToken)
}
}
fetchPanoptesAuthToken()
return token
}

const bearerToken = token ? `Bearer ${token}` : ''
setAuthorization(bearerToken)
Expand All @@ -15,4 +16,4 @@ export default function usePanoptesAuth(userID) {
}, [userID])

return authorization
}
}
Loading