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.

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

[DC-1176] Learn More About OMOP Popover #5086

Open
wants to merge 3 commits into
base: dev
Choose a base branch
from

Conversation

cinyecai
Copy link
Contributor

Jira Ticket: https://broadworkbench.atlassian.net/browse/DC-1176

Summary of changes:

What

  • Added a popup you can click to explain the OMOP column headers

Testing strategy

  • Have not written tests yet, only tested the UI locally
  • Can add unit tests if it seems necessary
Screen.Recording.2024-09-17.at.1.36.52.PM.mov

@cinyecai cinyecai requested a review from a team as a code owner September 17, 2024 17:40
@@ -89,6 +92,8 @@ export const computePopupPosition = (args: ComputePopupPositionArgs): ComputePop
return position.top + elementSize.height >= viewportSize.height ? 'top' : 'bottom';
case 'left':
return position.left < 0 ? 'right' : 'left';
case 'right-aligned-bottom':
return position.top + elementSize.height >= viewportSize.height ? 'top' : 'right-aligned-bottom';
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 put this in as more of a placeholder because I'm not sure the exact behavior we want for if this needs to be flipped - Do we want to define a 'right-aligned-top'? and have it flip to the top? If it cuts off on the side, do we want a 'left-aligned-bottom'? etc..

Copy link
Contributor

Choose a reason for hiding this comment

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

I would check with Lou! This is a great chance to have a conversation with him about what he thinks makes sense.

side: 'right-aligned-bottom',
content: div({ style: { padding: 16, overflowWrap: 'break-word', width: '30em' } }, [
strong(['Concept name:']),
p({ style: { marginTop: 4, marginBottom: 24 } }, [
Copy link
Contributor

Choose a reason for hiding this comment

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

Could you define a constant for these styles as opposed to redefining for each p tag?

PopupTrigger,
{
side: 'right-aligned-bottom',
content: div({ style: { padding: 16, overflowWrap: 'break-word', width: '30em' } }, [
Copy link
Contributor

Choose a reason for hiding this comment

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

Nit: In general we prefer rem to em. Would you mind adjusting to using rem?

Copy link
Contributor

@rjohanek rjohanek left a comment

Choose a reason for hiding this comment

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

I agree with Sky's comments. I also think a unit test of this would be great.

Copy link

sonarcloud bot commented Sep 23, 2024


it('renders column headers defined', async () => {
// Arrange
renderSearch(); // might change
Copy link
Contributor

Choose a reason for hiding this comment

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

what does this comment mean?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good catch, I had something else there before as a placeholder before figuring out how to set up the test, let me delete that comment

Copy link
Contributor

@rjohanek rjohanek left a comment

Choose a reason for hiding this comment

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

this looks good. thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants