Adding results and export (#19)

* Initial Push

Inititial project state

* Static demo version

* static demo site - added variables

a

* first_implementation

* Updated UI, Improved Style to be more "Reactly", added Functionality

* add parsing functions

* change folder

* Import/Export Prototype

* Adding "reactjs-popup" to package,json

* Adding GLPK source

* Rough implementation of solver + example

* Show solution in output

* example 2 + popup lib

* removing import button

This feature won't be needed in this state of the project and might come back later. Right now it serves no functional purpose.

* Removing "Popout" button

This feature won't be needed in this state of the project and might come back later. Right now it serves no functional purpose.

* Updating Logs

Now the site displays all logs created with customLog(STRING). Logs can be cleared with customLogClear();

* Adding walltime

Can be called using:

Start:
function walltimeStart() {
returns Date.now();

Stop:
function walltimeStopAndPrint(startpoint: number) {
Add startpoint as argument.
It prints the elapsed time using customLog()

* Adding duals ouput

* Adding glpk.js package

required dependency

* adding LP format export and fixing a few errors

* fixing further errors

* adding automatic build

* Moving files to correct folders

* Update nextjs.yml

---------

Signed-off-by: SinusFox <61253950+SinusFox@users.noreply.github.com>
Co-authored-by: moebiusl <lucas.moebius@icloud.com>
Co-authored-by: Marcel Pöppe <marcel.poeppe@gmail.com>
This commit is contained in:
SinusFox
2024-10-03 23:00:32 +02:00
committed by GitHub
parent aa1dcd2d20
commit e8d29783c6
26 changed files with 42341 additions and 1 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.
Binary file not shown.
+160
View File
@@ -0,0 +1,160 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--background: #ffffff;
--foreground: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
}
.container {
display: flex;
justify-content: space-between; /* Optional: sorgt für Abstand */
width: 100%; /* Optional: gibt dem Container eine Breite */
}
.header {
font-size: 36px;
text-align: center;
}
.header_box {
flex: 1; /* Teilt den verfügbaren Platz auf die Textboxen auf */
margin: 10px 10px; /* Optional: fügt einen horizontalen Abstand hinzu */
padding: 10px; /* Optional: fügt einen inneren Abstand hinzu */
/* font-size: 16px; // Optional: definiert die Schriftgröße */
border-radius: 20px;
border: 20px solid #202020;
background-color: #202020;
}
.header_copyright {
font-size: 16px;
color:#707070;
padding-top: 10px;
}
.button {
border: 2px solid #5353535c;
background-color: #1010105c;
border-radius: 20px;
margin: 10px;
padding: 10px;
}
.button:hover {
border: 2px solid #5353535c;
background-color: #5353535c;
border-radius: 20px;
margin: 10px;
padding: 10px;
}
.button_green {
border: 2px solid #4795475c;
background-color: #247d245c;
/* border-radius: 20px; */
border-radius: 20px;
margin: 10px;
padding: 10px;
}
.button_red {
border: 2px solid #9547475c;
background-color: #7d24245c;
/* border-radius: 20px 10px; */
border-radius: 20px;
margin: 10px;
padding: 10px;
}
.button_green:hover {
border: 2px solid #4795475c;
background-color: #4795475c;
/* border-radius: 20px; */
border-radius: 20px;
margin: 10px;
padding: 10px;
}
.button_red:hover {
border: 2px solid #9547475c;
background-color: #9547475c;
/* border-radius: 20px 10px; */
border-radius: 20px;
margin: 10px;
padding: 10px;
}
.box {
width: 100%;
padding: 10px;
height: 20px;
}
.main_div {
flex: 1;
border-width: 0px;
}
.body_box {
flex: 1; /* Teilt den verfügbaren Platz auf die Textboxen auf */
padding: 10px; /* Optional: fügt einen inneren Abstand hinzu */
width: 100%;
/* font-size: 16px; // Optional: definiert die Schriftgröße */
border-radius: 20px;
border: 2px solid #8d8d8d;
background-color: #474747;
font-size: 10;
}
.body_title {
font-size: 20px;
margin: 10px;
}
.text {
margin: 10px;
}
.output_box {
flex: 1; /* Teilt den verfügbaren Platz auf die Textboxen auf */
padding: 10px; /* Optional: fügt einen inneren Abstand hinzu */
width: 100%;
/* font-size: 16px; // Optional: definiert die Schriftgröße */
border-radius: 20px;
border: 2px solid #8d8d8d;
background-color: #4dc3435c;
font-size: 10;
height: fit-content 100%;
}
.popup_bg {
width: 2000px;
padding: 20px;
box-shadow: 0 2px 10px #7c7c7c;
background: black;
}
.popup-overlay {
background: rgba(0, 0, 0, 0.5);
}
+85
View File
@@ -0,0 +1,85 @@
import type { Metadata } from "next";
import Image from "next/image";
import localFont from "next/font/local";
import "./globals.css";
const geistSans = localFont({
src: "./fonts/GeistVF.woff",
variable: "--font-geist-sans",
weight: "100 900",
});
const geistMono = localFont({
src: "./fonts/GeistMonoVF.woff",
variable: "--font-geist-mono",
weight: "100 900",
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<footer className=" flex gap-6 flex-wrap items-center justify-center">
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://github.com/Spaceholder-Programming/Operations-Research-Tool/wiki"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/file.svg"
alt="File icon"
width={16}
height={16}
/>
Go to our docs
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://github.com/Spaceholder-Programming/Operations-Research-Tool/"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
See the source code
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://www.gnu.org/software/glpk/"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Powered by GLPK
</a>
</footer>
</div>
</body>
</html>
);
}
+50
View File
@@ -0,0 +1,50 @@
import { MouseEventHandler } from "react";
import React from 'react';
import Popup from "reactjs-popup";
export function Box({title, placeholder, id}:
{title:string; placeholder:string; id:string}) {
return(
<div className="main_div">
<div className="body_title">
{title}
</div>
<div className="text">
<textarea
className="body_box"
id={id}
wrap="soft"
rows={6}
placeholder={placeholder}
></textarea>
</div>
</div>
);
}
export function Button({title, className, onClickFunc}:
{title:string; className:string|undefined; onClickFunc: MouseEventHandler}) {
return(
<button
className={className}
onClick={onClickFunc}
>
{title}
</button>
);
}
export function Output({ id, text }: { id: string; text: string }) {
return (
<div className="main_div">
<div className="body_title">Output</div>
<div className="text">
<p className="output_box" id={id}>
{text}
</p>
</div>
</div>
);
}
+58
View File
@@ -0,0 +1,58 @@
'use client'
import { Box, Button, Output } from "./modules";
import { calculate_click, downloadLP, import_click } from "./scripts"
export default function Home() {
return (
<>
<header className="header">
<div className="title">
<main className="header_box">
Operations Research Tool
<br></br>
<span className="header_copyright">
<i>by Spaceholder Programming</i>
</span>
</main>
</div>
</header>
<Box
title={"Objective"}
placeholder={"Objective"}
id="objective"/>
<Box
title={"Subject"}
placeholder={"Subject"}
id="subject"/>
<Box
title={"Bounds"}
placeholder={"Bounds"}
id="bounds"/>
<Box
title={"Variables"}
placeholder={"Your Variables here"}
id="vars" />
<Button
title={"Calculate"}
className={"button_green"}
onClickFunc={calculate_click} />
{/* <Popup_Button
title={"Import"}
className={"button"} /> */}
<Button
title={"Export as LP"}
className={"button"}
onClickFunc={downloadLP} />
<br></br>
<Output
id="out"
text={"Ergebnis"}/>
{/* <Popup_Button
title="Popup"
className="button"
/> */}
</>
);
}
+314
View File
@@ -0,0 +1,314 @@
import * as MIP from "../parser/parseMIP"
import * as LP from "../parser/parseLP"
import * as LPAPI from "../api/optimizeLP.js"
import * as GLPKAPI from "../solver/glpk.min.js"
import { start } from "repl";
// custom log so we can append the output dynamically
function customLog(message: string) {
console.log(message); // Continue to print message inside of box
// Get Output Box
const outputElement = document.getElementById('out');
// Append message if element exists
if (outputElement) {
outputElement.innerHTML += message + "<br>"; // Append message
}
}
function customLogClear() {
const outElement = document.getElementById('out');
if (outElement) {
outElement.innerHTML = "";
}
}
function walltimeStopAndPrint(startpoint: number) {
// calculating elapsed time as timestamp
let duration = Date.now() - startpoint;
// Calculate seconds and ms
const seconds = Math.floor(duration / 1000);
const milliseconds = (duration % 1000) / 1000;
// formatting
const durationFormatted = seconds + (milliseconds >= 0 ? "." : ".") + Math.abs(milliseconds).toFixed(3).slice(2);
// Printing elapsed time
customLog("Elapsed time: " + durationFormatted + " seconds<br>");
// return durationFormatted;
}
function walltimeStart() {
return Date.now();
}
function isInputFilled(obj: string | undefined, subj: string | undefined, bounds: string | undefined, vars: string | undefined) {
if (obj == "" || obj == null || obj == undefined) {
customLog("Error: Empty input field.");
return false;
}
if (subj == "" || subj == null || subj == undefined) {
customLog("Error: Empty input field.");
return false;
}
if (bounds == "" || bounds == null || bounds == undefined) {
customLog("Error: Empty input field.");
return false;
}
if (vars == "" || vars == null || vars == undefined) {
customLog("Error: Empty input field.");
return false;
}
return true;
}
export function calculate_click() {
customLogClear();
const timer = walltimeStart();
customLog("Calculating...<br>");
let objective: string | undefined;
const objectiveElement = document.getElementById('objective');
if (objectiveElement !== null) {
objective = (objectiveElement as HTMLInputElement).value;
}
let subject: string | undefined;
const subjectElement = document.getElementById('subject');
if (subjectElement !== null) {
subject = (subjectElement as HTMLInputElement).value;
}
let bounds: string | undefined;
const boundsElement = document.getElementById('bounds');
if (boundsElement !== null) {
bounds = (boundsElement as HTMLInputElement).value;
}
let variables: string | undefined;
const varsElement = document.getElementById('vars');
if (varsElement !== null) {
variables = (varsElement as HTMLInputElement).value;
}
// let funcs:string[] = functions.split(/;/);
// let vars:string[] = variables.split(/;/);
// let direction = null;
// let namesVars:string[] = [];
// let variablesMIP:VariableMIP[];
// let variablesLP:VariableLP[];
// // console.log(vars);
// for (const decider of vars) {
// // match comments
// let regexMatch:RegExpMatchArray|null = decider.match(/#.*/);
// if (regexMatch != null)
// continue;
// regexMatch = decider.match(/var/);
// if (regexMatch != null)
// namesVars.push(regexMatch[1]);
// console.log(regexMatch);
// }
// for (const decider of funcs) {
// let dir = decider.match(/(min|max) .*/);
// if (direction != null && dir != null) {
// document.getElementById('out').innerHTML = "ERROR: Multiple Functions!";
// return;
// }
// if (direction == null && dir != null) {
// direction = dir[1];
// let test = parseFunction(decider);
// console.log(test?.name);
// variablesLP.
// continue;
// }
// console.log(direction);
// document.getElementById('out').innerHTML = direction;
// console.log(parseFunction(decider));
// catch error: empty input field(s)
if (!isInputFilled(objective, subject, bounds, variables)) return;
let wholeText: string = "Maximize\n obj: " + objective
+ "\nSubject To \n" + subject
+ "\nBounds \n" + bounds
+ "\nGenerals \n" + variables
+ "\nEnd";
// customLog("<br><br>DEBUGGING<br><br>\nfunctions:<br>" + functions + "<br><br>variables:<br>" + variables + "<br><br>DEBUGGING END<br>");
customLog("Running optimization with input: \"" + wholeText + "\"<br>");
run(wholeText);
walltimeStopAndPrint(timer);
}
function run(text: string) {
customLog("Starting problem setup...");
let lp = GLPKAPI.glp_create_prob();
GLPKAPI.glp_read_lp_from_string(lp, null, text);
customLog("Problem created.<br>");
customLog("Scaling problem...");
GLPKAPI.glp_scale_prob(lp, GLPKAPI.GLP_SF_AUTO);
customLog("Scaling complete.<br>");
customLog("Starting simplex optimization...");
let smcp = new GLPKAPI.SMCP({ presolve: GLPKAPI.GLP_ON });
GLPKAPI.glp_simplex(lp, smcp);
customLog("Simplex optimization complete.<br>");
customLog("Starting integer optimization...");
let iocp = new GLPKAPI.IOCP({ presolve: GLPKAPI.GLP_ON });
GLPKAPI.glp_intopt(lp, iocp);
customLog("Integer optimization complete.<br>");
// customLog("obj: " + GLPKAPI.glp_mip_obj_val(lp));
customLog("<i>Final objective value: " + GLPKAPI.glp_mip_obj_val(lp) + "</i><br>");
customLog("Value of each variable:");
for (let i = 1; i <= GLPKAPI.glp_get_num_cols(lp) - 1; i++) { // "-1" to remove the "End-variable" from logs
customLog(GLPKAPI.glp_get_col_name(lp, i) + " = " + GLPKAPI.glp_mip_col_val(lp, i));
}
customLog("");
customLog("Dual values of constraints:");
for (let j = 1; j <= GLPKAPI.glp_get_num_rows(lp); j++) {
const dualValue = GLPKAPI.glp_get_row_dual(lp, j); // fetch dual
const constraintName = GLPKAPI.glp_get_row_name(lp, j);
customLog(constraintName + " dual = " + dualValue);
}
customLog("");
}
function downloadLPFormatting(objective: any, subject: any, bounds: any) {
customLog("Preparing file content string...<br>");
// ensure that all vars are strings
const formattedObjective = typeof objective === 'string' ? objective : '';
const formattedSubject = typeof subject === 'string' ? subject : '';
const formattedBounds = typeof bounds === 'string' ? bounds : '';
// Header mit Problemname
const header = "\\ Your problem\n";
// format objective
const objectiveFunction = `Maximize\n obj: ${formattedObjective}\n`;
// turn each subject into a single line
const constraints = `Subject To\n${formattedSubject.split("\n").filter(line => line.trim() !== "").map(line => ` ${line}`).join("\n")}\n`;
// format bounds
const boundsFormatted = `Bounds\n${formattedBounds.split("\n").filter(line => line.trim() !== "").map(line => ` ${line}`).join("\n")}\n`;
// summarizing everything into one var
const lpFormat = `${header}${objectiveFunction}${constraints}${boundsFormatted}End\n`;
return lpFormat;
}
function downloadProblemDownload(content: string) {
customLog("Preparing file...<br>")
const blob = new Blob([content], { type: 'text/plain' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'problem.txt'; // file name
link.click(); // starting download
customLog("Starting download.")
}
export function downloadLP() {
customLogClear();
customLog("Preparing download...<br>");
customLog("Fetching input...<br>")
let objective: string | undefined;
const objectiveElement = document.getElementById('objective');
if (objectiveElement !== null) {
objective = (objectiveElement as HTMLInputElement).value;
}
let subject: string | undefined;
const subjectElement = document.getElementById('subject');
if (subjectElement !== null) {
subject = (subjectElement as HTMLInputElement).value;
}
let bounds: string | undefined;
const boundsElement = document.getElementById('bounds');
if (boundsElement !== null) {
bounds = (boundsElement as HTMLInputElement).value;
}
let variables: string | undefined;
const varsElement = document.getElementById('vars');
if (varsElement !== null) {
variables = (varsElement as HTMLInputElement).value;
}
// catch error: empty input field(s)
if (!isInputFilled(objective, subject, bounds, variables)) return;
const exportString: string = downloadLPFormatting(objective, subject, bounds);
downloadProblemDownload(exportString);
}
// Irgend ein Interface
// document.getElementById('out').innerHTML = funcs;
// output.innerHTML = functions.innerHTML;
// createProblemMIP();
// LPAPI.default();
export function import_click() {
console.log("Importing...");
}
// export function export_click() {
// console.log("Exporting...");
// }
// function parseFunction(toParse: string) {
// var regex = toParse.match(/([a-zA-Z][a-zA-Z0-9]*):/);
// if (regex == null)
// return;
// var name = regex[1];
// regex = toParse.match(/(?:([0-9]*) *\* *([a-zA-Z][a-zA-Z0-9]*))/g);
// let coefs:number[] = [];
// let vars:string[] = [];
// for (const rg of regex) {
// coefs.push(+rg.match(/([0-9]+)/g));
// vars.push(rg.match(/([a-zA-Z][a-zA-Z0-9]*)/g)[0]);
// }
// return {name, coefs, vars};
// }