TreeTable React component

[bobular]

Latest story! Responds appropriately to rowHeight prop in the controls. (Though the table row height is a minimum height so things don't line up below a certain value (42 for me).)

Firstly I followed much of Dave's work here #559
But I wanted it to be a components component, not something only working in ortho-site.

So I started with a super-simple story, and I'm working backwards from there.

0. cd packages/libs/components
1. yarn add d3v5@npm:d3@5 - adds version 5 with the alias d3v5
2. yarn add tidytree@github:d-callan/TidyTree
3. yarn add --dev imports-loader@^1.1.1 exports-loader@^1.1.1 - Storybook uses webpack 4, this page suggests v1.1.1 is the last suitable for webpack 4
4. make crude tidytree.d.ts for now
5. add Dave's shimming to .storybook/main.js
6. make story
7. copy test data to story directory
8. find that patristic isn't available to tidytree.js
9. add an extra shim for patristic in .storybook/main.js - this wasn't needed in Dave's PR but that was using webpack 5.
10. it seems to work!

Notes

I tried to get storybook-addon-deep-controls working for the nested args object in the story, but I couldn't get it to work. Have given up!

I installed react-query as a dev dependency and provided the Storybook wrappings for it, but stopped using it. We should probably leave it in though, right?

Question

How do we get the shimming to work when the component is used outside of Storybook?

[bobular]

tidytree margin specs are not [ top, right, bottom, left ] as indicated in the code, and it's difficult to work out what is going on. For now we will work with zero margins and live with the leaf nodes being chopped in half and the left-most edges not being very clear either.

[bobular]

tidytree margin specs are not [ top, right, bottom, left ] as indicated in the code, and it's difficult to work out what is going on. For now we will work with zero margins and live with the leaf nodes being chopped in half and the left-most edges not being very clear either.

Fixed these margin/spacing issues in our fork :-) https://github.com/d-callan/TidyTree/pulls

Now we have the vertical alignment bit pretty much sorted. Can start building a tree-table component next.

First I think I will nail down this TidyTree.tsx component to only do horizontal dendrograms - or wrap a horizontal dendrogram component around it. The rowHeight prop would make no sense in a vertical tree, for example. Not sure how general purpose TidyTree will need to be...

[bobular]

Does this eventually need to be a regular runtime dependency because we're doing runtime dynamic styling with cx(css(...))?

[dmfalke]

yeah, it probably does

[bobular]

Would the props be better split into treeProps and tableProps rather than extending the tree props as done presently?

[d-callan]

mostly i just played w storybook, but i think its looking good! 😸 I notice there isnt a dendrogram story w the branches colored as well, but just looking at the component api quickly suggests it should be possible. 👍

[d-callan]

idk enough to know... is it easy to add a column of check boxes?

[bobular]

Thanks for having a look. There's a separate story in "HorizontalDendrogram" with some non-table checkboxes that colour the tree.

I should probably wire up the TreeTable to use table-based checkboxes. Would be a good thing for the story.

[bobular]

Would the props be better split into treeProps and tableProps rather than extending the tree props as done presently?

I did this while adding the checkbox selection, which seems to work fine.

[bobular]

I factored out the shimming here c62b622

Hopefully this will be visible to other packages as const { addD3Shimming } = require('@veupathdb/components/webpack-shimming'); but we will see! I might have to move it into somewhere that gets packaged up?