Data Flow

Relevant source files

The following files were used as context for generating this wiki page:

• backend/main.py
• frontend/src/components/DataView.tsx
• backend/topsis_service.py
• generate_excel_level.py
• frontend/src/components/DocumentationView.tsx
• README.md
• SUMMARY.md

The data flow in the SPK Kajek application is centered around a React frontend, a FastAPI backend, and a file-based data layer. The system is designed to read vendor data from an Excel file, perform TOPSIS calculations based on user-defined weights, and display the results. It also supports user authentication, data management (CRUD), and history tracking, with all interactions mediated by a REST API.

The core purpose is to transform raw vendor specifications, represented as levels, into quantifiable scores and rankings to support decision-making for selecting the best Cloud VPS. This process involves data ingestion, normalization, weighting, and distance calculations, all flowing from the user interface through the backend services and back to the user as visualizations and ranked lists.

System Architecture

The application follows a classic client-server architecture. The frontend is a Single Page Application (SPA) built with React, which communicates with a Python-based FastAPI backend via REST API calls. The backend, in turn, interacts with a data layer composed of Excel and JSON files for persistence.

This diagram illustrates the high-level data flow between the main components of the system.

Data Storage Layer

The application does not use a traditional database. Instead, it relies on a set of files for data persistence.

Data Storage Schema

The following diagram shows the relationship between the different data files used by the application.

Key Data Files

File	Purpose	Managed By
TOPSIS_Input_Level.xlsx	The primary data source for vendor alternatives. It stores vendor specifications as discrete levels (1-5).	backend/main.py uses pandas to read and write to this file.
users.json	Stores user account information, including hashed passwords for authentication.	The load_users and save_users functions in backend/main.py.
calculation_history.json	Persists the results of past TOPSIS calculations, including weights used and top rankings.	The load_history and save_history functions in backend/main.py.

Sources: backend/main.py:27-31, generate_excel_level.py

Backend Data Processing

The FastAPI backend is the central hub for all data operations. It exposes several API endpoints that the frontend consumes to read, write, and process data.

API Endpoints for Data Flow

Method	Endpoint	Description
GET	/api/data	Fetches all vendor data from TOPSIS_Input_Level.xlsx.
POST	/api/data	Adds a new vendor to the Excel file.
PUT	/api/data/{vendor_no}	Updates an existing vendor's data in the Excel file.
DELETE	/api/data/{vendor_no}	Deletes a vendor from the Excel file.
POST	/api/calculate	Executes the TOPSIS calculation with given weights and returns the rankings.
POST	/api/calculate-detail	Returns a step-by-step breakdown of the TOPSIS calculation matrices.
GET	/api/history	Retrieves the list of all saved calculation histories.
POST	/api/history	Saves the result of a new calculation to calculation_history.json.

Sources: backend/main.py:273, 285, 321, 346, 386, 440, 624, 633

TOPSIS Calculation Flow

When the /api/calculate or /api/calculate-detail endpoint is called, the backend executes the TOPSIS algorithm. This is the core data transformation process of the application.

This flowchart shows the steps involved in the TOPSIS calculation.

The level-to-value conversion logic is explicitly defined in the backend. For example, a CPU_Level of 1 is converted to a value of 2, and a RAM_Level of 5 is converted to 32. This mapping is crucial for the mathematical operations that follow.

Sources: backend/main.py:395-398, generate_excel_level.py:157-169

Frontend-Backend Interaction

The React frontend interacts with the backend through API calls, typically managed in a service layer. The user's actions on the UI trigger these calls, which fetch or modify data on the server.

Calculation Sequence Diagram

This diagram shows the sequence of events when a user runs a TOPSIS analysis from the frontend.

Data Management (CRUD)

The DataView.tsx component provides an interface for managing vendor data. It fetches the current list of vendors on load and provides forms to add, edit, or delete entries. Each action corresponds to an API call to the backend.

• Read: On component mount, a GET request is made to /api/data to populate the vendor table.
• Create: Submitting the "Add Vendor" form triggers a POST request to /api/data with the new vendor's details.
• Update: Editing a vendor and saving triggers a PUT request to /api/data/{vendor_no}.
• Delete: Clicking the delete button for a vendor sends a DELETE request to /api/data/{vendor_no}.

After each CUD operation, the frontend re-fetches the data to ensure the view is synchronized with the state of the TOPSIS_Input_Level.xlsx file.

Sources: frontend/src/components/DataView.tsx, backend/main.py:273-384

Conclusion

The data flow of the SPK Kajek system is a well-defined, unidirectional process for analysis and a standard client-server model for data management. Data originates from a structured Excel file, is processed by a robust Python backend service, and is consumed and manipulated through a modern React frontend. The use of a file-based data layer simplifies deployment and data editing (both in-app and offline via Excel), while the REST API provides a clear, decoupled interface between the client and server. The core value lies in the transformation of qualitative levels into a quantitative, ranked output via the TOPSIS algorithm.