[Feature request] Dashboard facelift

[jmuchovej]

Probably a low-priority thing, but I've found the dashboard experience to be rather overwhelming. 😅 I'm considering taking some time to give it a "quick" facelift, but was also considering the possibility of adding Vue.js – so that it might be able to update on-the-fly without needing a page-reload.

Considering I'm not intending to become a long-term maintainer of the web front-end, would you be open to using Vue.js (not added local installs, would use the CDN package in HTML) or would you rather see the dashboard keep current implementation? (Regardless of your answer, I intend to propose the facelift in a PR, I just want to know which tech-stack to use.)

[deargle]

lol it already does use Vue!

[deargle]

@evankirkiles started a dashboard facelift too, and he showed me a screenshot of it. Evan, do you want to show what you've done already?

[jmuchovej]

😂 looks like the files I looked at didn't match my Vue pattern-matcher. I see now. 😅

Is @evankirkiles' screenshot on a live branch/issue/PR?

[deargle]

No, he sent it to me on slack.

[deargle]

btw I do know how to do the more fully-integrated Vue.js stuff, but like you, I thought it might be too complex to maintain and for others to potentially contribute if there was a webpack build step etc.

[jmuchovej]

so, i would think that having a more Vue-integrated setup/build system would actually make things a bit easier (given how well-documented Vue.js tends to be, both on their docs and across things like SO). maybe it's my initial web background, but i found Vue to be really straightforward to learn. if there were more instructions on how to get setup (or even a Docker container), i'd hope things would be "even easier". 😅 but i can't speak to how complex it would be to maintain. 😕

i'm in the process of putting together a docker container strictly for psiturk, so a long of the dependencies could be packaged in there, too.

[deargle]

I don't think psiturk needs a docker container right now -- a python virtualenv is good enough, and docker adds another layer of complexity for many grad student users who have a hard enough time with the basics. Start adding npm on top, and yeah docker becomes helpful, but still not especially much since npm/yarn abstract away so much. What do you have in mind that you think dockerizing things would help users? Maybe I'm overlooking something.

Also, yeah, my integration of Vue is a mess, granted -_-

What about the current UI do you feel is overwhelming? I can't remember if I released it already, but @evankirkiles made some monstrous api speed improvements by tweaking the underlying db calls (speeds up the shell big time, too!). If it's just speed of loading hits, that could be done already. And yeah, I didn't focus much at all on looks. Just did the vue tables, bootstrap grid, underlying rest api.

Sorry for spam close/open below, fat fingered.

[jmuchovej]

What do you have in mind that you think dockerizing things would help users?

My goal with dockerizing things had less to do with being "helpful to users" are more to do with "being helpful to me". The more I can run in Docker/Singularity containers, the better (personal opinion). I've run into plenty of issues with Anaconda and even more with virtualenvs. (Also helps with the computational side of reproducibility.)

... docker adds another layer of complexity for many grad student users who have a hard enough time with the basics.

Totally fair, I definitely sympathize, but in my experience (albeit with comp sci undergrads), pointing folks to the Docker "getting started" pages, then giving them "do steps 1, 2, 3" was normally sufficient (particularly on MacOS and Windows). Docker is an added overhead, but it also allows psiTurk to exist outside of a project's virtualenv (which is a bonus, I think). While I'm not totally familiar with how Heroku runs their Docker services, it could be useful to have there (though at this point I could be grasping in the dark 😂).

What about the current UI do you feel is overwhelming?

