Refactored the onAddPlant and onAddProduct setup, created typesafe interfaces for defaultPlant and defaultProduct, imported idex.css as well

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "RELOG",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

web/src/components/CaseBuilder/CaseBuilder.tsx

@@ -10,8 +10,9 @@ import "tabulator-tables/dist/css/tabulator.min.css";
 import "../Common/Forms/Tables.css";
 import Footer from "./Footer";
 import React, { useState } from "react";
-import {CircularData} from "./CircularData.ts";
-
+import {CircularData} from "./CircularData";
+import { defaultPlant, defaultProduct } from "./defaults";
+import "../../index.css";
 declare global {
     interface Window {
       nextX: number;
@@ -41,9 +42,9 @@ const CaseBuilder = () => {
       window.nextX += 150;
 
     }
-    return [window.nextX, window.nextY]
+    return [window.nextX, window.nextY];
 
-  }
+  };
 
   const promptName = (prevData:CircularData): string | undefined => {
     const name = prompt("Name");
@@ -57,23 +58,51 @@ const CaseBuilder = () => {
     setCircularData((prevData) => {
       const id = promptName(prevData);
       if (id ==undefined) return prevData;
-      const newData = { ...prevData};
       const [x,y] = randomPosition();
-      newData.plants[id] = {
-        ...defaultPlant,
-        x: x,
-        y: y,
-        
-      };
-      onSave(newData);
-      return newData;
+      const newData: CircularData = {
+         ...prevData,
+         plants: {
+          ...prevData.plants,
+          [id]: {
+            ...defaultPlant,
+            x,
+            y,
+          }
+         }
+        };
+     return newData;
     });
-  }
+  };
+
+  const onAddProduct = () => {
+    setCircularData((prevData) => {
+      const id = promptName(prevData);
+      if (id ==undefined) return prevData;
+      const [x,y] = randomPosition();
+      const newData: CircularData = {
+         ...prevData,
+         products: {
+          ...prevData.products,
+          [id]: {
+            ...defaultProduct,
+            x,
+            y,
+          }
+         }
+        };
+     return newData;
+    });
+
+  };
 
   return (
     <div>
       <Header onClear={onClear} onSave={onSave} onLoad={onLoad} />
-      <div className="content"></div>
+      <div className="content">
+        <div id="contentBackground"> 
+  <div id="content"> </div> 
+</div> 
+      </div>
       <Footer />
     </div>
   );

web/src/components/CaseBuilder/defaults.ts

@@ -0,0 +1,72 @@
+import { CircularPlant, CircularProduct } from "./CircularData";
+
+export interface DefaultProduct extends CircularProduct{
+    "initial amounts": Record<string, string>;
+    "acquisition cost ($/tonne)": string;
+    "disposal cost ($/tonne)": string;
+  "disposal limit (tonne)": string;
+  "disposal limit (%)": string;
+  "transportation cost ($/km/tonne)": string;
+  "transportation energy (J/km/tonne)": string;
+  "transportation emissions (tonne/km/tonne)": Record<string,string>;
+  x: number;
+  y: number;
+}
+
+export interface DefaultPlant extends CircularPlant{
+    locations: Record<string,string>;
+  "outputs (tonne/tonne)": Record<string,string>;
+  "disposal cost ($/tonne)": Record<string,string>;
+  "disposal limit (tonne)": Record<string,string>;
+  "emissions (tonne/tonne)": Record<string,string>;
+  storage: {
+    "cost ($/tonne)": string;
+    "limit (tonne)": string;
+  };
+  "maximum capacity (tonne)": string;
+  "minimum capacity (tonne)": string;
+  "opening cost (max capacity) ($)": string;
+  "opening cost (min capacity) ($)": string;
+  "fixed operating cost (max capacity) ($)": string;
+  "fixed operating cost (min capacity) ($)": string;
+  "variable operating cost ($/tonne)": string;
+  "energy (GJ/tonne)": string;
+  x: number;
+  y: number;
+}
+
+export const defaultProduct: DefaultProduct = {
+"initial amounts": {},
+  "acquisition cost ($/tonne)": "0",
+  "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 defaultPlant: 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,
+};

web/src/index.css

@@ -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;
+}

web/tsconfig.json

@@ -29,7 +29,8 @@
     "noUncheckedIndexedAccess": true,
     "noUnusedLocals": false,
     "noUnusedParameters": false,
-    "checkJs": true
+    "checkJs": false,
+    "allowImportingTsExtensions": true
   },
   "include": ["src"]
 }