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

Open
wants to merge 86 commits into
base: main
Choose a base branch
from

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

@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

@bobular
Copy link
Member Author

bobular commented Jul 2, 2024

Latest commit adds this. No dashed outline when there are PFam domains.
image

bobular and others added 28 commits July 2, 2024 14:57
…use flex-wrap to prevent large buttons crowding the search box
Instant filters for the orthogroup page
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.

None yet

2 participants