I'm using psiTurk 3.2.0. So if there's a new version (don't see one), then I don't have it. 😅 Most of the "overwhelm" came from monstrous tables with lots of multi-line overflow. Maybe I'm just not familiar with nomenclature, but I also saw quite a few buttons which appear to do the same thing, but I'm not sure they do. 😅 (The monstrous tables were also generated by way of launching 400 batched HITs, so... kinda my fault. 🤷‍♂️)

And yeah, I didn't focus much at all on looks. Just did the vue tables, bootstrap grid, underlying rest api.

I definitely get the motivation to "get it done and launch". I don't know usage stats, but if it's a fairly well-used part of psiTurk (even though 3.0 was launched only in Jan/Feb, iirc), then I'd guess a facelift/mild reorganization would be useful.

I don't think I'm versed enough on the internals of psiTurk to know how to loop in a Vue.js app without borking the dashboard. So, I guess, if it's something you see as useful/valuable, I'd be down to put in some time to clean-up the interface and "Vueify" it, but after it's been converted/prepped. 😅

[deargle]

Hmm let me think about it. As for heroku, there'd be no difference-- I'm pretty sure that under the hold, when you push a git commit, it just launches a python container for you, installs your pip requirements.txt file, and runs your Procfile like a docker container's CMD. You'd be following the same pattern if you were making a docker version of psiturk-- start from a python docker container, pip install, gunicorn cmd. It gets helpful when you string together nginx and letsencrypt auto renew containers.

I'm going to close this issue though for purely nervous tick reasons -- because we had an issue open for a few years titled "improve documentation" that, idk just made me rage-y. We can re-open with an actionable checklist, like, "decrease overflow / replace with modals," idk. I think Evan's does that modal thing. Okay I'll leave this open and give Evan a chance to post.

On Tue, Jun 22, 2021, 2:10 AM John Muchovej @.***> wrote:

What do you have in mind that you think dockerizing things would help users?

My goal with dockerizing things had less to do with being "helpful to users" are more to do with "being helpful to me". The more I can run in Docker/Singularity containers, the better (personal opinion). I've run into plenty of issues with Anaconda and even more with virtualenvs. (Also helps with the computational side of reproducibility.)

... docker adds another layer of complexity for many grad student users who have a hard enough time with the basics.

Totally fair, I definitely sympathize, but in my experience (albeit with comp sci undergrads), pointing folks to the Docker "getting started" pages, then giving them "do steps 1, 2, 3" was normally sufficient (particularly on MacOS and Windows). Docker is an added overhead, but it also allows psiTurk to exist outside of a project's virtualenv (which is a bonus, I think). While I'm not totally familiar with how Heroku runs their Docker services, it could be useful to have there (though at this point I could be grasping in the dark 😂).

What about the current UI do you feel is overwhelming?

I'm using psiTurk 3.2.0. So if there's a new version (don't see one), then I don't have it. 😅 Most of the "overwhelm" came from monstrous tables with lots of multi-line overflow. Maybe I'm just not familiar with nomenclature, but I also saw quite a few buttons which appear to do the same thing, but I'm not sure they do. 😅 (The monstrous tables were also generated by way of launching 400 batched HITs, so... kinda my fault. 🤷‍♂️)

And yeah, I didn't focus much at all on looks. Just did the vue tables, bootstrap grid, underlying rest api.

I definitely get the motivation to "get it done and launch". I don't know usage stats, but if it's a fairly well-used part of psiTurk (even though 3.0 was launched only in Jan/Feb, iirc), then I'd guess a facelift/mild reorganization would be useful.

I don't think I'm versed enough on the internals of psiTurk to know how to loop in a Vue.js app without borking the dashboard. So, I guess, if it's something you see as useful/valuable, I'd be down to put in some time to clean-up the interface and "Vueify" it, but after it's been converted/prepped. 😅

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/NYUCCL/psiTurk/issues/518#issuecomment-865697572, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAI6Y7JNM2QRQFS3MMT2SW3TUBAPFANCNFSM47CRMQWA .

[evankirkiles]

Yes, I redid the dashboard for my lab only using VanillaJS and Bootstrap (no Vue):

Right now I've only fleshed out the main HIT and assignment displays, but I'm going to implement campaigns and a local worker list display as soon as I can. I considered using a framework like React but I didn't get into it because the prospect of creating an entirely new build process for a React app––or having to learn Vue.js when I already had all the tools I saw necessary in Vanilla JS––seemed to large of a hurdle for something my lab isn't directly paying me for.

The central underlying tech is a vanilla JS database viewport I built a while ago which supports applying filters and sorting by columns, and I've basically been filling that with MTurk data or local DB data from dashboard API endpoints I've added. For any list of commonly structured objects you have in JS, supply a list of the columns you want to see along with data types and styling options and it injects the table's HTML for you.

You can check out all the code in the master branch of my fork: https://github.com/evankirkiles/psiTurk.

P.S. It's responsive, so it works great with phones too 😁

[deargle]

I just released v3.3.0 which has the beginnings of updating the dashboard to look like @evankirkiles 's. However, the updated dashboard still doesn't do a lot of the things that Evan's can do. But it's a start. I'm going to close this issue, and open new ones with pointed issues, such as "dashboard tables overflow," and "dashboard not responsive," so that we can fix things one at a time.