OrgChart Visualizer

Transform your organizational data into interactive, insightful visualizations

📋 Overview

OrgChart Visualizer is a powerful full-stack application designed to help organizations of all sizes visualize, analyze, and manage their organizational structures. With an intuitive interface and powerful features, it transforms complex hierarchical data into clear, interactive visualizations that provide valuable insights into your organization.

✨ Key Features

📊 Interactive Org Charts: Drag, zoom, and explore your organization's structure with fluid, responsive visualizations
🔍 Advanced Search & Filtering: Quickly find specific employees or departments with powerful search capabilities
📈 Timeline Analysis: Track changes in your organization's structure over time with historical comparisons
🌐 Multi-Language Support: Full internationalization with English and Hebrew support
↔️ RTL Layout Support: Native right-to-left layout for Hebrew and other RTL languages
📱 Responsive Design: Enjoy a seamless experience across desktop and mobile devices
🔄 Real-time Updates: Make changes to your org structure and see them reflected instantly
📥 Easy Data Import/Export: Import data from Excel/CSV files or create trees manually, export visualizations as images or Excel spreadsheets
✏️ Visual Tree Editor: Create and edit organizational trees directly in the interface with drag-and-drop functionality
🔧 Node Management: Add, edit, delete, and reorganize nodes with an intuitive context menu
📊 Comparative Analysis: Compare organizational structures across different time periods
🔔 Smart Notifications: Language-aware toast notifications with RTL-aware positioning
⚙️ Customizable Settings: Tailor the application to your preferences with configurable settings and keyboard shortcuts

🌍 Internationalization

The application supports multiple languages with full RTL (Right-to-Left) layout support:

Supported Languages: English, Hebrew (עברית)
RTL Layout: Automatic layout adjustment for RTL languages
Font Support: Custom Hebrew font (Rubik) for optimal readability
Smart Positioning: UI elements automatically adjust position based on text direction
Translated UI: 40+ translation keys covering all user-facing text

For detailed information about the internationalization setup, see LANGUAGE_SETUP.md.

🚀 Getting Started

Prerequisites

Python 3.8+ with pip
Node.js 14+ and npm
Git (for cloning the repository)

Development Setup

Step 1: Clone the Repository

Windows (Command Prompt or PowerShell):

git clone https://github.com/gilad12-coder/tree_visualization_app.git
cd tree_visualization_app

macOS/Linux:

git clone https://github.com/gilad12-coder/tree_visualization_app.git
cd tree_visualization_app

Step 2: Install Backend Dependencies

Windows:

pip install -r requirements.txt

macOS/Linux:

pip install -r requirements.txt
# or
pip3 install -r requirements.txt

Step 3: Install Frontend Dependencies

Windows:

npm install

macOS/Linux:

npm install

Step 4: Build the Frontend

Windows:

npm run build

macOS/Linux:

npm run build

Step 5: Start the Development Server

Windows:

python main.py

macOS/Linux:

python main.py
# or
python3 main.py

Step 6: Access the Application

The application will automatically open in your default web browser. If it doesn't, manually navigate to:

http://localhost:5001

Note: The application runs on port 5001. Make sure this port is not in use by another application.

Quick Start for Windows Users (After Git Clone)

If you've just cloned the repository on Windows and want to get started quickly:

Open Command Prompt or PowerShell in the project directory
Run the automated build script:
```
build.bat
```
This will install all dependencies and build the executable automatically.

Or run in development mode:

pip install -r requirements.txt
npm install
npm run build
python main.py

Access the app at http://localhost:5001

Running as a Standalone Application

For end users, the application can be run as a standalone executable:

Download the latest release from the releases page
Extract the zip file to a location of your choice
Windows: Double-click TreeVisualizationApp.exe
macOS: Double-click TreeVisualizationApp.app (or drag to Applications folder)

🛠️ Building Standalone Executables

Build platform-specific executables for Windows and macOS with all internationalization features included.

Prerequisites for Building

Python 3.8+ with pip
Node.js 14+ with npm
PyInstaller: pip install pyinstaller

Important: PyInstaller creates platform-specific executables. Build on Windows for .exe and on macOS for Mac executables.

Quick Build (Automated)

Use the automated build script that handles everything:

Windows (Command Prompt or PowerShell):

build.bat

Or double-click build.bat in Windows Explorer.

macOS/Linux:

chmod +x build.sh
./build.sh

The script will automatically:

