Created page.tsx (markdown)
bRNS98
+184
@@ -0,0 +1,184 @@
|
||||
# Documentation for `page.tsx`
|
||||
|
||||
## Overview
|
||||
|
||||
The `page.tsx` file is a React component for a web page designed to facilitate solving mathematical problems using the GLPK (GNU Linear Programming Kit) solver. The interface includes features for uploading files, selecting language preferences, and running the solver to obtain results. This component is part of a larger application that likely involves solving linear programming problems.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Imports](#imports)
|
||||
2. [Component Overview](#component-overview)
|
||||
3. [State Management](#state-management)
|
||||
4. [Functional Logic](#functional-logic)
|
||||
5. [User Interface Elements](#user-interface-elements)
|
||||
6. [Event Handlers](#event-handlers)
|
||||
|
||||
---
|
||||
|
||||
## Imports
|
||||
|
||||
The file starts by importing several modules:
|
||||
|
||||
- **`useRouter`**: From `next/navigation`, this is used for navigation purposes in the Next.js app.
|
||||
- **`React`**: Core React library imports.
|
||||
- **`useState`, `useContext`, `useRef`, `useEffect`**: React hooks for managing state, context, and side-effects.
|
||||
- **`text`**: A localization function from a local `lang` module.
|
||||
- **`LanguageContext`**: For language management.
|
||||
- **`GLPKAPI`**: Imported from a local GLPK solver library, responsible for computational operations.
|
||||
|
||||
```typescript
|
||||
'use client';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import React, { useState, useContext, useRef, useEffect } from 'react';
|
||||
import text from "../lang";
|
||||
import { LanguageContext } from '../context/LanguageContext';
|
||||
import * as GLPKAPI from "../../solver/glpk.min.js";
|
||||
```
|
||||
|
||||
## Component Overview
|
||||
|
||||
The `GlpPage` component is a functional React component that provides a user interface for uploading problem files, solving them with GLPK, and displaying the results.
|
||||
|
||||
```typescript
|
||||
const GlpPage = () => {
|
||||
const router = useRouter();
|
||||
const { language, setLanguage } = useContext(LanguageContext);
|
||||
// State and other logic...
|
||||
return (
|
||||
// JSX structure...
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## State Management
|
||||
|
||||
The component uses several pieces of state to manage user interactions and display information:
|
||||
|
||||
- **`model`**: Stores the current problem model type (`gen` or `spec`).
|
||||
- **`fileContent`**: Holds the content of the uploaded file.
|
||||
- **`isFileUploaded`**: Tracks whether a file has been uploaded.
|
||||
- **`showFileContent`**: Determines if the file content should be displayed.
|
||||
- **`isLoading`**: Indicates if the solver is currently processing.
|
||||
- **`solverTime`**: Stores the time taken by the solver.
|
||||
- **`showPopup`**: Controls the visibility of the results popup.
|
||||
- **`resultContent`**: Contains the solver results to be displayed.
|
||||
|
||||
```typescript
|
||||
const [model, setModel] = useState('gen');
|
||||
const [fileContent, setFileContent] = useState<string>('');
|
||||
const [isFileUploaded, setIsFileUploaded] = useState(false);
|
||||
const [showFileContent, setShowFileContent] = useState(true);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [solverTime, setSolverTime] = useState<string>('');
|
||||
const [showPopup, setShowPopup] = useState(false);
|
||||
const [resultContent, setResultContent] = useState<string>('');
|
||||
```
|
||||
|
||||
## Functional Logic
|
||||
|
||||
### Language and Model Handling
|
||||
|
||||
The component provides dropdown menus to switch between languages and problem models. Changing a model to 'spec' redirects the user to a different route.
|
||||
|
||||
```typescript
|
||||
const handleLanguageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
setLanguage(event.target.value);
|
||||
};
|
||||
|
||||
const changeModel = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const selectedModel = event.target.value;
|
||||
setModel(selectedModel);
|
||||
if (selectedModel === 'spec') {
|
||||
router.push('/');
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### File Handling
|
||||
|
||||
The component includes functionality to upload and read text files. It uses the `FileReader` API to read file content and update the state accordingly.
|
||||
|
||||
```typescript
|
||||
const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (file) {
|
||||
setFileName(file.name);
|
||||
}
|
||||
if (!file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const content = e.target?.result as string;
|
||||
setFileContent(content);
|
||||
addMessage("File successfully uploaded and read.");
|
||||
setIsFileUploaded(true);
|
||||
};
|
||||
reader.readAsText(file);
|
||||
};
|
||||
```
|
||||
|
||||
### Solver Execution
|
||||
|
||||
The solver is executed using the GLPK API. It reads the model from the uploaded file, generates the problem, and finds a solution. The solver's execution time and results are displayed to the user.
|
||||
|
||||
```typescript
|
||||
const solve = () => {
|
||||
addMessage("Starting the solver...");
|
||||
setIsLoading(true);
|
||||
// Solver logic...
|
||||
const solverDuration = ((endTime - startTime) / 1000).toFixed(2);
|
||||
setSolverTime(`Solver time: ${solverDuration} seconds`);
|
||||
setResultContent(`${result}\n\n${variables}\n\nSolver time: ${solverDuration} seconds`);
|
||||
setShowPopup(true);
|
||||
};
|
||||
```
|
||||
|
||||
## User Interface Elements
|
||||
|
||||
The component's JSX structure includes several key interface elements:
|
||||
|
||||
- **Header**: Displays the title and subtitle, along with language and model selection dropdowns.
|
||||
- **File Upload Section**: Allows users to upload files for solving.
|
||||
- **Solver Button**: Triggers the solver when clicked.
|
||||
- **Result Display**: Shows the solver results in a popup.
|
||||
- **Messages and Loading Spinner**: Provides feedback to the user about the current process state.
|
||||
|
||||
```jsx
|
||||
return (
|
||||
<div>
|
||||
<header className="header">
|
||||
<div className="title">
|
||||
<main className="header_box">
|
||||
{/* Header content */}
|
||||
</main>
|
||||
</div>
|
||||
</header>
|
||||
<div className="containerGmpl">
|
||||
{/* File Upload and Solver UI */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
## Event Handlers
|
||||
|
||||
Multiple event handlers are defined to manage user interactions:
|
||||
|
||||
- **`handleLanguageChange`**: Updates the selected language.
|
||||
- **`changeModel`**: Switches between different problem models.
|
||||
- **`handleFileUpload`**: Processes file uploads and reads content.
|
||||
- **`solve`**: Initiates the solver process.
|
||||
- **`downloadFile`**: Allows the user to download the current problem file.
|
||||
|
||||
```typescript
|
||||
const downloadFile = () => {
|
||||
const element = document.createElement("a");
|
||||
const file = new Blob([fileContent], { type: 'text/plain' });
|
||||
element.href = URL.createObjectURL(file);
|
||||
element.download = "problem.gmpl";
|
||||
document.body.appendChild(element);
|
||||
element.click();
|
||||
document.body.removeChild(element);
|
||||
};
|
||||
```
|
||||
|
||||
This detailed documentation provides an in-depth understanding of the `page.tsx` file's structure, functionality, and user interactions, making it comprehensive for developers and engineers looking to understand or modify the component.
|
||||
Reference in New Issue
Block a user