Old WRENCH Pedagogic Modules Documentation

This Page is Old and kept for historical reasons only

WRENCH Pedagogic Modules

General Overview
The Jekyll Site
WRENCH Simulations
The Visualization Web App
Docker Containers

General Overview

Components

WRENCH simulations
- simulations that provide empirical data for each module
Jekyll website
- static website that contains each lesson, questions, background information, glossary, figures, etc.
visualization web app
- interactive dashboard that is used as students go through certain modules
simple data collection web server
- whenever simulations are run through the visualization web app, usage metrics are sent to this data collection web server

Directory Structure

├── LICENSE
├── data_server                         <------ simple data collection web server   
│   ├── Dockerfile
│   ├── app.js
│   ├── data_file.json
│   ├── keys.js
│   ├── node_modules
│   ├── package-lock.json
│   └── package.json
├── docs                                <------ jekyll website
│   ├── 404.html
│   ├── LICENSE.md
│   ├── README.md
│   ├── _activities
│   ├── _config.yml
│   ├── _config_dev.yml
│   ├── _data
│   ├── _includes
│   ├── _layouts
│   ├── _posts
│   ├── _site
│   ├── atom.xml
│   ├── glossary.md
│   ├── index.md
│   ├── original_index.html
│   ├── public
│   └── run_locally.sh
├── simulations                         <------ WRENCH simulations
│   ├── Dockerfile
│   ├── activity_0_network_primer
│   ├── activity_1_getting_started
│   ├── activity_2_parallelism
│   └── activity_3_case_study
└── visualization                       <------ visualization web app
    ├── Dockerfile
    ├── app.js
    ├── keys.js
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── passport-setup.js
    ├── public
    └── views

How do users interact with these modules?

In general, users will go through these modules by doing the following:

Go to the static website hosted at https://wrench-project.org/wrench-pedagogic-modules/
Select an activity from the left hand side menu.
Read through the content provided. Typically this content comprises background information on the topic at hand and a description of some distributed computing scenario.
Answer the questions in the activity.
- While answering these questions, users may be asked to run the simulations we provide in order to verify their answers to the questions.
- Simulations may be run in the terminal through a provided Docker container.
- Simulations may be run through the browser using the visualization web app (also packaged using Docker).
Gain a better understanding of the topic being covered and achieve learning objectives.

How does one add new activities?

Adding new activities to the the current set typically involves the following:

Selecting a distributed computing concept to explore.
Add the following to a new page on the website.
- learning objectives
- background information on the concept being taught
- a description of the distributed computing scenario used to teach the chosen concept
- instructions on how to run simulations for this lesson
- guided questions that help users achieve learning objectives
- figures that supplement the background information, distributed computing scenario, and the questions
Add relevant vocabulary to the glossary on the website
developing one or more WRENCH simulations that serve as a ground truth to the distributed computing scenarios explained in the lesson
creating Docker containers of the simulations if they are to be run from the terminal
developing a new section in the visualization web app, which involves the following:
- writing backend Javascript code using Node/Express
- writing frontend Javascript code
  - D3 for interactive visualizations
  - HTML/Embedded Javascript for page content
  - CSS and Bootstrap for styling
- rebuilding the Docker image for this web app

Note that some activities or simple lessons may only require adding a new page to the website while others may require everything that is mentioned above.

The Jekyll Site

The Jekyll site uses the Lanyon layout. More information on this can be found at https://github.com/poole/lanyon. You must have Jekyll installed before you can test the site out locally. Installation instructions for your OS can be found at https://jekyllrb.com/docs/installation/.

Directory Structure

