{"id":28759524,"url":"https://github.com/joweltisso/noviga-assignment","last_synced_at":"2026-04-15T14:02:25.313Z","repository":{"id":296712252,"uuid":"992756708","full_name":"JowelTisso/noviga-assignment","owner":"JowelTisso","description":"Noviga Automation Assignment","archived":false,"fork":false,"pushed_at":"2025-06-16T07:06:02.000Z","size":1839,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-16T08:23:15.927Z","etag":null,"topics":["css","highcharts","html","javascript","materialui","react","reactflow","redux-toolkit","scss","typescript"],"latest_commit_sha":null,"homepage":"https://noviga.netlify.app/","language":"TypeScript","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/JowelTisso.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}},"created_at":"2025-05-29T16:59:47.000Z","updated_at":"2025-06-16T07:06:05.000Z","dependencies_parsed_at":"2025-06-01T23:34:33.328Z","dependency_job_id":null,"html_url":"https://github.com/JowelTisso/noviga-assignment","commit_stats":null,"previous_names":["joweltisso/noviga-assignment"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/JowelTisso/noviga-assignment","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JowelTisso%2Fnoviga-assignment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JowelTisso%2Fnoviga-assignment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JowelTisso%2Fnoviga-assignment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JowelTisso%2Fnoviga-assignment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JowelTisso","download_url":"https://codeload.github.com/JowelTisso/noviga-assignment/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JowelTisso%2Fnoviga-assignment/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260294464,"owners_count":22987624,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["css","highcharts","html","javascript","materialui","react","reactflow","redux-toolkit","scss","typescript"],"created_at":"2025-06-17T05:07:11.249Z","updated_at":"2025-10-25T17:33:05.245Z","avatar_url":"https://github.com/JowelTisso.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Noviga Assignment - React Frontend Developer\n\nThis is the solution for the **Noviga React Frontend Developer Assignment**.  \nThe project implements an interactive React application focused on **industrial machine monitoring** and **process visualization** using charts and graphs.\n\n### [Live](https://noviga.netlify.app/)\n\n## 📹 Demo\n\nA video recording has been provided that includes:\n\n- Project architecture overview\n- Code walkthrough\n- Features demonstration\n\n---\n\n## 📁 Project Structure\n\nThe project has **two main pages**:\n\n1. **Scatter Data Visualization**\n2. **Tree Visualization (Process Flow Diagram)**\n\nNavigation is handled via a **collapsible sidebar**.\n\n---\n\n## 🛠 Tech Stack\n\n- **React.js** - Core Framework\n- **React Router DOM** - Page navigation\n- **Redux Toolkit** - State management\n- **Highcharts** - High Performance Data Visualization (with zoom and pan capabilities)\n- **React-Flow** - Tree Visualization\n- **MaterialUI** - UI component library\n- **SCSS** - Styling\n- **Axios** - API simulation\n- **Date-fns** - Date manipulation\n\n---\n\n## ✨ Features\n\n### 1️⃣ Scatter Data Visualization Page\n\n#### Graph 1: Distance vs Time Scatter Plot\n\n- Interactive Scatter Plot with Zoom \u0026 Pan\n- Able to handle upto 10,000 data points\n- X-axis: Epoch Timestamps → DateTime\n- Y-axis: Distance Values\n- Dot Colors:\n  - 🟢 Green → `anomaly: false`\n  - 🔴 Red → `anomaly: true`\n  - ⚫ Black → `anomaly: null`\n- Threshold line → Red line for each selected Tool Sequence\n- UI Controls:\n  - Machine selection dropdown\n  - Date range \u0026 time pickers\n  - Tool sequence selector with tooltips (Option only populates when machine and date range are selected)\n  - Search button to apply filters and load data\n- Interactivity:\n  - Clicking on any dot triggers Graph 2\n  - Hover tooltips for cycle details\n  - Mouse wheel scroll up/down with zoom in/out respectively\n\n#### Graph 2: Time Series Analysis (Interactive)\n\n- Triggered by clicking on scatter plot dot\n- Time Series Line Chart:\n  - Actual Signal → Blue\n  - Ideal Signal → Light Blue\n- Pan \u0026 Zoom supported (Hold Shift to pan X-axis \u0026 mouse wheel scroll to zoom)\n- Dynamic axis scaling\n- Time alignment between actual \u0026 ideal signal\n\n---\n\n### 2️⃣ Tree Visualization Page\n\n- Interactive Process Flow Diagram:\n  - Nodes connected via edges\n  - Node info displayed on hover\n  - Click node → Edit Modal (Rename, Station Number, Color Category)\n  - Real-time diagram update after edit\n- Color Coding:\n  - 🔴 Red → `not_allowed_list`\n  - 🔵 Blue → `bypass_list`\n  - ⚪ White → Normal\n\n---\n\n## ⚙️ Approach\n\n### Architecture\n\n- Pages are structured via **React Router**.\n- UI is built from reusable React components and MaterialUI.\n- Used **Redux Toolkit** for managing shared states.\n- API simulation is done by serving **static JSON files** locally and mimicking REST API responses using axios.\n- Charts are built using **Highcharts** for consistent zooming and pan experience.\n- Tree visualization uses **React-Flow** for modularity and flexibility.\n\n### Data Layer \u0026 API Simulation\n\n- APIs are simulated using **Mirage JS**, which acts as a mock backend:\n  - The Mirage server is configured to serve:\n    - ChangeLog API\n    - Prediction Data API\n    - Cycle Data API\n    - Graph Visualization API\n- Mirage serves responses from the provided **static JSON files**, allowing the frontend to interact with a realistic REST API layer without needing an actual backend.\n- Axios is used to make requests to the Mirage JS API endpoints.\n- Json files are placed in public folder and fetched dynamically.\n\n### Data Flow\n\n- Components fetch static JSON simulating:\n  - ChangeLog API\n  - Prediction Data API\n  - Cycle Data API\n  - Graph Data API\n- Data is processed and transformed locally which are component specific and are not shared.\n- Shared Data are passed as props as only one level of prop passing is required.\n- Shared State is managed centrally to allow **smooth interactivity** between Components and Graphs.\n- Component specific states are managed locally.\n\n### Key Algorithms\n\n- Formatting prediction api data to be able to segragate cycles data with respect to anomaly to be able to plot the data points in scatter graph.\n- Extracting threshold data from changelogs.\n- Extracting ideal signals from changelogs.\n- Find the clicked node data from formatted predictions data.\n- Fetch timeseries data and extract actual signals and time range.\n- Dynamic scaling of axes based on min/max values.\n- Efficient rendering to handle large data points.\n- Fetching production machine map data from api and structure it as nodes and edges to implement in flow chart using dagre tree layout.\n\n---\n\n## 📝 Assumptions\n\nData timeframe: March 1 to May 27, 2025\n\nMachine Count: 2 machines → Machine1-SSP0173, Machine2-SSP0167\n\nTool Sequences: Dynamically fetched from changelog api\n\nReal-time updates simulated using static data.\n\nBrowser Support: Modern browsers → Chrome, Firefox, Safari, Edge.\n\nScreen Resolution: Optimized for 1920x1080 and above.\n\nDesigned to handle up to 10,000 data points efficiently.\n\n## 📂 Folder Structure\n\n```\npublic/\n├── data/\n│   ├── changelog.json\n│   ├── prediction.json\n│   ├── timeseries.json\n│   ├── treevisual.json\n\nsrc/\n├── backend/\n│   ├── controllers/\n│   └── server.ts            # Mirage JS server config\n├── components/              # Reusable UI components\n├── pages/                   # Scatter Page, Tree Visualization Page\n├── reducers/                # Redux Toolkit reducers (slices)\n├── routes/                  # App routes\n├── services/                # API services (Axios)\n├── store/                   # Redux store setup\n├── styles/                  # SCSS\n├── types/                   # TypeScript types\n├── utils/                   # Helper utilities\n├── App.tsx                  # Main App component\n├── main.tsx                 # Entry point\n\n\n```\n\n## 🚀 How to Run\n\n```bash\n# Clone the repo\ngit clone https://github.com/JowelTisso/noviga-assignment.git\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n\n# The app will be running at:\nhttp://localhost:5173\n```\n\n## ✅ Summary\n\nThis project meets all core requirements and features including:\n\n✅ Pan \u0026 Zoom on Scatter Chart and Time Series chart\n\n✅ Dynamic Threshold Line\n\n✅ Real-time Editable Tree with React-Flow + Dagre\n\n✅ Efficient State Management with Redux Toolkit\n\n✅ Mock backend with Mirage JS for realistic API simulation\n\n✅ Responsive Design\n\n✅ Clean and intuitive UI\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoweltisso%2Fnoviga-assignment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoweltisso%2Fnoviga-assignment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoweltisso%2Fnoviga-assignment/lists"}