feat: Add bundled React webview CLI for local file visualization #2107

ganeshrvel · 2025-07-14T15:11:09Z

Problem Statement

What we're trying to solve:

Python project generates local output files that need visual inspection
Users need a simple CLI command (load-webview) to instantly view these files in a web interface
Want to ship React frontend + Python backend as a single pip-installable package
Need both development mode (separate servers) and production mode (bundled React served by Python)

The Architecture:
pip install my-project
↓
my-project generates local files
↓
load-webview # Single CLI command
↓
Launches: Python API server + React frontend
↓
User opens browser → Views local files via web interface

How we're solving it:

Bundled Distribution Strategy:
- Development: React dev server (port 3000) + Python API (port 8000) running separately
- Production: React app pre-built into static files, served by Python server
- Single pip package contains both frontend bundle and Python backend
CLI Workflow: # User installs package pip install my-project

User generates files with main project

my-project --input data.json --output results/

User views results in browser

load-webview --data-dir results/

→ Opens http://localhost:8000 with React app

Build Pipeline:
- scripts/build.py: Builds React app → js-bundle/ directory
- scripts/dev.py: Runs both servers for development
- Package includes pre-built React bundle for production
- CLI automatically serves bundled frontend if available
Technical Implementation:
- Frontend: React + TypeScript for file visualization (tables, charts, etc.)
- Backend: FastAPI with file reading APIs (/api/datasets, /api/files)
- Development: Auto-reload on code changes, CORS configured
- Production: Static file serving, SPA routing, single server

Problem Statement What we're trying to solve: - Python project generates local output files that need visual inspection - Users need a simple CLI command (load-webview) to instantly view these files in a web interface - Want to ship React frontend + Python backend as a single pip-installable package - Need both development mode (separate servers) and production mode (bundled React served by Python) The Architecture: pip install my-project ↓ my-project generates local files ↓ load-webview # Single CLI command ↓ Launches: Python API server + React frontend ↓ User opens browser → Views local files via web interface How we're solving it: 1. Bundled Distribution Strategy: - Development: React dev server (port 3000) + Python API (port 8000) running separately - Production: React app pre-built into static files, served by Python server - Single pip package contains both frontend bundle and Python backend 2. CLI Workflow: # User installs package pip install my-project # User generates files with main project my-project --input data.json --output results/ # User views results in browser load-webview --data-dir results/ # → Opens http://localhost:8000 with React app 3. Build Pipeline: - scripts/build.py: Builds React app → js-bundle/ directory - scripts/dev.py: Runs both servers for development - Package includes pre-built React bundle for production - CLI automatically serves bundled frontend if available 4. Technical Implementation: - Frontend: React + TypeScript for file visualization (tables, charts, etc.) - Backend: FastAPI with file reading APIs (/api/datasets, /api/files) - Development: Auto-reload on code changes, CORS configured - Production: Static file serving, SPA routing, single server

greptile-apps

Greptile Summary

This PR introduces a new feature to add a web-based visualization interface for Ragas evaluation results through a bundled React webview CLI. The implementation allows users to view local evaluation files through a browser with a simple CLI command.

The changes introduce:

A Python FastAPI backend that serves both API endpoints and static files
A React frontend with TypeScript and TailwindCSS for visualization
Development mode with separate servers and hot-reload
Production mode where React is pre-built and served by Python

However, there are several critical issues that need addressing:

The package.json specifies non-existent future versions of dependencies (React 19.1.0, TailwindCSS 4.0.0)
The datasets.py service has hardcoded paths and ignores the data_dir parameter
Bundle validation in bundle.py could be more robust

Confidence score: 2/5

This PR will likely cause immediate dependency and runtime issues if merged
The dependency versions and hardcoded paths make this PR unstable and potentially broken
Files needing attention:
- webview-poc/ragas-webview/package.json (invalid dependency versions)
- webview-poc/ragas_webview_cli/services/datasets.py (hardcoded paths)
- webview-poc/ragas_webview_cli/services/bundle.py (validation logic)

_{30 files reviewed, 19 comments}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-07-14T15:11:41Z

webview-poc/ragas-webview/src/components/ErrorMessage.tsx

+
+export function ErrorMessage({ message, onRetry }: ErrorMessageProps) {
+  return (
+    <div className="flex items-center justify-center min-h-screen">


style: min-h-screen forces full viewport height - might not be desirable in all contexts where this error could be used

greptile-apps · 2025-07-14T15:11:43Z

webview-poc/.gitignore

+.Python
+build/
+develop-eggs/
+dist/


style: dist/ appears multiple times in the file (line 56). Consider consolidating these entries to avoid confusion.

greptile-apps · 2025-07-14T15:11:44Z

webview-poc/ragas_webview_cli/config.py

+
+def get_environment() -> Environment:
+    """Get current environment from env var."""
+    env_str = os.getenv("WEBVIEW_ENV", "PRODUCTION").upper()


style: env var name should have prefix matching project (RAGAS_WEBVIEW_ENV instead of WEBVIEW_ENV)

greptile-apps · 2025-07-14T15:11:46Z

webview-poc/ragas-webview/src/index.css

+  background-color: #f9fafb;
+  color: #111827;


style: use CSS variables instead of hardcoded colors to maintain consistency with the theme system

greptile-apps · 2025-07-14T15:11:47Z

webview-poc/scripts/dev.py

+import sys
+import os
+import time
+import signal


style: signal module is imported but never used

greptile-apps · 2025-07-14T15:11:49Z

webview-poc/ragas_webview_cli/services/datasets.py

+    current_file = Path(__file__)
+    project_root = current_file.parent.parent.parent
+    csv_file = project_root / "samples_data" / "evaluation_results.csv"


logic: path resolution from file is fragile and assumes fixed directory structure. This breaks if installed via pip. Use data_dir parameter instead

greptile-apps · 2025-07-14T15:11:49Z

webview-poc/ragas-webview/eslint.config.js

+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],


style: Add .jsx extension to file pattern for better compatibility

greptile-apps · 2025-07-14T15:11:49Z

webview-poc/README.md

+- `GET /` - Serves React app (production) or API info (development)
+- `GET /api/health` - Health check endpoint
+- `GET /assets/*` - Static assets (CSS, JS, images)


logic: API endpoints section is incomplete. Missing dataset and file endpoints mentioned in the PR description.

greptile-apps · 2025-07-14T15:11:50Z

webview-poc/ragas_webview_cli/services/datasets.py

+        )
+
+
+def create_datasets_router(data_dir: Optional[str] = None) -> APIRouter:


logic: data_dir parameter is never used in the implementation. Either use it or remove it

greptile-apps · 2025-07-14T15:11:51Z

webview-poc/ragas_webview_cli/services/app.py

+    return router
+
+
+def mount_static_files(app, js_bundle_dir: Path):


style: Missing type hint for 'app' parameter

dosubot bot added the size:XXL This PR changes 1000+ lines, ignoring generated files. label Jul 14, 2025

greptile-apps bot reviewed Jul 14, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Add bundled React webview CLI for local file visualization #2107

feat: Add bundled React webview CLI for local file visualization #2107

Uh oh!

ganeshrvel commented Jul 14, 2025

Uh oh!

greptile-apps bot left a comment

Uh oh!

greptile-apps bot Jul 14, 2025

Uh oh!

greptile-apps bot Jul 14, 2025

Uh oh!

greptile-apps bot Jul 14, 2025

Uh oh!

greptile-apps bot Jul 14, 2025

Uh oh!

greptile-apps bot Jul 14, 2025

Uh oh!

greptile-apps bot Jul 14, 2025

Uh oh!

greptile-apps bot Jul 14, 2025

Uh oh!

greptile-apps bot Jul 14, 2025

Uh oh!

greptile-apps bot Jul 14, 2025

Uh oh!

greptile-apps bot Jul 14, 2025

Uh oh!

Uh oh!

		)


		def create_datasets_router(data_dir: Optional[str] = None) -> APIRouter:

		return router


		def mount_static_files(app, js_bundle_dir: Path):

feat: Add bundled React webview CLI for local file visualization #2107

Are you sure you want to change the base?

feat: Add bundled React webview CLI for local file visualization #2107

Uh oh!

Conversation

ganeshrvel commented Jul 14, 2025

User generates files with main project

User views results in browser

→ Opens http://localhost:8000 with React app

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Greptile Summary

Confidence score: 2/5

Uh oh!

greptile-apps bot Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!