The Jekyll site (https://wrench-project.org/wrench-pedagogic-modules/), is located at wrench-pedagogic-modules/docs. We use this path as Github publishes docs folder of the master branch of this repo to the URL above. Whenever you make changes, and push to the remote master branch, Github will build the static site and publish it.

docs
├── 404.html
├── LICENSE.md
├── README.md
├── _activities                             <------ content/lessons/activities
│   ├── activity_1.md
│   ├── activity_2.md
│   ├── activity_3.md
│   ├── primer_on_file_transfer_times.md
│   ├── primer_on_workflow_executions.md
│   └── what_is_this_about.md
├── _config.yml                             <------ main configuration file
├── _config_dev.yml
├── _data
│   └── glossary.yml                        <------ new vocabulary
├── _includes
│   ├── head.html
│   └── sidebar.html
├── _layouts
│   ├── default.html
│   ├── page.html
│   └── post.html
├── _posts
│   ├── 2013-12-31-whats-jekyll.md
│   ├── 2014-01-01-example-content.md
│   └── 2014-01-02-introducing-lanyon.md
├── _site
│   ├── 2013
│   ├── 2014
│   ├── 404
│   ├── LICENSE.md
│   ├── README.md
│   ├── activities
│   ├── atom.xml
│   ├── glossary
│   ├── index.html
│   ├── original_index
│   ├── public
│   └── run_locally.sh
├── atom.xml
├── glossary.md
├── index.md                                <------ home page
├── original_index.html
├── public                                  <------ any assets
│   ├── Vagrantfile
│   ├── apple-touch-icon-144-precomposed.png
│   ├── css
│   ├── favicon.ico
│   ├── img
│   └── scripts
└── run_locally.sh                          <------ script to build and run locally for development

Adding New Activities

Adding a new activity is fairly straightforward. The following steps will explain how to add, say, "Activity 4: A New Activity" to the current set of activities/ lessons.

Steps

In wrench-pedagogic-modules/docs/_activities/, add a new file called activity_4.md. A mix of markdown and HTML can be used in this file.
The content of this file should initially look like this:

---
layout: page
title: <title>
order: <number>
usemathjax: <true or false>
---

<markdown and HTML content goes here>

The header of this file needs to contain the following information:
- layout: page: this should always be page when adding markdown files to _activities
- title: <title>: the title that will appear on the top of the page and the sidebar (this is automatically added to the sidebar)
- order: <number>: every page can be given a number that is used to position the title on the sidebar (if you have 3 pages, with order 0,1,2) and you wanted this page to appear after all the other pages on the sidebar except the glossary then order would be set to 3
- usemathjax: <true or false>: set this to true or false if Latex math formulas will be used in this lesson
"Activity 4: A New Activity" will be the 4th activity, and will contain math formulas, therefore the markdown file should look like this:

---
layout: page
title: 'A New Activity'
order: 4
usemathjax: true
---

<markdown and HTML content goes here>

The new activity needs to contain a figure. For this site, we use scalable vector graphics (SVG) figures as they render nicer than other image formats. To add a figure, you must:

Create an SVG figure using Draw.io.
After your figure has been created, export it by following the "Export With Your Changes" instructions outlined here.
Say that this figure has been named figure_1.svg. Create the directory wrench-pedagogic-modules/docs/public/img/activity_4 and place figure_1.svg in that directory.

Add the following line to activity_4.md (class should always be figure):

the css class figure is defined in wrench-pedagogic-modules/docs/public/css/custom.css

<object class="figure" type="image/svg+xml" data="{{ site.baseurl }}/public/img/activity_4/figure_1.svg">Figure 1</object>

Say that we have added some new concept/vocabulary to this activity. We must then provide an additional reference to it in the glossary section. To do this, add the word and its definition to wrench-pedagogic-modules/docs/_data/glossary.yml. This glossary is sorted alphabetically when the site is built, therefore we keep items in this file ordered by the activity they belong to for simplicity.
Say that we have added questions that user's must answer as part of the activity. Answers to these questions must be written and placed in https://github.com/wrench-project/wrench-pedagogic-modules-answers for reference. If these answers change due to underlying changes in the WRENCH source code, the answers must be updated.
View your changes locally before pushing them to the server by navigating to the top level project directory (wrench-pedagogic-modules/docs) and running the command ./run_locally.sh. This will generate the site, and serve it at http://127.0.0.1:4000/.

WRENCH Simulations

WRENCH simulations must be developed for most activities so that users may run the simulation directly from a Docker container or through the visualization web app. These simulations are placed in wrench-pedagogic-modules/simulations.

Directory Structure

simulations
├── Dockerfile                 <------ contains specified version of WRENCH installation
├── activity_0_network_primer
│   ├── CMakeLists.txt         <------ file to generate Makefile
│   ├── Dockerfile             <------ Docker file used to create an image of this simulator
│   ├── include                <------ header files
│   └── src                    <------ source code
├── activity_1_getting_started
│   ├── CMakeLists.txt
│   ├── Dockerfile
│   ├── build.sh
│   ├── include
│   ├── src
│   └── workflow_graph.json
├── activity_2_parallelism
│   ├── CMakeLists.txt
│   ├── build.sh
│   ├── include
│   └── src
└── activity_3_case_study
    ├── CMakeLists.txt
    ├── case_study_data.png
    ├── include
    ├── run_options.py
    └── src

Adding New Simulations

When adding new simulations, source code should be placed in wrench-project/wrench-pedagogic-modules/simulations/<activity_name>, where <activity_name> is a directory you must create.

More than likely you will need the simulations to produce output that will be displayed to the user in some form. This can be done by adding any of the following functions to the end of your main simulation source file (after calling simulation.launch()).

void dumpWorkflowExecutionJSON(Workflow *workflow, std::string file_path, bool generate_host_utilization_layout = false);
void dumpWorkflowGraphJSON(wrench::Workflow *workflow, std::string file_path);
void dumpHostEnergyConsumptionJSON(std::string file_path);
void dumpPlatformGraphJSON(std::string file_path);

The Visualization Web App

The visualization web app is a dashboard interface that lets users run WRENCH simulations through the browser and presents data obtained from those simulations in the form of tables and interactive SVG graphs. Currently, this web app is meant to run in a Docker container, locally on every user's own computer. The backend is built using Node.js and Express.js. The frontend is built using HTML, CSS, Bootstrap, Embedded Javascript (EJS), and D3.js. The point of this web app is to allow users to easily visualize data output from WRENCH simulations.

Directory Structure

visualization
├── keys.js                       <------ NOT versioned, contains secret information
├── Dockerfile
├── node_modules                  <------ *yes, these are versioned
├── app.js                        <------ main Node/Express backend code
├── package-lock.json
├── package.json
├── passport-setup.js
├── public                        <------ static assets
│   ├── img                       <------ images
│   │   ├── activity_1_cyber_infrastructure.svg
│   │   ├── activity_2_cyber_infrastructure.svg
│   │   ├── google_signin.png
│   │   ├── wrench_logo.png
│   │   └── wrench_logo.svg
│   ├── libs                      <------ javascript and css libraries
│   │   ├── bootstrap.min.css
│   │   ├── bootstrap.min.js
│   │   ├── d3.min.js
│   │   ├── dagre-d3.min.js
│   │   └── jquery.js
│   ├── scripts                   <------ any javascript code we've written
│   │   ├── activity_1.js
│   │   ├── activity_2.js
│   │   ├── graphs.js
│   │   └── util.js
│   └── stylesheets               <------ css file(s)
│       └── style.css
└── views                         <------ EJS files
    ├── activity_1.ejs
    ├── activity_2.ejs
    ├── index.ejs
    └── partials                  <------ more EJS files (these are basically reusable templates)
        ├── footer.ejs
        ├── header.ejs
        ├── host_utilization_graph.ejs
        ├── inputs.ejs
        ├── simulation_output.ejs
        ├── simulation_parameters_form_end.ejs
        ├── simulation_parameters_form_start.ejs
        ├── workflow_execution_data.ejs
        └── workflow_execution_graph.ejs

How It Works

When users are instructed to use the visualization app, they are given instructions similar to the following:

Open a terminal, and run docker pull wrenchproject/wrench-pedagogic-modules:activity-visualization
Run docker container run -d -p 3000:3000 wrenchproject/wrench-pedagogic-modules:activity-visualization
Open a browser, and navigate to localhost:3000
Sign in with GMAIL.
Select Activity-1
(While reading through/answering questions from the jekyll site) Enter some input parameters into the page served by the web app. Click Run Simulation to run the simulation with those parameters and display data in the browser window.

We explain what happens at each corresponding step, in more detail:

The entire web app, including the WRENCH simulations it uses, is pre-packaged into a Docker image (see the next section for more information on this) and hosted in our repository at https://cloud.docker.com/u/wrenchproject/repository/docker/wrenchproject/wrench-pedagogic-modules. The user downloads this image onto their computer. Rather than having users download all the dependencies necessary to use the web app, they only need to download our Docker image.
The user runs the command docker container run -d -p 3000:3000 wrenchproject/wrench-pedagogic-modules:activity-visualization, which starts a Docker container using that image that was just downloaded. The image starts up our Node/Express web app server (at visualization/app.js), which runs on port 3000 in the container. The command forwards everything from port 3000 on the host (the user's computer) to port 3000 in the container.
The user goes to localhost:3000, which is the homepage for the web app. Here they are prompted to log in using a GMAIL account. Any page at localhost:3000/* is served from Node running in the container.
The user signs in with their GMAIL account. Here we are using Google OAuth2.0 and Passport.js (http://www.passportjs.org/docs/google/) to take care of this "log-in". There are several things to note about our use of OAuth and Passport.js:
- We use it only to obtain the email of the user that is using our visualization web app so that we can track usage metrics.
- A 24-hour session cookie is stored in their browser after they "log-in" with Google, so that a user need not keep logging in.
- When a user "logs in" with Google, we do not have a database running in the Docker container to keep track of what users are logged in. Recall that each person using this web app has their own little web server, so this isn't a web server in the traditional sense.
- If in the future this visualization app is hosted on an actual server, then the "sign-in with Google" feature needs to be fixed.
After the user has signed in, they are shown a menu of the available activities. At this point, the web app has just served the file visualization/views/index.ejs. Let's say the user has selected Activity-1: Parallelism from the list. A GET request is made to http://localhost:3000/activity_1, and visualization/app.js lines 68-72 runs.

68 // display activity 1 visualization route
69 app.get("/activity_1", authCheck, function(req, res) {
70     res.render("activity_1", {workflow_graph_json: JSON.parse(fs.readFileSync(__dirname + "/../simulations/activity_1_getting_started/workflow_graph.json")),
71                                 cyber_infrastructure_svg: fs.readFileSync(__dirname + "/public/img/activity_1_cyber_infrastructure.svg")});
72 });

Now, visualization/views/activity_1.ejs is served and rendered on the browser screen. Note that we are sending back a response with some variables. This is what will be embedded into activity_1.ejs. 6. The user enters some parameters into the form that says Enter Simulation Parameters, then clicks Run Simulation. A POST request is sent to localhost:3000/run/activity_1 along with the values entered into the form. This POST request is sent asynchronously using AJAX so that the page doesn't reload (the page looks more like an interactive dashboard this way). The source code that runs when Run Simulation is clicked, is located in visualization/public/scripts/activity_1.js. This POST request is made in lines 49- 85 as shown here:

49     $('#simulator-form').on('submit', function(event) {
50         // we don't want the page reloading, so things look dynamic (this will be nice when we use d3's transitions)
51         event.preventDefault();
52         disableRunSimulationButton();
53
54         // Display the chart element, which will enlarge the workflow execution block
55         $('.chart').css('display', 'block');
56
57         // After each submission, remove the "old" chart, because we will generate a new one
58         $('#workflow-execution-chart > svg').remove();
59
60         // Upon submission of the form, a POST request containing the user's desired parameters
61         // is sent to the node server, where the simulation will be executed with those parameters.
62         // Then a response with simulation data is received. The data is parsed, and rendered on the
63         // screen.
64         $.ajax({
65             url: '/run/activity_1',
66             method: 'POST',
67             contentType: 'application/json',
68             data: JSON.stringify(
69                 {
70                     simulator_number: $('#simulator-form input:radio:checked').val(),
71                     link_bandwidth: $('#link-bandwidth').val()
72                 }),
73
74                 success: function(response) {
75
76                     // Add the new simulation output into the "Simulation Output" section
77                     $("#simulation-output").empty()
78                         .append(response.simulation_output);
79
80                     generate_workflow_execution_graph(response.task_data);
81
82                     populateWorkflowTaskDataTable(response.task_data);
83                 }
84         });
85     });

Next, Node/Express running in the Docker container receives the POST request and lines 75-151 of visualization/app.js runs.

74 // execute activity 1 simulation route
75 app.post("/run/activity_1", authCheck, function(req, res) {
76     const PATH_PREFIX = __dirname.replace("visualization", "simulations/activity_1_getting_started/");
77
78     const SIMULATOR = (req.body.simulator_number == 1 ? "simulator_remote_storage" : "simulator_local_storage");
79     const EXECUTABLE = PATH_PREFIX + SIMULATOR;
80     const LINK_BANDWIDTH = req.body.link_bandwidth;
81
82     // additional WRENCH arguments that filter simulation output (We only want simulation output from the WMS in this activity)
83     const LOGGING = [
84         "--log=root.thresh:critical",
85         "--log=wms.thresh:debug",
86         "--log=simple_wms.thresh:debug",
87         "--log=simple_wms_scheduler.thresh:debug",
88         "--log='root.fmt:[%d][%h:%t]%e%m%n'"
89     ];
90
91     const SIMULATION_ARGS = [LINK_BANDWIDTH].concat(LOGGING);
92     const RUN_SIMULATION_COMMAND = [EXECUTABLE].concat(SIMULATION_ARGS).join(" ");
93
94     console.log("\nRunning Simulation");
95     console.log("===================");
96     console.log("Executing command: " + RUN_SIMULATION_COMMAND);
97     var simulation_process = spawnSync(EXECUTABLE, SIMULATION_ARGS);
98
99     if (simulation_process.status != 0) {
100       console.log("Something went wrong with the simulation. Possibly check arguments.");
101       console.log(simulation_process.stderr.toString());
102     } else {
103       var simulation_output = simulation_process.stderr.toString();
104       console.log(simulation_output);
105
106       /**
107        * Log the user running this simulation along with the
108        * simulation parameters to the data server.
109        */
110       request({
111           method: "POST",
112           uri: keys.dataServer.uri,
113           json: {
114             "key": keys.dataServer.key,
115             "data": {
116               "user": req.user,
117               "time": Math.round(new Date().getTime() / 1000),  // unix timestamp
118               "activity": 1,
119               "simulator": SIMULATOR,
120               "link_bandwidth": LINK_BANDWIDTH
121             }
122           }
123         },
124          function(error, response, body) {
125            if (!error && response.statusCode == 201) {
126              console.log("sent POST request to data_server");
127            } else {
128              console.log(error);
129            }
130          }
131       );
132
133       /**
134        * The simulation output uses ansi colors and we want these colors to show up in the browser as well.
135        * Ansi up will take each line, make it into a <span> element, and edit the style so that the text color
136        * is whatever the ansi color was. Then the regular expression just adds in <br> elements so that
137        * each line of output renders on a separate line in the browser.
138        *
139        * The simulation output and the workflowtask data are sent back to the client (see public/activity_1.js)
140        */
141       var find = "</span>";
142       var re = new RegExp(find, "g");
143
144       res.json({
145           "simulation_output": ansi_up.ansi_to_html(simulation_output).replace(re, "<br>" + find),
146           "task_data": JSON.parse(fs.readFileSync(PATH_PREFIX + "workflow_data.json"))
147       });
148
149
150     }
151 });

