Design Audit Feedback

[KastanDay]

Fixes #72

Addressing feedback from doc: https://docs.google.com/document/d/12JqiffBZD8T-K7Hx0cnQqb-Ymr4Ysu-EoPiFATUNeSU/edit

• 'enter/return creating new line is confusing for users.' Switched input box to a single line, no newlines allowed. I like it.

[KastanDay]

My formatting is different from yours. My one line change caused a major diff because of spacing & formatting rules.

How should I format/lint? Is there a specific setup?

[KastanDay]

@KastanDay I'm seeing some odd behavior here - it looks like when the job is submitted, we no longer see the loading screen while the job completes

I also see the banner indicating that we're looking at example data (useExample=true), even tho it actually does still evaluate the real job results of my uploaded file - is this change intentional?

Example of what i see when running locally: http://recordit.co/1zuKptaGhq

So sorry this was for testing purposes only! Will fix. I hardcoded variables to test the UI.

[bodom0015]

@KastanDay any updates on this PR? I think that once the merge conflicts / hardcoded variables are fixed, we can get this merged up, unless you had anything else you were trying to target here?

Let me know if I can assist or clarify in any way! Thank you :+1:

[KastanDay]

Hi @bodom0015, I just spent 90 minutes trying to resolve the merge conflicts but I can't get the opening and closing to line up... They look deceptively simple, but no matter what it's all messed up.

Could you try once and see if I'm missing something? Don't spend more than 5 minutes on it -- in that case I'll try again.

[KastanDay]

Still missing these two columns "Similarity" and "Confidence".

[KastanDay]

Note I think my local testing of this function isn't working, so it's tricky testing SMILES sorting...

this._chemScraperService.getSimilaritySortedOrder(this.jobID, smile).subscribe( https://github.com/moleculemaker/chemscraper-frontend/pull/96/files#diff-8a5fc6884fd2b68103c448423e57e81f8a77b6569f2226c049142cf52a4fb842R492

[KastanDay]

@bodom0015 @matthewberry This PR is complete and ready for review!

One question, I'm not sure the meaning of "update header and footer: tool selector, job summary" What do you want for "tool selector and job summary"? Thanks.

Addresses tickets:

• 72

• 78

• 90

• 91

• 92

[bodom0015]

Thank you, @KastanDay! :tada:

Tool Selector

I think that "tool selector" here refers to the top-left of the navbar header beneath where it says "TOOL"... I think the subtle change here is to turn that into a dropdown menu allowing you to more easily find links to all of the AlphaSynthesis tools: ChemScraper, CLEAN, MOLLI and a few others

We should be able to copy the same dropdown functionality over to all of the related AlphaSynthesis frontends as well, which all use the same Angular + PrimeNG patterns :+1:

Our existing AlphaSynthesis tools:

Job Summary

According to the Figma designs, it looks like "Job Summary" refers to adding a bit more context to the header above the results table: