Redesign /usage page

[ragesoss]

The /usage page has a lot of useful data, but it has never had any intentional design thought put into it.

Come up with a better layout. (Coming up with a good design is all that is required for this issue; implementing the design would be a separate issue.)

Current layout:

[mariahajmal]

Created below layout for Usage screen

[bwreid]

@mariahajmal This looks pretty great! For the "Courses/Programs per Wiki", we will need to include numbers next to each list item. Additionally, it might be nice to incorporate a way to filter the usage by dates that would update the relevant information. (Realistically, I think this would be a feature that is not needed at the moment, but since we're just designing right now, might as well include it.)

[ragesoss]

One thing to consider with this design: the courses/programs per wiki list needs to work when the list is very much longer than the one shown. Here's what it looks like now on Programs & Events Dashboard: https://outreachdashboard.wmflabs.org/usage

Currently, it's 103 wikis, and it'll grow a bit more over time. The count of programs per wiki is also key information, and that should factor into the design. I think the first thing I'd want to see is the option to sort that list of wikis alphabetically by language and then project (the current sort); by number of programs; or by project and then language (so that all the wikisource languages appear together, for instance).

Another thing to consider: is there anything that would be useful in understanding the overall usage stats that isn't here and ought to be added? What additional info would be interesting?

[RiaJha02]

Hello, I am new here! I would like to work on this issue, is it still open?

[ragesoss]

Yep, it's still open. go for it!

[RiaJha02]

Hello! I designed the layout attached below, please review it. Thanks!!

[ragesoss]

This is nice! I assume the color scheme and fine styling here isn't meant to reflect the intended design, and the point is to separate the different parts of the page into Material-style components (as used elsewhere on the site). This basic layout concept looks good; definitely an improvement on the current design.

[RiaJha02]

Sure, I'll update it! Thanks

[mariipia10]

Hi! I'm currently participating in outreachy and wanted to check if i can claim this issue if it's still open. Thanks!

[ragesoss]

@mariipia10 yes. There are a few designs that others have contributed, so taking the ideas you like from those and incorporating them into another iteration might be a good way to do it. (And implementing the design would be a good next step for an Outreachy application.)

[mariipia10]

@ragesoss perfect, i'll do my best. Thanks

[C-NikhilKarthik]

@ragesoss Hello, Can i work on this issue if it is still available?

[ragesoss]

@C-NikhilKarthik yes, go for it.

[C-NikhilKarthik]

@C-NikhilKarthik yes, go for it.

@ragesoss Can you please tell me where to find the jsx file for the /usage route

[ragesoss]

There is no jsx for the current /usage route. It's rendered server-side with a .haml template. If you want to work on it in React, you have a blank canvas!

[C-NikhilKarthik]

@ragesoss can i try to work on this by creating a jsx file? Or should I continue with the .haml file

[ragesoss]

@C-NikhilKarthik either one is fine. I think doing it in JSX will be a more flexible approach.

[C-NikhilKarthik]

Hello @ragesoss i am getting this error since i tried to update my linux. I had the server running properly before i tried to upgrade the linux version.

[ragesoss]

Looks like you're on the right track. This error is because the database credentials in database.yml don't provide access to your database server. You may need to manually add appropriate credentials to mysql. See the 'manual setup' section of setup.md for some guidance on how to fix that.

[C-NikhilKarthik]

Hello @ragesoss I was trying to use WSL, is this supposed to be the output for the commands yarn yarn build?

[ragesoss]

That all looks normal. I assume there was a little more output and then the yarn build command finished, after you took the screenshot.

On Wed, Mar 1, 2023, 10:06 PM C-NikhilKarthik @.***> wrote:

Hello @ragesoss https://github.com/ragesoss I was trying to use WSL, is this supposed to be the output for the commands yarn yarn build? [image: Screenshot (225)] https://user-images.githubusercontent.com/100520932/222344933-a7ccd39b-a19a-45cd-a704-b709d7c520f1.png

— Reply to this email directly, view it on GitHub https://github.com/WikiEducationFoundation/WikiEduDashboard/issues/2637#issuecomment-1451348776, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGPEYYHLUJ2ZIK2LDKIY4TW2A2HZANCNFSM4G64RLBA . You are receiving this because you were mentioned.Message ID: @.*** com>

[C-NikhilKarthik]

That all looks normal. I assume there was a little more output and then the yarn build command finished, after you took the screenshot. … On Wed, Mar 1, 2023, 10:06 PM C-NikhilKarthik @.> wrote: Hello @ragesoss https://github.com/ragesoss I was trying to use WSL, is this supposed to be the output for the commands yarn yarn build? [image: Screenshot (225)] https://user-images.githubusercontent.com/100520932/222344933-a7ccd39b-a19a-45cd-a704-b709d7c520f1.png — Reply to this email directly, view it on GitHub <#2637 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGPEYYHLUJ2ZIK2LDKIY4TW2A2HZANCNFSM4G64RLBA . You are receiving this because you were mentioned.Message ID: @. com>

yarn build command was not completing, it was only showing those 3 lines

[ragesoss]

Hmm... that's a problem I haven't seen before. Do you get a stack trace if you kill the process? I'm not sure what it might be getting stuck on.

[C-NikhilKarthik]

i am not getting any interrput messages when i stop the execution of yarn build And can i ask doubts in Zulip or any other method (like discord or mails ) or should i discuss the doubts here only?

[ragesoss]

If you let me know your email address, I can send you an invite to the slack chat for this project.

[C-NikhilKarthik]

If you let me know your email address, I can send you an invite to the slack chat for this project.

Sure sir, My email address is nikhilkarthik241103@gmail.com

[C-NikhilKarthik]

Hello @ragesoss can you please tell me where to find the /usage haml file so that i can replace it on my local system with a jsx file ( i understood the routing mechanism in this project for jsx files), sorry i was not able to contribute alot due to my semester exams.

[ragesoss]

It's app/views/analytics/usage.html.haml.

[satyadev2]

hey @ragesoss , I am an outreachy applicant 2023, may i work on it??

[ragesoss]

@satyadev2: Nikhil is working on this currently, although it's an open-ended issue and I'd welcome seeing multiple takes on it.

[HARSHITHASALADI1]

Sir,could you please assign me this issue?

[ragesoss]

@HARSHITHASALADI1 we do not assign issues, but you can post on a single issue to let others know that you are working on it. Please only work on one issue at a time.

[NoubissiViany]

hey @ragesoss , I am an outreachy applicant 2024, may i work on it??

Also, this is my email address: g696607013@gmail.com i will like to be invited to the slack chat for this project.

[ragesoss]

hey @ragesoss , I am an outreachy applicant 2024, may i work on it??

Also, this is my email address: g696607013@gmail.com i will like to be invited to the slack chat for this project.

I've sent an invite! You're welcome to give this issue a try.

[NoubissiViany]

Alright thanks

[Prakhart-debug]

Hey there @ragesoss , I stumbled upon this issue via the GSOC website and wanted to know if this issue is still open or not, and if it is, I'll like to join in and try to figure it out.

This is my email: prakhar.tripathi1@learner.manipal.edu And my LinkedIn

[ragesoss]

@Prakhart-debug I've sent you an invite. Yes, this one is still open.