Tree visualizer

tree_visualizer.tsx

import React, { useState } from 'react';

const DetailsPanel = ({node}) => (
  <div style={{ padding: '10px', border: '1px solid #ccc', margin: '10px', borderRadius: '5px' }}>
    <h3>Details</h3>
    {node ? (
      <div>
        <div><strong>Name:</strong> {node.name}</div>
        <div><strong>ID:</strong> {node.id}</div>
        <div><strong>Parent ID:</strong> {node.parent_id || 'N/A'}</div>
        <div><strong>Path:</strong> {node.path}</div>
      </div>
    ) : (
      <div>No item selected.</div>
    )}
  </div>
);

const Category = ({category, onSelect}) => (
  <div style={{ marginLeft: '20px' }}>
    <div style={{ fontWeight: 'bold', cursor: 'pointer' }} onClick={() => onSelect(category)}>
      {category.name}
    </div>
    {category.subCategories.length > 0 && (
      <div style={{ marginLeft: '10px' }}>
        {category.subCategories.map(subCat => (
          <Category key={subCat.id} category={subCat} onSelect={onSelect} />
        ))}
      </div>
    )}
    {category.products.length > 0 && (
      <ul>
        {category.products.map(product => (
          <li key={product.id} style={{ cursor: 'pointer' }} onClick={() => onSelect(product)}>
            {product.name}
          </li>
        ))}
      </ul>
    )}
  </div>
);

const TreeVisualizer = ({data}) => {
  const [selectedNode, setSelectedNode] = useState(null);

  return (
    <div style={{ display: 'flex' }}>
      <div style={{ flexGrow: 1 }}>
        {data.map(category => (
          <Category key={category.id} category={category} onSelect={setSelectedNode} />
        ))}
      </div>
      <DetailsPanel node={selectedNode} />
    </div>
  );
};

export default TreeVisualizer;