Here, line 97 runs a WRENCH simulation along with the arguments that were derived from what the user had entered into the form. The calling process (Node/Express app) waits for the WRENCH simulation to finish. The WRENCH simulation writes logs to STDERR and writes a JSON file with simulation data to disk. First, lines 110-131 will send a POST request to our simple data collection server along with the email of the user who ran the simulation, the name of the simulation, and any input parameters that were used. The data collection server appends this information to a JSON file. Next, lines 144-147 sends the WRENCH logs and JSON data back to the browser. At this point, the success callback function from visualization/public/scripts/activity_1.js line 74 fires:

  74               success: function(response) {
  75
  76                     // Add the new simulation output into the "Simulation Output" section
  77                     $("#simulation-output").empty()
  78                         .append(response.simulation_output);
  79
  80                     generateWorkflowExecutionGraph(response.task_data);
  81
  82                     populateWorkflowTaskDataTable(response.task_data);
  83                 }

The functions generateWorkflowExecutionGraph(data) from visualization/public/scripts/graphs.js and populateWorkflowTaskDataTable(data) from visualization/public/scripts/util.js are run. The user is on the same page they had been on when they clicked Run Simulation, however it has now been populated with graphs and data.

Developing Locally

Developing and testing the web app in its current state can be done by:

Obtain the source code: Run git clone https://github.com/wrench-project/wrench-pedagogic-modules.git
Install Node v10.x
- Run sudo apt update && sudo apt install -y curl && curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - && sudo apt-get install -y nodejs
Have WRENCH 1.5dev installed
Navigate to wrench-pedagogic-modules/simulations/activity_1_getting_started and run ./build.sh
Navigate to wrench-pedagogic-modules/simulations/activity_2_parallelism and run ./build.sh
Navigate to wrench-pedagogic-modules/visualization and run node app.js
The web server will be started on port 3000. You can now navigate to localhost:3000

