Step 3: Application-specific set-up

Install frontend dependencies

There are several libraries that we are going to use soon in the frontend application.

To install them, run the following command in the console (inside the frontend folder) or in the Visual Studio Code terminal:

npm install react-bootstrap bootstrap three @types/three @react-three/fiber @react-three/drei axios react-google-charts react-split

Update the CSS

Let’s add the CSS styles that we are going to use.

Open the index.css file and replace its contents with the following code:

index.css
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body { 
  height: 100%; /* parent height */
  margin: 0; /* remove page margin */
 }

h1 {
  font-size: 2rem;
  padding: 20px;
}
h2 {
  font-size: 1.5rem;
  padding: 20px;
}
/* TABLES */
td {
  padding: 10px;
}
th {
  font-weight: bold;
  padding: 10px;
}
table {
  width: 100%;
  user-select: none;
}
thead {
  background-color: #ebebeb;
  position: sticky; 
  top: 0;
}
/* BUTTONS */
.large-button {
  min-height: 2rem;
  min-width: 6rem;
  margin: 5px;
  font-size: 0.8rem;
  border-radius: 0.3rem;
  border: none;
}
.deep-blue {
  background-color: #0065ad;
  color: white;
}
.deep-blue:disabled {
  background-color: #b6b6b6;
  color: white;
}
.yellow {
  background-color: #ffa500;
  color: black;
}
.yellow:disabled {
  background-color: #b6b6b6;
  color: white;
}

/* PANELS */
.animation-panel {
  height: 350px;
}
.App {
  font-family: sans-serif;
  text-align: center;
}
.error-message{
position: absolute;
  top: 3px;
  left: 20px;
  z-index: 1;
}

.gutter {
  background-color: #eee;
  background-repeat: no-repeat;
  background-position: 50%;
}
.gutter.gutter-vertical {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
  cursor: row-resize;
}

#root {
  margin: 0px;
  padding: 5px;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(500px, 3fr);
  grid-template-rows: min-content min-content auto;
  grid-template-areas: 
  "scenarios          mainpanel"
  "simulationcontrols mainpanel"
  "statistics         mainpanel";
  row-gap: 2px;
  height: 100%;
}

.box-scenarios {
  grid-area: scenarios;
  border-bottom: 1px dashed rgb(206, 206, 206);
  padding: 3px;
}

.box-simulationcontrols {
  grid-area: simulationcontrols;
  border-bottom: 1px dashed rgb(206, 206, 206);
  padding: 3px;
}

.box-statistics {
  grid-area: statistics;
  padding: 3px;
}

.box-mainpanel {
  grid-area: mainpanel;
  padding: 3px;
  border-left: 1px dashed rgb(206, 206, 206);
}

Add a new import statement to the index.js file:

index.js, a new import statement
import "bootstrap/dist/css/bootstrap.min.css";

Now the frontend application has all the necessary dependencies and settings.

Set the backend API address

In the 'frontend' folder, create a new .env file:

.env file
REACT_APP_API_URL=http://localhost:8080

This file contains the variables with environment-specific values that will be available to our frontend application. You’ll only need to change their values here, and the rest of the frontend code should use these values instead of any hard-coded ones.

utils.js file

Create a new src/utils.js file and put this code into it:

utils.js
export const formatDateTime = (t) => {
  if (t) {
    return t.replace("T", " ");
  }
  return "";
};


export const numberWithSpaces = (number) => {
  let parts = number.toString().split(".");
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, " ");
  return parts.join(".");
};

This file contains the code of utility methods shared by application components.