Minor UI fixes (#51)

- Add hidden span with autofocus to avoid app bar icons retaining focus
- Remove y padding for app bar menu items
- Make autocomplete search bottom and list top flat to keep them aligned
- Prevent widget form submit when only single input is present (dihedral plots)
- Handle redirects for invalid uuid's for Widget and Notebook page
- Add notes for Energy widgets

Author: PardhavMaradani

mdadash/backend/analyses/energies.py

@@ -21,6 +21,11 @@ class EnergyWidgetBase:
     data_key = ""
     y_label = "Energy ( kJ / mol )"
 
+    _notes = (
+        "Energies are only available for streaming trajectories and only if the "
+        "simulation engine is configured to send them."
+    )
+
     _inputs: ClassVar = [
         {
             "attribute": "maxlen",

mdadash/backend/kernel/manager.py

@@ -589,7 +589,7 @@ async def _get_widget_inputs(self, widget_uuid: str) -> list:
             "widget:get_inputs", {"uuid": widget_uuid}
         )
 
-    async def get_widget_details(self, widget_uuid: str) -> dict:
+    async def get_widget_details(self, widget_uuid: str) -> dict | None:
         """Get widget details
 
         Get the widget name, description and inputs
@@ -601,13 +601,16 @@ async def get_widget_details(self, widget_uuid: str) -> dict:
 
         Returns
         -------
-        response: dict
-            Response dict containing name, desc and inputs
+        response: dict | None
+            Response dict containing name, desc and inputs or None if
+            widget does not exist
 
         """
         widget = next(
             (w for w in self.sm.widgets_layout if w["i"] == widget_uuid), None
         )
+        if widget is None:  # pragma: no cover
+            return None
         response = await self._get_widget_inputs(widget_uuid)
         return {
             "uuid": widget_uuid,

mdadash/frontend/src/App.vue

@@ -1,5 +1,12 @@
 <template>
   <v-app>
+    <span
+      autofocus
+      tabindex="-1"
+      aria-hidden="true"
+      class="position-absolute"
+      style="opacity: 0; width: 0; height: 0"
+    ></span>
     <v-app-bar color="primary" elevation="1" scroll-behavior="hide">
       <!-- v8 ignore start -->
       <v-btn
@@ -83,7 +90,7 @@
             <template v-slot:activator="{ props }">
               <v-btn :icon="mdiDotsVertical" size="large" v-bind="props"></v-btn>
             </template>
-            <v-list>
+            <v-list class="py-0">
               <v-list-item v-for="(item, i) in appBarMenuItems" :key="i" :to="item.path">
                 <template v-slot:prepend>
                   <v-icon :icon="item.icon"></v-icon>
@@ -171,14 +178,13 @@ import {
   mdiPause,
   mdiPlay,
   mdiViewDashboard,
-  mdiViewDashboardOutline,
 } from '@mdi/js'
 
 const route = useRoute()
 const router = useRouter()
 const appBarTitle = computed(() => route.meta.title)
 const appBarMenuItems = [
-  { name: 'Dashboard', icon: mdiViewDashboardOutline, path: '/' },
+  { name: 'Dashboard', icon: mdiViewDashboard, path: '/' },
   { name: 'Notebooks', icon: mdiNotebookMultiple, path: '/notebooks' },
   { name: 'Settings', icon: mdiCog, path: '/settings' },
 ]

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

@@ -15,7 +15,12 @@ const allProvides = {
   settings,
 }
 
+const mockPush = vi.fn()
+
 vi.mock('vue-router', () => ({
+  useRouter: () => ({
+    push: mockPush,
+  }),
   useRoute: () => ({
     query: { uuid: 'uuid1' },
   }),
@@ -156,6 +161,7 @@ describe('WidgetView.vue', () => {
     const ouputCardItem = outputCard.findComponent({ name: 'VCardItem' })
     expect(ouputCardItem).toBeDefined()
     await ouputCardItem.trigger('click')
+    await wrapper.find('form').trigger('submit')
   })
 
   it('loads details and output', async () => {

mdadash/frontend/src/views/DashboardView.vue

@@ -220,7 +220,7 @@
             <v-autocomplete
               v-else
               :menu="isAddWidgetOpen"
-              :menu-props="{ maxWidth: '100%' }"
+              :menu-props="{ maxWidth: '100%', contentClass: 'rounded-t-0' }"
               :list-props="{ class: 'py-0' }"
               @update:menu="setAddWidgetMenuState"
               :items="addWidgetItems"
@@ -231,10 +231,11 @@
               ref="addWidgetAutoCompleteRef"
               hide-details
               variant="solo"
-              class="border"
+              class="border flat-bottom"
               @update:model-value="onAddWidgetSelected"
               :loading="isAddWidgetLoading"
               clearable
+              no-data-text="No matching widgets"
             >
               <!-- custom template to show both name and description -->
               <template #item="{ props, item }">
@@ -669,14 +670,18 @@ onDeactivated(() => {
   min-height: 56px !important;
   height: 56px !important;
 }
-
 .custom-v-select-field-height :deep(.v-field__input) {
   min-height: 56px !important;
   height: 56px !important;
   padding-top: 0px !important;
   padding-bottom: 0px !important;
   align-items: center;
 }
+/* Make autocomplete search box have flat bottom */
+.flat-bottom :deep(.v-field) {
+  border-bottom-left-radius: 0px !important;
+  border-bottom-right-radius: 0px !important;
+}
 </style>
 
 <style>

mdadash/frontend/src/views/NotebookView.vue

@@ -120,7 +120,7 @@
         <template v-slot:prepend>
           <v-icon :icon="mdiAlert" color="warning"></v-icon>
         </template>
-        <v-card-text> Are you sure you want to delete this Notebook'? </v-card-text>
+        <v-card-text> Are you sure you want to delete this Notebook? </v-card-text>
         <v-card-actions>
           <v-spacer></v-spacer>
           <v-btn variant="text" @click="confirmDelete = false">Cancel</v-btn>
@@ -252,6 +252,8 @@ onMounted(async () => {
       .emitWithAck('notebooks:get_notebook', uuid)
     if (response) {
       notebook.value = response
+    } else {
+      router.push({ path: '/notebooks' })
     }
   } finally {
     isLoading.value = false

mdadash/frontend/src/views/NotebooksView.vue

@@ -57,7 +57,7 @@
                   <v-autocomplete
                     v-else
                     :menu="isCloneWidgetOpen"
-                    :menu-props="{ maxWidth: '100%' }"
+                    :menu-props="{ maxWidth: '100%', contentClass: 'rounded-t-0' }"
                     :list-props="{ class: 'py-0' }"
                     @update:menu="setCloneWidgetMenuState"
                     :items="cloneWidgetItems"
@@ -68,10 +68,11 @@
                     ref="cloneWidgetAutoCompleteRef"
                     hide-details
                     variant="solo"
-                    class="border"
+                    class="border flat-bottom"
                     @update:model-value="onCloneWidgetSelected"
                     :loading="isCloneWidgetLoading"
                     clearable
+                    no-data-text="No matching widgets"
                   >
                     <!-- custom template to show both name and description -->
                     <template #item="{ props, item }">
@@ -116,7 +117,14 @@
             </template>
             <!-- Actions -->
             <template v-slot:append>
-              <v-icon :icon="mdiRun" :color="item.run_on_launch ? 'primary' : 'grey'"></v-icon>
+              <v-icon
+                :icon="mdiRun"
+                :color="item.run_on_launch ? 'primary' : 'grey'"
+                v-tooltip="{
+                  text: item.run_on_launch ? 'Run on launch enabled' : 'Run on launch disabled',
+                  location: 'bottom',
+                }"
+              ></v-icon>
               <v-menu>
                 <template v-slot:activator="{ props }">
                   <v-btn
@@ -382,7 +390,13 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
+/* Bottom border for notebook item except last one */
 .notebook-item:not(:last-child) {
   border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
 }
+/* Make autocomplete search box have flat bottom */
+.flat-bottom :deep(.v-field) {
+  border-bottom-left-radius: 0px !important;
+  border-bottom-right-radius: 0px !important;
+}
 </style>

mdadash/frontend/src/views/WidgetView.vue

@@ -53,7 +53,7 @@
       <v-divider />
       <v-expand-transition>
         <div v-show="isInputsExpanded">
-          <v-form class="pa-4">
+          <v-form class="pa-4" @submit.prevent>
             <v-row v-for="input in widgetDetails.inputs" :key="input.attribute">
               <v-col cols="12">
                 <span v-if="input.type === 'toggle'">
@@ -143,13 +143,14 @@
 
 <script setup>
 import { socket } from '@/socket'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { ref, onMounted, onBeforeUnmount, inject } from 'vue'
 import { mdiUnfoldLessHorizontal, mdiUnfoldMoreHorizontal } from '@mdi/js'
 import { VTextField, VSelect, VNumberInput, VSwitch, VBtnToggle } from 'vuetify/components'
 import NotebookCell from '@/components/NotebookCell.vue'
 
 const route = useRoute()
+const router = useRouter()
 const uuid = route.query.uuid
 const settings = inject('settings')
 const isOutputExpanded = ref(true)
@@ -220,6 +221,8 @@ onMounted(async () => {
       .emitWithAck('widget:get_details', uuid)
     if (response) {
       widgetDetails.value = response
+    } else {
+      router.push({ path: '/' })
     }
   } finally {
     isLoading.value = false