JWST Lenses

An interactive gallery for visualizing strong gravitational lenses from the LaStBeRu catalog observed with the James Webb Space Telescope (JWST).

About

This project showcases gravitational lenses from "The Last Stand Before Rubin" (LaStBeRu) catalog that were observed within JWST footprints. The LaStBeRu catalog represents a comprehensive compilation of over 30,000 strong lensing systems from wide-field surveys, serving as a consolidated dataset in preparation for the Vera Rubin Observatory.

Reference: The Last Stand Before Rubin (arXiv:2509.09798)
Authors: Renan Alves de Oliveira, João Paulo C. França, Martín Makler

Data Structure

The gallery displays:

• Strong Lensing Systems: Objects from the LaStBeRu catalog with JWST observations
• RGB Composites: Color images processed using Trilogy
• Individual Bands: Single filter images from JWST (F115W, F150W, F200W, F277W, F356W, F444W)

Installation and Usage

Prerequisites

• Node.js 18+
• npm or yarn
• Python 3.8+ (for data generation)

1. Install Dependencies

npm install

2. Generate Data

Ensure your JWST data is properly structured in the source directory:

cd /path/to/gallery/
python3 generate_data.py

This script:

• Converts CSV data to JSON format
• Catalogs all available images
• Creates necessary data files
• Generates statistics

3. Development Server

npm run dev

Access: http://localhost:5173

4. Build for Production

npm run build

5. Deploy to GitHub Pages

npm run deploy

This builds the project to the docs/ directory, which can be served by GitHub Pages.

See DEPLOYMENT.md for detailed deployment instructions and CI/CD setup.

Project Structure

jwst-lenses/
├── src/
│   ├── components/
│   │   ├── JWSTGallery.tsx       # Main gallery component
│   │   ├── ObjectCard.tsx        # Individual lens card
│   │   ├── GalleryFilters.tsx    # Filter controls
│   │   └── ImageWithLoader.tsx   # Optimized image loader
│   ├── hooks/
│   │   └── useLazyImage.ts       # Lazy loading hook
│   ├── App.tsx                   # Main application
│   ├── main.tsx                  # Entry point
│   ├── api.ts                    # Data loading API
│   ├── types.ts                  # TypeScript types
│   └── theme.ts                  # Dark theme configuration
├── public/
│   ├── data/                     # JSON data files
│   │   ├── jwst_objects.json     # Lens catalog
│   │   ├── jwst_images.json      # Image metadata
│   │   └── jwst_stats.json       # Statistics
│   └── images/                   # Image assets
│       ├── rgb/                  # RGB composites
│       └── single_bands/         # Individual filters
├── generate_data.py              # Data generation script
├── package.json
├── vite.config.ts                # Vite configuration
└── README.md

Data Format

Objects (jwst_objects.json)

{
  "JNAME": "J001416.1-302258.8",
  "RA": 3.56708,
  "DEC": -30.383
}

Images (jwst_images.json)

{
  "JNAME": "J001416.1-302258.8",
  "type": "RGB",
  "file_path": "rgb/J001416.1-302258.8_RGB.png"
}

{
  "JNAME": "J001416.1-302258.8",
  "type": "single_band",
  "band": "f115w",
  "file_path": "single_bands/J001416.1-302258.8_f115w.png"
}

Troubleshooting

Build Issues

If you encounter errors like ENOENT: no such file or directory during build:

• Images are tracked in public/images/ (179MB, committed in repository)
• The docs/ directory is build output (not tracked in git)
• If images are missing, restore from git: git checkout HEAD -- public/images/
• The build process copies public assets to docs/ or dist/ automatically

See DEPLOYMENT.md for more troubleshooting tips.

Citation

If you use this gallery or the LaStBeRu catalog in your research, please cite:

@article{alves2025laststand,
  title={The Last Stand Before Rubin: a consolidated sample of strong lensing systems in wide-field surveys},
  author={Alves de Oliveira, Renan and França, João Paulo C. and Makler, Martín},
  journal={arXiv preprint arXiv:2509.09798},
  year={2025}
}

Acknowledgments

• JWST Space Telescope
• The strong lensing research community