Skip to content

React Treeview implementation

Aref Shafaei edited this page Sep 17, 2024 · 1 revision

In this page we've summarized the useful information related to #208 and #212 issues (react treeview).

Code details

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 -

Unused code

  • 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)
Clone this wiki locally