Implement display of detail, source, and extra settings

krassowski · krassowski · commit b4d270735772 · 2021-03-21T22:42:20.000Z
diff --git a/packages/jupyterlab-lsp/src/features/completion/completion.ts b/packages/jupyterlab-lsp/src/features/completion/completion.ts
@@ -19,7 +19,7 @@ import { IDocumentConnectionData } from '../../connection_manager';
 import { ILSPAdapterManager, ILSPLogConsole } from '../../tokens';
 import { NotebookAdapter } from '../../adapters/notebook/notebook';
 import { ILSPCompletionThemeManager } from '@krassowski/completion-theme/lib/types';
-import { LSPCompletionRenderer } from './renderer';
+import { ICompletionData, LSPCompletionRenderer } from './renderer';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { LSPCompleterModel } from './model';
 import { LazyCompletionItem } from './item';
@@ -105,21 +105,44 @@ export class CompletionLabIntegration implements IFeatureLabIntegration {
       console: console.scope('renderer')
     });
     this.renderer.activeChanged.connect(this.active_completion_changed, this);
+    this.renderer.itemShown.connect(this.resolve_and_update, this);
     adapterManager.adapterChanged.connect(this.swap_adapter, this);
     settings.changed.connect(() => {
       completionThemeManager.set_theme(this.settings.composite.theme);
       completionThemeManager.set_icons_overrides(
         this.settings.composite.typesMap
       );
-      this.model.settings.caseSensitive = this.settings.composite.caseSensitive;
-      this.model.settings.includePerfectMatches = this.settings.composite.includePerfectMatches;
+      if (this.current_completion_handler) {
+        this.model.settings.caseSensitive = this.settings.composite.caseSensitive;
+        this.model.settings.includePerfectMatches = this.settings.composite.includePerfectMatches;
+      }
     });
   }
 