Adding A New Page

Say that a new activity, Activity-4, needs to be created with the visualization web app. There are a number of things that need to be done:

WRENCH simulation(s) must be developed and must produce output JSON file(s).
Frontend: Activity-4 needs to be added to the list of available activities in visualization/views/index.ejs
Frontend: visualization/views/activity_4.ejs needs to be created. The contents of this file will probably resemble that of visualization/views/activity_1.ejs or visualization/views/activity_2.ejs with the exception of Activity-4 specific code and styling.
Frontend: visualization/public/scripts/activity_4.js needs to be created. This file will contain any javascript code used on the page including the AJAX request that is to be made to the Node/Express backend.
Backend: GET route, so that visualization/views/activity_4.ejs can be served
Backend: POST route, so that the WRENCH simulation can be run, and a response will be sent back to the browser

The Data Collection Server

The data collection server which resides on a remote machine is another Node/Express app that only receives POST requests from the visualization web app. It appends to a single JSON file usage metrics it receives.

This is running on dirt02.ics.hawaii.edu and listens on port 3001. The listener process needs to be restarted whenever that host goes down/is upgraded. To do this, go to the data_server directory where there will be the appropriate Dockerfile. From there it is as simple as:

$ docker ps # will display currently running docker containers (if it is down, will be none)
$ docker ps -a # displays all installed docker containers
$ docker start data-server # starts installed docker container

