Asset Tree Project
This project is a web application that visualizes an asset tree structure. The application allows users to filter and search through the tree based on various criteria such as energy sensors and alert statuses. The tree is built using recursive components and functions to handle the hierarchical data structure efficiently.
- React: A JavaScript library for building user interfaces.
- TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.
- Tailwind CSS: A utility-first CSS framework for styling the application.
- Lucide Icons: A collection of simple and consistent icons for React.
The MainHeader component is responsible for displaying the main header of the application. It includes buttons to switch between different data sources.
The TreeHeader component displays the header for the tree section, including the data source name and a collapse button.
The TreeControls component provides filtering and search functionalities. Users can filter the tree nodes by energy sensors, alert statuses, or search queries.
The NodeComponent is a recursive component that renders each node in the tree. It handles the opening and closing of child nodes and displays the appropriate icons and statuses.
The NodeStatus component displays the status of a node, such as "operating" or "alert".
The NodeIcon component displays the appropriate icon for a node based on its type (e.g., location, asset).
The project heavily utilizes recursive components and functions to manage the hierarchical structure of the asset tree. This approach allows for efficient rendering and filtering of nested nodes.
The NodeComponent recursively renders each node and its children. This allows the tree to dynamically expand and collapse based on user interactions.
The filtering functions in TreeControls recursively traverse the tree to apply filters based on energy sensors, alert statuses, or search queries. This ensures that the entire tree structure is considered when applying filters.
To run the project locally, follow these steps:
- Clone the repository.
- Install dependencies.
- Start the development server.
- Open the application in your browser.
This project demonstrates the use of React, TypeScript, and Tailwind CSS to build a dynamic and interactive asset tree visualization. The use of recursive components and functions ensures efficient handling of hierarchical data structures, making the application scalable and maintainable.