Sort LaTeX symbol search results based on the matching letters' cases

Also bring the EcmaScript version a bit more up to date, thereby allowing the use of `Object.entries`.

Author: nchilada

src/extension.ts

@@ -1,27 +1,49 @@
 import * as vscode from 'vscode';
 import {latexSymbols} from './latex';
-import {LatexCompletionItemProvider} from './completion'
+import { LatexCompletionItemProvider } from './completion';
+import { sortedItemsForQuery } from './sort';
 
 const RE_LATEX_NAME = /(\\\S+)/g;
 
-let latexItems: vscode.QuickPickItem[] = [];
-let pickOptions: vscode.QuickPickOptions = {
-    matchOnDescription: true,
-};
-
 export function activate(context: vscode.ExtensionContext) {
 
-    latexItems = [];
-    for (let name in latexSymbols) {
-        latexItems.push({
-            description: name,
-            label: latexSymbols[name],
+    const insertion = vscode.commands.registerCommand('unicode-latex.insertMathSymbol', function showQuickPickForLatexSymbols() {
+        /*
+         * Similar to `vscode.window.showQuickPick`,
+         * but in addition to filtering items (based on case-_insensitive_ substring search),
+         * this also dynamically sorts the results based on how closely they case-_sensitively_ match the search query
+         * rather than naively preserving the order in which items were provided when first opening the picker.
+         * (Compared to LaTeX symbol names, other VS Code functionality that uses the picker
+         * presumably doesn't have as strong a need for case-sensitivity.)
+         * Note that the various case-independent equivalence classes, themselves,
+         * are still arranged in the order in which their first entries appeared in `latex.ts`.
+         */
+
+        const quickPick = vscode.window.createQuickPick();
+        quickPick.matchOnDescription = true;
+
+        // Pre-populate the picker with some symbols visible even before the user starts typing a query,
+        // thus matching the behavior of VS Code's file opener and command palette
+        // (rather than starting with an empty dropdown menu).
+        quickPick.items = sortedItemsForQuery('', latexSymbols);
+
+        quickPick.onDidChangeValue((query: string) => {
+            quickPick.items = sortedItemsForQuery(query, latexSymbols);
         });
-    }
 
-    let insertion = vscode.commands.registerCommand('unicode-latex.insertMathSymbol', () => {
-        vscode.window.showQuickPick(latexItems, pickOptions).then(insertSymbol);
+        quickPick.onDidAccept(() => {
+            const item = quickPick.selectedItems[0];
+            quickPick.hide();
+            insertSymbol(item);
+        });
+
+        quickPick.onDidHide(() => {
+            quickPick.dispose();
+        });
+
+        quickPick.show();
     });
+
     let replacement = vscode.commands.registerCommand('unicode-latex.replaceLatexNames', () => {
         replaceWithUnicode(vscode.window.activeTextEditor);
     });

src/sort.ts

@@ -0,0 +1,70 @@
+export function hammingDistance(query: string, latexName: string): number {
+    // Count the number of case-toggling "edits" needed to equate:
+    // - the query string
+    // - the substring of the LaTeX name beginning at `indexOfFirstCaseInsensitiveMatch`
+    //
+    // Note that the LaTeX name includes its leading "\",
+    // which might be convenient for users who habitually type "\" directly into the picker as part of the query string,
+    // especially if the user has not bound the `insertMathSymbol` command to a keybinding that happens to include a backslash.
+    // (A backslash case-folds to itself, so it contributes neither a mismatch nor a phantom match either way, FWIW.)
+    const indexOfFirstCaseInsensitiveMatch = latexName.toLowerCase().indexOf(query.toLowerCase());
+    if (indexOfFirstCaseInsensitiveMatch < 0) {
+        return Infinity;
+    }
+
+    let distance = 0;
+    for (let i = 0; i < query.length; i++) {
+        if (query[i] !== latexName[indexOfFirstCaseInsensitiveMatch + i]) {
+            distance++;
+        }
+    }
+    return distance;
+}
+
+export function sortedItemsForQuery(
+    query: string,
+    symbols: Record<string, string>
+): Array<{ description: string; label: string }> {
+    const canonicalQuery = query.toLowerCase();
+
+    // Contiguous, case-insensitive substring search is what QuickPick itself uses for filtering
+    // (see https://github.com/microsoft/vscode/blob/0ebc49192dd9e2004396003d7590cd6340daec04/src/vs/base/common/filters.ts#L67-L75).
+    // Pre-filtering by the same criterion lets us dynamically _reorder_ those results based on
+    // the casing of the user's query before handing the list back to QuickPick.
+    const latexSymbolsByCanonicalForm = new Map<string, string[]>();
+    for (const latexName in symbols) {
+        const canonicalName = latexName.toLowerCase();
+        if (!canonicalName.includes(canonicalQuery)) {
+            continue;
+        }
+
+        let matchingLatexSymbols = latexSymbolsByCanonicalForm.get(canonicalName);
+        if (!matchingLatexSymbols) {
+            matchingLatexSymbols = [];
+            latexSymbolsByCanonicalForm.set(canonicalName, matchingLatexSymbols);
+        }
+        matchingLatexSymbols.push(latexName);
+    }
+
+    const sortedItems: Array<{ description: string; label: string }> = [];
+    // Walk between case-independent equivalence classes in the order in which their first entries appeared in `symbols`,
+    // deliberately preserving (at least some of) that source ordering in the displayed list.
+    // This relies on `Map.prototype.values()` iterating in insertion order, per EcmaScript spec,
+    // and also relies on `for...in` iterating over a string-keyed object literal in insertion order, also per EcmaScript spec.
+    for (const matchingLatexSymbols of latexSymbolsByCanonicalForm.values()) {
+        // Decorate–sort–undecorate (computing each member's `hammingDistance` exactly once)
+        // allows us to avoid the O(n log n) re-evaluations that a bare
+        // ```
+        //     (a, b) => hammingDistance(a, query) - hammingDistance(b, query)
+        // ```
+        // would otherwise incur.
+        const sortedLatexSymbols = matchingLatexSymbols
+            .map((latexName) => ({ latexName, distance: hammingDistance(query, latexName) }))
+            .sort((a, b) => a.distance - b.distance);
+        for (const { latexName } of sortedLatexSymbols) {
+            sortedItems.push({ description: latexName, label: symbols[latexName] });
+        }
+    }
+
+    return sortedItems;
+}

tsconfig.json

@@ -1,9 +1,11 @@
 {
     "compilerOptions": {
         "module": "commonjs",
-        "target": "es6",
+        "target": "ES2022",
+        "lib": [
+            "ES2022"
+        ],
         "outDir": "out",
-        "lib": ["es6"],
         "sourceMap": true,
         "rootDir": "."
     },