A simple React web application for visualizing treemap data generated by the Launchpad size analysis tool. Supports both the new TreemapResults format and legacy iOS analysis reports.

• Interactive Treemap Visualization: Uses ECharts to display hierarchical size data
• Dual Size Modes: Switch between install size and download size views
• Multiple Format Support: Handles both TreemapResults and legacy analysis formats
• Auto-Conversion: Automatically converts legacy format to treemap format
• File Upload: Drag-and-drop or click to upload JSON files
• Category Breakdown: Detailed breakdown of sizes by category
• Responsive Design: Works on desktop and mobile devices

• Node.js 16+ and npm

npm install

npm run dev

Open http://localhost:5173 to view the app in the browser.

npm run build

1. Load Data: Click on the upload area or drag a JSON file
2. Quick Test: Click "Load Sample Data" to try with sample iOS analysis data
3. Switch Views: Use the "Size Mode" dropdown to switch between install and download sizes
4. Explore: Click on different sections of the treemap to drill down into the data
5. Category Breakdown: Scroll down to see detailed size breakdowns by category

The preferred format matching the Python TreemapResults model:

{
  "root": {
    "name": "App Name",
    "install_size": 1000000,
    "download_size": 800000,
    "is_directory": true,
    "children": [...],
    "details": {}
  },
  "total_install_size": 1000000,
  "total_download_size": 800000,
  "file_count": 100,
  "category_breakdown": {...},
  "platform": "ios"
}

Legacy iOS analysis reports are automatically detected and converted:

{
  "file_analysis": {
    "total_size": 8454690,
    "file_count": 29,
    "files_by_type": {
      "unknown": [...],
      "png": [...],
      "car": [...]
    }
  },
  "app_info": {
    "name": "App Name",
    ...
  }
}

The app includes two sample files:

• sample-data.json: Legacy iOS analysis format (auto-converted)
• treemap-sample.json: Proper TreemapResults format

• React 18 with TypeScript
• Vite for build tooling
• ECharts for data visualization
• echarts-for-react for React integration

Different element types are color-coded in the treemap:

• Files: Blue (#3498db)
• Executables: Red (#e74c3c)
• Resources: Green (#2ecc71)
• Assets: Orange (#f39c12)
• Frameworks: Dark Orange (#e67e22)
• Asset Catalogs: Teal (#16a085)
• Property Lists: Dark Gray (#34495e)
• Fonts: Purple (#8e44ad)
• And more...

The app provides helpful error messages:

• Format Detection: Automatically detects file format
• Validation: Validates TreemapResults format
• Conversion: Converts legacy format with progress indication
• JSON Parsing: Clear error messages for invalid JSON

This is a testing tool for the Launchpad size analysis project. The converter handles the transition from legacy analysis formats to the new treemap structure defined in treemap.py.