feat: stop ModularServer closes #1642

mesa/visualization/ModularVisualization.py

@@ -219,23 +219,36 @@ def viz_state_message(self):
         return {"type": "viz_state", "data": self.application.render_model()}
 
     def on_message(self, message):
-        """Receiving a message from the websocket, parse, and act accordingly."""
+        """Receiving a message from the websocket, parse, and act accordingly.
+
+        Args:
+            message (dict): A dictionary containing a key 'type'.
+        """
         if self.application.verbose:
             print(message)
         msg = tornado.escape.json_decode(message)
-
-        if msg["type"] == "get_step":
+        try:
+            msg_type = msg["type"]
+        except KeyError:
+            print(
+                "Unexpected message. Key 'type' missing. All messages have to contain the key 'type'."
+            )
+            if self.application.is_debug_mode():
+                print("see SocketHandler.on_message")
+            return
+
+        if msg_type == "get_step":
             if not self.application.model.running:
                 self.write_message({"type": "end"})
             else:
                 self.application.model.step()
                 self.write_message(self.viz_state_message)
 
-        elif msg["type"] == "reset":
+        elif msg_type == "reset":
             self.application.reset_model()
             self.write_message(self.viz_state_message)
 
-        elif msg["type"] == "submit_params":
+        elif msg_type == "submit_params":
             param = msg["param"]
             value = msg["value"]
 
@@ -246,6 +259,10 @@ def on_message(self, message):
                 else:
                     self.application.model_kwargs[param] = value
 
+        elif msg_type == "shut_down":
+            if self.application.is_debug_mode():
+                self.application.stop()
+
         else:
             if self.application.verbose:
                 print("Unexpected message!")
@@ -407,7 +424,13 @@ def launch(self, port=None, open_browser=True):
         try:
             tornado.ioloop.IOLoop.current().start()
         except KeyboardInterrupt:
-            tornado.ioloop.IOLoop.current().stop()
+            self.stop()
+
+    def stop(self):
+        tornado.ioloop.IOLoop.current().stop()
+
+    def is_debug_mode(self):
+        return bool(self.settings["debug"])
 
     @staticmethod
     def _is_stylesheet(filename):

mesa/visualization/templates/js/runcontrol.js

@@ -14,6 +14,7 @@ const vizElements = [];
 const startModelButton = document.getElementById("play-pause");
 const stepModelButton = document.getElementById("step");
 const resetModelButton = document.getElementById("reset");
+const shutDownButton = document.getElementById("shut-down");
 const stepDisplay = document.getElementById("currentStep");
 
 /**
@@ -67,6 +68,16 @@ function ModelController(tick = 0, fps = 3, running = false, finished = false) {
     send({ type: "reset" });
   };
 
+  this.shutDown = function shutDown() {
+    disableNavItem(startModelButton);
+    disableNavItem(stepModelButton);
+    disableNavItem(resetModelButton);
+    disableNavItem(shutDownButton);
+
+    addShutDownAlert();
+    send({ "type": "shut_down" });
+  };
+
   /** Stops the model and put it into a finished state */
   this.done = function done() {
     this.stop();
@@ -124,15 +135,17 @@ stepModelButton.onclick = () => {
 };
 resetModelButton.onclick = () => controller.reset();
 
+shutDownButton.onclick = () => controller.shutDown();
+
 /*
  * Websocket opening and message handling
  */
 
 /** Open the websocket connection; support TLS-specific URLs when appropriate */
 const ws = new WebSocket(
   (window.location.protocol === "https:" ? "wss://" : "ws://") +
-    location.host +
-    "/ws"
+  location.host +
+  "/ws"
 );
 
 /**
@@ -171,6 +184,19 @@ const send = function (message) {
   ws.send(msg);
 };
 
+const disableNavItem = function (navItem) {
+  const navLink = navItem.querySelector(".nav-link");
+  navLink.classList.add("disabled");
+  navItem.onclick = function () { };
+};
+
+const addShutDownAlert = function () {
+  const statusInfo = document.getElementById('status-info');
+  const alertElement = document.createElement('div');
+  alertElement.innerHTML = '<div class="alert alert-danger" role="alert">The server has been shut down.</div>';
+  statusInfo.appendChild(alertElement);
+}
+
 /*
  * GUI initialization (for input parameters)
  */

mesa/visualization/templates/modular_template.html

@@ -43,13 +43,17 @@
                     </li>
                     <li id="reset" class="nav-item"><a href="#" class="nav-link">Reset</a>
                     </li>
+                    <li id="shut-down" class="nav-item"><a href="#" class="nav-link">Shut Down</a>
+                    </li>
                 </ul>
             </div>
         </div>
     </nav>
     <div class="container d-flex flex-row">
         <div class="col-xl-4 col-lg-4 col-md-4 col-3" id="sidebar"></div>
         <div class="col-xl-8 col-lg-8 col-md-8 col-9" id="elements">
+            <div id="status-info">
+            </div>
             <div id="elements-topbar">
                 <div>
                     <label class="badge bg-primary" for="fps" style="margin-right: 15px">Frames Per Second</label>