Add "View details" dialog for long notifications

Author: rabea-al

src/helpers/notificationAugmentor.ts

@@ -0,0 +1,74 @@
+import { Notification, showDialog, Dialog } from '@jupyterlab/apputils';
+import { Widget } from '@lumino/widgets';
+
+const MAX_VISIBLE_CHARS = 140;
+const VIEW_DETAILS_LABEL = 'View details';
+
+function toPlainText(value: unknown): string {
+  try {
+    return typeof value === 'string' ? value : JSON.stringify(value, null, 2);
+  } catch {
+    return String(value ?? '');
+  }
+}
+
+function createViewDetailsAction(fullMessage: string, dialogTitle = 'Details'): Notification.IAction {
+  return {
+    label: VIEW_DETAILS_LABEL,
+    caption: 'Show full message',
+    callback: async () => {
+      const dialogBody = new Widget();
+      dialogBody.addClass('xircuits-notification-details');
+
+      const pre = document.createElement('pre');
+      pre.textContent = fullMessage;
+      dialogBody.node.appendChild(pre);
+
+      const copyButton = Dialog.createButton({ label: 'Copy' });
+      const closeButton = Dialog.okButton({ label: 'Close' });
+
+      const result = await showDialog({
+        title: dialogTitle,
+        body: dialogBody,
+        buttons: [copyButton, closeButton]
+      });
+
+      if (result.button.label === 'Copy') {
+        await navigator.clipboard.writeText(fullMessage);
+      }
+    }
+  };
+}
+
+function ensureViewDetailsAction(
+  messageText: string,
+  options: any = {},
+  title?: string
+): any {
+  if (messageText.length <= MAX_VISIBLE_CHARS) return options;
+  const actions = [...(options.actions ?? [])];
+  if (!actions.some((a: any) => a?.label === VIEW_DETAILS_LABEL)) {
+    actions.push(createViewDetailsAction(messageText, title));
+  }
+  return { ...options, actions };
+}
+
+export function augmentNotifications(): void {
+  const NotificationObj: any = Notification as any;
+  if (NotificationObj.__xircuitsAugmented) return;
+
+  const wrap = (method: 'error' | 'warning' | 'info' | 'success') => {
+    const original = NotificationObj[method]?.bind(Notification);
+    if (!original) return;
+
+    NotificationObj[method] = (...args: any[]) => {
+      const [rawMessage, rawOptions] = args;
+      const text = toPlainText(rawMessage);
+      const options = ensureViewDetailsAction(text, rawOptions);
+      return original(text, options);
+    };
+  };
+
+  ['error', 'warning', 'info', 'success'].forEach(wrap);
+  NotificationObj.__xircuitsAugmented = true;
+}

src/index.tsx

@@ -34,7 +34,7 @@ import { commandIDs } from "./commands/CommandIDs";
 import { IEditorTracker } from '@jupyterlab/fileeditor';
 import { IMainMenu } from '@jupyterlab/mainmenu';
 import { handleInstall } from './context-menu/TrayContextMenu';
-
+import { augmentNotifications } from './helpers/notificationAugmentor';
 import { installComponentPreview } from './component_info_sidebar/previewHelper';
 const FACTORY = 'Xircuits editor';
 
@@ -80,6 +80,9 @@ const xircuits: JupyterFrontEndPlugin<void> = {
 
     console.log('Xircuits is activated!');
 
+    // Add "View details" to long notifications
+    augmentNotifications();
+
     // Creating the widget factory to register it so the document manager knows about
     // our new DocumentWidget
     const widgetFactory = new XircuitsFactory({

style/base.css

@@ -158,6 +158,18 @@ body.light-mode jp-button[title="Toggle Light/Dark Mode"]  .moon  { visibility:
 
 body.light-mode jp-button[title="Toggle Light/Dark Mode"]  .sun  { visibility: visible; }
 
+.xircuits-notification-details {
+  max-height: 60vh;
+  overflow: auto;
+  padding: 0.25rem;
+}
 
+.xircuits-notification-details pre {
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin: 0;
+  font-family: var(--jp-code-font-family);
+  font-size: var(--jp-code-font-size);
+}