Merge pull request #523 from krassowski/completion/smarter-use-of-sum-of-squares

Only search for label match if different from insertText match

Author: krassowski

CHANGELOG.md

@@ -7,19 +7,20 @@
   - the priority of the completions from kernel can now be changed by switching new `kernelCompletionsFirst` setting ([#520])
   - completer panel will now always render markdown documentation if available ([#520])
     - the implementation re-renders the panel as it is the best we can do until [jupyterlab#9663](https://github.com/jupyterlab/jupyterlab/pull/9663) is merged
-  - the completer now uses `filterText` and `sortText` if available to better filter and sort completions ([#520])
+  - the completer now uses `filterText` and `sortText` if available to better filter and sort completions ([#520], [#523])
   - completer `suppressInvokeIn` setting was removed; `suppressContinuousHintingIn` and `suppressTriggerCharacterIn` settings were added ([#521])
   - `suppressContinuousHintingIn` by default includes `def` to improve the experience when writing function names ([#521])
 
 - bug fixes:
   - user-invoked completion in strings works again ([#521])
   - completer documentation will now consistently show up after filtering the completion items ([#520])
-  - completions containing HTML-like syntax will be displayed properly (an upstream issue) ([#520])
+  - completions containing HTML-like syntax will be displayed properly (an upstream issue) ([#520], [#523])
   - diagnostics panel will no longer break when foreign documents (e.g. `%%R` cell magics) are removed ([#522])
 
 [#520]: https://github.com/krassowski/jupyterlab-lsp/pull/520
 [#521]: https://github.com/krassowski/jupyterlab-lsp/pull/521
 [#522]: https://github.com/krassowski/jupyterlab-lsp/pull/522
+[#523]: https://github.com/krassowski/jupyterlab-lsp/pull/523
 
 ### `@krassowski/jupyterlab-lsp 3.3.1` (2020-02-07)
 

packages/jupyterlab-lsp/src/features/completion/model.spec.ts

@@ -35,6 +35,16 @@ describe('LSPCompleterModel', () => {
     model = new LSPCompleterModel();
   });
 
+  it('returns escaped when no query', () => {
+    model.setCompletionItems([jupyter_icon_completion]);
+    model.query = '';
+
+    let markedItems = model.completionItems();
+    expect(markedItems[0].label).to.be.equal(
+      '<i class="jp-icon-jupyter"></i> Jupyter'
+    );
+  });
+
   it('marks html correctly', () => {
     model.setCompletionItems([jupyter_icon_completion]);
     model.query = 'Jup';
@@ -73,4 +83,23 @@ describe('LSPCompleterModel', () => {
     filteredItems = model.completionItems();
     expect(filteredItems.length).to.equal(0);
   });
+
+  it('marks appropriate part of label when filterText matches', () => {
+    model.setCompletionItems([jupyter_icon_completion]);
+    // font is in filterText but not in label
+    model.query = 'font';
+
+    // nothing should get highlighted
+    let markedItems = model.completionItems();
+    expect(markedItems[0].label).to.be.equal(
+      '<i class="jp-icon-jupyter"></i> Jupyter'
+    );
+
+    // i is in both label and filterText
+    model.query = 'i';
+    markedItems = model.completionItems();
+    expect(markedItems[0].label).to.be.equal(
+      '&lt;<mark>i</mark> class="jp-icon-jupyter"&gt;&lt;/i&gt; Jupyter'
+    );
+  });
 });

packages/jupyterlab-lsp/src/features/completion/model.ts

@@ -73,9 +73,12 @@ export class GenericCompleterModel<
 
       let matched: boolean;
 
+      let filterText: string = null;
+      let filterMatch: StringExt.IMatchResult;
+
       if (query) {
-        const filterText = this.getFilterText(item);
-        let filterMatch = StringExt.matchSumOfSquares(filterText, query);
+        filterText = this.getFilterText(item);
+        filterMatch = StringExt.matchSumOfSquares(filterText, query);
         matched = !!filterMatch;
       } else {
         matched = true;
@@ -86,25 +89,32 @@ export class GenericCompleterModel<
         // If the matches are substrings of label, highlight them
         // in this part of the label that can be highlighted (must be a prefix),
         // which is intended to avoid highlighting matches in function arguments etc.
-        const labelPrefix = escapeHTML(this.getHighlightableLabelRegion(item));
+        let labelMatch: StringExt.IMatchResult;
+        if (query) {
+          let labelPrefix = escapeHTML(this.getHighlightableLabelRegion(item));
+          if (labelPrefix == filterText) {
+            labelMatch = filterMatch;
+          } else {
+            labelMatch = StringExt.matchSumOfSquares(labelPrefix, query);
+          }
+        }
 
-        let match = StringExt.matchSumOfSquares(labelPrefix, query);
         let label: string;
         let score: number;
 
-        if (match) {
+        if (labelMatch) {
           // Highlight label text if there's a match
           // there won't be a match if filter text includes additional keywords
           // for easier search that are not a part of the label
           let marked = StringExt.highlight(
             escapeHTML(item.label),
-            match.indices,
+            labelMatch.indices,
             this._markFragment
           );
           label = marked.join('');
-          score = match.score;
+          score = labelMatch.score;
         } else {
-          label = item.label;
+          label = escapeHTML(item.label);
           score = 0;
         }
         // preserve getters (allow for lazily retrieved documentation)