Misc fixes (#50)

- Sort available widgets and clonable widgets by name
- Add alert and pause support in utils for use by custom code
- Fix disabled opacity in Settings page
- Allow Enter key to confirm dialogs

Author: PardhavMaradani

mdadash/backend/kernel/manager.py

@@ -77,7 +77,7 @@ async def start(self) -> None:
         # create task to listen on iopub and shell channels
         self.listen_task = asyncio.create_task(self._start_listening())
         # initialize the kernel core
-        self.kc.execute("from mdadash.backend.kernel import core")
+        self.kc.execute("from mdadash.backend.kernel import core, utils")
         self.kc.execute(
             f"import logging\nlogging.getLogger().setLevel({self.log_level})"
         )

mdadash/backend/kernel/utils.py

@@ -2,6 +2,8 @@
 Utils
 """
 
+from .core import comms, um
+
 
 class EMATrend:
     """Exponential Moving Average (EMA) based Trend
@@ -43,3 +45,55 @@ def update(self, value: float) -> int:
             (1.0 - self.alpha_long) * self.ema_long
         )
         return 1 if self.ema_short >= self.ema_long else -1
+
+
+def _get_alert_timestamp() -> dict:
+    """Internal: Get dict containing the current ts info to use as timestamp"""
+    u = um[0]
+    return {
+        "frame": u.trajectory.frame,
+        "time": u.trajectory.ts.data.get("time"),
+        "step": u.trajectory.ts.data.get("step"),
+    }
+
+
+def alert(message: str) -> None:
+    """Create an alert
+
+    A timestamp based on the current timestep is automatically added.
+
+    Parameters
+    ----------
+    message: str
+        The string message used for the alert
+
+    """
+    comms.send(
+        {
+            "alert": {
+                "tsinfo": _get_alert_timestamp(),
+                "message": message,
+            }
+        }
+    )
+
+
+def pause_simulation(message: str = "Paused simulation") -> None:
+    """Pause the simulation
+
+    Pause simulation and add an alert.
+
+    Parameters
+    ----------
+    message: str
+        The string message used for the alert
+
+    """
+    comms.send(
+        {
+            "pause_simulation": {
+                "tsinfo": _get_alert_timestamp(),
+                "message": message,
+            }
+        }
+    )

mdadash/backend/main.py

@@ -357,7 +357,7 @@ async def on_get_clonable_widgets(self, _sid):
                 "description": getattr(w, "description", None),
                 "class_name": w.__name__,
             }
-            for w in widgets
+            for w in sorted(widgets, key=lambda w: w.name.lower())
         ]
 
     async def on_notebook_clone_widget(self, _sid, name, description, class_name):

mdadash/backend/tests/test_server.py

@@ -961,3 +961,26 @@ async def test_notebooks_clone_widget(_client):
         handler("_sid", widget["name"], widget["description"], widget["class_name"])
     )
     assert uuid is not None
+
+
+async def test_utils_alert_pause(_client, imd_server):
+    await connect_to_simulation(imd_server)
+    # delete all alerts
+    handler = sio.handlers["/"]["delete_all_alerts"]
+    await run_task_until_done(handler("_sid"))
+    # check there are no alerts
+    assert len(main.mdadash.sm.alerts) == 0
+    # generate alert from custom code
+    code = "utils.alert('test alert')"
+    await run_task_until_done(main.mdadash.km.execute_code(code))
+    # check alert generation
+    handler = sio.handlers["/"]["get_alerts"]
+    alerts = await run_task_until_done(handler("_sid"))
+    assert alerts[0]["message"] == "test alert"
+    # pause from custom code
+    code = "utils.pause_simulation('test pause')"
+    await run_task_until_done(main.mdadash.km.execute_code(code))
+    # cleanup - delete all alerts
+    handler = sio.handlers["/"]["delete_all_alerts"]
+    await run_task_until_done(handler("_sid"))
+    await disconnect_from_simulation()

mdadash/backend/widgets/base.py