Install all Python dependencies (including PyInstaller)
Install all Node.js dependencies
Build the React frontend with all translations
Create the standalone executable
(macOS only) Create .app bundle for easy distribution

Manual Build Steps

If you prefer to build manually:

Install Dependencies

Windows:

pip install -r requirements.txt
npm install

macOS/Linux:

pip install -r requirements.txt
npm install

Build React Frontend (CRITICAL - includes all translations)

Windows:
```
npm run build
```
macOS/Linux:
```
npm run build
```

Build the Executable

Windows:

pyinstaller app.spec

macOS/Linux:

pyinstaller app.spec

Create macOS App Bundle (macOS only)
```
python3 create_app_bundle.py
```

Locate the Executable

Windows:

dist\TreeVisualizationApp.exe

Double-click the .exe file to run, or run from command line:

dist\TreeVisualizationApp.exe

macOS:

dist/TreeVisualizationApp.app

Double-click the .app bundle to run, or use:

open dist/TreeVisualizationApp.app

Linux:

dist/TreeVisualizationApp

Run with:

./dist/TreeVisualizationApp

What's Included

The standalone executable includes:

✅ Complete React frontend with all components
✅ Flask backend with all routes
✅ English & Hebrew translations (40+ keys)
✅ Full RTL layout support
✅ Language-aware UI (toast positioning, arrow directions)
✅ Automatic browser launch
✅ All dependencies (no installation required to run)

Distribution

Windows:

Distribute the single TreeVisualizationApp.exe file
Users can run it directly - no installation needed
File size: ~150-200 MB

macOS:

Distribute the TreeVisualizationApp.app bundle
Users can drag it to Applications folder
File size: ~100-150 MB

Windows (PowerShell):

cd dist
Compress-Archive -Path TreeVisualizationApp.exe -DestinationPath TreeVisualizationApp-v1.0-windows.zip

Windows (Command Prompt with 7-Zip or WinRAR):

cd dist
"C:\Program Files\7-Zip\7z.exe" a TreeVisualizationApp-v1.0-windows.zip TreeVisualizationApp.exe

macOS/Linux:

cd dist
zip -r TreeVisualizationApp-v1.0-macos.zip TreeVisualizationApp.app

Note: The executable is self-contained with all dependencies included. No Python or Node.js installation required on the target machine.

Troubleshooting

Build fails with missing build/ directory

Solution: Run npm run build first before building the executable

Executable won't start (Windows)

Solution: Check that all dependencies in requirements.txt are installed
Try running from Command Prompt to see error messages
Ensure Windows Defender or antivirus isn't blocking the executable

Executable won't start (macOS)

Solution: Right-click the .app and select "Open" if you get a security warning
Go to System Preferences → Security & Privacy → Allow the app

Port 5001 already in use

Solution: Close any other applications using port 5001, or modify main.py to use a different port

Browser doesn't open automatically

Solution: Manually navigate to http://localhost:5001 in your browser

Hebrew text not displaying

Solution: Rubik font loads from Google Fonts - check internet connection
Fonts are also bundled in the executable, so this should work offline

Database errors

Solution: Ensure you have write permissions in the directory where you're creating/accessing the database
On Windows, try running as Administrator if permission issues persist

📖 Usage Guide

First-time Users

Launch the application
- Run the executable or start the development server
- The application will automatically open in your browser at http://localhost:5001
Set up your database
- Option A: Create a new database
  - Click "Create New Database"
  - Choose a location to save your database file
  - Enter a database name (e.g., orgchart.db)
- Option B: Use an existing database
  - Click "Select Existing Database"
  - Browse and select your existing database file
Create or import organizational data
- Option 1: Import from Excel/CSV
  - Click the upload button (📤) or use Ctrl+U (Windows) / Cmd+U (macOS)
  - Select your Excel file (.xlsx) or CSV file
  - Choose a folder name and upload date
  - The app will automatically parse and structure your data
- Option 2: Create tree manually
  - Click "Create New Tree" button
  - Enter tree name, folder name, and root node details
  - After creation, add more nodes by clicking the "•••" menu on any node
Explore your organization
- Drag to pan around the org chart
- Scroll to zoom in/out
- Click on nodes to view detailed information
- Use the search bar (Ctrl+F / Cmd+F) to find specific people
Customize your experience
- Click the settings icon (⚙️) or press Ctrl+, / Cmd+,
- Switch between English and Hebrew
- Adjust other preferences as needed

Returning Users

