Move the kill button layout change to a dedicate function

src/aiidalab_qe/app/result/__init__.py

@@ -42,21 +42,18 @@ def __init__(self, **kwargs):
         )
         ipw.dlink((self, "process"), (self.process_monitor, "value"))
 
-        self.kill_work_chains_button = ipw.Button(
+        self.kill_button = ipw.Button(
             description="Kill workchain",
             tooltip="Kill the below workchain.",
             button_style="danger",
             icon="window-close",
-            disabled=True,
-            layout=ipw.Layout(width="120px", height="40px", display="none"),
-        )
-        self.kill_work_chains_button.on_click(self._on_click_kill_work_chain)
-        self.kill_work_chains_box = ipw.HBox(
-            children=[self.kill_work_chains_button],
-            layout=ipw.Layout(justify_content="flex-end"),
+            layout=ipw.Layout(width="120px", height="40px"),
         )
+        self.kill_button.on_click(self._on_click_kill_button)
+
+        super().__init__([self.kill_button, self.process_status], **kwargs)
 
-        super().__init__([self.kill_work_chains_box, self.process_status], **kwargs)
+        self._update_kill_button_layout()
 
     def can_reset(self):
         "Do not allow reset while process is running."
@@ -66,11 +63,10 @@ def reset(self):
         self.process = None
 
     def _update_state(self):
+        """Based on the process state, update the state of the step."""
         if self.process is None:
             self.state = self.State.INIT
-            self.kill_work_chains_button.display = "none"
         else:
-            self.kill_work_chains_button.layout.display = "block"
             process = orm.load_node(self.process)
             process_state = process.process_state
             if process_state in (
@@ -79,22 +75,43 @@ def _update_state(self):
                 ProcessState.WAITING,
             ):
                 self.state = self.State.ACTIVE
-                self.kill_work_chains_button.disabled = False
             elif (
                 process_state in (ProcessState.EXCEPTED, ProcessState.KILLED)
                 or process.is_failed
             ):
                 self.state = self.State.FAIL
-                self.kill_work_chains_button.disabled = True
             elif process.is_finished_ok:
                 self.state = self.State.SUCCESS
-                self.kill_work_chains_button.disabled = True
 
-    def _on_click_kill_work_chain(self, _=None):
+    def _update_kill_button_layout(self):
+        """Update the layout of the kill button."""
+        # If no process is selected, hide the button.
+        if self.process is None:
+            self.kill_button.layout.display = "none"
+        else:
+            self.kill_button.layout.display = "block"
+
+        # If the step is not activated, no point to click the button, so disable it.
+        # Only enable it if the process is on (RUNNING, CREATED, WAITING).
+        if self.state is self.State.ACTIVE:
+            self.kill_button.disabled = False
+        else:
+            self.kill_button.disabled = True
+
+    def _on_click_kill_button(self, _=None):
+        """callback for the kill button.
+        First kill the process, then update the kill button layout.
+        """
         workchain = [orm.load_node(self.process)]
         control.kill_processes(workchain)
-        self._update_state()
+
+        # update the kill button layout
+        self._update_kill_button_layout()
 
     @tl.observe("process")
-    def _observe_process(self, change):
+    def _observe_process(self, _):
+        """Callback for when the process is changed."""
+        # The order of the following calls matters,
+        # as the self.state is updated in the _update_state method.
         self._update_state()
+        self._update_kill_button_layout()