Add setting and mark in black

packages/filebrowser-extension/schema/browser.json

@@ -21,6 +21,12 @@
       "title": "Navigate to current directory",
       "description": "Whether to automatically navigate to a document's current directory",
       "default": false
+    },
+    "useFuzzyFilter": {
+      "type": "boolean",
+      "title": "Filter on file name with a fuzzy search",
+      "description": "Whether to apply fuzzy algorithm while filtering on file names",
+      "default": true
     }
   },
   "additionalProperties": false,

packages/filebrowser-extension/src/index.ts

@@ -354,6 +354,7 @@ function activateBrowser(
     });
 
     let navigateToCurrentDirectory: boolean = false;
+    let useFuzzyFilter: boolean = true;
 
     void settingRegistry
       .load('@jupyterlab/filebrowser-extension:browser')
@@ -367,6 +368,12 @@ function activateBrowser(
         navigateToCurrentDirectory = settings.get('navigateToCurrentDirectory')
           .composite as boolean;
         browser.navigateToCurrentDirectory = navigateToCurrentDirectory;
+        settings.changed.connect(settings => {
+          useFuzzyFilter = settings.get('useFuzzyFilter').composite as boolean;
+          browser.useFuzzyFilter = useFuzzyFilter;
+        });
+        useFuzzyFilter = settings.get('useFuzzyFilter').composite as boolean;
+        browser.useFuzzyFilter = useFuzzyFilter;
       });
 
     // Whether to automatically navigate to a document's current directory

packages/filebrowser/src/browser.ts

@@ -105,6 +105,7 @@ export class FileBrowser extends Widget {
 
     this._filenameSearcher = FilenameSearcher({
       listing: this._listing,
+      useFuzzyFilter: this._useFuzzyFilter,
       placeholder: 'Filter files by name'
     });
 
@@ -302,6 +303,28 @@ export class FileBrowser extends Widget {
     this._navigateToCurrentDirectory = value;
   }
 
+  /**
+   * Whether to use fuzzy filtering on file names.
+   */
+  set useFuzzyFilter(value: boolean) {
+    this._useFuzzyFilter = value;
+
+    this._filenameSearcher = FilenameSearcher({
+      listing: this._listing,
+      useFuzzyFilter: this._useFuzzyFilter,
+      placeholder: 'Filter files by name'
+    });
+    this._filenameSearcher.addClass(FILTERBOX_CLASS);
+
+    this.layout.removeWidget(this._filenameSearcher);
+    this.layout.removeWidget(this._crumbs);
+    this.layout.removeWidget(this._listing);
+
+    this.layout.addWidget(this._filenameSearcher);
+    this.layout.addWidget(this._crumbs);
+    this.layout.addWidget(this._listing);
+  }
+
   // Override Widget.layout with a more specific PanelLayout type.
   layout: PanelLayout;
 
@@ -311,6 +334,7 @@ export class FileBrowser extends Widget {
   private _manager: IDocumentManager;
   private _directoryPending: boolean;
   private _navigateToCurrentDirectory: boolean;
+  private _useFuzzyFilter: boolean = true;
 }
 
 /**

packages/filebrowser/src/search.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import { StringExt } from '@lumino/algorithm';
 
@@ -18,6 +18,7 @@ import { DirListing } from './listing';
  */
 export interface IFilterBoxProps {
   listing: DirListing;
+  useFuzzyFilter: boolean;
   placeholder?: string;
 }
 
@@ -97,6 +98,12 @@ function fuzzySearch(item: Contents.IModel, query: string): IScore | null {
 const FilterBox = (props: IFilterBoxProps) => {
   const [filter, setFilter] = useState('');
 
+  useEffect(() => {
+    props.listing.model.setFilter((item: Contents.IModel) => {
+      return true;
+    });
+  }, []);
+
   /**
    * Handler for search input changes.
    */
@@ -104,14 +111,24 @@ const FilterBox = (props: IFilterBoxProps) => {
     const target = e.target as HTMLInputElement;
     setFilter(target.value);
     props.listing.model.setFilter((item: Contents.IModel) => {
-      // Run the fuzzy search for the item and query.
-      let score = fuzzySearch(item, target.value);
-      // Ignore the item if it is not a match.
-      if (!score) {
+      if (props.useFuzzyFilter) {
+        // Run the fuzzy search for the item and query.
+        let score = fuzzySearch(item, target.value);
+        // Ignore the item if it is not a match.
+        if (!score) {
+          item.indices = [];
+          return false;
+        }
+        item.indices = score.indices;
+        return true;
+      }
+      const i = item.name.indexOf(target.value);
+      if (i === -1) {
         item.indices = [];
         return false;
       }
-      item.indices = score.indices;
+      const indices = [...Array(target.value.length).keys()].slice(i);
+      item.indices = indices;
       return true;
     });
   };
@@ -132,6 +149,10 @@ const FilterBox = (props: IFilterBoxProps) => {
  */
 export const FilenameSearcher = (props: IFilterBoxProps) => {
   return ReactWidget.create(
-    <FilterBox listing={props.listing} placeholder={props.placeholder} />
+    <FilterBox
+      listing={props.listing}
+      useFuzzyFilter={props.useFuzzyFilter}
+      placeholder={props.placeholder}
+    />
   );
 };

packages/filebrowser/style/base.css

@@ -139,6 +139,12 @@
   background-color: var(--jp-layout-color1);
 }
 
+.jp-DirListing-content mark {
+  color: var(--jp-ui-font-color0);
+  background-color: transparent;
+  font-weight: bold;
+}
+
 /* Style the directory listing content when a user drops a file to upload */
 .jp-DirListing.jp-mod-native-drop .jp-DirListing-content {
   outline: 5px dashed rgba(128, 128, 128, 0.5);