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

OrthoMCL - Custom tree-table for OrthoGroup page #904

Merged
merged 162 commits into from
Nov 14, 2024
Merged

Conversation

bobular
Copy link
Member

@bobular bobular commented Mar 1, 2024

Testing:

There are only a few tree files available on the back end, so only a few orthogroups work. Here's are the valid OGs at the moment:

  • OG6_102443
  • OG6_103280
  • OG6_105395
  • OG6_105810
  • OG6_126264
  • OG6_126317
  • OG6_126334
  • OG6_126431

Run ortho-site locally and access the path /app/record/group/OG6_102443
Back end config for .env is

BASE_PROXY_URL=https://qa.orthomcl.org/
LEGACY_WEB_APP_URL=${BASE_PROXY_URL}/orthomcl
PROJECT_ID=OrthoMCL
yarn && yarn nx start @veupathdb/ortho-site

To do:

  • restore clustal functionality
  • pfam domain architecture in main table
  • pfam legend
  • pfam legend checkboxes apply to main table
  • search box
  • take care of width issues/horizontal scroll/remove some columns/sticky checkbox column? (partially solved by using the horizontal scroll of the whole page)
  • sortable columns? (hide tree if sorted) (wont do?)
  • maybe do core/peripheral filters?
  • also add EC "legend filter"? - some questions around partial ECs
  • do general WDK page/record reorganisation
  • fix inline click with tooltips? (currently clicking changes the row height - perhaps just hide the tree if any rows are expanded?)
  • reset button? (this has never been requested by users/domain experts)
  • full_id needs display name and go on left
  • un-collapse the main section

From the #1140 branch

  • Remove "Phyletic distribution" section
  • Move "Protein" section to top
  • Add ability to highlight table rows from species filter (not done directly, but row highlighting via checkboxes is now a thing)

UX suggestions

  • organism/taxon legend(s)? (filter done)
  • zoom out to see whole tree? or maybe a modal?
  • tree bolder (thicker lines)
  • add explanation of tree
  • tree branch metrics? (future)
  • pfam cartoons should scale to protein length
  • move filters to the left as per https://epvb.slack.com/archives/CHA5FRKQF/p1721315477658799?thread_ts=1721310024.223819&cid=CHA5FRKQF
  • (SB) Move protein length column earlier - the columns might go: domain, accession, length, description, Organism
  • DEAL WITH BIG GROUPS (speed and usability) - collapsable nodes - some by default?

@bobular bobular marked this pull request as draft March 1, 2024 21:50
@bobular bobular changed the title made a start - WIP OrthoMCL - Custom tree-table for OrthoGroup page Mar 1, 2024
Copy link
Member

@dmfalke dmfalke left a comment

Choose a reason for hiding this comment

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

This is looking really good. I made some comments below. Let me know what you think!

Comment on lines 96 to 111
<div
style={{
flexGrow: 1,
width: 1 /* arbitrary non-zero width seems necessary for flex */,
}}
>
<Global
styles={globalStyle`
.DataTable {
margin-bottom: 0px !important;
width: 80%;
}
`}
/>
<Mesa state={tableState} />
</>
</div>
Copy link
Member

Choose a reason for hiding this comment

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

Sorry, I'm just noticing this. I'm not sure we should use Global here, as the style will be reflected on all subsequent pages.

Instead, could you use a css prop on the parent div component (line 96), and target .DataTable in there?

      <div
        css={{
          flexGrow: 1,
          width: 1 /* arbitrary non-zero width seems necessary for flex */,
          '.DataTable': {
            marginBottom: '0px !important',
            width: '80%'
          }
        }}
      >
        <Mesa state={tableState} />
    </div>

Copy link
Member Author

@bobular bobular Mar 20, 2024

Choose a reason for hiding this comment

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

Oh yeah, that's much simpler (and no side effects) - done in 5c896a0 - thanks!

Copy link
Member

Choose a reason for hiding this comment

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

Could we change these identifiers such that they include the "group" prefix? E.g., GroupTreeResponse, groupTreeResponseDecoder, etc?

Copy link
Member Author

Choose a reason for hiding this comment

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

Sure! fd446f8

Copy link
Member Author

@bobular bobular left a comment

Choose a reason for hiding this comment

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

Just one possible oversight - see the comment.

Works great - so much better than before!

className={cancelBtnClassName}
style={
cancelBtnRightMargin ? { right: cancelBtnRightMargin } : undefined
}, [delayMs, searchTerm, onSearchTermChange]);
Copy link
Member Author

Choose a reason for hiding this comment

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

Not using delayMs?

Copy link
Member Author

Choose a reason for hiding this comment

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

Not using delayMs?

We should fix and test this before merging, @dmfalke

@dmfalke
Copy link
Member

dmfalke commented Nov 14, 2024

I am planning to merge this PR. We can make a new issue for any remaining tasks we intend to implement.

@dmfalke dmfalke marked this pull request as ready for review November 14, 2024 19:13
@dmfalke dmfalke merged commit f8cfb2a into main Nov 14, 2024
1 check passed
@dmfalke dmfalke deleted the orthogroup-tree-table branch November 14, 2024 20:10
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.

2 participants