View Existing Charts: Select your database and browse through folders and tables
Upload New Data: Import updated Excel files to track changes over time
Create New Trees: Build organizational structures from scratch using the visual editor
Edit Nodes: Click on any node to edit personal information, roles, or hierarchical structure
Add/Remove Nodes: Use the context menu (•••) on nodes to add children or delete branches
Search & Filter: Use advanced search with boolean operators (AND, OR, NOT) across multiple fields
Compare Data: Analyze changes between different time periods using the comparison feature
Timeline Analysis: View career progression and organizational changes over time
Export Data: Download your charts as images or export data to Excel format
Apply Settings: Customize language, keyboard shortcuts, and other preferences

Keyboard Shortcuts

Cmd/Ctrl + F: Open search bar
Cmd/Ctrl + H: Toggle help modal
Cmd/Ctrl + T: Open table selection
Cmd/Ctrl + U: Open file upload modal
Cmd/Ctrl + ,: Open settings
And many more! (See settings for full list)

🔧 Advanced Features

Timeline Analysis

Track changes in your organization over time:

View historical data points
Analyze employee movement and promotions
Identify structural changes

Comparative Reports

Generate comprehensive reports comparing organizational structures:

Department size changes
Reporting structure modifications
Role distribution analysis

Search and Filtering

Find specific information quickly:

Search by name, role, department, or any custom field
Filter by various attributes
Highlight specific nodes or branches
Navigate search results with prev/next buttons

Language & RTL Support

Seamlessly switch between languages:

Full UI translation
Automatic layout mirroring for RTL languages
Language-specific fonts and styling
Smart toast notification positioning

💻 Technology Stack

Frontend

React.js - UI framework
i18next / react-i18next - Internationalization
Framer Motion - Animations and transitions
Tailwind CSS - Styling and responsive design with RTL support
D3.js - Data visualization
React-Toastify - Toast notifications
Axios - API requests
Lucide React & React Feather - Icon libraries

Backend

Flask - Web server
SQLAlchemy - Database ORM
Pandas - Data processing
ReportLab - PDF report generation

Packaging

PyInstaller - Creating standalone executables

🎨 Design Features

Custom Hebrew Font: Rubik font for optimal Hebrew text rendering
RTL-Aware Layout: All margins, paddings, and positioning automatically flip for RTL languages
Arrow Reversal: Navigation arrows (←/→) reverse direction in RTL mode
Smart Toast Positioning: Bottom-left for Hebrew, bottom-right for English
Responsive Icons: Icon positioning adapts to text direction

🤝 Contributing

We welcome contributions to OrgChart Visualizer! Please feel free to submit issues, feature requests, or pull requests.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Adding New Languages

To add support for a new language:

Create a new translation file in src/i18n/locales/[language-code].json
Add the language to src/i18n/config.js
If the language is RTL, add RTL support in relevant components
Update the language selector in SettingsModal.js

See LANGUAGE_SETUP.md for detailed instructions.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Name		Name	Last commit message	Last commit date
Latest commit History 190 Commits
app_icon.iconset		app_icon.iconset
backend		backend
dist		dist
public		public
src		src
.gitignore		.gitignore
Info.plist		Info.plist
README.md		README.md
TreeVisualizationApp.icns		TreeVisualizationApp.icns
app.spec		app.spec
build.bat		build.bat
build.sh		build.sh
create_app_bundle.py		create_app_bundle.py
main.py		main.py
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
pyi_rth_backend.py		pyi_rth_backend.py
requirements.txt		requirements.txt
tailwind.config.js		tailwind.config.js

hexdrift/tree_visualization_app

Folders and files

Latest commit

History

Repository files navigation

OrgChart Visualizer

📋 Overview

✨ Key Features

🌍 Internationalization

🚀 Getting Started

Prerequisites

Development Setup

Step 1: Clone the Repository

Step 2: Install Backend Dependencies

Step 3: Install Frontend Dependencies

Step 4: Build the Frontend

Step 5: Start the Development Server

Step 6: Access the Application

Quick Start for Windows Users (After Git Clone)

Running as a Standalone Application

🛠️ Building Standalone Executables

Prerequisites for Building

Quick Build (Automated)

Manual Build Steps

What's Included

Distribution

Troubleshooting

📖 Usage Guide

First-time Users

Returning Users

Keyboard Shortcuts

🔧 Advanced Features

Timeline Analysis

Comparative Reports

Search and Filtering

Language & RTL Support

💻 Technology Stack

Frontend

Backend

Packaging

🎨 Design Features

🤝 Contributing

Adding New Languages

📄 License

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Packages