Mockup for the dashboard

[gcroci2]

The first step before starting coding the Dashboard would be creating a mock up of it, representing the ideal output that we would like to have. For this purpose, we could use Mockplus, a platform for design systems like this.

At the moment, the web application appears like this and we can define what we want to keep/add/edit starting from it:

---

Todos

• [x] check GNPS dashboard and paper
• [x] check CodePen front-end design and dev platform

[CunliangGeng]

GNPS dashboard is a MS related dashboard, it may give us some insights on designing our dashboard. Have a look https://gnps-lcms.ucsd.edu/ and paper https://www.nature.com/articles/s41592-021-01339-5

[CunliangGeng]

CodePen is a social development environment for front-end designers and developers, it might be useful for us

[gcroci2]

CodePen is a social development environment for front-end designers and developers, it might be useful for us

CodePen is only for frontend projects and supports HTML, CSS, and JavaScript. Since we're using Python libraries (either Bokeh or maybe Dash in the future) how can we make use of CodePen?

[justinjjvanderhooft]

Great!! I will try to get back more to it before our meeting next week. One enhancement that we could discuss: search options (to easier select/find particular spectra and/or BGC) for each column or the entire dataset.

[justinjjvanderhooft]

@gcroci2 - thanks for the screenshot and initiating the discussion here. I had a brief discussion here with my postdoc (Mitja Zdouc) and a PhD student in the Bioinformatics Group, who have some experience with dash. Basically, they indicated that dash is nice for proof-of-concept and running "basic" app(s), but it can be rather restrictive on the longer run. Thus, it will be a cost-benefit tradeoff of dash (short term gain, lots of pre-fixed code) and an html java + ccs-based solution (longer-term gain, less pre-fixed code) that we will need to discuss. Mitja is planning to join our meeting coming week so he can share his experiences so far with dash (also using it for mass spectrometry data analysis/visualization).

[CunliangGeng]

Hi Justin, yesterday Giulia and me had a very long brainstorming about the dashboard. At the end, we came up with a new design of the dashboard (or UI). We drew it out on our whiteboard, and now Giulia is converting it to an editable diagram. Let's have a look at the new UI together next meeting. We also have some open questions need your advice, let's discuss then.

In terms of the tech, I fully agree with you. The new UI will highly probably require more flexible and long-term tech stack (like JavaScript + CSS + HTML). It's great if Mitja can join the meeting, big welcome!

[justinjjvanderhooft]

Looking forward to it! 😎

[justinjjvanderhooft]

@gcroci2 @CunliangGeng could you create a document overview based on your discussion and our discussion next week that we can share with the advisory board? I think it would be nice to get some input from them as well - and I can also share it with some researchers that have been working with NPLinker to get their feedback. Thx! :-)

[gcroci2]

Useful infos:

• This is the repo that contains the code for the GNPS Dashboard.
• The webapp is developed in Plotly Dash, and now they are trying to deploy it in Heroku.

[CunliangGeng]

Hi @justinjjvanderhooft

I sent you an invite to OneDrive shared folder "nplinker_shared" (check your email please), we'll use it for sharing files. Giulia has put our new UI design to that folder and also created an doc for discussion. Have a look please :-)

[gcroci2]

The final mockup: