Advanced Compiler-Compiler Platform
This roadmap provides a detailed implementation strategy for bringing the UI capabilities from old_code into the current Minotaur project, with a focus on architectural integration and phased delivery.
┌─────────────────────────────────────────────────────────────┐
│ Browser / Electron │
├─────────────────────────────────────────────────────────────┤
│ React/TypeScript Frontend │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────────┐│
│ │ Editor │ │Visualization│ │ Debugging ││
│ │ Panel │ │ Panel │ │ Panel ││
│ └─────────────┘ └─────────────┘ └─────────────────────────┘│
├─────────────────────────────────────────────────────────────┤
│ REST API / SignalR │
├─────────────────────────────────────────────────────────────┤
│ C# ASP.NET Core │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────────┐│
│ │ Minotaur │ │ Parser │ │ Railroad ││
│ │ Core │ │ Services │ │ Generator ││
│ └─────────────┘ └─────────────┘ └─────────────────────────┘│
└─────────────────────────────────────────────────────────────┘
Goal: Establish web UI project structure integrated with C# backend
Tasks:
src/
├── Minotaur.WebUI/ # New ASP.NET Core project
│ ├── Controllers/
│ ├── Hubs/ # SignalR hubs
│ ├── wwwroot/
│ └── ClientApp/ # React application
│ ├── src/
│ │ ├── components/
│ │ ├── services/
│ │ └── types/
│ ├── package.json
│ └── vite.config.ts
{
"dependencies": {
"react": "^18.2.0",
"@types/react": "^18.2.0",
"typescript": "^5.0.0",
"vite": "^4.4.0",
"@vitejs/plugin-react": "^4.0.0"
}
}
Deliverables:
Goal: Establish communication between React frontend and C# backend
Tasks:
// Controllers/GrammarController.cs
[ApiController]
[Route("api/[controller]")]
public class GrammarController : ControllerBase
{
[HttpPost("parse")]
public async Task<ParseResult> ParseGrammar([FromBody] ParseRequest request)
[HttpPost("validate")]
public async Task<ValidationResult> ValidateGrammar([FromBody] string grammarCode)
[HttpGet("samples")]
public async Task<List<GrammarSample>> GetSamples()
}
// Hubs/ParsingHub.cs
public class ParsingHub : Hub
{
public async Task StartParsing(string grammarCode, string sourceCode)
public async Task StopParsing()
}
// services/api.ts
export class MinotaurApiClient {
async parseGrammar(request: ParseRequest): Promise<ParseResult>
async validateGrammar(grammarCode: string): Promise<ValidationResult>
async getSamples(): Promise<GrammarSample[]>
}
Deliverables:
Goal: Create the main application structure and navigation
Tasks:
// ClientApp/src/components/App.tsx
interface AppState {
grammarCode: string;
sourceCode: string;
parseTree: any;
debugState: any;
activeTab: string;
}
Deliverables:
Goal: Basic text editing functionality with backend integration
Tasks:
// components/CodeEditor.tsx
interface CodeEditorProps {
value: string;
onChange: (value: string) => void;
language: 'grammar' | 'source';
readOnly?: boolean;
}
Deliverables:
Goal: Implement basic railroad diagram generation and viewing
Tasks:
// Services/RailroadService.cs
public class RailroadService
{
public async Task<RailroadDiagram> GenerateDiagram(string grammarCode, RailroadOptions options)
public async Task<ExportResult> ExportDiagram(RailroadDiagram diagram, ExportFormat format)
}
// components/RailroadDiagramViewer.tsx
interface RailroadDiagramViewerProps {
grammarCode: string;
options: RailroadOptions;
onError: (error: Error) => void;
onGenerated: (result: GenerationResult) => void;
}
Deliverables:
Goal: Implement visualization components for parse trees and grammar graphs
Tasks:
npm install reactflow
Deliverables:
Goal: Integrate all visualization components into unified panel
Tasks:
Deliverables:
Goal: Implement debugging and analysis tools
Tasks:
Deliverables:
Goal: Implement theming and improve user experience
Tasks:
// services/ThemeManager.ts
export class ThemeManager {
getAvailableThemes(): Theme[]
setCurrentTheme(name: string): void
getCurrentTheme(): Theme
}
Deliverables:
Goal: Implement comprehensive testing
Tasks:
npm install @testing-library/react @testing-library/jest-dom vitest
Deliverables:
Goal: Implement Electron desktop app support
Tasks:
npm install electron electron-builder
Deliverables:
Goal: Create standalone railroad diagram web viewer
Tasks:
Deliverables:
Goal: Implement Blockly visual editor
Tasks:
npm install blockly
Deliverables:
Goal: Finalize implementation and create documentation
Tasks:
Deliverables:
This roadmap provides a structured approach to implementing the UI capabilities while maintaining integration with the existing C# backend and ensuring a professional, maintainable solution.