mindmap-drawer.tsx

Overview

mindmap-drawer.tsx is a React functional component that provides a UI drawer for displaying a mind map visualization. The drawer can toggle between a loading state, showing a progress bar representing the loading progress of the mind map data, and a loaded state, rendering the mind map as an indented tree structure.

This component is designed to be used as a modal drawer, integrating with the application's modal system through props such as hideModal and visible. It leverages internationalization (i18n) for text, and uses other UI components like a progress bar and an indented tree to render its content.

Component: MindMapDrawer

Description

MindMapDrawer renders a modal drawer that displays a mind map visualization. It manages two primary UI states:

• Loading state: Shows a progress bar indicating the percentage of mind map data loaded.

• Loaded state: Displays the mind map data in an indented tree structure.

It also includes a header with a title and a close button.

Signature

const MindMapDrawer: React.FC<IProps>

Props (IProps interface)

IProps extends a generic modal interface IModalProps<any> and includes:

Internal Hooks and Dependencies

• useTranslation from react-i18next: Used to provide localized strings, specifically the drawer title.

• usePendingMindMap (custom hook): Retrieves the current loading progress percentage (0-100) for the mind map data.

• IndentedTree component: Renders the hierarchical mind map data visually.

• Progress component: Renders a horizontal progress bar.

• X icon from lucide-react: Provides a close button.

Render Logic

• The component displays a header with the localized title and a close (X) icon.

• If loading is true, it shows a progress bar with the current loading percentage.

• If loading is false, it renders the mind map data inside an IndentedTree component.

• The close button calls hideModal callback when clicked.

Usage Example

import MindMapDrawer from './mindmap-drawer';

const mindMapData = {
  id: 1,
  name: "Root Node",
  children: [
    { id: 2, name: "Child 1", children: [] },
    { id: 3, name: "Child 2", children: [] }
  ]
};

const MyComponent = () => {
  const [visible, setVisible] = React.useState(true);
  const [loading, setLoading] = React.useState(false);

  return (
    <MindMapDrawer
      data={mindMapData}
      visible={visible}
      loading={loading}
      hideModal={() => setVisible(false)}
    />
  );
};

Implementation Details

• Conditional Rendering: The component uses conditional rendering to switch between loading and loaded states.

• Progress Tracking: The progress bar value is obtained from a custom hook usePendingMindMap, indicating how much of the mind map data is loaded.

• Styling: Tailwind CSS classes control layout and appearance, including full width/height sizing, padding, and colors.

• Accessibility: The close icon is keyboard and mouse accessible via the cursor-pointer class and the onClick handler.

Interactions with Other Parts of the System

• Modal System: The component interacts with a modal management system via the IModalProps interface, using props like visible and hideModal.

• Mind Map Data Source: The mind map data is passed as a prop (data) from a parent component that manages mind map state.

• Loading Progress Hook: The usePendingMindMap hook connects to the app's data loading state, providing real-time progress updates.

• UI Components: Utilizes shared UI components such as IndentedTree for displaying hierarchical data and Progress for showing loading progress.

• Internationalization: Uses react-i18next to support multilingual UI text.

Mermaid Component Diagram

The following diagram illustrates the main components and their relationships inside mindmap-drawer.tsx:

componentDiagram
    component MindMapDrawer {
      +data: any
      +hideModal(): void
      +visible: boolean
      +loading: boolean
    }
    component IndentedTree
    component Progress
    component XIcon
    component usePendingMindMap
    component useTranslation

    MindMapDrawer --> IndentedTree : renders mind map data
    MindMapDrawer --> Progress : shows loading progress
    MindMapDrawer --> XIcon : close button
    MindMapDrawer --> usePendingMindMap : retrieves loading %
    MindMapDrawer --> useTranslation : provides localized text

Summary

mindmap-drawer.tsx is a specialized React component designed to render a mind map inside a modal drawer interface. It elegantly handles loading states with a progress bar and displays the mind map data using an indented tree visualization. The component integrates with the broader application through modal controls, localization, and data loading hooks, making it a reusable and well-structured UI element for mind map presentation.

End of documentation for mindmap-drawer.tsx