schema explorer search better sorting and highlighting

Author: vieiralucas

apps/web/package.json

@@ -71,7 +71,6 @@
     "echarts-unofficial-v6": "^6.0.0",
     "express": "^4.18.2",
     "fast-diff": "^1.3.0",
-    "fastest-levenshtein": "^1.0.16",
     "form-data": "^4.0.0",
     "fuse.js": "^7.0.0",
     "immutability-helper": "^3.1.1",

apps/web/src/components/schemaExplorer/ColumnSchemaItem.tsx

@@ -1,12 +1,46 @@
+import { useMemo } from 'react'
 import ScrollBar from '../ScrollBar'
 import { DataSourceColumn } from '@briefer/types'
 
 interface Props {
+  search: string
   schemaName: string
   tableName: string
   column: DataSourceColumn
 }
 function ColumnSchemaItem(props: Props) {
+  const parts = useMemo(() => {
+    const searchParts = props.search.split('.').filter((s) => s.length > 0)
+    let columnSearch = searchParts[0]
+    if (searchParts.length <= 1) {
+      columnSearch = searchParts[0]
+    } else if (
+      searchParts.length <= 2 &&
+      props.tableName.includes(searchParts[0])
+    ) {
+      columnSearch = searchParts[1]
+    } else if (
+      searchParts.length <= 3 &&
+      props.schemaName.includes(searchParts[0]) &&
+      props.tableName.includes(searchParts[1])
+    ) {
+      columnSearch = searchParts[2]
+    }
+
+    const searchMatch = props.column.name.toLowerCase().indexOf(columnSearch)
+
+    return searchMatch !== -1
+      ? [
+          props.column.name.slice(0, searchMatch),
+          props.column.name.slice(
+            searchMatch,
+            searchMatch + columnSearch.length
+          ),
+          props.column.name.slice(searchMatch + columnSearch.length),
+        ]
+      : [props.column.name, '', '']
+  }, [props.search, props.column.name])
+
   return (
     <div className="gap-x-1.5 pl-12 pr-4 first:pt-1 pt-1.5 pb-1.5 hover:bg-gray-50 flex items-center justify-between">
       <div className="flex gap-x-1.5 items-center overflow-hidden w-full">
@@ -15,7 +49,11 @@ function ColumnSchemaItem(props: Props) {
           className="overflow-auto horizontal-only whitespace-nowrap w-full text-left"
           title={props.column.name}
         >
-          <h5 className="font-mono text-[11px]">{props.column.name}</h5>
+          <h5 className="font-mono text-[11px]">
+            <span>{parts[0]}</span>
+            <span className="font-semibold">{parts[1]}</span>
+            <span>{parts[2]}</span>
+          </h5>
         </ScrollBar>
       </div>
       <div className="uppercase text-[10px] text-gray-400 min-w-16 text-right font-normal overflow-hidden w-full">

apps/web/src/components/schemaExplorer/SchemaItem.tsx

@@ -4,6 +4,7 @@ import TableSchemaItem from './TableSchemaItem'
 import ColumnSchemaItem from './ColumnSchemaItem'
 
 interface Props {
+  search: string
   schemaItem: SchemaItem
   onToggleSchema: (schema: string) => void
   onToggleTable: (schema: string, table: string) => void
@@ -14,6 +15,7 @@ function SchemaItem(props: Props) {
     case 'schema':
       return (
         <SchemaSchemaItem
+          search={props.search}
           name={props.schemaItem.name}
           schema={props.schemaItem.schema}
           isOpen={props.schemaItem.isOpen}
@@ -23,6 +25,7 @@ function SchemaItem(props: Props) {
     case 'table':
       return (
         <TableSchemaItem
+          search={props.search}
           schemaName={props.schemaItem.schemaName}
           name={props.schemaItem.name}
           table={props.schemaItem.table}
@@ -33,6 +36,7 @@ function SchemaItem(props: Props) {
     case 'column':
       return (
         <ColumnSchemaItem
+          search={props.search}
           schemaName={props.schemaItem.schemaName}
           tableName={props.schemaItem.tableName}
           column={props.schemaItem.column}

apps/web/src/components/schemaExplorer/SchemaList.tsx

@@ -45,14 +45,15 @@ export default function SchemaList(props: Props) {
       return (
         <div key={key} style={style}>
           <SchemaItem
+            search={search}
             schemaItem={item}
             onToggleSchema={toggleSchema}
             onToggleTable={toggleTable}
           />
         </div>
       )
     },
-    [schemaList, toggleSchema, toggleTable]
+    [schemaList, toggleSchema, toggleTable, search]
   )
 
   return (

apps/web/src/components/schemaExplorer/SchemaSchemaItem.tsx

@@ -2,18 +2,33 @@ import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline'
 import ScrollBar from '../ScrollBar'
 import { ShapesIcon } from 'lucide-react'
 import { DataSourceSchema } from '@briefer/types'
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 
 interface Props {
+  search: string
   name: string
   schema: DataSourceSchema
   isOpen: boolean
   onToggle: (schema: string) => void
 }
 function SchemaSchemaItem(props: Props) {
+  const parts = useMemo(() => {
+    const schemaSearch = props.search.split('.')[0]
+    const searchMatch = props.name.toLowerCase().indexOf(schemaSearch)
+
+    return searchMatch !== -1
+      ? [
+          props.name.slice(0, searchMatch),
+          props.name.slice(searchMatch, searchMatch + props.search.length),
+          props.name.slice(searchMatch + props.search.length),
+        ]
+      : [props.name, '', '']
+  }, [props.search, props.name])
+
   const onToggle = useCallback(() => {
     props.onToggle(props.name)
   }, [props.onToggle, props.name])
+
   return (
     <button
       key={props.name}
@@ -26,7 +41,11 @@ function SchemaSchemaItem(props: Props) {
           className="overflow-auto horizontal-only whitespace-nowrap w-full text-left"
           title={props.name}
         >
-          <h4>{props.name}</h4>
+          <h4>
+            <span>{parts[0]}</span>
+            <span className="font-semibold">{parts[1]}</span>
+            <span>{parts[2]}</span>
+          </h4>
         </ScrollBar>
       </div>
       <div className="pl-1">

apps/web/src/components/schemaExplorer/TableSchemaItem.tsx

@@ -1,20 +1,40 @@
 import { Grid3x3Icon } from 'lucide-react'
 import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline'
 import ScrollBar from '../ScrollBar'
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import { DataSourceTable } from '@briefer/types'
 
 interface Props {
+  search: string
   schemaName: string
   name: string
   table: DataSourceTable
   isOpen: boolean
   onToggle: (schema: string, table: string) => void
 }
 function TableSchemaItem(props: Props) {
+  const parts = useMemo(() => {
+    const searchParts = props.search.split('.').filter((s) => s.length > 0)
+    let tableSearch = searchParts[0]
+    if (searchParts.length > 1 && props.schemaName.includes(searchParts[0])) {
+      tableSearch = searchParts[1]
+    }
+
+    const searchMatch = props.name.toLowerCase().indexOf(tableSearch)
+
+    return searchMatch !== -1
+      ? [
+          props.name.slice(0, searchMatch),
+          props.name.slice(searchMatch, searchMatch + tableSearch.length),
+          props.name.slice(searchMatch + tableSearch.length),
+        ]
+      : [props.name, '', '']
+  }, [props.search, props.name])
+
   const onToggle = useCallback(() => {
     props.onToggle(props.schemaName, props.name)
   }, [props.onToggle, props.schemaName, props.name])
+
   return (
     <button
       className="pl-6 pr-3.5 py-2 cursor-pointer hover:bg-gray-50 flex items-center justify-between w-full font-normal"
@@ -26,7 +46,9 @@ function TableSchemaItem(props: Props) {
           className="overflow-auto horizontal-only whitespace-nowrap w-full text-left"
           title={props.name}
         >
-          {props.name}
+          <span>{parts[0]}</span>
+          <span className="font-semibold">{parts[1]}</span>
+          <span>{parts[2]}</span>
         </ScrollBar>
       </div>
       <div className="pl-1">

apps/web/src/hooks/useSchemaList.ts

@@ -4,7 +4,6 @@ import {
   DataSourceTable,
 } from '@briefer/types'
 import { Map, Set, List } from 'immutable'
-import { distance as levenshtein } from 'fastest-levenshtein'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
 export type SchemaItem =
@@ -172,19 +171,57 @@ function useSchemaList(schemas: Map<string, DataSourceSchema>): UseSchemaList {
       tableName: string
       column: DataSourceColumn
     }[] = []
-    schemas.forEach((schema, schemaName) => {
-      Object.entries(schema.tables).forEach(([tableName, table]) => {
-        table.columns.forEach((column) => {
-          workQueue.push({
-            schema,
-            schemaName,
-            table,
-            tableName,
-            column,
+    Array.from(schemas.entries())
+      .sort(([a], [b]) => {
+        const schemaTerm = searchTerm.split('.')[0]
+
+        // compute how many characters are left after removing the search term
+        // the one that has less characters left should be prioritized
+        const aDiff = a.replace(schemaTerm, '').length
+        const bDiff = b.replace(schemaTerm, '').length
+
+        const diff = aDiff - bDiff
+        if (diff === 0) {
+          return a.localeCompare(b)
+        } else if (diff < 0) {
+          return -1
+        } else {
+          return 1
+        }
+      })
+      .forEach(([schemaName, schema]) => {
+        Object.entries(schema.tables)
+          .sort(([a], [b]) => {
+            const searchTerms = searchTerm.split('.')
+            let tableTerm = searchTerms[0]
+            if (searchTerms.length > 1 && schemaName.includes(searchTerms[0])) {
+              tableTerm = searchTerms[1]
+            }
+
+            const aDiff = a.replace(tableTerm, '').length
+            const bDiff = b.replace(tableTerm, '').length
+
+            const diff = aDiff - bDiff
+            if (diff === 0) {
+              return a.localeCompare(b)
+            } else if (diff < 0) {
+              return -1
+            } else {
+              return 1
+            }
+          })
+          .forEach(([tableName, table]) => {
+            table.columns.forEach((column) => {
+              workQueue.push({
+                schema,
+                schemaName,
+                table,
+                tableName,
+                column,
+              })
+            })
           })
-        })
       })
-    })
 
     Promise.resolve().then(async () => {
       if (!active) {
@@ -213,12 +250,7 @@ function useSchemaList(schemas: Map<string, DataSourceSchema>): UseSchemaList {
           fullColumnName
             .trim()
             .toLowerCase()
-            .includes(search.trim().toLowerCase()) ||
-          levenshtein(
-            search.trim().toLowerCase(),
-            fullColumnName.trim().toLowerCase()
-          ) <=
-            fullColumnName.length / 2
+            .includes(search.trim().toLowerCase())
         ) {
           if (!addedSchemas.has(work.schemaName)) {
             result.push({

yarn.lock

@@ -7909,11 +7909,6 @@ [email protected]:
   dependencies:
     strnum "^1.0.5"
 
-fastest-levenshtein@^1.0.16:
-  version "1.0.16"
-  resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz#210e61b6ff181de91ea9b3d1b84fdedd47e034e5"
-  integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==
-
 fastq@^1.6.0:
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.17.1.tgz#2a523f07a4e7b1e81a42b91b8bf2254107753b47"