Docker Containers

The Docker images used in these modules are located in the wrenchproject/wrench-pedagogic-modules repository on https://hub.docker.com. Currently, the images are structured as follows:

                                    +-----------------------------------------------+
                                    | wrenchproject/wrench-build:ubuntu-bionic-gcc7 |  
                                    +-----------------------------------------------+
                                                    |
                                                    |  
                                  +------------------------------------------------------+
                                  | wrenchproject/wrench-pedagogic-modules:wrench-1.5dev |
                                  +------------------------------------------------------+
                                         |               |                   |
+---------------------------------------------------+    |                   |
| wrenchproject/wrench-pedagogic-modules:activity-0 |    |                   |
+---------------------------------------------------+    |                   |
                                                         |                   |
                +---------------------------------------------------+        |
                | wrenchproject/wrench-pedagogic-modules:activity-1 |        |
                +---------------------------------------------------+        |
                                                                             |
                                  +---------------------------------------------------------------+
                                  | wrenchproject/wrench-pedagogic-modules:activity-visualization |
                                  +---------------------------------------------------------------+

wrenchproject/wrench-build:ubuntu-bionic-gcc7: contains ubuntu and all dependencies needed to install WRENCH
wrenchproject/wrench-pedagogic-modules:wrench-1.5dev: contains WRENCH installation, currently at 1.5dev (commit eb17d9fd)
wrenchproject/wrench-pedagogic-modules:activity-0: wrench simulator for activity-0
wrenchproject/wrench-pedagogic-modules:activity-1: wrench simulator for activity-1
wrenchproject/wrench-pedagogic-modules:activity-visualization: contains Node.js, any executable WRENCH simulations that are used by the visualization web app

