fix: Double clicking a file causes the loader to flash incorrectly

packages/dashboard-core-plugins/src/ConsolePlugin.tsx

@@ -11,7 +11,7 @@ import {
   useListener,
 } from '@deephaven/dashboard';
 import { FileUtils } from '@deephaven/file-explorer';
-import { CloseOptions } from '@deephaven/golden-layout';
+import { CloseOptions, isComponent } from '@deephaven/golden-layout';
 import Log from '@deephaven/log';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
@@ -168,7 +168,7 @@ export function ConsolePlugin(
       if (createIfNecessary as boolean) {
         return shortid.generate();
       }
-      return null;
+      return undefined;
     },
     [openFileMap, previewFileMap]
   );
@@ -278,11 +278,6 @@ export function ConsolePlugin(
 
   const unregisterFilePanel = useCallback(
     (fileMetadata: FileMetadata, isPreview: boolean) => {
-      // Note: unregister event is triggered AFTER new register when switching from preview to edit mode
-      // due to the LayoutUtils implementation (new tab added before deleting the old one)
-      // This doesn't cause any issues because previews and editable files are stored in different maps,
-      // but this situation could be completely avoided by sending an event to the tab
-      // to make it switch from preview to edit mode without re-mounting and re-registering
       log.debug('unregisterFileTab', fileMetadata, isPreview);
       if (fileMetadata == null || fileMetadata.id == null) {
         log.debug('Ignore empty file id', fileMetadata);
@@ -446,50 +441,62 @@ export function ConsolePlugin(
       const isFileOpen = fileIsOpen(fileMetadata);
       const isFileOpenAsPreview = fileIsOpenAsPreview(fileMetadata);
 
-      // If the file is already open, just show and focus it if necessary
-      if (isFileOpen) {
-        showFilePanel(fileMetadata);
-        if (shouldFocus) {
-          const panelId = getPanelIdForFileMetadata(fileMetadata);
-          focusPanelById(panelId);
-        }
-        return;
+      const [previewId] = [...previewFileMap.values()];
+      const isPreview = !shouldFocus;
+      const panelId =
+        isPreview && previewId
+          ? previewId
+          : getPanelIdForFileMetadata(fileMetadata);
+
+      if (panelId == null || panelId === '') {
+        throw new Error(
+          'Unable to retrieve or create panelId for metadata',
+          fileMetadata
+        );
       }
 
-      // If the file is already open as a preview and we're not focusing it, just show it
-      // If we're focusing it, that means we need to replace the panel anyway with a non-preview panel, so just fall into the logic below
-      if (isFileOpenAsPreview && !shouldFocus) {
+      // If the file is already open, show it
+      if (isFileOpen || isFileOpenAsPreview) {
         showFilePanel(fileMetadata);
-        return;
+      } else {
+        const stack = LayoutUtils.getStackForComponentTypes(layout.root, [
+          NotebookPanel.COMPONENT,
+        ]);
+
+        const config = makeConfig({
+          id: panelId,
+          settings,
+          fileMetadata,
+          session,
+          sessionLanguage,
+          isPreview,
+        });
+
+        // This will replace the existing preview by panelId if needed
+        LayoutUtils.openComponentInStack(stack, config);
       }
 
-      const [previewTabId] = Array.from(previewFileMap.values());
-      let panelId = null;
-      let stack = null;
-      if (previewTabId != null) {
-        panelId = previewTabId;
-        stack = LayoutUtils.getStackForConfig(layout.root, {
+      // If the file is open as a preview and focused, promote to non-preview
+      if (isFileOpenAsPreview && shouldFocus) {
+        const fileId = fileMetadata.id;
+        const stack = LayoutUtils.getStackForConfig(layout.root, {
           component: NotebookPanel.COMPONENT,
           id: panelId,
         });
+
+        const item = LayoutUtils.getContentItemInStack(stack, {
+          component: NotebookPanel.COMPONENT,
+          id: panelId,
+        });
+        if (item && isComponent(item)) {
+          item.container.emit(NotebookEvent.PROMOTE_FROM_PREVIEW);
+          deletePreviewFileMapEntry(fileId);
+          addOpenFileMapEntry(fileId, panelId);
+        }
       }
-      if (stack == null) {
-        panelId = getPanelIdForFileMetadata(fileMetadata);
-        stack = LayoutUtils.getStackForComponentTypes(layout.root, [
-          NotebookPanel.COMPONENT,
-        ]);
-      }
-      const config = makeConfig({
-        id: panelId,
-        settings,
-        fileMetadata,
-        session,
-        sessionLanguage,
-        isPreview: !shouldFocus,
-      });
-      LayoutUtils.openComponentInStack(stack, config);
+
       if (shouldFocus) {
-        // Focus the tab we just opened if we're supposed to
+        // Focus the tab if we're supposed to
         focusPanelById(panelId);
       }
     },
@@ -502,6 +509,8 @@ export function ConsolePlugin(
       layout.root,
       makeConfig,
       previewFileMap,
+      deletePreviewFileMapEntry,
+      addOpenFileMapEntry,
     ]
   );
 

packages/dashboard-core-plugins/src/events/NotebookEvent.ts

@@ -14,6 +14,8 @@ class NotebookEvent {
   static SEND_TO_NOTEBOOK = 'NotebookEvent.sendToNotebook';
 
   static UNREGISTER_FILE = 'NotebookEvent.unregisterFile';
+
+  static PROMOTE_FROM_PREVIEW = 'NotebookEvent.promoteFromPreview';
 }
 
 export default NotebookEvent;

packages/dashboard-core-plugins/src/panels/NotebookPanel.tsx

@@ -196,6 +196,7 @@ class NotebookPanel extends Component<NotebookPanelProps, NotebookPanelState> {
     this.handleTabBlur = this.handleTabBlur.bind(this);
     this.handleTransformLinkUri = this.handleTransformLinkUri.bind(this);
     this.handleOverwrite = this.handleOverwrite.bind(this);
+    this.handlePreviewPromotion = this.handlePreviewPromotion.bind(this);
     this.getDropdownOverflowActions = this.getDropdownOverflowActions.bind(
       this
     );
@@ -283,6 +284,10 @@ class NotebookPanel extends Component<NotebookPanelProps, NotebookPanelState> {
     if (tab != null) this.initTab(tab);
     this.initNotebookContent();
     glEventHub.on(NotebookEvent.RENAME_FILE, this.handleRenameFile);
+    glContainer.on(
+      NotebookEvent.PROMOTE_FROM_PREVIEW,
+      this.handlePreviewPromotion
+    );
   }
 
   componentDidUpdate(
@@ -311,10 +316,14 @@ class NotebookPanel extends Component<NotebookPanelProps, NotebookPanelState> {
     this.debouncedSavePanelState.flush();
     this.pending.cancel();
 
-    const { glEventHub } = this.props;
+    const { glEventHub, glContainer } = this.props;
 
     const { fileMetadata, isPreview } = this.state;
     glEventHub.off(NotebookEvent.RENAME_FILE, this.handleRenameFile);
+    glContainer.off(
+      NotebookEvent.PROMOTE_FROM_PREVIEW,
+      this.handlePreviewPromotion
+    );
     glEventHub.emit(NotebookEvent.UNREGISTER_FILE, fileMetadata, isPreview);
   }
 
@@ -514,6 +523,10 @@ class NotebookPanel extends Component<NotebookPanelProps, NotebookPanelState> {
     }
   }
 
+  handlePreviewPromotion() {
+    this.removePreviewStatus();
+  }
+
   getSettings = memoize(
     (
       initialSettings: editor.IStandaloneEditorConstructionOptions,