{"id":48495253,"url":"https://github.com/openedi/oedisi-frontend-app","last_synced_at":"2026-04-07T12:01:37.741Z","repository":{"id":345136999,"uuid":"1130661801","full_name":"openEDI/oedisi-frontend-app","owner":"openEDI","description":"front end application developen in vue (testing)","archived":false,"fork":false,"pushed_at":"2026-03-17T20:28:58.000Z","size":174,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-18T09:47:31.491Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/openEDI.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-08T20:33:50.000Z","updated_at":"2026-03-17T20:29:00.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/openEDI/oedisi-frontend-app","commit_stats":null,"previous_names":["openedi/oedisi-frontend-app"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/openEDI/oedisi-frontend-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openEDI%2Foedisi-frontend-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openEDI%2Foedisi-frontend-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openEDI%2Foedisi-frontend-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openEDI%2Foedisi-frontend-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/openEDI","download_url":"https://codeload.github.com/openEDI/oedisi-frontend-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openEDI%2Foedisi-frontend-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31511784,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T03:10:19.677Z","status":"ssl_error","status_checked_at":"2026-04-07T03:10:13.982Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-07T12:01:36.471Z","updated_at":"2026-04-07T12:01:37.732Z","avatar_url":"https://github.com/openEDI.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# OEDISI Simulation Designer - Vue 3 Application\n\nThis is a Vue 3 + Vite TypeScript application that provides a web-based interface for creating, configuring, and managing co-simulation workflow configurations.\n\n## Features\n\n- **Flowchart Designer**: Interactive drag-and-drop interface using Vue Flow for designing simulation workflows\n- **Template Management**: Save, view, edit, and delete simulation templates\n- **Component Library**: Pre-built components (Simulator, Data Source, Connector, Configuration)\n- **Node Connections**: Connect components with visual edges in the flowchart\n- **Responsive UI**: Built with Tailwind CSS and Radix UI Vue components\n- **Backend API**: Express.js server with file-based JSON storage\n- **Persistent Storage**: Templates stored as JSON files in `data/templates/`\n\n## Project Structure\n\n```\n├── server/              # Backend API server\n│   ├── index.js         # Express.js server and API routes\n│   ├── database.js      # File-based template storage operations\n│   └── README.md        # Server documentation\n├── data/                # Template storage directory\n│   └── templates/       # JSON template files ({id}.json)\n├── src/\n│   ├── components/\n│   │   ├── ui/              # Reusable UI components (Button, Card, Dialog, etc.)\n│   │   ├── CustomNode.vue   # Custom Vue Flow node component\n│   ├── pages/\n│   │   ├── Home.vue                # Landing page\n│   │   ├── FlowchartDesigner.vue   # Main designer interface with Vue Flow\n│   │   ├── SavedConfigs.vue        # Template management\n│   │   ├── SimulationResults.vue   # Results viewer\n│   │   └── SimulationStatus.vue   # Status monitoring\n│   ├── router/\n│   │   └── index.ts         # Vue Router configuration\n│   ├── lib/\n│   │   ├── api.ts           # API client for backend communication\n│   │   └── utils.ts         # Utility functions (cn, clsx)\n│   ├── styles/\n│   │   └── index.css        # Global styles and Tailwind directives\n│   ├── App.vue              # Root component\n│   └── main.ts              # Application entry point\n└── package.json\n```\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18+ and npm/pnpm\n\n### Installation\n\n1. Navigate to the project directory:\n\n```bash\ncd /Users/alatif/Documents/GitHub/oedisi-frontend-app\n```\n\n2. Install dependencies:\n\n```bash\nnpm install\n# or\npnpm install\n```\n\n3. Start the development servers:\n\n**Option 1: Run both frontend and backend together (recommended):**\n\n```bash\nnpm run dev:all\n```\n\n**Option 2: Run separately:**\n\nTerminal 1 - Backend server:\n\n```bash\nnpm run dev:server\n```\n\nTerminal 2 - Frontend:\n\n```bash\nnpm run dev\n```\n\nThe frontend will be available at `http://localhost:5173`  \nThe backend API will be available at `http://localhost:3001`\n\n## Building\n\nTo create a production build:\n\n```bash\nnpm run build\n# or\npnpm build\n```\n\n## Pages\n\n### Home\n\nLanding page with quick access to main features:\n\n- Create new simulation templates\n- View saved templates\n- Access simulation results\n- Monitor simulation status\n\n### Flowchart Designer\n\nMain interface for creating simulation workflows using Vue Flow:\n\n- Drag components from the left sidebar to the canvas\n- Connect components by dragging from node handles (left/right sides)\n- Edit component properties in the right sidebar\n- Select and delete connections\n- Save templates with custom names and descriptions\n- Zoom, pan, and navigate with built-in controls\n- Minimap for overview of the flowchart\n\n### Saved Configs\n\nManage previously created templates:\n\n- View all saved templates with metadata\n- See all components in each template\n- Load templates back into the designer\n- Run simulations from saved templates\n- Download templates as JSON files\n- Delete templates\n\n### Simulation Results\n\nView and analyze simulation outputs (placeholder for future implementation)\n\n### Simulation Status\n\nMonitor active simulations and their progress (placeholder for future implementation)\n\n## Technology Stack\n\n### Frontend\n\n- **Vue 3**: Progressive JavaScript framework\n- **Vite**: Next generation frontend build tool\n- **TypeScript**: Typed JavaScript\n- **Vue Flow**: Interactive node-based graph library\n- **Tailwind CSS**: Utility-first CSS framework\n- **Vue Router**: Official routing library\n- **Lucide Vue**: Beautiful SVG icons\n\n### Backend\n\n- **Express.js**: Web application framework\n- **Node.js fs/path**: File system template persistence\n- **CORS**: Cross-origin resource sharing\n\n## Styling\n\nThe application uses Tailwind CSS with custom CSS variables for theming. Colors are defined in `src/styles/index.css` and can be customized in `tailwind.config.ts`.\n\n## Component System\n\n### UI Components\n\nLocated in `src/components/ui/`:\n\n- `Button.vue`: Versatile button with multiple variants\n- `Card.vue`: Container component with header, default, and footer slots\n- `Dialog.vue`: Modal dialog with header, content, and footer\n- `Input.vue`: Text input field\n- `Textarea.vue`: Multi-line text input\n- `Label.vue`: Form label component\n\n### Page Components\n\nLocated in `src/pages/`:\nEach page is a standalone component that uses the router and UI components.\n\n### Layout Components\n\n- `CustomNode.vue`: Custom Vue Flow node with connection handles\n\n## Data Storage\n\nTemplates are stored as **JSON files** in `data/templates/`.\n\n### Storage Structure\n\n- Each template is stored as one JSON file: `data/templates/{id}.json`\n- Files contain template metadata plus `nodes` and `edges`\n- `GET /api/templates` returns all files sorted by `createdAt` (newest first)\n\n### Template Schema\n\nEach template document contains:\n\n- `id`: Unique identifier (timestamp)\n- `name`: Template name\n- `description`: Template description\n- `nodes`: Array of node objects with positions and data\n- `edges`: Array of connection objects (source/target relationships)\n- `createdAt`: ISO timestamp\n\n### API Endpoints\n\nThe backend provides REST API endpoints:\n\n- `GET /api/templates` - Get all templates\n- `GET /api/templates/:id` - Get a single template\n- `POST /api/templates` - Save a new template\n- `PUT /api/templates/:id` - Update a template\n- `DELETE /api/templates/:id` - Delete a template\n\nSee `server/README.md` for more details about the backend API.\n\n## Future Enhancements\n\n- Real simulation execution\n- Advanced visualization and analytics\n- Collaborative design features\n- Template sharing and import/export\n- Undo/redo functionality\n- Component validation\n- Custom node types\n- Edge labels and properties\n- Template versioning\n\n## License\n\nCreated from Figma export for OEDISI project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopenedi%2Foedisi-frontend-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopenedi%2Foedisi-frontend-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopenedi%2Foedisi-frontend-app/lists"}