Building and Pushing Docker Images

Anytime you update source code that is used in any of these containers, you must rebuild the image and push the newer version to the repository. This can be done with the following steps:

Navigate to the directory containing the Dockerfile
Run docker image build --no-cache -t wrenchproject/wrench-pedagogic-modules:<tag-name> .
Run docker login and enter your Dockerhub username and password
Run docker push wrenchproject/wrench-pedagogic-modules:<tag-name>
- note that you must be added to the repository and be logged in to Docker on your machine

Say, for example, you edit the source code in simulations/activity_1_getting_started, then you need to do the following:

Push your changes of the source code to Github (the Docker images clone from the wrench-pedagogic-modules repo)
Be aware of what Dockerfiles use this source code. In this case, simulations/activity_1_getting_started/Dockerfile and visualization/Dockerfile uses this source code and so both of those images would have to be rebuilt and pushed:
- Navigate to simulations/activity_1_getting_started and run docker image build --no-cache -t wrenchproject/wrench-pedagogic-modules:activity-1 . && docker image push wrenchproject/wrench-pedagogic-modules:activity-1
- Navigate to visualization and run docker image build --no-cache -t wrenchproject/wrench-pedagogic-modules:activity-visualization . && docker image push wrenchproject/wrench-pedagogic-modules:activity-visualization