OrthoMCL - Custom tree-table for OrthoGroup page

[bobular]

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:

• [x] restore clustal functionality
• [x] pfam domain architecture in main table
• [x] pfam legend
• [x] pfam legend checkboxes apply to main table
• [x] search box
• [x] 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)
• [x] maybe do core/peripheral filters?
• [ ] also add EC "legend filter"? - some questions around partial ECs
• [x] 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?
• [ ] full_id needs display name and go on left
• [ ] un-collapse the main section

UX suggestions

• [ ] organism/taxon legend(s)?
• [ ] zoom out to see whole tree? or maybe a modal?
• [ ] tree bolder (thicker lines)
• [ ] add explanation of tree
• [ ] tree branch metrics? (future)

[dmfalke]

I figured out why the section is always collapsed by default: https://github.com/VEuPathDB/web-monorepo/blob/26807b89d8f8a131984a63f67da68a70e83309f2/packages/sites/ortho-site/webapp/wdkCustomization/js/client/store-modules/RecordStoreModule.ts#L19-L29

I don't know why this was done, but I suppose we can remove this entire case.

[bobular]

Brilliant - thanks - yes that will help a lot! @dmfalke

[bobular]

There's nothing left after removing that case.

Should we track down where the reduce is called, or just eviscerate this function and make it no op?

[dmfalke]

There's nothing left after removing that case.

Should we track down where the reduce is called, or just eviscerate this function and make it no op?

I think we can just remove the reduce function.

Not sure why I didn't see this comment sooner... sorry for the delay!

[bobular]

I

There's nothing left after removing that case. Should we track down where the reduce is called, or just eviscerate this function and make it no op?

I think we can just remove the reduce function.

Not sure why I didn't see this comment sooner... sorry for the delay!

Hi @dmfalke - I can't find where that reduce is imported. It's not part of an object. I'm at a dead end, sorry.

[dmfalke]

It's imported here:

https://github.com/VEuPathDB/web-monorepo/blob/26807b89d8f8a131984a63f67da68a70e83309f2/packages/sites/ortho-site/webapp/wdkCustomization/js/client/wrapStoreModules.tsx

I'm pretty sure you can just delete the reduce and don't need to make any other changes.

[bobular]

Ah, thanks, I was missing something fundamental that I get now.

[bobular]

It looks like we can't avoid the "We're sorry, something went wrong." modal being rendered if the wdkService back end call returns a 404. That hook (useWdkService/useOrthoService) doesn't handle errors the same way as the EDA's usePromise.

However, we can avoid asking for a tree when there are too few sequences, thus avoiding some user-facing errors. Will push a commit soon to address this and make sure the regular table still renders.

  const numSequences = mesaRows.length;
  const treeResponse = useOrthoService(
    numSequences > 2
      ? (orthoService) => orthoService.getGroupTree(groupName)
      : () => Promise.resolve(undefined),
    [groupName, numSequences]
  );