+  protected fetchDocumentation(item: LazyCompletionItem): void {
+    if (!item) {
+      return;
+    }
+    item
+      .resolve()
+      .then(resolvedCompletionItem => {
+        this.set_doc_panel_placeholder(false);
+        if (resolvedCompletionItem === null) {
+          return;
+        }
+        this.refresh_doc_panel(item);
+      })
+      .catch(e => {
+        this.set_doc_panel_placeholder(false);
+        console.warn(e);
+      });
+  }
+
   active_completion_changed(
     renderer: LSPCompletionRenderer,
-    item: LazyCompletionItem
+    active_completion: ICompletionData
   ) {
+    let { item } = active_completion;
     if (!item.supportsResolution()) {
       if (item.isDocumentationMarkdown) {
         // TODO: remove once https://github.com/jupyterlab/jupyterlab/pull/9663 is merged and released
@@ -130,7 +153,7 @@ export class CompletionLabIntegration implements IFeatureLabIntegration {
 
     if (item.needsResolution()) {
       this.set_doc_panel_placeholder(true);
-      item.fetchDocumentation();
+      this.fetchDocumentation(item);
     } else if (item.isResolved()) {
       this.refresh_doc_panel(item);
     }
@@ -141,11 +164,46 @@ export class CompletionLabIntegration implements IFeatureLabIntegration {
 
     if (index - 1 >= 0) {
       const previous = items[index - 1] as LazyCompletionItem;
-      previous?.self?.fetchDocumentation();
+      this.resolve_and_update_from_item(previous?.self);
     }
     if (index + 1 < items.length) {
       const next = items[index + 1] as LazyCompletionItem;
-      next?.self?.fetchDocumentation();
+      this.resolve_and_update_from_item(next?.self);
+    }
+  }
+
+  private resolve_and_update_from_item(item: LazyCompletionItem) {
+    if (!item) {
+      return;
+    }
+    this.resolve_and_update(this.renderer, {
+      item: item,
+      element: item.element
+    });
+  }
+
+  private resolve_and_update(
+    renderer: LSPCompletionRenderer,
+    active_completion: ICompletionData
+  ) {
+    let { item, element } = active_completion;
+    if (!item.supportsResolution()) {
+      this.renderer.updateExtraInfo(item, element);
+      return;
+    }
+
+    if (item.isResolved()) {
+      this.renderer.updateExtraInfo(item, element);
+    } else {
+      // supportsResolution as otherwise would short-circuit above
+      item
+        .resolve()
+        .then(resolvedCompletionItem => {
+          this.renderer.updateExtraInfo(item, element);
+        })
+        .catch(e => {
+          this.console.warn(e);
+        });
     }
   }
 
diff --git a/packages/jupyterlab-lsp/src/features/completion/completion_handler.ts b/packages/jupyterlab-lsp/src/features/completion/completion_handler.ts
@@ -429,7 +429,7 @@ export class LSPConnector
         return {
           label: item.text as string,
           insertText: item.text as string,
-          type: item.type as string,
+          type: item.type === '<unknown>' ? undefined : (item.type as string),
           icon: this.icon_for(item.type as string),
           sortText: this.kernel_completions_first ? 'a' : 'z'
         };
diff --git a/packages/jupyterlab-lsp/src/features/completion/item.ts b/packages/jupyterlab-lsp/src/features/completion/item.ts
@@ -2,6 +2,7 @@ import { CompletionHandler } from '@jupyterlab/completer';
 import { LabIcon } from '@jupyterlab/ui-components';
 import * as lsProtocol from 'vscode-languageserver-types';
 import { LSPConnector } from './completion_handler';
+import { until_ready } from '../../utils';
 
 /**
  * To be upstreamed
@@ -43,6 +44,7 @@ export class LazyCompletionItem implements IExtendedCompletionItem {
    * performed by the JupyterLab completer internals.
    */
   public self: LazyCompletionItem;
+  public element: HTMLLIElement;
   private _currentInsertText: string;
 
   get isDocumentationMarkdown(): boolean {
@@ -137,32 +139,35 @@ export class LazyCompletionItem implements IExtendedCompletionItem {
     return this._resolved;
   }
 
-  public fetchDocumentation(): void {
-    if (!this.needsResolution()) {
-      return;
+  /**
+   * Resolve (fetch) details such as documentation.
+   */
+  public resolve(): Promise<lsProtocol.CompletionItem> {
+    if (this._resolved) {
+      return Promise.resolve(this);
+    }
+    if (!this.supportsResolution()) {
+      return Promise.resolve(this);
+    }
+    if (this._requested_resolution) {
+      return until_ready(() => this._resolved, 100, 50).then(() => this);
     }
 
     const connection = this.connector.get_connection(this.uri);
 
     this._requested_resolution = true;
 
-    connection
+    return connection
       .getCompletionResolve(this.match)
       .then(resolvedCompletionItem => {
-        this.connector.lab_integration.set_doc_panel_placeholder(false);
         if (resolvedCompletionItem === null) {
-          return;
+          return resolvedCompletionItem;
         }
         this._setDocumentation(resolvedCompletionItem.documentation);
         this._detail = resolvedCompletionItem.detail;
         // TODO: implement in pyls and enable with proper LSP communication
         // this.label = resolvedCompletionItem.label;
         this._resolved = true;
-        this.connector.lab_integration.refresh_doc_panel(this);
-      })
-      .catch(e => {
-        this.connector.lab_integration.set_doc_panel_placeholder(false);
-        console.warn(e);
       });
   }
 
diff --git a/packages/jupyterlab-lsp/src/features/completion/renderer.ts b/packages/jupyterlab-lsp/src/features/completion/renderer.ts
@@ -8,26 +8,107 @@ import { IRenderMime } from '@jupyterlab/rendermime';
 import { ILSPLogConsole } from '../../tokens';
 import { LazyCompletionItem } from './item';
 
+export interface ICompletionData {
+  item: LazyCompletionItem;
+  element: HTMLLIElement;
+}
+
 export class LSPCompletionRenderer
   extends Completer.Renderer
   implements Completer.IRenderer {
-  public activeChanged: Signal<LSPCompletionRenderer, LazyCompletionItem>;
+  // signals
+  public activeChanged: Signal<LSPCompletionRenderer, ICompletionData>;
+  public itemShown: Signal<LSPCompletionRenderer, ICompletionData>;
+  // observers
+  private visibilityObserver: IntersectionObserver;
+  private activityObserver: MutationObserver;
+  // element data maps (with weak references for better GC)
+  private elementToItem: WeakMap<HTMLLIElement, LazyCompletionItem>;
+  private wasActivated: WeakMap<HTMLLIElement, boolean>;
+
+  protected ITEM_PLACEHOLDER_CLASS = 'lsp-detail-placeholder';
+  protected EXTRA_INFO_CLASS = 'jp-Completer-typeExtended';
 
   constructor(protected options: LSPCompletionRenderer.IOptions) {
     super();
     this.activeChanged = new Signal(this);
+    this.itemShown = new Signal(this);
+    this.elementToItem = new WeakMap();
+    this.wasActivated = new WeakMap();
+
+    this.visibilityObserver = new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          if (!entry.isIntersecting) {
+            return;
+          }
+          let li = entry.target as HTMLLIElement;
+          let item = this.elementToItem.get(li);
+          this.itemShown.emit({
+            item: item,
+            element: li
+          });
+        });
+      },
+      {
+        threshold: 0.25
+      }
+    );
+
+    // note: there should be no need to unobserve deleted elements as per:
+    // https://stackoverflow.com/a/51106262/6646912
+    this.activityObserver = new MutationObserver(mutations => {
+      mutations.forEach(mutation => {
+        let li = mutation.target;
+        if (!(li instanceof HTMLLIElement)) {
+          return;
+        }
+        let inactive = !this.wasActivated.get(li);
+
+        if (li.classList.contains('jp-mod-active')) {
+          if (inactive) {
+            this.wasActivated.set(li, true);
+            let item = this.elementToItem.get(li);
+            this.activeChanged.emit({
+              item: item,
+              element: li
+            });
+          }
+        } else {
+          this.wasActivated.set(li, false);
+        }
+      });
+    });
   }
 
   protected getExtraInfo(item: LazyCompletionItem): string {
-    switch (this.options.integrator.settings.composite.labelExtra) {
+    const labelExtra = this.options.integrator.settings.composite.labelExtra;
+    switch (labelExtra) {
       case 'detail':
-        return item.detail;
+        return item?.detail;
       case 'type':
-        return item.type;
+        return item?.type?.toLowerCase?.();
       case 'source':
-        return item.source.name;
+        return item?.source?.name;
       case 'auto':
-        return [item.detail, item.type, item.source.name].filter(x => !!x)[0];
+        return [
+          item?.detail,
+          item?.type?.toLowerCase?.(),
+          item?.source?.name
+        ].filter(x => !!x)[0];
+      default:
+        this.options.console.warn(
+          'labelExtra does not match any of the expected values',
+          labelExtra
+        );
+    }
+  }
+
+  public updateExtraInfo(item: LazyCompletionItem, li: HTMLLIElement) {
+    const extraText = this.getExtraInfo(item);
+    if (extraText) {
+      const extraElement = li.getElementsByClassName(this.EXTRA_INFO_CLASS)[0];
+      extraElement.textContent = extraText;
     }
   }
 
@@ -38,31 +119,23 @@ export class LSPCompletionRenderer
     const li = super.createCompletionItemNode(item, orderedTypes);
 
     // make sure that an instance reference, and not an object copy is being used;
-    item = item.self;
+    const lsp_item = item.self;
 
     // only monitor nodes that have item.self as others are not our completion items
-    if (item) {
-      let inactive = true;
-      const observer = new MutationObserver(mutations => {
-        if (li.classList.contains('jp-mod-active')) {
-          if (inactive) {
-            inactive = false;
-            this.activeChanged.emit(item);
-          }
-        } else {
-          inactive = true;
-        }
-      });
-      observer.observe(li, {
+    if (lsp_item) {
+      lsp_item.element = li;
+      this.elementToItem.set(li, lsp_item);
+      this.activityObserver.observe(li, {
         attributes: true,
         attributeFilter: ['class']
       });
+      this.visibilityObserver.observe(li);
+      // TODO: build custom li from ground up
+      // this.updateExtraInfo(lsp_item, li)
+    } else {
+      this.updateExtraInfo(item, li);
     }
 
-    const extraText = this.getExtraInfo(item);
-    const extraElement = li.querySelector('.jp-Completer-typeExtended');
-    extraElement.textContent = extraText;
-
     return li;
   }
 
