mirror of https://github.com/ANL-CEEESA/RELOG.git
commit
2f0228e9ca
GPG Key ID:
0DA8E4B9E1109DCA
@ -0,0 +1,4 @@
|
||||
build
|
||||
jobs
|
||||
relog-web/node_modules
|
||||
relog-web/build
|
||||
@ -0,0 +1,29 @@
|
||||
FROM julia:1.7-buster
|
||||
|
||||
ENV RELOG_TIME_LIMIT_SEC=3600
|
||||
|
||||
# Install Node.js & zip
|
||||
RUN apt-get update -yq && \
|
||||
apt-get -yq install curl gnupg ca-certificates && \
|
||||
curl -L https://deb.nodesource.com/setup_18.x | bash && \
|
||||
apt-get update -yq && \
|
||||
apt-get install -yq nodejs zip
|
||||
|
||||
# Install Julia dependencies
|
||||
ADD Project.toml /app/
|
||||
ADD src/RELOG.jl /app/src/
|
||||
RUN julia --project=/app -e 'using Pkg; Pkg.update()'
|
||||
|
||||
# Install JS dependencies
|
||||
ADD relog-web/package*.json /app/relog-web/
|
||||
RUN cd /app/relog-web && npm install
|
||||
|
||||
# Copy source code
|
||||
ADD . /app
|
||||
RUN julia --project=/app -e 'using Pkg; Pkg.precompile()'
|
||||
|
||||
# Build JS app
|
||||
RUN cd /app/relog-web && npm run build
|
||||
|
||||
WORKDIR /app
|
||||
CMD julia --project=/app -e 'import RELOG; RELOG.web("0.0.0.0")'
|
||||
@ -0,0 +1,23 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
@ -0,0 +1,70 @@
|
||||
# Getting Started with Create React App
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm start`
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||
|
||||
The page will reload when you make changes.\
|
||||
You may also see any lint errors in the console.
|
||||
|
||||
### `npm test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `npm run build`
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `npm run eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||
|
||||
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||
|
||||
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
|
||||
### Code Splitting
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||
|
||||
### Analyzing the Bundle Size
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||
|
||||
### Making a Progressive Web App
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||
|
||||
### Advanced Configuration
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||
|
||||
### Deployment
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||
|
||||
### `npm run build` fails to minify
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,52 @@
|
||||
{
|
||||
"name": "relog-web",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"homepage": "/",
|
||||
"jest": {
|
||||
"moduleNameMapper": {
|
||||
"d3": "<rootDir>/node_modules/d3/dist/d3.min.js"
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^5.16.2",
|
||||
"@testing-library/react": "^12.1.4",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"ajv": "^8.11.0",
|
||||
"d3": "^5.16.0",
|
||||
"d3-array": "^2.12.1",
|
||||
"dagre": "^0.8.5",
|
||||
"idb": "^6.1.5",
|
||||
"leaflet": "^1.8.0",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-flow-renderer": "^9.7.4",
|
||||
"react-router-dom": "^5.3.3",
|
||||
"react-scripts": "5.0.0",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>RELOG</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,417 @@
|
||||
import { openDB } from "idb";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import Button from "../common/Button";
|
||||
import Footer from "../common/Footer";
|
||||
import Header from "../common/Header";
|
||||
import "../index.css";
|
||||
import { generateFile } from "./csv";
|
||||
import { defaultData, defaultPlant, defaultProduct } from "./defaults";
|
||||
import { exportData, importData } from "./export";
|
||||
import ParametersBlock from "./ParametersBlock";
|
||||
import PipelineBlock, { randomPosition } from "./PipelineBlock";
|
||||
import PlantBlock from "./PlantBlock";
|
||||
import ProductBlock from "./ProductBlock";
|
||||
import { validate } from "./validate";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import { SERVER_URL } from "..";
|
||||
|
||||
const setDefaults = (actualDict, defaultDict) => {
|
||||
for (const [key, defaultValue] of Object.entries(defaultDict)) {
|
||||
if (!(key in actualDict)) {
|
||||
if (typeof defaultValue === "object") {
|
||||
actualDict[key] = { ...defaultValue };
|
||||
} else {
|
||||
actualDict[key] = defaultValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cleanDict = (dict, defaultDict) => {
|
||||
for (const key of Object.keys(dict)) {
|
||||
if (!(key in defaultDict)) {
|
||||
delete dict[key];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const fixLists = (dict, blacklist, stringify) => {
|
||||
for (const [key, val] of Object.entries(dict)) {
|
||||
if (blacklist.includes(key)) continue;
|
||||
if (Array.isArray(val)) {
|
||||
// Replace constant lists by a single number
|
||||
let isConstant = true;
|
||||
for (let i = 1; i < val.length; i++) {
|
||||
if (val[i - 1] !== val[i]) {
|
||||
isConstant = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (isConstant) dict[key] = val[0];
|
||||
|
||||
// Convert lists to JSON strings
|
||||
if (stringify) dict[key] = JSON.stringify(dict[key]);
|
||||
}
|
||||
if (typeof val === "object") {
|
||||
fixLists(val, blacklist, stringify);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const openRelogDB = async () => {
|
||||
const dbPromise = await openDB("RELOG", 1, {
|
||||
upgrade(db) {
|
||||
db.createObjectStore("casebuilder");
|
||||
},
|
||||
});
|
||||
return dbPromise;
|
||||
};
|
||||
|
||||
const InputPage = () => {
|
||||
const fileElem = useRef();
|
||||
let [data, setData] = useState(defaultData);
|
||||
let [messages, setMessages] = useState([]);
|
||||
let [processing, setProcessing] = useState(false);
|
||||
|
||||
const save = async (data) => {
|
||||
const db = await openRelogDB();
|
||||
await db.put("casebuilder", data, "data");
|
||||
};
|
||||
|
||||
useEffect(async () => {
|
||||
const db = await openRelogDB();
|
||||
const data = await db.get("casebuilder", "data");
|
||||
if (data) setData(data);
|
||||
}, []);
|
||||
|
||||
const history = useHistory();
|
||||
|
||||
const promptName = (prevData) => {
|
||||
const name = prompt("Name");
|
||||
if (!name || name.length === 0) return;
|
||||
if (name in prevData.products || name in prevData.plants) return;
|
||||
return name;
|
||||
};
|
||||
|
||||
const onAddPlant = () => {
|
||||
setData((prevData) => {
|
||||
const name = promptName(prevData);
|
||||
if (name === undefined) return prevData;
|
||||
const newData = { ...prevData };
|
||||
const [x, y] = randomPosition();
|
||||
newData.plants[name] = {
|
||||
...defaultPlant,
|
||||
x: x,
|
||||
y: y,
|
||||
};
|
||||
save(newData);
|
||||
return newData;
|
||||
});
|
||||
};
|
||||
|
||||
const onAddProduct = () => {
|
||||
setData((prevData) => {
|
||||
const name = promptName(prevData);
|
||||
if (name === undefined) return prevData;
|
||||
const newData = { ...prevData };
|
||||
const [x, y] = randomPosition();
|
||||
console.log(x, y);
|
||||
newData.products[name] = {
|
||||
...defaultProduct,
|
||||
x: x,
|
||||
y: y,
|
||||
};
|
||||
save(newData);
|
||||
return newData;
|
||||
});
|
||||
};
|
||||
|
||||
const onRenamePlant = (prevName, newName) => {
|
||||
setData((prevData) => {
|
||||
const newData = { ...prevData };
|
||||
newData.plants[newName] = newData.plants[prevName];
|
||||
delete newData.plants[prevName];
|
||||
save(newData);
|
||||
return newData;
|
||||
});
|
||||
};
|
||||
|
||||
const onRenameProduct = (prevName, newName) => {
|
||||
setData((prevData) => {
|
||||
const newData = { ...prevData };
|
||||
newData.products[newName] = newData.products[prevName];
|
||||
delete newData.products[prevName];
|
||||
for (const [, plant] of Object.entries(newData.plants)) {
|
||||
if (plant.input === prevName) {
|
||||
plant.input = newName;
|
||||
}
|
||||
let outputFound = false;
|
||||
for (const [outputName] of Object.entries(
|
||||
plant["outputs (tonne/tonne)"]
|
||||
)) {
|
||||
if (outputName === prevName) outputFound = true;
|
||||
}
|
||||
if (outputFound) {
|
||||
plant["outputs (tonne/tonne)"][newName] =
|
||||
plant["outputs (tonne/tonne)"][prevName];
|
||||
delete plant["outputs (tonne/tonne)"][prevName];
|
||||
}
|
||||
}
|
||||
save(newData);
|
||||
return newData;
|
||||
});
|
||||
};
|
||||
|
||||
const onMovePlant = (plantName, x, y) => {
|
||||
setData((prevData) => {
|
||||
const newData = { ...prevData };
|
||||
newData.plants[plantName].x = x;
|
||||
newData.plants[plantName].y = y;
|
||||
save(newData);
|
||||
return newData;
|
||||
});
|
||||
};
|
||||
|
||||
const onMoveProduct = (productName, x, y) => {
|
||||
setData((prevData) => {
|
||||
const newData = { ...prevData };
|
||||
newData.products[productName].x = x;
|
||||
newData.products[productName].y = y;
|
||||
save(newData);
|
||||
return newData;
|
||||
});
|
||||
};
|
||||
|
||||
const onRemovePlant = (plantName) => {
|
||||
setData((prevData) => {
|
||||
const newData = { ...prevData };
|
||||
delete newData.plants[plantName];
|
||||
save(newData);
|
||||
return newData;
|
||||
});
|
||||
};
|
||||
|
||||
const onRemoveProduct = (productName) => {
|
||||
setData((prevData) => {
|
||||
const newData = { ...prevData };
|
||||
delete newData.products[productName];
|
||||
for (const [, plant] of Object.entries(newData.plants)) {
|
||||
if (plant.input === productName) {
|
||||
delete plant.input;
|
||||
}
|
||||
let outputFound = false;
|
||||
for (const [outputName] of Object.entries(
|
||||
plant["outputs (tonne/tonne)"]
|
||||
)) {
|
||||
if (outputName === productName) outputFound = true;
|
||||
}
|
||||
if (outputFound) {
|
||||
delete plant["outputs (tonne/tonne)"][productName];
|
||||
}
|
||||
}
|
||||
save(newData);
|
||||
return newData;
|
||||
});
|
||||
};
|
||||
|
||||
const onSetPlantInput = (plantName, productName) => {
|
||||
setData((prevData) => {
|
||||
const newData = { ...prevData };
|
||||
newData.plants[plantName].input = productName;
|
||||
save(newData);
|
||||
return newData;
|
||||
});
|
||||
};
|
||||
|
||||
const onAddPlantOutput = (plantName, productName) => {
|
||||
setData((prevData) => {
|
||||
if (productName in prevData.plants[plantName]["outputs (tonne/tonne)"]) {
|
||||
return prevData;
|
||||
}
|
||||
const newData = { ...prevData };
|
||||
[
|
||||
"outputs (tonne/tonne)",
|
||||
"disposal cost ($/tonne)",
|
||||
"disposal limit (tonne)",
|
||||
].forEach((key) => {
|
||||
newData.plants[plantName][key] = { ...newData.plants[plantName][key] };
|
||||
newData.plants[plantName][key][productName] = 0;
|
||||
});
|
||||
save(newData);
|
||||
return newData;
|
||||
});
|
||||
};
|
||||
|
||||
const onSave = () => {
|
||||
const exported = exportData(data);
|
||||
const valid = validate(exported);
|
||||
console.log(exported);
|
||||
console.log(validate.errors);
|
||||
if (valid) {
|
||||
generateFile("case.json", JSON.stringify(exported, null, 2));
|
||||
} else {
|
||||
setMessages([
|
||||
...messages,
|
||||
"Data has validation errors and could not be saved.",
|
||||
]);
|
||||
}
|
||||
};
|
||||
|
||||
const onClear = () => {
|
||||
const newData = JSON.parse(JSON.stringify(defaultData));
|
||||
setData(newData);
|
||||
save(newData);
|
||||
};
|
||||
|
||||
const onLoad = (contents) => {
|
||||
const parsed = JSON.parse(contents);
|
||||
const valid = validate(parsed);
|
||||
if (valid) {
|
||||
const newData = importData(parsed);
|
||||
setData(newData);
|
||||
save(newData);
|
||||
} else {
|
||||
console.log(validate.errors);
|
||||
setMessages([...messages, "File is corrupted and could not be loaded."]);
|
||||
}
|
||||
};
|
||||
|
||||
const onDismissMessage = (idx) => {
|
||||
setMessages([...messages.slice(0, idx), ...messages.slice(idx + 1)]);
|
||||
};
|
||||
|
||||
const onChange = (val, field1, field2) => {
|
||||
setData((prevData) => {
|
||||
const newData = { ...prevData };
|
||||
if (field2 !== undefined) {
|
||||
newData[field1][field2] = val;
|
||||
} else {
|
||||
newData[field1] = val;
|
||||
}
|
||||
save(newData);
|
||||
return newData;
|
||||
});
|
||||
};
|
||||
let productComps = [];
|
||||
for (const [prodName, prod] of Object.entries(data.products)) {
|
||||
productComps.push(
|
||||
<ProductBlock
|
||||
key={prodName}
|
||||
name={prodName}
|
||||
value={prod}
|
||||
onChange={(v) => onChange(v, "products", prodName, v)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const onSubmit = async () => {
|
||||
const exported = exportData(data);
|
||||
const valid = validate(exported);
|
||||
if (valid) {
|
||||
setProcessing(true);
|
||||
try {
|
||||
const response = await fetch(`${SERVER_URL}/submit`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify(exported),
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
history.push(`solver/${data.job_id}`);
|
||||
} else {
|
||||
throw "Error";
|
||||
}
|
||||
} catch {
|
||||
setMessages([
|
||||
...messages,
|
||||
"Failed to submit job. Please try again later.",
|
||||
]);
|
||||
} finally {
|
||||
setProcessing(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let plantComps = [];
|
||||
for (const [plantName, plant] of Object.entries(data.plants)) {
|
||||
plantComps.push(
|
||||
<PlantBlock
|
||||
key={plantName}
|
||||
name={plantName}
|
||||
value={plant}
|
||||
onChange={(v) => onChange(v, "plants", plantName)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
let messageComps = [];
|
||||
for (let i = 0; i < messages.length; i++) {
|
||||
messageComps.push(
|
||||
<div className="message error" key={i}>
|
||||
<p>{messages[i]}</p>
|
||||
<Button label="Dismiss" onClick={() => onDismissMessage(i)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const onFileSelected = () => {
|
||||
const file = fileElem.current.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.addEventListener("load", () => {
|
||||
onLoad(reader.result);
|
||||
});
|
||||
reader.readAsText(file);
|
||||
}
|
||||
fileElem.current.value = "";
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header title="Case Builder">
|
||||
<Button label="Clear" disabled={processing} onClick={onClear} />
|
||||
<Button
|
||||
label="Load"
|
||||
disabled={processing}
|
||||
onClick={(e) => fileElem.current.click()}
|
||||
/>
|
||||
<Button label="Save" disabled={processing} onClick={onSave} />
|
||||
<Button label="Submit" disabled={processing} onClick={onSubmit} />
|
||||
<input
|
||||
type="file"
|
||||
ref={fileElem}
|
||||
accept=".json"
|
||||
style={{ display: "none" }}
|
||||
onChange={onFileSelected}
|
||||
/>
|
||||
</Header>
|
||||
<div id="contentBackground">
|
||||
<div id="content">
|
||||
<PipelineBlock
|
||||
onAddPlant={onAddPlant}
|
||||
onAddPlantOutput={onAddPlantOutput}
|
||||
onAddProduct={onAddProduct}
|
||||
onMovePlant={onMovePlant}
|
||||
onMoveProduct={onMoveProduct}
|
||||
onRenamePlant={onRenamePlant}
|
||||
onRenameProduct={onRenameProduct}
|
||||
onSetPlantInput={onSetPlantInput}
|
||||
onRemovePlant={onRemovePlant}
|
||||
onRemoveProduct={onRemoveProduct}
|
||||
plants={data.plants}
|
||||
products={data.products}
|
||||
/>
|
||||
<ParametersBlock
|
||||
value={data.parameters}
|
||||
onChange={(v) => onChange(v, "parameters")}
|
||||
/>
|
||||
{productComps}
|
||||
{plantComps}
|
||||
</div>
|
||||
</div>
|
||||
<div id="messageTray">{messageComps}</div>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default InputPage;
|
||||
@ -0,0 +1,46 @@
|
||||
import Section from "../common/Section";
|
||||
import Card from "../common/Card";
|
||||
import Form from "../common/Form";
|
||||
import TextInputRow from "../common/TextInputRow";
|
||||
|
||||
const ParametersBlock = (props) => {
|
||||
const onChangeField = (field, val) => {
|
||||
props.value[field] = val;
|
||||
props.onChange(props.value);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Section title="Parameters" />
|
||||
<Card>
|
||||
<Form>
|
||||
<TextInputRow
|
||||
label="Time horizon"
|
||||
unit="years"
|
||||
tooltip="Number of years in the simulation."
|
||||
value={props.value["time horizon (years)"]}
|
||||
onChange={(v) => onChangeField("time horizon (years)", v)}
|
||||
validate="int"
|
||||
/>
|
||||
<TextInputRow
|
||||
label="Building period"
|
||||
unit="years"
|
||||
tooltip="List of years in which we are allowed to open new plants. For example, if this parameter is set to [1,2,3], we can only open plants during the first three years. By default, this equals [1]; that is, plants can only be opened during the first year."
|
||||
value={props.value["building period (years)"]}
|
||||
onChange={(v) => onChangeField("building period (years)", v)}
|
||||
validate="intList"
|
||||
/>
|
||||
<TextInputRow
|
||||
label="Inflation rate"
|
||||
unit="%"
|
||||
tooltip="Rate at which costs change from one time period to the next. This is applied uniformly to all costs."
|
||||
value={props.value["inflation rate (%)"]}
|
||||
onChange={(v) => onChangeField("inflation rate (%)", v)}
|
||||
validate="float"
|
||||
/>
|
||||
</Form>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ParametersBlock;
|
||||
@ -0,0 +1,200 @@
|
||||
import React, { useEffect } from "react";
|
||||
import ReactFlow, { Background, isNode, Controls } from "react-flow-renderer";
|
||||
import Section from "../common/Section";
|
||||
import Card from "../common/Card";
|
||||
import Button from "../common/Button";
|
||||
import styles from "./PipelineBlock.module.css";
|
||||
import dagre from "dagre";
|
||||
|
||||
window.nextX = 15;
|
||||
window.nextY = 15;
|
||||
|
||||
export const randomPosition = () => {
|
||||
window.nextY += 60;
|
||||
if (window.nextY >= 500) {
|
||||
window.nextY = 15;
|
||||
window.nextX += 150;
|
||||
}
|
||||
return [window.nextX, window.nextY];
|
||||
};
|
||||
|
||||
const getLayoutedElements = (elements) => {
|
||||
const nodeWidth = 125;
|
||||
const nodeHeight = 45;
|
||||
const dagreGraph = new dagre.graphlib.Graph();
|
||||
dagreGraph.setDefaultEdgeLabel(() => ({}));
|
||||
dagreGraph.setGraph({ rankdir: "LR" });
|
||||
elements.forEach((el) => {
|
||||
if (isNode(el)) {
|
||||
dagreGraph.setNode(el.id, { width: nodeWidth, height: nodeHeight });
|
||||
} else {
|
||||
dagreGraph.setEdge(el.source, el.target);
|
||||
}
|
||||
});
|
||||
dagre.layout(dagreGraph);
|
||||
return elements.map((el) => {
|
||||
if (isNode(el)) {
|
||||
const n = dagreGraph.node(el.id);
|
||||
el.position = {
|
||||
x: 15 + n.x - nodeWidth / 2,
|
||||
y: 15 + n.y - nodeHeight / 2,
|
||||
};
|
||||
}
|
||||
return el;
|
||||
});
|
||||
};
|
||||
|
||||
const PipelineBlock = (props) => {
|
||||
let elements = [];
|
||||
let mapNameToType = {};
|
||||
let hasNullPositions = false;
|
||||
|
||||
for (const [productName, product] of Object.entries(props.products)) {
|
||||
if (!product.x || !product.y) hasNullPositions = true;
|
||||
mapNameToType[productName] = "product";
|
||||
elements.push({
|
||||
id: productName,
|
||||
data: { label: productName, type: "product" },
|
||||
position: { x: product.x, y: product.y },
|
||||
sourcePosition: "right",
|
||||
targetPosition: "left",
|
||||
className: styles.ProductNode,
|
||||
});
|
||||
}
|
||||
|
||||
for (const [plantName, plant] of Object.entries(props.plants)) {
|
||||
if (!plant.x || !plant.y) hasNullPositions = true;
|
||||
mapNameToType[plantName] = "plant";
|
||||
elements.push({
|
||||
id: plantName,
|
||||
data: { label: plantName, type: "plant" },
|
||||
position: { x: plant.x, y: plant.y },
|
||||
sourcePosition: "right",
|
||||
targetPosition: "left",
|
||||
className: styles.PlantNode,
|
||||
});
|
||||
|
||||
if (plant.input !== undefined) {
|
||||
elements.push({
|
||||
id: `${plant.input}-${plantName}`,
|
||||
source: plant.input,
|
||||
target: plantName,
|
||||
animated: true,
|
||||
style: { stroke: "black" },
|
||||
selectable: false,
|
||||
});
|
||||
}
|
||||
|
||||
for (const [productName] of Object.entries(
|
||||
plant["outputs (tonne/tonne)"]
|
||||
)) {
|
||||
elements.push({
|
||||
id: `${plantName}-${productName}`,
|
||||
source: plantName,
|
||||
target: productName,
|
||||
animated: true,
|
||||
style: { stroke: "black" },
|
||||
selectable: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const onNodeDoubleClick = (ev, node) => {
|
||||
const oldName = node.data.label;
|
||||
const newName = window.prompt("Enter new name", oldName);
|
||||
if (newName === undefined || newName.length === 0) return;
|
||||
if (newName in mapNameToType) return;
|
||||
if (node.data.type === "plant") {
|
||||
props.onRenamePlant(oldName, newName);
|
||||
} else {
|
||||
props.onRenameProduct(oldName, newName);
|
||||
}
|
||||
};
|
||||
|
||||
const onElementsRemove = (elements) => {
|
||||
elements.forEach((el) => {
|
||||
if (!(el.id in mapNameToType)) return;
|
||||
if (el.data.type === "plant") {
|
||||
props.onRemovePlant(el.data.label);
|
||||
} else {
|
||||
props.onRemoveProduct(el.data.label);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const onNodeDragStop = (ev, node) => {
|
||||
if (node.data.type === "plant") {
|
||||
props.onMovePlant(node.data.label, node.position.x, node.position.y);
|
||||
} else {
|
||||
props.onMoveProduct(node.data.label, node.position.x, node.position.y);
|
||||
}
|
||||
};
|
||||
|
||||
const onConnect = (args) => {
|
||||
const sourceType = mapNameToType[args.source];
|
||||
const targetType = mapNameToType[args.target];
|
||||
if (sourceType === "product" && targetType === "plant") {
|
||||
props.onSetPlantInput(args.target, args.source);
|
||||
} else if (sourceType === "plant" && targetType === "product") {
|
||||
props.onAddPlantOutput(args.source, args.target);
|
||||
}
|
||||
};
|
||||
|
||||
const onLayout = () => {
|
||||
const layoutedElements = getLayoutedElements(elements);
|
||||
layoutedElements.forEach((el) => {
|
||||
if (isNode(el)) {
|
||||
if (el.data.type === "plant") {
|
||||
props.onMovePlant(el.data.label, el.position.x, el.position.y);
|
||||
} else {
|
||||
props.onMoveProduct(el.data.label, el.position.x, el.position.y);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (hasNullPositions) onLayout();
|
||||
}, [hasNullPositions]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Section title="Pipeline" />
|
||||
<Card>
|
||||
<div className={styles.PipelineBlock}>
|
||||
<ReactFlow
|
||||
elements={elements}
|
||||
onNodeDoubleClick={onNodeDoubleClick}
|
||||
onNodeDragStop={onNodeDragStop}
|
||||
onConnect={onConnect}
|
||||
onElementsRemove={onElementsRemove}
|
||||
deleteKeyCode={46}
|
||||
maxZoom={1.25}
|
||||
minZoom={0.5}
|
||||
snapToGrid={true}
|
||||
preventScrolling={false}
|
||||
>
|
||||
<Background />
|
||||
<Controls showInteractive={false} />
|
||||
</ReactFlow>
|
||||
</div>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<Button
|
||||
label="Add product"
|
||||
kind="inline"
|
||||
onClick={props.onAddProduct}
|
||||
/>
|
||||
<Button label="Add plant" kind="inline" onClick={props.onAddPlant} />
|
||||
<Button label="Auto Layout" kind="inline" onClick={onLayout} />
|
||||
<Button
|
||||
label="?"
|
||||
kind="inline"
|
||||
tooltip="Drag from one connector to another to create links between products and plants. Double click to rename an element. Click an element to select and move it. Press the [Delete] key to remove it."
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PipelineBlock;
|
||||
@ -0,0 +1,25 @@
|
||||
.PipelineBlock {
|
||||
height: 800px !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1) !important;
|
||||
border-radius: var(--border-radius) !important;
|
||||
margin-bottom: 12px !important;
|
||||
}
|
||||
|
||||
.PlantNode,
|
||||
.ProductNode {
|
||||
border-color: rgba(0, 0, 0, 0.8) !important;
|
||||
color: black !important;
|
||||
font-size: 13px !important;
|
||||
border-width: 1px !important;
|
||||
border-radius: 6px !important;
|
||||
box-shadow: 0px 2px 4px -3px black !important;
|
||||
width: 100px !important;
|
||||
}
|
||||
|
||||
.PlantNode {
|
||||
background-color: #8d8 !important;
|
||||
}
|
||||
|
||||
.ProductNode {
|
||||
background-color: #e6e6e6 !important;
|
||||
}
|
||||
@ -0,0 +1,271 @@
|
||||
import Section from "../common/Section";
|
||||
import Card from "../common/Card";
|
||||
import Form from "../common/Form";
|
||||
import TextInputRow from "../common/TextInputRow";
|
||||
import FileInputRow from "../common/FileInputRow";
|
||||
import DictInputRow from "../common/DictInputRow";
|
||||
import { csvFormat, csvParse, generateFile } from "./csv";
|
||||
|
||||
const PlantBlock = (props) => {
|
||||
const onChange = (val, field1, field2, field3) => {
|
||||
const newPlant = { ...props.value };
|
||||
if (field3 !== undefined) {
|
||||
newPlant[field1][field2][field3] = val;
|
||||
} else if (field2 !== undefined) {
|
||||
newPlant[field1][field2] = val;
|
||||
} else {
|
||||
newPlant[field1] = val;
|
||||
}
|
||||
props.onChange(newPlant);
|
||||
};
|
||||
|
||||
const onCandidateLocationsTemplate = () => {
|
||||
generateFile(
|
||||
"Candidate locations - Template.csv",
|
||||
csvFormat([
|
||||
{
|
||||
name: "Washakie County",
|
||||
"latitude (deg)": "43.8356",
|
||||
"longitude (deg)": "-107.6602",
|
||||
"area cost factor": "0.88",
|
||||
},
|
||||
{
|
||||
name: "Platte County",
|
||||
"latitude (deg)": "42.1314",
|
||||
"longitude (deg)": "-104.9676",
|
||||
"area cost factor": "1.29",
|
||||
},
|
||||
{
|
||||
name: "Park County",
|
||||
"latitude (deg)": "44.4063",
|
||||
"longitude (deg)": "-109.4153",
|
||||
"area cost factor": "0.99",
|
||||
},
|
||||
{
|
||||
name: "Goshen County",
|
||||
"latitude (deg)": "42.0853",
|
||||
"longitude (deg)": "-104.3534",
|
||||
"area cost factor": "1",
|
||||
},
|
||||
])
|
||||
);
|
||||
};
|
||||
|
||||
const onCandidateLocationsFile = (contents) => {
|
||||
const data = csvParse({
|
||||
contents: contents,
|
||||
requiredCols: [
|
||||
"name",
|
||||
"latitude (deg)",
|
||||
"longitude (deg)",
|
||||
"area cost factor",
|
||||
],
|
||||
});
|
||||
const result = {};
|
||||
data.forEach((el) => {
|
||||
result[el["name"]] = {
|
||||
"latitude (deg)": el["latitude (deg)"],
|
||||
"longitude (deg)": el["longitude (deg)"],
|
||||
"area cost factor": el["area cost factor"],
|
||||
};
|
||||
});
|
||||
onChange(result, "locations");
|
||||
};
|
||||
|
||||
const onCandidateLocationsDownload = () => {
|
||||
const result = [];
|
||||
for (const [locationName, locationDict] of Object.entries(
|
||||
props.value["locations"]
|
||||
)) {
|
||||
result.push({
|
||||
name: locationName,
|
||||
"latitude (deg)": locationDict["latitude (deg)"],
|
||||
"longitude (deg)": locationDict["longitude (deg)"],
|
||||
"area cost factor": locationDict["area cost factor"],
|
||||
});
|
||||
}
|
||||
generateFile(`Candidate locations - ${props.name}.csv`, csvFormat(result));
|
||||
};
|
||||
|
||||
const onCandidateLocationsClear = () => {
|
||||
onChange({}, "locations");
|
||||
};
|
||||
|
||||
let description = "No locations set";
|
||||
const nCenters = Object.keys(props.value["locations"]).length;
|
||||
if (nCenters > 0) description = `${nCenters} locations`;
|
||||
|
||||
const shouldDisableMaxCap =
|
||||
props.value["minimum capacity (tonne)"] ===
|
||||
props.value["maximum capacity (tonne)"];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Section title={props.name} />
|
||||
<Card>
|
||||
<Form>
|
||||
<h1>General information</h1>
|
||||
<FileInputRow
|
||||
label="Candidate locations"
|
||||
tooltip="A table describing potential locations where plants can be built and their characteristics."
|
||||
onTemplate={onCandidateLocationsTemplate}
|
||||
onFile={onCandidateLocationsFile}
|
||||
onDownload={onCandidateLocationsDownload}
|
||||
onClear={onCandidateLocationsClear}
|
||||
value={description}
|
||||
/>
|
||||
|
||||
<h1>Inputs & Outputs</h1>
|
||||
<TextInputRow
|
||||
label="Input"
|
||||
tooltip="The name of the product that this plant takes as input."
|
||||
disabled="disabled"
|
||||
value={props.value["input"]}
|
||||
/>
|
||||
<DictInputRow
|
||||
label="Outputs"
|
||||
unit="tonne/tonne"
|
||||
tooltip="A dictionary specifying how many tonnes of each product is produced for each tonne of input."
|
||||
value={props.value["outputs (tonne/tonne)"]}
|
||||
onChange={(v) => onChange(v, "outputs (tonne/tonne)")}
|
||||
disableKeys={true}
|
||||
validate="float"
|
||||
/>
|
||||
|
||||
<h1>Capacity & Costs</h1>
|
||||
<TextInputRow
|
||||
label="Minimum capacity"
|
||||
unit="tonne"
|
||||
tooltip="The minimum size of the plant."
|
||||
value={props.value["minimum capacity (tonne)"]}
|
||||
onChange={(v) => onChange(v, "minimum capacity (tonne)")}
|
||||
validate="float"
|
||||
/>
|
||||
<TextInputRow
|
||||
label="Opening cost (min capacity)"
|
||||
unit="$"
|
||||
tooltip="The cost to open the plant at minimum capacity."
|
||||
value={props.value["opening cost (min capacity) ($)"]}
|
||||
onChange={(v) => onChange(v, "opening cost (min capacity) ($)")}
|
||||
validate="float"
|
||||
/>
|
||||
<TextInputRow
|
||||
label="Fixed operating cost (min capacity)"
|
||||
unit="$"
|
||||
tooltip="The cost to keep the plant open, even if the plant doesn't process anything."
|
||||
value={props.value["fixed operating cost (min capacity) ($)"]}
|
||||
onChange={(v) =>
|
||||
onChange(v, "fixed operating cost (min capacity) ($)")
|
||||
}
|
||||
validate="float"
|
||||
/>
|
||||
<TextInputRow
|
||||
label="Maximum capacity"
|
||||
unit="tonne"
|
||||
tooltip="The maximum size of the plant."
|
||||
value={props.value["maximum capacity (tonne)"]}
|
||||
onChange={(v) => onChange(v, "maximum capacity (tonne)")}
|
||||
validate="float"
|
||||
/>
|
||||
<TextInputRow
|
||||
label="Opening cost (max capacity)"
|
||||
unit="$"
|
||||
tooltip="The cost to open a plant of this size."
|
||||
value={
|
||||
shouldDisableMaxCap
|
||||
? ""
|
||||
: props.value["opening cost (max capacity) ($)"]
|
||||
}
|
||||
onChange={(v) => onChange(v, "opening cost (max capacity) ($)")}
|
||||
validate="float"
|
||||
disabled={shouldDisableMaxCap}
|
||||
/>
|
||||
<TextInputRow
|
||||
label="Fixed operating cost (max capacity)"
|
||||
unit="$"
|
||||
tooltip="The cost to keep the plant open, even if the plant doesn't process anything."
|
||||
value={
|
||||
shouldDisableMaxCap
|
||||
? ""
|
||||
: props.value["fixed operating cost (max capacity) ($)"]
|
||||
}
|
||||
onChange={(v) =>
|
||||
onChange(v, "fixed operating cost (max capacity) ($)")
|
||||
}
|
||||
validate="float"
|
||||
disabled={shouldDisableMaxCap}
|
||||
/>
|
||||
<TextInputRow
|
||||
label="Variable operating cost"
|
||||
unit="$/tonne"
|
||||
tooltip="The cost that the plant incurs to process each tonne of input."
|
||||
value={props.value["variable operating cost ($/tonne)"]}
|
||||
onChange={(v) => onChange(v, "variable operating cost ($/tonne)")}
|
||||
validate="float"
|
||||
/>
|
||||
<TextInputRow
|
||||
label="Energy expenditure"
|
||||
unit="GJ/tonne"
|
||||
tooltip="The energy required to process one tonne of the input."
|
||||
value={props.value["energy (GJ/tonne)"]}
|
||||
onChange={(v) => onChange(v, "energy (GJ/tonne)")}
|
||||
validate="float"
|
||||
/>
|
||||
|
||||
<h1>Storage</h1>
|
||||
<TextInputRow
|
||||
label="Storage cost"
|
||||
unit="$/tonne"
|
||||
tooltip="The cost to store a tonne of input product for one time period."
|
||||
value={props.value["storage"]["cost ($/tonne)"]}
|
||||
onChange={(v) => onChange(v, "storage", "cost ($/tonne)")}
|
||||
validate="float"
|
||||
/>
|
||||
<TextInputRow
|
||||
label="Storage limit"
|
||||
unit="tonne"
|
||||
tooltip="The maximum amount of input product this plant can have in storage at any given time."
|
||||
value={props.value["storage"]["limit (tonne)"]}
|
||||
onChange={(v) => onChange(v, "storage", "limit (tonne)")}
|
||||
validate="float"
|
||||
/>
|
||||
|
||||
<h1>Disposal</h1>
|
||||
<DictInputRow
|
||||
label="Disposal cost"
|
||||
unit="$/tonne"
|
||||
tooltip="The cost to dispose of the product."
|
||||
value={props.value["disposal cost ($/tonne)"]}
|
||||
onChange={(v) => onChange(v, "disposal cost ($/tonne)")}
|
||||
disableKeys={true}
|
||||
validate="float"
|
||||
/>
|
||||
<DictInputRow
|
||||
label="Disposal limit"
|
||||
unit="tonne"
|
||||
tooltip="The maximum amount that can be disposed of. If an unlimited amount can be disposed, leave blank."
|
||||
value={props.value["disposal limit (tonne)"]}
|
||||
onChange={(v) => onChange(v, "disposal limit (tonne)")}
|
||||
disableKeys={true}
|
||||
valuePlaceholder="Unlimited"
|
||||
validate="float"
|
||||
/>
|
||||
|
||||
<h1>Emissions</h1>
|
||||
<DictInputRow
|
||||
label="Emissions"
|
||||
unit="tonne/tonne"
|
||||
tooltip="A dictionary mapping the name of each greenhouse gas, produced to process each tonne of input, to the amount of gas produced (in tonne)."
|
||||
value={props.value["emissions (tonne/tonne)"]}
|
||||
onChange={(v) => onChange(v, "emissions (tonne/tonne)")}
|
||||
keyPlaceholder="Emission name"
|
||||
valuePlaceholder="0"
|
||||
validate="float"
|
||||
/>
|
||||
</Form>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PlantBlock;
|
||||
@ -0,0 +1,187 @@
|
||||
import Section from "../common/Section";
|
||||
import Card from "../common/Card";
|
||||
import Form from "../common/Form";
|
||||
import TextInputRow from "../common/TextInputRow";
|
||||
import FileInputRow from "../common/FileInputRow";
|
||||
import DictInputRow from "../common/DictInputRow";
|
||||
import { csvParse, extractNumericColumns, generateFile } from "./csv";
|
||||
import { csvFormat } from "d3";
|
||||
|
||||
const ProductBlock = (props) => {
|
||||
const onChange = (field, val) => {
|
||||
const newProduct = { ...props.value };
|
||||
newProduct[field] = val;
|
||||
props.onChange(newProduct);
|
||||
};
|
||||
|
||||
const onInitialAmountsFile = (contents) => {
|
||||
const data = csvParse({
|
||||
contents: contents,
|
||||
requiredCols: ["latitude (deg)", "longitude (deg)", "name"],
|
||||
});
|
||||
const result = {};
|
||||
data.forEach((el) => {
|
||||
result[el["name"]] = {
|
||||
"latitude (deg)": el["latitude (deg)"],
|
||||
"longitude (deg)": el["longitude (deg)"],
|
||||
"amount (tonne)": extractNumericColumns(el, "amount"),
|
||||
};
|
||||
});
|
||||
onChange("initial amounts", result);
|
||||
};
|
||||
|
||||
const onInitialAmountsClear = () => {
|
||||
onChange("initial amounts", {});
|
||||
};
|
||||
|
||||
const onInitialAmountsTemplate = () => {
|
||||
generateFile(
|
||||
"Initial amounts - Template.csv",
|
||||
csvFormat([
|
||||
{
|
||||
name: "Washakie County",
|
||||
"latitude (deg)": "43.8356",
|
||||
"longitude (deg)": "-107.6602",
|
||||
"amount 1": "21902",
|
||||
"amount 2": "6160",
|
||||
"amount 3": "2721",
|
||||
"amount 4": "12917",
|
||||
"amount 5": "18048",
|
||||
},
|
||||
{
|
||||
name: "Platte County",
|
||||
"latitude (deg)": "42.1314",
|
||||
"longitude (deg)": "-104.9676",
|
||||
"amount 1": "16723",
|
||||
"amount 2": "8709",
|
||||
"amount 3": "22584",
|
||||
"amount 4": "12278",
|
||||
"amount 5": "7196",
|
||||
},
|
||||
{
|
||||
name: "Park County",
|
||||
"latitude (deg)": "44.4063",
|
||||
"longitude (deg)": "-109.4153",
|
||||
"amount 1": "14731",
|
||||
"amount 2": "11729",
|
||||
"amount 3": "15562",
|
||||
"amount 4": "7703",
|
||||
"amount 5": "23349",
|
||||
},
|
||||
])
|
||||
);
|
||||
};
|
||||
|
||||
const onInitialAmountsDownload = () => {
|
||||
const results = [];
|
||||
for (const [locationName, locationDict] of Object.entries(
|
||||
props.value["initial amounts"]
|
||||
)) {
|
||||
const row = {
|
||||
name: locationName,
|
||||
"latitude (deg)": locationDict["latitude (deg)"],
|
||||
"longitude (deg)": locationDict["longitude (deg)"],
|
||||
};
|
||||
locationDict["amount (tonne)"].forEach((el, idx) => {
|
||||
row[`amount ${idx + 1}`] = el;
|
||||
});
|
||||
results.push(row);
|
||||
}
|
||||
generateFile(`Initial amounts - ${props.name}.csv`, csvFormat(results));
|
||||
};
|
||||
|
||||
let description = "Not initially available";
|
||||
let notInitiallyAvailable = true;
|
||||
const nCenters = Object.keys(props.value["initial amounts"]).length;
|
||||
if (nCenters > 0) {
|
||||
description = `${nCenters} collection centers`;
|
||||
notInitiallyAvailable = false;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Section title={props.name} />
|
||||
<Card>
|
||||
<Form>
|
||||
<h1>General Information</h1>
|
||||
<FileInputRow
|
||||
value={description}
|
||||
label="Initial amounts"
|
||||
tooltip="A table indicating the amount of this product initially available at each collection center."
|
||||
accept=".csv"
|
||||
onFile={onInitialAmountsFile}
|
||||
onDownload={onInitialAmountsDownload}
|
||||
onClear={onInitialAmountsClear}
|
||||
onTemplate={onInitialAmountsTemplate}
|
||||
disableDownload={notInitiallyAvailable}
|
||||
disableClear={notInitiallyAvailable}
|
||||
/>
|
||||
|
||||
<h1 style={{ display: nCenters == 0 ? "none" : "block" }}>
|
||||
Disposal
|
||||
</h1>
|
||||
<div style={{ display: nCenters == 0 ? "none" : "block" }}>
|
||||
<TextInputRow
|
||||
label="Disposal cost"
|
||||
unit="$/tonne"
|
||||
tooltip="The cost to dispose of one tonne of this product at a collection center, without further processing."
|
||||
value={props.value["disposal cost ($/tonne)"]}
|
||||
onChange={(v) => onChange("disposal cost ($/tonne)", v)}
|
||||
validate="floatList"
|
||||
/>
|
||||
<TextInputRow
|
||||
label="Disposal limit"
|
||||
unit="tonne"
|
||||
tooltip="The maximum amount (in tonnes) of this product that can be disposed of across all collection centers, without further processing."
|
||||
value={props.value["disposal limit (tonne)"]}
|
||||
onChange={(v) => onChange("disposal limit (tonne)", v)}
|
||||
validate="floatList"
|
||||
disabled={String(props.value["disposal limit (%)"]).length > 0}
|
||||
/>
|
||||
|
||||
<TextInputRow
|
||||
label="Disposal limit"
|
||||
unit="%"
|
||||
tooltip="The maximum amount of this product that can be disposed of across all collection centers, without further processing, as a percentage of the total amount available."
|
||||
value={props.value["disposal limit (%)"]}
|
||||
onChange={(v) => onChange("disposal limit (%)", v)}
|
||||
validate="floatList"
|
||||
disabled={props.value["disposal limit (tonne)"].length > 0}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h1>Transportation</h1>
|
||||
<TextInputRow
|
||||
label="Transportation cost"
|
||||
unit="$/km/tonne"
|
||||
tooltip="The cost to transport this product."
|
||||
value={props.value["transportation cost ($/km/tonne)"]}
|
||||
onChange={(v) => onChange("transportation cost ($/km/tonne)", v)}
|
||||
validate="floatList"
|
||||
/>
|
||||
<TextInputRow
|
||||
label="Transportation energy"
|
||||
unit="J/km/tonne"
|
||||
tooltip="The energy required to transport this product."
|
||||
value={props.value["transportation energy (J/km/tonne)"]}
|
||||
onChange={(v) => onChange("transportation energy (J/km/tonne)", v)}
|
||||
validate="floatList"
|
||||
/>
|
||||
<DictInputRow
|
||||
label="Transportation emissions"
|
||||
unit="tonne/km/tonne"
|
||||
tooltip="A dictionary mapping the name of each greenhouse gas, produced to transport one tonne of this product along one kilometer, to the amount of gas produced."
|
||||
keyPlaceholder="Emission name"
|
||||
value={props.value["transportation emissions (tonne/km/tonne)"]}
|
||||
onChange={(v) =>
|
||||
onChange("transportation emissions (tonne/km/tonne)", v)
|
||||
}
|
||||
validate="floatList"
|
||||
/>
|
||||
</Form>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductBlock;
|
||||
@ -0,0 +1,50 @@
|
||||
import * as d3 from "d3";
|
||||
|
||||
export const csvParse = ({ contents, requiredCols }) => {
|
||||
const data = d3.csvParse(contents, d3.autoType);
|
||||
requiredCols.forEach((col) => {
|
||||
if (!(col in data[0])) {
|
||||
throw Error(`Column "${col}" not found in CSV file.`);
|
||||
}
|
||||
});
|
||||
return data;
|
||||
};
|
||||
|
||||
export const parseCsv = (contents, requiredCols = []) => {
|
||||
const data = d3.csvParse(contents);
|
||||
const T = data.columns.length - requiredCols.length;
|
||||
let isValid = true;
|
||||
for (let t = 0; t < T; t++) {
|
||||
requiredCols.push(t + 1);
|
||||
}
|
||||
requiredCols.forEach((col) => {
|
||||
if (!(col in data[0])) {
|
||||
console.log(`Column "${col}" not found in CSV file.`);
|
||||
isValid = false;
|
||||
}
|
||||
});
|
||||
if (!isValid) return [undefined, undefined];
|
||||
return [data, T];
|
||||
};
|
||||
|
||||
export const extractNumericColumns = (obj, prefix) => {
|
||||
const result = [];
|
||||
for (let i = 1; `${prefix} ${i}` in obj; i++) {
|
||||
result.push(obj[`${prefix} ${i}`]);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
export const csvFormat = (data) => {
|
||||
return d3.csvFormat(data);
|
||||
};
|
||||
|
||||
export const generateFile = (filename, contents) => {
|
||||
var link = document.createElement("a");
|
||||
link.setAttribute("href", URL.createObjectURL(new Blob([contents])));
|
||||
link.setAttribute("download", filename);
|
||||
link.style.visibility = "hidden";
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
};
|
||||
@ -0,0 +1,53 @@
|
||||
import { csvParse, extractNumericColumns, csvFormat } from "./csv";
|
||||
import { exportValue } from "./export";
|
||||
|
||||
test("parse CSV", () => {
|
||||
const contents = "name,location,1,2,3\ntest,illinois,100,200,300";
|
||||
const actual = csvParse({
|
||||
contents: contents,
|
||||
requiredCols: ["name", "location"],
|
||||
});
|
||||
expect(actual.length).toEqual(1);
|
||||
expect(actual[0]).toEqual({
|
||||
name: "test",
|
||||
location: "illinois",
|
||||
1: 100,
|
||||
2: 200,
|
||||
3: 300,
|
||||
});
|
||||
});
|
||||
|
||||
test("parse CSV with missing columns", () => {
|
||||
const contents = "name,location,1,2,3\ntest,illinois,100,200,300";
|
||||
expect(() =>
|
||||
csvParse({
|
||||
contents: contents,
|
||||
requiredCols: ["name", "location", "latitude"],
|
||||
})
|
||||
).toThrow('Column "latitude" not found in CSV file.');
|
||||
});
|
||||
|
||||
test("extract numeric columns from object", () => {
|
||||
const obj1 = {
|
||||
"amount 1": "hello",
|
||||
"amount 2": "world",
|
||||
"amount 4": "ignored",
|
||||
};
|
||||
const obj2 = { hello: "world" };
|
||||
expect(extractNumericColumns(obj1, "amount")).toEqual(["hello", "world"]);
|
||||
expect(extractNumericColumns(obj2, "amount")).toEqual([]);
|
||||
});
|
||||
|
||||
test("generate CSV", () => {
|
||||
const data = [
|
||||
{ name: "alice", age: 20 },
|
||||
{ name: "bob", age: null },
|
||||
];
|
||||
expect(csvFormat(data)).toEqual("name,age\nalice,20\nbob,");
|
||||
});
|
||||
|
||||
test("export value", () => {
|
||||
expect(exportValue("1")).toEqual(1);
|
||||
expect(exportValue("[1,2,3]")).toEqual([1, 2, 3]);
|
||||
expect(exportValue("qwe")).toEqual("qwe");
|
||||
});
|
||||
@ -0,0 +1,49 @@
|
||||
export const defaultProduct = {
|
||||
"initial amounts": {},
|
||||
"disposal cost ($/tonne)": "0",
|
||||
"disposal limit (tonne)": "0",
|
||||
"disposal limit (%)": "",
|
||||
"transportation cost ($/km/tonne)": "0",
|
||||
"transportation energy (J/km/tonne)": "0",
|
||||
"transportation emissions (tonne/km/tonne)": {},
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
|
||||
export const defaultPlantLocation = {
|
||||
"area cost factor": 1.0,
|
||||
"latitude (deg)": 0,
|
||||
"longitude (deg)": 0,
|
||||
};
|
||||
|
||||
export const defaultPlant = {
|
||||
locations: {},
|
||||
"outputs (tonne/tonne)": {},
|
||||
"disposal cost ($/tonne)": {},
|
||||
"disposal limit (tonne)": {},
|
||||
"emissions (tonne/tonne)": {},
|
||||
storage: {
|
||||
"cost ($/tonne)": 0,
|
||||
"limit (tonne)": 0,
|
||||
},
|
||||
"maximum capacity (tonne)": 0,
|
||||
"minimum capacity (tonne)": 0,
|
||||
"opening cost (max capacity) ($)": 0,
|
||||
"opening cost (min capacity) ($)": 0,
|
||||
"fixed operating cost (max capacity) ($)": 0,
|
||||
"fixed operating cost (min capacity) ($)": 0,
|
||||
"variable operating cost ($/tonne)": 0,
|
||||
"energy (GJ/tonne)": 0,
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
|
||||
export const defaultData = {
|
||||
parameters: {
|
||||
"time horizon (years)": "1",
|
||||
"building period (years)": "[1]",
|
||||
"inflation rate (%)": "0",
|
||||
},
|
||||
products: {},
|
||||
plants: {},
|
||||
};
|
||||
@ -0,0 +1,555 @@
|
||||
const isNumeric = (val) => {
|
||||
return String(val).length > 0 && !isNaN(val);
|
||||
};
|
||||
|
||||
const keysToList = (obj) => {
|
||||
const result = [];
|
||||
for (const key of Object.keys(obj)) {
|
||||
result.push(key);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
export const exportValue = (original, T, R = 1) => {
|
||||
if (isNumeric(original)) {
|
||||
if (T) {
|
||||
let v = parseFloat(original);
|
||||
const result = [];
|
||||
for (let i = 0; i < T; i++) {
|
||||
result.push(v);
|
||||
v *= R;
|
||||
}
|
||||
return result;
|
||||
} else {
|
||||
return parseFloat(original);
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(original);
|
||||
return parsed;
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
return original;
|
||||
};
|
||||
|
||||
const exportValueDict = (original, T) => {
|
||||
const result = {};
|
||||
for (const [key, val] of Object.entries(original)) {
|
||||
if (key.length === 0) continue;
|
||||
result[key] = exportValue(val, T);
|
||||
}
|
||||
if (Object.keys(result).length > 0) {
|
||||
return result;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const computeTotalInitialAmount = (prod) => {
|
||||
let total = null;
|
||||
for (const locDict of Object.values(prod["initial amounts"])) {
|
||||
const locAmount = locDict["amount (tonne)"];
|
||||
if (!total) total = [...locAmount];
|
||||
else {
|
||||
for (let i = 0; i < locAmount.length; i++) {
|
||||
total[i] += locAmount[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
return total;
|
||||
};
|
||||
|
||||
export const importList = (args, R = 1) => {
|
||||
if (args === undefined) return "";
|
||||
if (Array.isArray(args) && args.length > 0) {
|
||||
let isConstant = true;
|
||||
for (let i = 1; i < args.length; i++) {
|
||||
if (Math.abs(args[i - 1] - args[i] / R) > 1e-3) {
|
||||
isConstant = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (isConstant) {
|
||||
return String(args[0]);
|
||||
} else {
|
||||
return JSON.stringify(args);
|
||||
}
|
||||
} else {
|
||||
return args;
|
||||
}
|
||||
};
|
||||
|
||||
export const importDict = (args) => {
|
||||
if (!args) return {};
|
||||
const result = {};
|
||||
for (const [key, val] of Object.entries(args)) {
|
||||
result[key] = importList(val);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
const computeAbsDisposal = (prod) => {
|
||||
const disposalPerc = prod["disposal limit (%)"];
|
||||
const total = computeTotalInitialAmount(prod);
|
||||
const disposalAbs = [];
|
||||
for (let i = 0; i < total.length; i++) {
|
||||
disposalAbs[i] = (total[i] * disposalPerc) / 100;
|
||||
}
|
||||
return disposalAbs;
|
||||
};
|
||||
|
||||
const computeInflationAndTimeHorizon = (obj, keys) => {
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
const list = obj[keys[i]];
|
||||
if (
|
||||
Array.isArray(list) &&
|
||||
list.length > 1 &&
|
||||
isNumeric(list[0]) &&
|
||||
isNumeric(list[1]) &&
|
||||
Math.abs(list[0]) > 0
|
||||
) {
|
||||
return [list[1] / list[0], list.length];
|
||||
}
|
||||
}
|
||||
return [1, 1];
|
||||
};
|
||||
|
||||
export const exportProduct = (original, parameters) => {
|
||||
const result = {};
|
||||
|
||||
// Read time horizon
|
||||
let T = parameters["time horizon (years)"];
|
||||
if (isNumeric(T)) T = parseInt(T);
|
||||
else T = 1;
|
||||
|
||||
// Read inflation
|
||||
let R = parameters["inflation rate (%)"];
|
||||
if (isNumeric(R)) R = parseFloat(R) / 100 + 1;
|
||||
else R = 1;
|
||||
|
||||
// Copy constant time series
|
||||
result["initial amounts"] = original["initial amounts"];
|
||||
["disposal limit (tonne)", "transportation energy (J/km/tonne)"].forEach(
|
||||
(key) => {
|
||||
const v = exportValue(original[key], T);
|
||||
if (v.length > 0) result[key] = v;
|
||||
}
|
||||
);
|
||||
|
||||
// Copy cost time series (with inflation)
|
||||
["disposal cost ($/tonne)", "transportation cost ($/km/tonne)"].forEach(
|
||||
(key) => {
|
||||
const v = exportValue(original[key], T, R);
|
||||
if (v.length > 0) result[key] = v;
|
||||
}
|
||||
);
|
||||
|
||||
// Copy dictionaries
|
||||
["transportation emissions (tonne/km/tonne)"].forEach((key) => {
|
||||
const v = exportValueDict(original[key], T);
|
||||
if (v) result[key] = v;
|
||||
});
|
||||
|
||||
// Transform percentage disposal limits into absolute
|
||||
if (isNumeric(original["disposal limit (%)"])) {
|
||||
result["disposal limit (tonne)"] = computeAbsDisposal(original);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
export const exportPlant = (original, parameters) => {
|
||||
const result = {};
|
||||
|
||||
// Read time horizon
|
||||
let T = parameters["time horizon (years)"];
|
||||
if (isNumeric(T)) T = parseInt(T);
|
||||
else T = 1;
|
||||
|
||||
// Read inflation
|
||||
let R = parameters["inflation rate (%)"];
|
||||
if (isNumeric(R)) R = parseFloat(R) / 100 + 1;
|
||||
else R = 1;
|
||||
|
||||
// Copy scalar values
|
||||
["input"].forEach((key) => {
|
||||
result[key] = original[key];
|
||||
});
|
||||
|
||||
// Copy time series values
|
||||
["energy (GJ/tonne)"].forEach((key) => {
|
||||
result[key] = exportValue(original[key], T);
|
||||
if (result[key] === undefined) {
|
||||
delete result[key];
|
||||
}
|
||||
});
|
||||
|
||||
// Copy scalar dicts
|
||||
["outputs (tonne/tonne)"].forEach((key) => {
|
||||
const v = exportValueDict(original[key]);
|
||||
if (v) result[key] = v;
|
||||
});
|
||||
|
||||
// Copy time series dicts
|
||||
["emissions (tonne/tonne)"].forEach((key) => {
|
||||
const v = exportValueDict(original[key], T);
|
||||
if (v) result[key] = v;
|
||||
});
|
||||
|
||||
const minCap = original["minimum capacity (tonne)"];
|
||||
const maxCap = original["maximum capacity (tonne)"];
|
||||
|
||||
result.locations = {};
|
||||
for (const [locName, origDict] of Object.entries(original["locations"])) {
|
||||
const resDict = (result.locations[locName] = {});
|
||||
const capDict = (resDict["capacities (tonne)"] = {});
|
||||
|
||||
const acf = origDict["area cost factor"];
|
||||
|
||||
const exportValueAcf = (obj) => {
|
||||
const v = exportValue(obj, T, R);
|
||||
if (Array.isArray(v)) {
|
||||
return v.map((v) => v * acf);
|
||||
}
|
||||
return "";
|
||||
};
|
||||
|
||||
// Copy scalar values
|
||||
["latitude (deg)", "longitude (deg)"].forEach((key) => {
|
||||
resDict[key] = origDict[key];
|
||||
});
|
||||
|
||||
// Copy minimum capacity dict
|
||||
capDict[minCap] = {};
|
||||
for (const [resKeyName, origKeyName] of Object.entries({
|
||||
"opening cost ($)": "opening cost (min capacity) ($)",
|
||||
"fixed operating cost ($)": "fixed operating cost (min capacity) ($)",
|
||||
"variable operating cost ($/tonne)": "variable operating cost ($/tonne)",
|
||||
})) {
|
||||
capDict[minCap][resKeyName] = exportValueAcf(original[origKeyName]);
|
||||
}
|
||||
|
||||
if (maxCap !== minCap) {
|
||||
// Copy maximum capacity dict
|
||||
capDict[maxCap] = {};
|
||||
for (const [resKeyName, origKeyName] of Object.entries({
|
||||
"opening cost ($)": "opening cost (max capacity) ($)",
|
||||
"fixed operating cost ($)": "fixed operating cost (max capacity) ($)",
|
||||
"variable operating cost ($/tonne)":
|
||||
"variable operating cost ($/tonne)",
|
||||
})) {
|
||||
capDict[maxCap][resKeyName] = exportValueAcf(original[origKeyName]);
|
||||
}
|
||||
}
|
||||
|
||||
// Copy disposal
|
||||
resDict.disposal = {};
|
||||
for (const [dispName, dispCost] of Object.entries(
|
||||
original["disposal cost ($/tonne)"]
|
||||
)) {
|
||||
if (dispName.length === 0) continue;
|
||||
const v = exportValueAcf(dispCost, T);
|
||||
if (v) {
|
||||
resDict.disposal[dispName] = { "cost ($/tonne)": v };
|
||||
const limit = original["disposal limit (tonne)"][dispName];
|
||||
if (isNumeric(limit)) {
|
||||
resDict.disposal[dispName]["limit (tonne)"] = exportValue(limit, T);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Copy storage
|
||||
resDict.storage = {
|
||||
"cost ($/tonne)": exportValueAcf(original["storage"]["cost ($/tonne)"]),
|
||||
};
|
||||
const storLimit = original["storage"]["limit (tonne)"];
|
||||
if (isNumeric(storLimit)) {
|
||||
resDict.storage["limit (tonne)"] = exportValue(storLimit);
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
export const exportData = (original) => {
|
||||
const result = {
|
||||
parameters: {},
|
||||
products: {},
|
||||
plants: {},
|
||||
};
|
||||
|
||||
// Export parameters
|
||||
["time horizon (years)", "building period (years)"].forEach((key) => {
|
||||
result.parameters[key] = exportValue(original.parameters[key]);
|
||||
});
|
||||
|
||||
// Read time horizon
|
||||
let T = result.parameters["time horizon (years)"];
|
||||
if (!isNumeric(T)) T = 1;
|
||||
|
||||
// Export products
|
||||
for (const [prodName, prodDict] of Object.entries(original.products)) {
|
||||
result.products[prodName] = exportProduct(prodDict, original.parameters);
|
||||
}
|
||||
|
||||
// Export plants
|
||||
for (const [plantName, plantDict] of Object.entries(original.plants)) {
|
||||
result.plants[plantName] = exportPlant(plantDict, original.parameters);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
const compressDisposalLimits = (original, result) => {
|
||||
if (!("disposal limit (tonne)" in original)) {
|
||||
return;
|
||||
}
|
||||
const total = computeTotalInitialAmount(original);
|
||||
if (!total) return;
|
||||
const limit = original["disposal limit (tonne)"];
|
||||
let perc = Math.round((limit[0] / total[0]) * 1e6) / 1e6;
|
||||
for (let i = 1; i < limit.length; i++) {
|
||||
if (Math.abs(limit[i] / total[i] - perc) > 1e-5) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
result["disposal limit (tonne)"] = "";
|
||||
result["disposal limit (%)"] = String(perc * 100);
|
||||
};
|
||||
|
||||
export const importProduct = (original) => {
|
||||
const prod = {};
|
||||
const parameters = {};
|
||||
|
||||
prod["initial amounts"] = { ...original["initial amounts"] };
|
||||
|
||||
// Initialize null values
|
||||
["x", "y"].forEach((key) => {
|
||||
prod[key] = null;
|
||||
});
|
||||
|
||||
// Initialize empty values
|
||||
["disposal limit (%)"].forEach((key) => {
|
||||
prod[key] = "";
|
||||
});
|
||||
|
||||
// Import constant lists
|
||||
["transportation energy (J/km/tonne)", "disposal limit (tonne)"].forEach(
|
||||
(key) => {
|
||||
prod[key] = importList(original[key]);
|
||||
}
|
||||
);
|
||||
|
||||
// Compute inflation and time horizon
|
||||
const [R, T] = computeInflationAndTimeHorizon(original, [
|
||||
"transportation cost ($/km/tonne)",
|
||||
"disposal cost ($/tonne)",
|
||||
]);
|
||||
parameters["inflation rate (%)"] = String((R - 1) * 100);
|
||||
parameters["time horizon (years)"] = String(T);
|
||||
|
||||
// Import cost lists
|
||||
["transportation cost ($/km/tonne)", "disposal cost ($/tonne)"].forEach(
|
||||
(key) => {
|
||||
prod[key] = importList(original[key], R);
|
||||
}
|
||||
);
|
||||
|
||||
// Import dicts
|
||||
["transportation emissions (tonne/km/tonne)"].forEach((key) => {
|
||||
prod[key] = importDict(original[key]);
|
||||
});
|
||||
|
||||
// Attempt to convert absolute disposal limits to relative
|
||||
compressDisposalLimits(original, prod);
|
||||
|
||||
return [prod, parameters];
|
||||
};
|
||||
|
||||
export const importPlant = (original) => {
|
||||
const plant = {};
|
||||
const parameters = {};
|
||||
|
||||
plant["storage"] = {};
|
||||
plant["storage"]["cost ($/tonne)"] = 0;
|
||||
plant["storage"]["limit (tonne)"] = 0;
|
||||
plant["disposal cost ($/tonne)"] = 0;
|
||||
plant["disposal limit (tonne)"] = 0;
|
||||
|
||||
// Initialize null values
|
||||
["x", "y"].forEach((key) => {
|
||||
plant[key] = null;
|
||||
});
|
||||
|
||||
// Import scalar values
|
||||
["input"].forEach((key) => {
|
||||
plant[key] = original[key];
|
||||
});
|
||||
|
||||
// Import timeseries values
|
||||
["energy (GJ/tonne)"].forEach((key) => {
|
||||
plant[key] = importList(original[key]);
|
||||
if (plant[key] === "") {
|
||||
delete plant[key];
|
||||
}
|
||||
});
|
||||
|
||||
// Import dicts
|
||||
["outputs (tonne/tonne)", "emissions (tonne/tonne)"].forEach((key) => {
|
||||
plant[key] = importDict(original[key]);
|
||||
});
|
||||
|
||||
let costsInitialized = false;
|
||||
let R = null;
|
||||
|
||||
// Read locations
|
||||
const resLocDict = (plant.locations = {});
|
||||
for (const [locName, origLocDict] of Object.entries(original["locations"])) {
|
||||
resLocDict[locName] = {};
|
||||
|
||||
// Import latitude and longitude
|
||||
["latitude (deg)", "longitude (deg)"].forEach((key) => {
|
||||
resLocDict[locName][key] = origLocDict[key];
|
||||
});
|
||||
|
||||
const capacities = keysToList(origLocDict["capacities (tonne)"]);
|
||||
const last = capacities.length - 1;
|
||||
const minCap = capacities[0];
|
||||
const maxCap = capacities[last];
|
||||
const minCapDict = origLocDict["capacities (tonne)"][minCap];
|
||||
const maxCapDict = origLocDict["capacities (tonne)"][maxCap];
|
||||
|
||||
// Import min/max capacity
|
||||
if ("minimum capacity (tonne)" in plant) {
|
||||
if (
|
||||
plant["minimum capacity (tonne)"] !== minCap ||
|
||||
plant["maximum capacity (tonne)"] !== maxCap
|
||||
) {
|
||||
throw "Data loss";
|
||||
}
|
||||
} else {
|
||||
plant["minimum capacity (tonne)"] = minCap;
|
||||
plant["maximum capacity (tonne)"] = maxCap;
|
||||
}
|
||||
|
||||
// Compute area cost factor
|
||||
let acf = 1;
|
||||
if (costsInitialized) {
|
||||
acf = plant["opening cost (max capacity) ($)"];
|
||||
if (Array.isArray(acf)) acf = acf[0];
|
||||
acf = maxCapDict["opening cost ($)"][0] / acf;
|
||||
}
|
||||
resLocDict[locName]["area cost factor"] = acf;
|
||||
|
||||
const [R, T] = computeInflationAndTimeHorizon(maxCapDict, [
|
||||
"opening cost ($)",
|
||||
"fixed operating cost ($)",
|
||||
"variable operating cost ($/tonne)",
|
||||
]);
|
||||
parameters["inflation rate (%)"] = String((R - 1) * 100);
|
||||
parameters["time horizon (years)"] = String(T);
|
||||
|
||||
// Read adjusted costs
|
||||
const importListAcf = (obj) =>
|
||||
importList(
|
||||
obj.map((v) => v / acf),
|
||||
R
|
||||
);
|
||||
const openCostMax = importListAcf(maxCapDict["opening cost ($)"]);
|
||||
const openCostMin = importListAcf(minCapDict["opening cost ($)"]);
|
||||
const fixCostMax = importListAcf(maxCapDict["fixed operating cost ($)"]);
|
||||
const fixCostMin = importListAcf(minCapDict["fixed operating cost ($)"]);
|
||||
const storCost = importListAcf(origLocDict.storage["cost ($/tonne)"]);
|
||||
const storLimit = String(origLocDict.storage["limit (tonne)"]);
|
||||
const varCost = importListAcf(
|
||||
minCapDict["variable operating cost ($/tonne)"]
|
||||
);
|
||||
|
||||
const dispCost = {};
|
||||
const dispLimit = {};
|
||||
for (const prodName of Object.keys(original["outputs (tonne/tonne)"])) {
|
||||
dispCost[prodName] = "";
|
||||
dispLimit[prodName] = "";
|
||||
|
||||
if (prodName in origLocDict["disposal"]) {
|
||||
const prodDict = origLocDict["disposal"][prodName];
|
||||
dispCost[prodName] = importListAcf(prodDict["cost ($/tonne)"]);
|
||||
if ("limit (tonne)" in prodDict)
|
||||
dispLimit[prodName] = importList(prodDict["limit (tonne)"]);
|
||||
}
|
||||
}
|
||||
|
||||
const check = (left, right) => {
|
||||
let valid = true;
|
||||
if (isNumeric(left) && isNumeric(right)) {
|
||||
valid = Math.abs(left - right) < 1.0;
|
||||
} else {
|
||||
valid = left === right;
|
||||
}
|
||||
if (!valid)
|
||||
console.warn(`Data loss detected: ${locName}, ${left} != ${right}`);
|
||||
};
|
||||
|
||||
if (costsInitialized) {
|
||||
// Verify that location costs match the previously initialized ones
|
||||
check(plant["opening cost (max capacity) ($)"], openCostMax);
|
||||
check(plant["opening cost (min capacity) ($)"], openCostMin);
|
||||
check(plant["fixed operating cost (max capacity) ($)"], fixCostMax);
|
||||
check(plant["fixed operating cost (min capacity) ($)"], fixCostMin);
|
||||
check(plant["variable operating cost ($/tonne)"], varCost);
|
||||
check(plant["storage"]["cost ($/tonne)"], storCost);
|
||||
check(plant["storage"]["limit (tonne)"], storLimit);
|
||||
check(String(plant["disposal cost ($/tonne)"]), String(dispCost));
|
||||
check(String(plant["disposal limit (tonne)"]), String(dispLimit));
|
||||
} else {
|
||||
// Initialize plant costs
|
||||
costsInitialized = true;
|
||||
plant["opening cost (max capacity) ($)"] = openCostMax;
|
||||
plant["opening cost (min capacity) ($)"] = openCostMin;
|
||||
plant["fixed operating cost (max capacity) ($)"] = fixCostMax;
|
||||
plant["fixed operating cost (min capacity) ($)"] = fixCostMin;
|
||||
plant["variable operating cost ($/tonne)"] = varCost;
|
||||
plant["storage"] = {};
|
||||
plant["storage"]["cost ($/tonne)"] = storCost;
|
||||
plant["storage"]["limit (tonne)"] = storLimit;
|
||||
plant["disposal cost ($/tonne)"] = dispCost;
|
||||
plant["disposal limit (tonne)"] = dispLimit;
|
||||
parameters["inflation rate (%)"] = String((R - 1) * 100);
|
||||
}
|
||||
}
|
||||
|
||||
return [plant, parameters];
|
||||
};
|
||||
|
||||
export const importData = (original) => {
|
||||
["parameters", "plants", "products"].forEach((key) => {
|
||||
if (!(key in original)) {
|
||||
throw "File not recognized.";
|
||||
}
|
||||
});
|
||||
|
||||
const result = {};
|
||||
result.parameters = importDict(original.parameters);
|
||||
["building period (years)"].forEach((k) => {
|
||||
result.parameters[k] = JSON.stringify(original.parameters[k]);
|
||||
});
|
||||
result.parameters["inflation rate (%)"] = "0";
|
||||
|
||||
// Import products
|
||||
result.products = {};
|
||||
for (const [prodName, origProdDict] of Object.entries(original.products)) {
|
||||
const [recoveredProd, recoveredParams] = importProduct(origProdDict);
|
||||
result.products[prodName] = recoveredProd;
|
||||
result.parameters = { ...result.parameters, ...recoveredParams };
|
||||
}
|
||||
|
||||
// Import plants
|
||||
result.plants = {};
|
||||
for (const [plantName, origPlantDict] of Object.entries(original.plants)) {
|
||||
const [recoveredPlant, recoveredParams] = importPlant(origPlantDict);
|
||||
result.plants[plantName] = recoveredPlant;
|
||||
result.parameters = { ...result.parameters, ...recoveredParams };
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
@ -0,0 +1,583 @@
|
||||
import {
|
||||
exportProduct,
|
||||
exportPlant,
|
||||
importProduct,
|
||||
importList,
|
||||
importDict,
|
||||
importPlant,
|
||||
} from "./export";
|
||||
|
||||
const sampleProductsOriginal = [
|
||||
// basic product
|
||||
{
|
||||
"initial amounts": {
|
||||
"Washakie County": {
|
||||
"latitude (deg)": 43.8356,
|
||||
"longitude (deg)": -107.6602,
|
||||
"amount (tonne)": [100, 200, 300],
|
||||
},
|
||||
"Platte County": {
|
||||
"latitude (deg)": 42.1314,
|
||||
"longitude (deg)": -104.9676,
|
||||
"amount (tonne)": [100, 200, 300],
|
||||
},
|
||||
"Park County": {
|
||||
"latitude (deg)": 44.4063,
|
||||
"longitude (deg)": -109.4153,
|
||||
"amount (tonne)": [100, 200, 300],
|
||||
},
|
||||
},
|
||||
"disposal cost ($/tonne)": "50",
|
||||
"disposal limit (tonne)": "30",
|
||||
"disposal limit (%)": "",
|
||||
"transportation cost ($/km/tonne)": "0",
|
||||
"transportation energy (J/km/tonne)": "10",
|
||||
"transportation emissions (tonne/km/tonne)": {
|
||||
CO2: "0.5",
|
||||
},
|
||||
x: null,
|
||||
y: null,
|
||||
},
|
||||
// product with percentage disposal limit
|
||||
{
|
||||
"initial amounts": {
|
||||
"Washakie County": {
|
||||
"latitude (deg)": 43.8356,
|
||||
"longitude (deg)": -107.6602,
|
||||
"amount (tonne)": [100, 200, 300],
|
||||
},
|
||||
"Platte County": {
|
||||
"latitude (deg)": 42.1314,
|
||||
"longitude (deg)": -104.9676,
|
||||
"amount (tonne)": [100, 200, 300],
|
||||
},
|
||||
"Park County": {
|
||||
"latitude (deg)": 44.4063,
|
||||
"longitude (deg)": -109.4153,
|
||||
"amount (tonne)": [100, 200, 300],
|
||||
},
|
||||
},
|
||||
"disposal cost ($/tonne)": "50",
|
||||
"disposal limit (tonne)": "",
|
||||
"disposal limit (%)": "10",
|
||||
"transportation cost ($/km/tonne)": "5",
|
||||
"transportation energy (J/km/tonne)": "10",
|
||||
"transportation emissions (tonne/km/tonne)": {
|
||||
CO2: "0.5",
|
||||
},
|
||||
x: null,
|
||||
y: null,
|
||||
},
|
||||
// product using defaults
|
||||
{
|
||||
"initial amounts": {
|
||||
"Washakie County": {
|
||||
"latitude (deg)": 43.8356,
|
||||
"longitude (deg)": -107.6602,
|
||||
"amount (tonne)": [100, 200, 300],
|
||||
},
|
||||
"Platte County": {
|
||||
"latitude (deg)": 42.1314,
|
||||
"longitude (deg)": -104.9676,
|
||||
"amount (tonne)": [100, 200, 300],
|
||||
},
|
||||
"Park County": {
|
||||
"latitude (deg)": 44.4063,
|
||||
"longitude (deg)": -109.4153,
|
||||
"amount (tonne)": [100, 200, 300],
|
||||
},
|
||||
},
|
||||
"disposal cost ($/tonne)": "50",
|
||||
"disposal limit (tonne)": "",
|
||||
"disposal limit (%)": "",
|
||||
"transportation cost ($/km/tonne)": "5",
|
||||
"transportation energy (J/km/tonne)": "",
|
||||
"transportation emissions (tonne/km/tonne)": {},
|
||||
x: null,
|
||||
y: null,
|
||||
},
|
||||
];
|
||||
|
||||
const sampleProductsExported = [
|
||||
// basic product
|
||||
{
|
||||
"initial amounts": {
|
||||
"Washakie County": {
|
||||
"latitude (deg)": 43.8356,
|
||||
"longitude (deg)": -107.6602,
|
||||
"amount (tonne)": [100, 200, 300],
|
||||
},
|
||||
"Platte County": {
|
||||
"latitude (deg)": 42.1314,
|
||||
"longitude (deg)": -104.9676,
|
||||
"amount (tonne)": [100, 200, 300],
|
||||
},
|
||||
"Park County": {
|
||||
"latitude (deg)": 44.4063,
|
||||
"longitude (deg)": -109.4153,
|
||||
"amount (tonne)": [100, 200, 300],
|
||||
},
|
||||
},
|
||||
"disposal cost ($/tonne)": [50, 100, 200],
|
||||
"disposal limit (tonne)": [30, 30, 30],
|
||||
"transportation cost ($/km/tonne)": [0, 0, 0],
|
||||
"transportation energy (J/km/tonne)": [10, 10, 10],
|
||||
"transportation emissions (tonne/km/tonne)": {
|
||||
CO2: [0.5, 0.5, 0.5],
|
||||
},
|
||||
},
|
||||
// product with percentage disposal limit
|
||||
{
|
||||
"initial amounts": {
|
||||
"Washakie County": {
|
||||
"latitude (deg)": 43.8356,
|
||||
"longitude (deg)": -107.6602,
|
||||
"amount (tonne)": [100, 200, 300],
|
||||
},
|
||||
"Platte County": {
|
||||
"latitude (deg)": 42.1314,
|
||||
"longitude (deg)": -104.9676,
|
||||
"amount (tonne)": [100, 200, 300],
|
||||
},
|
||||
"Park County": {
|
||||
"latitude (deg)": 44.4063,
|
||||
"longitude (deg)": -109.4153,
|
||||
"amount (tonne)": [100, 200, 300],
|
||||
},
|
||||
},
|
||||
"disposal cost ($/tonne)": [50, 50, 50],
|
||||
"disposal limit (tonne)": [30, 60, 90],
|
||||
"transportation cost ($/km/tonne)": [5, 5, 5],
|
||||
"transportation energy (J/km/tonne)": [10, 10, 10],
|
||||
"transportation emissions (tonne/km/tonne)": {
|
||||
CO2: [0.5, 0.5, 0.5],
|
||||
},
|
||||
},
|
||||
// product using defaults
|
||||
{
|
||||
"initial amounts": {
|
||||
"Washakie County": {
|
||||
"latitude (deg)": 43.8356,
|
||||
"longitude (deg)": -107.6602,
|
||||
"amount (tonne)": [100, 200, 300],
|
||||
},
|
||||
"Platte County": {
|
||||
"latitude (deg)": 42.1314,
|
||||
"longitude (deg)": -104.9676,
|
||||
"amount (tonne)": [100, 200, 300],
|
||||
},
|
||||
"Park County": {
|
||||
"latitude (deg)": 44.4063,
|
||||
"longitude (deg)": -109.4153,
|
||||
"amount (tonne)": [100, 200, 300],
|
||||
},
|
||||
},
|
||||
"disposal cost ($/tonne)": [50, 50, 50],
|
||||
"transportation cost ($/km/tonne)": [5, 5, 5],
|
||||
},
|
||||
];
|
||||
|
||||
const samplePlantsOriginal = [
|
||||
// basic plant
|
||||
{
|
||||
input: "Baled agricultural biomass",
|
||||
"outputs (tonne/tonne)": {
|
||||
"Hydrogen gas": 0.095,
|
||||
"Carbon dioxide": 1.164,
|
||||
Tar: 0,
|
||||
},
|
||||
locations: {
|
||||
"Washakie County": {
|
||||
"latitude (deg)": 43.8356,
|
||||
"longitude (deg)": -107.6602,
|
||||
"area cost factor": 1.0,
|
||||
},
|
||||
"Platte County": {
|
||||
"latitude (deg)": 42.1314,
|
||||
"longitude (deg)": -104.9676,
|
||||
"area cost factor": 0.5,
|
||||
},
|
||||
},
|
||||
"disposal cost ($/tonne)": {
|
||||
"Hydrogen gas": "0",
|
||||
"Carbon dioxide": "0",
|
||||
Tar: "200",
|
||||
},
|
||||
"disposal limit (tonne)": {
|
||||
"Hydrogen gas": "10",
|
||||
"Carbon dioxide": "",
|
||||
Tar: "",
|
||||
},
|
||||
"emissions (tonne/tonne)": {
|
||||
CO2: "100",
|
||||
},
|
||||
storage: {
|
||||
"cost ($/tonne)": "5",
|
||||
"limit (tonne)": "10000",
|
||||
},
|
||||
"maximum capacity (tonne)": "730000",
|
||||
"minimum capacity (tonne)": "182500",
|
||||
"opening cost (max capacity) ($)": "300000",
|
||||
"opening cost (min capacity) ($)": "200000",
|
||||
"fixed operating cost (max capacity) ($)": "7000",
|
||||
"fixed operating cost (min capacity) ($)": "5000",
|
||||
"variable operating cost ($/tonne)": "10",
|
||||
x: null,
|
||||
y: null,
|
||||
},
|
||||
// plant with fixed capacity
|
||||
{
|
||||
input: "Baled agricultural biomass",
|
||||
"outputs (tonne/tonne)": {
|
||||
"Hydrogen gas": 0.095,
|
||||
"Carbon dioxide": 1.164,
|
||||
Tar: 0.06,
|
||||
},
|
||||
"energy (GJ/tonne)": "50",
|
||||
locations: {
|
||||
"Washakie County": {
|
||||
"latitude (deg)": 43.8356,
|
||||
"longitude (deg)": -107.6602,
|
||||
"area cost factor": 1.0,
|
||||
},
|
||||
"Platte County": {
|
||||
"latitude (deg)": 42.1314,
|
||||
"longitude (deg)": -104.9676,
|
||||
"area cost factor": 0.5,
|
||||
},
|
||||
},
|
||||
"disposal cost ($/tonne)": {
|
||||
"Hydrogen gas": "0",
|
||||
"Carbon dioxide": "0",
|
||||
Tar: "200",
|
||||
},
|
||||
"disposal limit (tonne)": {
|
||||
"Hydrogen gas": "10",
|
||||
"Carbon dioxide": "",
|
||||
Tar: "",
|
||||
},
|
||||
"emissions (tonne/tonne)": {
|
||||
CO2: "100",
|
||||
},
|
||||
storage: {
|
||||
"cost ($/tonne)": "5",
|
||||
"limit (tonne)": "10000",
|
||||
},
|
||||
"maximum capacity (tonne)": "182500",
|
||||
"minimum capacity (tonne)": "182500",
|
||||
"opening cost (max capacity) ($)": "200000",
|
||||
"opening cost (min capacity) ($)": "200000",
|
||||
"fixed operating cost (max capacity) ($)": "5000",
|
||||
"fixed operating cost (min capacity) ($)": "5000",
|
||||
"variable operating cost ($/tonne)": "10",
|
||||
x: null,
|
||||
y: null,
|
||||
},
|
||||
// plant with defaults
|
||||
{
|
||||
input: "Baled agricultural biomass",
|
||||
"outputs (tonne/tonne)": {
|
||||
"Hydrogen gas": 0.095,
|
||||
"Carbon dioxide": 1.164,
|
||||
Tar: 0.06,
|
||||
},
|
||||
"energy (GJ/tonne)": "50",
|
||||
locations: {
|
||||
"Washakie County": {
|
||||
"latitude (deg)": 43.8356,
|
||||
"longitude (deg)": -107.6602,
|
||||
"area cost factor": 1.0,
|
||||
},
|
||||
"Platte County": {
|
||||
"latitude (deg)": 42.1314,
|
||||
"longitude (deg)": -104.9676,
|
||||
"area cost factor": 0.5,
|
||||
},
|
||||
},
|
||||
"disposal cost ($/tonne)": {
|
||||
"Hydrogen gas": "",
|
||||
"Carbon dioxide": "",
|
||||
Tar: "",
|
||||
},
|
||||
"disposal limit (tonne)": {
|
||||
"Hydrogen gas": "",
|
||||
"Carbon dioxide": "",
|
||||
Tar: "",
|
||||
},
|
||||
"emissions (tonne/tonne)": {
|
||||
CO2: "100",
|
||||
},
|
||||
storage: {
|
||||
"cost ($/tonne)": "5",
|
||||
"limit (tonne)": "10000",
|
||||
},
|
||||
"maximum capacity (tonne)": "730000",
|
||||
"minimum capacity (tonne)": "182500",
|
||||
"opening cost (max capacity) ($)": "300000",
|
||||
"opening cost (min capacity) ($)": "200000",
|
||||
"fixed operating cost (max capacity) ($)": "7000",
|
||||
"fixed operating cost (min capacity) ($)": "5000",
|
||||
"variable operating cost ($/tonne)": "10",
|
||||
x: null,
|
||||
y: null,
|
||||
},
|
||||
];
|
||||
|
||||
const samplePlantsExported = [
|
||||
//basic plant
|
||||
{
|
||||
input: "Baled agricultural biomass",
|
||||
"outputs (tonne/tonne)": {
|
||||
"Hydrogen gas": 0.095,
|
||||
"Carbon dioxide": 1.164,
|
||||
Tar: 0,
|
||||
},
|
||||
locations: {
|
||||
"Washakie County": {
|
||||
"latitude (deg)": 43.8356,
|
||||
"longitude (deg)": -107.6602,
|
||||
disposal: {
|
||||
"Hydrogen gas": {
|
||||
"cost ($/tonne)": [0, 0, 0],
|
||||
"limit (tonne)": [10, 10, 10],
|
||||
},
|
||||
"Carbon dioxide": {
|
||||
"cost ($/tonne)": [0, 0, 0],
|
||||
},
|
||||
Tar: {
|
||||
"cost ($/tonne)": [200, 400, 800],
|
||||
},
|
||||
},
|
||||
storage: {
|
||||
"cost ($/tonne)": [5, 10, 20],
|
||||
"limit (tonne)": 10000,
|
||||
},
|
||||
"capacities (tonne)": {
|
||||
182500: {
|
||||
"opening cost ($)": [200000, 400000, 800000],
|
||||
"fixed operating cost ($)": [5000, 10000, 20000],
|
||||
"variable operating cost ($/tonne)": [10, 20, 40],
|
||||
},
|
||||
730000: {
|
||||
"opening cost ($)": [300000, 600000, 1200000],
|
||||
"fixed operating cost ($)": [7000, 14000, 28000],
|
||||
"variable operating cost ($/tonne)": [10, 20, 40],
|
||||
},
|
||||
},
|
||||
},
|
||||
"Platte County": {
|
||||
"latitude (deg)": 42.1314,
|
||||
"longitude (deg)": -104.9676,
|
||||
disposal: {
|
||||
"Hydrogen gas": {
|
||||
"cost ($/tonne)": [0, 0, 0],
|
||||
"limit (tonne)": [10, 10, 10],
|
||||
},
|
||||
"Carbon dioxide": {
|
||||
"cost ($/tonne)": [0, 0, 0],
|
||||
},
|
||||
Tar: {
|
||||
"cost ($/tonne)": [100, 200.0, 400],
|
||||
},
|
||||
},
|
||||
storage: {
|
||||
"cost ($/tonne)": [2.5, 5, 10],
|
||||
"limit (tonne)": 10000,
|
||||
},
|
||||
"capacities (tonne)": {
|
||||
182500: {
|
||||
"opening cost ($)": [100000, 200000, 400000],
|
||||
"fixed operating cost ($)": [2500, 5000, 10000],
|
||||
"variable operating cost ($/tonne)": [5, 10, 20],
|
||||
},
|
||||
730000: {
|
||||
"opening cost ($)": [150000, 300000, 600000],
|
||||
"fixed operating cost ($)": [3500, 7000, 14000],
|
||||
"variable operating cost ($/tonne)": [5, 10, 20],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
"emissions (tonne/tonne)": {
|
||||
CO2: [100, 100, 100],
|
||||
},
|
||||
},
|
||||
// plant with fixed capacity
|
||||
{
|
||||
input: "Baled agricultural biomass",
|
||||
"outputs (tonne/tonne)": {
|
||||
"Hydrogen gas": 0.095,
|
||||
"Carbon dioxide": 1.164,
|
||||
Tar: 0.06,
|
||||
},
|
||||
"energy (GJ/tonne)": [50, 50, 50],
|
||||
locations: {
|
||||
"Washakie County": {
|
||||
"latitude (deg)": 43.8356,
|
||||
"longitude (deg)": -107.6602,
|
||||
disposal: {
|
||||
"Hydrogen gas": {
|
||||
"cost ($/tonne)": [0, 0, 0],
|
||||
"limit (tonne)": [10, 10, 10],
|
||||
},
|
||||
"Carbon dioxide": {
|
||||
"cost ($/tonne)": [0, 0, 0],
|
||||
},
|
||||
Tar: {
|
||||
"cost ($/tonne)": [200.0, 200.0, 200.0],
|
||||
},
|
||||
},
|
||||
storage: {
|
||||
"cost ($/tonne)": [5, 5, 5],
|
||||
"limit (tonne)": 10000,
|
||||
},
|
||||
"capacities (tonne)": {
|
||||
182500: {
|
||||
"opening cost ($)": [200000, 200000, 200000],
|
||||
"fixed operating cost ($)": [5000, 5000, 5000],
|
||||
"variable operating cost ($/tonne)": [10, 10, 10],
|
||||
},
|
||||
},
|
||||
},
|
||||
"Platte County": {
|
||||
"latitude (deg)": 42.1314,
|
||||
"longitude (deg)": -104.9676,
|
||||
disposal: {
|
||||
"Hydrogen gas": {
|
||||
"cost ($/tonne)": [0, 0, 0],
|
||||
"limit (tonne)": [10, 10, 10],
|
||||
},
|
||||
"Carbon dioxide": {
|
||||
"cost ($/tonne)": [0, 0, 0],
|
||||
},
|
||||
Tar: {
|
||||
"cost ($/tonne)": [100.0, 100.0, 100.0],
|
||||
},
|
||||
},
|
||||
storage: {
|
||||
"cost ($/tonne)": [2.5, 2.5, 2.5],
|
||||
"limit (tonne)": 10000,
|
||||
},
|
||||
"capacities (tonne)": {
|
||||
182500: {
|
||||
"opening cost ($)": [100000, 100000, 100000],
|
||||
"fixed operating cost ($)": [2500, 2500, 2500],
|
||||
"variable operating cost ($/tonne)": [5, 5, 5],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
"emissions (tonne/tonne)": {
|
||||
CO2: [100, 100, 100],
|
||||
},
|
||||
},
|
||||
// plant with defaults
|
||||
{
|
||||
input: "Baled agricultural biomass",
|
||||
"outputs (tonne/tonne)": {
|
||||
"Hydrogen gas": 0.095,
|
||||
"Carbon dioxide": 1.164,
|
||||
Tar: 0.06,
|
||||
},
|
||||
"energy (GJ/tonne)": [50, 50, 50],
|
||||
locations: {
|
||||
"Washakie County": {
|
||||
"latitude (deg)": 43.8356,
|
||||
"longitude (deg)": -107.6602,
|
||||
disposal: {},
|
||||
storage: {
|
||||
"cost ($/tonne)": [5, 5, 5],
|
||||
"limit (tonne)": 10000,
|
||||
},
|
||||
"capacities (tonne)": {
|
||||
182500: {
|
||||
"opening cost ($)": [200000, 200000, 200000],
|
||||
"fixed operating cost ($)": [5000, 5000, 5000],
|
||||
"variable operating cost ($/tonne)": [10, 10, 10],
|
||||
},
|
||||
730000: {
|
||||
"opening cost ($)": [300000, 300000, 300000],
|
||||
"fixed operating cost ($)": [7000, 7000, 7000],
|
||||
"variable operating cost ($/tonne)": [10, 10, 10],
|
||||
},
|
||||
},
|
||||
},
|
||||
"Platte County": {
|
||||
"latitude (deg)": 42.1314,
|
||||
"longitude (deg)": -104.9676,
|
||||
disposal: {},
|
||||
storage: {
|
||||
"cost ($/tonne)": [2.5, 2.5, 2.5],
|
||||
"limit (tonne)": 10000,
|
||||
},
|
||||
"capacities (tonne)": {
|
||||
182500: {
|
||||
"opening cost ($)": [100000, 100000, 100000],
|
||||
"fixed operating cost ($)": [2500, 2500, 2500],
|
||||
"variable operating cost ($/tonne)": [5, 5, 5],
|
||||
},
|
||||
730000: {
|
||||
"opening cost ($)": [150000, 150000, 150000],
|
||||
"fixed operating cost ($)": [3500, 3500, 3500],
|
||||
"variable operating cost ($/tonne)": [5, 5, 5],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
"emissions (tonne/tonne)": {
|
||||
CO2: [100, 100, 100],
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const sampleParameters = [
|
||||
{
|
||||
"time horizon (years)": "3",
|
||||
"inflation rate (%)": "100",
|
||||
},
|
||||
{
|
||||
"time horizon (years)": "3",
|
||||
"inflation rate (%)": "0",
|
||||
},
|
||||
{
|
||||
"time horizon (years)": "3",
|
||||
"inflation rate (%)": "0",
|
||||
},
|
||||
];
|
||||
|
||||
test("export products", () => {
|
||||
for (let i = 0; i < sampleProductsOriginal.length; i++) {
|
||||
const original = sampleProductsOriginal[i];
|
||||
const exported = sampleProductsExported[i];
|
||||
expect(exportProduct(original, sampleParameters[i])).toEqual(exported);
|
||||
|
||||
const [recoveredProd, recoveredParams] = importProduct(exported);
|
||||
expect(recoveredProd).toEqual(original);
|
||||
expect(recoveredParams).toEqual(sampleParameters[i]);
|
||||
}
|
||||
});
|
||||
|
||||
test("export plants", () => {
|
||||
for (let i = 0; i < samplePlantsOriginal.length; i++) {
|
||||
const original = samplePlantsOriginal[i];
|
||||
const exported = samplePlantsExported[i];
|
||||
expect(exportPlant(original, sampleParameters[i])).toEqual(exported);
|
||||
|
||||
const [recoveredPlant, recoveredParams] = importPlant(exported);
|
||||
expect(recoveredPlant).toEqual(original);
|
||||
expect(recoveredParams).toEqual(sampleParameters[i]);
|
||||
}
|
||||
});
|
||||
|
||||
test("importList", () => {
|
||||
expect(importList("invalid")).toEqual("invalid");
|
||||
expect(importList([1, 1, 1])).toEqual("1");
|
||||
expect(importList([1, 2, 3])).toEqual("[1,2,3]");
|
||||
expect(importList(["A", "A", "A"])).toEqual("A");
|
||||
});
|
||||
|
||||
test("importDict", () => {
|
||||
expect(importDict({ a: [5, 5, 5] })).toEqual({ a: "5" });
|
||||
expect(importDict({ a: [1, 2, 3] })).toEqual({ a: "[1,2,3]" });
|
||||
expect(importDict({ a: "invalid" })).toEqual({ a: "invalid" });
|
||||
});
|
||||
@ -0,0 +1,182 @@
|
||||
const Ajv = require("ajv");
|
||||
const ajv = new Ajv();
|
||||
|
||||
const schema = {
|
||||
$schema: "http://json-schema.org/draft-07/schema#",
|
||||
$id: "https://anl-ceeesa.github.io/RELOG/input",
|
||||
title: "Schema for RELOG Input File",
|
||||
definitions: {
|
||||
TimeSeries: {
|
||||
type: "array",
|
||||
items: {
|
||||
type: "number",
|
||||
},
|
||||
},
|
||||
Parameters: {
|
||||
type: "object",
|
||||
properties: {
|
||||
"time horizon (years)": {
|
||||
type: "number",
|
||||
},
|
||||
},
|
||||
required: ["time horizon (years)"],
|
||||
},
|
||||
Plant: {
|
||||
type: "object",
|
||||
additionalProperties: {
|
||||
type: "object",
|
||||
properties: {
|
||||
input: {
|
||||
type: "string",
|
||||
},
|
||||
"outputs (tonne/tonne)": {
|
||||
type: "object",
|
||||
additionalProperties: {
|
||||
type: "number",
|
||||
},
|
||||
},
|
||||
"energy (GJ/tonne)": {
|
||||
$ref: "#/definitions/TimeSeries",
|
||||
},
|
||||
"emissions (tonne/tonne)": {
|
||||
type: "object",
|
||||
additionalProperties: {
|
||||
$ref: "#/definitions/TimeSeries",
|
||||
},
|
||||
},
|
||||
locations: {
|
||||
$ref: "#/definitions/PlantLocation",
|
||||
},
|
||||
},
|
||||
required: ["input", "locations"],
|
||||
},
|
||||
},
|
||||
PlantLocation: {
|
||||
type: "object",
|
||||
additionalProperties: {
|
||||
type: "object",
|
||||
properties: {
|
||||
location: {
|
||||
type: "string",
|
||||
},
|
||||
"latitude (deg)": {
|
||||
type: "number",
|
||||
},
|
||||
"longitude (deg)": {
|
||||
type: "number",
|
||||
},
|
||||
disposal: {
|
||||
type: "object",
|
||||
additionalProperties: {
|
||||
type: "object",
|
||||
properties: {
|
||||
"cost ($/tonne)": {
|
||||
$ref: "#/definitions/TimeSeries",
|
||||
},
|
||||
"limit (tonne)": {
|
||||
$ref: "#/definitions/TimeSeries",
|
||||
},
|
||||
},
|
||||
required: ["cost ($/tonne)"],
|
||||
},
|
||||
},
|
||||
storage: {
|
||||
type: "object",
|
||||
properties: {
|
||||
"cost ($/tonne)": {
|
||||
$ref: "#/definitions/TimeSeries",
|
||||
},
|
||||
"limit (tonne)": {
|
||||
type: "number",
|
||||
},
|
||||
},
|
||||
required: ["cost ($/tonne)", "limit (tonne)"],
|
||||
},
|
||||
"capacities (tonne)": {
|
||||
type: "object",
|
||||
additionalProperties: {
|
||||
type: "object",
|
||||
properties: {
|
||||
"variable operating cost ($/tonne)": {
|
||||
$ref: "#/definitions/TimeSeries",
|
||||
},
|
||||
"fixed operating cost ($)": {
|
||||
$ref: "#/definitions/TimeSeries",
|
||||
},
|
||||
"opening cost ($)": {
|
||||
$ref: "#/definitions/TimeSeries",
|
||||
},
|
||||
},
|
||||
required: [
|
||||
"variable operating cost ($/tonne)",
|
||||
"fixed operating cost ($)",
|
||||
"opening cost ($)",
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
required: ["capacities (tonne)"],
|
||||
},
|
||||
},
|
||||
InitialAmount: {
|
||||
type: "object",
|
||||
additionalProperties: {
|
||||
type: "object",
|
||||
properties: {
|
||||
location: {
|
||||
type: "string",
|
||||
},
|
||||
"latitude (deg)": {
|
||||
type: "number",
|
||||
},
|
||||
"longitude (deg)": {
|
||||
type: "number",
|
||||
},
|
||||
"amount (tonne)": {
|
||||
$ref: "#/definitions/TimeSeries",
|
||||
},
|
||||
},
|
||||
required: ["amount (tonne)"],
|
||||
},
|
||||
},
|
||||
Product: {
|
||||
type: "object",
|
||||
additionalProperties: {
|
||||
type: "object",
|
||||
properties: {
|
||||
"transportation cost ($/km/tonne)": {
|
||||
$ref: "#/definitions/TimeSeries",
|
||||
},
|
||||
"transportation energy (J/km/tonne)": {
|
||||
$ref: "#/definitions/TimeSeries",
|
||||
},
|
||||
"transportation emissions (tonne/km/tonne)": {
|
||||
type: "object",
|
||||
additionalProperties: {
|
||||
$ref: "#/definitions/TimeSeries",
|
||||
},
|
||||
},
|
||||
"initial amounts": {
|
||||
$ref: "#/definitions/InitialAmount",
|
||||
},
|
||||
},
|
||||
required: ["transportation cost ($/km/tonne)"],
|
||||
},
|
||||
},
|
||||
},
|
||||
type: "object",
|
||||
properties: {
|
||||
parameters: {
|
||||
$ref: "#/definitions/Parameters",
|
||||
},
|
||||
plants: {
|
||||
$ref: "#/definitions/Plant",
|
||||
},
|
||||
products: {
|
||||
$ref: "#/definitions/Product",
|
||||
},
|
||||
},
|
||||
required: ["parameters", "plants", "products"],
|
||||
};
|
||||
|
||||
export const validate = ajv.compile(schema);
|
||||
@ -0,0 +1,26 @@
|
||||
import styles from "./Button.module.css";
|
||||
|
||||
const Button = (props) => {
|
||||
let className = styles.Button;
|
||||
if (props.kind === "inline") {
|
||||
className += " " + styles.inline;
|
||||
}
|
||||
|
||||
let tooltip = "";
|
||||
if (props.tooltip !== undefined) {
|
||||
tooltip = <span className={styles.tooltip}>{props.tooltip}</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
className={className}
|
||||
onClick={props.onClick}
|
||||
disabled={props.disabled}
|
||||
>
|
||||
{tooltip}
|
||||
{props.label}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default Button;
|
||||
@ -0,0 +1,67 @@
|
||||
.Button {
|
||||
padding: 6px 36px;
|
||||
margin: 12px 6px;
|
||||
line-height: 24px;
|
||||
border: var(--box-border);
|
||||
/* background-color: white; */
|
||||
box-shadow: var(--box-shadow);
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
background: linear-gradient(rgb(255, 255, 255) 25%, rgb(245, 245, 245) 100%);
|
||||
}
|
||||
|
||||
.Button:hover {
|
||||
background: rgb(245, 245, 245);
|
||||
}
|
||||
|
||||
.Button:active {
|
||||
background: rgba(220, 220, 220);
|
||||
}
|
||||
|
||||
.inline {
|
||||
padding: 0 12px;
|
||||
margin: 2px 4px 2px 0;
|
||||
height: 32px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* .inline:last-child {
|
||||
margin: 2px 1px;
|
||||
} */
|
||||
|
||||
.tooltip {
|
||||
visibility: hidden;
|
||||
background-color: #333;
|
||||
color: white;
|
||||
opacity: 0%;
|
||||
width: 180px;
|
||||
margin-top: 36px;
|
||||
margin-left: -180px;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
text-transform: none;
|
||||
font-size: 13px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25);
|
||||
line-height: 18px;
|
||||
padding: 6px;
|
||||
transition: opacity 0.5s;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.Button:hover .tooltip {
|
||||
visibility: visible;
|
||||
opacity: 100%;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
.Button:disabled {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
cursor: default;
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
import styles from "./Card.module.css";
|
||||
|
||||
const Card = (props) => {
|
||||
return <div className={styles.Card}>{props.children}</div>;
|
||||
};
|
||||
|
||||
export default Card;
|
||||
@ -0,0 +1,22 @@
|
||||
.Card {
|
||||
border: var(--box-border);
|
||||
box-shadow: var(--box-shadow);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: white;
|
||||
padding: 12px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.Card h1 {
|
||||
margin: 12px -12px 0px -12px;
|
||||
padding: 6px 12px 0px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 35px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.Card h1:first-child {
|
||||
margin: -12px -12px 0px -12px;
|
||||
border-top: none;
|
||||
background: none;
|
||||
}
|
||||
@ -0,0 +1,91 @@
|
||||
import form_styles from "./Form.module.css";
|
||||
import Button from "./Button";
|
||||
import { validate } from "./Form";
|
||||
|
||||
const DictInputRow = (props) => {
|
||||
const dict = { ...props.value };
|
||||
if (!props.disableKeys) {
|
||||
dict[""] = "0";
|
||||
}
|
||||
|
||||
let unit = "";
|
||||
if (props.unit) {
|
||||
unit = <span className={form_styles.FormRow_unit}>({props.unit})</span>;
|
||||
}
|
||||
|
||||
let tooltip = "";
|
||||
if (props.tooltip !== undefined) {
|
||||
tooltip = <Button label="?" kind="inline" tooltip={props.tooltip} />;
|
||||
}
|
||||
|
||||
const onChangeValue = (key, v) => {
|
||||
const newDict = { ...dict };
|
||||
newDict[key] = v;
|
||||
props.onChange(newDict);
|
||||
};
|
||||
|
||||
const onChangeKey = (prevKey, newKey) => {
|
||||
const newDict = renameKey(dict, prevKey, newKey);
|
||||
if (!("" in newDict)) newDict[""] = "";
|
||||
props.onChange(newDict);
|
||||
};
|
||||
|
||||
const form = [];
|
||||
Object.keys(dict).forEach((key, index) => {
|
||||
let label = (
|
||||
<span>
|
||||
{props.label} {unit}
|
||||
</span>
|
||||
);
|
||||
if (index > 0) {
|
||||
label = "";
|
||||
}
|
||||
|
||||
let isValid = true;
|
||||
if (props.validate !== undefined) {
|
||||
isValid = validate(props.validate, dict[key]);
|
||||
}
|
||||
|
||||
let className = "";
|
||||
if (!isValid) className = form_styles.invalid;
|
||||
|
||||
form.push(
|
||||
<div className={form_styles.FormRow} key={index}>
|
||||
<label>{label}</label>
|
||||
<input
|
||||
type="text"
|
||||
data-index={index}
|
||||
value={key}
|
||||
placeholder={props.keyPlaceholder}
|
||||
disabled={props.disableKeys}
|
||||
onChange={(e) => onChangeKey(key, e.target.value)}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
data-index={index}
|
||||
value={dict[key]}
|
||||
placeholder={props.valuePlaceholder}
|
||||
className={className}
|
||||
onChange={(e) => onChangeValue(key, e.target.value)}
|
||||
/>
|
||||
{tooltip}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
return <>{form}</>;
|
||||
};
|
||||
|
||||
export function renameKey(obj, prevKey, newKey) {
|
||||
const keys = Object.keys(obj);
|
||||
return keys.reduce((acc, val) => {
|
||||
if (val === prevKey) {
|
||||
acc[newKey] = obj[prevKey];
|
||||
} else {
|
||||
acc[val] = obj[val];
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
|
||||
export default DictInputRow;
|
||||
@ -0,0 +1,59 @@
|
||||
import form_styles from "./Form.module.css";
|
||||
import Button from "./Button";
|
||||
import { useRef } from "react";
|
||||
|
||||
const FileInputRow = (props) => {
|
||||
let tooltip = "";
|
||||
if (props.tooltip !== undefined) {
|
||||
tooltip = <Button label="?" kind="inline" tooltip={props.tooltip} />;
|
||||
}
|
||||
|
||||
const fileElem = useRef();
|
||||
|
||||
const onClickUpload = () => {
|
||||
fileElem.current.click();
|
||||
};
|
||||
|
||||
const onFileSelected = () => {
|
||||
const file = fileElem.current.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.addEventListener("load", () => {
|
||||
props.onFile(reader.result);
|
||||
});
|
||||
reader.readAsText(file);
|
||||
}
|
||||
fileElem.current.value = "";
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={form_styles.FormRow}>
|
||||
<label>{props.label}</label>
|
||||
<input type="text" value={props.value} disabled="disabled" />
|
||||
<Button label="Upload" kind="inline" onClick={onClickUpload} />
|
||||
<Button
|
||||
label="Download"
|
||||
kind="inline"
|
||||
onClick={props.onDownload}
|
||||
disabled={props.disableDownload}
|
||||
/>
|
||||
<Button
|
||||
label="Clear"
|
||||
kind="inline"
|
||||
onClick={props.onClear}
|
||||
disabled={props.disableClear}
|
||||
/>
|
||||
<Button label="Template" kind="inline" onClick={props.onTemplate} />
|
||||
{tooltip}
|
||||
<input
|
||||
type="file"
|
||||
ref={fileElem}
|
||||
accept={props.accept}
|
||||
style={{ display: "none" }}
|
||||
onChange={onFileSelected}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FileInputRow;
|
||||
@ -0,0 +1,15 @@
|
||||
import styles from "./Footer.module.css";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<div className={styles.Footer}>
|
||||
<p>RELOG: Reverse Logistics Optimization</p>
|
||||
<p>
|
||||
Copyright © 2020—2022, UChicago Argonne, LLC. All Rights
|
||||
Reserved.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@ -0,0 +1,8 @@
|
||||
.Footer {
|
||||
padding: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 8px;
|
||||
min-width: 900px;
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
const VALIDATION_REGEX = {
|
||||
int: new RegExp("^[0-9]+$"),
|
||||
intList: new RegExp("[[0-9]*]$"),
|
||||
float: new RegExp("^[0-9]*\\.?[0-9]*$"),
|
||||
floatList: new RegExp("^[?[0-9,.]*]?$"),
|
||||
};
|
||||
|
||||
export const validate = (kind, value) => {
|
||||
if (!VALIDATION_REGEX[kind].test(value)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
const Form = (props) => {
|
||||
return <>{props.children}</>;
|
||||
};
|
||||
|
||||
export default Form;
|
||||
@ -0,0 +1,28 @@
|
||||
.FormRow {
|
||||
display: flex;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.FormRow label {
|
||||
width: 350px;
|
||||
padding: 6px 12px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.FormRow input {
|
||||
flex: 1;
|
||||
font-family: monospace;
|
||||
border: var(--box-border);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 4px;
|
||||
margin: 2px 3px;
|
||||
}
|
||||
|
||||
.FormRow_unit {
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.invalid {
|
||||
border: 2px solid #faa !important;
|
||||
background-color: rgba(255, 0, 0, 0.05);
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import styles from "./Header.module.css";
|
||||
|
||||
const Header = (props) => {
|
||||
return (
|
||||
<div className={styles.HeaderBox}>
|
||||
<div className={styles.HeaderContent}>
|
||||
<h1>RELOG</h1>
|
||||
<h2>{props.title}</h2>
|
||||
<div style={{ float: "right", paddingTop: "5px" }}>
|
||||
{props.children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@ -0,0 +1,28 @@
|
||||
.HeaderBox {
|
||||
background-color: white;
|
||||
border-bottom: var(--box-border);
|
||||
box-shadow: var(--box-shadow);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.HeaderContent {
|
||||
margin: 0 auto;
|
||||
max-width: var(--site-width);
|
||||
}
|
||||
|
||||
.HeaderContent h1,
|
||||
.HeaderContent h2 {
|
||||
line-height: 48px;
|
||||
font-size: 28px;
|
||||
padding: 12px;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.HeaderContent h2 {
|
||||
font-size: 22px;
|
||||
font-weight: normal;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
import styles from "./Section.module.css";
|
||||
|
||||
const Section = (props) => {
|
||||
return <h2 className={styles.Section}>{props.title}</h2>;
|
||||
};
|
||||
|
||||
export default Section;
|
||||
@ -0,0 +1,6 @@
|
||||
.Section {
|
||||
line-height: 36px;
|
||||
margin: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -0,0 +1,44 @@
|
||||
import form_styles from "./Form.module.css";
|
||||
import Button from "./Button";
|
||||
import { validate } from "./Form";
|
||||
import React from "react";
|
||||
|
||||
const TextInputRow = React.forwardRef((props, ref) => {
|
||||
let unit = "";
|
||||
if (props.unit) {
|
||||
unit = <span className={form_styles.FormRow_unit}>({props.unit})</span>;
|
||||
}
|
||||
|
||||
let tooltip = "";
|
||||
if (props.tooltip !== undefined) {
|
||||
tooltip = <Button label="?" kind="inline" tooltip={props.tooltip} />;
|
||||
}
|
||||
|
||||
let isValid = true;
|
||||
if (!props.disabled && props.validate !== undefined) {
|
||||
isValid = validate(props.validate, props.value);
|
||||
}
|
||||
|
||||
let className = "";
|
||||
if (!isValid) className = form_styles.invalid;
|
||||
|
||||
return (
|
||||
<div className={form_styles.FormRow}>
|
||||
<label>
|
||||
{props.label} {unit}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={props.default}
|
||||
disabled={props.disabled}
|
||||
value={props.value}
|
||||
className={className}
|
||||
onChange={(e) => props.onChange(e.target.value)}
|
||||
ref={ref}
|
||||
/>
|
||||
{tooltip}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default TextInputRow;
|
||||
@ -0,0 +1,109 @@
|
||||
:root {
|
||||
--site-width: 1200px;
|
||||
--box-border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
--box-shadow: 0px 2px 4px -3px rgba(0, 0, 0, 0.2);
|
||||
--border-radius: 4px;
|
||||
--primary: #0d6efd;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #333;
|
||||
color: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
|
||||
#contentBackground {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
#content {
|
||||
max-width: var(--site-width);
|
||||
min-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 1px 6px 32px 6px;
|
||||
}
|
||||
|
||||
.react-flow__node.selected {
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2) !important;
|
||||
border-width: 2px !important;
|
||||
margin-top: -1px !important;
|
||||
margin-left: -1px !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.react-flow__handle {
|
||||
width: 6px !important;
|
||||
height: 6px !important;
|
||||
background-color: white !important;
|
||||
border: 1px solid black !important;
|
||||
}
|
||||
|
||||
.react-flow__handle:hover {
|
||||
background-color: black !important;
|
||||
}
|
||||
|
||||
.react-flow__handle-right {
|
||||
right: -4px !important;
|
||||
}
|
||||
|
||||
.react-flow__handle-left {
|
||||
left: -4px !important;
|
||||
}
|
||||
|
||||
#messageTray {
|
||||
max-width: var(--site-width);
|
||||
margin: 0 auto;
|
||||
position: fixed;
|
||||
bottom: 12px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#messageTray .message {
|
||||
background-color: rgb(221, 69, 69);
|
||||
color: #eee;
|
||||
padding: 12px;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
#messageTray .message p {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
#messageTray .message button {
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
border: 1px solid #eee;
|
||||
color: #eee;
|
||||
float: right;
|
||||
padding: 0 24px;
|
||||
line-height: 6px;
|
||||
}
|
||||
|
||||
#messageTray .message button:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
#messageTray .message button:active {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.nodata {
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
color: #888;
|
||||
margin: 0;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import "./index.css";
|
||||
import InputPage from "./casebuilder/InputPage";
|
||||
import SolverPage from "./solver/SolverPage";
|
||||
import { Route, BrowserRouter, Switch, Redirect } from "react-router-dom";
|
||||
|
||||
export const SERVER_URL = "";
|
||||
|
||||
ReactDOM.render(
|
||||
<BrowserRouter>
|
||||
<React.StrictMode>
|
||||
<Switch>
|
||||
<Route path="/casebuilder">
|
||||
<InputPage />
|
||||
</Route>
|
||||
<Route path="/solver/:job_id">
|
||||
<SolverPage />
|
||||
</Route>
|
||||
<Route path="/">
|
||||
<Redirect to="/casebuilder" />
|
||||
</Route>
|
||||
</Switch>
|
||||
</React.StrictMode>
|
||||
</BrowserRouter>,
|
||||
document.getElementById("root")
|
||||
);
|
||||
@ -0,0 +1,46 @@
|
||||
import { useState } from "react";
|
||||
import { useEffect } from "react";
|
||||
import Section from "../common/Section";
|
||||
import Card from "../common/Card";
|
||||
import styles from "./FilesBlock.module.css";
|
||||
import { SERVER_URL } from "..";
|
||||
|
||||
const FilesBlock = (props) => {
|
||||
const [filesFound, setFilesFound] = useState(false);
|
||||
|
||||
const fetchFiles = async () => {
|
||||
const response = await fetch(`${SERVER_URL}/jobs/${props.job}/output.json`);
|
||||
if (response.ok) {
|
||||
setFilesFound(true);
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch files periodically from the server
|
||||
useEffect(() => {
|
||||
fetchFiles();
|
||||
if (!filesFound) {
|
||||
const interval = setInterval(() => {
|
||||
fetchFiles();
|
||||
}, 1000);
|
||||
return () => clearInterval(interval);
|
||||
}
|
||||
}, [filesFound]);
|
||||
|
||||
let content = <div className="nodata">No files available</div>;
|
||||
if (filesFound) {
|
||||
content = (
|
||||
<div className={styles.files}>
|
||||
<a href={`${SERVER_URL}/jobs/${props.job}/output.zip`}>output.zip</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Section title="Output Files" />
|
||||
<Card>{content}</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FilesBlock;
|
||||
@ -0,0 +1,19 @@
|
||||
.files a {
|
||||
display: block;
|
||||
padding: 16px;
|
||||
text-decoration: none;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.files a:hover {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.nodata {
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
color: #888;
|
||||
margin: 0;
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
import { useState } from "react";
|
||||
import { useEffect } from "react";
|
||||
import Section from "../common/Section";
|
||||
import Card from "../common/Card";
|
||||
import styles from "./LogBlock.module.css";
|
||||
import { useRef } from "react";
|
||||
import { SERVER_URL } from "..";
|
||||
|
||||
const LogBlock = (props) => {
|
||||
const [log, setLog] = useState();
|
||||
const preRef = useRef(null);
|
||||
|
||||
const fetchLog = async () => {
|
||||
const response = await fetch(`${SERVER_URL}/jobs/${props.job}/solve.log`);
|
||||
const data = await response.text();
|
||||
if (log !== data) {
|
||||
setLog(data);
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch log periodically from the server
|
||||
useEffect(() => {
|
||||
fetchLog();
|
||||
const interval = setInterval(() => {
|
||||
fetchLog();
|
||||
}, 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
// Scroll to bottom whenever the log is updated
|
||||
useEffect(() => {
|
||||
preRef.current.scrollTop = preRef.current.scrollHeight;
|
||||
}, [log]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Section title="Optimization Log" />
|
||||
<Card>
|
||||
<pre ref={preRef} className={styles.log}>
|
||||
{log}
|
||||
</pre>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LogBlock;
|
||||
@ -0,0 +1,8 @@
|
||||
.log {
|
||||
max-height: 500px;
|
||||
min-height: 500px;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
@ -0,0 +1,238 @@
|
||||
import * as d3 from "d3";
|
||||
import { group } from "d3-array";
|
||||
import * as L from "leaflet";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import { useEffect, useState } from "react";
|
||||
import { SERVER_URL } from "..";
|
||||
import Card from "../common/Card";
|
||||
import Section from "../common/Section";
|
||||
|
||||
function drawMap(csv_plants, csv_tr) {
|
||||
const mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
|
||||
|
||||
const base = L.tileLayer(
|
||||
"https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",
|
||||
{
|
||||
attribution:
|
||||
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
|
||||
subdomains: "abcd",
|
||||
maxZoom: 10,
|
||||
}
|
||||
);
|
||||
|
||||
const plant_types = [...new Set(csv_plants.map((d) => d["plant type"]))];
|
||||
plant_types.push("Multiple");
|
||||
const plant_color = d3
|
||||
.scaleOrdinal()
|
||||
.domain(plant_types)
|
||||
.range([
|
||||
"#558B2F",
|
||||
"#FF8F00",
|
||||
"#0277BD",
|
||||
"#AD1457",
|
||||
"#00838F",
|
||||
"#4527A0",
|
||||
"#C62828",
|
||||
"#424242",
|
||||
]);
|
||||
|
||||
const plant_locations = d3
|
||||
.nest()
|
||||
.key((d) => d["location name"])
|
||||
.rollup(function (v) {
|
||||
return {
|
||||
amount_processed: d3.sum(v, function (d) {
|
||||
return d["amount processed (tonne)"];
|
||||
}),
|
||||
latitude: d3.mean(v, function (d) {
|
||||
return d["latitude (deg)"];
|
||||
}),
|
||||
longitude: d3.mean(v, function (d) {
|
||||
return d["longitude (deg)"];
|
||||
}),
|
||||
plant_types: [...new Set(v.map((d) => d["plant type"]))],
|
||||
};
|
||||
})
|
||||
.entries(csv_plants);
|
||||
|
||||
const plant_scale = d3
|
||||
.scaleSqrt()
|
||||
.range([2, 10])
|
||||
.domain([0, d3.max(plant_locations, (d) => d.value.amount_processed)]);
|
||||
|
||||
const plants_array = [];
|
||||
plant_locations.forEach((d) => {
|
||||
if (d.value.plant_types.length > 1) {
|
||||
d.value.plant_type = "Multiple";
|
||||
} else {
|
||||
d.value.plant_type = d.value.plant_types[0];
|
||||
}
|
||||
const marker = L.circleMarker([d.value.latitude, d.value.longitude], {
|
||||
id: "circleMarker",
|
||||
className: "marker",
|
||||
color: "#222",
|
||||
weight: 1,
|
||||
fillColor: plant_color(d.value.plant_type),
|
||||
fillOpacity: 0.9,
|
||||
radius: plant_scale(d.value.amount_processed),
|
||||
});
|
||||
const num = d.value.amount_processed.toFixed(2);
|
||||
const num_parts = num.toString().split(".");
|
||||
num_parts[0] = num_parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
marker.bindTooltip(
|
||||
`<b>${d.key}</b>
|
||||
<br>
|
||||
Amount processed:
|
||||
${num_parts.join(".")}
|
||||
<br>
|
||||
Plant types:
|
||||
${d.value.plant_types}`
|
||||
);
|
||||
plants_array.push(marker);
|
||||
});
|
||||
|
||||
const collection_centers = d3
|
||||
.nest()
|
||||
.key((d) => d["source location name"])
|
||||
.rollup(function (v) {
|
||||
return {
|
||||
source_lat: d3.mean(v, (d) => d["source latitude (deg)"]),
|
||||
source_long: d3.mean(v, (d) => d["source longitude (deg)"]),
|
||||
amount: d3.sum(v, (d) => d["amount (tonne)"]),
|
||||
};
|
||||
})
|
||||
.entries(csv_tr);
|
||||
|
||||
//Color scale for the collection centers
|
||||
const colors = d3
|
||||
.scaleLog()
|
||||
.domain([
|
||||
d3.min(collection_centers, (d) => d.value.amount),
|
||||
d3.max(collection_centers, (d) => d.value.amount),
|
||||
])
|
||||
.range(["#777", "#777"]);
|
||||
|
||||
//Plot the collection centers
|
||||
const collection_array = [];
|
||||
collection_centers.forEach(function (d) {
|
||||
const marker = L.circleMarker([d.value.source_lat, d.value.source_long], {
|
||||
color: "#000",
|
||||
fillColor: colors(d.value.amount),
|
||||
fillOpacity: 1,
|
||||
radius: 1.25,
|
||||
weight: 0,
|
||||
className: "marker",
|
||||
});
|
||||
collection_array.push(marker);
|
||||
});
|
||||
|
||||
const transportation_lines = group(
|
||||
csv_tr,
|
||||
(d) => d["source location name"],
|
||||
(d) => d["destination location name"]
|
||||
);
|
||||
|
||||
//Plot the transportation lines
|
||||
const transport_array = [];
|
||||
transportation_lines.forEach(function (d1) {
|
||||
d1.forEach(function (d2) {
|
||||
const object = d2[0];
|
||||
const line = L.polyline(
|
||||
[
|
||||
[object["source latitude (deg)"], object["source longitude (deg)"]],
|
||||
[
|
||||
object["destination latitude (deg)"],
|
||||
object["destination longitude (deg)"],
|
||||
],
|
||||
],
|
||||
{
|
||||
color: "#666",
|
||||
stroke: true,
|
||||
weight: 0.5,
|
||||
opacity: Math.max(0.1, 0.5 / d1.size),
|
||||
}
|
||||
);
|
||||
transport_array.push(line);
|
||||
});
|
||||
});
|
||||
|
||||
const plants = L.layerGroup(plants_array);
|
||||
const cities = L.layerGroup(collection_array);
|
||||
const transport = L.layerGroup(transport_array);
|
||||
|
||||
const baseMaps = {
|
||||
"Open Street Map": base,
|
||||
};
|
||||
const overlayMaps = {
|
||||
Plants: plants,
|
||||
"Collection Centers": cities,
|
||||
"Transportation Lines": transport,
|
||||
};
|
||||
|
||||
cities.on({
|
||||
add: function () {
|
||||
cities.eachLayer((layer) => layer.bringToBack());
|
||||
},
|
||||
});
|
||||
|
||||
transport.on({
|
||||
add: function () {
|
||||
plants.eachLayer((layer) => layer.bringToFront());
|
||||
},
|
||||
});
|
||||
|
||||
function setHeight() {
|
||||
let mapDiv = document.getElementById("map");
|
||||
mapDiv.style.height = `${+mapDiv.offsetWidth * 0.55}px`;
|
||||
}
|
||||
|
||||
//$(window).resize(setHeight);
|
||||
|
||||
setHeight();
|
||||
const map = L.map("map", {
|
||||
layers: [base, plants],
|
||||
}).setView([37.8, -96.9], 4);
|
||||
|
||||
const svg6 = d3.select(map.getPanes().overlayPane).append("svg");
|
||||
svg6.append("g").attr("class", "leaflet-zoom-hide");
|
||||
|
||||
L.control.layers(baseMaps, overlayMaps).addTo(map);
|
||||
}
|
||||
|
||||
const MapBlock = (props) => {
|
||||
const [filesFound, setFilesFound] = useState(false);
|
||||
|
||||
const fetchFiles = () => {
|
||||
const file_prefix = `${SERVER_URL}/jobs/${props.job}/case`;
|
||||
d3.csv(`${file_prefix}_plants.csv`).then((csv_plants) => {
|
||||
d3.csv(`${file_prefix}_tr.csv`).then((csv_tr) => {
|
||||
setFilesFound(true);
|
||||
drawMap(csv_plants, csv_tr, file_prefix);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// Fetch files periodically from the server
|
||||
useEffect(() => {
|
||||
fetchFiles();
|
||||
if (!filesFound) {
|
||||
const interval = setInterval(() => {
|
||||
fetchFiles();
|
||||
}, 1000);
|
||||
return () => clearInterval(interval);
|
||||
}
|
||||
}, [filesFound]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Section title="Map" />
|
||||
<Card>
|
||||
<div id="map">
|
||||
<div className="nodata">No data available</div>
|
||||
</div>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MapBlock;
|
||||
@ -0,0 +1,28 @@
|
||||
import React from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import Footer from "../common/Footer";
|
||||
import Header from "../common/Header";
|
||||
import LogBlock from "./LogBlock";
|
||||
import FilesBlock from "./FilesBlock";
|
||||
import MapBlock from "./MapBlock";
|
||||
|
||||
const SolverPage = () => {
|
||||
const params = useParams();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header title="Solver"></Header>
|
||||
<div id="contentBackground">
|
||||
{" "}
|
||||
<div id="content">
|
||||
<LogBlock job={params.job_id} />
|
||||
<FilesBlock job={params.job_id} />
|
||||
<MapBlock job={params.job_id} />
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SolverPage;
|
||||
@ -1,30 +0,0 @@
|
||||
using PackageCompiler
|
||||
using TOML
|
||||
using Logging
|
||||
|
||||
Logging.disable_logging(Logging.Info)
|
||||
|
||||
mkpath("build")
|
||||
|
||||
printstyled("Generating precompilation statements...\n", color = :light_green)
|
||||
run(`julia --project=. --trace-compile=build/precompile.jl $ARGS`)
|
||||
|
||||
printstyled("Finding dependencies...\n", color = :light_green)
|
||||
project = TOML.parsefile("Project.toml")
|
||||
manifest = TOML.parsefile("Manifest.toml")
|
||||
deps = Symbol[]
|
||||
for dep in keys(project["deps"])
|
||||
if "path" in keys(manifest[dep][1])
|
||||
printstyled(" skip $(dep)\n", color = :light_black)
|
||||
else
|
||||
println(" add $(dep)")
|
||||
push!(deps, Symbol(dep))
|
||||
end
|
||||
end
|
||||
|
||||
printstyled("Building system image...\n", color = :light_green)
|
||||
create_sysimage(
|
||||
deps,
|
||||
precompile_statements_file = "build/precompile.jl",
|
||||
sysimage_path = "build/sysimage.so",
|
||||
)
|
||||
@ -0,0 +1,116 @@
|
||||
println("Initializing...")
|
||||
|
||||
using Logging
|
||||
using JSON
|
||||
using JuMP
|
||||
using HiGHS
|
||||
using RELOG
|
||||
|
||||
function solve(root, filename)
|
||||
ref_file = "$root/$filename"
|
||||
optimizer = optimizer_with_attributes(
|
||||
HiGHS.Optimizer,
|
||||
"time_limit" => parse(Float64, ENV["RELOG_TIME_LIMIT_SEC"]),
|
||||
)
|
||||
ref_solution, ref_model = RELOG.solve(
|
||||
ref_file,
|
||||
heuristic = true,
|
||||
optimizer = optimizer,
|
||||
lp_optimizer = HiGHS.Optimizer,
|
||||
return_model = true,
|
||||
marginal_costs = true,
|
||||
)
|
||||
Libc.flush_cstdio()
|
||||
flush(stdout)
|
||||
sleep(1)
|
||||
|
||||
if length(ref_solution) == 0
|
||||
return
|
||||
end
|
||||
RELOG.write_products_report(ref_solution, replace(ref_file, ".json" => "_products.csv"))
|
||||
RELOG.write_plants_report(ref_solution, replace(ref_file, ".json" => "_plants.csv"))
|
||||
RELOG.write_plant_outputs_report(
|
||||
ref_solution,
|
||||
replace(ref_file, ".json" => "_plant_outputs.csv"),
|
||||
)
|
||||
RELOG.write_plant_emissions_report(
|
||||
ref_solution,
|
||||
replace(ref_file, ".json" => "_plant_emissions.csv"),
|
||||
)
|
||||
RELOG.write_transportation_report(ref_solution, replace(ref_file, ".json" => "_tr.csv"))
|
||||
RELOG.write_transportation_emissions_report(
|
||||
ref_solution,
|
||||
replace(ref_file, ".json" => "_tr_emissions.csv"),
|
||||
)
|
||||
|
||||
isdir("$root/scenarios") || return
|
||||
for filename in readdir("$root/scenarios")
|
||||
scenario = "$root/scenarios/$filename"
|
||||
endswith(filename, ".json") || continue
|
||||
|
||||
sc_solution = RELOG.resolve(
|
||||
ref_model,
|
||||
scenario,
|
||||
optimizer = optimizer,
|
||||
lp_optimizer = HiGHS.Optimizer,
|
||||
)
|
||||
if length(sc_solution) == 0
|
||||
return
|
||||
end
|
||||
RELOG.write_plants_report(sc_solution, replace(scenario, ".json" => "_plants.csv"))
|
||||
RELOG.write_products_report(
|
||||
sc_solution,
|
||||
replace(scenario, ".json" => "_products.csv"),
|
||||
)
|
||||
RELOG.write_plant_outputs_report(
|
||||
sc_solution,
|
||||
replace(scenario, ".json" => "_plant_outputs.csv"),
|
||||
)
|
||||
RELOG.write_plant_emissions_report(
|
||||
sc_solution,
|
||||
replace(scenario, ".json" => "_plant_emissions.csv"),
|
||||
)
|
||||
RELOG.write_transportation_report(
|
||||
sc_solution,
|
||||
replace(scenario, ".json" => "_tr.csv"),
|
||||
)
|
||||
RELOG.write_transportation_emissions_report(
|
||||
sc_solution,
|
||||
replace(scenario, ".json" => "_tr_emissions.csv"),
|
||||
)
|
||||
end
|
||||
end
|
||||
|
||||
function solve_recursive(path)
|
||||
cd(path)
|
||||
|
||||
# Solve instances
|
||||
for (root, dirs, files) in walkdir(".")
|
||||
if occursin(r"scenarios"i, root)
|
||||
continue
|
||||
end
|
||||
for filename in files
|
||||
endswith(filename, ".json") || continue
|
||||
solve(root, filename)
|
||||
end
|
||||
end
|
||||
|
||||
# Collect results
|
||||
results = []
|
||||
for (root, dirs, files) in walkdir(".")
|
||||
for filename in files
|
||||
endswith(filename, "_plants.csv") || continue
|
||||
push!(
|
||||
results,
|
||||
joinpath(replace(root, path => ""), replace(filename, "_plants.csv" => "")),
|
||||
)
|
||||
end
|
||||
end
|
||||
open("output.json", "w") do file
|
||||
JSON.print(file, results)
|
||||
end
|
||||
|
||||
run(`zip -r output.zip .`)
|
||||
end
|
||||
|
||||
solve_recursive(ARGS[1])
|
||||
@ -0,0 +1,65 @@
|
||||
import HTTP
|
||||
import JSON
|
||||
using Random
|
||||
|
||||
const ROUTER = HTTP.Router()
|
||||
const PROJECT_DIR = joinpath(dirname(@__FILE__), "..", "..")
|
||||
const STATIC_DIR = joinpath(PROJECT_DIR, "relog-web", "build", "static")
|
||||
const JOBS_DIR = joinpath(PROJECT_DIR, "jobs")
|
||||
|
||||
function serve_file(req::HTTP.Request, filename)
|
||||
if isfile(filename)
|
||||
open(filename) do file
|
||||
return HTTP.Response(200, read(file))
|
||||
end
|
||||
else
|
||||
return HTTP.Response(404)
|
||||
end
|
||||
end
|
||||
|
||||
function submit(req::HTTP.Request)
|
||||
# Generate random job id
|
||||
job_id = lowercase(randstring(12))
|
||||
|
||||
# Create job folder
|
||||
job_path = joinpath(JOBS_DIR, job_id)
|
||||
mkpath(job_path)
|
||||
|
||||
# Write JSON file
|
||||
case = JSON.parse(String(req.body))
|
||||
open(joinpath(job_path, "case.json"), "w") do file
|
||||
JSON.print(file, case)
|
||||
end
|
||||
|
||||
# Run job
|
||||
run(
|
||||
`bash -c "(julia --project=$PROJECT_DIR $PROJECT_DIR/src/web/run.jl $job_path 2>&1 | tee $job_path/solve.log) >/dev/null 2>&1 &"`,
|
||||
)
|
||||
|
||||
response = Dict("job_id" => job_id)
|
||||
return HTTP.Response(200, body = JSON.json(response))
|
||||
end
|
||||
|
||||
function get_index(req::HTTP.Request)
|
||||
return serve_file(req, joinpath(STATIC_DIR, "..", "index.html"))
|
||||
end
|
||||
|
||||
function get_static(req::HTTP.Request)
|
||||
return serve_file(req, joinpath(STATIC_DIR, req.target[9:end]))
|
||||
end
|
||||
|
||||
function get_jobs(req::HTTP.Request)
|
||||
return serve_file(req, joinpath(JOBS_DIR, req.target[7:end]))
|
||||
end
|
||||
|
||||
HTTP.@register(ROUTER, "GET", "/static", get_static)
|
||||
HTTP.@register(ROUTER, "GET", "/jobs", get_jobs)
|
||||
HTTP.@register(ROUTER, "POST", "/submit", submit)
|
||||
HTTP.@register(ROUTER, "GET", "/", get_index)
|
||||
|
||||
function web(host = "127.0.0.1", port = 8080)
|
||||
@info "Launching web interface: http://$(host):$(port)/"
|
||||
Base.exit_on_sigint(false)
|
||||
HTTP.serve(ROUTER, host, port)
|
||||
Base.exit_on_sigint(true)
|
||||
end
|
||||
Loading…
Reference in new issue