feat(shortcuts): add an info dialog with keyboard shortcuts

Author: Justineantoine

.github/workflows/test_and_release.yml

@@ -83,8 +83,3 @@ jobs:
         uses: python-semantic-release/python-semantic-release@master
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-
-      # https://docs.pypi.org/trusted-publishers/using-a-publisher/
-      - name: Publish package distributions to PyPI
-        if: steps.release.outputs.released == 'true'
-        uses: pypa/gh-action-pypi-publish@release/v1

CHANGELOG.md

@@ -9,7 +9,6 @@
 - **slicer viewer**: Add a slicer viewer to display dicom files
   ([`6b250e2`](https://github.com/KitwareMedical/GirderEEGViewer/commit/6b250e29a0a995fcb31b3ca65eb3892ef0231d6f))
 
-
 ## v1.0.0 (2026-05-29)
 
 - Initial Release

girdereegviewer/eeg_viewer/eeg_viewer_shortcuts_panel.py

@@ -0,0 +1,74 @@
+from trame.widgets import vuetify3 as v3
+from trame.widgets.html import Div, Span
+
+SHORTCUTS = {
+    "selection": [
+        (["alpha-a"], "Select all"),
+        (["alpha-z"], "Select none"),
+        (["alpha-i"], "Invert selection"),
+    ],
+    "modes": [
+        (["keyboard-tab"], "Switch mode"),
+        (["alpha-c"], "Toggle calibration"),
+    ],
+    "tools": [
+        (["chevron-left", "chevron-right"], "Move time"),
+        (["alpha-u", "alpha-d"], "Scale time up and down"),
+        (["chevron-up", "chevron-down"], "Scale or calibrate up and down"),
+        (["alpha-r"], "Reset scale"),
+        (["keyboard-space"], "Next profile"),
+        (["alpha-v"], "Next filter"),
+    ],
+    "annotations": [
+        (["keyboard-return"], "Add annotation"),
+        (["alpha-k"], "Delete annotation"),
+        (["alpha-p", "alpha-n"], "Change annotation type"),
+        (["keyboard-esc"], "Cancel annotation"),
+    ],
+}
+
+
+class ShortcutInfo(Div):
+    def __init__(self, icons: list[str], desc: str, **kwargs) -> None:
+        super().__init__(classes="d-flex justify-space-between pa-2", **kwargs)
+        with self:
+            with Div(classes="d-flex", style="gap: 8px;"):
+                for icon in icons:
+                    v3.VIcon(icon=f"mdi-{icon}")
+            Span(desc, classes="text-body-2")
+
+
+class ShortcutsPanel(Div):
+    def __init__(self, **kwargs) -> None:
+        super().__init__(
+            classes="d-flex justify-end ma-7", style="inset: 0; position: absolute; pointer-events: none;", **kwargs
+        )
+
+        self._build_ui()
+
+    def _build_ui(self) -> None:
+        with self, v3.VDialog(width=400):
+            with (
+                v3.Template(v_slot_activator="{ props : activatorProps }"),
+                v3.VBtn(
+                    v_bind="activatorProps",
+                    icon="mdi-plus",
+                    raw_attrs=['tabindex="-1"'],
+                    color="white",
+                    style="pointer-events: visible;",
+                    size="small",
+                ),
+            ):
+                v3.VTooltip(
+                    activator="parent",
+                    close_delay=100,
+                    open_delay=500,
+                    text="Keyboard shortcuts",
+                )
+                v3.VIcon(icon="mdi-information-outline")
+
+            with v3.VCard(), v3.VCardText():
+                for shortcut_theme, shortcuts in SHORTCUTS.items():
+                    Div(shortcut_theme, classes="text-uppercase text-overline")
+                    for shortcut_icons, shortcut_desc in shortcuts:
+                        ShortcutInfo(shortcut_icons, shortcut_desc)

girdereegviewer/eeg_viewer/eeg_viewer_ui.py

@@ -3,9 +3,12 @@
 from trame.widgets.vuetify3 import VMain
 from trame_server import Server
 
+from .eeg_viewer_shortcuts_panel import ShortcutsPanel
+
 
 class EEGViewerUI:
     def __init__(self, server: Server):
         self.template_name = "eeg-viewer"
-        with VAppLayout(server, template_name=self.template_name), VMain(classes="d-flex flex-column"):
+        with VAppLayout(server, template_name=self.template_name), VMain(classes="d-flex flex-column pb-2"):
             self.rca = rca.RemoteControlledArea(name="eeg-view", display="image", send_mouse_move=True)
+            ShortcutsPanel()