@@ -360,14 +360,15 @@ def get_available_widgets(self, _data: dict) -> None:
         widgets to the client.
 
         """
-        widgets = []
-        for widget_class in WidgetManager._widget_classes.values():
-            widgets.append(
-                {
-                    "name": widget_class.name,
-                    "description": getattr(widget_class, "description", None),
-                }
+        widgets = [
+            {
+                "name": c.name,
+                "description": getattr(c, "description", None),
+            }
+            for c in sorted(
+                WidgetManager._widget_classes.values(), key=lambda c: c.name.lower()
             )
+        ]
         self._comms.send({"widgets": widgets})
 
     def recreate_instances(self, data: dict) -> None:

mdadash/frontend/src/App.vue

@@ -158,7 +158,7 @@
 <script setup>
 import { socket } from '@/socket'
 import { useRoute, useRouter } from 'vue-router'
-import { ref, computed, onMounted, onBeforeUnmount, provide } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount, provide, watch } from 'vue'
 import {
   mdiAlert,
   mdiArrowLeft,
@@ -209,6 +209,20 @@ function handleConnectDisconnect() {
   }
 }
 
+const handleKeydown = (event) => {
+  if (event.key === 'Enter') {
+    confirmDisconnect()
+  }
+}
+
+watch(showConfirm, (newVal) => {
+  if (newVal) {
+    document.addEventListener('keydown', handleKeydown)
+  } else {
+    document.removeEventListener('keydown', handleKeydown)
+  }
+})
+
 function confirmDisconnect() {
   showConfirm.value = false
   runningState.value.pending = true
@@ -280,6 +294,7 @@ onBeforeUnmount(() => {
   socket.off('timestepInfo')
   socket.off('settings')
   socket.off('alertsCount')
+  document.removeEventListener('keydown', handleKeydown)
 })
 
 provide('runningState', runningState)

mdadash/frontend/src/__tests__/App.spec.js

@@ -124,6 +124,10 @@ describe('App', () => {
     })
     expect(confirmBtn).toBeDefined()
     await confirmBtn.trigger('click')
+    // disconnect - Enter to confirm
+    wrapper.vm.handleKeydown(new KeyboardEvent('keydown', { key: 'Enter' }))
+    // Not Enter key
+    wrapper.vm.handleKeydown(new KeyboardEvent('keydown', { key: ' ' }))
   })
 
   it('app bar navigation', async () => {

mdadash/frontend/src/__tests__/views/AlertsView.spec.js

@@ -72,13 +72,15 @@ describe('AlertsView.vue', () => {
     vi.clearAllMocks()
   })
 
-  it('mounts', () => {
+  it('mounts and unmounts', () => {
     const wrapper = mount(AlertsView, {
       global: {
         provide: allProvides,
       },
     })
     expect(wrapper.exists()).toBe(true)
+    // unmount
+    wrapper.unmount()
   })
 
   it('renders', async () => {
@@ -136,5 +138,11 @@ describe('AlertsView.vue', () => {
     deleteAllAlerts.trigger('click')
     wrapper.vm.deleteAllAlerts()
     expect(mockEmit).toHaveBeenCalledWith('delete_all_alerts')
+    // delete - Enter to confirm
+    wrapper.vm.confirmDeleteAll = true
+    await nextTick()
+    wrapper.vm.handleKeydown(new KeyboardEvent('keydown', { key: 'Enter' }))
+    // Not Enter key
+    wrapper.vm.handleKeydown(new KeyboardEvent('keydown', { key: ' ' }))
   })
 })

mdadash/frontend/src/__tests__/views/DashboardView.spec.js

@@ -429,5 +429,11 @@ describe('DashboardView.vue', () => {
     expect(dashboard.vm.gridEditable).toBe(false)
     await gridPresetSelect.setValue(dashboard.vm.gridPresetIcons.editable)
     expect(dashboard.vm.gridEditable).toBe(true)
+    // save layout - Enter to confirm
+    dashboard.vm.showSaveLayoutConfirm = true
+    await nextTick()
+    dashboard.vm.handleKeydown(new KeyboardEvent('keydown', { key: 'Enter' }))
+    // Not Enter key
+    dashboard.vm.handleKeydown(new KeyboardEvent('keydown', { key: ' ' }))
   })
 })

mdadash/frontend/src/__tests__/views/NotebookView.spec.js

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { ref, nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { beforeEach, expect, describe, it, vi } from 'vitest'
 import NotebookView from '@/views/NotebookView.vue'
@@ -76,13 +76,15 @@ describe('NotebookView.vue', () => {
     vi.clearAllMocks()
   })
 
-  it('check mount', async () => {
+  it('check mount and unmount', async () => {
     const wrapper = mount(NotebookView, {
       global: {
         provide: allProvides,
       },
     })
     expect(wrapper).toBeDefined()
+    // unmount
+    wrapper.unmount()
   })
 
   it('loads details', async () => {
@@ -162,5 +164,11 @@ describe('NotebookView.vue', () => {
     wrapper.vm.onDeleteNotebook()
     expect(mockTimeout).toHaveBeenNthCalledWith(2, 5000)
     expect(mockEmitWithAck).toHaveBeenNthCalledWith(2, 'notebooks:remove_notebook', 'uuid1')
+    // delete - Enter to confirm
+    wrapper.vm.confirmDelete = true
+    await nextTick()
+    wrapper.vm.handleKeydown(new KeyboardEvent('keydown', { key: 'Enter' }))
+    // Not Enter key
+    wrapper.vm.handleKeydown(new KeyboardEvent('keydown', { key: ' ' }))
   })
 })