-
Notifications
You must be signed in to change notification settings - Fork 1
React Treeview implementation
In this page we've summarized the useful information related to #208 and #212 issues (react treeview).
-
Component used -
-
publicAPI:
- link -
- Explanation - Treeitem doesnt explicitly pass down all information from parent component i.e. RichTreeview to the respective node type component except itemId and label. In our usecase we would also need information about icons, camera to open modal. Here is when publicApi comes in use, there is no documentation at this moment about this api method. I have added the github issue link that helped out.
-
Why RichTreeview over SimpleTreeview
- As mentioned in the official documentation for Treeview all new feature enhancements will take place within treeitem2 and richtreeview, the second reason being we want the treeview container to be as abstracted as possible with the node description in another component. This can only be provisioned with Richtreeview.
-
Compilation of all treeview issues closed and open -> https://github.com/mui/material-ui/issues?q=is%3Aissue+treeview+
-
A small hierarchy tree to describe what the flow of components are.
-
Requirement - - One common component that can be called for Matrix and Treeview. - This component provides a treeview structure, the expansion and nodes are customizable based on requirement. - Matrix requirement -> the tree structure is basic with expansion logic being different - Treeview requirement -> the tree item logic is intricate and requires a lot of customisation
Todo -
- Matrix component compatible with the code
- Test search funcationality
- Check difference from current matric component like last child attachment to parent is not continued to the below node
- More todos in github link here - https://github.com/informatics-isi-edu/deriva-webapps/issues/212
- Original location:
treeview-container.tsx
- Purpose: This logic was search callback was the first code that I wrote for searching through the treeview to highlight all matches and scroll to the first one. It needed more nuances like searching with grep, first expanding on finding all matches and then highlighting (treeview doesnt let enable highlighting of nodes not expanded nor does it do so implicitly). Refactored code can be found in the same file.
const searchCallback = (term: any) => {
if (term) {
term = term.trim();
console.log(`User attempting to search for '${term}'`);
// Todo: keep track whats expanded already
let results = searchTreeArray(children.mui_x_product, 'id', term);
console.log(results);
setExpandedItems(results.paths || []); // Assuming path is string[] or null
// Set the ID of the first found item to be focused on later
// const firstItem = path && path.length > 0 ? path[0] : null;
// [It only highlights when find a unique one]
if (results.paths.length > 0) {
// paths.forEach((element: string) => {
// setSelectedItemId(element);
// });
// setSelectedItemId(results.values[0]);
handleButtonClick(results.values[0]);
// paths = ['deltoid (EMAPA:18177)', 'pars scapularis of deltoid (EMAPA:36163)']
results.values.forEach((path: any) => {
const element = apiRef.current?.getItemDOMElement(path);
if (element) {
element.style.fontStyle = 'italic';
element.style.color = '#2e00ff';
element.style.backgroundColor = '#efefa6';
}
});
// setSelectedItems(paths);
}
}
};
Original Code - Location - convert-to-valid-tree.js Prupose - Make valid changes to the tree so that it transforms into a treeview structure acceptable by material-ui i.e. have unique Ids, add a counter to avoid duplicate values (for enabling search) This was the basic code that has been enhanced and added back to the same location.
const labels = ['Homogeneous', 'Graded', 'SingleCell'];
function getRandomLabels() {
// Returns a random subset of labels array
const randomCount = Math.floor(Math.random() * labels.length) + 1;
const shuffled = labels.sort(() => 0.5 - Math.random());
return shuffled.slice(0, randomCount);
}
function transformNode(node) {
const label = `${node.base_text} (${node.dbxref})`;
return {
...node,
label: label,
id: label,
labelIconArray: getRandomLabels(),
children: node.children.map(transformNode),
};
}
function transformTree(data) {
// Transform the tree
return data.map(transformNode);
}
module.exports = transformTree;
Original Code - Location - chaise-treeview.tsx Purpose - This code was in place of search input to leverage the material UI's own autocomplete input, now we use chaise owned search input to maintain coherence around all UI elements.
<Autocomplete
disablePortal
id="combo-box-demo"
options={flattenedTree}
getOptionLabel={(option) => option.label}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Search" />}
onChange={handleChange}
/>
Original Code - Location - shared-tree-button Purpose - To rotate single cells by 90 degree making the top expansion local to cell elements. The issue with this approach is it roates each cell by 90degree frame reference of its parent. Hence discarded.
// issue to rotate the entire node and not just the content cause that requires individual corrections?
writingMode: 'vertical-lr',
textOrientation: 'upright',
transform: 'rotate(-90deg)',
padding: theme.spacing(1),
borderRadius: theme.spacing(0.5)